КРАТЪК СПРАВОЧНИК ЗА HTML СТАНДАРТ

Съдържание

Увод
Структура на HTML документ
Форматиране на HTML документ
Формиране на таблици
Стилове в HTML документ
Хипертекстови връзки
Включване на изображения в HTML документ
Активиране на приложения
Разширени възможности за визуализация
Индекс
Тагове и атрибути

HTML ( Hypertext Markup Language ) е основно средство за създаване на WEB страници,които се разглеждат чрез програми,наречени браузери. HTML e език за хипертекстови документи, прост хипертекстов механизъм с вградени функции за форматиране и свързване на документи, за работа с таблици, фонови изображения. Позволява на текста да включи кодове за дефиниране на шрифтове, оформление, вложени графични изображения и хипертекст връзки. Използва се за писане на хипермедийни страници за WWW - основна услуга в INTERNET ,позволяваща достъп до хипертекстови документи.

Хипертекст е система за писане и представяне на текст, която дава възможност текстът да се свързва по много начини, достъпни на няколко детайлни нива. Хипертекст-документите може да съдържат връзки към различни документи или части от тях,намиращи се на една или различни машини.Хипермедията включва освен текст и графична, звукова, видео и друга информация.

HTML реализира хипертекстовите връзки чрез ключови думи (котви).

HTML се състои от инструкции, които ще наричаме HTML елементи. Те изглеждат по следния начин <име_на_елемент>. Повечето елементи маркират блокове на документа с различно предназначение или форматиране и изискват маркировка за край. Началото на такъв блок започва с <име_на_елемент> и завършва с </име_на_елемент>.

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

Някои елементи могат да съдържат аргументи, които предават параметри на интерпретиращата програма.

Специално резервираните символи в HTML като "<", "&" и др. е по-добре да се заменят с една от следните последователности :

&#n; - n е десетичния ASCII код на специалния символ

&name; - name е името на специалния символ (напр. за "<" е "lt")

HTML има инструкции, чрез които се активират приложения, вече програмирани с други средства ( например езикът Java).

За създаване на HTML документи потребителят може да използва всеки текстов редактор, работещ под Windows например Microsoft Word 6.0.

Съществуват и специализирани редактори като HTML Assistant 2.0. Той е доста удобен и лесен за работа функционален хипертерстов редактор, който предоставя на потребителя набор от бутони за автоматично изписване на елементите на HTML.

Структура на HTML документ

I. Заглавна част (HEAD)

Заглавната част съдържа информация за документа, която не се визуализира с основния текст. Елементите, които маркират началото и края на заглавната част са <HEAD> и </HEAD>. Най-често в заглавната част на документа се употребява незадължителния елемент:

<TITLE> заглавие </TITLE> - маркира заглавието на HTML документа. Ако се използва този елемент, заглавието на документа се визуализира в заглавната лента на прозореца на браузъра.

Друг елемент е:

<SCRIPT> , който предхожда програма, написана на Javascript, която се изпълнява преди визуализация на документа.

II. Тяло (BODY).

Елементите, които маркират началото и края на на тялото са <BODY> и </BODY>. Te не са задължителни.
Елементът <BODY> може да има следните атрибути (само в HTML 3):

BACKGROUND ="име_на_файл" Този файл ще служи за фон на изобразявания текст и трябва да бъде в GIF формат.

BGCOLOR ="rrggbb" - задава цвета на фона, където rr e количеството червено, gg е количеството зелено, bb е количеството синьо в него (rr, gg, bb са шестнадесетични числа 00 до FF).

TEXT ="rrggbb" - задава цвета на текста, където rr e количеството червено, gg е количеството зелено, bb е количеството синьо.

LINK ="rrggbb" - задава цвета на препратките (котвите), където rr e количеството червено, gg е количеството зелено, bb е количеството синьо.

VLINK ="rrggbb" - задава цвета на вече посетените препратки, където rr e количеството червено, gg е количеството зелено, bb е количеството синьо.

Форматиране на HTML документ

<BASEFONT SIZE=n> - задава базовия размер на шрифта (от 1 до 7) за целия документ (поддържа се само от Netscape Navigator 2.0 и MS Explorer). Добре е този елемент да се сложи веднага след елемента <BODY>.
<Hn> заглавие </Hn> , където n=1 до 6 - маркира 6 нива на заглавия, като шрифтът на всяко следващо ниво е с по-малка големина. Този елемент може да съдържа атрибут ALIGN (само в HTML 3), който има един от следните аргументи:
<P> - маркира блок от текст като параграф. </P> не е задължителен, тъй като началото на следващ параграф, заглавие, таблица, форма или списък автоматично завършват предишния параграф. Този елемент може да съдържа атрибут ALIGN (само в HTML 3), който има един от следните аргументи:
<[!]-- текст --> - маркира текст като коментар. Текстът може да бъде многоредов и тогава "!" е задължителен символ. Забележка: В текста не трябва да има последователност от две тирета ("--").
<CENTER> .... </CENTER> - центрира блок от текст, изображение, таблица и т.н. (поддържа се само от Netscape Navigator 2.0 и MS Explorer).
<ADDRESS> текст </ADDRESS> - указва на браузъра да тълкува текста като адресна информация. (Браузърът може да визуализира текста с отличаващ се от основния текст стил - например ITALIC).
<BLOCKQUOTE> текст </BLOCKQUOTE> - указва на браузъра да тълкува текста като цитат (например визуализира текста като BOLD).
<DL> ......... </DL> - отбелязват начало и край на списък с дефиниции на термини. В списъка началото на всеки термин се предхожда с <DT>, a дефиницията му започва с <DD>. При използване на този елемент браузерът визуализира списъка в прегледен вид.
<UL> ......... </UL> - отбелязват начало и край на неномериран списък от многоредови параграфи. В него началото на всеки елемент от списъка започва с <LI>. При използване на този елемент браузерът маркира с определен символ началото на всеки параграф от списъка. При вграждане на този елемент (т.е. на списъци от параграфи) браузерът използва различни символи за маркиране на вградените списъци. (Използват се символи ".", "-" и т.н.)
<OL> ......... </OL> - изпълнява функциите на горния елемент, като началото на параграфите не се маркират със символи, а се номерират. В него началото на всеки елемент също започва с <LI>.
<MENU> ... </MENU> е подобен на <UL>, но се форматира по-компактно (ако е възможно). Началото на всеки елемент започва с <LI>.
<DIR> ....... </DIR> - също е подобен на <UL>, но се опитва да подреди данните в колонки, които обикновено са по-къси от 20 символа. Началото на всеки елемент започва с <LI>. За да има ефект използването на този елемент препоръчва се параграфите да са по-къси от 20 символа.
<PRE> ....... </PRE> - загражда предварително форматиран текст, който браузъра не променя. Препоръчва се например да се използва при формиране на таблици, когато HTML документа ще се визуализира с браузер, неподдържащ елемента <TABLE>.
<HR> - чертае хоризонтална линия, която може да мени дължината или ширината си в зависимост от аргументите на следните атрибути:
- SIZE = n, където n е дебелината на линията в pixel (най-малката точка (елемент), която се изобразява на растерен екран)
- WIDTH = n[%] - указва дължината на линията, като n е дължина на линията в pixel, а % e съотношението на линията спрямо екрана.
- NOSHADE указва линията да се визуализира без сянка.
<BR> .... - указва нов ред в текста.
<BLINK> ..... </BLINK> - прави заградения текст мигащ.

Формиране на таблици

<TABLE> ....... </TABLE> описва таблично форматирана информация (само в HTML 3).

Този елемент може да има следните незадължителни атрибути:

BORDER [= n ] задава дебелината на ограждащите линии в pixel.
WIDTH =n[%] - указва ширината на таблицата в pixel или процент от ширината на екрана.
SELLSPACING = n дава разстоянието в pixel между табличните елементи (клетки).
CELLPADDING = n е разстоянието в pixel между съдържанието на клетките и ограждащите линии.

Вътрешни за <TABLE> са елементите:

<CAPTION> .... </ CAPTION> дефинира заглавието на таблицата и може да се ползва с атрибута ALIGN, който има един от следните аргументи: "top" , "bottom" "left" , "rigth" , определящи къде да се разположи заглавието.
<TR> ...... </TR> дефинира ред на таблицата.

На свой ред <TR> има следните вътрешни елементи:

<TH> .... </TH> определя заглавие на таблична колона или ред
<TD> .... </TD> отделя съдържанието на всяка незаглавна клетка.

<TR>, <TH>, <TD> могат да имат един от следните атрибути:

ALIGN ={"left", "center", "right"} и
VALIGN = {"top", "middle", "bottom"}, които определят как да се разполага съдържанието на клетките спрямо граничните линии.

<TH>и <TD> могат да имат и атрибутите:

COLSPAN = n - показва колко таблични колони заема клетката.
ROWSPAN = n - показва колко реда заема клетката.
NOWRAP - забранява пренасяне на нов ред в рамките на клетката.

Таблиците могат да се вграждат една в друга. Всяка клетка може да е таблица или да съдържа таблица.

Стилове в HTML документ

HTML поддържа два начина (стила) за изобразяване на текст: логически и физически като за препоръчване е първият, защото браузърът сам решава как да изобрази текста. Отнася се за яркост, акцентиране чрез удебеляване, ITALIC и т. н.
Логическите стилове са:

<EM> ... </ЕМ> - акцентиран ( подчертан ). Обикновено браузърите използват ITALIC.
<STRONG> ... </STRONG> - с по-засилено действие от EM. Обикновено браузърите използват BOLD.
<CODE> ... </CODE> - стил с фиксирана ширина на буквите.
<SAMP> ... </SAMP> - използва се за задаване на последователност от литерални символи.
<KBD> ... </KBD> - маркира текст, който ще бъде въведен от клавиатурата, например в наръчници с инструкции това ще бъде текст за въвеждане от потребителя.
<VAR> ... </VAR> - използва се за задаване на име на променлива.
<DFN> ... </DFN> - за дефиниране на термин (обикновено е удебелен BOLD или удебелен BOLD и ITALIC).
<CITE> ... </CITE> - загражда цитат ( най-често е ITALIC).

Физическите стилове са:

<ТТ> ... </ТТ> - шрифт с фиксирана ширина на буквите. Отговаря на логическия шрифт CODE.
<B> ... </B> - удебелява текста.
<I> ... </I> - прави текста ITALIC
<U> ... </U> - подчертава текста (само в HTML 3)
<BIG> ... </BIG> - увеличава размера на шрифта (само в HTML 3)
<SMALL> ... </SMALL> - намалява размера на шрифта (само в HTML 3)
<SUB> ... </SUB> - изобразява текста като долен индекс (само в HTML 3)
<SUP> ... </SUP> - изобразява текста като горен индекс (само в HTML 3)
<FONT SIZE =n FACE = "string" > ... </FONT> - променя големината и вида шрифт (поддържа се само от Netscape Navigator 2.0 и MS Explorer). Числото n може да бъде със знак + , - , или без знак. Ако е със знак, големината на шрифта се променя относително спрямо текущия размер с указания брой pixel. Когато n e без знак, то задава абсолютния размер на шрифта (от 1 до 7).

Хипертекстови връзки

Хипертекстовите връзки за свързване на различни документи или части от един и същи документ се реализира с ключови думи - хипертекстови котви. Котвата е част от текст или друг обект (например картинка), която маркира началото и (или) края на хипертекстова връзка. Елементът <A> се използва да маркира този текст и да даде хипертекстова връзка към друг документ. Форматът на този елемент е

<A HREF=" string "> котва </A> , където string е URL адрес (стандартизиран символен низ, задаващ разположението на INTERNET документ), който може да бъде последван от #етикет. Този етикет трябва да бъде дефиниран вътре в документа по следния начин:
<A NAME=" етикет"> текст </A> . Когато потребителят кликне с мишката върху текста-котва, браузъра визуализира документа, чийто URL адрес е зададен чрез string, като се позиционира в началото му. Ако в допълнение е зададен #етикет, браузъра визуализира документа, позициониран на текста след етикета. Възможно е string да не съдържа URL адрес, а само #етикет. Тогава препратката е към етикет в същия документ.

Включване на изображения в HTML документ

HTML дава възможност да се вмъква фаил с изображение в HTML документ. За това се използва елементът IMG. Изображението може да бъде включено в хипертекстова котва. Форматът на този елемент е:

<IMG атрибути >

Атрибутите могат да бъдат следните:

SRC ="image_url" - чрез него се задава URL адреса на изображението и е задължителен. Файлът трябва да бъде в GIF или X-bitmap формат. Стандартно те са с разширения .gif, .xbm, .xpm. Някои браузъри поддържат и формат JPEG с разширение .jpeg или . jpg.
ALT = "алтернативен текст" - някои браузъри нямат възможност да визуализират изображения. Атрибутът ALT задава алтернатива на изображението, която обикновено е текст.
ALIGN = "bottom", "middle", "top", "left", "right" - подравнява изображението спрямо текста :
- "bottom" - долният ръб на изображението с базовата линия на текста (по подразбиране) ,
- "middle" - средата на изображението с базовата линия на текста,
- "top" - горният ръб на изображението с върха на най-високия символ,
- "left" - в лявата част на страницата,
- "right" - в дясната част на страницата.
HEIGHT ="n", WIDTH ="m" - опредят височината и ширината на дисплей-изображението (само в HTML 3). Ако картинката е по-голяма от указания размер, то тя се изразва от браузъра при визуализация.
ISMAP - позволява изображението да се разделя условно на региони, с различно деиствие при кликване с мишка върху тях. Обикновено регионите са правоъгълници, кръгове или многоъгълници. Отделянето на област от картинка става по следния начин:

<MAP NAME = "string" > - string е условното наименование на областта (поддържа се само от Netscape Navigator 2.0 и MS Explorer).
<AREA SHAPE ="rect" CORDS ="x1,y1,x2,y2" HREF ="image_url"> - за правоъгълник,
<AREA SHAPE ="circle" CORDS ="x1,y1,x2,y2" HREF="image_url"> - за кръг,
<AREA SHAPE ="polygon" CORDS ="x1,y1,x2,y2,...xn,yn" HREF="image_url"> - за многоъгълник.
</MAP>

Обръщението към една такава област от изображение е:

<IMG SRC="image_url" USEMAP="#string">

Други аргументи на елемента IMG, чрез който се визуализират изображения са:

BORDER ="n" - употребява се само заедно с ISMAP и задава дебелината в pixel на граничната линия между отделните региони. Ако n=0 липсва гранична линия между регионите.
HSPACE ="n", VSPACE ="m" - тези атрибути определят хоризонталното и вертикалното пространство (в pixel), което остава празно между изображението и ограждащите го елементи (поддържа се само от Netscape Navigator 2.0).
LOWSRC =" image_url" - задава URL адрес на малък файл с картинка, който да се покаже веднага докато се чака зареждането на основното изображение (поддържа се само от Netscape Navigator 2.0).

Активиране на приложения

Браузерът Netscape Navigator 2.0 поддържа вградени аплети (програми, написани на Java, които се вграждат в HTML документ и могат да се изпълняват.) Стартирането на такава програма става със следните елементи:

<APPLET CODE= "име_на_програма" WIDTH= n HEIGHT= m >

<PARAM NAME ="string1" VALUE ="string2">

.......................

.......................
</APPLET>

CODE дава името на приложението за изпълнение;
WIDTH и HEIGHT дават пространството, необходимо за това (в pixel);

Елементите PARAM съдържат параметри за предаване към аплета на аргументите:

VALUE - задава стойността на параметъра;
NAME - задава името му.

Възможността да се активира приложение с използване на потребителски интерфейс се реализира чрез елемента FORM и съдържащите се в него входни елементи. Езикът HTML осъществява потребителски вход чрез FORM, който може да съдържа един или няколко елемента INPUT, SELECT или TEXTAREA.

Елементът INPUT може да има един или няколко от следните атрибути:

TYPE - задава вида на входния елемент - текстово поле, парола, превключвателна кутия (checkbox), бутон за опции (radio button), изображение, скрито текстово поле, бутон за изпращане на данните към програмата и стартирането и, бутон за възстановяване началните стойности на входните полета.
NAME - указва името на входното поле. За елементи от вида бутон за опции, които обикновено се комбинират в групи, NAME за всички елементи от групата трябва да е един и същ.
MAXLENGTH - показва максималната дължина в символи на полето.
SIZE - дава размера на входното поле в pixel.
VALUE - задава началната стойност на полето, а когато това е бутон от вида RESET или SUBMIT- надписа върху него.
CHECKED - задава началната стойност на поле от тип превключвателна кутия или бутон за опции (включен / изключен).
SRC - чрез него се задава URL адреса на изображението. За елемент от тип IMAGE кликването с левия бутон на мишката върху изображението има действието и на SUBMIT, като на програмата се изпращат и координатите на точката на кликване:

string1.x = координата1

string1.y = координата2

Елементът SELECT позволява да направите входно поле във вид на списъчна кутия. Той може да има следните атрибути:

NAME - указва името на списъка;
SIZE - задава броя редове, които да се виждат на екрана;
MULTIPLE - чрез тази опция се позволява да бъдат избирани няколко елемента едновременно от списъка.

Стойностите на списъка се задават чрез елементите OPTION , които имат атрибутите:

SELECTED - определя дали тази опция (елемент) е първоначално избраната;
VALUE - задава стойността, която се връща, ако опцията е избрана - ако този аргумент липсва, за стойност се приема текста след OPTION.

Елементът TEXTAREA позволява да направите многоредово поле. Той може да има следните атрибути:

NAME - указва името на полето.
COLS - задава броя на видимите колони в полето.
ROWS - указва броя на видимите редове в полето.

Следват различните варианти на синтаксиса на описаните по-горе елементи:

<FORM ACTION=адрес_на_програма METOD ={GET,POST} [ENCTYPE=string]>

<INPUT TYPE=TEXT NAME=" string1" [MAXLENGTH=n] [SIZE=m] [VALUE=" string2"]>

<INPUT TYPE=PASSWORD NAME=" string1" [MAXLENGTH=n] [SIZE=m] [VALUE ="string2"] >

<INPUT TYPE=CHECKBOX NAME=" string1" VALUE="string2" [CHECKED=" string3"]>

<INPUT TYPE=RADIO NAME=" string1" VALUE="string2" [CHECKED=" string3"]>

<INPUT TYPE=IMAGE NAME=" string1" SRC ="image_url">

<INPUT TYPE=HIDDEN NAME=" string1" VALUE="string2">

<INPUT TYPE=SUBMIT [NAME=" string1"] [VALUE="string2"]>

<INPUT TYPE=RESET [VALUE="string2"] >

<SELECT NAME =" string1" [SIZE="string2"] [MULTIPLE=" string3"]>

<OPTION SELECTED VALUE="string1"> текст

...........

</SELECT>

<TEXTAREA NAME=" string1" COLS=n ROWS=m> текст

</TEXTAREA>

</FORM>

Разширени възможности за визуализация

Елементът <FRAMESET> се поддържа само от браузера Netskape 2.0 и позволява да се визуализират различни HTML документи в самостоятелни прозорци

<FRAMESET {ROWS,COLS}="n1%,n2%,[n3%, ...,nk%]">

<FRAME NAME ="string1" SRC ="URL_адрес1" >

<FRAME NAME =" string2" SRC ="URL_адрес2" >

....................

<FRAME NAME =" stringk" SRC ="URL_адресk" >

<NOFRAME>

....................

</NOFRAME>
</FRAMESET>

Сумата от процентите, зададени в атрибута ROWS (COLS) трябва да е равна на 100. Всеки прозорец може да бъде разделян на нови (хоризонтални или вертикални) прозорци с допълнителен (вложен) елемент FRAMESET. Аргументът SRC определя URL адреса на HTML документа, които ще бъде визуализиран в съответния прозорец.

Елементът NOFRAME маркира текст, който ще бъде показан вместо описаните прозорци в случай, че браузера не поддържа елемента FRAME и обратно - ако браузера поддържа елемента FRAME, той ще игнорира маркирания от NOFRAME текст.

Разделянето на екрана на прозорци ни позволява да приложим следната интересна техника: при кликване върху котва в документ от един прозорец, да се сменя съдържанието на друг прозорец с документ, указан в URL адрес на котвата. Това става с новия атрибут TARGET в хипертекстова връзка: