Якщо ви вирішите створити сайт, то без мови гіпертекстової розмітки html ви далеко не підете. Звичайно, існує ще CSS, PHP та інші скриптові мови, без яких повноцінний сайт, яким ви звикли його бачити, не вийде. Однак саме основні теги html дозволять вам закласти базу для вашого сайту.
Головні теги, без яких нікуди
Коли ви відкриваєте будь-який html-документ або веб-сторінку, ви бачите величезну кількість різних тегів. Однак, якщо ви придивитеся, то більшість з них повторюються, оскільки описують одні і ті ж елементи. Наприклад, до основних тегів html відносяться такі теги, як тип документа , , , , , ,
та інші.
Тип документа та оголошення html документа
Для вказівки типу поточного документа використовується елемент . Він необхідний браузеру, щоб розпізнати, як інтерпретувати конкретну веб-сторінку. В залежності від того, яку версію html ви використовуєте, виглядати цей елемент буде по-різному. В HTML5 він прийме таке значення:
Після того, як ви вказали, до якого типу відноситься ваш документ, слід використовувати тег . Як і більшість інших тегів, він є парним, тобто має відкривають і закривають теги. Різниця між ними в тому, що перед закриваючим тегом розташована коса риска “/”. Таким чином, основний тег html для створення сайту буде виглядати так:
…
Між відкриваючим і закриваючим тегом в даному випадку буде розташовуватися решті код, який буде укладати весь вміст веб-сторінки.
Тег
Такий тег також є основним тегом html. Він пишеться після , а також є парним і містить у собі, в основному, метадані веб-сторінки. Ці дані не відображаються у видимій частині сторінки html (за винятком тега , який містить в собі назву сторінки), але використовуються браузером для правильного відображення документа. Також інформація, розташована в цьому теге, використовується різними пошуковими системами. Приклад:
Метадані
Заголовок сторінки
Тег
Основний тег для сайту html, оскільки саме він містить в собі всі видимі елементи сторінки – весь текст, всі картинки та іншу інформацію. По суті, як і тег , він є контейнером для інших тегів. Приклад:
Видиме вміст веб-сторінки
Заголовки та параграфи
Всі перераховані вище теги є основними тегами мови html. Проте в мові гіпертекстової розмітки існує ще величезна кількість інших елементів. Наприклад, теги параграфів і заголовків. Вони дозволяють структурувати текст, розбивати його на окремі абзаци і виділяти. Так, для параграфів використовується тег
він є парним тегом, між відкриваючим і закриваючим елементом якого розташовується який-небудь текст. Приклад:
Текст параграфа
Крім параграфів, містити в собі текст можуть і заголовки. Однак вони також змінюють вид тексту, що міститься всередині, збільшуючи його в розмірі і виділяючи жирним шрифтом. Існує 6 видів заголовків, які відрізняються в розмірі. Наприклад, заголовок є найбільшим, а заголовок – найменшим.
Використання зображень
Жоден сайт не обходиться без зображень, картинок і фотографій. Адже без цього веб-сторінки представляли б собою сухий текст, нецікавий для вивчення. Щоб вставити на сайт будь-яке зображення, в мові гіпертекстової розмітки використовується тег . Важливо відзначити, що даний тег не є парним, тому в коді він буде писатися як
.
Гіперпосилання у тексті
Найчастіше, крім тексту і різних зображень, на сайтах використовуються посилання. Вони можуть перенаправляти на сторонній ресурс або на іншу сторінку вашого сайту. Для того щоб визначити наявність посилання, використовується тег .
Що таке атрибути?
Ми трохи розібралися з основними тегами. Однак у більшості тегів існують ще й атрибути. Вони прописуються у початковому елементі і складаються з двох частин. Перша – назва самого атрибута, друга – значення даного атрибуту, який прописується після знака “=” і полягає в лапки.
Основні атрибути html тегів
У багатьох тегів є атрибути. Однак для деяких тегів їх наявність необов’язково, якщо ви не хочете якось видозмінювати елементи. Для інших же тегів присутність атрибутів обов’язково, до таких належать, наприклад, тег для створення гіперпосилань) і тег (для додавання на сторінку зображень). Вся справа в тому, що якщо ми не вкажемо у цих основних тегів html-атрибути та їх значення, то ми не побачимо їх на сторінці сайту.
Атрибути тега
Якщо ви вкажете в коді текст, ув’язнений в тег , то крім цього тексту на веб-сторінці ви нічого не побачите. Сам тег, по суті, говорить лише про намір створити гіперпосилання, а для того щоб дійсно створити знадобиться атрибут. Цим атрибутом буде href, а значення цього атрибута буде конкретне посилання на ресурс. Таким чином, якщо ми хочемо створити посилання на сайт google.com це буде виглядати наступним чином:
Посилання на google.com
Так весь текст, що знаходиться між тегами , що є гіперпосиланням, а значення атрибута href в подвійних лапках, буде адресою, за якою ми перейдемо, клікнувши на тексті.
Атрибути src для ![]()
Схожа ситуація і з тегом . Якщо ми не вкажемо разом з ним атрибут і його значення, то зображення на веб-сторінці не з’являться. Як у випадку з тегом , наявність тега
говорить тільки про те, що ми збираємося вставити фото в наш код. Однак для того, щоб це зображення з’явилося необхідно вказати адресу даного зображення. Для цих цілей необхідно буде використовувати атрибут src, значенням якого буде адреса зображення, розташованого на сторонньому ресурсі, або на вашому комп’ютері.
Атрибут alt тега ![]()
Крім того, у тега існує ще один атрибут. Він не вважається обов’язковим, але визнаний рекомендованим до використання. Цим атрибутом є атрибут альтернативного тексту alt. Значення цього атрибута буде з’являтися текст, відповідний опису фотографії або зображення. Цей текст буде відображатись у випадку, якщо з якої-небудь причини зображення не вийде завантажити. Крім того, використання цього атрибута допоможе слабозрячим людям, які користуються екранними читалками. Таким чином, тег
разом з двома представленими атрибутами буде виглядати наступним чином:
/>
Які ще атрибути існують?
Атрибутів існує величезна кількість, їх список так само величезний, як і список основних тегів html. Однак існує атрибут, який притаманний відразу ряду тегів. Це align. Він може використовуватися разом з нею , а також разом з тегом
. Його суть у тому, що він задає положення зображення або тексту на сторінці. Самими основними значеннями цього атрибута є right і left, які позначають вирівнювання по правому і лівому краю (відповідно). Якщо застосувати його до зображення, то код буде виглядати так:
align=”right”/>
Використання стилів
Проте варто відзначити, що останнім часом деякі подібні атрибути не використовуються, а замість них застосовуються каскадні таблиці стилів (CSS). Для того щоб використовувати стилі в html прописується тег , який призначений для підключення стилів і розташовується в тегу .
