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

Абзацы, заголовки и выделение текста

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).

Абзац создается с помощью тега таким образом:

<p>
 Это абзац.
</p>
 
<p>
 Это еще один абзац.
</p>

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

Часто это может понадобиться при форматировании определенным образом текста на странице.

Для того, чтобы выполнить этот самый перенос строки в HTML есть специальный тэг, который называется:

 <br />

Этот тэг нужно вставить в то место, где нужно выполнить принудительный перенос строки.

Элементы p и br - это одни из самых часто встречаемых элементов на веб-странице. С ними часто приходится работать при создании веб-страниц и работе с HTML.

Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

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

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:

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

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:

<p>
 Это обычный текст, а это <b>жирный</b> текст.
</p>

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<p>
 Это обычный текст, а это <i>курсивный</i> текст.
</p>

Фрагмент текста можно подчеркнуть или даже зачеркнуть, для этого используются теги <u> и <strike>

<p>
  Это <u>подчеркнутый</u> текст, а это <strike>зачеркнутый</strike> текст.
</p>

Обратите внимание на то, что теги <b>, <i>, <u> и <strike> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а указанные теги делают жирным или курсивом отдельные кусочки текста.

Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует размещать пункты списка (то есть одному li соответствует один маркер списка). Смотрите пример:

<ul>
	<li>пункт списка</li>
	<li>пункт списка</li>
	<li>пункт списка</li>
</ul>

Результат выполнения кода:

  • пункт списка
  • пункт списка
  • пункт списка

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть вам не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы вы расставляли ее вручную).

Давайте сделаем упорядоченный список, используя тег ol:

<ol>
 
	<li>пункт списка</li>
	<li>пункт списка</li>
	<li>пункт списка</li>
</ol>

Результат выполнения кода:

  1. пункт списка
  2. пункт списка
  3. пункт списка

Отдельно теги li использовать нельзя, только в составе списков. Кроме того, нельзя вкладывать списки в абзацы и наоборот. Списки в списки вкладывать можно, такое практикуется.

Ссылки

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

Гипертекстовый документ–это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. За основу гипертекста взят принцип организации энциклопедических словарей, в которых во многих статьях есть ссылки на другие.

Для определения ссылки используется тег <a>. Этот тег имеет несколько атрибутов, главным из которых являются href, задающий адрес ресурса, на который указывает ссылка. Адрес ссылки может быть абсолютным и относительным. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сервера применяются относительные адреса. Ниже представлены некоторые примеры создания ссылок:

<a href="image.jpg">Изображение</a>
 
<a href="http://www.microsoft.ru">сайт Microsoft</a>
 
<a href="mailto:myname@gmail.com">myname@gmail.com</a>

В первом случае ссылка относительная на картинку, которая находится в той же папке, где и наш документ.

Во втором случае ссылка абсолютная указывает на сайт компании Microsoft,

В третьем случае ссылка открывает почтовый клиент и заполняет поле "Кому" для написания и отправки письма.

URL–адрес, полностью определяющий компьютер, каталог и файл, называется абсолютным. В отличие от относительных, абсолютные адреса могут ссылаться на файлы, расположенные на других компьютерах.

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

Вначале следует задать в соответствующем месте HTML-документа закладку и установить ее имя с помощью атрибута name элемента <a>. Имя ссылки на закладку начинается с символа #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся на другой веб-странице и даже другом сайте. Для этого в адресе ссылки надо указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <a name=..> и </a> текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.

Приведенный фрагмент кода создает закладку и ссылку на нее:

<a name="top"></a>
  ...  
 
<a href="#top">Вверх!</a>

Изображения

Изображения придают сайту уникальный вид, делают его более выразительным и привлекательным, а разработчику сайта позволяют расширить арсенал средств для управления дизайном. Определенную информацию, вроде графиков и схем, проще и нагляднее передать через рисунки, чем долго описывать, что к чему. Так что правильное использование изображений на сайте только улучшит его.

Для вставки изображения в HTML-документ используется элемент <img>, имеющий два обязательных атрибута src и alt.

Атрибут alt содержит так называемый альтернативный текст, который будет отображаться, если по каким-либо причинам изображение недоступно. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения веб-страниц. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут alt. Такой текст позволяет также получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображения происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. По мере же загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В качестве значения параметра alt служит любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Атрибут src задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается абсолютный или относительный адрес файла. К абсолютному адресу относится полный путь к ресурсу, включая протокол передачи данных, наименование сервера, а также имена всех каталогов, ведущих к файлу, например http://www.somewhere.com/images/image.jpg. Относительные адреса описывают местоположение файла относительно текущего каталога (например, "../../images/image.jpg") или корня каталогов сервера (например, "/images/image.jpg"). Если требуемый графический файл находится в том же каталоге, что и HTML-документ, его использующий, то в качестве значения аргумента src допустимо указать просто имя требуемого графического файла.

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

<img src="http://www.somewhere.com/images/beatles.jpg"  alt="Группа Beatles">

Самыми распространенными графическими форматами в Web являются GIF,JPEG, PNG и WEBP.

GIF — наиболее подходящий формат для обмена изображениями между системами. Данный формат поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web. К тому же это единственный формат, который позволяет использовать анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Основной недостаток GIF - ограничение в 256 цветов.

Формат JPEG (Joint Photographic Experts Group - объединенная группа экспертов в области фотографии) поддерживает 24-битные цвета (т.е. около 16 миллионов цветов) и сохраняет яркость и оттенки цветов изображений. Формат предполагает сжатие с потерями: JPEG-сжатие основано на разложении изображений на составляющие, близкие к тем, которые используются в человеческом зрении при отбрасывании информации, не сказывающейся на зрительном восприятии образа. За счет этого достигается высокое сжатие изображений при незначительном ухудшении качества. Степень сжатия и качество изображений находятся в обратной зависимости: чем сильнее сжато изображение, тем ниже его качество (и, соответственно, размер графического файла). В отличие от форматов GIF и PNG формат JPEG не поддерживает прозрачность: при сохранении изображения в данном формате, прозрачные пикселы заполняются определенным цветом.

Формат PNG (Portable Network Graphics - переносимая сетевая графика), призванный заменить формат GIF. Формат PNG существует в двух вариантах: PNG-8 и PNG-24.

PNG-8 практически полностью аналогичен формату GIF, за исключением улучшенного сжатия и отсутствия возможности анимации. PNG-8 хорошо подходит для текста, логотипов, иллюстраций с четкими краями и изображений с градиентной прозрачностью.

PNG-24 аналогичен PNG-8, но использует 24-битную палитру цвета и, подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. А подобно GIF и формату PNG-8, сохраняет детали изображения как, например, в логотипах или иллюстрациях. Формат PNG-24 обладает рядом дополнительных преимуществ, таких как применение улучшенного сжатия, наличие альфа-прозрачности и гамма-коррекции и др. PNG-24 рекомендуется выбирать для полноцветных изображений с четкими краями и мелкими деталями, изображений с мелким текстом, а также для изображений с прозрачными областями. При использовании формата PNG-24 для сжатия полноцветных изображений, он проигрывает формату JPEG в размере созданного файла, т.к. использует сжатие без потерь.

WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве. Да, другие форматы тоже поддерживают сжатие, но технологии, стоящие в основе WebP, куда прогрессивнее. И если сравнивать WebP с конкурентами в соотношении степени сжатия к качеству картинки, то разработка Google одержит уверенную победу.

Направление: