Теги розмітки тексту

Для управління текстом і зміни його виду існує досить велика кількість різних елементів. Що не дивно, адже текст - це найпопулярніший вид інформації.

Теги рядка та абзацу

Текст в HTML вводиться в будь-якому місці між тегами <BODY></BODY>. Текст автоматично розміщується за шириною вікна браузера. Якщо ж необхідно на Web-сторінці помістити порожній рядок або забезпечити в потрібному місці перехід до наступного рядка, слід використовувати спеціальні теги: тег розриву абзацу <P></P>, та розриву рядка <BR>.

Тег розриву абзацу дає команду браузеру закінчити поточний абзац і помістити порожній рядок перед наступним абзацом. Тег розриву рядка вказує про закінчення поточного рядка і переходу до наступного. Для тегу розриву абзацу використання закриваючого тегу </P> не є необхідним.

Теги виділення тексту

Мова HTML надає можливість виділяти фрагменти тексту напівжирним шрифтом, курсивом, підкресленням тощо.

Теги виділення тексту

Тег	Стиль	Приклад
<B>	Напівжирний шрифт	Напівжирний
<strong>	Напівжирний шрифт	Напівжирний
<I>	Курсив	Курсив
<em>	Курсив	Курсив
<U>	Підкреслення	Підкреслений текст
<SUB>	Підрядковий текст	Текст _{підрядковий текст}
<SUP>	Надрядковий текст	Текст ^{надрядковий текст}
<STRIKE>	Перекреслення	~~Перекреслений~~

Тег <strong> визначає важливість зазначеного тексту.

Тег <b> призначений для виділення тексту без додання йому особливої важливості.

Візуально обидва тега однакові, вони виділяють текст напівжирним. Теги <strong> і <em> на сайті для слабозрячих будуть виділяти текст інтонацією

Теги заголовків

На сайті заголовки дуже важливі. Заголовки в HTML допомагають пошуковим системам виділити на сайті найважливішу інформацію, а пошукові системи винагороджують ваш сайт високими позиціями у рейтингу.

У мові HTML для виділення заголовків передбачено ціле сімейство тегів: від <h1> до <h6>. Тег <h1> позначає найважливіший заголовок (заголовок верхнього рівня), а тег <h6> позначає підзаголовок самого нижнього рівня.
На практиці рідко зустрічаються тексти, в яких зустрічаються підзаголовки нижче третього рівня. Тому найбільш часто використовуваними тегами заголовків є: <h1>, <h2> і <h3>.
Стандарт мови HTML нараховує 11 атрибутів тега заголовка, але не всі вони реалізовані у більшості програм-браузерів.
Найбільш використовуваний атрибут для тегу <H> - ALIGN, який дозволяє вирівнювати текст за правою, лівою межею або по центру. За замовчуванням текст вирівнюється за лівою межею. Даний атрибут застосовується також до графіки і таблиць. Значення атрибута ALIGN такі ж, як і для тегу розбиття тексту на абзаци <р>

У своїй папці на робочому диску створіть папку markup (розмітка тексту). В цю папку помістіть файли з назвами markup1.html (відповідно до номеру завдання).

ЗАВДАННЯ 1:

Розмітьте за допомогою тега p ще три речення:

«Абзац служить для ... одиниць викладу.»
«Виділення фрази в ... смисловий акцент.»
«Для виділення абзацу ... абзацний відступ.»

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Абзаци</title>

</head>

<body>

<p>Абзац — відрізок писемного мовлення, що складається з декількох пропозицій.</p>
Абзац служить для угруповання однорідних одиниць викладу.

Виділення фрази в особливий абзац підсилює падаючий на неї смисловий акцент.
Для виділення абзацу його зазвичай друкують з нового рядка або роблять абзацний відступ.
Ось такі вони, абзаци.

</body>

</html>

ЗАВДАННЯ 2:

Опис завдання:

1. Загорнути заголовки в правильні <h> теги.

· Головний заголовок – <h1>, розмістити по центру

· Підзаголовок – <h2>, слова у абзаці"не рекомендується" зробити жирним для привернення уваги!

· Другий і Третій – <h3> курсивним шрифтом

2. Текст потрібно оформити як параграф - <p>

Текст для завдання (виділити, зкопіювати і вставити у свій файл):

1. Головний заголовок

Параграф, який розповідає про основну ідею сайта або додатка.

Не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня.

1.1. Підзаголовок

Параграф, який відноситься до підзаголовка.

При використанні підзаголовків не рекомендуєтся пропускати рівні заголовків, тобто після заголовка H1 має йти підзаголовок H2 і тільки потім підзаголовок H3.

1.1.1. Другий підзаголовок

Параграф, який відноситься до другого підзаголовка.

1.1.2. Третій підзаголовок

Параграф, який відноситься до третього підзаголовка.

ЗАВДАННЯ 3.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Байки
<body>
<h1>Розмітка текссту
<p Основи HTML-розмітки - це правила складання документів, аналогічні діловодства, але стосовно до веб-сторінок. Вони зобов'язують нас використовувати спеціальний синтаксис, що включає в себе елементи, атрибути і ряд інших понять.

ЗАВДАННЯ 4:

1. Створіть сторінку під назвою work1.html

2. Назва сторінки work1.html (title) - Самостійна робота

3. Опис сторінки homework1.html (description) - Це сторінка з самостійною роботою

4. Ключові слова - "самостійна робота, основи web-дизайну"

Текст та оформлення сторінки:

Перший параграф. Текст сторінки Урок HTML розмітки. Показує як працює тег параграф. Він відокремлює текст і виводить текст з нового рядка. Також тег параграф створює відступ від іншого блочного елемента.
Другий параграф. Текст сторінки Урок HTML розмітки.
HTML пропонує два тега для створення індексу: <???> - ^{верхній} індекс і <???> - індекс _нижній
Курсив для текста визначають два тега: <?> і <??>.

Результат має бути таким: