Поняття про мову гіпертекстової розмітки

Поняття мови розмітки гіпертексту. Етапи створення веб-сайтів.

Мета: Допомогти учням засвоїти поняття «HTML», «гіпертекст», «тег». Ознайомитися з основними етапами створення веб-сайтів. Розглянути основні можливості веб-сайтів . Формувати вміння виділяти головне, актуалізувати, конспектувати, порівнювати, зіставляти. Забезпечити диференційований підхід. Встановити зв'язки між засвоєними та новими знаннями. Формувати групи компетентностей: соціально-трудову, інформаційну, загальнокультурну, соціально-трудову, уміння вчитися.

Тип уроку: засвоєння нових знань;

Обладнання та наочність: комп’ютери, підручники, презентація, проектор.

Програмне забезпечення: браузер, Sublime Text

Щодня ви відкриваєте сотні вебсторінок. Те, що ви бачите, — це відображений браузером результат роботи веброзробників і дизайнерів. Однак є і «зворотний бік медалі» — так званий вихідний код вебсторінки, записаний спеціальною мовою розмітки НТМL. Власне, цією мовою і «пишуть» вебсторінки в текстовому редакторі, а потім у браузері вони «перевтілюються», набуваючи звичного для нас вигляду

Мова гіпертекстової розмітки HTML розшифровується, як Hyper Text Markup Language — це мова розмітки гіпертексту для подальшого його відображення у вікні браузера. Являє собою сукупність тегів та правил їхнього застосування.

Тегом називається так званий код мови і являє собою службове слово, записане в кутових дужках < >. Наприклад, <html>

Варто зауважити, що в сучасних сайтах для форматування використовують CSS (каскадні таблиці стилів), з якими ми ознайомимося пізніше. Також в інтернеті вам можуть зустрітися сторінки, написані мовою PHP або Python.

Тим не менш, починати знайомство з веб-розробкою прийнято саме з HTML, оскільки будь-які складніші сторінки так чи інакше використовують мову гіпертекстової розмітки та її розуміння залишається базовою навичкою веб-програміста.

Парні теги містять відкриваючий і закриваючий теги. Закриваючий тег починається символом «/» (слеш). Наприклад:

Приклад непарного тега

Сьогодні ми познайомимось з наступними тегами:

<!DOCTYPE html> — тип документу за новими нормами
<html>…</html> — мова документу (стара норма)
<head>…</head> — Службова інформація (вміст цього блока не відображається на сторінці, але використовується браузером) в блоці <head> вказують мета-данні сторінки, підключають скрипти та файли стилей.
<title>…</title> — ім’я сторінки, яке відображається в ярлику сторінки браузера, а також у видачі пошукової системи.
<body>…</body> — «тіло» веб-сторінки (вміст цього блоку відображається на веб-страниці)
< h1>…</h1> — заголовок 1 рівня (назва сторінки, може зустрічатись лише 1 раз)
< h2>…</h2> — підшаголовок або заголовок 2 рівня (може зустрічатись кілька разів на сторінці) Заголовки можуть мати декілька рівнів вкладеності, кожен з яких буде автоматично форматуватись певинм чином.
<p>…</p> — параграф
<b>…</b> або <strong>…</strong>— виділення тексту жирним
<i>…</i> або <em>…</em>— виділення тесту курсивом
<u>…</u> — підкреслений текст
<center>…</center> — вирівнювання тексту по центру.

Детальніше про кожен тег дивіться у відео

Програми для створення коду

Для створення веб-сторінок ви можете використовувати різні текстові редактори:

блокнот (інтегровано в ОС Windows);
Notepad++ (завантажити) — рекомендовано;
Sublime Text (завантажити) — редактор як у відео;
WebStorm;
Visual Studio;
Atom;
Eclipse або інші.

Для смартфонів та планшетів (Android або Apple) використовуйте додаток CodeEditor або Notepad++.

Різниця у використанні різних програм суттєва, адже спеціалізовані редактори підсвічують код, підказують правильні варіанти написання тегів а атрибутів, допомогають уникати помилок. Проте, потрапивши на конкурси з веб-дизайну, вам доведеться писати код у звмчайному блокноті, то ж з яким саме редактором стартувати — вирішуйте самі. Я пропоную універсальний варіант — Notepad++. Він зручніший, ніж блокнот, проте не має функціоналу, що значно спрощує написання коду.

РОБОТА ЗА КОМП'ЮТЕРОМ

Завдання 1

Сьогодні створимо нашу першу веб-сторінку. Для цього виконайте наступнй алгоритм:

Відкрийте редактор коду.
Створіть новий файл.
Збережіть його з назвою index.html (де index — назва файлу, а html — його розширення). Зверніть увагу, що у вас має бути відкрите розширення файлів.
Введіть базовий текст сторінки, як на рисунку.

Зверніть увагу, що теги пишуть з певним ссувом (табуляцією), яку можна робити клавішею Tab або пробілами. Для браузера ці відступи не мають значення, але дуже допомогають при роботі з документом, адже ми бачимо рівень вкладеності тегів.

Збережіть файл та відкрийте його через браузер для прегляду.

Результатом буде ось така сторінка.

Продовжимо знайомство з тегами.

Далі розглянемо, як з допомогою тегів установити заголовки та абзаци документа. В мові HTML виділяють усього 6 рівнів заголовків, що позначаються відповідно тегами від <h1>...</h1> до <h6>...</h6>

У браузері заголовок першого рівня буде відображено найбільшим, а заголовок шостого рівня — найменшим.

На рисунку показано відображення заголовків у вікні браузера

та відповідний html-код.

Завдання 2

Вдоскональте сторінку, додавши заголовки <H1> та <H2> а також кілька параграфів тексту до кожного заголовка.

Працюємо самостійно:

1) Додайте ще 2 свята за зразком.

2) Виділіть слова «Новий Рік» в параграфі жирним накресленням, додавши тег <b>…</b> або <strong>…</strong> наступним чином

3) Виділіть дату народження курсивом, додавши тег <i>…</i> або <em>…</em> наступним чином

4) Збережіть файл та перегляньте його у браузері. Надішліть файл на пошту

ДОМАШНЄ ЗАВДАННЯ

Опрацювати матеріал сторінки.
Виконати практичне завдання й надіслати вчителю на електронну пошту
Пройти тестування МійКлас.