PART I:Основи HTML
Структура html-документу
Весь HTML будується на тегах: це спосіб зазначити будь-які об’єкти чи налаштування на сайті. Наприклад, абзац тексту позначається так:
<p>тут будь-який текст</p>.
Браузер зрозуміє, що в цьому місті сторінки є текст і покаже його.
Так для всього: картинка, таблиця, посилання, текст. Все, що ви бачите на сайті, все позначається тегами.
Зараз поговоримо про ті теги, які вибудовують структуру будь-якого html-файла.
Браузер читає всі теги зверху до низу. Тому на початку ми кажемо браузеру, яка версія html нам потрібна, потім — налаштування сторінки, потім — те, що сторінка зображає.
Ось так виглядає сторінка в html:
Розберемо елементи структури
Тег <html>….</html> вбирає в себе геть усі теги.
Тег <head></head> — налаштування сторінки. Наприклад, якщо ми хочемо, щоб всі посилання на сторінці відкривалися у сусідній вкладці — ми пропишемо тег саме тут, в «хеді». Це так звані «мета-теги»: їх не бачить користувач, але вони формують сторінку. Як налаштування в телефоні.
Наразі, у нас задана версія тексту, який використовується на сторінці: кирилиця та латиниця. Задано це одинарним тегом <meta> (п’ятий рядок на скріншоті).
А ще — назва вкладки: «Перший сайт», задана тегом <title> — цей тег можна вписати куди завгодно.
В тег <body></body> вносимо те, що буде бачити користувач: тексти, картинки, кнопки та посилання вписуються сюди. Ми сюди ще нічого не вписали, тому сторінка нічого не зображатиме.
Для наочності додамо туди якийсь текст.
Можете погратися.
Зайдіть на будь-який сайт, клікніть правою кнопкою на вільне місце та оберіть «подивитись код». Ви побачите, що навіть найскладніший сайт вибудований за цією структурою, зрозумієте, де вписані налаштування, як будь-який файл вписано тегами у цей сайт.
Завдання:
1. Створити html-файл. Створюєте теку в будь-якому місці в себе на комп’ютері. Клікаєте правою кнопкою миші та обираєте «текстовий файл». Замість розширення txt пишете html. Назва файлу «index». Має виглядати так:
index.html
2. Відкриваєте файл через будь-який текстовий редактор. Вписуєте в нього структуру.
Ось вона:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Перший сайт</title>
</head>
<body>
<p>Привіт, світ!</p>
</body>
</html>
Можете копіювати, або переписати (дуже уважно). Збережіть.
3. Вітаємо, тепер у вас є сторінка сайту! Тепер можете закрити текстовий файл та відкрити його, клікнувши двічі. Браузер, який встановлений за замовчуванням, відкриє файл у новій вкладці.
