Лабораторні роботи
ВЕБ-ПРОГРАМУВАННЯ
Лабораторні роботи
Лабораторна робота №1 Вступ до HTML......................................................... 2
Лабораторна робота №2 Вставка та редагування зображень.......................... 5
Лабораторна робота №3 Таблиці та списки. Робота з кольором.................... 9
Лабораторна робота №4 Блочна верстка, теги div та span............................ 14
Лабораторна робота №5 Каскадні таблиці стилів (CSS)................................ 19
Лабораторна робота №6 Метатеги, верстка макета........................................ 22
Лабораторна робота №1
Вступ до HTML
Мета роботи: розглянути основні теги HTML; навчитися користуватися основними тегами HTML; розглянути структуру сторінки HTML.
Знати: призначення та основні теги HTML, структуру сторінки HTML.
Уміти: створювати прості сторінки HTML; застосовувати прості теги в створенні HTML коду; редагувати вже існуючі сторінки HTML.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.
Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
HTML (від англ. HyperText Markup Language - «мова розмітки гіпертексту») - стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML).
Тег <p> є блоковим елементом, тому він починається з нового рядка, параграфи тексту, що йдуть один за одним, розділяються між собою вертикальним проміжком.
Тег <br> перенос рядка в тому місці, де цей тег знаходиться.
Тег <h1> представляє собою найбільш важливий заголовок першого рівня. Тег <h6> служить для позначення заголовка шостого рівня і є найменш значним. Теги <h1> ... <h6> відносяться до блокових елементів.
Тег <hr> малює горизонтальну лінію. Зовнішній вигляд лінії залежить від використовуваних параметрів, а також браузера.
Тег <b> встановлює жирне накреслення шрифту.
Тег <strong> встановлює напівжирний шрифт шрифту.
Тег <big> збільшує розмір шрифту на одиницю в порівнянні зі звичайним текстом.
Тег <em> встановлює похилий шрифт (курсив).
Тег <i> встановлює курсивне накреслення шрифту.
Тег <small> зменшує розмір шрифту на одиницю в порівнянні зі звичайним текстом.
Тег <sub> відображає шрифт у вигляді нижнього індексу. Текст, при цьому, розташовується нижче базової лінії інших символів рядка і зменшеного розміру.
Тег <sup> відображає шрифт у вигляді верхнього індексу. Шрифт при цьому відображається вище базової лінії тексту і зменшеного розміру.
Властивість style дозволяє задати стиль елемента всередині його початкового тега.
Тег <a> призначений для створення посилань. Залежно від присутності параметрів name або href, тег <a> встановлює посилання або якір. Якорем називається закладка всередині сторінки, яку можна вказати в якості посилання. При використанні посилання, яка вказує на якір, відбувається перехід до закладки всередині веб-сторінки.