Home » 2014 » Октомври » 19 » Урок №3 Атрибути на елементите в HTML
10:11 PM
Урок №3 Атрибути на елементите в HTML

Да започнем със списък на параметрите, които всеки таг може да има. Те се делят на три групи – основни, езикови и клавишни.

Основни атрибути

Основните включват id, class, style и title. ID е атрибут, чиято стойност (ако е зададена – никой не ви задължава да задавате ID на всеки елемент) трябва да бъде уникална на дадената страница. Този атрибут се използва за да определим точно даден елемент, на който в последствие чрез CSS бихме могли да зададем определен стил, или пък който да селектираме посредством JavaScript. CLASS е атрибут, който отново можем да използваме, за да определим елементи, на които лесно да добавим стил през CSS, или които бихме могли лесно да селектираме с JS в HTML5 (или пък в по-стари версии на HTML, но ако използваме някаква JS библиотека, като например jQuery, която да свърши трудната работа вместо нас). Класовете, за разлика от ID-тата, позволяват да се използват много пъти на една страница.

  • Title атрибута се използва предимно за достъпност на елементите (използва се от роботи или програми, които четат HTML кода), като единственото, което ще забележите на екрана е, че ако задържите мишката над елемент с title атрибут, то след една-две секунди ще се появи един tooltip, съдържащ текста на title атрибута.
  • Style е атрибут, който аз лично ви съветвам да НЕ използвате. Сам по себе си този атрибут позволява да декларирате CSS стилове за даден елемент в HTML-а. Най-доброто, което обаче можем да направим в реален проект е, да отделяме структурата и информацияна на страницата ни в HTML-а, а външният вид да е деклариран чрез CSS в отделен файл. Това позволява много по-лесно поддържане. Style атрибута може да се използва само в някакви малки примерни/демо страници на дребна функционалност, където се държи на удобството лесно да се проследи кои стилове за кои елементи се отнасят, без да е нужно да ходим напред-назад по различни файлове.

Езикови атрибути

Езиковите атрибути са dir и lang (в xHTML lang е xml:lang).

  • DIR определя посоката на четене на текста – от ляво-надясно или от дясно-наляво (арабски език). Пиша HTML странички от 6 години и едва преди месец ми се наложи да направя една страница, в която имаше и арабски, че ми се наложи да използвам този атрибут – честно казано до тогава дори не бях убеден дали е от тези атрибути, които могат да се задават на всички тагове или е само за html елемента. Този атрибут е особен с това, че има само две валидни стойности – ltr (left-to-right – от ляво-надясно) и rtl (right-to-left – от дясно-наляво). Всяка друга стойност просто ще се игнорира от браузъра и ще направи кода ви невалиден.
  • Другият езиков атрибут – lang – също има няколко (но повече) предопределени стойности. Той трябва да бъде зададен като кода на езика, който се съдържа в елемента. За български това е bg, за английски е en и т.н. Смисълът от този таг е подпомагане на търсачки, роботи и програми, които четат кода, биха могли да се използват за по-специални стилове, някои JS функционалности.

Най-общо казано е добре да зададете двата езикови атрибута още на <html> тага, с което те автоматично се унаследяват от всички вътрешни елементи. Стойността на dir по подразбиране е посоката, в която четем ние, така това е почти излишно да се задава, но lang е добър параметър, който показва, че страницата ни е предназначена за определен географски регион, пък и на Google Chrome (примерно) ще му е по-лесно да определи езика на страницата и ако е на различен от основния, на който сме задали да работи браузъра, да ни предложи да я преведе автоматично (мисля, че останалите браузъри за момента нямат вградена подобна функционалност, затова давам пример с Chrome).

Категория: HTML | Преглеждания: 547 | Довавено от: Kaloqn | Оценка: 5.0 | Гласували :1 | Tags: atribyti, elementite, урок, yrok, на, елементите, Html, Атрибути, №3, Na

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
Всички коментари: 0
Log in:
avatar
За нас
Полезно
Помощни секции
Социални Мрежи

PC-Tools.inc | Copyright © 2014-2015
DMCA.com Protection Status Mozilla Firefox+4.0 Chrome+13.2 Opera+5.6 IE+7.9 Safari+2.0