Мова гіпертекстової розмітки.

HTML (англ. HyperText Markup Language — мова розмітки гіпертекстових документів) – текстова мова розмітки, призначена для розмітки документів, які містять текст, зображення, гіперпосилання, тощо. Розмітка – процес розміщення в тексті кодів НТМL.

Гіпертекст – це текст, що містить зв’язки з іншими документами (гіперпосилання). Це дає змогу переходити до інших документів безпосередньо з того, що містить активне посилання.

Документи створені мовою HTML називають HTML-документи. Це звичайні текстові файли, які містять мітки (так звані теги).

Тег (від англ. tag – “ярлик, етикетка, бірка”) – це символ розмітки мови HTML, який вводиться в кутових дужках < >. Інша назва тегу – дескриптор. За допомогою тегів у HTML-документі форматують різні елементи: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Кожен елемент має унікальну назву латинськими літерами і не чутливий до регістру.

Перегляд HTML-документів здійснюється за допомогою веб-браузера.

В мові HTML застосовують теги: одинарні (непарні), парні та коментарі. Парні теги складаються з відкриваючого і закриваючого тегів. 

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

За допомогою тегів браузер розпізнає структуру документа. Отри­мавши цю інформацію, браузер використовує вбудовані в нього за замов­чуванням правила про те, як відображати контент сторінки.

Контент (англ. content — вміст) — це інформаційне наповнення сайта. Контент може містити:

  • текст;
  • статичну графіку;
  • анімаційні елементи;
  • мультимедійні елементи: відео, аудіо.
Без використання HTML-тегів браузер виведе невідформатований текст, без відступів, заголовків, абзаців тощо. Розглянемо структуру стандарт­ної HTML-сторінки.

HTML-документ завжди починається з елемента <! DOCTYPE>, призна­ченого для того, щоб вказати браузеру, як слід інтерпретувати поточну вебсторінку. 

Зверніть увагу! Елемент <! DOCTYPE> пишеться великими літерами. Справа в тому, що це не є тег HTML, це інструкція браузеру про те, якою версією HTML написана сторінка.

<! DOCTYPE html> означає, що використовується HTML5.

Сторінка завжди починається з відкривального тега <html> та закін­чується закривальним тегом </html> і складається з двох обов'язкових блоків — голови (head) і тіла (body), які записуються послідовно.

У блоці <head></head> зберігається службова інформація, призна­чена допомогти браузеру в роботі з даними. Тут розташовані мета-теги, які використовуються для зберігання інформації, призначеної для по­шукових систем, а саме: опис сайта, ключові слова тощо. Одним із таких мета-тегів є визначення кодування HTML-сторінки. Це необхідно робити для того, щоб веббраузер міг правильно відображати текст, якщо кодування обрано неправильно — замість тексту будуть виведені ієрогліфи. Найбільш поширеним наразі є кодування UTF-8, тому в блоці <head></head> ми маємо написати:

<meta charset-"utf-8">

Інформація є зазвичай невидимою для пересічного користувача, крім тега <title>, в якому відображається назва сторінки сайта.

Увесь контент, який відображається на сторінці, розміщується між відкривальним і закривальним тегами <body>.

Зупинимось на тегах для роботи з текстом, який відображається у вигляді заголовків, абзаців і списків.

У HTML існують шість рівнів заголовків. Найвищим є заголовок пер­шого рівня, найменшим — шостого. Позначаются вони відповідно <h1>... <h6>. Заголовки мають атрибут align, який визначає тип вирівнювання на сторінці та може набувати одне з чотирьох значень:

Назва

Значення

left

За лівим краєм (за замовчуванням)

right

За правим краєм

center

По центру

justify

За шириною (за лівим і правим краями)


Атрибути тега мають вигляд: назва атрибуту, потім знак рівності та значення атрибуту, записане в подвійних або одинарних лапках, напри­клад:

<h1 aliqn='center'>

Код HTML


Відображення браузером


Абзаци виділяються парним тегом <р> </р> (від англ. paragraph). Як і теги заголовків, тег paragraph має атрибут align.

Списки можуть бути впорядковані, тобто нумерованими, невпорядкованими (маркованими) та багаторівневими.

Кожен елемент списку виокремлюється парним тегом <1і>. Нумерова­ний список позначаєтея парним тегом <ol> (скор. ordered list — впорядко­ваний список), маркований список — парним тегом <ul> (скор. unordered list — невпорядкований список).

У HTML існує спеціальний тег-контейнер для реалізації навігації по сайту — <nav>. Це парний тег, який містить навігаційні посилання.


Для посилання на іншу сторінку використовують парний тег <а> (скор. від англ. anchor — якір). Тег має обов'язковий атрибут href, зна­ченням якого є назва сторінки з розширенням .html.


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


Під час розроблення макета сайта завжди постає проблема заповнення його текстом. Зазвичай для надання макету закінченого вигляду дизай­нери застосовують так звану «рибу» — великий текстовий масив беззміс­товних слів із потрібною кількістю символів, абзаців і параграфів, який називається Lorem Ipsum.

Основна функція Lorem Ipsum полягає в зосередженні уваги на ди­зайні, а не на читанні вмісту. Ще одна причина, через яку використову­ють текст, — це заповнення сторінки для досягнення реального розподілу букв і пропусків у тексті, яке неможливе у випадку простого дублювання вислову «Тут написано ваш текст... Тут написано ваш текст...».

У більшість текстових і HTML-редакторів Lorem Ipsum входить як текст за замовчуванням. Існують і сайти, на яких можна згенерувати потрібну кількість абзаців. Одним із найвідоміших і найпопулярніших сайтів-генераторів є Llpsum generator (https://uk.lipsum.com/)



Підписатися на: Дописи (Atom)