SlideShare a Scribd company logo
1 of 14
HTML & CSS
Въведение
БОЯН ИВАНОВ
Hypertext Markup Language
 HTML е език за хипертекстово маркиране
• Език
• Хипертекст
• Маркиране
3
Предназначение на езика
 HTML не е език за програмиране.
 Той е описателен език.
• Чрез него се описва структурата на документи
в Интернет.
 Форматиране чрез HTML.
• HTML вече не е език за форматиране.
4
Производни Езици
 HTML – Hypertext
 xHTML – eXtensible Hypertext
 HTML5 – 5та версия на HTML
 SGML – Standard Generalized
 XML – eXtensible
 XSL – eXtensible Stylesheet
5
История на HTML
 1991 – Tim Berners-Lee
 1993 – Първата публична версия на HTML
 1995 – W3C създава първия стандарт за HTML 2
 1995 – Започва създаването на HTML 3
 1997 – HTML 3.2 с кодово име Wilbur
 1997 – Започва създаването на HTML 4
 1999 – HTML 4.0.1
 2000 – xHTML 1.0
 2001 – xHTML 1.1
 2008 – HTML5
6
HTML използва тагове
 Един HTML документ започва с <html> и
завършва с </html>
 Вътре документът се разделя на две части
• Head частта, започва с <head> и завършва с
</head>
• Body частта, започва с <body> и завършва с
</body>
7
HTML използва тагове
 Част от използваните тагове вътре в body
частта на документа
• <p></p> - параграф
• <h1></h1> - заглавие
• <b></b> - удебелен (bold)
• <i></i> - наклонен (italic)
 Съдържанието на текста се угражда с
отварящ и затварящ таг :
<h1> Това е заглавие </h1>
<p> Това е параграф </p>
8
Примерен HTML документ
<!DOCTYPE HTML>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a paragraph </p>
</body>
</html>
10
Грешки и Валидация
 Валидиране на код:
• http://validator.w3.org
• Firefox HTML Validator
 Често срещани грешки:
• Еднакво изписани отварящ и затварящ таг :
<tag></tag> <tag></Tag>
• Стойностите на атрибутите са заградени в
кавички: attr = “value”
• Таговете винаги трябва да са правилно
вложени : <t1><t2><t3> </t3></t2></t1>
11
Информация с meta tag
meta charset="UTF-8"
meta http-equiv="refresh"
meta name="author"
meta name="copyright"
meta name="keywords"
meta name="description"
12
13
Край...
...Въпроси?

More Related Content

Viewers also liked

PhS - Урок 12
PhS - Урок 12PhS - Урок 12
PhS - Урок 12RaynaITSTEP
 
PhS - Урок 9
PhS - Урок 9PhS - Урок 9
PhS - Урок 9RaynaITSTEP
 
PhS - Урок 6
PhS - Урок 6PhS - Урок 6
PhS - Урок 6RaynaITSTEP
 
PhS - Урок 5
PhS - Урок 5PhS - Урок 5
PhS - Урок 5RaynaITSTEP
 
PhS - Урок 10
PhS - Урок 10PhS - Урок 10
PhS - Урок 10RaynaITSTEP
 
PhS - Урок 8
PhS - Урок 8PhS - Урок 8
PhS - Урок 8RaynaITSTEP
 
PhS - Урок 11
PhS - Урок 11PhS - Урок 11
PhS - Урок 11RaynaITSTEP
 

Viewers also liked (7)

PhS - Урок 12
PhS - Урок 12PhS - Урок 12
PhS - Урок 12
 
PhS - Урок 9
PhS - Урок 9PhS - Урок 9
PhS - Урок 9
 
PhS - Урок 6
PhS - Урок 6PhS - Урок 6
PhS - Урок 6
 
PhS - Урок 5
PhS - Урок 5PhS - Урок 5
PhS - Урок 5
 
PhS - Урок 10
PhS - Урок 10PhS - Урок 10
PhS - Урок 10
 
PhS - Урок 8
PhS - Урок 8PhS - Урок 8
PhS - Урок 8
 
PhS - Урок 11
PhS - Урок 11PhS - Урок 11
PhS - Урок 11
 

Similar to html introduction

файлов формат Html
файлов формат Htmlфайлов формат Html
файлов формат Htmlguest26def74
 
Курс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTMLКурс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTMLDAVID Academy
 
HTML-presentation
HTML-presentationHTML-presentation
HTML-presentationlambi
 
Xhtml
XhtmlXhtml
Xhtmlsa6o
 
Seo evaluation
Seo evaluationSeo evaluation
Seo evaluationCtOlaf
 
Html2
Html2 Html2
Html2 natpit
 
изработка на сайт
изработка на сайтизработка на сайт
изработка на сайтplvasileva90
 
Izrabotka na site
Izrabotka na siteIzrabotka na site
Izrabotka na siteyordanita
 
Курс по информационни технологии (2013) - 5. HTTP & Web Services
Курс по информационни технологии (2013) - 5. HTTP & Web ServicesКурс по информационни технологии (2013) - 5. HTTP & Web Services
Курс по информационни технологии (2013) - 5. HTTP & Web ServicesDAVID Academy
 

Similar to html introduction (18)

Html & css improved
Html & css   improvedHtml & css   improved
Html & css improved
 
Html1
Html1Html1
Html1
 
файлов формат Html
файлов формат Htmlфайлов формат Html
файлов формат Html
 
Курс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTMLКурс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTML
 
DHTML
DHTMLDHTML
DHTML
 
DHTML
DHTMLDHTML
DHTML
 
Xhtml
XhtmlXhtml
Xhtml
 
HTML-presentation
HTML-presentationHTML-presentation
HTML-presentation
 
B1 t1 php_basics
B1 t1 php_basicsB1 t1 php_basics
B1 t1 php_basics
 
B1 t1 php_basics
B1 t1 php_basicsB1 t1 php_basics
B1 t1 php_basics
 
Xhtml
XhtmlXhtml
Xhtml
 
Xhtml
XhtmlXhtml
Xhtml
 
Seo evaluation
Seo evaluationSeo evaluation
Seo evaluation
 
Html2
Html2 Html2
Html2
 
изработка на сайт
изработка на сайтизработка на сайт
изработка на сайт
 
Izrabotka na site
Izrabotka na siteIzrabotka na site
Izrabotka na site
 
изработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bgизработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bg
 
Курс по информационни технологии (2013) - 5. HTTP & Web Services
Курс по информационни технологии (2013) - 5. HTTP & Web ServicesКурс по информационни технологии (2013) - 5. HTTP & Web Services
Курс по информационни технологии (2013) - 5. HTTP & Web Services
 

More from RaynaITSTEP

Project management professional
Project management professionalProject management professional
Project management professionalRaynaITSTEP
 
Project management it step
Project management it stepProject management it step
Project management it stepRaynaITSTEP
 
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)RaynaITSTEP
 
monitoring and diagnostics
monitoring and diagnosticsmonitoring and diagnostics
monitoring and diagnosticsRaynaITSTEP
 
network security
network securitynetwork security
network securityRaynaITSTEP
 
configuring disk sand drivers
configuring disk sand driversconfiguring disk sand drivers
configuring disk sand driversRaynaITSTEP
 
install update and migration to windows 10
install update and migration to windows 10install update and migration to windows 10
install update and migration to windows 10RaynaITSTEP
 
Фотошоп за деца_4
Фотошоп за деца_4Фотошоп за деца_4
Фотошоп за деца_4RaynaITSTEP
 
Структурни кабелни системи
Структурни кабелни системиСтруктурни кабелни системи
Структурни кабелни системиRaynaITSTEP
 
Android introduction
Android introductionAndroid introduction
Android introductionRaynaITSTEP
 
Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2RaynaITSTEP
 
Adobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеAdobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеRaynaITSTEP
 

More from RaynaITSTEP (20)

Project management professional
Project management professionalProject management professional
Project management professional
 
Project management it step
Project management it stepProject management it step
Project management it step
 
Lean startup
Lean startupLean startup
Lean startup
 
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
 
DBT_3
DBT_3DBT_3
DBT_3
 
DBT_2
DBT_2DBT_2
DBT_2
 
DBT_1
DBT_1DBT_1
DBT_1
 
monitoring and diagnostics
monitoring and diagnosticsmonitoring and diagnostics
monitoring and diagnostics
 
network security
network securitynetwork security
network security
 
networking
networkingnetworking
networking
 
data security
data securitydata security
data security
 
configuring disk sand drivers
configuring disk sand driversconfiguring disk sand drivers
configuring disk sand drivers
 
boot process
boot process  boot process
boot process
 
install update and migration to windows 10
install update and migration to windows 10install update and migration to windows 10
install update and migration to windows 10
 
virtualization
virtualizationvirtualization
virtualization
 
Фотошоп за деца_4
Фотошоп за деца_4Фотошоп за деца_4
Фотошоп за деца_4
 
Структурни кабелни системи
Структурни кабелни системиСтруктурни кабелни системи
Структурни кабелни системи
 
Android introduction
Android introductionAndroid introduction
Android introduction
 
Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2
 
Adobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеAdobe Illustrator - Обобщение
Adobe Illustrator - Обобщение
 

html introduction

  • 2.
  • 3. Hypertext Markup Language  HTML е език за хипертекстово маркиране • Език • Хипертекст • Маркиране 3
  • 4. Предназначение на езика  HTML не е език за програмиране.  Той е описателен език. • Чрез него се описва структурата на документи в Интернет.  Форматиране чрез HTML. • HTML вече не е език за форматиране. 4
  • 5. Производни Езици  HTML – Hypertext  xHTML – eXtensible Hypertext  HTML5 – 5та версия на HTML  SGML – Standard Generalized  XML – eXtensible  XSL – eXtensible Stylesheet 5
  • 6. История на HTML  1991 – Tim Berners-Lee  1993 – Първата публична версия на HTML  1995 – W3C създава първия стандарт за HTML 2  1995 – Започва създаването на HTML 3  1997 – HTML 3.2 с кодово име Wilbur  1997 – Започва създаването на HTML 4  1999 – HTML 4.0.1  2000 – xHTML 1.0  2001 – xHTML 1.1  2008 – HTML5 6
  • 7. HTML използва тагове  Един HTML документ започва с <html> и завършва с </html>  Вътре документът се разделя на две части • Head частта, започва с <head> и завършва с </head> • Body частта, започва с <body> и завършва с </body> 7
  • 8. HTML използва тагове  Част от използваните тагове вътре в body частта на документа • <p></p> - параграф • <h1></h1> - заглавие • <b></b> - удебелен (bold) • <i></i> - наклонен (italic)  Съдържанието на текста се угражда с отварящ и затварящ таг : <h1> Това е заглавие </h1> <p> Това е параграф </p> 8
  • 9.
  • 10. Примерен HTML документ <!DOCTYPE HTML> <html> <head> <title>Page title</title> </head> <body> <h1> This is a Heading </h1> <p> This is a paragraph </p> </body> </html> 10
  • 11. Грешки и Валидация  Валидиране на код: • http://validator.w3.org • Firefox HTML Validator  Често срещани грешки: • Еднакво изписани отварящ и затварящ таг : <tag></tag> <tag></Tag> • Стойностите на атрибутите са заградени в кавички: attr = “value” • Таговете винаги трябва да са правилно вложени : <t1><t2><t3> </t3></t2></t1> 11
  • 12. Информация с meta tag meta charset="UTF-8" meta http-equiv="refresh" meta name="author" meta name="copyright" meta name="keywords" meta name="description" 12
  • 13. 13