HTML атрибути

• HTML атрибути

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

• CSS стилове

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

В XHTML 1.0 много от атрибутите на тагове, използвани в HTML 4.01 са отхвърлени и вместо тях се използват съответните им еквиваленти в 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:

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

Смисълът на 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:

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

HTML - Align атрибут

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

HTML Code:

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

Резултат:

HTML Code:

<h2 align="left">Left aligned heading</h2>

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

<h2 align="right">Right aligned heading</h2>

Резултат:

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

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

Generic Attributes

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

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

Още по темата

• Упражнение по „Уеб дизайн“
• Фреймове (frame, iframe) в HTML. Тагове Blockquote, fieldset, legend
• Аранжиране на съдържанието с таблици
• Линкове (хипервръзки). Използване на блокове в дизайна (divisions)
• Форматиране на текст в HTML
• Създаване на първата Ви уеб страница с HTML, писан на Notepad
• Олекотяване на Windows с nLite
• Windows 2003 ръководство
• Трикове за Windows XP (tweaks)
• Публикуване на уеб страница в интернет