Html – Part Ii

HTML 4 – продължение

доц. М. Иванова

1

Резервирани символи в HTML

2

< Изобразява символа < > Изобразява символа >

& Изобразява символа & Изобразява шпация ' '

" Изобразява символа " ¢ £ ¥ Изобразява съответно символите: ¢,£,¥

° ÷π Изобразява съответно символите:°,÷ ,[Pi]

© ® Изобразява съответно символите: ©,®

« Изобразява символа « » Изобразява символа »

± Изобразява символа ± ° Изобразява символа °

¹ ² ³ Изобразява съответно символите: 1 2 3

¼ ½ ¾ Изобразява съответно символите: 1/4 1/2 ¾

§ Изобразява символа §

Пример

<HTML><TITLE>simvoli</TITLE><BODY>Запазена марка

© &reg</BODY></HTML>

3

Разширен вариант на елемента BODY

<BODY ALINK=#rrbbgg BACKGROUND=URL BGCOLOR=#rrbbgg LINK=#rrbbgg TEXT=#rrbbgg VLINK=#rrbbgg>

ALINK определя цвета на активирана хипервръзка;BACKGROUND определя URL адреса на графичен файл (gif, jpg

или png), използван за тапет при изобразяване на документа (фон на документа);

BGCOLOR определя цвета на фона в полето на документа;LINK определя цвета на хипервръзка;TEXT определя цвета на буквите в текста;VLINK определя цвета на избирана вече хипервръзка;

4

Имена на цветове и RGB стойности

5

Black (Черен) #000000 Silver (Сребрист) #C0C0C0

Gray (Сив) #808080 White (Бял) #FFFFFF

Maroon (Кафяв) #800000 Red (Червен) #FF0000

Green (Зелен) #008000 Lime (Светло зелен) #00FF00

Olive (Тъмно зелен) #808000 Yellow (Жълт) #FFFF00

Purple (Пурпурен) #800080 Fuchsia (Бежов) #FFF0FF

Navy (Морско син) #000080 Blue (Син) #0000FF

Teal (Тъмно син) #008080 Aqua (Светло син) #00FFFF

Пример<HTML><TITLE>цветове</TITLE><BODY ALINK=#800080

LINK=#000080 TEXT=#C0C0C0 VLINK=#FF0000>

BODY е тялото на документа, където се разполага <A HREF=pic.gif> изобразяваната </A> от уеб потребителя <A HREF=pic.gif> информация</A>

</BODY></HTML>

6

Елемент META<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=win-1251"><META HTTP-EQUIV="refresh" CONTENT="n ; URL=url"><META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV="Window-Target" CONTENT="име на прозорец"><META HTTP-EQUIV="expires" CONTENT="дата и час"><META NAME="author" CONTENT="Автор на документа"><META NAME="description" CONTENT="Кратко описание"><META NAME="keywords" CONTENT="Ключови думи"><META NAME="generator" CONTENT="WWW клиент"><META NAME="Copyright" CONTENT="COPYRIGHT Име ..."><META NAME="Publisher" CONTENT="Име Фамилия"><META NAME="Identifier-URL" CONTENT="url"><TITLE> ... </TITLE><BASE HREF=URL></HEAD><BODY>......</BODY></HTML>

7

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

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=win-1251">

8

Автоматично зареждане на нова страница, чийто адрес е указан с

параметъра URL след изтичане на n секунди

<META HTTP-EQUIV="refresh" CONTENT="n ; [URL=url]">

9

Предотвратяване зареждането на страницата в кеш-паметта на

потребителя

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

10

Чрез атрибута Window-Target се указва името на подразбиращия

се фрейм

<META HTTP-EQUIV="Window-Target" CONTENT="New-Frame">

11

Задаване дата и час

• <META HTTP-EQUIV="expires" CONTENT="Wed, 28 Febr 2013 12:00:00 GMT">

• Тази информация е предназначена за proxy server, при което страницата трябва задължително да бъде презаредена.

12

Задаване име на автора на документ

• <META NAME="author" CONTENT="Григор Иванов">

13

Задаване на кратко описание на съдържанието на документ

• <META NAME="description" CONTENT="Кратко описание на съдържанието">

14

Задаване на ключови думи за индексиране на документ

• <META NAME="keywords" CONTENT="Ключови думи">

15

Уточняване на правата

• <META NAME="Copyright" CONTENT="COPYRIGHT Име ...">

16

Уточняване на името на този, който публикува документа за случаите, в

които това не е неговият автор

• <META NAME="Publisher" CONTENT="Иван Иванов">

17

Указания към роботите за индексиране на страници се задават

с атрибут<META NAME="robots" CONTENT="all|none|index|

noindex|follow|nofollow">Множестовото параметри имат следното значение:all - всичко подлежи на индексиране;none - забрана за индексиране;index - страницата е вече индексирана;noindex - индексират се само връзките от страницата;follow - извличане на връзките от страницата за

последващо индексиране;nofollow - да не се извличанат връзките от страницата.

18

Указания за използвания език или езици в страницата

• <META NAME="site-languages" CONTENT="English Bulgarian">

19

Задава предметната област, категория за класификация на

страницата• <META NAME="subject"

CONTENT="Internet">

20

Определяне на начина на разпространение

• <META NAME="distribution" CONTENT="global">

21

Определяне на географско разположение на сайта или

компанията• <META NAME="geography"

CONTENT="Град, Област, Държава, Пощенски код">

22

Класификация на HTML страницата като вид ресурс

• <META NAME="resource-type" CONTENT="document">

23

Индикатор за важна или актуална информация

• <META NAME="highlight" CONTENT="Highlight information">

24

Елемент BASE

• <BASE HREF=URL> - част от секцията HEAD и указва абсолютен URL адрес

• Пример: <BASE HREF="http://www.tu-sofia.bg/"> <A HREF="images/blue.gif"> замества <A HREF=http://www.tu-sofia.bg/images/blue.gif>

25

http://www.tu-sofia.bg/images/blue.gif

Структуриране на документ <DIV><DIV ALIGN=LEFT|RIGHT|CENTER ID|CLASS=name

STYLE=style-data CLEAR=LEFT|RIGHT|ALL NOWRAP> ... </DIV>

ALIGN=LEFT|RIGHT|CENTER - определя хоризонталното подравняване на блока - ляво|дясно|центрирано.

ID|CLASS=name - атрибутът задава единствен идентификатор за елемента (ID) или име на клас/класове към този елемент (CLASS).

STYLE=style-data - атрибутът определя стиловата дефиниция за елемента.

CLEAR=LEFT|RIGHT|ALL - начало на блока с празни полета - ляво|дясно|от двете страни.

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

26~~~~~~

Пример<TITLE>The DIV tag</TITLE></HEAD><BODY><DIV STYLE="COLOR: BLUE“><H1>Заглавие с текст в син цвят</H1><P>Този параграф унаследява стиловите атрибути на

блока и текстът в него се извежда в полето на документа в син цвят.</P>

<P><FONT COLOR="BLACK">Параграфът извежда в полето на документа специални символи в черен цвят © ®</FONT></P>

</DIV></BODY></HTML>

27

Елемент <BASEFONT >

• <BASEFONT FACE="font_name" SIZE=n COLOR="rrggbb"> - поставя се в секцията HEAD

28

Пример<HTML><HEAD><TITLE>Formatting Element </TITLE><BASEFONT FACE="Arial" SIZE=3

COLOR="red"></HEAD><BODY>За указване на шрифт, общ за целия

документ, се използва елементът BASEFONT. Атрибутите на елемента и начина на използване е същият както при елемента <FONT>, но без затварящ елемент.

</BODY></HTML>

29

Логически атрибути

30

<ADDRESS> </ADDRESS> Адрес на автора на документ

<BIG> </BIG> Изобразяване на текст в едър шрифт

<BLOCKQUOTE> </BLOCKQUOTE> Форматиране на текст като цитат

<BLINK> </BLINK> Създава ефект на мигащ текст

<CITE> </CITE> Цитиране - текст в курсив

<CODE> </CODE> Използува се за HTML директиви

<DFN> </DFN> Задава дефиниция <KBD> </KBD> Посочва въвеждане на текст от клавиатурата

<LISTING> </LISTING> Дублира функцията на <PRE>

<PLAINTEXT> </PLAINTEXT> Дублира функцията на <PRE>

<SAMP> </SAMP> Посимволно извеждане на текст

<SMALL> </SMALL> Извеждане на текст в малък шрифт

<STRONG> </STRONG> Подчертаване (удебелен шрифт)

<STRIKE> </STRIKE> Зачертаване (хор. черта през текста)

<STYLE> </STYLE> Употреба на външен стилов формат

<SUB> </SUB> Задава долен индекс в текст

<SUP> </SUP> Задава горен индекс в текст

<VAR> </VAR> Указва променлива на програма

<XMP> </XMP> Вмъкване на пример - сходно с PRE

<EM> </EM> Подчертаване (най-често italic)

Пример<HTML><TITLE>Логически атрибути </TITLE><BODY>Логическите

<small>атрибути</small> са по-абстрактни и <big>по-многобройни</big>. При използуването им не е възможно да се <strong>предвиди</strong> как конкретният уеб клиент ще интерпретира командата.

</BODY></HTML>

31

Създаване на връзки към етикети /котви/, намиращи се в

други документи• <A HREF="page1.html#L1">За повече

информация, натиснете тук</A>

32

ПримерКод на страницата,

задаваща котвата<HTML><TITLE>котви </TITLE><BODY><A

HREF="page1.html#линии">За повече информация, натиснете тук</A>

</BODY></HTML>

33

• Код на страницата, съдържаща котвата<HTML><BODY>Въведение в Интернет В основата на протокола TCP/IP стой идеята за пакетното предаване на данни с цел предпазване от загуби на важни данни. Компютрите предават по между си малки пакети от данни, получени чрез раздробяването на големи масиви от данни. Тези пакети трябва да могат да бъдат изпращани по мрежа от телефонни <A NAME="линии">линии</А>. </BODY></HTML>

Хипервръзка от HTML документ към e-mail адрес

• <A HREF="mailto:user@host">Text</A>

34

Създаване на форми

35

Създаване на форми<html><head> <title>FORM</title></head><body><form method=get action=cgi.script.url><p>Name:<input type="text"

NAME=“visitor_name"><p>e-mail:<input type="text" NAME=“visitor_e-

mail"><p>Computer:<input type="radio" NAME="computer"

VALUE="Mac"> Macintosh<INPUT TYPE="radio" NAME="computer"

VALUE="PC">Windows<p><INPUT TYPE="submit" NAME="submit"

VALUE="Send info"></FORM></BODY></HTML>

36

Създаване на форми<html><head> <title>FORM</title></head><body>

<FORM METHOD=POST ACTION=http://www.form.com/cgi-bin/uploadfile.cgi

ENCTYPE=“multipart/form-data”>Име:<input type="text" Name=“firstname”

SIZE=20><p><b>Намери файла:</b><br><input

type=“file” name=“files” SIZE=40><button type=“submit” NAME=“submit”

VALUE="submit" WIDTH=20 HEIGHT=20>submit</button>

</FORM></BODY></HTML>

37

Създаване на форми

<FORM> ... </FORM><FORM [ACTION=URL] [ENCTYPE=cdata]

[METHOD=GET|POST]> съдържание на формата с възможно участие на елементите INPUT, TEXTAREA, SELECT </FORM>

ACTION - URL адрес на сървър и/или услуга, където ще бъде прехвърлено съдържанието

на формата;ENCTYPE - алгоритъм за кодиране/декодиране на

съдържанието;METHOD - определя метода на предаване на

съдържанието на формата към сървъра (подразбира се GET)

38

Елемент Input<INPUT [ALIGN=top|middle|bottom|left|right] [CHECKED] [MAXLENGTH=NUMBER][NAME=cdata] [SIZE=NUMBER] [SRC=URL][TYPE=TEXT|PASSWORD|CHECKBOX|RADIO|SUBMIT|RESET|FILE|HIDDEN|IMAGE|RANGE] [VALUE=cdata]>ALIGN - контролира подравняването на полетата от формата - в

ляво (Left), в дясно (Right), спрямо базовата линия на текста (Top, Middle, Bottom);

CHECKED - при активни атрибути RADIO или CHECKBOX инициализира полето за избор;

MAXLENGTH - определя максималната дължина на текста в атрибутите TEXT и PASSWORD;

NAME - идентификатор на полето при предаване на съдържанието на формата към сървъра;

SIZE - определя броят на видимите символи за TEXT и PASSWORD;

SRC - URL адрес на графичното изображение;39

TYPE - определя вида на полето със следните атрибути:TEXT - определя, че в полето от формуляра ще се въвежда

свободен текст;PASSWORD - въведените символи се маскират с '*' или ' ';CHECKBOX - поле за избор, изисква атрибути NAME и VALUE;RADIO - радио-бутон, изисква атрибути NAME и VALUE;SUBMIT - предизвиква предаване на съдържанието на

формуляра посредствомуказаните действия в ACTION;RESET - предизвиква анулиране на въведената в полето на

форматаинформация;FILE - присъединени файлове за прехвърляне;RANGE - контрол на данни в определен обхват, зададен в

VALUE;HIDDEN - подтиска се изобразяването на текст;IMAGE - действа подобно на SUBMIT

40

Бутони от типа CHECKBOX

<INPUT TYPE="checkbox" NAME="име" VALUE="стойност" CHECKED>

41

Бутони от типа CHECKBOX<HTML><BODY><INPUT TYPE="checkbox"

NAME="dev" VALUE="printer" CHECKED> Принтер

<INPUT TYPE="checkbox" NAME="dev" VALUE="scanner"> Скенер

<INPUT TYPE="checkbox" NAME="dev" VALUE="monitor" CHECKED> Монитор

</BODY></HTML>

42

Radio бутони

• <INPUT TYPE="radio" NAME="име" VALUE="стойност" CHECKED>

43

Radio бутони<HTML><BODY>Какъв вид е вашата кредитна

карта?<BR><INPUT TYPE="radio"

NAME="credit" VALUE="visa" CHECKED> Visa<br>

<INPUT TYPE="radio" NAME="credit" VALUE="mc"> Mastercard<br>

<INPUT TYPE="radio" NAME="credit" VALUE="ae"> American Express

</BODY></HTML>

44

Текстово поле TEXT

• <INPUT TYPE="text" NAME="име" VALUE="стойност" SIZE=Number MAXLENGTH=Number>

45

Текстово поле TEXT

• <HTML>• <BODY>• Въведете вашия e-

mail адрес: <INPUT TYPE="text" NAME="email">

• </BODY>• </HTML>

46

Поле за парола PASSWORD

• <INPUT TYPE="password" NAME="име" VALUE="стойност" SIZE=Number MAXLENGTH=Number>

47

Поле за парола PASSWORD

<HTML><BODY>Please enter your

password:<INPUT

TYPE="password" NAME="pass" SIZE=10>

</BODY></HTML>

48

Бутон RESET

• <INPUT TYPE="reset" VALUE="стойност">

49

Бутон RESET

<HTML><BODY><INPUT

TYPE="reset" VALUE="RESET">

</BODY></HTML>

50

Бутон SUBMIT

• <INPUT TYPE="submit" VALUE="стойност">

51

Бутон SUBMIT

<HTML><BODY><INPUT

TYPE="submit" VALUE="SUBMIT">

</BODY></HTML>

52

Елемент SELECT – поле за многозначен избор

• <SELECT [MULTIPLE] [NAME=cdata] [SIZE=NUMBER]> ... </SELECT>

• MULTIPLE - определя менюто като многозначно, подразбира се единствен избор;

• NAME - променлива параметър, на която се присвоява стойност от направения преди прехвърлянето й в сървъра избор;

• SIZE - определя броят на видимите части при MULTIPLE.

53


• <OPTION SELECTED VALUE=cdata>• SELECTED - задава елемента, който се

избира по подразбиране;• VALUE - задава стойност или значение,

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

54


<HTML><BODY>Какъв е вашият домашен

любимец: <BR><SELECT NAME="list1" SIZE=3

MULTIPLE><OPTION SELECTED> Рибки<OPTION> Хамстер<OPTION> Папагал</select></BODY></HTML>

55

Поле за въвеждане на повече от един ред TEXTAREA

<TEXTAREA [COLS=NUMBER] [NAME=cdata] [ROWS=NUMBER]> ... </TEXTAREA>

• COLS - определя броя на видимите колони;• NAME - име на полето, на което се

присвоява въведеният текст за прехвърлянето му на сървъра;

• ROWS - определя броят на видимите редове

56

Поле за въвеждане на повече от един ред TEXTAREA

<HTML><BODY>Въведете Вашите

предпочитания:<TEXTAREA

NAME="requirements" ROWS=10 COLS=15>Нямам специални изисквания</

TEXTAREA></BODY></HTML>

57

Technology

Html – Part Ii