Полная версия
HTML: Популярный самоучитель
Использование тегов
Элемент BASE
Элемент BASE, появляющийся в заголовке HTML-документа, позволяет задать базовый URI, относительно которого разрешаются все относительные URI в документе.
Элемент BASE задается одиночным тегом
…
При таком использовании элемента BASE, где бы ни был расположен открытый HTML-документ, рисунок, задаваемый элементом IMG, будет загружаться из файла D:\test\image.gif.
Метаданные
В заголовке документа помещаются также некоторые важные данные, используемые браузерами и поисковыми системами, но в большинстве случаев не отображаемые, – метаданные. Задание метаданных представлено как задание значений переменным (иногда говорят про задание значений свойствам), имеющим определенные имена, осуществляемое с помощью HTML-элемента META (элемент задается одиночным тегом ). При использовании элемента META обычно задают значения следующих атрибутов:
• name – имя переменной (значения чувствительны к регистру символов, по крайней мере, официально);
• content – значение переменной;
• lang – код языка, для которого действительно значение переменной; может быть задано несколько значений одной переменной для разных языков;
• http-equiv – применяется для указания браузеру дополнительных параметров по обработке HTML-документа, значением атрибута является название параметра (в отличие от name, значения не чувствительны к регистру символов).
Перечисленные атрибуты обычно используются парами: name и content или http-equiv и content. Атрибут lang применяется, если дополнительно нужно указать значения атрибутов для различных языков.
Сначала будет рассмотрено использование пары name и content. Эта пара атрибутов позволяет задавать значения переменным, которые часто, но не всегда используются поисковыми системами и другими сервисами Интернета: описание и авторство документа, ключевые слова и еще много информации. В табл. 2.1 приведены основные значения атрибута name, а также дана расшифровка возможных значений атрибута content в каждом случае.
Таблица 2.1. Значения атрибута name и соответствующие значения атрибута contentНа практике полезным оказывается задание переменной, содержащей список ключевых слов. Ведь именно этот список воспринимается поисковыми системами при поиске по запросу пользователя. По этой причине перед публикацией ваших творений в Интернете позаботьтесь о том, чтобы список состоял из слов, наиболее часто используемых (или очевидных) при запросах на тему, соответствующую или близкую теме вашего документа.
При создании списка ключевых слов крайне удобно использование атрибута lang для указания различных наборов ключевых слов на различных языках (и для различных языков поиска). Например, как в следующем случае:
Напоследок остается только заметить, что использовать все приведенные значения атрибутов name и http-equiv необязательно. В большинстве случаев достаточно бывает ограничиться заданием ключевых слов и кодировки HTML-документа.
2.4. Тело HTML-документа
Вся содержательная часть HTML-документа находится в его теле (элемент BODY). Для определения этого элемента используются парные теги
и . Теги и не являются обязательными, но их наличие, как и в случае тегов и , значительно улучшает наглядность структурной организации HTML-документа и позволяет четко отделить содержимое документа от заголовка.Все, что помещено между тегами
и , является содержимым документа, показываемым браузером пользователю. В простейшем случае это может быть просто текст без всякого дополнительного оформления. Ниже приведен список наиболее часто используемых атрибутов элемента BODY:• background – URI, указывающий расположение изображения для фона (обычно берется небольшое изображение, которое размножается для заполнения фона всего документа);
• bgcolor – цвет фона HTML-документа;
• text – цвет шрифта документа;
• link – цвет непосещенных гиперссылок;
• vlink – цвет посещенных гиперссылок;
• alink – цвет гиперссылок при выборе их пользователем (при нажатии Enter произойдет переход по такой гиперссылке).
Все атрибуты, позволяющие задавать цвет (не только элемента BODY, но прочих элементов, которые будут рассмотрены далее), имеют тип %Color. Значения таких атрибутов могут задаваться шестнадцатеричными числами с символом # в начале каждого числа, например:
bgcolor = «#FF0005»
При задании цвета данным способом следует помнить, что числом задается цвет в RGB-формате. Это значит, что первые два символа задают интенсивность красного цвета от 0 до FF (255 в десятичной системе счисления), третий и четвертый символы – интенсивность зеленого цвета, а два последних – интенсивность синего цвета. В данном примере интенсивности красного, зеленого и синего цветов равны FF, 0 и 5 соответственно.
Кроме того, атрибутам задания цвета можно присваивать предопределенные идентификаторы некоторых наиболее часто употребляемых цветов. Список этих названий и их численные значения приведены в табл. 2.3.
Таблица 2.3. Идентификаторы и значения часто используемых цветовДля закрепления всего, что было описано в этой главе, можно рассмотреть простой пример.
Данный пример базируется на уже полученных знаниях (на теги задания гиперссылок и теги
можете пока не обращать внимания, так как важен только цвет гиперссылок и текста) (пример 2.2).
Пример 2.2. Пример задания названия документа и параметров цветаbackground = "2.2.html-files/back.jpg"
text = "black"
link = "#0080FF"
vlink = "blue"
alink = "navy">
Обычный неформатированный текст должен отображаться черным цветом
Непосещенная гиперссылка (голубой цвет)
Посещенная гиперссылка (синий цвет)
Выделенная гиперссылка (темно-синий цвет)
После обработки приведенного примера браузером получится документ, который показан на рис. 2.1.
Рис. 2.1. Результат обработки HTML-текста примера
В данном примере использовался неформатированный текст. Но HTML на то и HTML, чтобы всячески способствовать улучшению восприятия содержимого текста и наделять обычный текст возможностями навигации. В последующих главах будут подробно рассмотрены форматирование текста, вставка в него иллюстраций и прочие замечательные возможности HTML.
Глава 3
Текст
Как вы могли заметить, чтобы поместить простой текст на страницу, достаточно ввести его в теле документа. При этом браузер отобразит текст, используя шрифт и цвет, заданные по умолчанию для текста тела страницы.
Чтобы чтение информации, содержащейся в HTML-документе, стало приятным занятием, применяется форматирование и разбиение документа на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга. Далее будут рассмотрены основные возможности HTML, позволяющие сделать содержимое документа легко читаемым и воспринимаемым. Однако перед описанием форматирования и структурирования текста нужно рассмотреть особенности, которые необходимо учитывать при добавлении непечатных и зарезервированных для языка HTML символов в текст документа.
3.1. Особенности ввода текста
При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ.
Ссылки на символы могут быть представлены любым из указанных ниже способов:
• D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления);
• H; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);
• &имя_символа; – позволяет использовать именованную ссылку на символ.
Как можно увидеть, ссылка на символ в тексте HTML-документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1.
Таблица 3.1. Имена символовВ качестве примера использования ссылок на символы в HTML-документе можно рассмотреть следующий HTML-код (пример 3.1).
Пример 3.1. Использование ссылок на символы<TITLE> Именованные ссылки на символы </
TITLE>
<BODY color = " yellow "
bgcolor = " yellow " >
Текст HTML-документа
</BODY>
При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1.
Рис. 3.1. Использование ссылок на символы
Конечно, возможности использования ссылок на символы приведенным примером не ограничены. Ссылки на символы очень часто применяются для записи математических формул. Кроме того, их можно использовать для записи текста на иностранном языке, но с использованием символов другого языка (например, для ввода символа в при использовании символов только английского языка).
3.2. Форматирование текста
Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.
Задание начертания текста
Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML-код добавляются элементы, приведенные в табл. 3.2.
Таблица 3.2. Элементы задания начертания текстаДля наглядности можно рассмотреть пример HTML-документа, в котором используются различные элементы задания начертания текста (пример 3.2).
Пример 3.2. Задание начертания текстаПолужирный текст
Курсив
Подчеркнутый текст
Зачеркнутый текст
Текст увеличенного размера
Текст уменьшенного размера
Верхний индексТекстНижний индекс
Текст, записанный моноширинным шрифтом
В приведенном коде задействованы все элементы задания начертания текста из табл. 3.2, кроме BLINK.
При обработке HTML-кода браузером получится документ, показанный на рис. 3.2.
Рис. 3.2. Задание начертания текста
Рассматриваемые HTML-элементы могут быть вложены друг в друга. При этом на начертание текста влияют все элементы, внутри которых находится текст. Например, чтобы одновременно зачеркнуть и подчеркнуть курсивный полужирный текст, можно использовать следующий код:
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.