Форматирование текста в HTML
Абзацы, заголовки и выделение текста
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега таким образом:
Возникает еще одна проблема. Как быть если нам нужно текст, который находится внутри одного абзаца, сделать в какой-то определенной его точке принудительный перенос строки.
Часто это может понадобиться при форматировании определенным образом текста на странице.
Для того, чтобы выполнить этот самый перенос строки в 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>
. Смотрите пример:
Кроме жирного можно сделать также и курсив с помощью тега <i>
:
Фрагмент текста можно подчеркнуть или даже зачеркнуть, для этого используются теги <u> и <strike>
Обратите внимание на то, что теги <b>, <i>, <u> и <strike>
следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а указанные теги делают жирным или курсивом отдельные кусочки текста.
Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега <ul>
, внутри которого обязательно должны идти теги <li>
. Тег ul задает сам список, а в теги li следует размещать пункты списка (то есть одному li соответствует один маркер списка). Смотрите пример:
Результат выполнения кода:
- пункт списка
- пункт списка
- пункт списка
Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>
, а пункты таких списков также создаются через теги li.
Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть вам не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы вы расставляли ее вручную).
Давайте сделаем упорядоченный список, используя тег ol:
Результат выполнения кода:
- пункт списка
- пункт списка
- пункт списка
Отдельно теги 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>
текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.
Приведенный фрагмент кода создает закладку и ссылку на нее:
Изображения
Изображения придают сайту уникальный вид, делают его более выразительным и привлекательным, а разработчику сайта позволяют расширить арсенал средств для управления дизайном. Определенную информацию, вроде графиков и схем, проще и нагляднее передать через рисунки, чем долго описывать, что к чему. Так что правильное использование изображений на сайте только улучшит его.
Для вставки изображения в 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 одержит уверенную победу.