Порядок виконання роботи
1. Створити параграф з текстом. Змінити шрифт на Arial, а колір шрифту на синій.
2. Створити дві сторінки, які будуть посилатися одна на одну.
3. Створити сторінку за типом документа «Замечательное письмо» на основі якорів.
4. Зробити сторінку за типом документа «Замечательное письмо» за допомогою посилань на нові сторінки так, щоб перша стаття відкривалася в цьому ж вікні, а наступна в новому.
Питання для самостійної роботи
1. Призначання та особливості HTML.
2. Назвіть основні теги HTML.
3. Назвіть основні властивості атрибута style?
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. Зробити висновок.
Лабораторна робота №2
Вставка та редагування зображень
Мета роботи: навчитися додавати і редагувати зображення на веб-сторінці.
Знати: призначення та основні атрибути тега <img />, можливості їх використання в розмітку HTML-документів.
Уміти: додавати зображення в HTML; редагувати зображення в HTML; працювати з фоном в розмітці; використовувати атрибути USEMAP в HTML; створювати карти зображення.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.
Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
Для установки кольору використовується властивість атрибута style – "background-color".
Для вставки зображень в HTML-документ слід використовувати тег <img>, що має єдиний обов'язковий параметр src, що визначає URL-адресу файлу із зображенням.
Атрибути width та height контролюють розміри зображення.
Якщо один з них відсутній, то зображення розтягнеться пропорційно до іншого.
Якщо в результаті зміни зображення пропорції були порушені, то зображення може бути відображено некоректно.
Типове значення приймає свої дійсні розміри.
Gif-зображення вбудовується таким же способом.
Статус align вказує положення зображення щодо решти контенту. Він приймати наступні значення для вертикального вирівнювання зображення:
- bottom – вказує на вирівнювання зображення по нижньому краю контенту (за замовчуванням);
- middle – вказує на вирівнювання зображення по центральній направляючої решти контенту;
- top – вказує на вирівнювання зображення по верхньої направляючої решти контенту.
Не має значення, де розміщено зображення – на початку тексту, в середині або в кінці.
Властивість background-repeat відповідає за вид повторення фону. Може приймати наступні значення: no-repeat, repeat-x, repeat-y.
- no-repeat – говорить про те, що повторювати зображення не варто, і розміщує його один раз відповідно до його розмірами;
- repeat-x – робить повторення зображення тільки по осі х;
- repeat-y – робить повторення зображення тільки по осі y.
Графічні зображення можуть використовуватися не тільки в якості ілюстрацій, а й виконувати роль посилань. Для забезпечення роботи зображення в якості посилання досить включити зображення всередину тега-контейнера <a>.
Властивість background-size відповідає за розміщення зображення на задньому фоні. Вона може приймати наступні значення:
– cover – масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку.
– contain – масштабує зображення зі збереженням пропорцій таким чином, щоб картинка цілком помістилася всередину блоку.
Карта-зображення – це представлення зображення, яке доповнене областями, розміщеними на ній з можливістю реалізації посилань при натисканні на ці області.
Існує основних 4 кроки по створенню карт-зображень:
1. Вставити на сторінку зображення.
2. Прив'язати до нього опис областей, вказавши атрибут usemap.
3. Створити елемент <map> </ map> з відповідним ім'ям та id (в різних браузерах сприймається той чи інший атрибут).
4. Описати області в тегах area.
Тег area, має наступні атрибути:
- href – посилання на документ, на який слід перейти;
- shape – форма області;
- coords – координати області;
- alt, title – текст, який буде у вспливаючій підказці.
Порядок виконання роботи
1. Створіть сторінку і зробіть задній фон зеленим.
2. Поміняйте фон заливки зеленого на картинку, яка буде повторюватися по осі х, і встановіть колір заливки синім.
3. Зробіть карту-зображення на зображенні, що складається з чотирьох елементів (рис. 1).
Рис. 1.
4. Створіть HTML-сторінку. Розмістить на ній зображення і текст так, щоб текст обтікав зображення з правого боку.
5. Створіть HTML-сторінку із зображенням, використовуючи карту-зображення, створіть кілька посилань на інші сторінки.
6. Розпочати створювати власний сайт-візитку.
7. Оформити звіт до лабораторної роботи.