Навіщо призначені атрибути тегів
Теги та атрибути
Тег (tag) — елемент мови розмітки гіпертексту. Це найменші будівельні блоки, з яких складається будь-яка веб-сторінка. Кожен тег позначає якусь сутність: заголовок, список, абзац тексту, зображення.
Для виділення тегів серед тексту документа використовуються кутові дужки, в яких вказується ім'я тегу і його атрибути.
ім'я_тегу>.
ім'я_тегу>
Відкриваючий тег вказує, де починається елемент, закриваючий - де закінчується. Закриваючий тег утворюється за допомогою додавання слеша ( / ) перед іменем тегу. Між відкриваючим і закриваючим тегами знаходиться вміст тегу - контент.
section>Секціяsection>
p>Абзацp>
a>Посиланняa>
button>Кнопкаbutton>
Коментарі
Коментарі використовуються для того, щоб залишити у вихідному коді пояснення, замітку, тимчасово закоментувати ділянку коду тощо.
p>Це абзац тексту, він буде на сторінці.p>
Коментар може бути багаторядковим.
Це зручно для об'ємніших описів.
-->
Атрибути
Атрибути - це додаткові налаштування тегів, за допомогою яких можна змінювати властивості і поведінку елемента. У кожного тегу є обов'язкові і необов'язкові атрибути, їх може бути декілька або зовсім не бути.
Атрибути записуються всередині відкриваючого тегу, а їх значення розташовуються всередині подвійних лапок. Декілька атрибутів розділяються пробілом.
a
href="https://google.com"
class="link">.
a>
img
src="cat.jpg"
alt="cute cat"
/>
input
type="text"
name="user_name"
/>
button
type="submit">.
button>
p
class="text">.
p>
Розглянемо деякі атрибути тегу .
a
href="http://google.com"
target="_blank"
H1="Пошукова система Google">
Google.com
a>
- href - адреса сторінки, на яку перейде користувач після натискання на текст посилання.
- target - вказує на те, в якій вкладці відкривається сторінка після кліку на посилання
- H1 - додає спливаючу підказку до тексту посилання.
Розглянемо деякі атрибути тегу .
img
src="https://picsum.photos/640/480"
alt="Довільна картинка від генератора"
/>
- src - адреса зображення.
- alt - альтернативний текст, який буде показаний, якщо зображення не завантажилося.
Для того щоб дізнатися доступні атрибути тегу та їх призначення, можна зайти в документацію або довідник, наприклад htmlreference.io.
Парні теги
Складаються з відкриваючих і закриваючих тегів, які обгортають контент, дозволяючи змінювати його властивості або відображення, групувати за змістом. Всередині парних тегів можуть бути вкладені інші теги, як мотрійка.
article>
h1>Коротко про парні тегиh1>
p>
Більшість тегів парні. Їх контент вкладений між відкриваючим і закриваючим
тегом.
p>
article>
Одинарні теги
Складаються тільки з відкриваючого тегу, не містять текстового контенту і отримують контент або поведінку з атрибутів. Слугують для зміни властивостей документа, підключення файлів тощо.
meta
charset="utf-8"
/>
input
type="text"
/>
img
src="cat.jpg"
alt="cool cat"
/>
У попередніх стандартах HTML поодинокі теги обов'язково записувалися зі зворотним символом / перед закриваючою дужкою. Наприклад або . В сучасному стандарті - це необов'язково і ні на що не впливає.
Вкладеність тегів
Дотримуючись деяких правил, теги можна вкладати один в одного. У разі вкладеності, потрібно дотримуватися порядку їх закриття за принципом мотрійки.
тег1>
тег2>
тег4>.
тег4>
тег5>.
тег5>
тег2>
тег3>
тег6>.
тег6>
тег3>
тег1>
Ось валідна розмітка абзацу з посиланням і виділеним текстом, а також списку переваг з описом.
p>
a
href="squoosh.app">Squoosha>
- сервіс
em>оптимизаціїem>
зображень.
p>
p>Перевагиp>
ul>
li>Працює в браузеріli>
li>Не навантажує системуli>
li>Зручний інтерфейсli>
ul>
А в цій версії є проблеми (рядки підсвічені).
p>a
href="squoosh.app">Squoosha>
- сервіс
em>a>оптимизаціїp>
зображень.em>
ul>
p>Перевагиp>
li>Працює в браузеріli>
li>Не навантажує системуli>
li>Зручний інтерфейсli>
ul>
Специфікація HTML
Специфікація HTML Living Standard - головний документ, який описує стандарти, можливості і майбутній розвиток мови HTML.
Для вивчення верстки, насамперед важливі розділи, які описують, які є типи елементів, що позначає кожен з них , і розуміння того, як їх можна вкладати один в одного.
HTML-елемент - це термін, що описує якусь семантичну сутність в стандарті HTML. Наприклад абзац, заголовок, список або посилання. В HTML-документі елемент представлений тегом (парним або одинарним) - синтаксичною конструкцією мови HTML.
Вкладеність тегів
Алгоритм визначення можливості вкладення тегу досить простий.
- Йдемо в специфікацію і знаходимо потрібний елемент.
- Перевіряємо контентну модель елемента (Content model), в який вкладаємо.
- Перевіряємо категорії елемента (Categories), який вкладаємо.
- Якщо категорія підходить і обмеження не забороняють - вкладати можна, інакше - не можна.
Вже через пару днів використання HTML ви звикнете правильно вкладати елементи один в одного, оскільки правила вкладеності стануть інтуїтивно зрозумілі після знайомства з основними тегами.
Довідники
Крім специфікації під рукою корисно мати довідники і шпаргалки. Знати все напам'ять не потрібно, специфічніші речі або ті, що рідко використовуються, завжди можна підглянути.
Основні теги html
Оскільки HTML це набір тегів то ми розглянемо найважливіші з них. Опишемо як їх використовувати, як вставити на сайт, змінювати та налаштовувати персонально для ваших потреб. Це буде корисно для всіх, хто має справу з наповненням сайтів. Отже поїхали!! До вашої уваги основні теги HTML
Зображення
– один з основних тегів HTML, який використовують для виведення зображення на екран. За допомогою атрибута “src” – задаємо адрес файлу, який хочемо вивести на екран.
Якщо потрібно, малюнок можна вивести як посилання на певну сторінку вашого сайту чи стороннього ресурсу.
А за допомогою стилів і “background” малюнок можна вивести як фонове зображення сторінки, чи певного блоку на вашому сайті;
– створює область в якій за допомогою JavaScript виводить зображення, різні об’єкти з потрібним розміром, який задається через атрибути “width – ширина” та “height – висота”.
Текст
У HTML існує декілька текстових тегів, за допомогою яких можна вивести стилізований текст на екран браузера. Для виведення заголовків використовують теги … . – це найважливіший заголовок на сторінці і рекомендовано щоб він був 1 на сторінці та відтворював весь вміст сторінки. Відповідно інші заголовки є менш важливими і повинні формувати структуру текстової частини сторінки
– тег, який часто використовують у розробці веб-сайту для виведення абзаців з текстом. Цей тег є блочний і завжди починається з наступною строки;
– інтересний тег, його добавляють туди де є контент сайту ( новини, статті, записи блогу, форумe і т. д. ). Цей тег корисний для оптимізації сайту.
У HTML існує дуже багато важливих тегів для стилізації тексту, які спрощують верстку та допомагають виділити певні частини тексту. Основними з яких є:
– встановлює розмір шрифту, колір по замовчуванні;
– тег в якому можна вказати параметри оформлення тексту;
– виділити текст жирним шифром;
– вказує на частину тексту, який має бути ізольованим від змін виводу його на екран;
– встановлює напрямок виводу тексту. Дає переваги тексту де є напрямок зправа наліво;
– в html розмір тексту вимірюється в умовних одиницях від 1 до 7. Середній розмір тексту становить 3 одиниці. Цей тег дозволяє збільшити розмір шрифту на одну одиницю;
– зменшує текст на одиницю. В HTML середній текст дорівнює 3 одиниці;
– дуже простий тег – встановлює мигання тексту. Аналог до CSS: text-decoration: blink;
– переносить строку в наступний рядок без додавання між ними пропусків;
– використовується для виділення особливого тексту при їх першій появі на екрані. При використанні цього особливого тексту дальше виділятися не буде тому, що буде рахуватися як відомим для читача;
– призначений для акцентування певної частини тексту. Веб-браузер буде відображати цей текст як курсивним видом;
– встановлює курсивний шрифт;
– в браузері виділяє задній фон тексту жовтим, але його можна стилізувати;
– цей тег використовується тоді коли розробнику не потрібно щоб браузер його змінив, він буде відображений такий яким його задумав веб-розробник;
– відображає в тексті цитати, браузер бере текст у скобки;
або – відображає текст як перечеркнутий;
– відображає текст жирним шрифтом;
– відображає шрифт у нижньому індексі поля;
– відображає шрифт у верхньому індексі поля;
Посилання
Також існує посилання-якір – якорем називається закладка в середині сторінки сайту. При використання якоря відбувається перехід до закладки сторінки сайту.
До цього тегу є дуже багато різноманітних атрибутів які допомагають і оптимізують роботу веб-розробника.
– створює на веб-сторінці кнопку.
Сюди можна розмістити посилання на інші сторінки. Теоретично тег має бути всередині форми тега , тим не менше цей тег досить часто зустрічається самостійно. Але, якщо потрібно результат кнопки переслати на сервер, то кнопку необхідно вложити у контейнер .
– робить навігацію по сайту. В цей тег зазвичай вкладають блок з посиланнями які є на сайті;
Основні теги html форми
– використовується для формування елементів форми. Таке формування в групи форми полегшить роботу з формами. Наприклад, один блок може бути для вводу тексту, а інший блок для флажків;
– дуже важливий тег, він забезпечує передачу даних між користувачем і сервером на якому розміщений веб-сайт. Але цим область використання форм не закінчується.
Для відправлення форми на сервер потрібна кнопка () тип якої повинен бути ( Submit );
– являється одним із різносторонніх елементів форми. Він забезпечує взаємодію між користувачем і сервером і дозволяє створювати різні елементи інтерфейсу. Цей тег може бути і не вложений в тег , але якщо користувач повинен відправити форму на сервер тоді обгорнути в тег – ОБОВ’ЯЗКОВО.
Основним атрибутом “type”, який формує вид елемента, тобто:
- “text” – текстове поле;
- “password” – поле пароль;
- “radio” – перемикач;
- “checkbox” – галочка;
- “hidden” – заховане поле;
- “submit” – кнопка для відправлення;
- “reset” – кнопка для очищення форми;
- “file” – поле для відправлення файлів;
- “image” – кнопка зі зображенням.
Це основні елементи, а з виходом HTML5 їх стало в десятки більше.
– використовується для генерації пари ключів – відкритих і закритих. коли користувач відправляє форму на сервер на його ПК залишається закритий ключ, а відкритий відправляється на сервер. Ключі потрібні для шифрування і розшифрування даних, а також для цифрових ключів;
– представляє частиною форми, а точніше формою написання тексту.
Списки
-
і
всередині якого формується список за допомогою тегів
. Тег вийшов з користання, чучуть застарів, зараз популярно і взято за правило використовувати тег
;
