#1 Мова розмітки тексту HTML

Навігація в мережі Інтернет - це відвідування WEB – сторінок. WEB – сторінки повинні мати невеликий розмір для швидкого завантаження. Сторінки створюють у звичайному блокноті і тому вони мають відносно невеликий розмір. Втім, переглядаючи яскраві веб-сторінки зі складним форматом, наповненими графікою, відео, та ін., важко в це повірити. Адже блокнот - це дуже простий редактор і не дозволяє додавати графіку, форматувати, різноманітити шрифти. Річ у тім, що це досягається спеціальними командами - тегами мови HTML

HTML (HyperText Markup Language) мова розмітки гіпертексту.

Теги дозволяють форматувати текст, міняти шрифти, оформлювати абзаци, додавати графічні елементи. Вони обробляються і виконуються браузерами. Мова HTML, в залежності від версії має певний набір тегів (словник мови). Теги заключаються в кутові дужки. Наприклад: <code>. Теги можуть бути одинарними і парними. Парні теги ще називають контейнер. В контейнері перший тег пари вказує на початок дії вказівки, а другий тег (закривальний) вказує в якому місці документу вказівка припиняє дію.

Наприклад:
Для підписання вікна браузера використовують наступні теги:
<title>Текст підпису </title>
Тег <title> - Початок підпису вікна браузера
Тег </title>. Кінець підпису вікна браузера. У закриваючому використовується символ “/”.

Структура HTML документа

<html>
<head>
<title> Підпис вікна браузера </title>
</head>
<body>
Основний контент сайту
</body>
</html>

<html> </html> парний тег означає початок і кінець гіпертекстового документу.
<head> </head> заголовок документу. Містить теги, що описують документ.
<body> </body> Основна інформація сторінки (контент)

Створюємо HTML - документ

  1. Відкрийте програму Блокнот.
  2. Надрукуйте структуру документу
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
  3. Збережіть цей файл у форматі HTML.

Послідовність кроків для збереження файлу у форматі HTML

  1. Створити папку для майбутнього сайту. Наприклад папка site
  2. Обрати меню "Файл" – "сохранить как"
  3. В полі "Тип файла" обрати All files(*.*)
  4. В полі "Имя файла" англійськими літерами надрукувати ім’я файлу з розширенням html (наприклад First.html) і натиснути кнопку «Сохранить».

В результаті в теці має з’явитися піктограма цього файлу з зображенням браузера за замовченням.


Якщо двічі клацнути на піктограму, то відкриється порожній документ.


Зверніть увагу на те, що в заголовку вікна – ім’я цього файлу - first.html.

Додавання контенту

<!DOCTYPE html>
<html>
<head>
<title> Перший сайт </title>
</head>
<body>
Це мій перший сайт.
</body>
</html>


В блокноті натисніть «Сохранить» ctrl + s , а в браузері натисніть кнопку «Оновити», або ctrl + r. На скріншоті видно, що у вікні з’явився набраний текст (в контейнері body), а в заголовку вікна з’явився текст контейнера <title>.

Виконайте вправу

Створити html файл в окремій теці. Вмістом файлу має бути ваше прізвище, ім'я. В заголовку вікна має бути слово шаблон.

Як альтернатива блокноту та веб редакторам для виконання практичних завдань (у разі відсутності ноутбука), можна використовувати навчальні онлайн редактори. Один з варіантів онлайн редактора