HTML атрибути

HTML атрибути

  • HTML атрибути

Атрибутите са използвани да подсилят таговете. Това, което имам напредвид е, че когато web бразуъра интерпретира тага, той също така търси набор от атрибути и чак тогава показва елемента (тагове+атрибути) цялостно. В някои случаи може да желате да смените цвета на фона на body елемента или да промените широчината на таблицат.Тези и още много други неща могат да се осъществят с атрибутите.

  • CSS стилове

 

За дефинирането на цвета на фона, връзките и пр. трябва да се използва CSS (Cascading Style Sheets).

В XHTML 1.0 много от атрибутите на тагове, използвани в HTML 4.01 са отхвърлени и вместо тях се използват съответните им еквиваленти в CSS-файл. След това чрез тага:

 

<link rel=stylesheet type="text/css" href="file.css" />

който се помества в head-секцията на html документа тези стойности се задават на всяка една страница от уеб сайта. По този начин, ако един сайт съдържа например 20 страници и се наложи да се променя цвета на връзките, цвета на фона на страниците и т.н., ще се направи само една корекция - в CSS-файла, вместо да се коригира кода във всичките 20 страници.

За да опредим стила на конкретен елемент или група елементи се използват атрибутите class и id. Класът и идентификатора са почти идентични по действие, но не и по смисъл. Те не играят директна роля във форматирането на вашите елементи, но служат на Cascading Style Sheets (CSS) за асоцииране на определен стил към определен елемент. Ролята на класифицирането и идентифицирането на елементи ще ви се изясни, когато започнете да използвате CSS по-активно.

Основната идея е, че можете да класифицирте или идентифицирате таг и по-късно да му приложете форматиране чрез Cascading Style Sheets. Става необходимост когато имате повече от един еднакви елемента в една страница  (примерно <p> тагове), но искате тях в различно форматиране.

HTML Code:

<p id="italicsparagraph">Paragraph type 1 Italics</p>
<p id="boldparagraph">Paragraph type 2 Bold</p>

CSS:

#italicsparagraph {
font-style: italic;
}

#boldparagraph {
font-weight: bold;
}

Краен резултат:

Paragraph type 1 Italics
Paragraph type 2 Bold

Смисълът на id атрибута е да посочи точно конкретен елемент. В една страница може да има само един елемент с даден идентификатор. Примерно само 1 параграф може да има атрибут id="italicsparagraph". Самата идея е да може да се конкретизира един единствен елемент, а не група от елементи.

За стилизиране на група от елементи, използваме атрибута class, с който даваме общ клас на повече от един елемемент от един и същ или различен тип.

HTML - Name атрибут

Name е много по-различен от id и class. Поставяйки name атрибут на даден елемент, това име се превръща в променлива, използвана от скриптови езици от рода на Javascript, ASP и PHP, на които в момента няма да се спираме. Name атрибута може да бъде по-често видян в елементите на различни формуляри.

HTML Code:

<input type="text" name="TextField" />

Резултатът:

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

HTML - Title атрибут

Това е малко позабравен атрибут. Tози атрибут „озаглавява” елемента и му добавя малка подсказка с текст. Приложим е към всеки HTML елемент. Можете да озаглавите даден елемент както пожелаете, като ефекта се проявява чак когато преминете с мишка върху него.

HTML Code:

<a href="?f=listing&listing=news&order=id&type_order=desc" title="Статии за туризъм, пътувания, пътеписи">Статии</a>

Друга важна роля, изпълнявана от title атрибута е оптимизация на съдържанието за търсещите машини (Google, Yahoo и т.н.). Техните роботи (специален софтуер, обхождащ интернет страниците, анализиращ и индексиращ съдържанието им) четейки страницата, обръщат специално внимание на Title текста, като описващ съдържанието. Така например по Title текста търсачките по-добре „разбират” за какво се отнася даден линк и накъде препраща.

HTML - Align атрибут

Ако желаете да смените хоризонталната ориентация на даден елемент можете да използвате атрибута align. Можете да ориентирате нещата вляво, вдясно или в център. По подразбиране повечето браузъри ориентират повечето елементи вляво, ако няма изрично посочена друга ориентация.

HTML Code:

<h2 align="center">Centered Heading</h2>

Резултат:

Centered Heading

HTML Code:

<h2 align="left">Left aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right aligned heading</h2>

Резултат:

Left aligned heading

Centered heading

Right aligned heading

Стойности по подразбиране на някои атрибути

Много тагове имат асоциирани атрибути по подразбиране. Това значи, че дори когато тагът няма атрибут, изрично посочен от създателят на страницата, съществуват атрибути по подразбиране. Например, така за параграф винаги ще ориентира текста вляво, дори когато не сте му посочили никакви атрибути. Също така, съдържанието в клетките на таблицата по подразбиране се ориентира централно по вертикала и вляво по хоризонтала, дори когато все още не сте задали никакви атрибути на таблицата и нейните клетки. Когато започнете да използвате по-голям набор от тагове и научите техните по-често използвани атрибути ще ви е лесно да избегнете използването на атрибути по подразбиране, които всеки браузър прилага.

Generic Attributes

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

Нека обобщим таговете, които разгледахме до сега:

 

Атрибут Опции Функция
align right, left, center Хоризонтално позициониране на таг
valign top, middle, bottom Вертикално позициониране на тагове, включени в HTML елемент.
id По наш избор Дава име на идентификатор на елемент, който да използваме в CSS (Cascading Style Sheets.)
class По наш избор Дава име на клас, използван в Cascading Style Sheets.
width Числова стойност (px, %) Посочва широчина на блокови елементи
height Числова стойност (px, %) Посочва висоична на блокови елементи
title По наш избор Дава заглавие на елемент и показва подсказка

Евтини почивки в
България, Гърция, Турция, Италия и Хърватия


Bookmark and Share

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

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *