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

Увод

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

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

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

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

НТМL се състои от инструкции, които ще наричаме HTML елементи или HTML tags. Те изглеждат по следния начин: <име_на_елемент/tag>

HTML елемент/tag

<име_на_елемент/tag>

Повечето елементи маркират блокове на документа с различно предназначение или форматиране и изискват маркировка за край. Началото на такъв блок започва с <име_на_елемент> и завършва с </име_на_елемент>.

HTML блок:

<име_на_елемент>

…

</име_на_елемент>

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

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

За създаване на HTML документи може да се използва всеки текстов редактор работещ под WINDOWS например: Notepad, Microsoft Word. Съществуват и специални редактори като HTML Assistant, CuteHTML, а също така и по-мощни средства за разработване на web-сайтове като MS FrontPage, DreamWeaver и др.

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

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

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

Най-често в заглавната част на документа се употребява незадължителния елемент <ТITLE>.

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

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

Заглавна част

<HEAD>

…

<ТITLE> заглавие </TITLE>

…

[<SCRIPT>,]

</HEAD>.

II. Тяло (ВОDY)

Елементите, които маркират началото и края на на тялото са <ВODY> и </BODY>. Те не са задължителни.

Тяло

<ВODY>

…

</BODY>

Елементът <BODY> може да има следните атрибути:

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

BGCOLOR ="#rrggbb" - задава цвета на фона.

TEXT="#rrggbb" - задава цвета на текста.

LINK ="#rrggbb" - задава цвета на препратките (котвите).

VLINK ="#rrggbb" - задава цвета на вече посетените препратки

Означението "#rrggbb" е номер на цвят от RGB цветовата схема, където rr е количеството червено, gg е количеството зелено, bb е количеството синьо в него, a rr, gg, bb са шестнадесетични числа 00 до FF, т. е. от 0 до 255 (в десетична бройна система).

Цифрите в шестнадесетичната бройна система съответно са:

0₁₆ = 0₁₀, 1₁₆ = 1₁₀,

2₁₆ = 2₁₀, 3₁₆ = 3₁₀,

4₁₆ = 4₁₀, 5₁₆ = 5₁₀,

6₁₆ = 6₁₀, 7₁₆ = 7₁₀,

8₁₆ = 8₁₀, 9₁₆ = 9₁₀,

A₁₆ = 10₁₀, B₁₆ = 11₁₀,

C₁₆ = 12₁₀, D₁₆ = 13₁₀,

E₁₆ = 14₁₀, F₁₆ = 15₁₀, 10₁₆ = 16₁₀

(вж. Естествени числа и позиционни бройни системи, http://web.orbitel.bg/bogdeva/ или направо на: http://web.orbitel.bg/bogdeva/documents/bookreference3.pdf)

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

базов размер на шрифта

задава базовия размер на шрифта (n може да бъде от 1 до 7) за целия документ. Добре е този елемент да се сложи веднага след елемента <ВODY>.

заглавие

<Hn> вид заглавие </Hn>

където n може да бъде от 1 до 6 - маркира 6 нива на заглавия, като шрифтът на всяко следващо ниво е с по-малка големина. Този елемент може да съдържа атрибут АLIGN, който има един от следните аргументи: "center" - центрира заглавието, "left" - изравнява вляво, "right" - изравнява вдясно.

начало на блок от текст

<P>

маркира блок от текст като параграф. </P> не е задължителен, тъй като началото на следващ параграф, заглавие, таблица, форма или списък автоматично завършват предишния параграф. Този елемент може да съдържа атрибут АLIGN, който има един от следните аргументи: "center" - центрира текста на параграфа, "left" изравнява вляво, "rigth" - изравнява вдясно, "justify" - изравнява и отляво и отдясно, като добавя необходимия брой празни позиции (шпации) между думите.

коментар

"" е знак за край на коментар.

Коментарът е текст, който може да бъде многоредов и тогава "!" е задължителен символ. В текста не трябва да има последователност от две тирета ("--").

центриране

…

</ CENTER>

центрира блок от текст, изображение, таблица и т.н.

адресна информация

<АDDRESS> текст </АDDRESS>

указва на браузъра да тълкува текста като адресна информация. Браузърът може да визуализира текста с отличаващ се от основния текст стил, например ITALIC.

цитат

<BLOCKQUOTE> текст </ BLOCKQUOTE>

указва на браузъра да тълкува текста като цитат (например визуализира текста като BOLD).

списък с дефиниции на термини

<DL>

<DD>…

…

</DL>

<DL>… </DL> отбелязват начало и край на списък с дефиниции на термини. В списъка началото на всеки термин се предхожда с <DT>, а дефиницията му започва с <DD>. При използване на този елемент браузерът визуализира списъка в прегледен вид.

неномериран списък (от многоредови параграфи)

<UL>

<LI>...

…

</UL>

<UL> ... </UL> - отбелязват начало и край на неномериран списък от многоредови параграфи. В него началото на всеки елемент от списъка започва с <LI>. При използване на този елемент браузерът маркира с определен символ началото на всеки параграф от списъка. При вграждане на този елемент (т.е. на списъци от параграфи) браузерът използва различни символи за маркиране на вградените списъци. (Използват се символи "•", "-" и т.н.)

номериран списък (от многоредови параграфи)

<OL>

<LI>...

…

</OL>

<OL> … </OL> - изпълнява функциите на горния елемент, като началото на параграфите не се маркират със символи, а се номерират. В него началото на всеки елемент също започва с <LI>.

компактен неномериран списък

<MENU>

<LI>...

…

</MENU>

<MENU> … <MENU> е подобен на <UL>, но се форматира по-компактно. Началото на всеки елемент започва с <LI>.

неномериран списък в колонки

<DIR>

<LI>...

…

</DIR>

<DIR> … </DIR> - също е подобен на <UL>, но се опитва да подреди данните в колонки, които обикновено са по-къси от 20 символа. Началото на всеки елемент започва с <LI>. За да има ефект използването на този елемент препоръчва се параграфите да са по-къси от 20 символа.

хоризонтална линия

<HR>

<HR> - чертае хоризонтална линия, която може да мени дължината или ширината си в зависимост от аргументите на следните атрибути:

SIZE=n, където n е дебелината на линията в пиксели (pixel - най-малката точка, която се изобразява на растерен екран)

WIDTH=n[%] - указва дължината на линията, като n е дължина на линията в пиксели, а [%] е съотношението на линията спрямо екрана.

NOSHADE указва линията да се визуализира без сянка.

нов ред

<BR>

<BR> … - указва нов ред в текста.

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

таблица

<TABLE>

…

</TABLE>

<TABLE>…</TABLE> описва таблично форматирана информация. Този елемент може да има следните незадължителни атрибути:

BORDER [= n ] задава дебелината на ограждащите линии в пиксели.

WIDTH =n[%] - указва ширината на таблицата в пиксели или процент от ширината на екрана.

CELLSPACING = n дава разстоянието в пиксели между табличните елементи (клетки).

CELLPADDING = n е разстоянието в пиксели между съдържанието на клетките и ограждащите линии.

Вътрешни за <ТАВLЕ> са елементите:

дефинира заглавието на таблицата и може да се ползва с атрибута АLIGN, който има един от следните аргументи: "top", "bottom" "left", "right", определящи къде да се разположи заглавието.

дефинира ред на таблицата.

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

определя заглавие на таблична колона или ред.

отделя съдържанието на всяка незаглавна клетка.

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

ALIGN=("left","center","right")

VALIGN=("top","middle", "bottom"), които определят как да се разполага съдържанието на клетките спрямо граничните линии.

<ТН>и <ТD> могат да имат и атрибутите:

COLSPAN = n показва колко таблични колони заема клетката.

ROWSPAN = n показва колко реда заема клетката.

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

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

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

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

Логическите стилове са:

<EM>...</EM> - акцентиран. Обикновено браузърите използват ITALIC.

<STRONG>…</STRONG> - също акцентиран, но с по-засилено действие от <ЕМ>. Обикновено браузърите използват BOLD.

<COLD>…</COLD> - стил с фиксирана ширина на буквите.

<SAMP>…</SAMP> - използва се за задаване на последователност от литерални символи.

<KBD>…</KBD> - маркира текст, който ще бъде въведен от лавиатурата, например в наръчници с инструкции това ще бъде текст за въвеждане от потребителя.

<VAR>…</VAR> - използва се за задаване на име на променлива.

<DEF>…</DEF> - за дефиниране на термин (обикновено е удебелен BOLD или удебелен BOLD и ITALIC).

<CITE> ... </CITE> - загражда цитат ( най-често е ITALIC).

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

<ТТ> ... </ТТ> - шрифт с фиксирана ширина на буквите. Отговаря на логическия шрифт CITE.

<B> … </B> - прави текста BOLD

<I> … </I> - прави текста ITALIC

<U> … </U> - подчертава текста

<BIG> ... </BIG> - увеличава размера на шрифта

<SMALL> ... </SMALL> - намалява размера на шрифта

<SUB> ... </SUB> - изобразява текста като долен индекс

<SUP> … </SUP> - изобразява текста като горен индекс

<FONT SIZE=n FACE= "string" > ... </FONT> - променя големината и вида на шрифта. Числото n може да бъде със знак + , -, или без знак. Ако е със знак, големината на шрифта се променя относително спрямо текущия размер с указания брой пиксели. Когато n е без знак, то задава абсолютния размер на шрифта (от 1 до 7).

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

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

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

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

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

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

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

SRC ="image_url" - чрез него се задава URL адреса на изображението и е задължителен. Файлът трябва да бъде в GIF, X-Bitmap, JPEG формат. Стандартно те са разширения .gif, xbm, xpm, jpeg, jpg.

ALT = "алтернативен текст" - някои браузъри нямат възможност да визуализират

изображения. Атрибутът ALT задава алтернатива на изображението, която обикновено е текст.

ALIGN = "bottom", "middle", "top", "left", "right" - подравнява изображението

спрямо текста:

"bottom" - долният ръб на изображението с базовата линия на текста (по подразбиране);

"middle" - средата на изображението с базовата линия на текста;

"top" - горният ръб на изображението с върха на най-високия символ;

"left" - в лявата част на страницата;

"right" - в дясната част на страницата.

HEIGHT ="n", WIDTH ="m" - определят височината и ширината на дисплей-изображението. Ако картинката е по-голяма от указания размер, то тя се изрязва от браузъра при визуализация.

ISMAP - позволява изображението да се разделя условно на региони, с различно действие при кликване с мишка върху тях. Обикновено регионите са правоъгълници, кръгове или многоъгълници. Отделянето на област от картинка става по следния начин:

<MAP NAME = "string"> - string е условното наименование на областта.

<AREA SHAPE ="rect" CORDS = "x1, y1, x2, y2" HREF = "image_url"> - за правоъгълник,

<AREA SHAPE ="circle" CORDS = "x1, y1, x2, y2" HREF = "image_url"> - за кръг,

<AREA SHAPE ="circle" CORDS = "x1, y1, x2, y2" HREF = "image_url"> - за многоъгълник,

</MAP>

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

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

BORDER ="n" - употребява се само заедно с ISMAP и задава дебелината в пиксели на линия между отделните региони. Ако n=0 липсва гранична линия между регионите.

HSPACE ="n", VSPACE ="m" - тези атрибути определят хоризонталното и вертикалното пространство (в пиксели), което остава празно между изображението и ограждащите го елементи.

LOWSRC ="image_url" - задава URL адрес на малък файл с картинка, който да се покаже веднага докато се чака зареждането на основното изображение.

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

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

</ APLET>

CODE дава името иа приложението за изпълнение;

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

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

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

NAME - задава името му.

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

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

TYPE - задава вида на входния елемент - текстово поле, парола, превключвателна кутия (checkbox), бутон за опции (radio button), изображение, скрито текстово поле, бутон за изпращане на данните към програмата и стартирането и, бутон за възстановяване началните стойности на входните полета.

NAME - указва името на входното поле. За елементи от вида бутон за опции, които обикновено се комбинират в групи, NAME за всички елементи от групата трябва да е един и същ.

MAXLENGTH - показва максималната дължина в символи на полето.

SIZE - дава размера на входното поле в пиксели.

VALUE - задава началната стойност иа полето, а когато това е бутон от вида RESET или SUBMIT - надписа върху него.

CHECKED - задава началната стойност на поле от тип превлючвателна кутия или бутон за опции (включен / изключен}.

SRC - чрез него се задава URL адреса на изображението. За елемент от тип IMAGE кликването с левия бутон на мишката върху изображението има действието м на SUBMIT, като на програмата се изпращат и координатите на точката на кликване:

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

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

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

NAME - указва името на списъка.

SIZE - задава броя редове, които да се виждат на екрана.

MULTIPLE - чрез тази опция се позволява да бъдат избирани няколко елемента едновременно от списъка.

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

SELECTED - определя дали тази опция (елемент) е първоначално избраната.

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

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

NAME - указва името на полето.

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

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

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

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

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

…

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

</FORM>

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

…

…

</NOFRAME>

</FRAMESET>

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

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

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

<A HREF="URL адрес" TARGET="string">… текст…</A> - string е име на някой от прозорците.

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

Индекс

<А> - anchor (препратки)

<АDDRESS> адрес

<APLET> - аплет

<AREA> - област от изображение, вж. <IMG>

<В> - bold face, получер шрифт

<BASEFONT> - базов шрифт

<BIG> - по-голям размер шрифт

<BLINK> - мигащ текст

<BLOCKQUOTE> - цитат

<BODY> - тяло на HTML документ

<BR> нов ред

<CAPTION> - заглавие в таблица, вж. <TABLE>

<CENTER> - центриране

<CITE> - стил цитат

<CODE> - typed code style (стил телетайп)

<DD> - definition (дефиниция на термин)

<DEF> стил дефиниция

<DIR> unordered list (неномериран списък)

<DL> definition list (списък от дефиниции)

<DT> - definition term (термин)

<EM> - emphasis style

<FONT> - шрифт

<FORM> - форма

<FRAMESET> - прозорец

<HEAD> - заглавна част на HTML документ

<Hn> - headings (заглавия)

<HR> - horizontal ruled line (хоризонтална линия)

<I> - italic

<IMG> - image (изображение)

<input> входен елемент за форма, вж. <FORM>

<KBD> - keyboard input style

<LI> - list item (елемент от списък), вж. <DIR>, <MENU>, <OL>, <UL>

<MENU> - unordered list (неномериран списък)

<OL> - ordered list (номериран списък)

<P> - paragraph (параграф)

<PARAM> - параметър, вж. <APLET>

<PRE> - preformated text (предварително форматиран текст)

<SAMP> - literal text

<SELECT> - списък стойности, вж. <FORM>

<SMALL> - по-малък шрифт

<STRONG> - stronger emphasis style

<SUB> subscript (долен индекс)

<SUP> - superscript (горен индекс)

<TABLE> таблица

<TEXTAREA> - многоредова текстова област, вж. FORM

<TD> table data (таблична клетка), вж. < TABLE>

<TH> - table heading (таблично заглавие), вж. < TABLE>

<TITLE> - заглавие на документа

<TR> - table row (табличен ред), вж. <TABLE>

<TT> - teletype style

<U> underline (подчертан)

<UL> unordered list (неномериран списък)

<VAR> - variable name

<[!]-- текст--> " comment (коментар)

?n; &name; специални символи