Атрибути HTML: види і застосування. Довідник HTML

Атрибути HTML: види і застосування. Довідник HTML

Мова розмітки гіпертексту HTML має широкий вибір тегів для надання сайту приємного зовнішнього вигляду. З часом веб-дизайнер-початківець розуміє, що просто розмітити текст недостатньо. Серед сучасних веб-сторінок трапляються справжні твори мистецтва. Майстри зі створення сайтів грають шрифтами тексту, розмірами та розташуванням елементів, як хочуть. Саме атрибути HTML дають змогу додавати тегам певні властивості, доповнювати та змінювати їх вміст.

Атрибути

Атрибути прописуються у відкритому тегу і складаються з двох частин. Перша - ім 'я, яке пишеться через пробіл після назви тега. Друга частина - значення атрибута, яке вказують після знака "=" і укладають подвійні лапки. Атрибути HTML різняться для різних тегів. Більшість з них виконує різні завдання, але є кілька загальних атрибутів. Їх можна застосувати до багатьох елементів веб-сторінки.


Один тег може містити декілька атрибутів. Вони пишуться один за одним і розташовуються виключно у відкриваючому тегу. Закриваючий не може містити жодних атрибутів.

Універсальні атрибути HTML

Є декілька атрибутів, які можна застосувати до різних тегів. Вони відповідають за розташування елемента на сторінці, його висоту, ширину, колір та інші візуальні ефекти. Один з таких - Align, якому можна присвоїти значення right, left або center. Він вирівнює тег горизонтально, тому може бути корисним для більшості елементів розмітки. Valign робить те ж саме, але по вертикалі. Йому можна присвоїти значення top, bottom і middle. Наступний універсальний атрибут - bgcolor, що відповідає за колір тла. Його значення вказують як числовий код, що означає один із кольорів RGB. Фоном може стати зображення, якщо скористатися атрибутом background.

Ви можете вказати назву, яку буде показано на екрані під час наведення на неї. Для цього слід скористатися атрибутом title, значення якого визначає користувач. Існує ще один атрибут, який служить для створення унікального ідентифікатора елемента. Цей атрибут називається id і дозволяє творцеві сайту задавати стиль для конкретного теґу. Для роботи з CSS використовують атрибут з назвою class, який буде розглядатися як ім 'я тега в каскадних таблицях стилів. Ширину таблиці, зображення або комірки можна встановити за допомогою width, а висоту - за допомогою атрибута height. Є й інші глобальні атрибути, але вони навряд чи знадобляться новачку.

Атрибути теґу HTML

Існує декілька корисних атрибутів, які впливають на весь документ HTML. Деякі з них можна застосовувати до окремих фрагментів, наприклад lang. Цей атрибут вказує мову тексту на веб-сторінці. Навіщо це потрібно, якщо сайт виглядає коректно і без зазначення мови? Насправді деякі символи по-різному відображаються для різних мов. Наприклад, лапки для англійської мови виглядають так - ""..., а для російської ось так "".... У деяких випадках використання lang необхідно, але часто можна обійтися і без нього. Атрибут xml:lang виконує аналогічну функцію, але його застосовують у документах XHTML.

Можна вказати не тільки мову документа, але й спеціальну підказку. Вона вискакує при наведенні курсора на веб-сторінку і визначається за допомогою атрибута title. Існує ще один атрибут для теґу < html >, що визначає простір назв XHTML. Його назва - xmlns. Значення цього атрибута є посиланням - http://www.w3.org/1999/xhtml. Ніякі інші значення йому присвоїти не можна.

Параметри шрифту CSS

Деякі атрибути HTML використовують для визначення шрифту в CSS. Перший з них називається font-family. У ньому вказано список шрифтів, які буде використано в будь-якому елементі. Значення цього атрибута - назва шрифту. Ви можете змінити вибраний шрифт за допомогою font-style. Цей параметр може зробити шрифт похилим або позначити його курсивом. Значення - normal (звичайний), italic (курсив) і oblique (похилий). Наступний корисний атрибут для каскадних таблиць стилів називається font-variant. За його допомогою можна виділити текст особливими прописними літерами. У font-variant всього два значення - normal і small-caps.


Ще один атрибут для шрифту називається font-weight і відповідає за товщину тексту. Йому можна присвоїти значення normal, якщо вам потрібні букви стандартної товщини. Для світлого тексту слід поставити значення lighter, а для напівжирного - bold. Жирний текст позначено у цьому атрибуті як bolder. Можна задавати товщину символів у числовому форматі. У цьому випадку 100 - тонкий шрифт, а 900 - найтовстіший варіант. За допомогою атрибута font-size встановлюють розмір шрифту. Його можна позначити у пунктах (pt), пікселях (px) та відсотках (%). Щоб отримати стандартний розмір шрифту, встановіть значення normal.

Властивості тексту

За допомогою грамотного використання атрибутів можна змінювати не тільки шрифт, а й весь текст. Ви можете встановити міжрядковий інтервал за допомогою атрибута line-height. Цей параметр визначає точне значення в пікселях, відсоткове співвідношення або множник. До цього атрибута застосовано значення normal. Ви можете додати гарні ефекти для тексту, якщо в цьому є потреба. Для цього існує атрибут text-decoration. Присвойте йому значення none, якщо потрібно прибрати всі ефекти оформлення. Underline додасть до тексту підкреслювання, а overline - лінію над текстом. Значення blink зробить текст миготливим, а line-through перекреслить його.

Ще один корисний атрибут - text-transform. Якщо присвоїти йому значення capitalize, то текст буде починатися з прописних літер. Значення uppercase зробить всі букви прописними, а lowercase, навпаки, рядковими. Щоб прибрати всі ефекти, присвойте цьому атрибуту значення none. Налаштувати першого рядка допоможе text-indent. Ви можете присвоїти значення у пікселях або відсотках. Text-align - атрибут, що відповідає за вирівнювання тексту. Можливі значення цього параметра - left, right, center, justify. Не намагайтеся відразу запам 'ятати основні атрибути, на початковому етапі вам допоможе HTML-довідник.

Теги та атрибути HTML

Якщо ви вирішили освоїти мистецтво створення веб-сторінок, вам доведеться запам 'ятати безліч тегів. Атрибути HTML не менш важливі, оскільки без них неможливо створити сайт. Вміле використання цих компонентів мови дозволить створювати пристойні веб-сторінки.

Деякі теги мають свої унікальні атрибути, запам 'ятовувати які важко і недоцільно. Тому навіть досвідчені веб-дизайнери тримають під рукою HTML-довідник. У цьому немає нічого поганого, адже ніколи не знаєш, який тег або атрибут сьогодні знадобиться. Однак бажано пам 'ятати глобальні атрибути, які можна застосувати до більшості існуючих елементів. Для закріплення матеріалу, спробуйте застосувати отримані знання на практиці. Освоюйте мову HTML, і вона принесе вам масу позитивних емоцій, а також солідний дохід.