Лекція 16 Поняття Про Мову Розмічання Гіпертекстового Документа - дистан

План
1. Поняття мови HTML. Структура HTML-

документа
2. Теги форматування тексту, списки,
гіперпосилання
3. Використання таблиць у HTML-документах
Основною перевагою та особливістю веб-
сторінок є те, що інформація, розміщена на них,
має вигляд гіпертексту.
Гіпертекст — це текст, у який вбудовані

спеціальні коди, що задають форматування
тексту, наявність у ньому ілюстрацій,
мультимедійних вставок та гіперпосилань.
Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики
Луцьк ЗОШ№23,
О с н о в и м о в и Луцьк H T M L
HTML (Hyper Text Markup Language – мова
розмітки гіпертексту) – стандартна мова
розмітки документів у всесвітній павутині, яка
обробляється спеціальними програмами
(браузерами) і відображається у вигляді
документа, у зручній для людини формі
HTML не є мовою програмування!

Мову HTML було розроблено британським
ученим Тімом Бернерс-Лі приблизно в 1989–
1991 роках під час роботи в Європейській лабораторії
з ядерних досліджень ЦЕРН у Женеві (Швейцарія).

Напрямки та інструменти веб-дизайну
Порядок створення HTMLдокумента
HTML-документ можна створювати за допомогою найпростішого текстового

процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows
Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.
1. У головному меню WINDOWS вибрати пункт Пуск-Программы-Стандартные -

Блокнот.
2. Ввести структуру документа.
3. Зберегти створений документ, обов`язково надавши йому розширення .htm
4. Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної
сторінки завантажити браузер, відкрити меню File, вибрати команду Open file,
завантажити створений файл.
5. Для внесення змін повернутись до програми Блокнот, внести зміни, зберегти
файл.
6. Активізувати браузер, натиснути кнопку Обновить.

О с н о в и м о вЛуцьк
и HTML
Поняття тегу
Одна з найпоширеніших помилок початківців — це

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

и HTML
Атрибути тегу
Більшість тегів мають додаткові властивості або

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

Атрибут завжди повинен мати:
• Пробіл між ім'ям атрибута і назвою елементу.
• Ім'я атрибута, за яким іде знак дорівнює.
• Значення атрибута, загорнене в прямі лапки.

и HTML
Структура HTML документа
Теги нечутливі до регістра, тому можуть бути

написані як великими, так і малими літерами.
Документ HTML може містити такі типи даних:
1.Теги – команди в < >.
2.Коментарі –пояснення до документу. Вони допомогають
розібратися в його змісті <!-- … -- >.
3.Текст – те, що користувач бачить на екрані браузера.
Мультимедійні елементи – картинки, звук, відео – не є частиною

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

и HTML
<html>
<head>
Cлужбова інформація та посилання на
фавікон, таблицю стилів і скрипти, які
використовуються на веб сторінці.
</head>
<body>
Увесь контент, який
відображається на
сторінці
</body>
</html>

и HTML

и HTML
Тег <Title>…</Title> містить слова, які з’являються в

рядку заголовка баузера.
<head>
<title>Моя тестова сторінка </title>
</head>

и HTML
Параметри тегу BODY
Bgcolor – змінює колір фону. Колір задається

словом або кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – визначає колір тексту.
<body bgcolor = “red” text=“blue”>
Background – розміщує в якості фону зображення з
файлу з картинкою.
<body background = “dog.gif”>

и HTML
Проектування та верстка веб-сторінок
Теги для форматування символів
Теги Ефект
<B> та </В> Напівжирне накреслення
<I> та </I> Курсивне накреслення
<U> та </U> Підкреслене
<S> та </S> Перекреслене

Верхній індекс
<SUP> та </SUP>
<SUB> та </SUB> Нижній індекс

Основи мови HTML Луцьк
Шрифт
тег <font> … </font>- змінює розмір, колір і стиль

тексту.
Атрибути:
size - розмір шрифту 1-7.
color – колір тексту,
face - назва шрифту
face="Courier New”
и HTML
Заголовки
Існує 6 рівнів заголовків:

<h1> . . . </h1>, …,
<h6> . . . </h6>
Атрибут – align – вирівнювання
Значення: Left (по замовченню)
Right Center
<body bgcolor ="#CC3399" text ="#CCCCCC">
<h1 align = “center”> Title 1 </H1>
<h2 align = “right”> Title 2 </H2>
<h3 align = “left”> Title 3 </H3>
<h4> Title 4 </H4>
<h5> Title 5 </H5>
<h6> Title 6 </H6>
</body>
и HTML
Абзац
Тег <p> вказує на початок нового

абзацу и вставляє порожній рядок перед
абзацем. Атрибут align.
Тег <br> - розрив рядка.

и HTML
Текстові гіперпосилання
Теги <А> та </А>

Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або
поза межами HTML-документа він має звернутися, переходити з однієї веб-
сторінки на іншу, завантажувати файли тощо
<А HREF="#назва_мітки">Текст посилання</А>
<HTML>
<TITLE>Моя фірма</TITLE>
<BODY>
<H1><A HREF="l.html">Наша продукція</A></H1>
<H1><A HREF="2.html">Наші замовники</A></H1>
</BODY>
</HTML>

Таблиці та списки
на веб-сторінках

Луцьк
Нумеровані й марковані списки
Невпорядкований список
У невпорядкованому списку для виділення елементів використовуються
певні позначки (крапки, квадрати тощо).
Починається такий список із тегу <UL>, а закінчується — </UL>.
Кожний елемент списку починається з тегу <LI>.

Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей
атрибут набуває таких значень:
disk — зафарбоване коло;
o circle — коло;
 square — маленький чорний квадрат.

Приклад 2.1. Маркований список, в якому для позначення елементів
використовують коло

Упорядкований список
В упорядкованому списку всі елементи пронумеровані.
Починається список із тегу <0L>, а закінчується — </OL>.
Кожний елемент такого списку також починається з тегу <LI>.
Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут
набуває таких значень:
• А — велика літера;
• а — мала літера;
• І — велика римська цифра;
• і — мала римська цифра;
• 1 — арабська цифра.
Приклад 2.2. Нумерований список, в якому для позначення елементів
використовують малі римські цифри

Упорядкований список
У разі потреби за допомогою атрибута START можна задати відмінний від

одиниці початковий номер елемента, наприклад <0L TYPE="I" START="5">,
Нумерований список, початковий елемент якого позначено латинською
літерою Е, яка є п'ятою в алфавіті, описують так:
<OL TYPE="A" START="5">
<LI>Перший елемент списку</LI>
<LI>Другий елемент списку</LI>
<LI>Третій елемент списку</LI>
<LI>Четвертий елемент списку</LI>
</OL>

Створення таблиці
У кожному з яких може

міститися заголовок
Таблицю описують за Таблиця повинна мати
допомогою тегів один або кілька рядків
<ТН>...</ТН>
або дані
TABLE>...</TABLE> TR>...</TR>
<TD>...</TD>
Атрибут BORDER, який

має цілочислове значення,
Наприклад <TABLE BORDER=5>
що визначає товщину
рамки в пікселях
Заголовок таблиці задається тегами <CAPTION> та </CAPTION>

Приклад 2.4. HTML-документ, що містить таблицю
Понеділок Вівторок Середа Четвер П'ятниця
1. Зарубіжна
1. Алгебра 1. Українська мова 1. Географія 1. Хімія
література
2. Фізична
2. Іноземна мова 2. Хімія 2. Геометрія 2. Іноземна мова
культура
3. Фізична
3. Алгебра 3. Іноземна мова 3. Фізика 3. Геометрія
культура
4. Трудове 4. Українська
4. Географія 4. Інформатика 4. Українська мова
навчання література
5. Українська
5. Фізика
література

<HTML> <TR> <TR>
<TITLE>Приклад простої таблиці</TITLE> <TD>2. Іноземна мова</TD> <TD>4. Географія</TD>
<BODY> <TD>2. Хімія</TD> <TD>4. Інформатика</TD>
<TABLE BORDER="1"> <TD>2. Геометрія</TD> <TD>4. Трудове навчання</TD>
<CAPTION>Розклад уроків</CAРТION> <TD>2. Фізична культура</TD> <TD>4. Українська мова</TD>
<TR> <TD>2. Іноземна мова</TD> <TD>4. Українська
<TH>Понеділок</TH> </TR> література</TD>
<TH>Вівторок</TH> <TR> </TR>
<TH>Середа</TH> <TD>3. Фізична культура</TD> <TR>
<TH>Четвер</TH> <TD>3. Алгебра</TD> <TD></TD>
<TH>П'ятниця</TH> <TD>3. Іноземна мова</TD> <TD>5. Фізика</TD>
</TR> <TD>3. Фізика</TD> <TD>5. Українська
<TR> <TD>3. Геометрія</TD> література</TD>
<TD>1. Алгебра</TD> </TR> <TD></TD>
<TD>1. Українська мова</TD> <TD></TD>
<TD>1. Зарубіжна література</TD> </TR>
<TD>1. Географія</TD> </TABLE>
<TD>1. Хімія</TD> </BODY>
</TR> </HTML>
и Луцьк
О с н о в и м о вЛуцьк HTML

Об'єднання комірок
Значеннями цих атрибутів є кількість

об'єднуваних стовпців або рядків
Для об'єднання комірок використовують
такі атрибути: COLSPAN (об'єднання по
горизонталі, у рядку) і ROWSPAN (по Наприклад, COLSPAN=3 означає, що
вертикалі,у стовпці) тегу <TD> комірка розтягнута на З стовпці, а
ROWSPAN=2 — що комірка займає 2
рядки.

Приклад 2.5. HTML-документ, який містить таблицю з об'єднаними

комірками

Встановлення ширини таблиці та комірок
Ширину комірок — за допомогою того

самого атрибута у тегу <TD> або <ТН>
Ширину таблиці задають атрибутом Ширину таблиці можна визначати як у

WIDTH у тегу <TABLE> пікселях, так і у відсотках від ширини
вікна
Ширину комірок — у пікселях або у
відсотках від ширини таблиці.

Приклад 2.6. HTML-документ, в якому задана ширина таблиці та

деяких комірок

Лекція 16 Поняття Про Мову Розмічання Гіпертекстового Документа - дистан

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

Лекція 16 Поняття Про Мову Розмічання Гіпертекстового Документа - дистан

Uploaded by

Copyright:

Available Formats

План

1. Поняття мови HTML. Структура HTML-

Гіпертекст — це текст, у який вбудовані

Чашук О.Ф., вчитель інформатики ЗОШ№23,

HTML не є мовою програмування!

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

HTML-документ можна створювати за допомогою найпростішого текстового

1. У головному меню WINDOWS вибрати пункт Пуск-Программы-Стандартные -

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Одна з найпоширеніших помилок початківців — це

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Більшість тегів мають додаткові властивості або

Порядок запису атрибутів у тегу не має значення.

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Теги нечутливі до регістра, тому можуть бути

Мультимедійні елементи – картинки, звук, відео – не є частиною

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Тег <Title>…</Title> містить слова, які з’являються в

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Bgcolor – змінює колір фону. Колір задається

Чашук О.Ф., вчитель інформатики ЗОШ№23,

<I> та </I> Курсивне накреслення

<U> та </U> Підкреслене

<S> та </S> Перекреслене

Чашук О.Ф., вчитель інформатики ЗОШ№23,

тег <font> … </font>- змінює розмір, колір і стиль

color – колір тексту,

face - назва шрифту

Існує 6 рівнів заголовків:

Тег <p> вказує на початок нового

Тег <br> - розрив рядка.

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Теги <А> та </А>

<А HREF="#назва_мітки">Текст посилання</А>

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Починається такий список із тегу <UL>, а закінчується — </UL>.

Кожний елемент списку починається з тегу <LI>.

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

У разі потреби за допомогою атрибута START можна задати відмінний від

Чашук О.Ф., вчитель інформатики ЗОШ№23,

У кожному з яких може

Атрибут BORDER, який

Заголовок таблиці задається тегами <CAPTION> та </CAPTION>

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Понеділок Вівторок Середа Четвер П'ятниця

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Значеннями цих атрибутів є кількість

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Приклад 2.5. HTML-документ, який містить таблицю з об'єднаними

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Ширину комірок — за допомогою того

Ширину таблиці задають атрибутом Ширину таблиці можна визначати як у

Чашук О.Ф., вчитель інформатики ЗОШ№23,

Приклад 2.6. HTML-документ, в якому задана ширина таблиці та

Чашук О.Ф., вчитель інформатики ЗОШ№23,

You might also like