Coding-space.ru
menu

Работа с текстом

Поздравляем! Вы успешно прошли первый модуль и теперь мы имеем достаточно знаний чтобы приступить к изучению HTML тегов.

Элемент <p>...</p>

Вы можете создать параграф текста без особых усилий. В этом Вам приходит на помощь тег параграфа <p>...</p>.
Данный тег легко можно использовать не боясь, что текст сожмется ведь браузеры автоматически добавляют отступы до и после этого тега.

Давайте создадим парочку параграфов, делайте это вместе с нами - откройте файл в текстовом редакторе.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<p>Первый параграф текста</p>
<p>Еще один параграф</p>
</body>
</html>

Результат:

p tag

Перенос строки

Очень часто бывают ситуации когда необходимо оборвать строку и продолжить написание текста на другой строке. В этом нам поможет одиночный тег<br> - этот тег пропускает одну строку, ту, на которой он записан.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<p>Первый параграф текста</p>
<p>Еще один параграф</p>
<p>Перенесем <br> здесь </p>
</body>
</html>

Результат:

br tag

Заголовки <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Это еще одни теги для написания текста, только заголовки отличаются от обычных параграфов своим уровнем важности.
Важность заголовков начинается с 1 - самый важный, и заканчивается 6 - менее важный. Таким образом в HTML существует 6 уровней заголовков и Вы можете выбрать любой из них под свои задачи. Допустим, <h1> - самый важный заголовок, он используется поисковыми системами и сильно влияет на индексацию веб страницы.

Использование заголовков
Заголовок <h1> может быть использован сколь угодно раз на странице, но рекомендуется использовать не больше одного <h1> заголовка на страницу. В то время как все остальные <h2>, <h3>, <h4>, <h5>, <h6> могут быть использованы сколь угодно много.

Давайте внесем в нашу структуру HTML документа заголовки:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>
</body>
</html>

Результат:

br tag

Форматирование текста

Вы можете изменять вид текста с помощью тегов - это не только позволяет изменить вид текста, но и придает важность тексту.

Все теги, приведенные ниже должны иметь закрывающий тег.

Теги жирности: <b>...</b>,<big>...</big>,<strong>...</strong>

Давайте знакомиться, теги для придания жирности:
<b>...</b> - создает текст жирным шрифтом
<big>...</big> - создает текст крупным шрифтом
<strong>...</strong> - логическое задание важного текста

Другие модификаторы шрифтов

Мы можем не только придать жирность шрифтам, но и всячески изменить сам текст:
<i>...</i> - создает текст курсивом
<small>...</small> - позволяет уменьшить текст
<sub>...</sub> - подстрочный текст
<sup>...</sup> - противоположность тегу sub - делает текст надстрочным
<ins>...</ins> - вставленный текст
<del>...</del> - зачеркнутый текст

Добавьте в Вашу разметку эти теги и посмотрите что получится!

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<b>Жирный шрифт</b></br>
<big>Крупный шрифт</big></br>
<strong>Важный шрифт</strong></br>
<i>Курсивный текст</i></br>
<small>Маленький текст</small></br>
<sub>Подстрочный текст</sub></br>
<sup>Надстрочный текст</sup></br>
<ins>Вставленный текст</ins></br>
<del>Удаленный текст</del></br>
</body>
</html>

Результат:

br tag
Браузеры могут отображать жирные теги одинаково, однако эти теги имеют различные смысловые функции.
Например говорящие программы для слепых могут читать разные теги с разной интонацией, которая зависит от важности тега.

Задачи

Напишите статью

В этом задании мы предлагаем Вам написать свою собственную статью про котиков. Используйте вышеупомянутые теги чтобы потренироваться.

Надеемся, у Вас получилась замечательная статья!

Помогайте другим!

Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!