1 of 15

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

За навчальною програмою 2017 року

Урок 29

8

teach-inf.com.ua

2 of 15

Поняття про мову HTML

Розділ 4 § 4.1

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

Для розробки вебсторінок використовують мову розмітки гіпертексту HTML (англ. Hyper Text Markup Language – мова розмітки гіпертексту). Команди, що записані цією мовою, виконуються браузером, який розміщує об’єкти на вебсторінці відповідно до задуму розробника.

html

8

3 of 15

Поняття про мову HTML

Розділ 4 § 4.1

HTML-код сторінки складається з даних двох типів:

Тексту

Тегів

який відображатиметься на сторінці;

(англ. tag — ярлик, ознака) — команд, що визначають розмітку тексту: його структуру, формат і розташування фрагментів тексту, забезпечують уставлення нетекстових об’єктів на сторінку та ін.

8

4 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Теги розміщуються в дужках <та>. Наприклад,

тег, призначений для проведення на сторінці горизонтальної лінії.

<hr>

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

Атрибути записують у кутових дужках після тегу, відділяючи пропусками. Значення атрибутів записують у лапках після знака:

=

8

5 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Наприклад, на сторінку потрібно вставити зображення з файлу 1.jpg, який розміщено в одній папці з файлом вебсторінки, та встановити для цього зображення ширину та висоту по 200 пікселів. Для вставлення зображення потрібно використати тег img (англ. image – зображення) з такими атрибутами:

Тег з атрибутами матиме вигляд:

для вказівки імені файлу із зображенням;

src

ширина

width

height

для встановлення ширини та висоти зображення

висота

8

6 of 15

Поняття про мову HTML

Розділ 4 § 4.1

А для вставлення на вебсторінку зображення з файлу, що зберігаєть ся в Інтернеті з URL-адресою

http://teach-inf.com.ua/img/01.png

шириною 200 пікселів і висотою 0 100 пікселів, може бути використано тег з атрибутами:

<img src =

ʺhttp://teach-inf.com.ua/img/01.pngʺ

width = ʺ200ʺ height = ʺ100ʺ>

8

7 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Деякі команди визначають призначення або формат лише частини контенту.

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

У закриваючого тегу немає атрибутів, але перед ним поставлено символ:

/

8

8 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Наприклад, якщо в реченні:

HTML – це мова розмітки гіпертексту

Потрібно виділити курсивним накресленням лише слово HTML, то цю команду буде записано так:

<і>HTML</i> – це мова розмітки гіпертексту

відкриваючий тег , що визначає накреслення символів курсивом

<і>

відповідний йому закриваючий тег.

</і>

8

9 of 15

Поняття про мову HTML

Розділ 4 § 4.1

А якщо слова:

Українські традиції

Потрібно записати символами червоного кольору збільшеного розміру, то може бути використано парний тег <font> (англ. font – шрифт) з атрибутами color і size (амер. color – колір, англ. size – розмір):

<font color =ʺredʺ size =ʺ5ʺ> Українські традиції </font>

8

10 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Переглянути HTML-код вебсторінки, відкритої у вікні браузера, можна, вибравши в контекстному меню сторінки команду Переглянути джерело сторінки, Програмний код сторінки або подібну чи натиснувши сполучення клавіш Ctrl+U.

8

11 of 15

Поняття про мову HTML

Розділ 4 § 4.1

Теги, що визначають структуру сторінки:

тег створення заголовка на веб-сторінці.

тег вставлення на веб-сторінку зображення та встановлення значень його властивостей.

тег створення абзацу на веб-сторінці.

<р> ... </р>

тег виділення фрагмента тексту напівжирним накресленням.

тег створення гіперпосилання.

<а href=«...»> ... </а>

8

12 of 15

Дайте відповіді на запитання

Розділ 4 § 4.1

Що таке HTML-код сторінки? Дані яких видів він містить?

Як записують теги; теги з атрибутами; парні теги?

Який тег призначено для вставлення зображення з файлу на вебсторінку? Для створення гіперпосилання?

Як можна переглянути HTML-код сторінки?

8

13 of 15

Домашнє завдання

Проаналізувати

§ 4.1, ст. 107-110

Розділ 4 § 4.1

8

14 of 15

Працюємо за комп’ютером

Розділ 3 § 3.5

Сторінка

109

8

15 of 15

Дякую за увагу!

За навчальною програмою 2017 року

Урок 29

8

teach-inf.com.ua