З цього уроку ви дізнаєтеся, як створити тег, призначити йому той чи інший атрибут, а також познайомитеся з класами і ідентифікаторами.
Теги (tags, таги, теги) - це ключові слова, які оточені кутовими дужками ( <и> ). Теги є основою мови HTML. Структура тега завжди така:
Теги можуть вимагати закриття і можуть не вимагати. Вище приклад тега, який закривається, для цього перед ім'ям стоїть символ /.
Теги, які не вимагають закриття мають такий вигляд:
Зверніть увагу на закриває слеш в кінці, він іноді використовується в якості закриває символу, але використовувати його не обов'язково.
Теги не ми не побачимо в браузері, але вони є основою верстки будь-якого сайту. Завдання тегів - «пояснити» браузеру, де які розміщувати елементи, якими властивостями вони повинні володіти. Далі ви побачите, як писати код і зрозумієте, де і які теги слід використовувати.
Ось основні теги, які визначають структуру документа:
атрибути тегів
Властивості тегів називають «атрибутами». Теги можуть мати один або безліч атрибутів, а можуть бути зовсім без них.
Атрибути використовуються, щоб браузер міг відрізняти одні теги від інших, вони містять додаткову інформацію про елементи і завжди вказуються в відкриваючому тезі.
Атрибути вказуються парами у вигляді імені та значення: ім'я = "значення". Наприклад, ви можете додати атрибут lang елементу :
Цей рядок читається так: у тега є атрибут lang. і його значення - en-US.
Гіперпосилання і зображення
Для створення гіперпосилання використовується тег . основним атрибутом для посилання завжди служить атрибут href. який вказує, яка сторінка відкриється при кліці на цим посиланням. Ось приклад текстового посилання, тобто вміст тега в даному випадку - текст:
У одного і того ж елемента може бути безліч атрибутів. Наприклад, тег . який відповідає за зображення:
Давайте розберемося в цьому рядку: у елемента є такі атрибути:
Як додавати атрибути
Правила написання атрибутів дуже прості:
- значення завжди повинні вказуватися в лапках;
- використовуйте тільки одні і ті ж лапки: якщо зліва значення варто одинарна або подвійна лапка ( 'і "відповідно), то справа повинна бути така ж;
- використовуйте тільки малі літери для імен атрибутів (не стосується значень).
Наведу одні з найбільш часто використовуваних атрибутів:
значення, часто використовується в формах
Атрибути class і id
Класи і ідентифікатори - це атрибути, які називаються class і id відповідно. Вони потрібні, щоб можна було вибирати елементи, до яких застосовувати стилі. Для вибору елементів за класом, ідентифікатором або імені тега використовуються селектори.
Селекторами можуть бути будь-які імена тегів, але в тому випадку, коли тегів багато, їх доведеться часто повторювати. Тоді верстальщику знадобляться класи і ідентифікатори, щоб відрізняти одні теги від інших.
Атрибути class і id використовуються, щоб можна було застосувати стилі тільки до зазначених об'єктів, вони необхідні для стильового оформлення сторінок (це CSS, мова про нього піде в наступних уроках і він ще встигне вам набриднути), а також для скриптів на сторінках.
Ідентифікатор повинен бути унікальним, не повторюватися на сторінці і застосовуватися тільки до одного елементу. Для одного і того ж елемента можна вказати лише один код.
Класів може бути будь-яка кількість, вони вказуються через пробіл в атрибуті class. для одного і того ж об'єкта можна вказати як тільки ідентифікатор, так і тільки класи, а також і те, і те.
Для імен ідентифікаторів і класів використовуються однакові правила:
- тільки латинські букви
добре: class = "class_01". погано: class = "класс_01"; - тільки нижній регістр
добре: class = "class_01". небажано: class = "Class_01"; - перший символ - тільки буква
добре: image_01. погано: 01_image;
Атрибут alt - обов'язковий для зображень
За правилами розмітки у всіх зображень обов'язково повинен бути вказаний атрибут alt. Якщо він вам не потрібен, залишайте його порожнім, але все одно додавайте скрізь:
? Нижній регістр для імен атрибутів
Як імена класів і id, так і імена тегів повинні вказуватися в нижньому регістрі.
Взагалі HTML-теги регістронезавісімого, тобто
для браузера рівнозначний
. У специфікації HTML5 немає вказівок про те, який регістр необхідно використовувати. Проте, раніше використання великих літер в іменах тегів було помилкою.
Сьогодні ви трохи більше дізналися про тегах і атрибутах. Далі ми продовжимо вивчати теги, я розповім вам про форми на сторінках, метаданих, заголовках і правилах написання HTML. Діліться уроками з друзями, а я поки піду писати наступний урок. До зустрічі!
← Тісно «Лайк», щоб читати нас у Фейсбуці
Tokar_ua Будьте в курсі. Долучайтесь до нашого каналу в Telegram.
'Data-post_id = "9061" data-user_id = "0" data-is_need_logged = "0" data-lang = "en" data-decom_comment_single_translate = "коментар" data-decom_comment_twice_translate = "коментаря" data-decom_comment_plural_translate = "коментарів" data-multiple_vote = "1" data-text_lang_comment_deleted = 'Коментар Відаль' data-text_lang_edited = "Відредаговано про" data-text_lang_delete = "ВИДАЛИТИ" data-text_lang_not_zero = "поле яке не NULL" data-text_lang_required = "Це обов'язкове поле. " data-text_lang_checked = "Оберіть один з пунктів" data-text_lang_completed = "Операцію завершено" data-text_lang_items_deleted = "Об'єкти Було Відаль" data-text_lang_close = "Закрити" data-text_lang_loading = "Завантаження.">
Додати коментар
Вибачте, для коментування та патенти Войти.
1 коментар
Коли ж буде додаток?
Оберіть Зручний для вас способ підпіскі
Інтернет, технології, життя
Матеріали з сайту могут буті вікорістані у некомерційніх цілях з активним ПОСИЛАННЯ, бачимо и відкрітім до індексації.
Ліцензовано: Creative Commons Attribution 4.0.
Знайшли помилку? Віділіть текст и натісніть Ctrl + Enter.
Працює на Bukvus
Куди надіслаті скрипт?
Я не надсилайте спам. Нехай пізнають гіркоту буття ті, хто це Робить
Я можу раз на місяць надіслаті листа з цікавімі записів з блогу. Не частіше и нічіго Іншого. Вказуючі свою пошту, ви погоджуєтесь з ЦІМ.