Несколько предварительных замечаний
Теги и атрибуты
Для того чтобы в будущем у вас не возникло каких-либо затруднений, необходимо прежде всего разобраться в понятиях тегов и их атрибутов. Итак, тег —это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение и называется атрибутом тега.
Тег может иметь атрибут или не иметь его. Например, тег верхнего уровня<HTML> не имеет атрибутов, а в строке создания новой таблицы <TABLE BORDER="1"WIDTH="100"> выражение «BORDER="1" WIDTH="100"» является атрибутом тега <TABLE>.
В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ" …ИМЯ_АТРИБУТА-n="ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <TABLE> — это параметр "BORDER", второй атрибут — параметр "WIDTH", а их значения составляют соответственно "1" и"100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"». Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «'». В общем случае такое выражение выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; 'ЗНАЧЕНИЕ-2'; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:
Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER.
Регистр записи команд
HTML является одним из немногих языков программирования, не чувствительных к регистру, в котором вы записываете команды (в данном случае — теги и имена их атрибутов). Интерпретатор броузера одинаково обработает директивы<HEAD>, <head>, <Head> или <hEaD>. Иными словами, вы вольны записывать теги как в строчном, так и в заглавном варианте, на собственный вкус. Однако рекомендуется все же применять для написания тегов HTML заглавный регистр, прежде всего, для улучшения читаемости кода, поскольку в этом случае команды языка будет легко отличить от интегрированного в документ информационного текста. Единственным исключением из этого правила служат два элемента HTML, небезразличных к регистру. Это адреса URL и escape-последовательности, о которых мы подробно побеседуем ниже.
Escape-последовательности
Иногда у web-мастера возникает необходимость использовать в тексте своей web-странички символы, зарезервированные для обозначения элементов кодаHTML. Это могут быть угловые скобки (символы «<» и «>»), в которые обычно заключаются теги, прямые кавычки («"»), употребляемые при задании значений атрибутов, и т. д. Иными словами, web-мастеру необходимо, чтобы данные символы отображались в окне броузера «как есть», то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов, и были придуманы так называемые escape-последовательности, или, как их еще иногда называют, «нотации символьных объектов».
Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа амперсанд («&») и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в строчном регистре. В табл. 4.1 приведен список наиболее часто используемых escape-последовательностей.
Таблица 4.1. Наиболее распространенные escape-последовательности
| Символ | Значение | Команда |
| < > " & © ® | Символ «меньше, чем»; левая угловая скобка Символ «больше, чем»; правая угловая скобка Прямые кавычки Амперсанд Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе) Символ копирайта Символ зарегистрированной торговой марки |
< > " &атр; &сору; ® |
Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где по расчетам web-мастера должен следовать соответствующий служебный символ. Например, строка html-кода
На этой страничке изложены мои ":мысли вслух" по данному вопросу отобразится в окне броузера следующим образом:
На этой страничке изложены мои "мысли вслух" по данному вопросу
Перевод строки, пробелы, табуляция
При подготовке web-страниц обязательно следует помнить, что введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируются броузером при интерпретации html-документа.
Иными словами, такие элементы текста, как
данное словосочетание
или
данное
словосочетание
на экране монитора будут выглядеть одинаковым образом:
данное словосочетание
Таким образом, любое количество пробелов между словами, отступ, выполненный посредством клавиши «Tab», или перевод строки по нажатии клавиши «Enter» преобразуются при компиляции документа в один символ пробела. Поэтому для форматирования основного текста на web-странице применяются специальные теги, которые мы изучим в рамках этого же урока. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> — командой предварительного форматирования. Мнемоника записи этого тега выглядит следующим образом:
<PRE>
предварительно отформатированный текст
</PRE>
В этом случае все, что расположено между открывающим и закрывающим тегами <PRE>, а в нашем примере это выражение «предварительно отформатированный текст», отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции. Однако злоупотреблять применением данной команды не рекомендуется, поскольку в силу несхожести алгоритмов обработки кода HTML различными броузерами возможно искажение отформатированного таким образом текста в зависимости от экранных настроек пользователей. Помните, что внутри тега PRE запрещено использовать другие теги форматирования текста.
Очевидно также, что запись
<ТЕГ>текст
эквивалентна записи
<ТЕГ>текста запись
текст</ТЕГ>
идентична записи
текст</ТЕГ>В указанных случаях переводы строки также игнорируются.
Урок 5 Графика в web-дизайне
| На главную |