Html теги (на прикладі p, br, hr) та їх атрибути, Створення сайтів та заробіток у мережі
Перш, ніж почати, хочу вибачитися з приводу моєї тривалої відсутності. Справа в тому, що через зайнятість в одному проекті я змушений був відмовитися на якийсь час від оновлення блогу і дещо вибився з графіка. Але тепер все позаду, і я сподіваюся надалі підтримувати колишній ритм і регулярно надавати свіжі матеріали.
Тепер повертаюся до наміченої теми. В рамках знайомства з основами html я вже писав про структуру html документів, де також давав роз'яснення з приводу основних тегів html, head та body, які обов'язково повинні бути присутніми в кожному документі, а також особливого тега, що називається декларацією.
У цьому розділі дана інформація, що стосується алгоритму застосування тегів table, td, tr, th для створення таблиць, тега button для формування різноманітних кнопок на сайті, тегів ol, ul, li; dl, dt,dd, що дозволяють використовувати можливість побудови списків. Крім того, ви могли познайомитися з тегами form і input для форм на сайті та окремо з тегами, що дозволяють сконструювати різні форми: випадають списки (select і option), текстове поле (textarea).
Отримавши від вас, дорогі читачі, безліч побажань за допомогою форми зворотного зв'язку та через e-mail, я вирішив все-таки повернутися до початку і детальніше зупинитися на тому, які теги взагалі існують, як вони класифікуються і що таке атрибути тегів html. Тож почнемо.
Парні та одиночні, блокові та малі HTML теги: p, br, hr
Як ви, мабуть, вже зрозуміли з попередніх публікацій на блозі, тег є основною структурною одиницею мови гіпертекстової розмітки HTML (Hyper Text Markup Language). За великим рахунком, саме сукупність тегів визначає html.код, який описує той чи інший документ (наприклад, одну із сторінок вашого ресурсу).
Теги класифікуються на парні та одиночні, а також на блокові та малі. Ось зараз по порядку і розглянемо сутність їхньої відмінності на прикладі найпопулярніших тегов, що часто використовуються. До речі, у багатьох джерелах можна зустріти назву блокових і малих елементів, знайте, що це те саме.
Блокові елементи можуть бути вкладені один в інший, але не всі про це пізніше. Рядкові теги зазвичай містять текст або інші малі елементи, проте поміщати всередину малі блокові теги не дозволяється. Рядкові теги, на відміну від блокових, розташовуються на одному рядку і переносяться на інший лише за необхідності, коли закінчується доступне по ширині місце.
Напевно, для початківців поки що складно і виникає плутанина в голові, але лиха біда почала. Надалі все проясниться, я переконаний. Тим більше, що переходжу до конкретних прикладів на основі поширених тегів, відзначаючи кожен раз, до яких елементів, малих або блокових, парних або одиночних, відноситься кожен з них.
Почнемо з тега p, яким кожен вебмайстер користується буквально щохвилини, я не перебільшую. Назва цього елемента походить від початкової літери англійського слова paragraph (абзац, параграф). Він служить виділення фрагментів тексту, який у такий спосіб набагато легше сприймається читачами. Ось зараз, наприклад, я пишу статтю та виділяю текст посту час від часу на абзаци, можете в цьому переконатися.
Розбиваючи текст на фрагменти та максимально полегшуючи сприйняття матеріалу відвідувачами ресурсу, ви можете значно покращити поведінкові фактори ранжування ресурсу пошуковими системами, що важливо у справі його просування.
За своєю суттю,природно, елемент p є парним, оскільки має теги, що відкриває і закриває. Одночасно це блоковий елемент, який може містити лише малі елементи. Припустимо, якщо ви напишіть який-небудь текст у кілька рядків і уклаєте його між відкриваючим і закриваючим тегами p, то все одно браузер відобразить його в одному рядку і тільки якщо текст не вміститься в один рядок, буде здійснено перенесення.
А ось щоб відобразити цей текст у кілька рядків, необхідно скористатися елементом br (від англійського «break»), який є одиночним, тобто не має тега, що закриває, а також це малий елемент. Поміщаючи його в кінці кожного з рядків тексту, що є вмістом тега p, отримуємо варіант:
Тепер подивимося ще на один простий тег, про який детальніше поговоримо наприкінці статті. Мова про тег hr (від англійської«horizontal rule»- горизонтальна лінія), який є одиночним, але одночасно блоковим, оскільки за умовчанням займає всю можливу ширину. Він описує просту горизонтальну лінію, яка буває корисною при розподілі контенту сторінки на логічні частини. Це може бути поділ тексту, груп зображень чи інших складових елементів дизайну.
Вигляд цієї горизонтальної лінії залежить від браузера, в якому проглядається сторінка, html код якої містить цей елемент. Крім того, вигляд цієї лінії, як і зовнішній вигляд інших елементів, можна редагувати за допомогою різноманітних атрибутів. Ось ми плавно підійшли до ще однієї складової нашої сьогоднішньої теми, а саме поняття атрибутів тегів html.
Атрибути HTML тегів та їх класифікація
Атрибути тегів html дозволяють надати їм додаткових характеристик і урізноманітнити зовнішній вигляд елементів, що відображаються браузером.веб-сторінки. Атрибутів кожного тега може бути кілька. Кожен із них відіграє свою роль у формуванні дизайну тієї чи іншої області сторінки сайту. Атрибути прописуються всередині тега, що відкриває, після назви самого елемента. Якщо атрибутів кілька, порядок їхнього прямування не має значення, він може бути будь-яким.
Майже кожен атрибут має своє значення (параметр). Загалом будь-який одиночний або парний тег можна представити схематично в наступному вигляді:
Зверніть увагу, що для вказівки значення того чи іншого атрибуту після назв атрибутів слід поставити знак рівності, а саме значення укласти в одинарні або подвійні лапки. Атрибути можуть бути присутніми як у малих, так і в блокових; як одиночних, і у парних тегах.
Щоправда, там дані, що відповідають офіційним стандартам html 4.01. Проте швидкими темпами відбувається запровадження версії html 5, за правилами якої вже грають найпопулярніші браузери. А в новій версії мови гіпертекстової розмітки деякі теги та атрибути вже будуть невалідними, тобто такими, що не відповідають стандартам html. Тому йтимемо в ногу з часом і я вам пропонуватиму в майбутньому тільки валідні теги та атрибути, також надалі навчимося уникати невідповідності нормам коду html, застосовуючи стилі css, матеріали на цю тему з'являться дуже скоро.
- Група універсальних атрибутів- вони застосовуються практично до всіх html тегів. На скріншоті вище вони виділені у зелену рамку
- Унікальні атрибути- властиві лише даному елементу набір атрибутів (для тега hr малюнку вони підкреслені фіолетовим: align, noshade, size, width). У специфікацію html 5 доданоновий атрибут color, що визначає колір горизонтальної лінії.
- Події- ці атрибути потрібні, коли потрібна будь-яка дія у відповідь на дію користувача. На скріншоті вони виділені у синю рамку.
Інформацію про атрибути можна отримати на іншій сторінці W3C, де наведена таблиця з повним списком html атрибутів:
У цій таблиці наведено всі атрибути для всіх тегів, що існують у мові гіпертекстової розмітки. У стовпці "Related Elements" навпроти потрібного атрибуту зазначені теги, в яких цей атрибут може бути використаний. У колонці "Type" позначено тип даних, які можна використовувати як значення атрибута. Наприклад, для атрибуту align (який визначає вирівнювання елемента) можливе застосування трьох можливих значень (left, center, right).
Якщо в колонці "Dept" проставлено букву D, то такий атрибут використовувати не рекомендується, інакше html документ не пройде валідацію. У цьому випадку необхідно використовувати стилі css, вивчення яких, як я вже відзначав, займемося в недалекому майбутньому. Це просто необхідно, оскільки тенденція така, що більшість атрибутів у версії html 5 не рекомендовані для використання та зовнішній вигляд елементів слід визначати, застосовуючи css.
До речі, абсолютно повна інформація з доданими тегами та їх атрибутами за версією html 5 представлена одним з найкращих, на мій погляд, ресурсів, присвячених вивченню основ html, а саме htmlbook, причому українською мовою.
Як відобразити горизонтальну лінію за допомогою тега hr
Діятимемо поступально. Елемент hr без атрибутів визначає просту горизонтальну лінію, яка займає весь простір по ширині (див. приклад вище). Послідовно застосовуючирізні атрибути для тега hr, змінюватимемо зовнішній вигляд горизонтальної лінії.
Для початку пропишемо атрибути align та width. Що ж до align, його використовувати має сенс лише тому випадку, якщо заданий атрибут width, який визначає ширину елемента (менше, ніж ширина сторінки). Нагадаю, що тег hr є блоковим елементом і за замовчуванням займає весь доступний по ширині простір.
Як значення атрибута width можна використовувати цифри (у разі буде задаватися ширина в пікселах) чи відсотки, які задають ширину елемента як частку доступного простору. Значення атрибута size проставляється у цифрах і визначає висоту елемента (у разі товщину горизонтальної лінії). Отже, розглянемо приклад:
Далі додамо до вищезазначеного атрибут noshade. Справа в тому, що при використанні тега hr за замовчуванням використовуються тривимірні ефекти (тінь), можете переконатися, глянувши на лінію, розташовану трохи вище. Прописавши атрибут noshade, ми цим забороняємо їх застосовувати.
Спробуємо додати атрибут color, який визначить колір горизонтальної лінії. Зауважу, що використання цього атрибуту автоматично забороняє тривимірні ефекти, тому використання noshade не потрібне. Як значення ставимо назву кольору, наприклад "blue".