Основи HTML. Правила побудови HTML-документів
План
Основні поняття
Веб-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера.
Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи.
Гіпертекстова технологія – це інформаційна технологія, що базується на використанні гіпертекстів.
Веб-документ, який ми бачимо на екрані браузера, називають веб-сторінкою. Це пов’язано з тим, що хорошим стилем вважається подання деякої частини інформації на одній умовній сторінці.
Структура документа
Програми мовою HTML містять інструкції, що називаються тегами. Всі теги мови HTML виділяються символами-обмежувачами (< і >), між якими записується ідентифікатор (ім’я) тега і, можливо, його параметри.
Теги
парні
непарні
відкриваючі
закриваючі
<HTML>
</HTML>
<br />
Загальний вигляд HTML документу��<!doctype html>�<html lang="ua">� <head>� <!-- Мета-інформація документу -->� </head>� <body>� <!-- Вміст документу -->� </body>�</html>�
Опис структури HTML документу.
Елемент doctype.
Doctype повинен розміщуватись на самому початку HTML документу. У цьому розділі необхідно вказати той стандарт HTML згідно з яким браузеру потрібно інтерпретувати гіпертекстову мову розмітки.
Елемент html.
Елемент html це кореневий елемент документу.
Любий HTML документ повинен починатися з тега <HTML> и закінчуватись тегом </HTML> .
Елемент head.
Елемент head містить мета-опис документу.
Між тегами заголовка <head> та </head> вставляються теги метаінформації (<meta>), назва сторінки вікна у браузері (<title>), а також список вмонтованих в документ таблиць стилів та сценаріїв клієнтських скриптів(<link>).
Елемент body.
Елемент body містить основний контент для відображення на сторінці.
Між тегами <body> та </body> міститься розмітка, що безпосередньо виводиться на екран користувача (видимий контент).
Система кодування символів.
Система кодування символів, що застосована в документі визначається атрибутом charset елементу meta.
Приклад:
<meta charset="utf-8">
Елемент title.
Назва сторінки у вікні браузера визначається елементом title.
Елемент title також використовується в:
• Назві сторінки у вікні браузера
• Історії перегляду Веб сторінок
• Закладках
• Результатах пошукових систем
Приклад:
<title>Про HTML | Навчальний Веб ресурс для вивчення HTML</title>
.
Мета-інформація опису сторінки.
Для додавання мета-інформації опису сторінки додайте елемент meta з параметрами name, рівному "description" та параметром content, в який введіть необхідне описання.
Приклади:
<meta name="description"
content="Інформація про гіпертекстову мову розмітки HTML. Україномовний ресурс для ознайомлення та вивчення інформаційних технологій.">
Мета-інформація ключових слів сторінки.
Для додавання мета-інформації ключових слів сторінки додайте елемент meta з параметрами name, рівному "keywords" та параметром content, в який введіть необхідне описання.
Приклади:
<meta name="keywords"
content="HTML, HTML5, Веб, інформація, вивчення, навчання, ІТ, гіпертекст, тег, елемент">
Приклад з тілом HTML документу:
<!doctype html>
<html lang="ua">
<head>
<meta charset="utf-8">
<title>Приклад тіла HTML документу</title>
</head>
<body>
<h1>Вітаю! Ви вивчаєте гіпертекстову мову розмітки!</h1>
<p>HTML це мова розмітки для створення Веб сторінок.</p>
<hr>
<h2>Майбутнє за інформаційними технологіями</h2>
<p>HTML це абревіатура від HyperText Markup Language</p>
<ul>
<li>Що таке HTML ?</li>
<li>Як створити HTML документ?</li>
<li>Синтаксис тегів</li>
</ul>
</body> </html>
и, показано на рисунку.
Результат виконання
Теги тіла документа
Тег <strong> (<B>) – напівжирний текст. Форма запису: <strong>текст</strong>
Тег <em> (<I>) – текст курсивом. Форма запису: <em> текст </em>
Тег <U> - текст підкреслений. Форма запису: <u> текст </u>
Тег <STRIKE> (<S>) – текст перекресленим горизонтальною лінією. Форма запису: <s> текст </s>
Тег <BIG> - текст шрифтом більшого (ніж нерозмічена частина тексту) розміру. Форма запису: <big> текст </big>
Тег <SMALL> - текст шрифтом меншого (ніж нерозмічена частина тексту) розміру.
Тег <SUB> - Зміщує текст у нижній індекс. Приклад: x<sub>1</sub>
Тег <SUP> - Зміщує текст у верхній індекс. Приклад: y<sup>2</sup>
Форматування абзаців
Тег <P> - використовується для створення абзацу. Форма запису: <p>текст абзацу</p>
Приклад:
<p>Перший параграф</p>
<p>Другий параграф</p>
Тег <BR /> - використовується для переведення, розриву рядка (кінцевого тегу немає).
Тег <hr /> - горизонтальна лінія у рядку.
Параметри тегу <HR> | Призначення |
align | Вирівнює по краю чи центру (можливі значення: LEFT, CENTER, RIGHT) |
width | Встановлює довжину лінії в пікселях чи відсотках від довжини вікна |
size | Встановлює товщину лінії в пікселях |
color | Вказує колір лінії |
Заголовки всередині документа.
Використовуються теги <h1>,<h2>,<h3>,<h4>,<h5>,<h6> (h1 – найбільший розмір, h6 – найменший). Форма запису: <h1>Заголовок розміру 1</h1>
Приклад:
<h1>Заголовок першого рівня</h1>
<h2>Заголовок другого рівня</h2>
<h3>Заголовок третього рівня</h3>
<h4>Заголовок четвертого рівня</h4>
<h5>Заголовок п'ятого рівня</h5>
<h6>Заголовок шостого рівня</h6>
Горизонтальне вирівнювання тексту.
Використовується параметр align в тегах <p> і <h1>…<h6>
Значення параметру ALIGN | Дія параметру |
left | Вирівнювання тексту по лівій межі вікна |
center | Вирівнювання тексту по центру вікна |
right | Вирівнювання тексту по правій межі вікна |
justify | Вирівнювання тексту по ширині вікна |