Основи HTML. Правила побудови HTML-документів

Основи HTML.
Правила
побудови HTML-
документів
Робота
Вороб'я Нікіти
План
 Основні поняття
 Структура html-документа
 Опис структури html-документа
 Основні теги
Основні поняття
Веб-документ – це текст, написаний мовою HTML чи
іншою, який призначений для перегляду
електронної інформації на екрані комп’ютера за
допомогою браузера.
Гіпертекст – це електронний документ, який містить
гіперпосилання на інші документи.
Гіпертекстова технологія – це інформаційна
технологія, що базується на використанні
гіпертекстів.
Веб-документ, який ми бачимо на екрані браузера,
називають веб-сторінкою. Це пов’язано з тим, що
хорошим стилем вважається подання деякої
частини інформації на одній умовній сторінці.
Структура документа
Програми мовою HTML містять інструкції, що
називаються тегами. Всі теги мови HTML виділяються
символами-обмежувачами (< і >), між якими записується
ідентифікатор (ім’я) тега і, можливо, його параметри.
Теги
парні непарні
<br />
відкриваючі закриваючі
<HTML> </HTML>
Загальний вигляд 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 Вирівнювання тексту по ширині вікна

Основи HTML. Правила побудови HTML-документів

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Основи HTML. Правила побудови HTML-документів

Uploaded by

Copyright:

Available Formats

Основи HTML.

Мета-інформація ключових слів сторінки.

Тег <BR /> - використовується для переведення, розриву рядка

Тег <hr /> - горизонтальна лінія у рядку.

Параметри тегу <HR> Призначення

align Вирівнює по краю чи центру (можливі

width Встановлює довжину лінії в пікселях чи

size Встановлює товщину лінії в пікселях

color Вказує колір лінії

left Вирівнювання тексту по лівій межі вікна

center Вирівнювання тексту по центру вікна

right Вирівнювання тексту по правій межі вікна

justify Вирівнювання тексту по ширині вікна

You might also like