Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 3
Самоучитель по HTML и CSS
3. ТегиЧтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий. <тег параметр1="значение" параметр2="значение"> Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега. В листинге 3.1 показан типичный HTML-документ с тегами и текстом. Листинг 3.1. Теги в документе <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере используется одиночный тег <META>, а парных тегов сразу несколько: <HTML>, <HEAD>, <TITLE>, <BODY> и <P>. Парные тегиПарные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рис. 3.1 демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
а
б Рис. 3.1. Вложение тегов, а — правильное, б — неверное Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис. 3.1, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рис. 3.1а). Любое пересечение условных скобок (рис. 3.1б) говорит о том, что правильная последовательность тегов нарушена. Замечание Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить. Тем не менее, всегда закрывайте все требуемые теги, так вы приучитесь сводить к нулю возможные ошибки. Правила применения теговДля тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет. Параметры тегов и кавычкиСогласно спецификации HTML все значения параметров тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (листинг 3.2). Листинг 3.2. Использование кавычек в параметрах тегов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у параметра alt кавычки отсутствуют. Из-за этого браузер в качестве значения параметра alt возьмет только первое слово ("Вид"), а слово "заголовка" будет воспринято как ошибочный аргумент. Поэтому всегда приучайтесь указывать параметры тегов в кавычках. Теги можно писать как прописными, так и строчными символамиЛюбые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный. В дальнейшем при упоминании в тексте тегов, для их акцентирования будем их писать преимущественно заглавными буквами, а в коде применять только строчные символы. Переносы строкВнутри тега между его параметрами допустимо ставить перенос строк. В листинге 3.3 показана одна и та же строка, но оформленная разными способами. Листинг 3.3. Переносы строк в коде тега <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере первый тег <IMG> набран в одну строку, включая все его параметры, а второй тег <IMG> разбит на несколько строк. Замечание Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править. Неизвестные теги и параметрыЕсли какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию. Порядок теговСуществует определенная иерархия вложенности тегов. Например, тег <TITLE> должен находиться внутри контейнера <HEAD> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <TITLE> и <META>, на конечный результат это никак не скажется. Закрывайте все тегиСуществует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <BR> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать. Значения параметров теговЧтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются параметры тегов. Для параметров тегов используются значения по умолчаниюКогда для тега не добавлен какой-либо допустимый параметр, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на веб-странице, проверьте, возможно, следует явно указать значения некоторых параметров. Параметры без значенийДопустимо использовать некоторые параметры у тегов, не присваивая им никакого значения, как показано в листинге 3.4. Листинг 3.4. Параметры без значений <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере используется параметр disable, у которого явно не задано значение. Подобная запись называется "сокращенный атрибут тега". Порядок параметров в тегахПорядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны. Формат параметровКаждый параметр тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании параметра. Так, в листинге 3.3 упоминается тег <IMG>, он добавляет на веб-страницу рисунок, а его параметр width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то аргумент будет проигнорирован и возникнет ошибка при валидации документа. Вопросы для проверки1. В каких строках приведенного кода находятся ошибки? 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. Какой вариант написания тега наиболее правильный?
3. Какая ошибка содержится в приведенной строке кода? <p><b>Lorem ipsum</b> dolor <i><span>
4. Саша добавляет на веб-страницу изображение шириной 200 пикселов, для чего использует тег <img width="200px">, Лена же для этой цели применяет <img width="200">, а Борис — <img width="200%">. У кого наиболее правильный результат?
5. Вы хотите получить валидный HTML-код. Какое требование необходимо обязательно выполнять?
6. Какое написание тега из приведенных вариантов правильное?
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
