Лекція 1 - HTML, Загальна структура Веб-документу ...

Лекція 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

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

Інколи зручно використовувати зображення у вигляді кнопки:

Зображення розташовуються по-сусідству по горизонталі. Для забезпечення їх обтікання зліва або справа зручно використовувати опцію 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>

Social Like

Додати коментар

JComments

Facebook

Обрати мову

Хто на сайті

На сайті один гість та відсутні користувачі