HTML

от Уикипедия, свободната енциклопедия
Направо към: навигация, търсене
HyperText Markup Language

HTML, съкращение от HyperText Markup Language — на български "език за маркиране на хипертекст", произнасяно най-често като „ейч-ти-ем-ел“, е основният маркиращ език за описание и дизайн на уеб страници. HTML е стандарт в Интернет, а правилата се определят от международния консорциум W3C. Текущата версия на стандарта е HTML 5.0.

Описанието на документа става чрез специални елементи, наречени HTML елементи или маркери, които се състоят от етикети или тагове (HTML tags) и ъглови скоби (като например елемента <html>). HTML елементите са основната градивна единица на уеб страниците. Чрез тях се оформят отделните части от текста на една уеб страница, като заглавия, цитати, раздели, хипертекстови препратки и т.н. Най-често HTML елементите са групирани по двойки <h1> и </h1>.

В повечето случаи HTML кодът е написан в текстови файлове и се хоства на сървъри, свързани към Интернет. Тези файлове съдържат текстово съдържание с маркери - инструкции за браузъра за това как да се показва текстът. Предназначението на уеб браузърите е да могат да прочетат HTML документите и да ги превърнат в уеб страници. Браузърите не показват HTML таговете, а ги използват, за да интерпретират съдържанието на страницата.

Основното предимство на HTML е, че документите, оформени по този начин, могат да се разглеждат на различни устройства, а не само на екрана. Документът може да бъде правилно оформен и върху монитора на персонален компютър, и върху миниатюрния дисплей на пейджър или мобилен телефон.

История[редактиране | edit source]

Първото публично достъпно описание на HTML е документ, наречен “HTML tags”, първо посочен в Интернет от Тим Бърнърс – Лий в края на 1991 г. Той описва 18 елемента, включващи начална, сравнително опростена конструкция на HTML.

HTML е език за маркиране, който уеб браузърите използват за да интерпретират и създават текст, изображения и други материали. Неизпълнената характеристика за всяка точка се определя в браузъра, като могат да бъдат променяни или засилвани с допълнителни дизайнерски страници, наречени Cascading Style Sheets.

Версии на HTML[редактиране | edit source]

24 Ноември, 1995 г. - HTML 2.0 е представен като RFC 1866. В последствие са добавени:

25 Ноември, 1995 г. – Качване на файлове с формуляри

Май 1996 г. – таблици

Август 1996 г. – клиентски картови изображения

През януари 1997 г. е представен HTML 3.2. Това е първата версия разработена и стандартизирана от World Wide Web Consortium.

Декември 1997 г. е представен HTML 4.0 отново от W3C (World Wide Web Consortium) в три вариации:

- Строг, отпадналите елементи са забранени
- Междинен, отпадналите елементи са разрешени
- Фреймов, най – често рамкови елементи са позволени

Април 1998 г. – Версия 4.0 претърпява леки промени, без смяна на номера

Декември 1999 г. – Версия 4.01 е налице

Януари 2008 г. – HTML5 е представен като работен проект от W3C

Май 2011 г. – версия 5 е в процес на развитие на техническите спецификации. Пълната спецификация се очаква до 2014 г.

Създаване на HTML страници[редактиране | edit source]

Създаването на HTML-базирана уеб страница може да се извърши с помощта на обикновен текстов редактор. Този начин изисква познаване на HTML тагове, така че те да бъдат интегрирани в текста, който ще се показва на страницата. Също така, често срещани са по-приятелски настроените инструменти, които не изискват от потребителя да притежава познания по HTML, което му позволява да създаде страница по метода WYSIWYG. Основен инструмент за тази цел е текстообработваща програма Word, която позволява да запазите документ като HTML и да го редактирате. Специализирани инструменти за създаване на HTML страници са Microsoft, FrontPage, Macromedia Dreamweaver, Notepad , Notepad++,Sublime Text и други.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="windows-1251">
    <title>Заглавие на документа</title>
  </head>
  <body>
    <p>Здравей, свят!!</p>
    <p>Validate <a href="http://validator.w3.org/check/referer">XHTML Basic 1.0</a></p>
    <p>
      <a href="http://validator.w3.org/check?uri=referer"><img
          src="http://validator.w3.org/images/vxhtml-basic10"
          alt="Valid XHTML Basic 1.0!" height="31" width="88" /></a>
    </p>
  </body>
</html>

Структура, основни елементи на един HTML документ[редактиране | edit source]

HTML таговете са най-малката съставна част на един HTML документ. Те, заедно със своите атрибути (като цвят, размер и т.н), съставят т.нар. HTML елементи. Таговете са ключови думи, заградени в ъглови скоби. Обикновено са по двойки:

  • таг за начало – маркира началото на един HTML елемент;
  • таг за край - маркира края на HTML елемента. За разлика от началния таг, крайният има наклонена надясно черта пред името си:
<b> ... </b>

Таговете се влагат един в друг, като първият отворен таг се затваря последен.


Основни елементи[редактиране | edit source]

<html> елемент[редактиране | edit source]

Указва на браузъра, че това е HTML документ. Отбелязва началото и края на документа и съдържа всичи други негови елементи(с изключение на <!DOCTYPE> елемента).

<html>
...
</html>

<head> елемент[редактиране | edit source]

Съдържа заглавието на документа, и може да съдържа стилове, скриптове, енкодинг и т.н.

<html>
<head>
<title>Заглавие на документа</title>
</head></html>

<body> елемент[редактиране | edit source]

Съдържа форматиране видимо за потребителя - текст, хиперлинк, картинки, таблици, бутони, параграфи и т.н.

<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
Съдържание на документа...
</body>
</html>

<!DOCTYPE> елемент[редактиране | edit source]

Декларира се първи, още преди <html> тага. Валидира документа. <!DOCTYPE> не е HTML таг. Той е инструкция за уеб браузъра - указва HTML версията, на която е написана страницата:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
<h1>Моето първо заглавие.</h1>
Съдържание на документа......
</body>
</html>


Основни HTML тагове[редактиране | edit source]

<b> таг[редактиране | edit source]

Удебелява текста.

 Това е нормален текст - <b>а това е удебелен</b>.
Това е нормален текст - а това е удебелен.

<i> таг[редактиране | edit source]

Задава курсив/наклон на текста.

Той кръсти своята кола <i>Светкавицата</i>, защото беше много бърза.
Той кръсти своята кола Светкавицата, защото беше много бърза.

<u> таг[редактиране | edit source]

Подчертава текста.

Това е <u>подчертан текст</u>.
Това е подчертан текст.

<strong> таг[редактиране | edit source]

Указва важен текст.

<strong>Важен текст</strong>
Важен текст

<sub> таг [редактиране | edit source]

Дефинира текст под черта.

Текстът съдържа <sub>subscript</sub> текст.
Текстът съдържа subscript текст.

<sup> таг [редактиране | edit source]

Дефинира текст над черта.

Текстът съдържа <sup>superscript</sup> текст.
Текстът съдържа superscript текст.

<del> таг[редактиране | edit source]

Указва изтрит текст.

Моят любим цвят е <del>червен</del> син!
Моят любим цвят е червен син!

<br> таг[редактиране | edit source]

Указва нов ред. Няма таг за край.

Този текст съдържа <br> нов ред.

Този текст съдържа
нов ред.

<blockquote> таг[редактиране | edit source]

Указва част от текста, който е цитат.

<blockquote cite="http://www.worldwildlife.org/who/index.html">
Когато често се срещаме с дадени хора, те стават част от живота ни.
И като станат част от живота ни, започват да се опитват да го променят.
И се сърдят, когато не правим това, което те изискват от нас.
Понеже всеки си мисли, че знае как другият трябва да живее живота си,
но всъщност никой не знае как трябва да живее своя собствен.
</blockquote>

Когато често се срещаме с дадени хора, те стават част от живота ни. И като станат част от живота ни, започват да се опитват да го променят. И се сърдят, когато не правим това, което те изискват от нас. Понеже всеки си мисли, че знае как другият трябва да живее живота си, но всъщност никой не знае как трябва да живее своя собствен.

<a> таг[редактиране | edit source]

Указва линк към друга страница. Най-важният атрибут на този таг е href. Той посочва URL адреса, към който сочи линка:

<a href="https://telerikacademy.com">Telerik Academy!</a>
Telerik Academy!

<img> таг[редактиране | edit source]

Дефинира картинка в HTML страницата. Има два задължителни атрибута: src и alt. Атрибутът src указва URL адреса на картинката, alt - указва алтернативен текст на картинката, а hight и width - указват съответно височината и ширината на картинката в пиксели.

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Smiley.svg

Заглавия и Параграфи[редактиране | edit source]

Заглавия[редактиране | edit source]

Таговете от <h1> до <h6> дефинират заглавия в HTML документа. <h1> дефинира най-важното заглавие. <h6> дефинира най-маловажното заглавие.

<h1>Заглавие 1</h1>
<h2>Подзаглавие 2</h2>
<h3>Подзаглавие 3</h3>
<h4>Подзаглавие 4</h4>
<h5>Подзаглавие 5</h5>
<h6>Подзаглавие 6</h6>

HTMLHeadersExample.png

Параграфи[редактиране | edit source]

Тагът <p> указва параграф. Браузърите автоматично добавят по един празен ред преди и след текста, маркиран като параграф.

<p>Това е параграф.</p>
<p>Това е друг параграф.</p>

Това е параграф.

Това е друг параграф.


Повечето браузъри показват параграфа коректно, дори да не е сложен тага за край.

<p>Това е параграф.
<p>Това е друг параграф.

Това е параграф.

Това е друг параграф.

За нов ред в самия параграф, без да се започва нов, се използва тагът <br>.

<p>Това е<br>пара<br>граф с нови редове.</p>

Това е
пара
граф с нови редове.

Списъци[редактиране | edit source]

Подредени списъци[редактиране | edit source]

Подредените списъци започват с тага <ol>, а всеки елемент на списъка – с тага <li>:

<ol>
<li>Биричка</li>
<li>Още една биричка</li>
</ol>
  1. Биричка
  2. Още една биричка


Атрибутът reversed указва, че подреждането ще е в низходящ ред, а присвоената му стойност - показва началото на номерацията:

<ol reversed>
  <li>Едно</li>
  <li>Две</li>
  <li>Три</li>
</ol>
 3. Едно
 2. Две
 1. Три


Атрибутът start задава началото на номерацията:

<ol start="4">
  <li>Едно</li>
  <li>Две</li>
  <li>Три</li>
</ol>
  1. Едно
  2. Две
  3. Три
<ol reversed start="5">
  <li>Едно</li>
  <li>Две</li>
  <li>Три</li>
</ol>
 5. Едно
 4. Две
 3. Три


Атрибутът type задава вида на маркерите (букви или цифри), например 1, a, A, i, I:

<ol type="I">
  <li>Едно</li>
  <li>Две</li>
  <li>Три</li>
</ol>
  1. Едно
  2. Две
  3. Три


Неподредени списъци[редактиране | edit source]

При тези списъци номерацията не е с цифри или букви, а с кръгли точки. Всеки списък започва с тага <ul>, а всеки елемент на списъка – с тага <li>:

<ul>
<li>Пържени картофки</li>
<li>Шкембе</li>
</ul>
  • Пържени картофки
  • Шкембе


Описателни списъци[редактиране | edit source]

Това са списъци от термини/имена с описание на всеки термин/име. Такъв списък се указва с тага <dl> в съчетание с таговете:<br>

<dt> - за всеки термин/име
<dd> - за всяко описание на термина/името
<dl>
<dt>Биричка</dt>
<dd>- студена, животоспасяваща напитка</dd>
<dt>Шкембе</dt>
<dd>- освежаващо, сутрешно ястие</dd>
</dl>
Биричка
- студена, животоспасяваща напитка
Шкембе
- освежаващо, сутрешно ястие


Таблици[редактиране | edit source]

Дефинират се с тага <table>. Таблицата е разделена на редове, чрез тага <tr> („table row“), а всеки ред е разделен на клетки с данни (чрез тага <td>, “table data”). Всяка клетка може да съдържа текст, линкове, картинки, списъци, форми, други таблици и т.н. Атрибутът border задава рамка на таблицата.

<table border="1">
<tr>
<td>ред 1, колона 1</td>
<td>ред 1, колона 2</td>
<td>ред 1, колона 3</td>
</tr>
<tr>
<td>ред 2, колона 1</td>
<td>ред 2, колона 2</td>
<td>ред 2, колона 3</td>
</tr>
</table>
ред 1, колона 1 ред 1, колона 2 ред 1, колона 3
ред 2, колона 1 ред 2, колона 2 ред 2, колона 3


Заглавната информация в таблицата се указва чрез тага <th>. Текстът обикновено се показва удебелен и центриран:

<table border="1">
<tr>
<th>Колона 1</th>
<th>Колона 2</th>
<th>Колона 3</th>
</tr>
<tr>
<td>ред 1, колона 1</td>
<td>ред 1, колона 2</td>
<td>ред 1, колона 3</td>
</tr>
<tr>
<td>ред 2, колона 1</td>
<td>ред 2, колона 2</td>
<td>ред 2, колона 3</td>
</tr>
</table>
Колона 1 Колона 2 Колона 3
ред 1, колона 1 ред 1, колона 2 ред 1, колона 3
ред 2, колона 1 ред 2, колона 2 ред 2, колона 3


Атрибути[редактиране | edit source]

Повечето атрибути на елементи са двойки име – стойност, разделени със знак за равенство и записвани в рамките на отварящият таг след името на елемента. Името може да е с единични или двойни кавички. Оставянето на стойности на атрибути без кавички се смята за несигурно.

Има няколко често срещани атрибута, които може да се появят в много елементи:

- Атрибутът id предоставя уникален идентификатор за елемента в документа. Използва се за идентифициране на елемента, така , че стиловете да могат да променят свойствата им.
- Атрибут class е начин за класифициране на подобни елементи. Може да бъде използван за семантични или презентационни цели. Например, хипертекстов документ може семантично да използва обазначение class =”notation” за указване, че всички елементи от този клас са второстепенни спрямо главния текст в този документ. Множествени класови стойности също са позволени, като например class=”notation important”, който слага елемента в класа “notation”, а в същото време и в класа “important”.
- Авторът може да използва атрибутът style за да задава презентационни свойства на определен елемент . Прието е за по – добра практика да се използва id или class атрибутите на елемента за избиране на елемент от каскадни стилове (виж CSS).
- title атрибут се използва за прикачване на подтекстово обяснение на елемент. В повечето браузъри този атрибут се показва на екрана като съвет.
- lang атбитутът идентифицира естественият език на съдържанието в елемента, който може да бъде различен от този в останалата част на документа.
- Атрибутът abbr може да се използва за да се демонстират показаните по –горе атрибути :
<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr>
- Примерът, на повечето браузъри насочващ курсора към абревиатурата, трябва да покаже заглавието “Hypertext Markup Language
- Повечето елементи приемат и атрибут dir, пряко свързан с посоката на изписване на думите в езиците, като например “rtl” за right-to-left текст, като Арабски, Персийски и други.

Семантичен уеб[редактиране | edit source]

Семантичния уеб или HTML е начин на писане на хипертекстови документи, който подчертава значението на кодираната информация над неговия външен вид. HTML има добавено семантично маркиране още от самото си начало, но също са добавени презентационни маркировки като font, i и center таговете. Има също така семантично неутрални span и div тагове. От 1990 г., когато каскадните стилове CSS започват да работят в повечето браузъри, авторите на уеб съдържание са обнадеждени да избягват използването на презентационна хипертекстова маркиковка с оглед отделянето на презентацията, изгледа от съдържанието.

През 2001 г. на дискусия за семантичния уеб, Тим Бърнърс – Лий и други дават примери, в които интелигентни софтуерни агенти може би един ден автоматично ще пълзят в уеб и ще намират, филтрират и правят връзка с несвързани, публикувани факти в полза на потребителите. В момента такива агенти не са много често срещани, но примери за това може да са сайтовете за сравнение на цени.

Важен вид уеб агент, който пълзи и чете уеб страници автоматично без да знае преди това какво би могъл да намери, е така нареченият web crawler или паяк на търсачките. Тези софтуерни агенти са зависими от семантичната яснота на уеб страниците, които откриват, използвайки много различни техники и алгоритми да четат и индексират милиони уеб страници на ден и да предоставят на потребителите на уеб търсачки, без които използваемостта на интернет пространството би намаляла значително.

За да могат търсачките в интернет да оценяват значението на парчетата текст, които намират в HTML документи, или за да създават миксове и други хибриди за други, още по – автоматизирани агенти, семантичните структури, които съществуват, трябва широко и еднакво да бъдат прилагани, за да извеждат значението на публикувания текст.

Презентационните маркировъчни тагове са отпаднали в текущата версия на HTML и XHTML и са забранени в HTML5.

HTML 5[редактиране | edit source]

HTML 5 е най-новият проект на HTML стандарта, като той все още е в процес на разработка. Той въвежда много нови свойства. Някои от тях са <video>, <audio>, <canvas>. Основната цел на тези подобрения е да се улесни употребата на мултимедийни и графични елементи, без да е необходимо да се ползват външни апликации. Други нововъведения, като <section>, <article>, <header>, <nav>, целят да обогатят съдържанията на документите. Някои от досегашните елементи, като <a> и <menu>, са променени и стандартизирани.

HTML 5 е поддържан от по-стари браузъри, тъй като е направен така, че новите му функции просто да се игнорират от тях.

HTML 5 бързо набира популярност и проучванията показват, че през есента на 2011 година над 30 от 100-те водещи сайтове вече ползват HTML 5, а през лятото на 2013 година 153 от водещите 500 компании вече са имплементирали HTML 5 в сайтовете си.

Източници[редактиране | edit source]

1. W3Schools Online Web Tutorials

2. HTML in Wikipedia

Външни препратки[редактиране | edit source]