HTML . Короткий опис

Цей ресурс не претендує на докладний довідник за тегами html. Він є додатковим навчальним посібником для слухачів курсів підвищення кваліфікації.

---

Html (HyperText Markup Language)
мова розмітки гіпертекстових документів

Web-сторінки можуть існувати в будь-якому форматі, але за стандарт був прийнятий HyperText Markup Language - мова розмітки гіпертекстів, що призначена для створення форматованого тексту із зображеннями, відео, анімацією та гіперпосиланнями на інші документи, які знаходяться як усередині самого веб-ресурсу, так і на інших ресурсах Web-простору.

HTML у класичному вигляді було створено на початку 1990 років батьком всесвітнього павутиння та працівником CERN (European Organization for Nuclear Research) Тімом Бернерсом-Лі.

За своєю суттю HTML не був чимось революційним. Він був заснований на Стандартній Узагальненій Мові Розмітки SGML (Standard Generalized Markup Language), що вже існувала.

Основною ідеєю SGML було створити таку мову для розмітки документів, яка б не була прив'язана до певної апаратно-програмної платформи і забезпечувала  можливість перенесення документів з однієї платформи на іншу без зміни структури та відображення. Цю ідею реалізувала команда з IBM, вирішивши відокремити структуру документа від його оформлення.

Тім Беренс-Лі розвинув і вдосконалив ідеї та напрацювання SGML. Так з'явився HTML.

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

Для створення html-документа можна використовувати будь-який текстовий редактор.

Засобами HTML задаються синтаксис та розміщення тегів (англ. tag – спеціальні вбудовані вказівки), відповідно до яких браузер відображає вміст веб-документу. Текст самих тегів Веб-браузером не відображається.

Елементи мови розмітки гіпертекстових документів - Теги та Метатеги.

Теги - елементи мови розмітки гіпертекстових документів. Правильна назва тегу – дескриптор. Усі теги починаються символом '<' і закінчуються символом '>'.

Зазвичай використовуються два теги – відкриваючий та закриваючий. Текст між відкриваючим та закриваючим тегами відображується на сторінці сайту так, як це вказано у відкриваючому тегу.

Мета-теги - дескриптори, що розміщуються у заголовку сторінки та містять інформацію, яка призначена не для користувачів, а для пошукових роботів: опис сторінки, ключові слова, інформацію про автора, управляючі команди для ботів, тощо. 

АНАТОМІЯ  HTML ЕЛЕМЕНТУ

Відкриваючий тег (Opening tag) : Складається з імені елемента (в даному випадку, "p" - параграф), укладеного в кутові дужки . Відкриваючий тег вказує, де елемент починається чи починає діяти, на прикладі вище - відкриваючий тег <р> показує, де починається абзац. 

Закриваючий тег (Closing tag): Це те саме, що і тег, що відкриває, за винятком того, що він включає в себе слеш перед ім'ям елемента. Закриваючий елемент вказує, де елемент закінчується, на прикладі вище - де закінчується абзац. Відсутність тега, що закриває, є однією з найпоширеніших помилок початківців і іноді може призводити до дивних результатів. 

Контент (Content): Це контент елемента, який є просто текстом. 

Теги та контент разом становлять Елемент (Element). 

Текст між відкриваючим та закриваючим тегами відображується на сторінці сайту так, як це вказано у відкриваючому тегу.

<small> текст маленького розміру</small>

<big>текст великого розміру </big>

<i> текст курсивом </i>

Властивості тега називаються атрибутами. Атрибути дають додаткові можливості для форматування тексту. Текстові значення атрибутів пишуться в лапках.

Порядок запису: відкриваючий тег– атрибут – необхідний текст - закриваючий тег.

<font face="Calibri" size="36">необхідний текст</font>

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

Атрибут завжди повинен мати: 

• Пробіл між ним та ім'ям елемента (або попереднім атрибутом, якщо елемент вже має один або кілька атрибутів). 
• Ім'я атрибута, за яким слідує знак рівності. 
• Значення атрибута, укладене з двох сторін у лапки.

В наборі тегів html-мови є 6 типів заголовків:

<h1> Назва сайту </h1>

<h2> Назва сайту </h2>

<h3> Назва сайту </h3>

<h4> Назва сайту </h4>

<h5> Назва сайту </h5>

<h6> Назва сайту </h6>

Використовуйте заголовок h1 тільки 1 раз на сторінці. Під час структурування своєї статті обов’язково використовуйте підзаголовки h2 і h3.

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

Головні правила використання тега <Title>

• Title має бути унікальним для всього сайту.
• Title не повинен повторюватись у вигляді підзаголовків.
• Title не повинен бути дуже довгим.

---

Текст на сторінці сайту бажано структурувати для полегшення його сприйняття відвідувачами сайту. Крім того, це впливає на пошуковий рейтинг ресурсу. Для структурування тексту використовуються теги заголовків, напівжирного тексту, маркованих списків тощо

Приклад фрагмента тексту об'яви на сторінці сайту:

Інститут післядипломної освіти НТУУ КПІ оголошує набір за наступними спеціальностями: програмна інженерія, комп’ютерна інженерія, безпека інформаційних та комунікаційних систем, теплоенергетика, маркетинг.

Такий текст краще представити у такому вигляді:

---

Інститут післядипломної освіти НТУУ КПІ оголошує набір за спеціальностями

Спеціальності ІПО НТУУ КПІ

• Програмна інженерія
• Комп'ютерна інженерія
• Безпека інформаційних та комунікаційних систем
• Теплоенергетика
• Маркетинг

---

html код об'яви виглядатиме таким чином

<b>Інститут післядипломної освіти НТУУ КПІ оголошує набір за наступними спеціальностями</b>
<br>
<h3>Спеціальності ІПО НТУУ КПІ</h3>
<br>
<ul style="text-align: left;">
<li>Програмна інженерія</li>
<li>Комп’ютерна інженерія</li>
<li>Безпека інформаційних та комунікаційних систем</li>
<li>Теплоенергетика</li>
<li>Маркетинг</li>
</ul>

Для того, щоб відформатувати текст та вирівняти його по краю (лівому чи правому) або по центру, використовують тег <p> - параграф.

Параграф має атрибут align (вирівнювання), значення якого буде показувати, як розміщувати текст. Наприклад:

Роміщуємо текст по центру :

<p align="center">Текст, що редагується </p>

По правому краю:

<p align="right"> Текст, що редагується </p>

По лівому краю:

<p align="left"> Текст, що редагується </p>

За замовчуванням текст вирівнюється браузером по лівому краю. В такому випадку атрибут align="left" для параграфа можна не вказувати.

Для зміни розміру та кольору тексту використовується тег <font> з атрибутами size и color.

<font color="#ff0000"> Текст текст текст текст </font>

<font size= " 20">Текст текст текст текст</font>

Теги для шрифтових засобів виділення тексту виглядають таким чином

<b> </b> - Напівжирний текст

<i> </i> - Текст курсивом

<u> </u> - Підкреслений текст

<strike> </strike> - Перекреслений 

<s> </s> - Перекреслений (другий варіант, який нічим не відрізняється від першого)

<tt> </tt> - моноширинний шрифт

<small> </small> - Маленький 

<big> </big> - Великий

 - це ^{верхній індекс}

 - це _{нижній індекc}

Одним з найбільш важливих елементів HTML є тег <a>, що призначений для створення посилань.

Залежно від наявності атрибутів name або href тег <a> встановлює або посилання, або анкор (якір).

 

<a href="URL">текст</a>

<a name="ідентифікатор">текст</a>

Анкором називається закладка всередині сторінки, яку можна вказати як ціль посилання. Під час використання посилання, яке вказує на анкор, відбувається перехід до закладки всередині веб-сторінки.

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

Як значення атрибуту href використовується адреса документа

Адреса посилання може бути абсолютною або відносною. Абсолютні адреси працюють скрізь і всюди незалежно від імені сайту або веб-сторінки, де прописано посилання. Відносні посилання, вказують на переходи по поточному документу.

Докладніше про те, як створити посилання в межах однієї веб-сторінки у розділі html-корисності.

За замовчуванням, при переході за посиланням  <a href="URL">текст</a> документ відкривається в поточному вікні. При необхідності, ця умова може бути змінена атрибутом target тега <a>. При значенні атрибуту _blank документ буде відкриватися у новому вікні.

<a href="URL" target="_blank">текст</a>

---

Анатомія HTML документа

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>Моя тестова сторінка</title>
  </head>
  <body>
   <p>Мій текстовий контент</p>
   <img src="images/myimage.jpg" alt="Моє зображення">
  </body>
</html> 

<!DOCTYPE html> - Доктайп. У минулому, коли HTML був молодий (близько 1991/1992), доктайпи мали виступати як посилання на набір правил, яким HTML сторінка повинна була слідувати, щоб проводити автоматичну перевірку помилок та інші корисні речі.

У наші дні це просто історичний артефакт, який має бути включений для того, щоб усе працювало правильно.

<html></html> - Цей елемент обгортає весь контент на всій сторінці. Його називають кореневим елементом.

 <head></head> - Елемент <head>. Цей елемент є контейнером для всього, що ви бажаєте включити на HTML сторінку, але не є контентом, який ви показуєте користувачам вашої сторінки. До цього контенту відносяться такі речі, як метатеги з ключовими словами та описом сторінки, які будуть з'являтися в результатах пошуку, CSS-стилі нашого контенту, кодування та багато іншого.

<meta charset="utf-8"> - цей елемент встановлює UTF-8 кодування вашого документу, яке включає більшість символів з усіх відомих людству мов. По суті, тепер документ може обробляти будь-який текстовий контент, який ви вкладете в нього.

<title></title> - Елемент <title>. Цей елемент встановлює заголовок для вашої сторінки, тобто назву.  Вона з'являється на вкладці браузера сторінки і використовується для опису сторінки, коли ви додаєте її в закладки/вибране.

<body></body> - Елемент <body>. У ньому міститься весь контент, який ви хочете показувати користувачам, коли вони відвідують вашу сторінку, наприклад, текст, зображення, відео, ігри, аудіодоріжки тощо.

---

CSS (Cascading Style Sheets) - 
каскадні таблиці стилів.

CSS - це спеціальна мова стилів, за допомогою якої описують, як має виглядати документ, що написаний мовами розмітки HTML, XHTML та XML.

На початку історії всесвітнього павутиння World Wide Web, мова HTML використовувалася тільки для визначення структури вмісту сторінки. Розробники могли тільки помічати текст: "це - заголовок" чи "це - параграф", виділяти та структурувати текст тегами курсиву, підкреслення або тегами напівжирного тексту. Але треба було якимось чином ще і оформляти цей структурований текст.

Почали з’являтися дуже специфічні теги, такі як <font>, <bgcolor> та інші, що дозволяли оформляти веб-сторінки безпосередньо всередині вмісту документа. Ці теги відрізнялися від інших тим, що визначали дизайн, а не структуру.

Для оформлення  текстів дизайнери використовували звичайні таблиці (<table>). Завдяки універсальності таблиць, великій кількості параметрів, які керують їх виглядом, таблиці надовго стали певним стандартом для верстки веб-сторінок. 

У таблиці з невидимою границею, як у такий собі модульній сітці, було зручно розміщувати елементи веб-сторінки. Проте, це був неправильний підхід, адже від початку таблиці були призначені для розміщення табличних даних, а не для дизайну. 

В той же час коди сторінок ставали все більш громіздкими та незручними для читання. Тому було прийнято рішення розділити між собою структуру сторінки (HTML) та її візуальне оформлення (CSS).

Поступово, з розвитком Каскадних таблиць стилів звичайні таблиці стали застосовуватись виключно для розміщення табличних даних.

Зараз HTML в чистому вигляді має дуже обмежений набір інструментів, що не дозволяє вирішувати ті чи інші дизайнерські та функціональні задуми веб-майстрів. Тут й приходить на допомогу CSS, який вирішує більшість завдань, що відносяться до стильового оформлення сторінки.

Які можливості дає використання CSS:

• Відображати один і той же документ в різних дизайнах для різних пристроїв.
• Швидко завантажувати сайти (за рахунок перенесення правил відображення дизайну сторінок в окремий CSS-файл час завантаження сайту зменшується).
• Швидко робити зміну дизайну (не потрібно правити кожну сторінку, треба лише змінити CSS-файл).
• Створювати складну і пропрацьовану техніку дизайну.

Правила в CSS працюють по каскадному принципу (пріоритету). Це дозволяє отримати передбачуваний результат у випадку, коли до одного елемента одночасно застосовуються декілька стильових правил.

Всі CSS-правила складаються із селектора та блоку оголошень (укладеного у фігурні дужки).

Всередині блоку оголошень може знаходитися одне або кілька оголошень, розділених крапкою з комою. Оголошення - це рядок, складений з CSS- властивості та її значення.

Кожне правило починається з селектора (покажчика), що вказує на ті HTML-елементи, до яких ми будемо застосувати CSS-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, обводку, поля, положення на екрані тощо.

СУХИЙ ЗАЛИШОК

HTML використовується для структурування вмісту сторінки, а CSS - для оформлення цього структурованого вмісту.

---

І ще, насамкінець, про важливий тег коментарів.

Тег коментарів додає необхідні нотатки в код документа.

Виглядає наступним чином   <!-- Коментарі -->

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

Коментарі можна використовувати в будь-якому місці сторінки, окрім тега <title> - усередині нього вони не працюють. Всередині тега <style> HTML-коментарі теж не працюють, тому що в розмітці CSS код коментується іншим способом. Тут коментарі виділяють таким чином

/* Коментарі */

Приклад використання коментарів під час встановлення параметрів лінії <hr>

<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
}
</style>

---