Привет, друзья!
Продолжаем нелегкий путь изучения HTML. Думаю, что каждый согласится, что основную часть подавляющего большинства веб-страниц занимает текст. Цель данного урока - научиться работать с текстом в HTML, правильно его представлять и оформлять. Итак приступим.
Способы представления текста в HTML
Веб-разработчик имеет довольно обширный набор вариантов для представления текстовых данных на странице, вот наиболее распространенные из них:
- Заголовки
- Абзацы
- Цитаты
- Списки
Кроме способов представления есть также набор инструментов для управления внешним видом текста, но все по-порядку.
Открываем уже созданный HTML-файл с базовой разметкой и приступаем к работе.
Заголовки в HTML
Заголовки служат для многих весьма полезных целей, с их помощью Вы можете:
- привлечь внимание читателя
- задать название для страницы, статьи или определенного блока информации
- задать базовую структуру страницы, поделив ее на тематические блоки
- повысить читабельность страницы
Как создать заголовок в HTML?
Для создания заголовков используют специальные теги "h1" - "h6". Возникает вполне логичный вопрос: для чего аж шесть различных тегов для создания обычных заголовков? Все очень просто: тег состоит из двух частей (буквы h и цифры !писать нужно без пробелов). Первая часть (буква h) указывает на то, что это заголовок, вторая часть (цифра) указывает на приоритет заголовка. То есть "h1" - главный заголовок, "h2"-"h6" уже считаются подзаголовками. Чем большая цифра стоит после буквы "h" тем меньше "вес" заголовков.
С теорией разобрались, пора проверить на практике, как работают теги "h1" - "h6". Добавьте в свой документ следующий код:
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Сохраните изменения и посмотрите на результат в браузере. Думаю, что объяснение того, как отображаются заголовки будут лишними.
Важно!
На одной странице должно быть не более одного заголовка "h1", и не рекомендуется использовать более 2-3 заголовков "h2", количество других не нормируется, но не должно быть больше, чем необходимо.
Абзацы в HTML
Абзац - основной "строительный блок" при создании текстового контента. Чтобы создать абзац необходимо применить тег "p". Поветаємось до нашего редактора кода и вводим следующее:
<p>
Это первый, созданный мною абзац для веб-страницы.
</p>
Сохраняем, смотрим.
Примечание
Контент, размещенный после заголовков ("h1"-"h6") или абзаца ("p") всегда будет идти "с новой строки", то есть размещаться под ними.
Списки в HTML
Думаю нет смысла объяснять для чего используются списки, скажу только то, что бывают они двух видов: нумерованные и ненумерованные.
Создание нумерованного списка в HTML
Для того, чтобы создать нумерованный список, нам понадобится конструкция из тега, который задает элемент "нумерованный список" и тегов, которые указывают "элемент нумерованного списка". Теги "ol" и "li". Вся конструкция будет выглядеть следующим образом:
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
Создание ненумерованного или маркированного списка в HTML
После выполнения приложения нумерованного списка Вы должны были увидеть, что у Вас появился список, каждый элемент которого начинается с порядкового номера (1, 2, 3...). Если Вы хотите создать список, в котором бы его элементы не нумеровались, а просто отмечались значками (маркерами) то Вам необходимо воспользоваться ненумерованным или, как еще его называют, маркированным списком. Создается он так же, как и нумерованный, только вместо тега "ol" в качестве контейнера используется тег "ul":
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Вложенные (сложные) списки в HTML
При необходимости есть возможность создания сложных списков: когда структура элементов списка делится на несколько уровней. Для реализации такого решения нужно просто создать новый дочерний (вложенный) список внутри элемента уже существующего (родительского) списка, это будет выглядеть следующим образом:
<ol>
<li>
Первый элемент родительского списка
<ul>
<li>Первый элемент вложенного списка</li>
<li>Второй элемент вложенного списка</li>
<li>Третий элемент вложенного списка</li>
</ul>
</li>
<li>Второй элемент родительского списка</li>
<li>Третий элемент родительского списка</li>
</ol>
Примечание
При создании сложных списков неважно, типип списков Вы используете (нумерованные/ненумерованные) - их можно комбинировать любым образом.
Цитаты в HTML
Все мы знаем, что такое цитата, не так ли? И иногда возникает необходимость в использовании доної языковой конструкции. Поэтому давайте писать цитаты правильно. В HTML для задания цитат существует сразу два теги: тег "q" и тег "blockquote". Тег "q" предназначен для вставки очень коротких цитат (фраз), тег "blockquote" - позволяет создать целый блок текста с цитируемым материалом. И есть еще один немаловажный тег - это тег "cite", который предназначен для того, чтобы указывать источник цитаты (имя автора, название книги или статьи, ссылки на сайт и т. д). Давайте разбираться на примере, как это все работает:
<q>Пришел, увидел, победил</q>
<cite>Юлий Цезарь</cite>
<br>
<blockquote>
Компьютер - это самый удивительный инструмент,
с которым я когда либо сталкивался. Это велосипед
для нашего сознания
</blockquote>
<cite>Стив Джобс</cite>
Результат:
IMG
Ах да...Новый тег "br" - очень просто: перенос строки. Является одинарным, то есть закрывающего тега у него нет.
Подведем итоги
Прочитав и выполнив все указания из данной статьи Вы должны были освоить базовые навыки для работы с текстом в HTML. Следуя указаниям у Вас получился документ следующего содержания:
<!DOCTYPE html>
<html>
<head>
<title>Урок 2</title>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
<p>
Это первый, созданный мною абзац для веб-страницы.
</p>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
<ol>
<li>
Первый элемент родительского списка
<ul>
<li>Первый элемент вложенного списка</li>
<li>Второй элемент вложенного списка</li>
<li>Третий элемент вложенного списка</li>
</ul>
</li>
<li>Второй элемент родительского списка</li>
<li>Третий элемент родительского списка</li>
</ol>
<q>Пришел, увидел, победил</q>
<cite>Юлий Цезарь</cite>
<br>
<blockquote>
Компьютер - это самый удивительный инструмент,
с которым я когда либо сталкивался. Это велосипед
для нашего сознания
</blockquote>
<cite>Стив Джобс</cite>
</body>
Который в браузере выглядит следующим образом:
Спасибо за внимание!
Буду ждать Ваших вопросов в комментариях =)
Оригинал статьи на моем сайте