«Основи HTML»
Кучай А.В., Білан С.О.

1.2. Основні теги

Мова HTML складається з тегів. Теги − це ті самі цеглинки, з яких побудована кожна веб-сторінка. З деякими тегами та їх записом ви вже знайомі. На попередній сторінці ви познайомились із тегами структури документу та кількома тегами розмітки веб-сторінки.

Всі теги можна розділити на парні і одиночні. Кожен парний тег складається з двох частин: відкриваючого тегу і закриваючого. Усередині закриваючого тегу використовується символ /, наприклад: 

 <p> Абзац </p>

Теги можуть мати атрибути − властивості елементів, які дають додаткові можливості форматування. Деякі теги використовуються тільки з атрибутами. Найбільш яскравий приклад − тег <img>, який вставляє на сторінку зображення. Для нього обов'язково потрібно вказувати атрибут src, який задає адресу картинки (інакше браузер не зможе завантажити її).

У загальному випадку тег записується наступним чином: 

<ім'я тега атрибут1="значення1" атрибут2="значення2" ...>

Ось декілька прикладів тегів з атрибутами: 

<p class="important"> ... </p>

<a class="external" href="http://cpto.dp.ua"> ... </a>

<img class = "logo" src = "logo.png">

Оформлення смислових частин сторінки абзацами:

  • <p>…</p> − розбиває текст на параграфи (абзаци);
  • <br> − обриває рядок і починає новий;
  • <nobr>…</nobr> − забороняє перенос тексту на інший рядок;
  • <wbr>…</wbr> − дозволяє розривати довгі слова (наприклад, при виведенні довгих медичних термінів);
  • <!- - … - -> − тег коментарів; розміщений в ньому текст не відображається на web-сторінці.

Основні теги форматування тексту та елементів дизайну

  • <hn>…</hn> − керує розміром символів в заголовках (1≤n≤6); зі збільшенням n розмір шрифту зменшується.
  • <big>...</big> − збільшує розмір шрифту на 10% у порівнянні з базовим.
  • <small>…</small> − зменшує розмір шрифту на 10% у порівнянні з базовим.
  • <pre>…</pre> − позначає фрагмент тексту, форматування якого здійснено наперед; зручно використовувати при виведенні на екран текстів програм на мовах програмування, або при виведенні тексту, який містить спеціальні символи; в деяких випадках замінює тег <nobr>…</nobr>.
  • <code>…</code> − позначає фрагмент тексту усередині рядка, який вдповідає елементам коду.
  • <hr> − непарний тег горизонтальної лінії; може бути засобом організації тексту і дизайну.
      Атрибути тега <hr>:
    • align=left (right, center) − вирівнювання лінії на сторінці;
    • sіze=n − товщина лінії в пікселях (1≤n≤175); за замовчуванням 2 пікселі;
    • color="колір" − колір лінії;
    • width=n% − ширина лінії у відсотках до ширини екрану;
    • noshade − атрибут без параметра; показує об'ємні лінії, встановлюється за замовчуванням;
    • shade − атрибут без параметра; показує контур лінії; якщо заданий колір, то атрибут не працює.
  • <left> ... </left> − вирівнювання тексту по лівому краю сторінки.
  • <right> ... </right> − вирівнювання тексту по правому краю сторінки.
  • <center> ... <center> − вирівнювання тексту по середині сторінки.

    Наведені вище теги вирівнювання дещо застаріли. Для цього краще використовувати відповідні властивості CSS.

  • <b> … </b> − виділення напівжирним шрифтом.
  • <i> … </i> − виділення курсивом.

    Слід зазаначити, що теги <strong> … </strong> і <em> … </em> також роблять текст, який в них заключений, напівжирним і курсивним, відповідно. Але, окрім цього, вони несуть і змістовне навантаження − текст, який розміщений в них, важливий. А якщо текст необхідно виділити лише візуально, то використовуть теги <b> та <i>.

  • <sub> … </sub> − нижні індекси.
  • <sup> … </sup> − верхні індекси.
  • <s> … </s> − закреслений текст.
  • <u> … </u> − підкреслений текст.
  • <del> … </del> − виділяє текст (закресленням), який необхідно позначити як видалений (застарілий).
  • <ins> … </ins> − виділяє текст (підкресленням), який необхідно позначити як вставлений.
  • <abbr> ... </abbr> − використовується для виділення абревіатур.
  • <acronym> ... </acronym> − використовується при виділенні акронімів (наприклад: і т.д.; і т.п.).
  • <address> ... </address> − виділення контактної інформації − електронної або поштової адреси, телефону і тощо.

 

Додаткові можливості форматування

  • <blockquote> … </blockquote> − позначає цитату; текст цитати розташовується з відступом від лівого краю вікна і може використовуватися в самих різних випадках. Якщо необхідно, лапки задаються явним чином.
      Атрибути:
    • site=URL − адреса джерела цитати, якщо вона з мережі Інтернет.

  • <q>…</q> − використовується для виділення цитати усередині абзацу.
  • <cite>…</cite> - використовується для того, щоб виділити джерело цитати, назву твору або автора.
  • <marquee> ... </marquee> − рядок символів, який біжить.
      Атрибути:
    • bgcolor="колір" − колір фону;
    • height=n − висота рядка в пікселях (k% − висота рядка у відсотках);
    • align=... − вирівнювання (top − по верхньому краю, middle − по центру, bottom − по нижньому краю);
    • direction=... − напрям руху рядка (left, right);
    • behavior=... − поведінка рядка (scroll − безперервний рух, slide − вийшов і зупинився, alternate − реверс);
    • loop=... − кількість проходів рядка (значення: число);
    • scrollamount=... − швидкість руху рядка (значення: число);
    • scrolldelay=... − часовий інтервал між кроками в мілісекундах (значення: число); рядок може рухатися ривками.

Теги для розмітки сторінки

  • <header>…</header> − визначає шапку сайту.
  • <nav>…</nav> − призначений для створення навігаційних меню.
  • <aside>…</aside> − призначений для створення бокових панелей (сайдбарів).
  • <article>…</article> − допомогає створювати нові матеріали на сторінці, додавати контент до сторінки.
  • <section>…</section> −  задає розділ документа, може застосовуватися для блоку новин, контактної інформації, глав тексту, вкладок в діалоговому вікні тощо; зазвичай містить заголовок. Допускається вкладати один тег <section> всередину іншого.
  • <footer>…</footer>  − визначає нижню частину сторінки, тобто підвал.

Приклад розмітки сторінки:

  <html>
        <head>
        <title>Приклад  документу HTML</title>
        </head>
        <body>
        <header>
        <h1> Ласкаво  просимо до нашого сайту</h1>
        </header>
        <article>
        <p>Перший  матеріал на сайті</p>
        </article>
        <footer>  Copyriht © 2019 рік </footer>
        </body>
  </html>
Переглянути Редагувати

 

ЗАУВАЖЕННЯ: На цій сторінці приведено далеко не повний перелік наявних тегів. Ми пропонуємо вам завантажити Перелік тегів у алфавітному порядку.

Питання для самоконтролю:

  1. Які теги призначені для розмітки сторінки?
  2. Які теги керують розмірами шрифтів? шрифтів заголовків?
  3. Як задати нижній (верхній) індекс у тексті документа?
  4. За допомогою якого тегу можна провести горизонтальну лінію?
  5. Як створити рядок, який біжить?
  6. Які теги керують вирівнюванням тексту?