Урок 1

УРОК 1: Да започнем от начало :)

Какво е това HTML?
Основна структура на HTML документите.
Елемент HTML.
Елемент HEAD.
Елемент TITLE.
Елемент BODY.
Примери.

1. Какво е това HTML?

HTML (Hyper Text Markup Language) е описателен език, който се използва за създаване на хипертекстови (хипермедийни) Web документи.

2. Основна структура на HTML документите.

Всеки HTML документ има следната структура:

<HTML>
<HEAD>
<TITLE>Заглавие на документа </TITLE>
</HEAD>
<BODY>
Съдържание на документа.
</BODY>
</HTML>

2a. Етикети

Етикетът е специален текст заграден от символите: '<' и '>'. Например изразът <BODY> е етикет с име BODY.

Крайният етикет включва '/' след '>'.
Например </BODY> е краен етикет.

Имената на етикетите не са чуствителни към големината на символите т.е <BODY> и <BodY> имат едно и също значение.

2b. Елементи

Съвкупността от начален етикет, съдържание и краен етикет се нарича елемент.

За да се изведе, например, текста "Здравей" с удебелен шрифт, се използва елемент с име - B по следният начин:
Здравей, където
 е начален етикет;
 е краен етикет;
Здравей е съдържание на елемента.

Някои елементи позволяват пропускане на крайния етикет.

Някои елементи нямат краен етикет и се наричат празни елементи.

Допустими са неограничен брой нива на вложеност на елементите на един документ т.е в общият случай HTML документa има видa:

<HTML>
<HEAD>
<TITLE>Заглавие на документ</TITLE>
</HEAD>
<BODY>
 <ИМЕ НА ЕТИКЕТ1>
 Съдържание на ЕТИКЕТ1
 <ИМЕ НА ЕТИКЕТ2>
 Съдържание на ЕТИКЕТ2
 <ИМЕ НА ЕТИКЕТ3>
 Съдържание на ЕТИКЕТ3
 </ИМЕ НА ЕТИКЕТ3>
 </ИМЕ НА ЕТИКЕТ2>
 </ИМЕ НА ЕТИКЕТ1>
</BODY>
</HTML>

Елементите не могат да се припокриват, т.е. ако началния етикет на елемента B се намира в елемента P, то и крайният етикет на B трябва да се намира в същия елемент P.


 
 ...........

3c. Атрибути

Атрибутите задават различни характеристики на елементите. Например, елемента BODY има атрибут BGCOLOR, чрез който се задава цвета на фона на документа, и друг атрибут TEXT, чрез който се задава цвета на текста в съответния HTML документ.

Атрибутите се включват само в началният етикет:

<ИМЕ НА ЕТИКЕТ Име_на_атрибут="Стойност"
Име_на_атрибут="Стойност"
.....
>
</ИМЕ НА ЕТИКЕТ>

Стойността на атрибута се огражда с единични или двойни кавички. Ако стойността е число, то може да не се загражда в кавички.

Имената на атрибутите могат да се изписват с произволни по големина букви. Стойностите им, обаче, трябва да бъдат изписвани точно по показания начин.

3. Елемент HTML.

\..........Описание

Началният етикет <HTML> се поставя в началото на HTML документа, за да укаже, че в него се използва езикът HTML. Аналогично крайният етикет </HTML> се поставя в края на документа.

\..........Синтаксис

4. Елемент HEAD.

\..........Описание

Елементът HEAD съдържа информация за HTML документа, която не се визуализира от браузерите. Разполага се преди елемента BODY.

\..........Синтаксис

5. Елемент TITLE.

\..........Описание

Елементът TITLE съдържа заглавието на HTML документа, което се изобразява в заглавната лента (Title bar) на прозореца на браузера.

Заглавието не трябва да надвишава 60 символа. Например, заглавието на настоящия документ е: HTML Tutorial.

Елементът TITLE се използва в рамките на елемента HEAD.

\..........Синтаксис

6. Елемент BODY.

\..........Описание

Елементът BODY описва основното съдържание (изобразявано от браузерите) на HTML документa.

Поставя се веднага след крайния етикет </HEAD>.

Елементът има атрибути, които позволяват да се задават глобалните характеристики на документите, като цвета на фона, цвета на текста и др.

\..........Синтаксис

\..........Атрибути

Атрибут	Описание
TEXT="цвят"	Задава цвета на текста.
BGCOLOR="цвят"	Задава цвета на фона на документа.
BACKGROUND="URI"	Задава URI на файла с изображението, което трябва да бъде използвано като фон на документа.
LINK="цвят"	Задава цвета на "непосетените" хипертекстови връзки.
VLINK="цвят"	Задава цвета на "посетените" хипертекстови връзки.
ALINK="цвят"	Задава цвета на активната хипервръзка, т.е. тази върху която се щрака в момента.

Забележка: Ако са зададени валидни стойности както на атрибута BGCOLOR, така и на атрибута BACKGROUND, за фон се използва съответното графично изображение.

Щракнете тук за повече информация за URI адресите.

\..........Подходящи примери

За използването на различните атрибути на елемента BODY, разгледайте примери 1, 2, 3, 4.

7. Примери.

Изберете пример и се придвижете под текстовото поле, за да видите HTML кода.

Пример 1: Въвеждане и визуализация на текст.
Пример 2: Промяна на цвета на текста.
Пример 3: Промяна на цвета на фона.
Пример 4: Използване на графичен файл като фон.