1. Поняття тегів. Їх класифікація
Download
Report
Transcript 1. Поняття тегів. Їх класифікація
ТЕМА 2
Структура вебсторінки
План
1. Поняття тегів. Їх класифікація.
2. Структура HTML-документа та його
основні теги.
3. Теги <META>. Їх призначення та
властивості.
1. Поняття тегів. Їх класифікація
Мова HTML призначена для
функціональної розмітки Web-документа.
Управляючі конструкції мови HTML
називаються тегами.
Всі теги записуються між дужками <…>
Файли HTML мають розширення htm
або html.
1. Поняття тегів. Їх класифікація
Теги бувають:
парні (теги-контейнери)
непарні.
Непарні теги діють на весь документ або
визначають разову дію у місці появи
тега.
1. Поняття тегів. Їх класифікація
При використання парних тегів у
документ додаються відкриваючий та
закриваючий теги, які діють на
частину документа, що знаходиться
між ними.
Наприклад:
<head> …
</head>
1. Поняття тегів. Їх класифікація
Дію тега можна уточнити за допомогою
використання атрибутів (параметрів)
тега, які записуються через пропуск
після назви тега.
Параметри, як правило, записуються у
вигляді:
“назва параметру = значення параметру”
Приклад:
2. Структура HTML-документа
Структура HTML–документа:
<html>
<head>
<title> Назва документа </title>
</head>
<body>
Тіло документа
</body>
</html>
2. Основні теги HTML-документа
Заголовок документу обмежується
тегами <head> та </head>
Заголовок документу може містити теги
<title> </title>
Між цією парою тегів розташовується
текст, який відображається у рядку
заголовка вікна Web-браузера.
Приклад: <title> Моя перша веб-сторінка
</title>
2. Основні теги HTML-документа
Змістовна частина HTML-документа
знаходиться між тегами
<body> та </body>
2. Параметри тега <body>
Alink колір активного гіперпосилання
link колір посилання, яке не переглядалось
vlink колір посилання, яке переглядалось
Bgcolor колір фону
Text колір тексту
Background URL фонового зображення
scroll наявність смуг прокрутки
2. Приклад HTML-документа
<html>
<head>
<title> Оксана </title>
</head>
<body bgcolor=yellow text=blue>
Моя перша веб-сторінка
</body>
</html>
2. Задання кольору тексту або фону
Колір може задаватись або константою, або
шестизначним RGB-кодом у шістнадцятковій
формі подання чисел:
перші дві позиції цього коду відповідають за
інтенсивність червоного кольору (Red),
наступні дві – за інтесивність зеленого (Green),
дві останні – за інтенсивність блакитного (Blue).
Наприклад: color=”red” – червоний колір;
color=”#aabbcc” – червоний колір, заданий
RGB-кодом
3. Призначення тегів <МЕТА>
Мета-теги – надають інформацію для
браузерів і пошукових машин.
В HTML-документі ці теги завжди
розташовуються між тегами
<head> </head>.
Більшість мета-тегів не є обов'язковими.
3. Призначення тегів <МЕТА>
Мета-теги:
1. <meta http-equiv ="content-type"
content="text/html; charset=Кодування">
– мета-тег для кодування. При його
використанні браузер буде правильно
відображати текст веб-сторінки
Приклад:
<meta http-equiv="content-type"
content="text/html; charset=Windows1251">
3. Призначення тегів <МЕТА>
2. <meta name="Refresh" Content="число (в
секундах); Url=имя файла с
расширением">
– мета-тег для показу додаткового
файлу перед основним
Приклад:
<meta name="Refresh" Content="10;
Url=INDEX.HTM">
Даний приклад завантажує документ
INDEX.HTM через 10 секунд.
3. Призначення тегів <МЕТА>
3. <meta name="Author" Content="им'я
автора">
- мета-тег для зазначення імені автора
Приклад:
<meta name="Author" Content="Дарина
Московська">
3. Призначення тегів <МЕТА>
4. Мета-тег для опису даного
веб-документа в пошукових системах
5. Мета-тег для задання ключових слів
веб-документа для пошукових систем
6. Мета-тег для зазначення електронної
адреси (наприклад, автора сайту)
7. Мета-тег для зазначення дати створення
веб-сторінки