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.

html5&css3

335 views

Published on

html5&css3

Published in: Internet
  • Login to see the comments

  • Be the first to like this

html5&css3

  1. 1. HTML5 и CSS3 HTML - Hyper Text Markup Language CSS – Cascading Style Sheets доц. М. Иванова
  2. 2. 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
  3. 3. HTML5  Маркери, HTML елементи, HTML команди (инструкции)  Всяка команда се представя чрез таг за начало (например <html>) и таг за край (например </html>).  Всеки таг се загражда в триъгълни скоби <>.  Тагът за край включва наклонена надясно черта </>.  Вграждане на команди:  Тези команди, които засягат цели текстови абзаци могат да съдържат команди, които засягат отделни думи или букви, но не и обратното.  Редът на таговете е от значение – при използване на таг за край, той трябва да отговаря на последния незатворен таг за начало.
  4. 4. HTML5  Пример за правилно подредени тагове на команди: <head> - таг за начало на командата head </head> - таг за край на командата head <body> - таг за начало на командата body </body> - таг за край на командата body  Пример за неправилно подредени тагове на команди: <head> <body> - тагът за начало на командата body трябва да бъде след тага за край на командата head </head> </body>
  5. 5.  Препоръчително е командите в HTML документа да се записват с малки букви.  Команда с включено съдържание образува елемент от уеб страницата (например <p> текст </p>). Тук <p></p> е команда с начален таг <p> и краен таг </p>, а елементът включва и текстово съдържание <p> текст </p>.  Съществуват и команди, които не включват съдържание. Тогава командата се представя чрез комбиниране на началния и крайния таг. Например командата за нов ред <br />. Тя няма съдържание и включва в себе си началния и крайния таг.
  6. 6.  Командите могат да съдържат един или повече атрибути, чрез което се разширява тяхната функционалност.  Например към командата параграф може да се добави атрибута style, чрез който ще се форматира текстовия параграф. Стойността на атрибута се загражда задължително в кавички. <p style="front-family: Arial;"> текст </p>  Интервали – браузърите игнорират интервалите между елементите в HTML документа
  7. 7. Структурни блокове в HTML  Специални символи – знаците с номера между 129-255 от стандартния набор ISO Latin-1 се въвеждат чрез име или кодов номер: ® - ® или &reg;
  8. 8. HTML5 и CSS3  HTML5 – изгражда структурата на уеб страниците  CSS3 – грижи се за презентацията на уеб страниците – форматиране и позициониране на HTML елементите
  9. 9. Cascading Style Sheets https://en.wikipedia.org/wiki/Cascading_Style_Sheets
  10. 10. CSS3 Свързване на стилови формати с HTML документ може да се приложи по три начина:  отделен файл (.css) с описание на стиловите формати;  вмъкване на стиловите формати в тялото на HTML файла чрез атрибута style;  използване на елемент <style> . . . </style> в head секцията 10
  11. 11. Три начина за прилагане на каскадни стилови дефиниции  Чрез отделен CSS файл <link rel="stylesheet" href="name.css" type="text/css">  Чрез използване на вътрешни каскадни стилови дефиниции <h2 style="color:red"> Вътрешни каскадни стилови дефиниции </h2>  Използване на командата <style></style> <style type="text/css"> h1 {color: #f0f0f0; text-align: center;} P {color: #f0f0f0;} </style>
  12. 12. CSS дефиниции  Дефиницията се представя чрез селектор, чийто стил се определя чрез свойства и стойности  Селекторът свързва даден елемент от уеб документа с неговия стил  Стилът на този елемент се определя чрез списък от свойства и техните стойности  Свойството и стойността се отделят чрез двоеточие Общ вид: селектор { свойство 1: стойност; свойство 2: стойност; ... свойство n: стойност; } Пример: h1 { color: red; text-align: center; }
  13. 13. Концепции за проектиране на уеб страници  Текстово проектиране - уеб страниците имат вид на текстови документи, съдържащи заглавия, параграфи, списъци, таблици и други елементи, подходящ за публикуване на техническа информация
  14. 14. Предимство на текстовото проектиране е простотата на HTML кода. Дори в уеб страницата да са включени изображения и таблица, те са част от съдържанието на документа, а не от неговото оформление. Недостатъци: Липсва естетическо оформяне Липсват средства за позициониране на елементите върху уеб страницата – те следват един след друг, отгоре надолу Липсват начини за разделяне на страницата на отделни секции за заглавие, меню, работна област, долна част и т.н.
  15. 15.  Проектиране чрез фреймове – за намаляване на ръчната работа при грешки  Недостатъци:  Фреймовите структури не са стандартизирани от W3C и всеки браузър ги визуализира по различен начин  Фреймовата структура е еднаква за целия сайт и всички страници изглеждат по един и същ начин, естествено с различно съдържание
  16. 16.  Проектиране чрез таблици Предимства:  Таблиците са стандартизирани от W3C и ще изглеждат по един и същ начин в различните браузъри  Таблиците са по-гъвкав инструмент за оформяне дизайна на уеб страницата от фреймовите структури – различни клетки от таблицата могат да се обединяват или разделят по различен начин и да се постигне желания дизайн  Външния вид на таблицата лесно може да се променя чрез технологията CSS  Браузърите зареждат таблиците на части Недостатък:  Обемен и сложен код на страниците
  17. 17.  Проектиране чрез контейнери - елементите от уеб страницата се разполагат в блокови контейнери - заглавната част, менюто, работната област, долната част и други елементи Предимства:  Контейнерите са стандартизирани от W3C и се визуализират еднакво от всички браузъри  Елементите могат да се разположат вурху страницата по желания начин  Използване на CSS за визуално оформяне на страницата  Компактен HTML код Недостатък:  Обемен HTML код и труден за възприемане, използване на сложни CSS набори
  18. 18. Проектиране на WEB страница  Защо се създава?  Какво предоставя?  Кои са потребителите?  Как да се създаде привлекателно за потребителите съдържание?  Колко страници да се създадат?  С каква структура?  Как да се проектира навигацията?
  19. 19. Създаване на web страница <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
  20. 20. Декларация типа на HTML документа  За да не се визуализира една и съща уеб страница по различен начин в различните браузъри:  <!DOCTYPE [елемент от най-горно ниво] [публичност] "[регистрация] // [организация] // [тип] [име] // [език] " "[url] ">  Елемент от най-горно ниво – указва елемента от най-горно ниво в документа. За HTML документ този елемент е <html>  Публичност – този атрибут указва дали документът е публичен (public) или системен (system). За HTML документ се указва public
  21. 21. Декларация типа на HTML документа  Регистрация – атрибутът дава информация относно това дали разработчикът на DTD (Document Type Definition) е регистриран в международната организация по стандартизиране (Organization for Standardization, ISO) или не. Стойностите на този атрибут са: + (регистриран) и – (неригистриран). За W3C се записва –  Организация – име на организацията, която е разработила DTD. W3C създава и усъвършенства HTML стандарта т.е. консорциумът W3C е собственик на HTML стандарта. Затова стойността на този атрибут е W3C
  22. 22. Декларация типа на HTML документа  Тип – За HTML документ се задава стойност DTD  Име – име на DTD документа  Език – за HTML се указва английски език EN  URL – дава се линк към местоположението на DTD документа
  23. 23. Версия 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 елементи и атрибути. Разрешено е използването на фреймови структури.
  24. 24. Създаване на заглавие <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> </body> </html>
  25. 25. Заглавия и подзаглавия <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1>Най-голямо заглавие</h1> <h2>Голямо заглавие</h2> <h3>Не толкова голямо заглавие</h3> <h4>По-малко заглавие</h4> <h5>Още по-малко заглавие</h5> <h6>Най-малко заглавие</h6> </body> </html> -------------------------------------------- <hn> - n=1-6 в зависимост от нивото на заглавието
  26. 26. Позициониране на заглавията – css свойство text-align <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1 style="text-align: center;">Най-голямо заглавие</h1> <h2 style="text-align: center;">Голямо заглавие</h2> <h3 style="text-align: center;">Не толкова голямо заглавие</h3> <h4 style="text-align: center;">По-малко заглавие</h4> <h5 style="text-align: center;">Още по-малко заглавие</h5> <h6 style="text-align: center;">Най-малко заглавие</h6> </body> </html> center, left, right
  27. 27. Задаване шрифт на текст – css свойство font-family <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1 style="text-align: center; font-family: Arial;">Най-голямо заглавие</h1> <h3 style="text-align: center; font-family: 'Courier New'; "> Заглавие</h3> </body> </html>
  28. 28. Задаване цвят на текст – css свойство color <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1 style="text-align: center; font-family: Arial; color: #9370DB;">Най-голямо заглавие </h1> <h3 style="text-align: center; font-family: 'Courier New '; color: #F08080;"> Заглавие </h3> </body> </html> https://www.w3schools.com/cssref/css_colors.asp
  29. 29. Текстов абзац (параграф) – html команда <p></p> <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1>Най-голямо заглавие</h1> <p> Това е текстов абзац или още се нарича параграф. Това е текстов абзац или още се нарича параграф. Това е текстов абзац или още се нарича параграф. </p> </body> </html>
  30. 30. Задаване на шрифт на параграф – css свойството front-family <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1> - </h1>Най голямо заглавие <p> . </p>Това е текстов абзац или още се нарича параграф <p style="front-family: Arial;"> Arial.Втори параграф с шрифт </p> </body> </html>
  31. 31. Задаване на наклонен шрифт - css свойството font-style и почернен текст - css свойството font- weight <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1 style="font-style:italic;"> - </h1>Най голямо заглавие <p> <span style="font-weight: bold; font-size: 14pt;">Това е .</span>текстов абзац или още се нарича параграф Това е .текстов абзац или още се нарича параграф </p> </body> </html>
  32. 32. Задаване на горен и долен индекс <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> Горен индекс <sup>1</sup> <br /> Долен индекс <sub>13</sub> </body> </html>
  33. 33. Подчертаване на текст – css свойството text-decoration <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1 style="text-decoration: underline;"> - </h1>Най голямо заглавие </body> </html>
  34. 34. Задаване на кратък и на дълъг цитат <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <p><q> . ,Има два вида хора на света Такива които разбират , , .двоичния код и такива които не го разбират </q>- </p>Неизвестен автор <blockquote cite="http://www.citat.com"> Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат Цитат </blockquote> </body>
  35. 35. Задаване на адрес <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <address> Ботевград ул. Ботевград 13 България </address> </body> </html>
  36. 36. Вмъкване на изображение <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" /> </body> </html>
  37. 37. Позициониране на изображението в центъра на уеб страницата <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="margin:auto; display:block;"> </body> </html>
  38. 38. Оставяне на разстояние около изображение <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="margin:20px; display:block;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>Текст Текст Текст Текст Текст Текст </body> </html>
  39. 39. Оставяне на разстояние около изображение <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="float: left; margin: 0px 20px 0px 0px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>Текст Текст Текст Текст Текст </body> </html>
  40. 40. Променяне размерите на изображение <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px; width:100px; height:100px;"> </body> </html>
  41. 41. Поставяне на хоризонтална линия <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>Текст <hr /> </body> </html>
  42. 42. Форматиране на хоризонтална линия <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p> <hr style="border: 5px dashed #9370DB;" /> </body> </html>
  43. 43. Създаване на хипервръзка <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p> <hr style="border: 5px dashed #9370DB;" /> <br /> <a href="page4.html">Назад</a> <a href="page5.html">Напред</a> </body> </html>
  44. 44. Задаване фон цвят на уеб страница <html> <head> <title> Интернет технологии </title> </head> <body style="background-color: #F08080;"> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px; width:100px; height:100px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p> <hr style="border: 5px dashed #9370DB;" /> <br /> <a href="page4.html">Назад</a> <a href="page5.html">Напред</a> </body> </html>
  45. 45. Поставяне на изображение за фон на уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body style="background-image: url('pic2.jpg');"> <img src="pic1.jpg" style="float: left; margin:0px 20px 0px 0px; width:100px; height:100px;"> <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>Текст Текст <hr style="border: 5px dashed #9370DB;" /> <br /> <a href="page4.html"> </a> <aНазад href="page5.html"> </a>Напред </body>
  46. 46. Задаване на отстъп <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <h1>Най-голямо заглавие</h1> <p style="text-indent: 15mm;"> Параграф Параграф Параграф Параграф Параграф Параграф Параграф Параграф Параграф </p> </body> </html>
  47. 47. Единици на размер на шрифта em - (0.5em);процент спрямо размера на шрифта ex - (1ex);процент спрямо размера на буквата х px - процент спрямо разделителната способност (12px);на изображение в пиксели % - (50%);процент спрямо общото пространство pt - (12pt);размер на шрифт в пунктове in - (1in = 2.54cm);размер за разстояния в инчове cm - (1cm);размер за разстояния в сантиметри mm - (10mm);размер за разстояния в милиметри pc - picas (1 =12 pt)размер за шрифт в пика
  48. 48. Добавяне на коментар <!DOCTYPE html> <head><title>HTML book</title> </head> <body> <p> 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> <!-- A database cluster is a collection of databases that will be accessible through a single instance of a running database server. --> </body> </html>
  49. 49. http://www.somacon.com/p142.php
  50. 50. Изобразяване на връзки в определени прозорци <!DOCTYPE html> <head><title>HTML book</title> </head> <body > <img src="laptop.gif"> <h1>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
  51. 51. Хипервръзка към e-mail адрес <a href="mailto:user@host"> ivanova@mail.bg </a>
  52. 52. Вмъкване на звук <!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
  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> <html> <head> <title> Интернет технологии </title> </head> <body> <table> <tr> <td>Иван</td> <td>Иванов</td> </tr> <tr> <td>Стефка</td> <td>Ангелова</td> </tr> </table> </body> </html>
  55. 55. Заглавна част на таблица – <th></th> <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <table> <tr> <th>Име</th><th>Фамилия</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> </tr> <tr> <td>Стефка</td> <td>Ангелова</td> </tr> </table> </body> </html>
  56. 56. Рамка на таблицата и клетките <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th> </th><th> </th>Име Фамилия </tr> <tr> <td> </td> <td> </td>Иван Иванов </tr> <tr> <td> </td> <td> </td>Стефка Ангелова </tr> </table>
  57. 57. Задаване на височина на клетки от таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table, th, td { border: 1px solid black; } th {height:60px;} td {height:30px;} </style> </head> <body> <table> <tr><th>Име</th><th>Фамилия</th></tr> <tr><td>Иван</td> <td>Иванов</td></tr> <tr><td>Стефка</td> <td>Ангелова</td></tr> </table> </body> </html>
  58. 58. Задаване на ширина на клетка от таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px;} </style> </head> <body> <table> <tr><th>Име</th><th>Фамилия</th></tr> <tr><td>Иван</td> <td>Иванов</td></tr> <tr><td>Стефка</td> <td>Ангелова</td></tr> </table> </body></html>
  59. 59. Центриране на таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px;} </style> </head> <body> <table> <tr><th>Име</th><th>Фамилия</th></tr> <tr><td>Иван</td> <td>Иванов</td></tr> <tr><td>Стефка</td> <td>Ангелова</td></tr> </table> </body></html>
  60. 60. Определяне ширината на таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px;} </style> </head> <body> <table> <tr><th> </th><th> </th></tr>Име Фамилия <tr><td> </td> <td> </td></tr>Иван Иванов <tr><td> </td> <td> </td></tr>Стефка Ангелова </table> </body></html>
  61. 61. Фон на таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px; background-color:#E6E6FA; color:#708090;} td {height:30px; width:180px;} </style> </head> <body> <table> <tr><th> </th><th> </th></tr>Име Фамилия <tr><td> </td> <td> </td></tr>Иван Иванов <tr style="background-color:#E6E6FA; color:#708090;"><td> </td>Стефка <td> </td></tr></table>Ангелова </body> </html>
  62. 62. Центриране на текст по хоризонтала в клетка от таблица <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px;} tr {text-align:center;} </style> </head> <body> <table> <tr><th> </th><th> </th></tr>Име Фамилия <tr><td> </td> <td> </td></tr>Иван Иванов <tr><td> </td> <td> </td></tr>Стефка Ангелова </table> </body></html>
  63. 63. Позициониране на текст от клетки в таблица по вертикала <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px; vertical-align:bottom;} tr {text-align:center;} </style> </head> <body> <table> <tr><th> </th><th> </th></tr>Име Фамилия <tr><td> </td> <td> </td></tr>Иван Иванов <tr><td> </td> <td> </td></tr>Стефка Ангелова </table></body></html>
  64. 64. Обединяване на две клетки от таблица по колони <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px; vertical-align:bottom;} tr {text-align:center;} </style> </head> <body> <table> <tr><th>Име</th><th>Фамилия</th></tr> <tr><td colspan="2">Иван Иванов</td></tr> <tr><td>Стефка</td> <td>Ангелова</td></tr> </table> </body> </html>
  65. 65. Обединяване на две клетки от таблица по редове <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> table {margin:0 auto; width:70%;} table, th, td { border: 1px solid black; } th {height:60px; width:180px;} td {height:30px; width:180px; vertical-align:bottom;} tr {text-align:center;} </style> </head> <body> <table><tr><th>Име</th><th>Фамилия</th></tr> <tr><td rowspan="2">Иван</td><td>Иванов</td></tr> <tr><td>Ангелова</td></tr> </table> </body></html>
  66. 66. Неподреден списък <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> ul {list-style-type:disk;} </style> </head> <body> <ul> <li> </li>Първи елемент <li> </li>Втори елемент <li> </li>Трети елемент </ul> </body> </html> list-style-type - disk, circle, square
  67. 67. Подреден списък <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> ul {list-style-type:disk;} ol {list-style-type:lower-alpha;} </style> </head> <body> <ul><li> </li><li> </li><li> </li></ul>Първи елемент Втори елемент Трети елемент <br /> <ol> <li> </li>Първи елемент <li> </li>Втори елемент <li> </li>Трети елемент </ol> </body></html>
  68. 68. Премахване на символите пред подреден и неподреден списък - css свойство list-style и стойност none <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> ul {list-style:none;} ol {list-style:none;} </style> </head> <body> <ul><li>Първи елемент</li><li>Втори елемент</li><li>Трети елемент</li></ul> <br /> <ol><li>Първи елемент</li><li>Втори елемент</li><li>Трети елемент</li></ol> </body> </html>
  69. 69. Вмъкване на аудио файл <!DOCTYPE html> <head> <title> Интернет технологии </title> </head> <body> <audio src="audio.mp3" autoplay controls loop> </audio> </body> </html>
  70. 70. Вмъкване на аудио файл <!DOCTYPE html> <head> <title> Интернет технологии </title> </head> <body> <audio controls> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mpeg" /> .Уеб браузърът не поддържа тези формати </audio> </body> </html>
  71. 71. Вмъкване на видео файл <!DOCTYPE html> <head> <title> Интернет технологии </title> </head> <body> <video src="video.mp4" controls> </video> </body> </html>
  72. 72. Вмъкване на видео файл <!DOCTYPE html> <head> <title> Интернет технологии </title> </head> <body> <video width="360" height="260" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> Уеб браузърът не поддържа тези формати. </video> </body> </html>
  73. 73. Визуализиране на субтитрите към видео файл <!DOCTYPE html> <head> <title> Интернет технологии </title> </head> <body> <video controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" /> <track src="subtitles_bg.vtt" kind="subtitles" srclang="bg" label="Bulgarian" /> </video> </body> </html>
  74. 74. Вмъкване на видео от YouTube <iframe width="560" height="315" src="https://www.youtube.c om/embed/h8K49dD52WA" frameborder="0" allow="autoplay; encrypted- media" allowfullscreen> </iframe>
  75. 75. Създаване на форма - <form></form> <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> …… </form> </body> </html>
  76. 76. Задаване на текстово поле <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> :<br />Име <input type="text" name="firstname "/> <br /> :<br />Фамилия <input type="text" name="lastname" /> </form> </body> </html>
  77. 77. Задаване на радио бутон <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> :<br />Име <input type="text" name="firstname" /><br /> :<br />Фамилия <input type="text" name="lastname" /> <br /><br /><br /> ?<br />В кой курс сте включени <input type="radio" name="course" value="it" checked /> Интернет <br>технологии <input type="radio" name="course" value="cg" /> <br>Компютърна графика <input type="radio" name="course" value="as" /> Аналогова схемотехника </form> </body> </html>
  78. 78. Задаване на бутон с отметка <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> Коя е любимата тема? <br /> <input type="checkbox" name="topic" value="internet" checked /> Интернет възникване и развитие<br> <input type="checkbox" name="topic" value="code" /> HTML5 и CSS3 кодиране<br> <input type="checkbox" name="topic" value="examples" /> Примерни приложения </form> </body> </html>
  79. 79. Бутони submit и reset <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> <input type="submit" value="submit" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="reset" /> </form> </body> </html>
  80. 80. Поле за парола <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> :<br />Въведете парола <input type="password" name="passw" sieze="10" /> </form> </body> </html>
  81. 81. Текстова област <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> <textarea rows="5" cols="60" name="internet"> Интернет технологии </textarea> </form> </body> </html>
  82. 82. Поле за многозначен избор <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> :Изберете любима медия за четене на интересни факти <br /> <select name="list1" size="11" required> <option selected label="enciclopedia">Енциклопедии</option> <option>Специализирани книги</option> <option>Wikipedia</option> <option>Онлайн справочници</option> <option>Онлайн вестници и списания</option> </select> </form> </body></html>
  83. 83. Групиране на сходни опции <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> Изберете любима медия за четене на интересни факти: <br /> <select name="list1" size="11" required> <optgroup label="Печатни издания"> <option selected>Енциклопедии</option> <option>Специализирани книги</option> </optgroup> <optgroup label="Онлайн източници"> <option>Wikipedia</option> <option>Онлайн справочници</option> <option>Онлайн вестници и списания</option> </optgroup> </select>
  84. 84. Определяне ширина на текстово поле <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <style> input {width: 70%;} </style> </head> <body> <form> :Въведете фамилията си <input type="text" name="example" /> </form> </body> </html>
  85. 85. Групиране на няколко елемента от една форма <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> </head> <body> <form> <fieldset> <legend> :</legend> :<br />Лична информация Име <input type="text" name="firstname "/> <br /> :<br /> <input type="text" name="lastname" />Фамилия </fieldset> <fieldset> <legend> :</legend> 1:<br />Хобита Хоби <input type="text" name="hoby1"/> <br /> 2:<br />Хоби <input type="text" name="hoby2" /></fieldset> </form></body></html>
  86. 86. Елемент <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> </head> <body> ...... </body> </html> 86
  87. 87. Вид на документа и кодовата таблица на неговото съдържание <meta http-equiv="content-type" content="text/html; charset=win-1251" /> 87
  88. 88. Автоматично зареждане на нова страница, чийто адрес е указан с параметъра URL след изтичане на n секунди <meta http-equiv="refresh" content="n ; [url=url]" /> 88
  89. 89. Предотвратяване зареждането на страницата в кеш-паметта на потребителя <meta http-equiv="pragma" content="no-cache" /> 89
  90. 90. Чрез атрибута Window-Target се указва името на подразбиращия се фрейм <meta http-equiv="window-target" content="new- frame" /> 90
  91. 91. Задаване дата и час  <meta http-equiv="expires" content="wed, 28 feb 2013 12:00:00 gmt" />  Тази информация е предназначена за proxy сървър, при което страницата трябва задължително да бъде презаредена 91
  92. 92. Задаване име на автора на документ  <meta name="author" content="григор " />иванов 92
  93. 93. Задаване на кратко описание на съдържанието на документ  <meta name="description" content="кратко " />описание на съдържанието 93
  94. 94. Задаване на ключови думи за индексиране на документ  <meta name="keywords" content="ключови " />думи 94
  95. 95. Уточняване на правата  <meta name="copyright" content="copyright ... " />име 95
  96. 96. Уточняване на името на този, който публикува документа за случаите, в които това не е неговият автор  <meta name="publisher" content="Иван " />Иванов 96
  97. 97. Указания към роботите за индексиране на страници се задават с атрибут  <meta name="robots" content="all|none|index| noindex|follow|nofollow" />  Множестовото параметри имат следното значение:  all - всичко подлежи на индексиране;  none - забрана за индексиране;  index - страницата е вече индексирана;  noindex - индексират се само връзките от страницата;  follow - извличане на връзките от страницата за последващо индексиране;  nofollow - да не се извличанат връзките от страницата. 97
  98. 98. Указания за използвания език или езици в страницата  <meta name="site-languages" content="english bulgarian" /> 98
  99. 99. Задава предметната област, категория за класификация на страницата  <meta name="subject" content="internet" /> 99
  100. 100. Определяне на начина на разпространение  <meta name="distribution" content="global" /> 100
  101. 101. Определяне на географско разположение на сайта или компанията  <meta name="geography" content=" ,град , , " />област държава пощенски код 101
  102. 102. Класификация на HTML страницата като вид ресурс  <meta name="resource-type" content="document" /> 102
  103. 103. Индикатор за важна или актуална информация  <meta name="highlight" content="highlight information" /> 103
  104. 104. <!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>

×