HTML: Разлика между версии

от Уикипедия, свободната енциклопедия
Изтрито е съдържание Добавено е съдържание
м без интервал преди запетая
мРедакция без резюме
Ред 16: Ред 16:
Първото публично достъпно описание на HTML е документ, наречен „HTML tags“, първо посочен в [[Интернет]] от [[Тим Бърнърс-Лий]] в края на 1991 г. Той описва 18 елемента, включващи начална, сравнително опростена конструкция на HTML.
Първото публично достъпно описание на HTML е документ, наречен „HTML tags“, първо посочен в [[Интернет]] от [[Тим Бърнърс-Лий]] в края на 1991 г. Той описва 18 елемента, включващи начална, сравнително опростена конструкция на HTML.


HTML е език за маркиране, който [[уеббраузър]]ите използват за да интерпретират и създават текст, изображения и други материали. Оригиналните характеристики за HTML са дефинирани в браузъра, като могат да бъдат променяни или подобрявани с допълнителна употреба на [[CSS]] (Cascading Style Sheets). Голяма част от текстовите елементи датират от 1988 ISO technical report TR 9537 ''Techniques for using SGML,'' които представляват характеристиките ''за'' тогавъшните форматиращи езици, като такъв използван в [[TYPSET and RUNOFF|RUNOFF]] програмата за текстообработка от 1960-те, създадена за CTSS(Compatible Time-Sharing System) операционна система. Въпреки че, концепцията на SGML е базирана на елементи(вложени анотирани обхвати с атрибути) и по-малко на принтиращи ефекти със структурно разделение, CSS допълва HTML в тази насока.
HTML е език за маркиране, който [[уеббраузър]]ите използват за да интерпретират и създават текст, изображения и други материали. Оригиналните характеристики за HTML са дефинирани в браузъра, като могат да бъдат променяни или подобрявани с допълнителна употреба на [[CSS]] (Cascading Style Sheets). Голяма част от текстовите елементи датират от 1988 ISO technical report TR 9537 ''Techniques for using SGML,'' които представляват характеристиките ''за'' тогавъшните форматиращи езици, като такъв използван в [[TYPSET and RUNOFF|RUNOFF]] програмата за текстообработка от 1960-те, създадена за CTSS(Compatible Time-Sharing System) операционна система. Въпреки че, концепцията на SGML е базирана на елементи (вложени анотирани обхвати с атрибути) и по-малко на принтиращи ефекти със структурно разделение, CSS допълва HTML в тази насока.


[[Internet Engineering Task Force]] (IETF) официално обявяват HTML като SGML базиран език през 1993 г. Като публикували първия план за HTML спецификация: [https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt „Hypertext Markup Language (HTML)“ Internet-Draft] от Тим Бърнърс – Лий и Daniel Connolly който включвал и SGML [[Document Type Definition]] за да дефинира граматиката.<ref>{{cite web|url=http://lists.w3.org/Archives/Public/www-talk/1991NovDec/0020.html|title=Re: SGML/HTML docs, X Browser (archived www-talk mailing list post)|author=Tim Berners-Lee|date=December 9, 1991|accessdate=June 16, 2007|quote=SGML is very general. HTML is a specific application of the SGML basic syntax applied to hypertext documents with simple structure.}}</ref> По същият начин Dave Raggett създава Internet-Draft, „HTML+ (Hypertext Markup Format)“, в края на 1993, предлагайки стандарти за таблици и форми за попълване.<ref name="html+">{{cite web|url=https://datatracker.ietf.org/public/idindex.cgi?command=id_detail&id=789 |title=HTML+ Internet-Draft&nbsp;— Abstract |quote=Browser writers are experimenting with extensions to HTML and it is now appropriate to draw these ideas together into a revised document format. The new format is designed to allow a gradual roll over from HTML, adding features like tables, captioned figures and fill-out forms for querying remote databases or mailing questionnaires. |deadurl=yes |archiveurl=https://web.archive.org/20121221062856/https://datatracker.ietf.org/public/idindex.cgi?command=id_detail&id=789 |archivedate=21 December 2012 }}</ref>
[[Internet Engineering Task Force]] (IETF) официално обявяват HTML като SGML базиран език през 1993 г. Като публикували първия план за HTML спецификация: [https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt „Hypertext Markup Language (HTML)“ Internet-Draft] от Тим Бърнърс – Лий и Daniel Connolly който включвал и SGML [[Document Type Definition]] за да дефинира граматиката.<ref>{{cite web|url=http://lists.w3.org/Archives/Public/www-talk/1991NovDec/0020.html|title=Re: SGML/HTML docs, X Browser (archived www-talk mailing list post)|author=Tim Berners-Lee|date=December 9, 1991|accessdate=June 16, 2007|quote=SGML is very general. HTML is a specific application of the SGML basic syntax applied to hypertext documents with simple structure.}}</ref> По същият начин Dave Raggett създава Internet-Draft, „HTML+ (Hypertext Markup Format)“, в края на 1993, предлагайки стандарти за таблици и форми за попълване.<ref name="html+">{{cite web|url=https://datatracker.ietf.org/public/idindex.cgi?command=id_detail&id=789 |title=HTML+ Internet-Draft – Abstract |quote=Browser writers are experimenting with extensions to HTML and it is now appropriate to draw these ideas together into a revised document format. The new format is designed to allow a gradual roll over from HTML, adding features like tables, captioned figures and fill-out forms for querying remote databases or mailing questionnaires. |deadurl=yes |archiveurl=https://web.archive.org/20121221062856/https://datatracker.ietf.org/public/idindex.cgi?command=id_detail&id=789 |archivedate=21 December 2012 }}</ref>


След като изтича валидността на HTML и HTML+ планове. През 1994 IETF създава работеща група по HTML която през 1995 завършва „HTML 2.0“(първата спецификация за HTML която трябва да се счита за постоянна и бъдещите спецификации да я надграждат).
След като изтича валидността на HTML и HTML+ планове. През 1994 IETF създава работеща група по HTML която през 1995 завършва „HTML 2.0“ (първата спецификация за HTML която трябва да се счита за постоянна и бъдещите спецификации да я надграждат).


От 1996 спецификациите се поддържат от [[World Wide Web Consortium]] (W3C).<ref name="raggett">{{cite book|first=Dave|last=Raggett|title=Raggett on HTML 4|year=1998|url=http://www.w3.org/People/Raggett/book4/ch02.html|accessdate=July 9, 2007}}</ref> През 2000, HTML се превръща в световен стандарт ([[International Organization for Standardization|ISO]]/[[International Electrotechnical Commission|IEC]]15445:2000). HTML 4.01 е обявена през 1999. Разработването на HTML5 започва през 2004 от [[Web Hypertext Application Technology Working Group]] (WHATWG). По-късно през 2008 работят съвместно W3C и завършват стандарта на 28 October 2014.<ref>{{cite web|url= http://www.w3.org/2014/10/html5-rec.html.en |title=HTML5 – Hypertext Markup Language – 5.0 |publisher=Internet Engineering Task Force |date=28 October 2014 |accessdate=25 November 2014 |quote=This document recommends HTML 5.0 after completion.}}</ref>
От 1996 спецификациите се поддържат от [[World Wide Web Consortium]] (W3C).<ref name="raggett">{{cite book|first=Dave|last=Raggett|title=Raggett on HTML 4|year=1998|url=http://www.w3.org/People/Raggett/book4/ch02.html|accessdate=July 9, 2007}}</ref> През 2000, HTML се превръща в световен стандарт ([[International Organization for Standardization|ISO]]/[[International Electrotechnical Commission|IEC]]15445:2000). HTML 4.01 е обявена през 1999. Разработването на HTML5 започва през 2004 от [[Web Hypertext Application Technology Working Group]] (WHATWG). По-късно през 2008 работят съвместно W3C и завършват стандарта на 28 October 2014.<ref>{{cite web|url= http://www.w3.org/2014/10/html5-rec.html.en |title=HTML5 – Hypertext Markup Language – 5.0 |publisher=Internet Engineering Task Force |date=28 October 2014 |accessdate=25 November 2014 |quote=This document recommends HTML 5.0 after completion.}}</ref>
Ред 89: Ред 89:
=== Основни елементи ===
=== Основни елементи ===
==== <html> елемент ====
==== <html> елемент ====
Указва на браузъра, че това е HTML документ. Отбелязва началото и края на документа и съдържа всички други негови елементи(с изключение на <!DOCTYPE> елемента).
Указва на браузъра, че това е HTML документ. Отбелязва началото и края на документа и съдържа всички други негови елементи (с изключение на <!DOCTYPE> елемента).


<source lang="html4strict">
<source lang="html4strict">
Ред 482: Ред 482:
:- Авторът може да използва атрибутът style за да задава презентационни свойства на определен елемент. Прието е за по – добра практика да се използва id или class атрибутите на елемента за избиране на елемент от каскадни стилове (виж [[CSS]]).
:- Авторът може да използва атрибутът style за да задава презентационни свойства на определен елемент. Прието е за по – добра практика да се използва id или class атрибутите на елемента за избиране на елемент от каскадни стилове (виж [[CSS]]).
:- title атрибут се използва за прикачване на подтекстово обяснение на елемент. В повечето [[браузър]]и този атрибут се показва на екрана като съвет.
:- title атрибут се използва за прикачване на подтекстово обяснение на елемент. В повечето [[браузър]]и този атрибут се показва на екрана като съвет.
:- lang атритутът идентифицира естественият [[език]] на съдържанието в елемента, който може да бъде различен от този в останалата част на документа.
:- lang атритутът идентифицира естествения [[Курсор (информатика)|език]] на съдържанието в елемента, който може да бъде различен от този в останалата част на документа.
:- Атрибутът abbr може да се използва за да се демонстират показаните по –горе атрибути :
:- Атрибутът abbr може да се използва за да се демонстират показаните по –горе атрибути :
<source lang="html4strict">
<source lang="html4strict">
<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr>
<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr>
</source>
</source>
:- Примерът, на повечето браузъри насочващ [[курсор]]а към [[абревиатура]]та, трябва да покаже заглавието „[[Hypertext Markup Language]]“
:- Примерът, на повечето браузъри насочващ [[Курсор (информатика)|курсор]]а към [[абревиатура]]та, трябва да покаже заглавието „[[Hypertext Markup Language]]“
:- Повечето елементи приемат и атрибут dir, пряко свързан с посоката на изписване на думите в езиците, като например „rtl“ за right-to-left текст, като [[Арабски]], [[Персийски]] и други.
:- Повечето елементи приемат и атрибут dir, пряко свързан с посоката на изписване на думите в езиците, като например „rtl“ за right-to-left текст, като [[Арабски]], [[Персийски]] и други.



Версия от 16:02, 15 януари 2017

HyperText Markup Language

HTML (съкращение от термина Шаблон:Lang-en, произнасяно най-често като „ейч-ти-ем-ел“, в превод „език за маркиране на хипертекст“) е основният маркиращ език за описание и дизайн на уеб страници. HTML е стандарт в Интернет, а правилата се определят от международния консорциум W3C. Текущата версия на стандарта е HTML 5.0 (от 28 октомври 2014 г.)

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

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

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

HTML може да прикрепя скриптове писани на езици като JavaScript, което променя поведението на уеб страницата. Може да се използва Cascading Style Sheets (CSS), който определя изгледа и оформлението на текста и други материали. World Wide Web Consortium (W3C) поддържа и двете CSS и HTML и насърчава използването на CSS в HTML страниците от 1997. Това допринася за разделяне съдържанието и структурата на уеб страниците от тяхното визуално представяне.

История

Тим Бърнърс-Лий

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

HTML е език за маркиране, който уеббраузърите използват за да интерпретират и създават текст, изображения и други материали. Оригиналните характеристики за HTML са дефинирани в браузъра, като могат да бъдат променяни или подобрявани с допълнителна употреба на CSS (Cascading Style Sheets). Голяма част от текстовите елементи датират от 1988 ISO technical report TR 9537 Techniques for using SGML, които представляват характеристиките за тогавъшните форматиращи езици, като такъв използван в RUNOFF програмата за текстообработка от 1960-те, създадена за CTSS(Compatible Time-Sharing System) операционна система. Въпреки че, концепцията на SGML е базирана на елементи (вложени анотирани обхвати с атрибути) и по-малко на принтиращи ефекти със структурно разделение, CSS допълва HTML в тази насока.

Internet Engineering Task Force (IETF) официално обявяват HTML като SGML базиран език през 1993 г. Като публикували първия план за HTML спецификация: „Hypertext Markup Language (HTML)“ Internet-Draft от Тим Бърнърс – Лий и Daniel Connolly който включвал и SGML Document Type Definition за да дефинира граматиката.[1] По същият начин Dave Raggett създава Internet-Draft, „HTML+ (Hypertext Markup Format)“, в края на 1993, предлагайки стандарти за таблици и форми за попълване.[2]

След като изтича валидността на HTML и HTML+ планове. През 1994 IETF създава работеща група по HTML която през 1995 завършва „HTML 2.0“ (първата спецификация за HTML която трябва да се счита за постоянна и бъдещите спецификации да я надграждат).

От 1996 спецификациите се поддържат от World Wide Web Consortium (W3C).[3] През 2000, HTML се превръща в световен стандарт (ISO/IEC15445:2000). HTML 4.01 е обявена през 1999. Разработването на HTML5 започва през 2004 от Web Hypertext Application Technology Working Group (WHATWG). По-късно през 2008 работят съвместно W3C и завършват стандарта на 28 October 2014.[4]

Версии на HTML

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 г.

октомври 2014 – HTML5 е публикувана като препоръка на W3C.

Създаване на HTML страници

Създаването на 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 документ

HTML таговете са най-малката съставна част на един HTML документ.

Те, заедно със своите атрибути (като цвят, размер и т.н), съставят т.нар. HTML елементи.

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

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

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

Основни елементи

<html> елемент

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

<html>
...
</html>

<head> елемент

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

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

<body> елемент

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

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

<!DOCTYPE> елемент

Декларира се първи, още преди <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 тагове

<b> таг (препоръчва се да използвате css font-weight: bold)

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

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

<i> таг (по-добрия вариант е да се използва CSS font-style: italic )

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

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

<u> таг (препоръчва се да не го използвате – използвайте CSS text-decoration: underline)

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

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

<strong> таг

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

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

<sub> таг

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

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

<sup> таг

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

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

<del> таг

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

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

<br> таг

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

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

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

<blockquote> таг

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

<blockquote cite="http://www.worldwildlife.org/who/index.html">
Когато често се срещаме с дадени хора, те стават част от живота ни.

И като станат част от живота ни, започват да се опитват да го променят.

И се сърдят, когато не правим това, което те изискват от нас.

Понеже всеки си мисли, че знае как другият трябва да живее живота си,
но всъщност никой не знае как трябва да живее своя собствен.
</blockquote>

Когато често се срещаме с дадени хора, те стават част от живота ни.

И като станат част от живота ни, започват да се опитват да го променят.

И се сърдят, когато не правим това, което те изискват от нас.

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

<a> таг

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

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

<img> таг

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

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

Заглавия и Параграфи

Заглавия

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

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

Параграфи

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

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

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

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

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

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

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

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

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

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

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

Списъци

Подредени списъци

Подредените списъци започват с тага <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. Три


Неподредени списъци

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

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


Описателни списъци

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

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


Таблици

Дефинират се с тага <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


Атрибути

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

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

- Атрибутът 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 текст, като Арабски, Персийски и други.

Семантичен уеб

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

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

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

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

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

HTML 5

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 в сайтовете си.

HTML редактори

Текстови редактори

Текстовите (сорсови) редактори, предназначени за употреба с HTML обикновено предоставят възможност за селектиране на синтаксиса. Шаблони, работни ленти и клавиатурни преки пътища често пъти могат да включват стандартни HTML елементи и структури.

Текстовите редактори обикновено включват или вградени функции, или интегрирани външни инструменти за цели като сорс контрол и контрол на версията, проверка на връзки, проверка и валидация на кодове, почистване и форматиране на кодове, ъплоуд чрез FTP или WebDav и проектово структуриране.

Текстовите редактори изискват потребителски познания в областта на HTML и други уеб технологии, които дизайнерът би искал да използва, като CSS, Java и сървърно-ориентирани езици. Тези редактори се наричат също така Прости HTML редакториA Simple HTML Editor (ASHE)).[5]

Някои обикновени HTML редактори като Windows Notepad могат да съхраняват HTML файлове като използват разширения като .html .htm .css и т.н.

Обектни редактори

Някои редактори позволяват алтернативно редактиране на сорсовия текст по по-визуално ориентирани способи отколкото обикновеното цветно селектиране с мишката, но не в WYSIWYG режим. Някои WYSIWYG редактори включват опцията да използват палитрени прозорци които позовляват да се редактират текстовите параметри на селектираните обекти. Тези палитри позволяват или редактирането на параметри в полета за всеки параметър, или текстови прозорци, чрез които се редактират пълни групи текст за селектирания обект. Те могат да включват механизми, които предоставят и селектират различни опции при редактирането на параметри. ADOBE Go Live разполага с контурен редактор, чрез който се създават разширяеми и падащи HTML обекти и свойства.

Amaya 10 HTML редактор

WYSIWYG HTML редактори

WYSIWYG HTML редакторите предоставят интерфейс за редакция който показва страницата такава, каквато ще бъде изобразена директно в браузъра. Тези едитори могат да бъдат както самостоятелни програми, като Adobe Dreamweaver или Microsoft Frontpage(вече неподдържана), така и под формата на добавки за браузъра, позволяващи директно редактиране. Стиловият енджин трябва да бъде достатъчно развит, за да позволява на разработчиците да пишат, пействат, трият и манипулират съдържанието. Целта е такава, че по всяко време на редактирането видимият резултат трябва да представлява това, което по-късно ще се вижда в стандартния уеб браузър.

WYSIWYM (каквото виждаш е каквото имаш предвид) е алтернативна парадигма на WYSIWYG редакторите. Вместо да се фокусират върху формата или презентацията на документа, тя запазва желаното значение на всеки елемент. Например хедърите на всяка страница, разделите, параграфите и т.н са наречени по същия начин в редактиращата програма и представени по съответния начин в браузъра.

Валиден HTML синтаксис

HTML е структуриран език с маркиращи елементи. Той притежава набор от правила, които трябва да бъдат спазвани при писане на документи, ако желаем той да издържи на W3C стандартите за World_Wide_Web. Тази практика спомага сайтовете да са достъпни за всички типове и модели компютри, както и за безжичните устройства като смартфони и персоналните дигитални асистенти (PDA). Последните са особено рискова група, заради техните ограничени скорости за предаване на информация и размер на екрани. За нещастие, повечето от HTML документите в интернет пространството не отговарят на зададените W3C стандарти. При проучване проведено през 2011 г. върху 350 от най-популярните уеб сайтове (оценени по индекса Alexa), цели 94% от тях се провалят на валидационния тест, или не изпращат правилна информация за Енкодинг на символите.[6] Дори и частта от тези, които са синтактично коректни, се оказват неефективни, поради множество повторения, или се уповават на правила, които са отхвърлени от години.

Текущите препоръки на W3C за употреба на CSS в HTML първоначално се формализират от консорциума през 1996 г.[7] и до ден днешен постоянно подлежат на изчистване и прецизиране. Вижте CSS, XHTML, текущите препоръки на W3C за CSS и текущите препоръки на W3C за HTML.

Тези насоки подчертават разделението на семантичното съдържание (HTML или XHTML) от дефинициите как да изглежда то (CSS). Предимството на което е, че намаля драстично повторенията в сайта цялостно. Понеже информацията за стиловете се изпраща веднъж, а не за страница по страница, а в още по-лошите случаи за всеки HTML елемент. От тогава насам WYSIWSYG редакторите се опитват, с различна степен на успех, да приложат тази разделителна идея, без да трябва да разкриват подробно същината ѝ на крайните си потребители.

Независимо от това дали страницата е създадена или редактирана на ръка или от WYSIWYG програма, за да бъде успешна върху възможно най-голям брой четци и визуализатори, като в същото време запазва същината на 'worldwide' от уеб мрежата, първо и най-важно, документа трябва да съдържа правилни маркиращи елементи.[8] Не трябва да се счита за годен за World Wide Web, докато неговия HTML и CSS синтаксис не преминат успешно валидатор. За целта трябва, да се ползват официалните услуги на W3C (W3C HTML валидатор и W3C CSS валидатор) или алтернативи, на които може да се разчита.[8]

Достъпността на уеб страниците за хора със физически, зрителни или други увреждания, не само е добра идея, имайки в предвид важността на мрежата в модерното общество, но също така се изисква от законодателните органи. В Щатите „Акта за американци с увреждания“ и във Великобритания „Акта против дискриминация на хората с увреждания“ налагат изисквания върху публичните сайтове. В много други страни, подобни закони вече съществуват или са в процес на влизане в сила.[8]. Създаването на достъпни уеб страници е по-сложно от това те да бъдат валидни. Валидността им със сигурност остава като предусловие, но има множество други фактори, които трябва да се разгледат.[9] Добрия уеб дизайн, независимо дали е подпомаган с WYSIWYG средство за разработка или не, трябва да съумее да ги спази.

Качеството на документ съдържащ HTML, най-пряко зависи от уменията на човека, който го създава и доста по-косвено на редактора, който ползва. Основно познание на HTML, CSS, скриптови езици и познание на актуалните препоръки на W3C за предходните, биха помогнали на един дизайнер далеч повече от, който и да е, WYSIWYG или подобен инструмент.[10]

Трудности при постигане на WYSIWYG

Почти всеки HTML документ ще има несъответстващ изглед върху различните устройства и компютри поради следните причини:

Различните браузъри и приложения ще изрисуват един и същ маркиращ текст по различен начин.
Една и съща страница може да изглежда почти по еднакъв начин на Internet Explorer и Firefox при екрани с висока резолюция, но да изглежда по радикално различен начин на напълно валидния Lynx браузър, който визуализира само текст. Документа ще бъде изрисуван по друг начин и на PDA, Смарт_телевизор и мобилен телефон. Достъпността, осигурена от говорещи или Брайлови браузъри или чрез екранни четци съвместими с обикновени браузъри, ще създаде допълнителни изисквания върху други аспекти на основополагащия HTML. Отпечатването на страницата, през различни браузъри и различни принтери върху различни големини на печатната хартия в различните региони на света, поставя други изисквания. При правилна употреба на HTML и CSS вече няма нужда да се предоставят линкове за 'Печатна версия на страницата', в следствие от които ни се налага да поддържаме две версии на целия сайт.[11]
Браузърите и системите за компютърна графика имат набор от потребителски настройки
Разделителната способност, размера на шрифта, цветове, контраст и прочее – всички те могат да бъдат променени по желание на потребителя и много модерни браузъри позволяват още по-богат контрол над изгледа на страниците.[12] Всичко което авторът може да направи, е да предложи препоръка за настройките над изгледа.
Уеб браузърите, както всяка друга компютърна програма, имат бъгове
Освен бъговете, не всички съответстват с текущите стандарти. Безнадеждно е, да се опитва, да се създаде уеб страница заобикаляща проблемите във всички често срещани браузъри. В такъв случай всеки път, когато излезе нова версия на браузър, значителна част от световната мрежа следва да бъде пренаписана, за да удовлетвори новите бъгове и поправки. Затова е препоръчително, да се пише по установения стандарт, и да се избягват абсолютните новости в уеб технологиите, поне докато не е минало достатъчно време, за да се наложат.[13] Например, никой не може да спори, че CSS все още е новост, защото е достатъчно разпространен и поддържан от браузърите.[14] Това, че WYSIWYG редакторите още не са достигнали зрялост с тази технология, не е показател.[15]
Единичен визуален стил може да има различни семантични значения
Семантичното значение, извлечено от основополагащата структура на HTML документа, е изключително важно за търсачките и за набор от средствата за достъпност. По принцип, можем да извлечем от контекста или от опит дали един почернен текст представлява заглавие или ударение. Доста по-трудно е обаче, да предадем тази разлика когато ползваме WYSIWIG редактор, уповавайки се само на финалния изглед.

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

Източници

  1. Tim Berners-Lee. Re: SGML/HTML docs, X Browser (archived www-talk mailing list post) // December 9, 1991. Посетен на June 16, 2007. SGML is very general. HTML is a specific application of the SGML basic syntax applied to hypertext documents with simple structure.
  2. HTML+ Internet-Draft – Abstract // Архивиран от оригинала на 21 December 2012. Browser writers are experimenting with extensions to HTML and it is now appropriate to draw these ideas together into a revised document format. The new format is designed to allow a gradual roll over from HTML, adding features like tables, captioned figures and fill-out forms for querying remote databases or mailing questionnaires.
  3. Raggett, Dave. Raggett on HTML 4. 1998. Посетен на July 9, 2007.
  4. HTML5 – Hypertext Markup Language – 5.0 // Internet Engineering Task Force, 28 October 2014. Посетен на 25 November 2014. This document recommends HTML 5.0 after completion.
  5. Mintert, Stefan. Weberknechte — WWW Dokumente komfortabel erstellen // iX (magazine) (8). Heinz Heise, 1995. Посетен на 21 February 2011.
  6. Responsive Web Design, Domain Registration, Web Hosting // Sikoswebconsulting.com. Посетен на 2013-10-23.
  7. Cascading Style Sheets, level 1 // W3.org. Посетен на 2013-10-23.
  8. а б в Harold, Elliotte Rusty. Refactoring HTML. Boston, Addison Wesley, 2008. ISBN 978-0-321-50363-3.
  9. Web Content Accessibility Guidelines (WCAG) 2.0 // W3.org, 2008. Посетен на 2013-10-23.
  10. Dave Raggett's Introduction to HTML // W3.org, 2005-05-24. Посетен на 2013-10-23.
  11. Media types // W3.org. Посетен на 2013-10-23.
  12. Mozilla Support // Mozilla.org. Посетен на 2013-10-23.
  13. An essay on W3C's design principles // W3.org. Посетен на 2013-10-23.
  14. Cascading Style Sheets // W3.org. Посетен на 2013-10-23.
  15. Cascading Style Sheets // W3.org. Посетен на 2013-10-23.

Външни препратки

  Тази страница частично или изцяло представлява превод на страницата HTML в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите. ​

ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.​