У кожного атрибута, за винятком логічних, є значення, яке відноситься до одного з наступних типів: ключове слово, рядок, адреса, число, відсотки, код мови. Це не всі типи, але найпоширеніші.
Ключове слово
У деяких атрибутів є зарезервовані значення, які називаються «ключовими словами». Наприклад, значення атрибута type елементу <input> визначає тип елемента форми. Нижче елемент <input> створює кнопку.
See the Pen
dyPNxZx by Sofiia (@sofiia19)
on CodePen.
Ключові слова підпорядковуються специфікації, список їх значень обмежений і не може бути довільно змінений.
Рядок
Рядок це текст, записаний в подвійних або одинарних лапках.
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Лапки визначають початок і кінець рядка, тому всередині рядка можна додатково ставити такі ж лапки. Наприклад, наступний рядок використовує неправильне поєднання лапок.
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Щоб коректно написати рядок з внутрішніми лапками є кілька варіантів.
1. Написати внутрішні лапки ось таким чином - \ ". У такому випадку вона вже не буде сприйматися браузером як лапка, а вважається символом.
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
2.Використовувати поєднання одинарних і подвійних лапок.
See the Pen
BaypeOP by persifal17(@persifal17)
on CodePen.
Тут рядок у атрибута title взята в одинарні лапки, тому ми спокійно можемо писати всередині подвійні лапки.
Все це аналогічним чином працює і для одинарних лапок.
Адреса
Адресою називається шлях до документа, наприклад, до графічного файлу. Адреса необхідна в тих випадках, коли робиться посилання на сайт, іншу веб-сторінку або завантажується певний файл. Наприклад, в елементі <img> адреса використовується для атрибута src, він задає шлях до файлу із зображенням.
Розрізняють абсолютні і відносні адреси.
Абсолютні адреси
Подібні адреси працюють по всюди незалежно від імені сайту або веб-сторінки, де задана адреса і починається завжди з вказівки протоколу передачі даних. Для веб-сторінок це зазвичай HTTP (HyperText Transfer Protocol, протокол передачі гіпертексту), відповідно, абсолютні адреси починаються з ключового слова http://. У прикладі 1 наведено посилання, в якій застосовується абсолютний адресу.
Приклад 1. Використання абсолютної адреси в посиланні
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
В даному прикладі текстове посилання веде на сайт google.com.
Крім протоколу HTTP існує і захищений протокол HTTPS. Не завжди очевидно, який протокол використовується на сайті, тому в адресі посилання його можна взагалі опустити. Адреса в такому випадку запишеться так:
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
Абсолютні адреси застосовуються в першу чергу для росилання на інший мережевий ресурс і досить рідко використовуються для внутрішніх посилань.
Відносні адреси
Відносні адреси вказуються від кореня сайту або поточного документа. Наприклад, код <img src = "pic.png"> означає завантажити графічний файл з ім'ям pic.png, який розташовується в тій же папці, що і сама веб-сторінка. Далі розглянемо кілька прикладів таких адрес.
/
Адреса вказує зазвичай на файл index.html, який знаходиться в корені сайту. Якщо файл index.html відсутній, браузер, як правило, показує список файлів, що знаходяться в даному каталозі. Файл не обов'язково має бути index.html, цей параметр змінюється через налаштування веб-сервера - так називається програма, яка аналізує запити що приходять від браузера і передає йому документи, що показуються користувачеві.
/images/pic.png
Риска (/) перед адресою говорить про те, що адресація починається від кореня сайту. Посилання веде на файл pic.png, який розташовується в папці images. А та в свою чергу розміщена в корені сайту.
../help/me.html
Дві крапки перед іменем вказують браузеру перейти на рівень вище в списку папок сайту і там «пошукати» в папці help файл з назвою me.html.
manual / info.html
Якщо перед іменем папки немає ніяких додаткових символів, на зразок крапок або рисок, то папка розміщена всередині поточної папки, а вже в ній знаходиться файл info.html.
Адреси відносно кореня сайту виду /demo/ працюють тільки під управлінням веб-сервера і на локальному комп'ютері не застосовуються.
У прикладі 2 наведені посилання, в яких використовуються відносні адреси.
Приклад 2. Відносні адреси в посиланнях
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
Іноді можна зустріти адреси у вигляді ./file/doc.html. Крапка попереду означає, що відлік ведеться від поточної папки. Подібний запис надлишковий і його можна скоротити до file/doc.html.
Числа
Числа складаються з цифр від 0 до 9; для від'ємних чисел, якщо вони необхідні, попереду ставиться знак мінус (-45). У прикладі 3 показано використання чисел в якості значень атрибутів.
Приклад 3. Використання чисел
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
Окрім цілих чисел допустимо використовувати десяткові дроби, при цьому ціла і дробова частина відділяються один від одного крапкою - 36.6, як показано в прикладі 4.
Приклад 4. Дробові числа
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
Відсотки
Відсотковий запис дозволяє прив'язатися до розмірів батьківського елементу і задавати розміри щодо нього. Припустимо, у нас є наступний код:
See the Pen
BaypeOP by Sofiia (@sofiia19)
on CodePen.
Елемент <img> розташовується всередині <p>, тому елемент <p> буде батьківським для <img>. Вірно і зворотне - елемент <img> є дочірнім по відношенню до <p>. Відповідно, в даному випадку ширина картинки в процентах вважається від батьківського абзацу, який за замовчуванням займає весь вільний простір вікна по ширині.
Браузер розуміє, що мова йде саме про відсотки, якщо після числа додається символ "%", наприклад: width = "40%".
У прикладі 5 наведено код веб-сторінки, в якому ширина картинки вказується у відсотках.
Приклад 5. Розміри зображення у відсотках
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
Плюсом відцоткового запису є те, що розміри картинки змінюються разом з шириною вікна браузера, а не залишаються статичними. До мінусів можна віднести погіршення якості картинки при її сильному розтягуванні.
Код мови
Ми живемо в епоху глобалізації, коли на сайтах зустрічаються тексти на різних мовах. Щоб показати пошуковим системам, якою мовою написаний текст і задати свої настройки для різних мов (типи лапок, наприклад) і вказується мова тексту у вигляді коду. Для задання мови застосовується атрибут lang (приклад 6).
Приклад 6. Використання атрибуту lang
See the Pen
BaypeOP by Sofiia (@persifal17)
on CodePen.
У даному прикладі для всієї сторінки вказано українську мову за допомогою атрибута lang зі значенням ru. Щоб показати, що мова належить до всієї сторінці, атрибут доданий до елементу <html>. Для тексту французькою атрибут lang зі значенням fr доданий до елементу <p>.