This translation is incomplete. Please help translate this article from English.

HTML (Hypertext Markup Language) е кодът, който се използва за структуриране и показване на уеб страница и нейното съдържание. Например:  съдържанието може да е структурирано от няколко параграфа, списък с водещи символи или да бъдат употребени изображения и таблици с данни. Както се разбира от заглавието, тази статия ще ви обясни основните аспекти на HTML и неговото приложение.

Какво всъщност е HTML?

HTML не е език за програмиране-той е маркиращ език, който се използва да укаже на вашия браузър как да изобрази страниците, които посещавате. В зависимост от намеренията на уеб-дизайнера, начинът на изобразяване може да е прост или изключително сложен. HTML представлява поредица от елементи, които използвате, за да заградите (или обвиете) различни части от съдържанието, като по този начин ги правите да изглеждат и действат по определен начин.  Заграждащите тагове могат да направят дума или изображение препратка към друго място, могат да  изписват думите с курсив, да правят буквите по-големи или по-малки и т.н. Ето примерен ред от съдържание:

My cat is very grumpy

Ако искаме редът да е изобразен отделно, можем да го означим като параграф като го заградим с таговете за елемента параграф (<p>) :

<p>My cat is very grumpy</p>

Анатомията на един HTML елемент

Нека изследваме елемента параграф малко по-задълбочено.

Основните части на нашият елемент са:

  1. Отварящият таг(opening tag): Състои се от името на елемента (в този случай, p) заградено от отварящи и затварящи ъглести скоби(angle brackets). Така се обозначава къде е началото на елемента или от къде започва да е валиден — в този случай показва начало на параграф.
  2. Затварящият таг(closing tag): Същият като отварящия таг, но допълнително включена наклонена черта прееди името на елемента. Това показва къде приключва елемента, в този случай—къде е краят на параграфа . Често срещана грешка при начинаещите е да се пропусне затварящия таг, като това може да доведе до странни резултати.
  3. Съдържанието (content): Това е съдържанието на елемента, което в случая е просто текст.
  4. Елементът: Съвкупността от отварящия таг, затварящия таг и съдържанието представлява елемент.

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

Атрибутите съдържат допълнителна информация за елемента, която не искате да се появява в изобразеното съдържание. По-горе, class е името на атрибута, а editor-note е стойността на атрибута. Атрибутът клас ви позволява да задавате на елемента идентификатор, чрез който да му подавате информация за оформление и разни други възможности.

Един атрибут винаги трябва да има:

  1. Интервал между него и името на елемента (или предишния атрибут, ако елементът вече има един или повече атрибута).
  2. Името на съответния атрибут, последвано от знака за равенство.
  3. Отварящи и затварящи кавички заобикалящи стойността на атрибута.        

Влагане на елементи

Възможно е да се постави елемент вътре в друг елемент  — това се нарича влагане (nesting). Ако искахме да  подчертаем, че нашата котка от предишния пример е много сърдита (VERY grumpy), бихме могли да обгърнем "very" в елемента <strong>. Това означава, че върху думата ще бъде акцентирано:

<p>My cat is <strong>very</strong> grumpy.</p>

Трябва да се уверите, че елементите ви са правилно вложени: в примера по-горе отваряме елемент <p> първо, след това елементът  <strong>, следователно първо трябва да затворим елемента <strong> , а след това <p>. Следващият пример е на неправилна употреба:

<p>My cat is <strong>very grumpy.</p></strong>

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

Празни елементи

Някой елементи нямат съдържаниеи са наричани празни елементи (empty elements). Вземете например елемента <img>, който вече имаме в нашия HTML:

<img src="images/firefox-icon.png" alt="My test image">

Той съдържа два атрибута, но няма затварящ таг </img> tagи съдържание в себе си. Това е защото елементът изображение не обгръща съдържание върху което да действа. Целта му е да прикачи снимка в HTML страницата на мястото, което заема.

Анатомия на един HTML документ

Това обхваща основните неща за индивидуалните HTML елементи, но от тях няма особена полза, когато са самостоятелно изполвани. Нека разгледаме как индивидуалните елемтни се комбинират, за да образуват цяла HTML страница. Нека разгледаме отново кода, който поставихме в нашият пример  index.html (с който първо работихме в статията Dealing with files):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Ето какво имаме:

  • <!DOCTYPE html> — декларацията за типа на документа. Едно време, когато HTML-ът беше млад (около 1991/2), типа на документа (doctype) трябваше да служи като препратка към набор от правила, които HTML страницата трябваше да следва, за да бъде считана за добър HTML—автоматична проверка за грешки и разни други полезни неща. В днешно време никой не се занимава вече с тях и те са просто един продукт от миналото, който трябва да бъде включван, за да работи всичко правилно. Това е всичко, което трябва да знаете за сега по този въпрос.
  • <html></html> — елементът <html>. Този елемент загражда пълното съдържание на цялата страница и понякога се нарича основен елемент.
  • <head></head> — елементът <head>. Той действа като контейнер за всички неща, които вклчвате в HTML страницата, които не са част от съдържанието, което визуализирате на посетителите на вашата страница. Като например: ключови думи и описание на страницата, което се появява при резултати от търсачки, CSS за форматиране на съдържанието, деклариране формат на кодиране и т.н.
  • <body></body> — елементът <body>. Той представлява цялото съдържание, което искате да покажете на потребителите, когато посетят вашата страница. Това могат да бъдат текст, изображения, видео клипове, игри, аудио.
  • <meta charset="utf-8"> — този елемент задава формата на кодиране, който трябва да използва вашият документ. utf-8 включва повечето знаци от всички известни  естетсвени езици. Би трябвало да може да се справи какъвт и текст да сложите в документа. Няма причина да не настроите тази опция, тя дори ще ви спести евентуални проблеми в по-късен етап.
  • <title></title> — това задава заглавието на вашия документ— заглавието, което се появява в таба на браузъра, в който е заредена страницата  и се използва за описание на страницата, когато я направили отметка за нея или сте я добавили към любимите си.

Изображения

Да се върнем отново на нашия елемент  <img>:

<img src="images/firefox-icon.png" alt="My test image">

Както споменахме, той вгражда изображение в нашата страница на позицията на която се намира. Изпълнява го чрез атрибута src (source-източник), който указва пътя до файла с изображението.

Освен това включихме и атрибута alt (alternative-алтернативен). Чрез него определяте описателния текст за потребителите, които не могат да видят изображението поради някоя от следните причини:

  1. Имат зрителни нарушения. Потребители със значително зрително увреждане често обикновено озползват програми, наречени екранни четци, които им изчитат алтернативния текст.
  2. Поради някаква неизправност изображението не може да бъде показано.  Опитайте да промените пътя в атрибута src, като го направите невалиден. След като запаметите и презаредите страницата, вместо изображението би трябвало да виждате следния текст:

Ключово за този атрибут е да бъде наистина описателен текст. Това което поставите в този атрибут трябва да предоставя достатъчно информация на потребителя, така че той да добие добра представа какво изразява изображението. В дадения пример "My test image" ("Моето изображение за тест") не е изобщо добро описание. Значително по-подходящ алтернативен текс за логото на Firefox би бил "The Firefox logo: a flaming fox surrounding the Earth"("Логото на Firefox: пламтяща лисица заграждаща Земята").

Опитайте  да измислите по-подходящ алтернативен текст за вашето изображение.

Бележка: Разберете повече за достъпността на MDN's Accessibility landing page.

Маркиране на текст

Този раздел ще обясни някои от основните HTML елементи, които ще изпозлвате за маркиране на текст.

Заглавия

Елементите за заглавия (heading) ви позволяват да укажете, че определени части от съдържанието са заглавия или подзаглавия. Както една книга има основно заглавие, заглавия на отделните глави и подзаглавия, така и един  HTML документ ги съдържа. HTML поддържа шест нива на заглавия  от <h1> до <h6>, като най-вероятно ще използвате само 3-4 от тях:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Опитайте да поставите подходящо заглавие на вашата страница, което да е над вашия <img> елемент.

Параграфи

Както по-горе стана ясно, елементите <p> са предназначени да съдържат отделните параграфи на вашия текст. Ще ги изплозвате често при маркирането на стандартно текстово съдържание :

<p>This is a single paragraph</p>

Добавете примерния текст (би трябвало да го имате от What should your website look like?) в един или повече параграфи след вашия <img> елемент.

Списъци

Голяма част от съдържанието в мрежата представлява списъци и HTML има специални елементи за тях. Списъците съдържат поне два елемента. Най-често срещаните типове са подредени и неподредени  списъци:

  1. Неподредени списъци (unordered lists) са тези, при които последователността на елементите му е без значение-  примерно количка с покупки от он-лайн магазин. Те се заграждат от елемента <ul>.
  2. Подредени списъци (оrdered lists) са тези, при които подредбата на елеемнтите има значение, както при инструкции в рецепта. Т се заграждат от елемента <ol>.

Всяка точка от списъка се поставя в елемента <li> (точка от списък-list item).

Примерно, ако искаме да превърнем част от следващия параграф в списък:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Бихме могли да модифицираме маркирането както следва:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Опитайте да добавите подреден или неподреден списък във вашата примерна страница.

Препратки

Препратките (links) са изключително важни — те са есенцията на Мрежата(WEB).  За да добавим препратка използваме този прост елемент — <a>, като a идва от "anchor"-котва . За да превърнете текст от параграфа в препратка, следвайте следните стъпки:

  1. Избере си текст. Ние ще изпозлваме "Mozilla Manifesto".
  2. Обградете текста с елемент <a> , ето така:
    <a>Mozilla Manifesto</a>
  3. Задайте на елемента <a> атрибут href( съкратено от hypertext reference), както в примера по-долу:
    <a href="">Mozilla Manifesto</a>
  4. Като стойност на този атрибут  поставете уеб-адреса към който искате да води препратката:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Може да получите неочаквани резултати, ако пропуснете  часста https:// или http:// .Тя се нарича протокол(protocol)и се поставя в началот на уеб-адреса. След като създадете препратката, изпозлвайте я, за да се уверите, че ви препраща точно където искате.

href може да изглежда странно наименование на атрибут. За по-лесно запомняне се подсещайте, че произлиза от  hypertext reference- хипертекст препратка.

Ако все още не сте, сега добавете и препратка към вашата страница.

Заключение

Ако сте следвали всички инструкции в тази статия, би трябвало да имате страница, който да изглежда като тази по-долу (можете да я видите и тук view it here):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Ако много се затрудните, винаги може да сравните работата си с нашия завършен примерен код-  finished example code в Github.

До тук само бегло споменахме някои основни идеи от HTML. За да научите повече, посетете HTML Learning topic.

Етикети за документа и сътрудници

 Допринесли за тази страница: petya5q, kberov
 Последно обновяване от: petya5q,