Работа с текстом в HTML
Сегодня мы будем разбирать работу с текстом при создании сайта на HTML.
Начнем наше изучение с HTML тега <p> - это тег абзаца, который будет использоваться Вами постоянно, думаю тут все понятно, и все знают, что такое абзац. Но я приведу Вам пример кода из двух абзацев, посмотрев на него, Вы все поймете.
Напишем следующее:
<html>
<head>
<title>Форматирование текста</title>
</head>
<body>
<p>Это придуманный текст, который напечатан для того, чтобы показать Вам суть тега p.</p>
<p>Второй абзац.</p>
</body>
</html>
Вот наш результат:
Видим, что каждый тег абзаца выводится с новой строки, при этом, между ними имеются определенные отступы как сверху, так и снизу.
Приступим к тегам заголовков, их у нас всего 6, а именно: тег h1, h2, h3, h4, h5, h6.
Пишем следующий код:
<html>
<head>
<title>Форматирование текста</title>
</head>
<body>
<h1>Первый уровень заголовка.</h1>
<h2>Второй уровень заголовка.</h2>
<h3>Третий уровень заголовка.</h3>
<h4>Четвертый уровень заголовка.</h4>
<h5>Пятый уровень заголовка.</h5>
<h6>Шестой уровень заголовка.</h6>
</body>
</html>
Результат таков:
Теги заголовков выделяются жирным шрифтом, идут от большего к меньшему. Заголовок h1 является самым большим, а заголовок h6 самый маленький. Заголовками обычно выделяют название статьи, какого-либо раздела, какой-то важный элемент страницы.
У некоторых из Вас может возникнуть следующий вопрос, а как у абзаца текст выделить жирным?
Существуют два полезных HTML тега, которые отвечают за форматирование текста в HTML, это HTML тег <b> и HTML тег <i>, <b> делает текст жирным шрифтом, а <i>, придает курсивное начертание для текста.
Возьмем наш первый пример и добавим туда эти два тега:
<html>
<head>
<title>Форматирование текста</title>
</head>
<body>
<p>Это <b>придуманный текст</b>, который напечатан для того, чтобы показать Вам суть тега p.</p>
<p><i>Второй абзац.</i></p>
<p><b><i>Второй абзац.</i><b></p>
</body>
</html>
Посмотрим на результат:
Видим, что в первом абзаце слова, придуманный текст, выделены жирным шрифтом, если посмотреть на код, то видим что это благодаря тегу <b>, следующий абзац написан курсивом благодаря тегу <i>, ну и наконец, третий абзац написан жирным шрифтом и курсивом одновременно. Хочу заметить, что мы можем использовать теги внутри друг друга, как мы указали в данном случае. Мы написали, чтобы текст, который находится в третьем абзаце <p>, был выделен жирным шрифтом, а в теге <b> указали, что хотим, чтобы наш текст третьего абзаца, который выделен жирным шрифтом, был еще и курсивным. Вот так мы получили нужный нам результат.
Напоследок мы применим немного стилей к нашему коду:
<html>
<head>
<title>Форматирование текста</title>
</head>
<body>
<p style="color: red">Это <b>придуманный текст</b>, который напечатан для того, чтобы показать Вам суть тега p.</p>
<p style="color: green"><i>Второй абзац.</i></p>
<p style="color: blue"><b><i>Второй абзац.</i><b></p>
</body>
</html>
Думаю, о результате выполненного кода, Вы уже догадались сами, но все же покажу:
Здесь мы встроили CSS стили в тег <p>, указав каждому абзацу свой цвет текста. Задали атрибут color и его значение, а именно конкретный цвет нашего текста.
На этом я завершаю нашу статью, мы в ней разобрали много полезного, Вам остается лишь самим попробовать свои силы и немного потренироваться.
