Главная | Обратная связь | Поможем написать вашу работу!

Особенности работы с текстом

Введение

Язык гипертекстовой разметки (HyperText Markup Language, HTML) используется для описания содержания (контента) Web страницы и ее визуального форматирования.

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

HTML-документ можно создавать в любом текстовом редакторе, например в Блокноте. Но лучше использовать программы, которые могут предоставить максимальное количество из представленных ниже возможностей.

1. Подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами для облегчения поиска нужного элемента, ускорения работы и снижения возникновения ошибок.

2. Работа с несколькими документами, которые открываются в отдельных вкладках.

3. Проверка текущего документа на ошибки.

Ссылки на некоторые подобные редакторы приведены ниже:

· PSPad http://www.pspad.com/ru/download.php

· HtmlReader http://manticora.ru/download.htm

· Notepad++ http://notepad-plus.sourceforge.net/ru/site.htm

· EditPlus http://www.editplus.com

Для просмотра веб-страниц необходимо выбрать браузер. Каждый браузер имеет свои особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. Наибольшей популярностью пользуются браузеры Firefox, Internet Explorer, Opera и Google Chrome.

Валидация HTML-документа предназначена для выявления ошибок в синтаксисе веб-страницы и расхождений со спецификацией HTML. Чтобы проверить страницу на валидность можно зайти по адресу http://validator.w3.org. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно. Для проверки локального HTML-файла или при отсутствии подключения к Интернету, предназначена программа Tidy http://tidy.sourceforge.net. Некоторые редакторы, например, PSPad, уже содержат встроенный валидатор.

Теги

Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования применяются теги. Общий синтаксис написания тегов следующий.

<тег атрибут1="значение" атрибут2="значение">

<тег атрибут1="значение" атрибут2="значение">...</тег>

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

В примере ниже показан типичный HTML-документ с тегами и текстом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<body>

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

</body>

</html>

В данном примере используется одиночный тег <meta> и парные теги <html>, <head>, <title>, <body> и .

Парные теги, называемые по-другому контейнеры, состоят из двух частей: открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный <тег>, а в закрывающем используется слэш </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

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

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

<img src="images/granit.png" alt="Вид заголовка" width="400" height="101">

<img src="images/ granit.png" alt=Вид заголовка width="400" height="101">

В данном примере в строке 2 у атрибута alt кавычки отсутствуют. Переменной alt присвоится только первое слово «Вид», второе слово будет воспринято как ошибочное значение.

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

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

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head>. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения.

Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Например: <input type="submit" disabled>. Атрибуту disabled не задано явно значение. Подобная запись называется сокращенный атрибут тега.

Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута.

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

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Пример веб-страницы</title>

</head>

<body>

</body>

</html>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В таблице приведены основные типы документов с их описанием.

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Синтаксис один и подчиняется четким правилам.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгое описание требует жесткого соблюдения спецификации HTML.

Без использования <!DOCTYPE> страница может отображаться браузером совсем не так, как это требуется разработчику.

В блоке <head> могут содержаться текст и теги, из которых на странице отображается только <title>.

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое.

Тег <title> определяет заголовок веб-страницы и является обязательным

Закрывающий тег </head> показывает, что блок заголовка документа завершен.

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

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

Тег  определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

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

Закрывающий тег </body> показывает, что тело документа завершено.

Последним элементом в коде всегда идет закрывающий тег </html>.

Типы тегов

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

Условно теги делятся на следующие типы:

· теги верхнего уровня

· теги заголовка документа

· блочные элементы

· встроенные элементы

· универсальные элементы

· списки

· таблицы.

Один и тот же тег может одновременно принадлежать разным типам, например, теги <ol> и <ul> относятся к категории списков и также являются и блочными элементами.

Блочные элементы

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

Для выделения длинных цитат внутри документа предназначен тег <blockquote>. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа, а также с пустым пространством сверху и снизу.

Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Внутри тега <div> можно выравнивать текст с помощью атрибута align.

HTML предлагает шесть текстовых заголовков разного уровня. Тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

С помощью тега <hr> можно нарисовать горизонтальную линию, которая по своему виду зависит от используемых атрибутов. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Тег <pre> задает блок предварительно форматированного текста. Такой текст отображается моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, , и .

Строчные элементы

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

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

Тег  определяет жирное начертание шрифта.

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу.

Тег  уменьшает размер шрифта на единицу по сравнению с обычным текстом.

Тег   устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа , использование тега   не добавляет пустой отступ перед строкой.

Тег  предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Тег  устанавливает курсивное начертание шрифта.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

Универсальный тег , предназначен для определения строчного элемента внутри документа.

Тег  предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Тег  отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера (H2O).

Тег  отображает шрифт в виде верхнего индекса (м2).

Разница между блочными и строчными элементами следующая: строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.

Универсальные элементы

Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.

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

Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.

Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>. Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.

Тэги для списков

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

Тег <ol> устанавливает тип нумерованного списка, т.е. каждый элемент списка начинается с числа или буквы и увеличивается.

Тег <ul> устанавливает тип маркированного список, каждый элемент которого начинается с маркера.

Тег <li> определяет отдельный элемент списка внутри внешнего тега <ul> или <ol>.

Тэги <dd>, <dt>, <dl> предназначены для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим тоном является закрывать все теги.

Тэги для таблиц

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

Тег <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

Тег <td> предназначен для создания одной ячейки таблицы и должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

Тег <tr> служит контейнером для создания строки таблицы.

Атрибуты тегов

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

В HTML цвет задается или с помощью шестнадцатеричного кода или по названию цвета.

Типичный цвет, используемый в HTML, выглядит следующим образом.

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).

Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).

Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге, где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В таблице приведены имена популярных названий цветов.

Имя цвета	Цвет	Описание	Шестнадцатеричное значение
black		Черный	#000000
blue		Синий	#0000FF
fuchsia		Светло-фиолетовый	#FF00FF
gray		Темно-серый	#808080
green		Зеленый	#008000
lime		Светло-зеленый	#00FF00
maroon		Темно-красный	#800000
navy		Темно-синий	#000080
olive		Оливковый	#808000
purple		Темно-фиолетовый	#800080
red		Красный	#FF0000
silver		Светло-серый	#C0C0C0
teal		Сине-зеленый	#008080
white		Белый	#FFFFFF
yellow		Желтый	#FFFF00

В примере ниже показано, как установить цвет фона и текста веб-страницы.

<body bgcolor="teal" text="#ffffff" >

 Текст 

</body>

</html>

Размеры

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380".

Процентная запись привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. После численного значения атрибута добавляется символ %, например: width="40%". Размер в процентах вычисляется от размеров контейнера, внутри которого располагается элемент. Если контейнер явно не задан, тогда за отсчет принимается окно браузера.

Адреса

Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <img> адрес используется в качестве значения атрибута src, он задает путь к файлу с изображением. Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов). Различают абсолютные и относительные адреса.

Абсолютные адреса начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста

<a href="http://htmlbook.ru/html/body">Описание тега BODY</a>

В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.

Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта.

Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница.

Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта (/images/pic.gif). Ссылка указывает на рисунок pic.gif, который находится в папке images, размещенной в корне сайта.

Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта (../help/me.html).

Если перед именем папки нет никаких дополнительных символов, то она размещена внутри текущего каталога (manual/info.html).

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере неприменимы.

Особенности работы с текстом

Для изменения вида текста существует достаточно большое количество различных тегов.

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

Любое количество пробелов идущих подряд, в браузере отображается как один. Это же правило относится к символам табуляции и переносу текста. Исключением из этого правила является тег <pre>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Нет расстановки переносов в тексте. HTML не поддерживает расстановку переносов в словах, как это делают текстовые редакторы. Это условие несущественно, пока не используется выравнивание текста по ширине. В этом случае блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами.

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

Абзацы

Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.

 Абзац 1 

 Абзац 2 

Каждый абзац начинается с тега  и должен иметь закрывающий тег .

В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.

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

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h1>), а самым нижним — уровень 6 (<h6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Выравнивание

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы.

Для установки выравнивания текста обычно используется тег параграфа  с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align. Он может принимать следующие значения:

· left — выравнивание по левому краю, задается по умолчанию;

· right — выравнивание по правому краю;

· center — выравнивание по центру;

· justify — выравнивание по ширине.

Атрибут align можно применять как для текста, так и для заголовков.

Жирное начертание

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: и .

Жирное начертание шрифта

Сильное выделение текста

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега:  и .

 Курсивное начертание шрифта 

 Выделение текста 

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

Индексы

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

Ссылки

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

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

<a href="URL" > текст ссылки </a>

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку.

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.

Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Любая ссылка является встроенным элементом, поэтому для нее действуют те же правила, что и для встроенных элементов. А именно, нельзя размещать внутри тега <a> блочные элементы, но допустимо делать наоборот, и вкладывать ссылку в блочный контейнер.

Рассмотрим еще несколько полезных, но необязательных атрибутов тега <а>.

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target. Синтаксис следующий: <a target="имя окна" >... </a>

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

· _blank — загружает страницу в новое окно браузера.

· _self — загружает страницу в текущее окно (это значение задается по умолчанию).

· _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

· _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

Атрибут title добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий: <a title="текст" ></a>

В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

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

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты.

<a href="mailto:[email protected]" > Задавайте вопросы по электронной почте </a>

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

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject=тема сообщения, как показано в примере ниже.

<a href="mailto:[email protected]?subject=Вопрос по HTML" > Задавайте

вопросы по электронной почте </a>

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехо

Воспользуйтесь поиском по сайту: