Питання для самостійної роботи
1. Як вбудовуються зображення в HTML-документи?
2. Опишіть атрибути тега <img>.
3. Яким чином можна змінювати розміри зображення та його розташування на сторінці?
4. Які теги використовуються при створенні карти-зображення.
Література:
1. https://html.com
2. https://webref.ru
3. http://htmlbook.ru
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. — СПб.: Питер, 2014. — 720 с.:
5. Мержевич В. Самоучитель HTML.
6. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. — СПб.: Питер, 2014. — 320 с.
7. Макфарланд Д. Большая книга CSS3. 3-е изд. — СПб.: Питер, 2014. — 608 с.
Звіт до роботи
1. Оформити лабораторну роботу в зошиті. Записати тему, мету, відповісти на запитання для самостійної підготовки.
2. Виконати завдання згідно свого варіанту.
3. Зробити висновок.
Лабораторна робота №3
Таблиці та списки. Робота з кольором
Мета роботи: навчитися створювати таблиці і редагувати їх вміст, а також списки в розмітці; розглянути принципи роботи з кольором в розмітці.
Знати: принципи створення таблиць та їх редагування в HTML; особливості роботи зі списками; принципи роботи з кольором в розмітці.
Уміти: створювати таблиці; редагувати таблиці; конструювати складні таблиці; верстати з допомогою таблиць веб-сторінки; працювати з кольором; створювати і редагувати впорядковані і невпорядковані списки; створювати списки зі своїм маркером.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.
Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
Тег <Table> є основним контейнером, в якому розміщується таблиця. Саме в ньому вказуються всі атрибути для таблиці, і розміщується вся розмітка таблиці.
Таблиця часто використовується для візуалізації табличних даних, а також застосовується для реалізації верстки певних сторінок.
Іноді весь каркас сторінки будується за допомогою таблиць, але останнім часом ця техніка застосовується рідко.
Всередині спершу створюються рядки, які розміщені в контейнери tr, далі комірки, які розміщені в тезі td.
<th> </ th> - тег, який описує спеціальний вид комірок, комірок для заголовків. При цьому текст всередині цих комірок вважається більш важливим, ніж у простих комірках, і набуває особливих властивостей - текст центрується і отримує напівжирний шрифт.
Тег <caption> </ caption> визначає назву таблиці, яка розміщується зверху над таблицею, і вирівнюється по центру. Сам тег слід розмістити відразу після відкриваючого тега <table>.
Не слід залишати порожні клітинки, так як в деяких браузерах вони будуть відображені некоректно і згодом вплинуть на візуалізацію всієї таблиці.
Якщо Вам дійсно необхідно залишити їх порожніми, розмістіть там пробіл, вказавши його код  .
Тег <table>, як і інші теги, має свої особливі атрибути:
– Border рамка таблиці, як навколо неї, так і всередині між комірками.
– Cellpadding - відступи всередині комірок.
– Cellspacing - відступи всередині таблиці між комірками і до меж таблиці.
– Bgcolor - колір фону таблиці.
– Background - зображення, яке буде використано в якості фону таблиці.
Атрибут colspan встановлює число комірок, які повинні бути об'єднані по горизонталі. Цей атрибут має сенс для таблиць, що складаються з декількох рядків.
Атрибут rowspan встановлює число комірок, які повинні бути об'єднані по вертикалі. Цей атрибут має сенс для таблиць, що складаються з декількох рядків.
Тег <ol> </ ol> є контейнером для упорядкованих списків, так і розшифровується ordered list.
Усі елементи списку розміщуються всередині тегів <li> ... </ li>, які в свою чергу розміщуються в загальний контейнер <ol> </ ol>.
У всіх списків є атрибут type, який визначає тип маркера. У упорядкованих списків він може набувати таких значень:
1. A - пункти списку будуть пронумеровані великими латинськими літерами.
2. a - пункти списку будуть пронумеровані маленькими латинськими буквами.
3. I - пункти списку будуть пронумеровані великими римськими цифрами.
4. i - пункти списку будуть пронумеровані маленькими римськими цифрами.
Тег <ul> </ ul> є контейнером для неупорядкованих списків, так і розшифровується unordered list.
Всі елементи списку розміщуються всередині тегів <li> ... </ li>, які в свою чергу розміщуються в загальний контейнер <ul> </ ul>.
У всіх списків є атрибут type, який визначає тип маркера. У невпорядкованих списків він може набувати таких значень:
1. Disc - вказує маркер в формі чорного зафарбованого кола.
2. Circle - вказує маркер в формі порожнього кола.
3. Square - вказує маркер в формі чорного зафарбованого квадрата.
4. None - вказує, що список необхідно реалізувати без маркера.
Свій маркер можна встановити, вказавши в атрибуті style властивість list-style-image: url (), вказавши в ньому адресу зображення, яке буде використано в якості маркера.
В елементи списку можна вкладати не тільки текстовий вміст, а й інші списки.
Таким чином будуть реалізовані вкладені списки, а точніше підсписки. При цьому за замовчуванням у вкладених списках маркер буде відмінним від маркера головного списку.
Існують спеціальні списки для визначень, для цього слід використовувати контейнер <dl> ... </ dl>.
Елементи таких списків складаються з двох складових: перша - це сам термін, розміщений в тег <dt> ... </ dt>, другий - саме визначення, розміщене в тезі <dd> ... </ dd>.
Існують дві основні колірні моделі, які застосовуються при розробці дизайну поліграфії і веб-ресурсів: RGB (Red Green Blue) та CMYK (Cyan, Magenta, Yellow, blacK).
Деякі кольори на практиці часто використовуються і тому мають конкретні імена. Але запам'ятати їх все людині складно, тому краще всього користуватися тільки тими семантичними одиницями, які Ви вже використовували раніше, і точно знаєте як вони будуть відображені.
Колір в RGB формується в результаті змішування цих трьох кольорів, і Ви, як верстальник, можете спробувати скласти свій колір, вказавши явно, яку насиченість і який колір Ви хотіли б використовувати: color: rgb (123, 12, 0). При цьому насиченість слід вказувати в розмірності від 0 до 255.
Колір також можна задати за допомогою шістнадцятирічного коду. Шістнадцятирічний код є все тим же зазначенням насиченості кожного кольору, але вже в шістнадцятирічному форматі, де кожен колір задається комбінацією двох символів від 0 до F.
Порядок виконання роботи
1. Створіть таблицю відповідно до завдання на рис. 1.
Рис.1
2. Прикрасьте комірки різними кольорами за допомогою властивості Style = "".
3. Пронумеруйте комірки зліва направо, зверху вниз.
4. Зробіть список вашої групи. Маркери виберіть на свій розсуд.
5. Створіть маркований список зі своїми маркерами (де маркер - якесь зображення).
6. Створіть таблицю на три колонки (ім'я прізвище вік). Додайте кілька рядків і заповніть їх. Вирівняйте текст по центру комірок.
7. Створіть таблицю на три рядки і три колонки. Об'єднайте дві перші комірки першого рядка. Об'єднайте дві останні комірки третьої колонки.
8. Створіть маркований список зі своїми маркерами (де маркер - якесь зображення).
Питання для самостійної роботи
1. Які теги використовуються при створенні таблиць?
2. Як вирівнюється текст всередині комірок таблиць?
3. Я створити заголовки таблиці?
4. Які переваги та недоліки використання таблиць?
5. Які види списків використовуються в HTML?
6. Які теги використовуються при створенні списків?
7. Які кольорові моделі використовуються в розмітці?
8. Як можна задати колір елемента розмітки?
Література:
1. https://html.com
2. https://webref.ru
3. http://htmlbook.ru
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. – СПб.: Питер, 2014. – 720 с.:
5. Мержевич В. Самоучитель HTML.
6. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с.
7. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2014. – 608 с.
Звіт до роботи
1. Оформити лабораторну роботу в зошиті. Записати тему, мету, знати, уміти, обладнання та відповісти на запитання для самостійної підготовки.
2. Виконати завдання згідно свого варіанту.
3. Зробити висновок.
Лабораторна робота №4
Блочна верстка, теги div та span
Мета роботи: розглянути
– тег <div> і, як таке, поняття блочної верстки; переваги верстки використовуючи тег <div>;
– як задаються розміри шару;
– що може знаходитися в шарі;
– позиціонування елементів <div>;
– властивість float;
– властивість clear;
– вкладеність шарів, блокова верстка;
– властивість padding;
– властивість margin;
– властивості padding і margin, які беруть більше одного параметра.
– тег <span> та особливості роботи з ним.
Знати: призначення та основні атрибути тегів <div> та <span>, можливості їх використання в розмітку HTML-документів.
Уміти: застосовувати навички по блочній верстці; виділяти рядкові блоки тегом <span>; використовувати обтікання блоків; реалізувати табличні конструкції, використовуючи блоки.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.