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.

HTML4 HTML5

911 views

Published on

HTML presentation

Published in: Technology
  • Be the first to comment

HTML4 HTML5

  1. 1. HTML 4 HTML 5 Създаване на web сайт чрез Hyper Text Markup Language доц. М. Иванова
  2. 2.  Маркери = HTML елементи = HTML команди  Всяка HTML команда се състой от тагове, заградени в ъглови скоби  По-голяма част от HTML командите са изградени от двойка тагове - отварящ и затварящ се таг (начален и краен таг)  Затваращият таг се отличава от отварящия таг по наклонената надясно черта  Една малка част от командите включват само отварящ таг
  3. 3. Структурни блокове в HTML  HTML елементи-команди написани между знаците < и > : <В> текст </В> отварящ таг затварящ таг  Атрибути-въвеждат се между командната дума и > : <FONT SIZE=“+3”>текст</FONT> атрибут стойност елемент  Стойности – атрибутите често приемат стойности  Кавички – стойностите трябва да бъдат заградени в кавички
  4. 4. Структурни блокове в HTML  Главни и малки букви – няма значение дали кодът ще бъде с главни, малки букви или смесица, препоръчват се малки  Вграждане на елементи: 1.Тези елементи, които засягат цели абзаци могат да съдържат елементи, които засягат отделни думи или букви, но не и обратното 2.Редът е от значение – при използване на затварящ елемент, той трябва да отговаря на последния незатворен отварящ елемент  Интервали – браузърите игнорират интервалите между елементите в HTML документа
  5. 5. Структурни блокове в HTML  Специални символи – знаците с номера между 129-255 от стандартния набор ISO Latin-1 се въвеждат чрез име или кодов номер: ® - ® или &reg;
  6. 6. HTML версии Версия Година HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
  7. 7. Декларация типа на HTML документа  За да не се визуализира една и съща уеб страница по различен начин в различните браузъри  <!DOCTYPE [елемент от най-горно ниво] [публичност] “[регистрация] // [организация] // [тип] [име] // [език]“ “[url]”>  Елемент от най-горно ниво – указва елемента от най-горно ниво в документа. За HTML документ този елемент е <html>  Публичност – този атрибут указва дали документът е публичен (public) или системен (system). За HTML документ се указва public
  8. 8. Декларация типа на HTML документа  Регистрация – атрибутът дава информация относно това дали разработчикът на DTD (Document Type Definition) е регистриран в международната организация по стандартизиране (Organization for Standardization, ISO) или не. Стойностите на този атрибут са: + (регистриран) и – (неригистриран). За W3C се записва –  Организация – име на организацията, която е разработила DTD. W3C създава и усъвършенства HTML стандарта т.е. консорциумът W3C е собственик на HTML стандарта. Затова стойността на този атрибут е W3C
  9. 9. Декларация типа на HTML документа  Тип – За HTML документ се задава стойност DTD  Име – име на DTD документа  Език – за HTML се указва английски език EN  URL – дава се линк към местоположението на DTD документа
  10. 10. Версия DOCTYPE Описание HTML5 <!DOCTYPE html> За всички документи HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> Този DTD съдържа всички HTML елементи и атрибути, без тези, които влияят върху презантационния вид на уеб страницата (например font). Фреймови структури не са разрешени. HTML 4.01 Transitio nal <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Този DTD съдържа всички HTML елементи и атрибути. Фреймови структури не са разрешени. HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Този DTD съдържа всички HTML елементи и атрибути. Разрешено е използването на фреймови структури.
  11. 11. Концепции за проектиране на уеб страници  Текстово проектиране - уеб страниците имат вид на текстови документи, съдържащи заглавия, параграфи, списъци, таблици и други елементи, подходящ за публикуване на техническа информация
  12. 12.  Предимство на текстовото проектиране е простотата на HTML кода. Дори в уеб страницата да са включени изображения и таблица, те са част от съдържанието на документа, а не от неговото оформление.  Недостатъци:  Липсва естетическо оформяне  Липсват средства за позициониране на елементите върху уеб страницата – те следват един след друг, отгоре надолу  Липсват начини за разделяне на страницата на отделни секции за заглавие, меню, работна област, долна част и т.н.
  13. 13.  Проектиране чрез фреймове – за намаляване на ръчната работа при грешки  Недостатъци:  Фреймовите структури не са стандартизирани от W3C и всеки браузър ги визуализира по различен начин  Фреймовата структура е еднаква за целия сайт и всички страници изглеждат по един и същ начин, естествено с различно съдържание
  14. 14.  Проектиране чрез таблици  Предимства:  Таблиците са стандартизирани от W3C и ще изглеждат по един и същ начин в различните браузъри  Таблиците са по-гъвкав инструмент за оформяне дизайна на уеб страницата от фреймовите структури – различни клетки от таблицата могат да се обединяват или разделят по различен начин и да се постигне желания дизайн  Външния вид на таблицата лесно може да се променя чрез технологията CSS  Браузърите зареждат таблиците на части  Недостатък:  Обемен и сложен код на страниците
  15. 15.  Проектиране чрез контейнери - елементите от уеб страницата се разполагат в блокови контейнери - заглавната част, менюто, работната област, долната част и други елементи  Предимства:  Контейнерите са стандартизирани от W3C и се визуализират еднакво от всички браузъри  Елементите могат да се разположат вурху страницата по желания начин  Използване на CSS за визуално оформяне на страницата  Компактен HTML код  Недостатък:  Обемен HTML код и труден за възприемане, използване на сложни CSS набори
  16. 16. Проектиране на WEB страница  Защо се създава?  Какво предоставя?  Кои са потребителите?  Как да се създаде привлекателно за потребителите съдържание?  Колко страници да се създадат?  С каква структура?  Как да се проектира навигацията?
  17. 17. Създаване на web страница <!DOCTYPE html> <head> </head> <body> </body> </html>
  18. 18. Създаване на заглавие <!DOCTYPE html> <head> <title> HTML book </title> </head> <body> </body> </html>
  19. 19. Организиране на страницата със заглавия <!DOCTYPE html> <head> <title>HTML book</title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <h2 align=“center”> Internet, web and HTML </h2> <h3 align=“center”> Internet, web and HTML </h3> <h4 align=“center”> Internet, web and HTML </h4> <h5 align=“center”> Internet, web and HTML </h5> <h6 align=“center”> Internet, web and HTML </h6> </body> </html> -------------------------------------------- <Hn> - n=1-6 в зависимост от нивото на заглавието ALIGN=direction, където direction е left, right или center ALIGN не се поддържа в HTML5!!!
  20. 20. Започване на нов абзац <!DOCTYPE html> <head> <title>HTML book</title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html>
  21. 21. Празен интервал <!DOCTYPE html> <head> <title>HTML book</title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body>
  22. 22. Смяна на шрифта <!DOCTYPE html> <head> <title>HTML book</title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <P> <font size=“5” face=“Georgia” color=“#D63194”>A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </font> </body> </html> <font> </font> не се поддържа в HTML5 !!!
  23. 23. Форматиране на текст <!DOCTYPE html> <head><title>HTML book </title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <p> <font size=“5” face=“Georgia” color=“#D63194”>A <i>database</i> cluster is a collection of databases that will be accessible through a single instance of a running <b>database</b> server. </font> </body> </html> В HTML5 <b> и <i> се използват когато няма друга възможност!!!
  24. 24. Създаване на горни и долни индекси <!DOCTYPE html> <head><title>HTML book</TITLE> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <p><sup>1</sup> Cluster is a collection of databases <br/> D<sub>15</sub> </body> </html>
  25. 25. Зачертаване и подчертаване на текст <!DOCTYPE html> <head><title>HTML book</TITLE> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a <strike>database </strike> cluster. (SQL speaks of a catalog <u>cluster instead </u>.). </body> </html> <strike> не се поддържа в HTML5 – да се използва <del> или <s>!!!
  26. 26. Добавяне на коментар <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.). <!-- A database cluster is a collection of databases that will be accessible through a single instance of a running database server. --> </body> </html>
  27. 27. Вмъкване на изображения <!DOCTYPE html> <head><title>HTML book</TITLE> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <br> <img src=“laptop.gif”> </body> </html>
  28. 28. Вмъкване на изображения <!DOCTYPE html> <head><title>HTML book</TITLE> </head> <body> <h1 align=“center”>Internet, web and HTML </h1> <p align=“left”> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <br> <img src=“laptop.gif” border=“3” alt=”This is a picture of laptop” width=“100” height=“150”> </body> </html> align, border, hspace и vspace не се поддържат в HTML5!!!
  29. 29. Разполагане на текст около изображения <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <img src=“laptop.gif” align=“left”> <h1>Internet, web and HTML </h1> <p align=“left”>Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <br> </body> </html> ----------------------------------------------------------- ALIGN=left или right
  30. 30. Разполагане на текст между две изображения <!DOCTYPE html> <head><title>HTML book</TITLE> </head> <body> <img src=“laptop.gif” align=“left” width=“100” height=“150”> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <img src=“laptop.gif” align=“right” width=“100” height=“150”> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server </body> </html>
  31. 31. Свързване на икони с външни изображения <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <a href=“laptop.gif”> <img src=“laptop.gif” border=“3” alt=” This is a picture of laptop” width=“100” height=“150”> </a> </body> </html>
  32. 32. Добавяне на пространство около изображение <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <img src=“laptop.gif” align=“right” vspace=“15” hspace=“15”> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html> vspace и hspace не се поддържат в html5 !!!
  33. 33. Добавяне на хоризонтални линии <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <img src=“laptop.gif” align=“right”> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. <hr size=“10” width=“80%” align=“center” noshade> </body> </html> size, width, align и noshade не се поддържат в HTML5!!!
  34. 34. Задаване на фонов цвят <!DOCTYPE html> <head><title>HTML book</title> </head> <body bgcolor=“#94D6E7”> <img src=“laptop.gif” align=“right “> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html> bgcolor не се поддържа в HTML5!!!
  35. 35. http://www.somacon.com/p142.php
  36. 36. Използване на фоново изображение <!DOCTYPE html> <head><title>HTML book</title> </head> <body background=“rbow.gif”> <img src=“laptop.gif” align=“right “> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a database storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html> background не се поддържа в HTML5!!!
  37. 37. Използване на предварително форматиране <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <h1 align=“center”>Internet, web and HTML </h1> <pre> EUROPA ASIA AMERICA IBM 35% 25% 40% COMPAQ 10% 50% 40% SONY 55% 25% 20% </pre> </body> </html>
  38. 38. Създаване на връзка към друга web страница <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <img src=“laptop.gif” align=“right “> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a <a href=“page1.html”> database </a> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html>
  39. 39. Създаване на котви <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <img src=“laptop.gif” align=“right”> <h1 align=“center”>internet, web and html </h1> Before you can do anything, you must initialize a <a href= “#server” >database</a> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database server. A database cluster is a collection of databases that will be accessible through a single instance of a running database <a name=“server”> server</a>. </body> </html> name не се поддържа в HTML5!!!
  40. 40. Изобразяване на връзки в определени прозорци <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <img src=laptop.gif align=right > <h1 align=center>internet, web and HTML </h1> Before you can do anything, you must initialize a <a href=“page1.html” target=“_blank”>database</a> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html> target=_blank, _parent, _self, _top
  41. 41. Отваряне на всички връзки в един и същ прозорец <!DOCTYPE html> <head><title>HTML book</title> <base target=“_blank”> </head> <body> <img src=“laptop.gif” align=“right”> <h1 align=“center”>internet, web and html </h1> Before you can do anything, you must initialize a <a href=“page1.html “>database</a> storage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single <a href=“page2.html”> instance </a> of a running database server. </body> </html> target=_blank, _parent, _self, _top
  42. 42. Използване на изображения за етикети на връзки <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <a href=“page1.html “> <img src=“laptop.gif” align=“right”> </a> <h1 align=“center”>Internet, web and HTML </h1> Before you can do anything, you must initialize a databasestorage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server. </body> </html>
  43. 43. Създаване на таблица <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <table> <tr> <td>1 </td> <td> 2</td> <td> 3</td> </tr> <tr> <td><img src=“laptop.gif” width=“20” height=“20”> </td> <td> 5</td> <td>6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td> </tr> </table> </body> </html>
  44. 44. Създаване на таблица <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <table border=“10” bordercolorlight=“#00a5c6” bordercolordark=“#082984”> <tr> <td>1 </td> <td> 2</td> <td> 3</td> </tr> <tr> <td><img src=“laptop.gif” width=“20” height=“20”> </td> <td> 5</td> <td>6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td> </tr> </table> </body> </html> align, bgcolor, border, cellpadding, cellspacing, width не се поддържат в HTML5!!!
  45. 45. Създаване на таблица <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <table border=“10” bordercolorlight=“#00a5c6” bordercolordark=“#082984” width=“300” align=“center”> <tr> <td>1 </td> <td> 2</td> <td> 3</td> </tr> <tr> <td><img src=“laptop.gif” width=“20” height=“20””> </td> <td> 5</td> <td>6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td> </tr> </table> </body> </html> align, bgcolor, border, cellpadding, cellspacing, width не се поддържат в HTML5!!!
  46. 46. Разполагане на текст около таблица <!DOCTYPE html> <head><title>html book</title> </head> <body> <table border=“10” bordercolorlight=“#00a5c6” bordercolordark=“#082984” width=“300” align=“left”> <tr> <td>1 </td> <td> 2</td> <td> 3</td> </tr> <tr> <td><img src=“laptop.gif” width=“20” height=“20”> </td> <td> 5</td> <td>6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td> </tr> </table> Before you can do anything, you must initialize a databasestorage area on disk. We call this a database cluster. (SQL speaks of a catalog cluster instead.) A database cluster is a collection of databases that will be accessible through a single instance of a running database server </body> </html> align, bgcolor, border, cellpadding, cellspacing, width не се поддържат в HTML5!!!
  47. 47. Разпростиране на клетка в повече колони и редове <!DOCTYPE html> <head><title>html book</title> </head> <body> <table border=“10” bordercolorlight=“#00a5c6” bordercolordark=“#082984” width=“300” align=“left”> <tr> <td colspan=“2”>1 </td> <td> 2</td> <td> 3</td><td> 3</td> </tr> <tr> <td><img src=laptop.gif width=20 height=20> </td> <td> 5</td> <td rowspan=“2”>6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td><td>9 </td> </tr> </table> </body> </html> align, bgcolor, border, cellpadding, cellspacing, width не се поддържат в HTML5!!!
  48. 48. Оцветяване на клетките <!DOCTYPE html> <head><title>html book</title> </head> <body> <table border=“10” bordercolorlight=“#00a5c6” bordercolordark=“#082984” width=“300” align=“left”> <tr bgcolor=“teal”> <td >1 </td> <td> 2</td> <td> 3</td> </tr> <tr> <td><img src=laptop.gif width=20 height=20> </td> <td bgcolor=“red “> 5</td> <td >6 </td> </tr> <tr> <td>7 </td> <td> 8</td> <td>9 </td> </tr> </table> </body> </html> align, bgcolor, border, cellpadding, cellspacing, width не се поддържат в HTML5!!!
  49. 49. Създаване на рамки-по редове <!DOCTYPE html> <head><title>HTML book</title> </head> <frameset rows=“70,*,80”> <frame name=“top” src=“top.html”> <frame name=“middle” src=“middle.html”> <frame name=“bottom” src=“bottom.html”> </frameset> <body> </body> </html> <frameset> и <frame> не се поддържат в HTML5!!!
  50. 50. Създаване на рамки-по колони <!DOCTYPE html> <head><title>HTML book</title> </head> <frameset cols=“80,*,100”> <frame name=“top” src=“top.html”> <frame name=“middle” src=“middle.html”> <frame name=“bottom” src=“bottom.html”> </frameset> <body> </body> </html>
  51. 51. Вмъкване на звук <!DOCTYPE html> <head> <title>multimedia</title></head> <body> <embed src=“ringing.wav” controls="console" width=“100” height=“70”> </body> </html> ------------------------------ CONTROLS=playbutton, pausebutton, stopbutton, console, smallconsole
  52. 52. Добавяне на фонов звук <!DOCTYPE html> <head> <title>multimedia</title> </head> <body> <bgsound src=“ringin.wav” loop=“infinite”> </body> </html> bgsound не се поддържа в HTML5!!!
  53. 53. Вграждане на видео <!DOCTYPE html> <head> <title>multimedia</title> </head> <body> <embed src="animation.avi" width=“250” height=“220” autostart=“true” align=“right”> </body> </html>
  54. 54. Създававане на преминаващ текст <!DOCTYPE html> <title> </title> <body> <marquee width=“75% “ height=“15” behaviour=“scroll” direction=“left” loop=“infinite” bgcolor=“red”> Това е преминаващ текст </marquee> </body> </html> ------------------------------------------ BEHAVIOUR=scroll, slide, alternate <marquee> не е част от спецификацията HTML!!!
  55. 55. <!DOCTYPE html> <html> <body> <table width=”400” border=”0”> <tr> <td colspan=”2” style=”background- color:lightblue;”> <h1> </h1>Заглавие </td> </tr> <tr> <td style=”background- color:yellow;width:90px;”> <b> </b>Меню </td> <td style=”background-color:pink; height:200px; width:400px;”> Основно съдържание </td> </tr> <tr> <td colspan="2" style="background- color:green;text-align:center;"> Долна част </td> </tr> </table> </body> </html>

×