Примерен HTML код: Основи на уеб разработки

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

Зад кулисите на интернет

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

За да стигнете бързо до панела, натиснете горещия клавиш F12 на клавиатурата. Ако по някаква причина не работи, намерете необходимия елемент в менюто на браузъра и го изберете, като кликнете върху „Допълнителни инструменти“> „Инструменти за програмисти“.

Ще се отвори нов панел с няколко раздела, от които се нуждаем от първия - Елементи. Тук е описан целият HTML код на текущата страница.

Структура на HTML документа

С помощта на панела е възможно да се разбере на жив пример как е подреден обектът, за да видите неговите компоненти. Важно е да се разбере, че окончателният вид се осигурява не само от HTML маркирането, но и от стиловете, описани с помощта на CSS. В раздела Елементи можете да видите само основната структура.

Всички компоненти на страницата са подредени в йерархичен ред. Можете да видите вложени елементи с помощта на стрелки.

Например цялата HTML страница е опакована в блок с името HTML, в който са разположени контейнерите за глава и тяло. Ако ги разгънете, вътре ще намерите още няколко нива на елементи с различни имена.

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

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

Екранната снимка показва как се откроява навигационната лента:

На върха има и елемент DOCTYPE. Той също така се позовава на служебните данни.

Етикети и техните атрибути

HTML абревиатурата буквално означава "Hypertext Markup Language". Това означава, че всяка уеб страница е само текст, маркиран по определен начин. За неговото форматиране се използват специални елементи - тагове (дескриптори).

За да различите етикет от самия текст, той е заграден в ъглови скоби. Използвайки примера на HTML кода, можете да видите различни тагове: html, head, body, header, div. Те са от два вида:

• Затварящите маркери със съдържание имат две части и текст между тях. Например дескрипторът на заглавието може да се затваря. Втората част се различава от първата чрез присъствието на наклонена черта пред името на етикета.
• Незатварящите се тагове без съдържание се състоят само от една част. Пример за това е мета маркерът.

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

Важно е да следвате заповедта за закриване. В конзолата можете да видите как се намират внимателно вградените дръжки. Външният елемент не може да се затвори преди вътрешния.

Всеки таг може да има редица параметри (атрибути), които определят неговите свойства. В HTML един пример е дескрипторът на хипервръзка a и неговият href атрибут, който съдържа адреса на страницата, към която ще бъде направена връзката, когато се кликне върху връзката.

HTML за визуално обучение

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

Но без значение колко добър е учебникът, за успеха са необходими още два компонента:

• опит за независим набор;
• изучаване на HTML примери на други хора.

Конзолата на разработчика в популярните браузъри (освен Google Chrome, добрите панели могат да бъдат намерени в Mozilla Firefox и Internet Explorer) е най-добрият начин за проучване на уеб страници. Тя ви позволява да овладеете основните шаблони за оформление, да се научите да виждате окончателното представяне на кода и дори динамично да правите промени в него.