У даній роботі ви на практиці познайомитесь зі структурою html-документа, а також з тегами, які дозволяють структурувати вебсторінку для відвідувачів. І мова йде не тільки про людей, а й про програми, за допомогою яких у Всесвітній мережі збирається інформація для пошукових запитів.
Спочатку розгляньте структуру документа html. Для цього відкрийте текстовий редактор Sublime Text. У правому нижньому кутку редактора натисніть напис Plain Text і в переліку мов, які з'явились, оберіть HTML. Поставте знак оклику "!" і натисніть клавішу Tab. Якщо у вашому редакторі встановлено плагін Emmet, така комбінація сформує структуру html-документа (дивіться рис. 1).
Рис. 1. Звісно, тут тільки базові теги. Вам необхідно буде наповнити сторінку контентом, додати інші метатеги, підключити зовнішні таблиці стилів, скрипти тощо
У першому рядку браузеру повідомляється тип документа, а за ним відкривається контейнер <html>. Відповідний закриваючий тег розміщено самим останнім. Тобто все, що стосується даної вебсторінки, буде заключено в нього.
Далі йде контейнер <head> </head>, який містить у собі службові теги. Відвідувач не бачить їх вмісту, за винятком контейнера <title> </title>, але бачить їх вплив. А всередині тега <title> розташована назва вкладки сорінки.
На самій сторінці відвідувач побачить все те, що буде розміщено всередині контейнера <body> </body>.
Далі розглянемо основні структурні елементи вебсторінки.
Завантажте файли для виконання роботи та розпакуйте завантажений архів. Ви будете працювати з файлом pochatok.html.
Відкрийте цей файл у браузері. Зверніть увагу, як відображається текст і заголовок вкладки (рис.2).
Рис. 2. Раніше часто використовували кодування windows-1251, стандартне кодування для кирилиці в Windows. Але зараз це вважається поганою практикою. Найпоширеніше сучасне кодування - utf-8. Використовуйте його в усіх своїх проектах
Відкрийте цей файл у редакторі коду. Знайдіть метатег <meta charset="windows-1251"> і змініть значення атрибута charset на utf-8.
Збережіть код та оновіть відповідну сторінку у браузері. Тепер текст сторінки і заголовок вкладки відображається адекватно (рис.З)
Рис. 3. Найпоширеніше сучасне кодування - utf-8. Використовуйте його в усіх своїх проектах
Крім того, ви бачите на сторінці імена деяких тегів і границі контейнерів. За їх допомогою можна зрозуміти, що body вкладено в html. В свою чергу body містить у собі заголовок h1, абзаци p та деякий текст. Додамо інші елементи структури сторінки.
Встановіть курсор у рядку перед рядком із заголовком <h1>Сайт верстальника-початківця</h1> і введіть тег <header>. У рядку після заголовка закрийте цей контейнер закриваючим тегом</header>. Переглянувши вебсторінку, ви побачите підпис цього структурного елемента.
Текст Панель навігації огорніть в тег nav наступним чином:
<nav>
Панель навігації
</nav>
Після закриваючого тега </nav> встановіть курсор і відкрийте тег <section>. Закрити цей контейнер необхідно після закриваючого тега другого абзацу.
Відразу після закриваючого тега </section> відкрийте ще один такий контейнер і закрийте його після речення Разділ про основні навички.
ЗАУВАЖЕННЯ:
Теги, які повторюються можна вводити одночасно. Для цього встановіть курсор на місце першого тега. Натисніть клавішу Ctrl і, утримуючи її, клацайте лівою кнопкою миші в інших місцях розташування цього тега. Ви побачите декілька курсорів і матимете змогу одночасно ввести один і той самий напис у декількох місцях одночасно.
Текст Підвал сайту огорніть тегом footer. У результаті вигляд вашої сторінки буде відповідати рисунку 4.
Рис. 4. Для розмітки частин вебсторінки використовуйте відповідні семантичні теги
Якщо ви вже маєте досвід роботи з html-документами, то з побудовою їх структури, напевне, знайомі.
В текстовому редакторі Sublime Text 3, або іншому редакторі для верстальників, створіть заготовку для майбутньої сторінки (дивіться рис. 1).
Рис. 1. Звісно, тут тільки базові теги. Вам необхідно буде наповнити сторінку контентом, додати інші метатеги, підключити зовнішні таблиці стилів, скрипти тощо
Оскільки ви не новачок у цій справі, детально спинятись на структурних елементах html-документа ми тут не будемо.
Далі використаємо основні структурні елементи вебсторінки.
Завантажте файли для виконання роботи та розпакуйте завантажений архів. Ви будете працювати з файлом pochatok.html.
Відкрийте цей файл у браузері. Зверніть увагу, як відображається текст і заголовок вкладки (рис.2).
Рис. 2. Раніше часто використовували кодування windows-1251, стандартне кодування для кирилиці в Windows. Але зараз це вважається поганою практикою. Найпоширеніше сучасне кодування - utf-8. Використовуйте його в усіх своїх проектах
Знайдіть метатег <meta charset="windows-1251"> і змініть значення атрибута charset на utf-8.
Збережіть код та оновіть відповідну сторінку у браузері. Тепер текст сторінки і заголовок вкладки відображається адекватно (рис.З)
Рис. 3. Найпоширеніше сучасне кодування - utf-8. Використовуйте його в усіх своїх проектах
Крім того, ви бачите на сторінці імена деяких тегів і границі контейнерів. Продовжіть роботу, щоб побачити, як розміщуються елементи вебсторінки за допомогою структурних тегів.
Розмітьте вміст тіла сторінки тегами так, щоб результат у браузері відповідав рисунку 4. Назви тегів на структурних елементах слугуватимуть вам підказкою.
ЗАУВАЖЕННЯ:
Сподіваємось, що ви знаєте, але нагадати буде корисно. Теги, які повторюються можна вводити одночасно. Для цього встановіть курсор на місце першого тега. Натисніть клавішу Ctrl і, утримуючи її, клацайте лівою кнопкою миші в інших місцях розташування цього тега. Ви побачите декілька курсорів і матимете змогу одночасно ввести один і той самий напис у декількох місцях одночасно.
Рис. 4. Для розмітки частин вебсторінки використовуйте відповідні семантичні теги
Порівняти результат своєї роботи з тим, по якому було зроблено рисунок 4, можна завантаживши і розпакувавши архів.
Додаткове завдання
Знайдіть в мережі Інтернет інформацію про інші семантичні теги, які стосуються великих частин вебсторінки. Серед цих тегів ви знайдете і ті, які були використані в цій роботі. Перед футером додайте ще одну секцію, у якій розмістіть знайдену інформацію. Якщо в тексті буде декілька абзаців, використайте для розмітки відповідний тег.
