HTML Абзацы
<p> элемент HTML определяет абзац:
Пример
Примечание: Браузеры автоматически добавляют пробел (поле) до и после абзаца.
Отображение HTML-кода
Вы не можете быть уверены, как будет отображаться HTML.
Большие или малые экраны, и размер окна будут создавать различные результаты.
С помощью HTML нельзя изменить вывод, добавляя лишние пробелы или дополнительные строки в HTML-код.
При отображении страницы браузер удалит лишние пробелы и дополнительные строки:
Пример
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Не забывайте, что конечный тег
Большинство браузеров будут корректно отображать HTML, даже если вы забыли конечный тег:
Example
Приведенный выше пример будет работать в большинстве браузеров, но не полагается на него.
Примечание: Удаление конечного тега может привести к непредвиденным результатам или ошибкам.
Разрывы строк HTML
<br> элемент HTML определяет разрыв строки.
Используйте <br> , если требуется разрыв строки (Новая строка) без запуска нового абзаца:
Пример
Тег <br> является пустым тегом, что означает, что он не имеет конечного тега.
Стихотворение проблема
Это стихотворение будет отображаться на одной строке:
Пример
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Элемент HTML <pre>
Элемент HTML <pre> определяет предварительно отформатированный текст.
Текст внутри элемента <pre> отображается в шрифте фиксированной ширины (обычно Courier) и сохраняет пробелы и разрывы строк:
Основы HTML #3215
Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.
Именно с помощью HTML-тегов браузеру отдается информация о том, что именно на странице будет заголовком первого уровня, что абзацем, что подзаголовком, где будет расположена ссылка, куда ссылка будет вести и т.д.
- Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег <h1> и в конце закрывающий тег </h1> (об открывающих и закрывающих тегам мы поговорим чуть ниже).
- Подобным же образом можно выделять подзаголовки других уровней (от <h2> до <h6>).
- Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги <p> и </p> соответственно (открывающий и закрывающий теги).
- Чтобы сделать перенос строки, достаточно просто поставить тег <br> там, где он необходим.
Подобным образом, зная необходимые Вам теги и правила их использования, Вы сможете формировать HTML-документы с описанием содержимого страниц.
Теперь перейдем к более детальному описанию нюансов работы с HTML.
Структура страницы
Любая страница на сайте — это текстовый файл с расширением .html.
Именно внутри этого файла лежит все содержимое страницы — тексты, теги и т.д.
Внутри любого такого файла должны обязательно присутствовать несколько обязательных тегов, таких как:
- <!DOCTYPE html> в начале документа.
- <html> в начале и </html> в конце документа — между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
- <head> в начале и </head> в конце перечисления служебных тегов.
- <title> — служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
- <meta> — служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:
Атрибуты и теги
Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как <html>, <head> и <body>.
Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега <body>).
Для начала расскажем, что такое теги и что такое атрибуты.
- Тег — это именно то, что заключено в угловые скобки, например <b>. Чаще всего теги существуют в паре — открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег <b>, а в конце </b> — весь текст между <b> и </b> будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег <br> для переноса строки — его достаточно просто вставить в нужное место).
- Атрибут — дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: <a href = «https://megagroup.ru» >Наш сайт </a>. Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги <a> и </a> — именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href=»тут вставляется ссылка». Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.
Основные теги
Теперь, когда мы разобрались, что такое теги и что такое атрибуты, приведем для примера наиболее популярные и часто используемые теги.
Предполагают работу с открывающим и закрывающим тегами:
- <p> — тег для обозначения абзаца в тексте. Весь абзац обрамляется в <p> и </p>
- <h1> , <h2> , <h3> , <h4> , <h5> , <h6> — теги для создания заголовков разного уровня в тексте. В заголовке h1 рекомендуется прописывать основной заголовок всей страницы, в h2 — название блоков страницы, в h3 — название подблоков и т.д.
- <b> — тег для выделения текста жирным шрифтом.
- <i> — тег для выделения текста курсивом.
- <a> — тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: < a href = » http:// site.ru » > наш сайт </ a >
Самозакрывающиеся теги (не требуют закрывающегося тега):
- <br> — перенос строки.
- <hr> — тег для вставки горизонтальной линии в текст.
- <img> — тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как < img src= «URL картинки» alt= «альтернативный текст» >.
Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между <!— и —>, у Вас должно получиться следующее:
Это лишь некоторые из возможных тегов.
С более полным перечнем Вы можете ознакомиться в подробном справочнике по ссылке.
Списки в HTML
Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.
Для создания нумерованного списка Вам понадобятся теги <ol> (в начале и закрывающий </ol> в конце списка) и <li> (в начале и закрывающий </li> в конце каждого пункта). Таким образом у Вас должен получиться список примерно следующего вида.
Для создания же маркированного списка Вам понадобятся теги <ul> и <li> соответственно.
Таблицы в HTML
Основным тегом в таблице будет <table>. Именно между <table> и </table> будет заключена вся информация о ячейках.
Следующим тегом, будет тег <tr>. Между <tr> и </tr> будет лежать информация о рядах таблицы.
Внутри каждого ряда должны быть теги <td>. Соответственно, между <td> и </td> необходимо указывать содержимое ячеек ряда.
Таким образом, в итоге таблица в HTML будет выглядеть примерно так:
Как можно заметить, в самом начале у тега <table> есть атрибут border — в нем указывается толщина рамки в пикселах.
Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т.д.
С более подробной информацией по работе с таблицами и их атрибутами, Вы можете ознакомиться по ссылке.
Дополнительная информация
В данной инструкции мы привели лишь основную информацию о том, как работает HTML, что он из себя представляет, как с ним работать.
Само собой, для того чтобы создавать полноценные шаблоны страниц, наполнять их контентом и т.д. Вам понадобятся более обширные познания в этом языке разметки.
Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:
Абзацный отступ HTML
Для облегчения восприятия и чтения текст разделяют на части. Например, книга состоит из глав, газета – из рубрик, статья – из подзаголовков, которые имеют собственную структуру: отступы, абзацы, списки и т.д.
На размещенный в интернете текст тоже распространяется данное правило. Он должен иметь понятную пользователю структуру. Ведь от того насколько удобно и просто он будет восприниматься, в первую очередь зависит, задержится ли пользователь на вашем сайте и как усвоит прочитанную информацию.
Чтоб создать абзацы в HTML применяется тег p разделяющий документ на вертикальные отступы, добавляя внизу и вверху пустую строчку.
Заглавная строка
Это первая строчка абзаца с отступом. Раньше, когда книги переписывались вручную было принято делать ее красными чернилами. Со временем традиция упразднилась, но название осталось.
Хотя наличие отступов облегчает чтение, создавая интернет-страницы, их значение недооценивают и поэтому редко оформляют.
Автоматическое добавление красной строки осуществляется благодаря свойству CSS text-indent, оно позволяет устанавливать фиксированный отступ перед первой буквой абзаца. Введенные данные определяют на какое расстояние красная строка сдвинется вправо. Существует способ сделать текст выступающим (передвинуть начало абзаца влево), введя отрицательные цифры.
В качестве значений допускается указывать сантиметры (cm), пиксели (px) или другие единицы измерения, понятные CSS. Но наиболее разумно использовать проценты % или относительные единицы (em), которые автоматически соответствуют заданному размеру шрифта.
Следует учитывать, на разные экраны человек смотрит с различного расстояния, и 1 сантиметр на мониторе компьютера и на смартфоне воспринимается по-разному. Например, когда установленный шрифт 2in, то 1em означает 2in. Также допустимо указывать процент, когда величина отступа рассчитывается в % от ширины блока текста.
Если необходимо создать для отдельного абзаца индивидуальный отступ, дополнительно внутри HTML элемента p прописывается атрибут style со значеним text-indent, и вносятся требуемые величины отступа.
Для более гибкой настройки представляемого текста можно создать отдельные классы CSS с различными отступами, и применять их в зависимости от важности и необходимости персонализации контента.
Хотите, чтобы абзацы по умолчанию начинались с фиксируемого отступа, используйте свойство CSS text-indent.
HTML :: Абзац, заголовки и преформатированный текст
Под понимается процесс изменения внешнего вида текста, который включает в себя разбиение на абзацы, выравнивание текста, определение абзацных отступов, шрифтов, интервалов между строками, словами и отдельными буквами и т.д. В HTML для этого существует достаточное количество тегов, большинство из которых мы и рассмотрим в данной главе.
Для разбиения текста на абзацы в HTML используется элемент «Абзац» , который формируется парным тегом <p> (от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац» . Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами.
Заголовки в HTML
Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные — поменьше, по мере убывания своей важности.
Преформатированный текст в HTML
А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент «преформатированный текст» , который формируется парным тегом <pre> (от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент.
Рассмотрим наглядный пример использования вышеперечисленных элементов (см. пример №1 ).
Пример №1. Код страницы, содержащей абзацы, заголовки и преформатированный текст
При отображении кода примера в браузере хорошо видны вертикальные отступы между заголовками, абзацами, преформатированным текстом, которые браузер по умолчанию добавляет к блочным элементам. Но, опять же повторимся, в HTML нам важна логическая разбивка документа на элементы, а внешний вид мы будем изменять потом при помощи стилей CSS .