Цей ресурс не претендує на докладний довідник за тегами html. Він є додатковим навчальним посібником для слухачів курсів підвищення кваліфікації.
Web-сторінки можуть існувати в будь-якому форматі, але за стандарт був прийнятий HyperText Markup Language - мова розмітки гіпертекстів, що призначена для створення форматованого тексту із зображеннями, відео, анімацією та гіперпосиланнями на інші документи, які знаходяться як усередині самого веб-ресурсу, так і на інших ресурсах Web-пространства.
HTML у класичному вигляді було створено на початку 1990 років батьком всесвітнього павутиння та працівником CERN (European Organization for Nuclear Research) Тімом Бернерсом-Лі.
Html (HyperText Markup Language)
мова розмітки гіпертекстових документів
Web-сторінки можуть існувати в будь-якому форматі, але за стандарт був прийнятий HyperText Markup Language - мова розмітки гіпертекстів, що призначена для створення форматованого тексту із зображеннями, відео, анімацією та гіперпосиланнями на інші документи, які знаходяться як усередині самого веб-ресурсу, так і на інших ресурсах Web-пространства.
HTML у класичному вигляді було створено на початку 1990 років батьком всесвітнього павутиння та працівником CERN (European Organization for Nuclear Research) Тімом Бернерсом-Лі.
Основною ідеєю 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 код виглядає таким чином
<p>Інститут післядипломної освіти НТУУ КПІ оголошує набір за наступними спеціальностями</p>
<h4>Спеціальності ІПО НТУУ КПІ</h4>
<br>
<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>
Теги для шрифтових засобів виділення тексту виглядають таким чином
<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> - Великий
<sup> </sup> - це верхній індекс
<sub> </sub> - це нижній індекc
<i> </i> - Текст курсивом
<u> </u> - Підкреслений текст
<strike> </strike> -
<s> </s> -
<tt> </tt> - моноширинный шрифт
<small> </small> - Маленький
<big> </big> - Великий
<sup> </sup> - це верхній індекс
<sub> </sub> - це нижній індекc
Анатомія HTML документа
<!DOCTYPE html> - Доктайп. У минулому, коли HTML був
молодий (близько 1991/1992), доктайпи мали виступати як посилання на набір
правил, яким HTML сторінка повинна була слідувати, щоб проводити автоматичну
перевірку помилок та інші корисні речі.
У наші дні це просто історичний артефакт, який має бути включений для того, щоб усе працювало правильно.
<html></html> - Цей елемент обгортає весь контент на всій сторінці. Його називають кореневим елементом.
<body></body> - Елемент <body>. У ньому
міститься весь контент, який ви хочете показувати користувачам, коли вони
відвідують вашу сторінку, наприклад, текст, зображення, відео, ігри, аудіодоріжки тощо.
<meta charset="utf-8"> - цей елемент
встановлює UTF-8 кодування вашого документу, яке включає більшість символів з
усіх відомих людству мов. По суті, тепер документ може обробляти будь-який
текстовий контент, який ви вкладете в нього.
<title></title> - Елемент <title>. Цей
елемент встановлює заголовок для вашої сторінки, тобто назву. Вона з'являється на вкладці браузера
сторінки і використовується для опису сторінки, коли ви додаєте її в
закладки/вибране.
CSS (Cascading Style Sheets) -
каскадні таблиці стилів.
CSS - це спеціальна мова стилів, за допомогою якої описують, як має виглядати документ, що написаний мовами розмітки HTML, XHTML та XML.
На початку історії всесвітнього павутиння World Wide Web, мова HTML використовувалася тільки для визначення структури вмісту сторінки. Розробники могли тільки помічати текст: "це - заголовок" чи "це - параграф", виділяти та структурувати текст тегами курсиву, підкреслення або тегами напівжирного тексту. Але треба було якимось чином ще і оформляти цей структурований текст.
Почали з’являтися дуже специфічні теги, такі як <font>, <bgcolor> та інші, що дозволяли оформляти веб-сторінки безпосередньо всередині вмісту документа. Ці теги відрізнялися від інших тим, що визначали дизайн, а не структуру.
Оригінальні теги структурування, такі як <table>, стали все більше застосовуватися для дизайну сторінок, замість структурування тексту. Багато нових тегів, такі як <blink>, підтримувалися тільки одним браузером, що не могло довго тривати.
В той же час коди сторінок ставали все більш громіздкими та нечитаними і було прийнято рішення розділити між собою структуру сторінки (HTML) та її візуальне оформлення (CSS).
Зараз HTML в чистому вигляді має дуже обмежений набір інструментів, що не дозволяє вирішувати ті чи інші дизайнерські та функціональні замисли веб-майстрів. Тут й приходить на допомогу CSS, який вирішує більшість завдань, що відносяться до стильового оформлення сторінки.
Які можливості дає використання CSS:
- Відображати один і той же документ в різних дизайнах для різних пристроїв.
- Швидко загружати сайти (за рахунок перенесення правил відображення дизайну сторінок в окремий CSS-файл час завантаження сайту зменьшується).
- Швидко робити зміну дизайну (не потрібно правити кожну сторінку, треба лише змінити CSS-файл).
- Створювати складну і пропрацьовану техніку дизайну.
Всередині блоку оголошень може знаходитися одне або кілька оголошень, розділених крапкою з комою. Оголошення - це рядок, складений з CSS- властивості та її значення.
Кожне правило починається з селектора (покажчика), що вказує на ті HTML-елементи, до яких ми будемо застосувати CSS-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, обводку, поля, положення на екрані тощо.
СУХИЙ ЗАЛИШОК
HTML використовується для структурування вмісту сторінки, а CSS - для оформлення цього структурованого вмісту.
Кожне правило починається з селектора (покажчика), що вказує на ті HTML-елементи, до яких ми будемо застосувати CSS-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, обводку, поля, положення на екрані тощо.
СУХИЙ ЗАЛИШОК
HTML використовується для структурування вмісту сторінки, а CSS - для оформлення цього структурованого вмісту.
І ще, насамкінець, про важливий тег коментарів.
Тег коментарів додає необхідні нотатки в код документа.
Виглядає наступним чином <!-- Коментарі -->
Текст коментаря не відображається на сторінці у браузері і його видно тільки вам під час редагування Html коду. Це зручно, коли треба супроводити складний код поясненнями або просто вимкнути якусь частину коду без його видалення.
Коментарі можна використовувати в будь-якому місці сторінки, окрім тега <title> - усередині нього вони не працюють. Всередині тега <style> HTML-коментарі теж не працюють, тому що в розмітці CSS код коментується іншим способом. Тут коментарі виділяють таким чином
Приклад використання коментарів під час встановлення параметрів лінії <hr>
<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
}
</style>
Докладніше про тег лінії <hr> читайте на сторінці HTML корисності.
Тег коментарів додає необхідні нотатки в код документа.
Виглядає наступним чином <!-- Коментарі -->
Текст коментаря не відображається на сторінці у браузері і його видно тільки вам під час редагування Html коду. Це зручно, коли треба супроводити складний код поясненнями або просто вимкнути якусь частину коду без його видалення.
Коментарі можна використовувати в будь-якому місці сторінки, окрім тега <title> - усередині нього вони не працюють. Всередині тега <style> HTML-коментарі теж не працюють, тому що в розмітці CSS код коментується іншим способом. Тут коментарі виділяють таким чином
/* Коментарі */
Приклад використання коментарів під час встановлення параметрів лінії <hr>
<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
}
</style>
Докладніше про тег лінії <hr> читайте на сторінці HTML корисності.