Мова HTML

email:  voronenko@54.edu.ks.ua 

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

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

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

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

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

Як з’явилася мова HTML і для чого існують теги, дивіться в цьому відео. 

Правила запису тегів 

1. Теги записують латинськими літерами. 

2. Регістр у тегах не розрізняється. 

3. Існують парні та непарні теги. 

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

Наприклад:

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

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

<!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> — вирівнювання тексту по центру.

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

HTML-теги для форматування тексту ч.1

HTML-теги для форматування тексту ч.2

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

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

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

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

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

Завдання 1

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

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

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

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


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

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

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

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

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

Завдання 2

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

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

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

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

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

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

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