Основні теги HTML
Параграфи.
Перш ніж вивчати теги форматування HTML, подивимося як введений текст відобразиться, якщо не будуть застосовані ніякі теги крім тегів <html> і <body>. Наступний приклад демонструє такий документ HTML.
<html>
<body>
Цей текст буде показаний у вікні браузера.
</body>
</html>
Приклад виконання даного HTML – коду
Цей простий приклад документа HTML, який містить мінімальну кількість тегів HTML і демонструє, як текст всередині елемента body відображається в браузері.
Якщо ввести великий обсяг тексту таким способом, то читати його буде дуже незручно. Логічніше розбити його на параграфи, як у книзі, які підвищують читабельність тексту, і крім того виділяють смислові блоки.
Наступний приклад показує, як відображаються параграфи
<html>
<body>
<p> Це параграф 1. </p>
<p> Це параграф 2. </p>
<p> Це параграф 3. </p>
</body>
</html>
Цей приклад демонструє, як в браузері виводиться текст всередині елементів параграфа. Можна бачити, що за замовчуванням текст кожного параграфа виводиться у вигляді окремого блоку. Кожен з таких блоків відділяється від попередніх і наступних блоків сторінки порожнім рядком. Однак відображення параграфа браузером може бути легко змінено за допомогою таблиці стилів.
Можна помітити, що параграфи можна записувати без закриває тега </p>, проте краще цього не робити, в наступній версії HTML все теги потрібно буде закривати.
У різних браузерах на різних моніторах з різним дозволом сторінка буде відображатися по- різному, тому не варто форматувати за допомогою додавання порожніх рядків і прогалин. Будь-яке число прогалин замінюється одним.
Використання порожніх параграфів <p> для вставки порожніх рядків є поганим стилем, замість цього використовуйте тег <br/>.
Заголовки.
Заголовки визначаються за допомогою тегів від <h1> до <h6>. <h1> визначає заголовок найбільшого розміру, а <h6> визначає заголовок самого маленького розміру.
<h1> Це заголовок першого рівня </h1>
<h2> Це заголовок другого рівня </h2>
<h3> Це заголовок третього рівня </h3>
<h4> Це заголовок четвертого рівня </h4>
<h5> Це заголовок п’ятого рівня </h5>
<h6> Це заголовок шостого рівня </h6>
Заголовки автоматично відокремлюються додатковими проміжками від інших елементів документа.
Переноси рядків.
Для перенесення всередині параграфа використовується тег <br>, який виконує примусовий перенос рядка.
<html>
<body>
<p> Це <br> пара <br> граф з переносами рядків</p>
</body>
</html>
Тег <br> не має закриває тега. Тому для сумісності з майбутніми версіями стандарту рекомендується наступне написання тега <br/>
горизонтальна лінійка
Розділяти різні елементи можна за допомогою горизонтальної лінійки, для цього використовуйте тег <hr>:
<html>
<body>
<p> Цей параграф відобразиться зверху горизонтальної смуги. </p>
<hr>
<p> Цей параграф відобразиться знизу горизонтальної смуги. </p>
</body>
</html>
Тег <hr> не має закриває тега. Тому для сумісності з майбутніми версіями стандарту рекомендується наступне написання тега <hr/>. Для цього тега визначено ряд атрибутів, але вони є застарілими. І хоча їх застосування можливе, але консорціум W3C їх використовувати не рекомендує. Замість них слід використовувати таблиці стилів.
Коментарі в HTML
Тег коментаря використовується для вставки коментарів у вихідний код HTML. Коментарі будуть проігноровані браузером. Коментарі можна використовувати для пояснення коду, що може допомогти при редагуванні вихідного коду в майбутньому.
<! – Це коментар ->
Ось приклад:
<html>
<body>
Цей текст буде показаний у вікні браузера.
<! – Цей текст не буде показаний, це коментар. ->
</body>
</html>
додаткові приклади
Кращим способом вивчення HTML є робота з прикладами. Розглянемо кілька прикладів, які ілюструють деякі елементи форматування документів.
додаткові параграфи
Цей приклад демонструє деякі особливості поведінки за замовчуванням елементів параграфа.
<html>
<body>
<p>
цей параграф
містить багато прогалин
у вихідному коді,
але браузер
це ігнорує.
</p>
</body>
</html>
перенесення рядків
Цей приклад демонструє використання перенесення рядків у документі HTML.
<html>
<body>
<p>
Щоб виконати перенос <br> рядків <br> в
<br> параграфі, <br> використовуйте тег br. </p>
</body>
</html>
Цей приклад демонструє деякі проблеми з форматуванням HTML. Спробуємо сформатувати вірші:
<html>
<body>
<p>
У лісі народилася ялиночка.
У лісі вона росла.
Взимку і влітку струнка,
Зелена була.
</p>
<p> Зверніть увагу, що браузер просто проігнорував використане форматування! <p>
</body>
</html>
заголовки
Цей приклад демонструє теги, які виводять заголовки в документі HTML.
<html>
<body>
<h1> Це заголовок рівня 1 </h1>
<h2> Це заголовок рівня 2 </h2>
<h3> Це заголовок рівня 3 </h3>
<h4> Це заголовок рівня 4 </h4>
<h5> Це заголовок рівня 5 </h5>
<h6> Це заголовок рівня 6 </h6>
<h1 align=”center”> Це заголовок 1, він вирівняний по центру сторінки. </h1>
<p> Використовуйте теги заголовків тільки для заголовків.
Не використовуйте їх просто для того, щоб виділити щось жирним шрифтом.
Використовуйте для цього інші теги. </p>
</body>
</html>
горизонтальна лінійка
Цей приклад демонструє, як використовувати горизонтальну лінійку.
<html>
<body>
<p> Тег <hr> визначає горизонтальну лінійку : </p>
<hr>
<p> Це параграф </p>
<hr>
<p> Це параграф </p>
</body>
</html>
коментар
Цей приклад демонструє, як використовувати коментар у вихідному коді HTML.
<html>
<body>
<! – Цей коментар виводитися не буде – >
<p> Це звичайний параграф. </p>
</body>
</html>
фоновий колір
Цей приклад демонструє використання кольорового фону на сторінці HTML. При виборі фону завжди перевіряйте, щоб текст був добре читаємо !
<html>
<body bgcolor=”yellow”>
<h2> Дивись : Кольоровий фон ! </h2>
</body>
</html>
Таблиця основних тегів HTML
<html> Визначає документ HTML
<body> Визначає основну частину або тіло документа
<h1> – <h6> Визначає заголовки з 1 по 6
<p> Визначає параграф
<br> Вставляє одиничний перенесення рядка
<hr> Визначає горизонтальну лінійку
<! -> Визначає коментар
Коментарі
Написати коментар
Вибір редакції:
Вам може сподобатись:
