SlideShare a Scribd company logo
1 of 10
Въведение в
Web-дизайна
І част - HTML

© Живка Жекова. Всички права запазени.
Кратка история на HTML






Тим Бърнарс Лий – края на 80-те години на 20 век –
основите на World Wide Web и HTML (HiperText
Markup Language - Език за маркиране на
хипертекстови документи, които да се предават по
мрежата)
Марк Ендрисън – създава първият браузър
NetScape Navigator.
Стандартизация –
World Wide Web Consortium - www.w3.org
Ново поколение - XHTML - Extensible HiperText
Markup Language
© Живка Жекова. Всички права запазени.
Работна среда за създаване на
HTML кода
 Обикновен текстов редактор –

Noteрad
 Специализирани редактори ( Web Writer
и др.)
 Редактори от типа WYSIWYG (What you
see is what you get)
 Сайтбилдери от Интернет –
www.street.bg
© Живка Жекова. Всички права запазени.
Общи сведения за HTML и
основни елементи






Hyper Text Markup
Language – език за
маркиране на хипертекст.
HTML е езикът, който
казва на браузъра как да
покаже страницата
HTML файлът съдържа
само букви, цифри и
символи, които се четат
от кой да е редактор и
това прави HTML
универсален език
© Живка Жекова. Всички права запазени.







HTML може да се
усъвършенства
допълнително с
JavaScript и Java
(Dynamic HTML)
Основните елементи се
наричат тагове, които
си имат имена записани
между две ъглови скоби
<>
Първият таг е <html>,
последният </html>.
Основна структура на документа


<HTML>










<HEAD> ................
Заглавна част
</HEAD>
<BODY> ..................
Същинска част
</BODY>

</HTML>

© Живка Жекова. Всички права запазени.

На така създадения документ
трябва да бъде зададено име
с разширение .html или .htm,
защото само така се
възприема от браузърите
като web-доумент.
Заглавна част
 Съдържа описателна информация –

заглавие, автор, ключови думи, кодиране
на страницата и др.
 Заглавието записано между таговете
<TITLE> и </TITLE> се показва в
заглавния ред на браузъра –
пример <title> This is my first page </title>
 В тази част се добавят и скриптовете
на JavaScript и МЕТА - таговете
© Живка Жекова. Всички права запазени.
Таг за коментар
 Коментарите се изписват между

следните две форми <!-- и -->
 Пример:

<!-- Тук може да се напише коментар, който няма да
повлияе на HTML-документа -->

© Живка Жекова. Всички права запазени.
Мета тагове


МЕТА таговете са изключително важен и полезен
инструмент. Те могат да имат следните два
формата:

МЕТА тагове, съдържащи атрибута HTTP-EQUIV и
атрибута CONTENT. Те се използват, за да
управляват определени действия на браузъра.
<meta http-equiv="име" content="съдържание" />


МЕТА тагове, съдържащи атрибута NAME и
атрибута CONTENT. Te се използват за да
подават определена информация на търсещите
машини (търсачките).
<meta name="име" content="съдържание" />

Мета таговете нямат затварящ таг в HTML!
© Живка Жекова. Всички права запазени.
Някои важни МЕТА тагове







<meta http-equiv="content-type" content="text/html;
charset=windows-1251" /> - указание, че страницата
е написана на кирилица
<meta name="description" content="Тук се пише
кратко описание на сайта." />
<meta name="keywords" content="ключови думи,
които се отделят със запетаи." />
<meta name="author" content="Вашето име." />
<meta http-equiv="refresh" content="някаква цифра,
например 10;URL=http://Някакъв уеб адрес" />

© Живка Жекова. Всички права запазени.
Някои важни МЕТА тагове







<meta http-equiv="content-type" content="text/html;
charset=windows-1251" /> - указание, че страницата
е написана на кирилица
<meta name="description" content="Тук се пише
кратко описание на сайта." />
<meta name="keywords" content="ключови думи,
които се отделят със запетаи." />
<meta name="author" content="Вашето име." />
<meta http-equiv="refresh" content="някаква цифра,
например 10;URL=http://Някакъв уеб адрес" />

© Живка Жекова. Всички права запазени.

More Related Content

Viewers also liked (15)

Html6
Html6Html6
Html6
 
формуляри
формуляриформуляри
формуляри
 
Tekst urok3
Tekst urok3Tekst urok3
Tekst urok3
 
Kontr1
Kontr1Kontr1
Kontr1
 
Html8
Html8Html8
Html8
 
Html4
Html4Html4
Html4
 
Html5
Html5Html5
Html5
 
Spis1
Spis1Spis1
Spis1
 
Test photoshop
Test photoshopTest photoshop
Test photoshop
 
Html7
Html7Html7
Html7
 
Html3
Html3 Html3
Html3
 
Graphics
GraphicsGraphics
Graphics
 
Kontrolno 2
Kontrolno 2Kontrolno 2
Kontrolno 2
 
контролна
контролнаконтролна
контролна
 
Mat
MatMat
Mat
 

Similar to Html1

изработка на сайт
изработка на сайтизработка на сайт
изработка на сайтplvasileva90
 
Izrabotka na site
Izrabotka na siteIzrabotka na site
Izrabotka na siteyordanita
 
Introduction to CMS
Introduction to CMSIntroduction to CMS
Introduction to CMSBoian Ivanov
 
Html presentation
Html presentationHtml presentation
Html presentationfleexy
 
Николай Кръстев (NT WEBSITES).pdf
Николай Кръстев (NT WEBSITES).pdfНиколай Кръстев (NT WEBSITES).pdf
Николай Кръстев (NT WEBSITES).pdfOctopus Events
 
Seo evaluation
Seo evaluationSeo evaluation
Seo evaluationCtOlaf
 
Какво ново в Joomla?- Joomla! Day 2013 Bulgaria
Какво ново в Joomla?- Joomla! Day 2013 BulgariaКакво ново в Joomla?- Joomla! Day 2013 Bulgaria
Какво ново в Joomla?- Joomla! Day 2013 BulgariaMihail Semerdzhiev
 
Moz seo-cheat-sheet bg-final
Moz seo-cheat-sheet bg-finalMoz seo-cheat-sheet bg-final
Moz seo-cheat-sheet bg-finalSEOM
 
Html search engine optimization
Html search engine optimizationHtml search engine optimization
Html search engine optimizationBoian Ivanov
 
HTML – програмиране и валидиране
HTML – програмиране и валидиранеHTML – програмиране и валидиране
HTML – програмиране и валидиранеEkaterina Mitseva
 
Nikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNetpeak
 
Nikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNetpeakBG
 

Similar to Html1 (20)

Html
HtmlHtml
Html
 
DHTML
DHTMLDHTML
DHTML
 
DHTML
DHTMLDHTML
DHTML
 
изработка на сайт
изработка на сайтизработка на сайт
изработка на сайт
 
Izrabotka na site
Izrabotka na siteIzrabotka na site
Izrabotka na site
 
изработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bgизработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bg
 
Xhtml
XhtmlXhtml
Xhtml
 
Introduction to CMS
Introduction to CMSIntroduction to CMS
Introduction to CMS
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Николай Кръстев (NT WEBSITES).pdf
Николай Кръстев (NT WEBSITES).pdfНиколай Кръстев (NT WEBSITES).pdf
Николай Кръстев (NT WEBSITES).pdf
 
Module1
Module1Module1
Module1
 
Html & css improved
Html & css   improvedHtml & css   improved
Html & css improved
 
Web Pro2
Web Pro2Web Pro2
Web Pro2
 
Seo evaluation
Seo evaluationSeo evaluation
Seo evaluation
 
Какво ново в Joomla?- Joomla! Day 2013 Bulgaria
Какво ново в Joomla?- Joomla! Day 2013 BulgariaКакво ново в Joomla?- Joomla! Day 2013 Bulgaria
Какво ново в Joomla?- Joomla! Day 2013 Bulgaria
 
Moz seo-cheat-sheet bg-final
Moz seo-cheat-sheet bg-finalMoz seo-cheat-sheet bg-final
Moz seo-cheat-sheet bg-final
 
Html search engine optimization
Html search engine optimizationHtml search engine optimization
Html search engine optimization
 
HTML – програмиране и валидиране
HTML – програмиране и валидиранеHTML – програмиране и валидиране
HTML – програмиране и валидиране
 
Nikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysis
 
Nikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysisNikolai galinov-onpage-analysis
Nikolai galinov-onpage-analysis
 

More from Блага Чобанова (18)

Mat 11 pp
Mat 11 ppMat 11 pp
Mat 11 pp
 
Mat 11 pp
Mat 11 ppMat 11 pp
Mat 11 pp
 
Analiz vhodni 8klas
Analiz vhodni 8klasAnaliz vhodni 8klas
Analiz vhodni 8klas
 
Vhodno 8klas
Vhodno 8klasVhodno 8klas
Vhodno 8klas
 
Uroc2
Uroc2Uroc2
Uroc2
 
Kontrolno 2
Kontrolno 2Kontrolno 2
Kontrolno 2
 
Kontr1
Kontr1Kontr1
Kontr1
 
Nov
NovNov
Nov
 
Vhodno mat
Vhodno matVhodno mat
Vhodno mat
 
Analiz vh 11_it
Analiz vh 11_itAnaliz vh 11_it
Analiz vh 11_it
 
Vhodno11 it
Vhodno11 itVhodno11 it
Vhodno11 it
 
Zad3 photoshop
Zad3 photoshopZad3 photoshop
Zad3 photoshop
 
Zad2 photoshop
Zad2 photoshopZad2 photoshop
Zad2 photoshop
 
Zada4a
Zada4aZada4a
Zada4a
 
Mask
MaskMask
Mask
 
Layers
LayersLayers
Layers
 
Adobe photoshop cs3
Adobe photoshop cs3Adobe photoshop cs3
Adobe photoshop cs3
 
It&pc
It&pcIt&pc
It&pc
 

Html1

  • 1. Въведение в Web-дизайна І част - HTML © Живка Жекова. Всички права запазени.
  • 2. Кратка история на HTML     Тим Бърнарс Лий – края на 80-те години на 20 век – основите на World Wide Web и HTML (HiperText Markup Language - Език за маркиране на хипертекстови документи, които да се предават по мрежата) Марк Ендрисън – създава първият браузър NetScape Navigator. Стандартизация – World Wide Web Consortium - www.w3.org Ново поколение - XHTML - Extensible HiperText Markup Language © Живка Жекова. Всички права запазени.
  • 3. Работна среда за създаване на HTML кода  Обикновен текстов редактор – Noteрad  Специализирани редактори ( Web Writer и др.)  Редактори от типа WYSIWYG (What you see is what you get)  Сайтбилдери от Интернет – www.street.bg © Живка Жекова. Всички права запазени.
  • 4. Общи сведения за HTML и основни елементи    Hyper Text Markup Language – език за маркиране на хипертекст. HTML е езикът, който казва на браузъра как да покаже страницата HTML файлът съдържа само букви, цифри и символи, които се четат от кой да е редактор и това прави HTML универсален език © Живка Жекова. Всички права запазени.    HTML може да се усъвършенства допълнително с JavaScript и Java (Dynamic HTML) Основните елементи се наричат тагове, които си имат имена записани между две ъглови скоби <> Първият таг е <html>, последният </html>.
  • 5. Основна структура на документа  <HTML>      <HEAD> ................ Заглавна част </HEAD> <BODY> .................. Същинска част </BODY> </HTML> © Живка Жекова. Всички права запазени. На така създадения документ трябва да бъде зададено име с разширение .html или .htm, защото само така се възприема от браузърите като web-доумент.
  • 6. Заглавна част  Съдържа описателна информация – заглавие, автор, ключови думи, кодиране на страницата и др.  Заглавието записано между таговете <TITLE> и </TITLE> се показва в заглавния ред на браузъра – пример <title> This is my first page </title>  В тази част се добавят и скриптовете на JavaScript и МЕТА - таговете © Живка Жекова. Всички права запазени.
  • 7. Таг за коментар  Коментарите се изписват между следните две форми <!-- и -->  Пример: <!-- Тук може да се напише коментар, който няма да повлияе на HTML-документа --> © Живка Жекова. Всички права запазени.
  • 8. Мета тагове  МЕТА таговете са изключително важен и полезен инструмент. Те могат да имат следните два формата:  МЕТА тагове, съдържащи атрибута HTTP-EQUIV и атрибута CONTENT. Те се използват, за да управляват определени действия на браузъра. <meta http-equiv="име" content="съдържание" />  МЕТА тагове, съдържащи атрибута NAME и атрибута CONTENT. Te се използват за да подават определена информация на търсещите машини (търсачките). <meta name="име" content="съдържание" /> Мета таговете нямат затварящ таг в HTML! © Живка Жекова. Всички права запазени.
  • 9. Някои важни МЕТА тагове      <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> - указание, че страницата е написана на кирилица <meta name="description" content="Тук се пише кратко описание на сайта." /> <meta name="keywords" content="ключови думи, които се отделят със запетаи." /> <meta name="author" content="Вашето име." /> <meta http-equiv="refresh" content="някаква цифра, например 10;URL=http://Някакъв уеб адрес" /> © Живка Жекова. Всички права запазени.
  • 10. Някои важни МЕТА тагове      <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> - указание, че страницата е написана на кирилица <meta name="description" content="Тук се пише кратко описание на сайта." /> <meta name="keywords" content="ключови думи, които се отделят със запетаи." /> <meta name="author" content="Вашето име." /> <meta http-equiv="refresh" content="някаква цифра, например 10;URL=http://Някакъв уеб адрес" /> © Живка Жекова. Всички права запазени.