Въведение в HTML5

Какво означава HTML и какви са новостите в HTML5?

html5_logo_new

За да научим кои са новостите в новата версия на HTML5, първо трябва да се запознаем с неговия предшественик HTML4:

За тези от вас, които вече са наясно и имат познания по HTML4 и искате да прочетете за новостите покрай HTML5, кликнете ТУК.

HTML (Hyper Text Markup Language)

Език за маркиране на хипер текст – произнасяно най-често като „Ейч Ти Ем Ел“, е основният маркиращ език за описание и дизайн на уеб страници. HTML е стандарт в Интернет, а правилата се определят от Международната организация по стандартизация, W3C. Текущата версия на стандарта е HTML 4.01. Версия 5 на HTML е в процес на разработка към февруари 2012 г.

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

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

HTML файловете обикновено имат разширение „.html“, но ако ги запишете като „.htm“, това също ще работи.

HTML може да се пише на всеки един безплатен софтуер в Интернет като например: Notepad, Notepad++, EditPlus, Sublime и т.н., като съществува и алтернативен метод за писане на HTML – т.нар. WYSIWYG editors (What you see is what you get). Това са графични редактори, които ви позволяват да си избирате елементите, които искате да присъстват във вашата уеб страница.

Изглед на основните съставни елементи на HTML

html_basic_code

HTML елементи

HTML елементи се наричат комбинация от тагове плюс техните атрибути.

Всеки един елемент в HTML има свои собствени атрибути (характеристики). Например тагът: <a>, което означава на английски „anchor“, се използва за хиперлинкове (връзки, които водят към други страници или елементи от вашата страница). Като пример за атрибути на на <а> можем да кажем: <a href=“http://google.com“ target=“_blank“> go to Google</a>. В този пример target=“_blank“ е атрибут на <а> и се използва, за да укажем метод на връзката да се отвори в нов подпрозорец или т.нар. таб на браузъра.

Съществуват два вида тагове – отварящи „<head>“ и затварящи „</head>„. Забележете дясната наклонена черта в затварящият таг. Това означава край на отварящия таг.

Тагове в HTML

  • <head>

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

  • <body>

Съдържа цялата видима част от потребителя, т.е. всичко видимо в нашия уеб браузър – Headings, text, hyperlinks, images, тextboxes, sliders, buttons… и т.н.

  • <!doctype html>

Валидаторът на уеб страницата. В  него се посочва с коя версия на HTML е писана тя. Най-често срещания запис е следният:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
  • <img src=“logo.gif“ alt=“logo“ />

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

  • <h1>Heading 1</h1>
    <h2>Sub heading 2</h2>
    <h3>Sub heading 3</h3>
    ……………………………………….
    <h6>…… </h6>

Заглавни тагове (h1 – най-големи по размер, h6 – най-малки по размер).

  • <p>This is my first paragraph</p>
    <p>This is my second paragraph</p>

„p“ таг, чрез който записваме параграфи (p).

  • <div style=“background: skyblue;“>This is a div</div> 

„div“ таг, който се използва за обхващане на един или повече всякакъв вид HTML елементи.

  • <span style=“color: gray“>This is a span</span>

„span“ таг, който се използва за стилизиране на конкретна част от текста, без да добавя нов ред.

  • Най-често използваните в 90% от случаите HTML елементи

html_elements_bl

  • <ol type=“1″>
    <li>Apple</li>
    <li>Orange</li>
    <li>Grapefruit</li>
    </ol>

Чрез „<ol>“ (ordered list) изброяваме с текстово обозначение списъците, които искаме.

ordered_list

  • <ul type=“disc“>
    <li>Apple</li>
    <li>Orange</li>
    <li>Grapefruit</li>
    </ul>

Чрез „<ul>“(unordered list) изброяваме с графично обозначение списъците, които искаме.

unordered_list

  • <dl>
    <dt>HTML</dt>
    <dd>A markup language …</dd>
    <dt>CSS</dt>
    <dd>Language used to …</dd>
    </dl>

Чрез „<dl>“(definition list) създаваме списъци с ляво и дясно подразделение.

Block elements в HTML

  •  <div>, <p>, <h1>, <ul>

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

Inline elements в HTML

  • <span>, <a>, <em>

Тези елементи се вграждат в самия текст, който добавяме. Често се използват, когато искаме да стилизираме конкретна част от текста.

Семантични структурни тагове в HTML4 и HTML5 (сравнение)

semantic_html

html4_ids

В HTML4 се използват „id“-та за указване на отделната секция от структурата на уеб страницата, докато при HTML5 това вече става с помощта на специализирани семантични тагове, които представляват следния код:

html5_tags

HTML5

HTML 5 е последният голям проект от HTML стандарта като към февруари 2012 г. все още е в процес на разработка. Както своите предшественици HTML 4.01 и XHTML 1.1, HTML5 е стандарт за създаване и предоставяне на съдържание в уеб пространството (World Wide Web).

В момента W3C (World Wide Web Consortium) и WHATWG (Web Hypertext Application Technology Working Group) работят взаимно върху HTML5.

HTML5 е смесица от много функции въведени от различни спецификации, заедно с тези, въведени от софтуерни продукти, като уеб браузърите. По-специално, HTML5 добавя много нови функции относно синтаксиса на писане. Те включват <video> и <canvas> елементи, също така и интеграция на SVG съдържание, което е създадено да подобрява работата с мултимедийно и графично съдържание в уеб пространството без плъгини и техните APIs. Други нови елементи, като <section>, <article>, <header> и <nav> са създадени да подобрят семантичното богатство на документите.

 

Напред към: HTML5 – Проекти

Вашият коментар