Вступ.
Вітаю учасників гуртка, читачів та підписників нашого навчального блогу!
Тема нашого заняття:Створення простого шаблону сторінки з семантичних тегів.
Важлива роль семантичних тегів у створення веб - сторінок.
Використання семантичних тегів допомагає веб-браузерам, програмам для читання екрану і пошуковим системам краще розуміти структуру веб-сторінки і забезпечує легкий доступ до вмісту для користувачів з різними потребами. Наприклад, програми для читання екрану використовують семантичні теги, щоб допомогти слабозорим користувачам зорово розрізняти різні елементи сторінки, такі як заголовки, основний вміст та посилання.
Крім того, використання семантичних тегів покращує пошукову оптимізацію веб-сторінок, оскільки допомагає пошуковим системам зрозуміти структуру сторінки і знайти вміст, який може відповідати запиту користувача.
Закріпимо деякі основні поняття.
Для успішного засвоєнна теми нашого заняття, нам потрібно освіжити в пам'яті деякі знання.
Повторимо базові теги: <html>, <head>, <body>, <title>.
Тег <html> є основним тегом, який визначає початок і кінець HTML-документа. Усі інші теги розміщуються всередині тегу <html>.
Тег <head> використовується для зберігання метаданих HTML-документа, таких як заголовок сторінки, посилання на зовнішні таблиці стилів, скрипти та інші важливі елементи, які не відображаються на сторінці.
Тег <body> визначає головний вміст сторінки і містить всі елементи веб-сторінки, які будуть відображені на екрані, такі як текст, зображення, відео та інші.
Тег <title> використовується для визначення заголовка сторінки. Цей заголовок зазвичай відображається в верхній частині вікна браузера та використовується для ідентифікації сторінки в закладках браузера та в результатах пошуку.
Приклад коду HTML-сторінки з використанням базових тегів:
<!DOCTYPE html>
<html>
<head>
<title>Мій перший веб-сайт</title>
</head>
<body>
<h1>Ласкаво просимо на мій веб-сайт</h1>
<p>Це моя перша веб-сторінка, яка створена за допомогою HTML.</p>
<img src="myimage.jpg" alt="Моя картинка">
</body>
</html>
У цьому прикладі тег <html> визначає початок і кінець HTML-документа, тег <head> містить заголовок сторінки, тег <body> містить вміст сторінки, а тег <title> визначає заголовок веб-сторінки. Крім того, вміст сторінки включає заголовок першого рівня (<h1>), абзац (<p>) та зображення (<img>).
Повторення тегів для роботи з текстом: <h1> - <h6>, <p>, <ul>, <ol>, <li>.
- <h1> - <h6> - ці теги використовуються для визначення заголовків різного рівня. Заголовок <h1> є найбільш важливим і зазвичай використовується для головного заголовку сторінки, тоді як заголовок <h6> є найменш важливим і використовується для підзаголовків меншого значення.
- <p> - цей тег використовується для визначення абзацу тексту.
- <ul> - цей тег використовується для створення невпорядкованого списку. Кожен елемент списку відображається з символом маркера.
- <ol> - цей тег використовується для створення впорядкованого списку. Кожен елемент списку відображається з порядковим номером.
- <li> - цей тег використовується для визначення кожного елемента списку, який вказується в тегах <ul> або <ol>.
Ці теги дозволяють розміщувати текст на сторінці та структурувати його в різні типи контенту.
Наприклад, використовуючи заголовки різних рівнів (<h1> - <h6>) можна ієрархічно організувати інформацію на сторінці, допомагаючи користувачеві зрозуміти, які частини контенту є більш важливими, а які менш важливі.
Використання тегів <ul>, <ol> та <li> дозволяє створити списки, які також допомагають користувачеві легше зорієнтуватися в інформації на сторінці.
Пояснення теми заняття:
Пояснення семантичних тегів: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
Семантичні теги - це теги, які надають вмісту на веб-сторінці значення з точки зору його семантики або значення для пошукових систем і сприяють до кращого розуміння структури веб-сторінки. Ось пояснення деяких з найбільш важливих семантичних тегів:
- <header> - цей тег використовується для визначення верхньої частини сторінки, яка може містити логотип, назву сайту, основне меню навігації та інші важливі елементи.
- <nav> - цей тег використовується для визначення блоку навігації на веб-сторінці. Це може бути меню з посиланнями на різні сторінки сайту або посилання на різні категорії статей.
- <main> - цей тег використовується для визначення головного вмісту сторінки. Це може бути основний зміст статті, список продуктів або будь-який інший вміст, який є центральним для веб-сторінки.
- <section> - цей тег використовується для групування пов'язаних змістових елементів на сторінці. Це може бути розділом статті, групою постів у блозі, або будь-якою іншою секцією змісту, яка має зв'язок за темою.
- <article> - цей тег використовується для визначення незалежного контенту на веб-сторінці, наприклад, статті, блогових постів, новин тощо. Кожен <article> може мати свій власний заголовок, підзаголовок, текст та інші елементи.
- <aside> - цей тег використовується для визначення блоку змісту, який зв'язаний з основним контентом, але не є частиною його. Наприклад, це може бути блок з пов'язаними статтями, блок з іншими тегами або рекламний блок.
- <footer> - цей тег використовується для визначення нижньої частини сторінки, яка може містити посилання на контакти, авторські права, інформацію про власника сайту та інші додаткові елементи.
Використання семантичних тегів допомагає зробити веб-сторінки більш доступними для користувачів, зокрема для тих, які використовують асистивні технології, такі як екранні читачі. Крім того, це підвищує ранг сторінки в пошукових системах, тому що вони можуть краще розуміти структуру вмісту на сторінці.
Пояснення тегів для роботи з мультимедіа: <img>, <audio>, <video>.
- <img> - цей тег використовується для вставки зображень на сторінку. Він має атрибут src, який вказує шлях до зображення, та може мати також інші атрибути, такі як alt, який визначає альтернативний текст для зображення у випадку, якщо його не вдасться завантажити.
- <audio> - цей тег використовується для вставки аудіофайлів на сторінку. Він має атрибут src, який вказує шлях до аудіофайлу, та може мати додаткові атрибути, такі як controls, який дозволяє відтворювати та призупиняти відтворення аудіофайлу, та autoplay, який автоматично відтворює аудіофайл при завантаженні сторінки.
- <video> - цей тег використовується для вставки відео на сторінку. Він має атрибут src, який вказує шлях до відеофайлу, та може мати додаткові атрибути, такі як controls, який дозволяє відтворювати та призупиняти відтворення відеофайлу, та autoplay, який автоматично відтворює відеофайл при завантаженні сторінки.
Ці теги дозволяють вставляти на сторінку різні мультимедійні елементи, такі як зображення, аудіо та відео. Вони допомагають зробити сторінку більш інформативною та привабливою для користувачів, які можуть споживати інформацію у різних форматах. Наприклад, вставка зображень допомагає візуалізувати інформацію, а вставка аудіо та відео дозволяє додати на сторінку звукові та візуальні ефекти, що можуть підвищити її ефективність та привабливість.
Практична частина: створення простого шаблону сторінки за допомогою семантичних тегів.
Для створення простого шаблону сторінки за допомогою семантичних тегів потрібно виконати наступні кроки:
1. Створити новий файл HTML з розширенням .html у текстовому редакторі.
2. Додати теги <!DOCTYPE html> та <html> на початку файлу.
<!DOCTYPE html>
<html>
</html>
3. Додати теги <head> та <body> всередині тегу <html>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
4. Додати тег <header> всередині тегу <body> для відображення верхньої частини сторінки.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Заголовок</h1>
<nav>
<ul>
<li><a href="#">Посилання 1</a></li>
<li><a href="#">Посилання 2</a></li>
<li><a href="#">Посилання 3</a></li>
</ul>
</nav>
</header>
</body>
</html>
5. Додати тег <main> для відображення основного вмісту сторінки.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Заголовок</h1>
<nav>
<ul>
<li><a href="#">Посилання 1</a></li>
<li><a href="#">Посилання 2</a></li>
<li><a href="#">Посилання 3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Розділ 1</h2>
<p>Текст розділу 1</p>
</section>
<section>
<h2>Розділ 2</h2>
<p>Текст розділу 2</p>
</section>
<aside>
<h3>Бічна панель</h3>
<p>Текст бічної панелі</p>
</aside>
</main>
</body>
</html>
6. Додати тег <footer> для відображення нижньої частини сторінки.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Заголовок</h1>
<nav>
<ul>
<li><a href="#">Посилання 1</a></li>
<li><a href="#">Посилання 2</a></li>
<li><a href="#">Посилання 3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Розділ 1</h2>
<p>Текст розділу 1</p>
</section>
<section>
<h2>Розділ 2</h2>
<p>Текст розділу 2</p>
</section>
<aside>
<h3>Бічна панель</h3>
<p>Текст бічної панелі</p>
</aside>
</main>
<footer>
<p>© 2023, Прізвище Ім'я</p>
</footer>
</body>
</html>
7. Зберегти файл і відкрити його у веб-браузері, щоб переконатися, що шаблон сторінки відображається правильно.
В результаті виконання цих кроків ви отримаєте простий шаблон сторінки, який використовує семантичні теги для розмітки вмісту. Ви можете змінювати теги та їх атрибути, додавати нові елементи та коментарі, щоб налаштувати сторінку під свої потреби.
Наступні кроки, які можна виконати для покращення цього шаблону сторінки, включають:
- Додати стилізацію за допомогою CSS, щоб зробити сторінку більш привабливою та легкішою для сприйняття.
- Додати додаткові секції та елементи для розширення вмісту на сторінці.
- Використовувати JavaScript для створення інтерактивних ефектів та взаємодії з користувачем.
- Оптимізувати зображення, відео та інші мультимедійні елементи для забезпечення швидкої завантаження сторінки.
Не забувайте, що вміст сторінки повинен бути доступним і зрозумілим для користувачів з різними потребами, тому використовуйте семантичні теги та атрибути з розумінням та обережністю.
Тестовий контроль за допомогою електронних ресурсів.
Традиційно ми проведемо простенький тестовий контроль, за допомогою електронного ресурсу "Всеосвіта". Це дозволить вам зрозуміти, наскільки добре ви засвоїли навчальний матеріал, який ми разом вивчали на цьому занятті. Відповівши на кілька питань тесту ви маєте всі шанси отримати сертифікат про його проходження.
Для проходження тесту перейдіть за посиланням:
https://vseosvita.ua/test/start/cfb706
Або Відскануйте QR-код за допомогою смартфона:
Завершення: підбиття підсумків, корисні ресурси для подальшого вивчення семантичних тегів.
Підсумовуючи наше заняття, ми робимо наступні висновки:
- Семантичні теги допомагають створювати більш доступні, зрозумілі та ефективні веб-сторінки.
- Вони покращують SEO, полегшують розуміння вмісту сторінки та покращують її візуальну привабливість.
Якщо ви бажаєте дізнатися більше про використання семантичних тегів, то пропоную відвідати кілька корисних ресурсів:
- MDN Web Docs - це відмінний ресурс для вивчення HTML та інших веб-технологій. Він містить докладну документацію та приклади використання семантичних тегів: https://developer.mozilla.org/uk/docs/Web/HTML/Element
- W3Schools - це ще один популярний ресурс, який пропонує безкоштовні уроки та приклади використання HTML та CSS. Він містить чудові приклади використання семантичних тегів: https://www.w3schools.com/html/html5_semantic_elements.asp
- HTML5 Doctor - це сайт, який зосереджений на використанні HTML5 та семантичних тегів. Він містить багато корисних статей та порад для використання семантичних тегів: http://html5doctor.com/
Мої побажання вихованцям.
Будь допитливим, досліджуй глибини понять, адже лише це і допомагає розвиватися! На цьому сайті формується сприятливий простір для вивчення web технологій. Рівень твого самостійного заглиблення в певні питання сьогодні будуть відповідати рівню твоєї компетенції з даного питання в майбутньому. Єдиним фактором, який має значення, є твоя власна здатність і бажання вчитися. Немає сенсу порівнювати свій прогрес з іншими, оскільки цей досвід здебільшого суб’єктивний. Поділіться посиланням у соціальних мережах за допомогою кнопок, розміщених нижче та підпишіться на блог, щоб першими отримувати нові публікації корисного навчального контенту! Коментуй публікацію, пиши свої враження, залишай питання в коментарях, якщо якісь моменти з публікації залишилися не зрозумілими!
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
0 Коментарів Підписатися на цей блог