Лекція 1 - HTML, Загальна структура Веб-документу – базові теги
- Деталі
- Перегляди: 21652
Структура Веб-документу– head, title, body
Базові теги роботи з текстом – b, i, font, hr
Списки – ul, ol, li
Посилання - a, href
Зображення та їх обтікання – img, div, style, float
Попередньо форматований текст - pre
Фон і колір тексту всього документу - body, background, text
Структура Веб-документу– head, title, body
Детальний опис тегів документу можна знайти на сайті HTML довідник Розглянемо типову структуру Веб-документу, помічаючи пояснення тегів **** зірочками:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" …> **** специфікація версії HTML <html> **** контейнер вмісту Веб-сторінки <head> **** голова документу, призначена для браузера та пошукових систем <title> Сайт про HTML </title> **** назва документу, що відображається вгорі вікна браузера </head> **** кінець голови документу <body> **** тіло документу, що зберігає вмістиме веб-сторінки <!-- таблиця з поясненнями змісту тегів--> ***** коментар . . . </body> **** кінець тіла документу </html> **** кінець вмісту Веб-сторінки
Базові теги роботи з текстом – b, i, font, hr
- STRONG , В - Використовується для виділення тексту жирним
- EM, I - Використовується для виділення тексту курсивом
- U - Виділення тексту підкресленням
- S - Перекреслення тексту
- SUP - Створення верхнього індексу
- SUB - Створення нижнього індексу
- FONT - Зміна кольору, типу, розміру шрифту
- HR - Вставляє в текст горизонтальну розділову лінію
Наприклад запис
<u>підкреслимо</u> <b>виділимо</b> <s>перекреслимо</s>
Відобразиться як:
підкреслимо виділимо перекреслимо
Списки – ul, ol, li
- UL - Створення маркованого списку
- OL - Створення нумерованого списку
- LI - Створення пунктів списку всередині списків OL або UL
Наприклад
<ul>
<li>UL - Створення маркованого списку</li>
<li>OL - Створення нумерованого списку</li>
</ul>
Посилання - a, href
Елемент посилання а (ancor) є якорем, бо при натисканні на його текст, що поміщається між відкриваючим тегом <a> і закриваючим тегом </a>, буде здійснюватися перехід за адресою href.
Скорочення href ("hypertext reference / гіпертекстове посилання)" визначає internet-адресу та / або ім'я файлу:
<a href=" http://tanet.tneu.org/navchannja/" target="_blank" title= "Навчальні матеріали та розклад"> Навчання </a>
Присутність атрибуту target="_blank" вказує, що посилання буде відкриватися в новому вікні, атрибут title дозволяє виводити пояснення, яке випливає при наведенні на гіперпосилання. Вказані атрибути не є обов’язковими. Для переходу в межах одного сайту до сторінки, текст якої розташований в тому ж каталозі у веб-адресі можна вказувати лиш назву файлу відповідної сторінки. Посилання в межах однієї сторінки маркуються символом #. На даній сторінці повинен бути присутній html елемент із відповідним ідентифікатором id:
<a href="#rоzdil1">Розділ 1: Структура html документу</a>
....
<h2 id="rozdil1"> Розділ 1: Структура html документу </h2>
Зображення та їх обтікання – img, div, style, float
Зображення подається непарним тегом в якому важливими атрибутами є адреса зображення, його розміри, тексти, що появляються на місці зображення перед його завантаженням а також текст, що випливає при наведенні на зображення.
<img src="kotygoroshko.jpg" width="136" height="211" alt="Дитяче фото" title="Дитяче фото">
Інколи зручно використовувати зображення у вигляді кнопки:
<a href="http://www.kotygoroshko.com/client"> <img src="kotygoroshko2.jpg" align="left" hspace="10" width="160" height="216" alt="Фото з клієнтом" title="Фото з клієнтом"> </a>
Зображення розташовуються по-сусідству по горизонталі. Для забезпечення їх обтікання зліва або справа зручно використовувати опцію float CSS , включеного в логічний блок за допомогою атрибуту style. Перервати це обтікання можна за допомогою атрибуту clear тегу br.
<div style="float:left">
<img src="kotygoroshko.jpg" width="138" height="215" alt="Дитяче фото" title="Дитяче фото">
<img src="kotygoroshko2.jpg" width="162" height="216" alt="Дитяче фото2" title=" фото з клієнтом">
</div>
Перевірка обтікання текстом зліва. Надалі перервемо обтікання <br clear="left">Без обтікання.
Попередньо форматований текст - pre
В деяких випадках (зокрема для відображення програмного коду) доцільно використовувати попередньо відформатований текст
<pre> Блок
Попередньо відформатованого
Тексту
</pre>
Результат виконання коду:
Блок Попередньо відформатованого Тексту
Фон і колір тексту всього документу - body, background, text
Іноді, краще задати колір тексту для всього документа. Також, можна задати і фонове зображення за допомогою атрибутів тегу BODY:
BACKGROUND - визначає зображення для "заливки" фону. Значення задається у вигляді повного URL або імені файлу з картинкою у форматі GIF або JPG.
BGCOLOR - визначає колір фону документа.
TEXT - визначає колір тексту в документі:
<body background="fon.jpg" text="red">
<p> Текст із кольором документу </p>
<p>Знову текст із кольором документу <font color ="green"> виділення тексту іншим кольором </font>
</p>
<p> Знову текст із кольором документу </p>
</body>
Обрати мову
Хто на сайті
На сайті один гість та відсутні користувачі