Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html – Part Ii

2,316 views

Published on

HTML-part II

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html – Part Ii

  1. 1. HTML 4 и 5 – продължение доц. М. Иванова 1
  2. 2. Резервирани символи в HTML 2 &lt; Изобразява символа < &gt; Изобразява символа > &amp; Изобразява символа & &nbsp; Изобразява шпация ' ' &quot; Изобразява символа " &cent; &pound; &yen; Изобразява съответно символите: ¢,£,¥ &deg; &divide;&pi; Изобразява съответно символите:°,÷ ,[Pi] &copy; &reg; Изобразява съответно символите: ©,® « Изобразява символа « » Изобразява символа » ± Изобразява символа ± ° Изобразява символа ° ¹ ² ³ Изобразява съответно символите: 1 2 3 ¼ ½ ¾ Изобразява съответно символите: 1/4 1/2 ¾ § Изобразява символа §
  3. 3. Пример <html> <title>simvoli</title> <body> Запазена марка &copy; &reg </body> </html> 3
  4. 4. Разширен вариант на елемента 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
  5. 5. Имена на цветове и 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
  6. 6. Пример <html> <title>цветове</title> <body alink=“#800080” link=“#000080” text=“#c0c0c0” vlink=“#ff0000”> BODY е тялото на документа, където се разполага <a href=“page1.html”> изобразяваната </a> от уеб потребителя <a href=“page2.html”> информация</a> </body> </html> 6
  7. 7. Елемент 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
  8. 8. Вид на документа и кодовата таблица на неговото съдържание <meta http-equiv="content-type" content="text/html; charset=win-1251"> 8
  9. 9. Автоматично зареждане на нова страница, чийто адрес е указан с параметъра URL след изтичане на n секунди <meta http-equiv="refresh" content="n ; [url=url]"> 9
  10. 10. Предотвратяване зареждането на страницата в кеш-паметта на потребителя <meta http-equiv="pragma" content="no-cache"> 10
  11. 11. Чрез атрибута Window-Target се указва името на подразбиращия се фрейм <meta http-equiv="window-target" content="new-frame"> 11
  12. 12. Задаване дата и час • <meta http-equiv="expires" content="wed, 28 feb 2013 12:00:00 gmt"> • Тази информация е предназначена за proxy сървър, при което страницата трябва задължително да бъде презаредена 12
  13. 13. Задаване име на автора на документ • <meta name="author" content="григор иванов"> 13
  14. 14. Задаване на кратко описание на съдържанието на документ • <meta name="description" content="кратко описание на съдържанието"> 14
  15. 15. Задаване на ключови думи за индексиране на документ • <meta name="keywords" content="ключови думи"> 15
  16. 16. Уточняване на правата • <meta name="copyright" content="copyright име ..."> 16
  17. 17. Уточняване на името на този, който публикува документа за случаите, в които това не е неговият автор • <meta name="publisher" content="Иван Иванов"> 17
  18. 18. Указания към роботите за индексиране на страници се задават с атрибут <meta name="robots" content="all|none|index|noindex| follow|nofollow"> Множестовото параметри имат следното значение: all - всичко подлежи на индексиране; none - забрана за индексиране; index - страницата е вече индексирана; noindex - индексират се само връзките от страницата; follow - извличане на връзките от страницата за последващо индексиране; nofollow - да не се извличанат връзките от страницата. 18
  19. 19. Указания за използвания език или езици в страницата • <meta name="site-languages" content="english bulgarian"> 19
  20. 20. Задава предметната област, категория за класификация на страницата • <meta name="subject" content="internet"> 20
  21. 21. Определяне на начина на разпространение • <meta name="distribution" content="global"> 21
  22. 22. Определяне на географско разположение на сайта или компанията • <meta name="geography" content="град, област, държава, пощенски код"> 22
  23. 23. Класификация на HTML страницата като вид ресурс • <meta name="resource-type" content="document"> 23
  24. 24. Индикатор за важна или актуална информация • <meta name="highlight" content="highlight information"> 24
  25. 25. Елемент 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
  26. 26. Структуриране на документ <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~~~~~~
  27. 27. Пример <!DOCTYPE html> <head> <title>The div tag</title> </head> <body> <div style="color: blue“> <h1>Заглавие с текст в син цвят</h1> <p>Този параграф унаследява стиловите атрибути на блока и текстът в него се извежда в полето на документа в син цвят.</p> <p><font color="black">Параграфът извежда в полето на документа специални символи в черен цвят &nbsp;&copy;&nbsp;&reg; </font></p> </div> </body> </html> 27
  28. 28. Елемент <BASEFONT > • <basefont face="font_name" size=n color="rrggbb"> - поставя се в секцията head 28
  29. 29. Пример <!DOCTYPE html> <head> <title>formatting element </title> <basefont face="arial" size=“3” color="red"> </head> <body> За указване на шрифт, общ за целия документ, се използва елементът BASEFONT. Атрибутите на елемента и начина на използване е същият както при елемента <FONT>, но без затварящ елемент. </body> </html> 29
  30. 30. Команди за фрагментиране на текст 30 Команда Предназначение Пример <abbr> </abbr> Визуализира абревиатура; при посочване с мишката върху нея ще се покаже пълното наименование Абревиатура: <abbr title="Hyper Text Markup Language"> HTML </abbr> <cite> </cite> Визуализира цитат с наклонен шрифт; при посочване с мишката върху него ще се покаже пълният цитат <cite title="По-добре късно, отколкото по- късно"> Цитат </cite> <code> </code> Показва, че текстът е програмен код; визуализира се с равноширок шрифт Често използвани HTML команди са: <code> &lt;p&gt; </code> <code> &lt;h1&gt; </code> <code> &lt;b&gt; </code> <del> </del> Зачертава текст Утрото е <del> мъдро </del> <ins> по-мъдро </ins> от вечерта. <dfn> </dfn> Показва термин, дефиниция; визуализира се с наклонен шрифт <dfn>Термин:</dfn> Дефиниране на термина. <em> </em> Показва, че текстът е важен, но по-малко важен от текст, дефиниран чрез командата <strong></strong>; <em> По-малко важен текст </em>
  31. 31. Команди за фрагментиране на текст 31 <ins> </ins> Показва вмъкнат, добавен текст. Новодобавеният текст е подчертан. Утрото е <del> мъдро </del> <ins> по-мъдро </ins> от вечерта. <kbd> </kbd> Показва, че текстът трябва да бъде въведен от потребителя или трябва да бъде натиснат съответен клавиш. Визуализира се с равноширок шрифт. Натиснете<kbd> F1 </kbd> и след това<kbd> Напред</kbd>. <q></q> Показва кратък цитат, заграден в кавички. Ако цитатът е по-дълъг, тогава се използва командата <blockquote><blockquote>. <q>Кратък цитат</q> <strong> </strong> Важен текст. Визуализира се като почернен текст. <strong>Важен текст</strong> <var> </var> Визуализира променлива от математическа формула или програма с курсивен шрифт <var>E</var>=<var>m</var><var >c</var><sup>2</sup>
  32. 32. Създаване на връзки към етикети /котви/, намиращи се в други документи • <a href="page1.html#l1">за повече информация, натиснете тук</a> 32
  33. 33. Пример Код на страницата, задаваща котвата <!DOCTYPE html> <head> <title>котви </title> </head> <body> <a href="page1.html#линии "> За повече информация, натиснете тук </a> </body> </html> 33 • Код на страницата, съдържаща котвата <!DOCTYPE html> <head></head> <body> Въведение в Интернет В основата на протокола TCP/IP стои идеята за пакетното <a name="линии">линии…</а>. </body> </html>
  34. 34. Хипервръзка от HTML документ към e-mail адрес • <a href="mailto:user@host">text</a> 34
  35. 35. Създаване на форми 35
  36. 36. Създаване на форми <!DOCTYPE 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
  37. 37. Създаване на форми <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
  38. 38. Създаване на форми <form> ... </form> <form [action=url] [enctype=cdata] [method=get|post]> съдържание на формата с възможно участие на елементите input, textarea, select </form> action - URL адрес на сървър и/или услуга, където ще бъде прехвърлено съдържанието на формата; enctype - алгоритъм за кодиране/декодиране на съдържанието; method - определя метода на предаване на съдържанието на формата към сървъра (подразбира се get) 38
  39. 39. Елемент 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
  40. 40. TYPE - определя вида на полето със следните атрибути: TEXT - определя, че в полето от формуляра ще се въвежда свободен текст; PASSWORD - въведените символи се маскират с '*' или ' '; CHECKBOX - поле за избор, изисква атрибути NAME и VALUE; RADIO - радио-бутон, изисква атрибути NAME и VALUE; SUBMIT - предизвиква предаване на съдържанието на формуляра посредством указаните действия в ACTION; RESET - предизвиква анулиране на въведената в полето на формата информация; FILE - присъединени файлове за прехвърляне; RANGE - контрол на данни в определен обхват, зададен в VALUE; HIDDEN - подтиска се изобразяването на текст; IMAGE - действа подобно на SUBMIT 40
  41. 41. Бутони от типа CHECKBOX <input type="checkbox" name="име" value="стойност" checked> 41
  42. 42. Бутони от типа CHECKBOX <!DOCTYPE html> <head></head> <body> <form> <input type="checkbox" name="dev" value="printer" checked> Принтер <input type="checkbox" name="dev" value="scanner"> Скенер <input type="checkbox" name="dev" value="monitor" checked> Монитор </form> </body> </html> 42
  43. 43. Radio бутони • <input type="radio" name="име" value="стойност" checked> 43
  44. 44. Radio бутони <!DOCTYPE html> <head></head> <body> <form> Какъв вид е вашата кредитна карта? <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 </form> </body> </html> 44
  45. 45. Текстово поле TEXT • <input type="text" name="име" value="стойност" size=“number” maxlength=“number”> 45
  46. 46. Текстово поле TEXT <!DOCTYPE html> <head></head> <body> <form> Въведете вашия e-mail адрес: <input type="text" name="email"> </form> </body> </html> 46
  47. 47. Поле за парола PASSWORD • <input type="password" name="име" value="стойност" size=“number” maxlength=“number”> 47
  48. 48. Поле за парола PASSWORD <!DOCTYPE html> <head></head> <body> <form> Please enter your password: <input type="password" name="pass" size=“10”> </form> </body> </html> 48
  49. 49. Бутон RESET • <input type="reset" value="стойност"> 49
  50. 50. Бутон RESET <!DOCTYPE html> <head></head> <body> <form> <input type="reset" value="RESET"> </form> </body> </html> 50
  51. 51. Бутон SUBMIT • <input type="submit" value="стойност"> 51
  52. 52. Бутон SUBMIT <!DOCTYPE html> <head></head> <body> <form> <input type="submit" value="SUBMIT"> </form> </body> </html> 52
  53. 53. Елемент SELECT – поле за многозначен избор • <SELECT [MULTIPLE] [NAME=cdata] [SIZE=NUMBER]> ... </SELECT> • MULTIPLE - определя менюто като многозначно, подразбира се единствен избор; • NAME - променлива параметър, на която се присвоява стойност от направения преди прехвърлянето й в сървъра избор; • SIZE - определя броят на видимите части при MULTIPLE 53
  54. 54. Елемент SELECT – поле за многозначен избор • <OPTION SELECTED VALUE=“cdata”> • SELECTED - задава елемента, който се избира по подразбиране; • VALUE - задава стойност или значение, което ще се прехвърля към сървъра при предаване на съдържанието на формуляра 54
  55. 55. Елемент SELECT – поле за многозначен избор <!DOCTYPE html> <head></head> <body> <form> Какъв е вашият домашен любимец: <br> <select name="list1" size=“3” multiple> <option selected> Рибки <option> Хамстер <option> Папагал </select> <form> </body> </html> 55
  56. 56. Поле за въвеждане на повече от един ред TEXTAREA <TEXTAREA [COLS=NUMBER] [NAME=cdata] [ROWS=NUMBER]> ... </TEXTAREA> • COLS - определя броя на видимите колони; • NAME - име на полето, на което се присвоява въведеният текст за прехвърлянето му на сървъра; • ROWS - определя броят на видимите редове 56
  57. 57. Поле за въвеждане на повече от един ред TEXTAREA <!DOCTYPE html> <body> <form> Въведете Вашите предпочитания: <textarea name="requirements" rows=“10” cols=“15”>Нямам специални изисквания </textarea> </form> </body> </html> 57

×