1 of 14

Поняття про мову розмітки, гіпертекстовий документ

та його елементи.

Поняття тегу й атрибуту.

2 of 14

Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.

HTML (Hyper Text Markup Language –

мова гіпертекстової розмітки) – мова тегів, якою пишуться гіпертекстові документи для мережі Інтернет.

1. Базові конструкції мови HTML

3 of 14

2. Поняття тегу

Вся інформація про форматування документу міститься в фрагментах розташованих між знаками < > — такий фрагмент називають тегом.

Приклади тегів HTML:

<TITLE>, <BODY>, <TABLE>, </A>, <IMG>, </CENTER>.

Теги бувають:

  • Контейнерні (парні)
  • поодинокі (одинарні)

Відкриваюча дужка < ім'я тега, атрибут> закриваюча дужка

4 of 14

Приклади парних тегів:

<HTML> </HTML>,

<В> </В>,

<HEAD></HEAD>, <НЗ></Н3>, <ADDRESS></ADDRESS>, <LI></LI>.

​

Приклади одинарних тегів:

<BR>,

<HR>,

<МЕТА>, <BASEFONT>,

<FRAME>, <INPUT>.

5 of 14

Відкривальні теги (вказують програмі на початок об'єкту) можуть містити атрибути, які впливають на ефект, створюваний тегом.

​

Атрибути — задають значення властивостей об'єкту, поміщеного у контейнер.

Приклад тегу з атрибутами:

<BODY BGCOLOR="#000000">

6 of 14

3. Структура HTML-документа

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

HTML-документи містяться у файлах із розширенням .htm або .html.

Структура:

<HTML>

<HEAD>

<ТІТLЕ> Заголовок документа </ТІТLЕ>

</HEAD>

<BODY>

Текст, що відображається на екрані

</BODY>

</HTML>

7 of 14

<HTML> </HTML> - починає та закінчує документ

​

<HEAD> </HEAD> - починає та закінчує заголовок

документу

<ТІТLЕ> </ТІТLЕ> - задає назву документу

​

<BODY></BODY> - починає та закінчує тіло документу

​

8 of 14

Для того щоб розбити текст на логічні частини, використовують заголовки.

(Існує 6 рівнів заголовків документів).

Вони позначені тегами від

<Н1>...</Н1> до <Н6>...</Н6>.

найвищий рівень

найнищий рівень

Заголовки

9 of 14

Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>.

Абзаци та рядки

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

Наприклад:

<Н2 ALIGN=center>

<P ALIGN=right>.

10 of 14

Одинарні теги

<BR> - одинарний тег, що використовується для переходу на новий рядок без створення абзацу

​

<HR> - одинарний тег, що використовується для створення горизонтальної лінії, яка візуально відділяє різні частини документа.

11 of 14

Посилання

  • <a href =“url-посилання на сайт” target = “_blank” >Текст, до якого прикріплене посилання</a>

​

  • target = “_blank” – при натисканні посилання, сторінка відкривається у новій вкладці.

12 of 14

Додавання картинки

<img src= “посилання на картинку”>

​

Посилання може бути двох видів:

  • src= “url-посилання на картинку”
  • src= “img/ім’якартинки.розширення” (img/img1.jpg)

13 of 14

Маркований список

  • <ul>

<li>текст1</li>

<li>текст2</li>

<li>текст3</li>

<li>текст4</li>

      • </ul>

​

14 of 14

Нумерований список

  • <ol>

<li>текст1</li>

<li>текст2</li>

<li>текст3</li>

<li>текст4</li>

      • </ol>

​