Міністерство освіти і науки України

Івано-Франківський національний технічний університет нафти і газу

Кафедра ІПЗ

Лабораторна робота №3
«HTML, CSS. Використання таблиць та стилів»

Виконала
ст. гр. ІП-19-2
Хомин Ю. В.
Перевірила:
Піх М. М.

Івано-Франківськ
2022
Тема: HTML, CSS. Використання таблиць та стилів
Мета: ознайомитись із базовими прийомами верстки статичних HTML
документів (веб-сторінок), історичними основами розділення моделі даних та їх
представлення (вигляду), роботи з тегами розмітки.
 Короткі відомості
Hypertext Markup Language (HTML) (укр. Мова розмітки гіпертекстових
документів) — стандартна мова розмітки для створення веб-сторінок і веб-
додатків. З Cascading Style Sheets (CSS) і JavaScript, вона утворює тріаду
основних технологій для World Wide Web.
Веб-браузери отримують HTML-документи з веб-сервера або з локальної
пам'яті і передають документи в мультимедійні веб-сторінки. HTML описує
структуру веб-сторінки семантично і спочатку включені сигнали для
зовнішнього вигляду документа.
Елементи HTML є будівельними блоками сторінок HTML. За допомогою
конструкцій HTML, зображення та інші об'єкти, такі як інтерактивні форми,
можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для
створення структурованих документів, позначаючи структурну семантику
тексту, наприклад заголовки, абзаци, списки, посилання, цитати та інші
елементи. Елементи HTML окреслені тегами , написаними з використанням
кутових дужок. Браузери не показують теги HTML, але використовують їх для
інтерпретації вмісту сторінки.
CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) —
спеціальна мова, що використовується для опису зовнішнього вигляду
сторінок, написаних мовами розмітки даних.
Найчастіше CSS використовують для візуальної презентації сторінок,
написаних HTML та XHTML, але формат CSS може застосовуватися до інших
видів XML-документів.
Специфікації CSS були створені та розвиваються Консорціумом
Всесвітньої мережі.
CSS має різні рівні та профілі. Наступний рівень CSS створюється на
основі попередніх, додаючи нову функціональність або розширюючи вже
наявні функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі —
сукупність правил CSS одного або більше рівнів, створені для окремих типів
пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів,
мобільних пристроїв тощо.
CSS (каскадна або блочна) верстка прийшла на заміну табличній верстці веб-
сторінок. Головна перевага блочної верстки — розділення змісту сторінки
(даних) та їхньої візуальної презентації.
 Порядок виконання роботи
Створити HTML сторінку власного резюме, перші три рядочки мають
бути такі як у всіх роботах (стандартне оформлення):
Перший рядок - ПІБ, група, варіант. Оформлення: звичайний текст у
абзаці.
Другий рядок - Лабораторна робота №3. Оформлення: текст у абзаці,
напівжирний курсив, вирівнювання від центра.
Третій рядок - тема: “HTML, CSS. Використання таблиць та стилів”.
Оформлення: курсив, вирівнювання від центра, текст у абзаці.
Нижче оформити власне резюме у вигляді таблиці. Резюме оформляємо у
стилі звичайного резюме (табличка з двох стовпчиків).
Усе оформлення виконуємо із використанням стилів. Стилі CSS
використовуємо лише із зовнішньої таблиці (підключено окремий файл *.css).
Інтегровані (вбудовані) стилі не використовувати (під загрозою зниження
оцінки!).
Оформити роботу кольорами. Рядки стандартного оформлення
“заливаємо” кожен іншим кольором. Для таблички потрібно задати обрамлення
та фоновий колір (при бажанні, можна виділити кольором окремі клітинки чи
інші елементи таблиці). Кольори добирати із умови зручності читання (можна
скористатись спеціалізованими ресурсами чи розробками із Інтернет, факт
використання має бути зафіксовано у звіті).

Хід роботи
1. Відкриваю термінал Ubuntu та створюю файл HTML сторінки
lab3.html.erb.

2. Відкриваю його в блокноті для редагування та додаю інформацію

відповідно до завдання.
 Запускаю сервер та відкриваю відповідну сторінку. Вона має такий вигляд:

3. Для оформлення сторінки створюю файл CSS.

4. Додаю класи до відповідних тегів створеної HTML сторінки. За

допомогою класів в CSS файлі додаю стилі для елементів HTML сторінки. CSS
файл має такий вигляд:
 5. Для того, щоб стиль застосовувався до сторінки, у файлі HTML
підключаю файл CSS за допомогою рядка <link rel=”stylesheet” href=”lab3.css”>:

6. Готова сторінка:
Висновок: виконуючи лабораторну роботу, я ознайомилась із базовими
прийомами статичних HTML документів та їх оформлення з використанням
стилів CSS.