|
Структура HTML документа
Автор статьи: Зыков Николай (Exact)
Любая web-страница состоит из HTML-кода. Конечно, существует множество программ которые создают этот код за вас, но настоящий web-дизайнер должен знать его структуру и тэги, для того, чтобы можно было в любой момент времени что-то подправить.
Для начала разберём, что такое HTML (HyperText Markup Language) – язык гипертекстовой разметки документа.
Тэг HTML представляет собой заключённые в угловые скобки (“<”…”>”) управляющую команду (возможно с указанием различных параметров тэгов). Для большинства команд, действие которых распространяется на последующий текст, в HTML предусматривается
Обрамляющие (данный фрагмент текста) тэги. Закрывающий тэг имеет похожую структуру (“”), отличие в том, что в закрывающемся тэге, не указывается никаких параметров. Такая конструкция из открывающегося и закрывающегося тэгов называется контейнером, действие таких тэгов распространяется на весь текст заключённый между ними. Контейнеры могут быть вложены друг в друга, в таком случая эффект от действий на текст, заключённый между разными тэгами, будет суммироваться.
Так например, в данном случае слово <I><B> «Сайт», </B> </I> будет выглядеть в браузере, следующим образом: Сайт. Тэг <I> означает написание курсивом, а текст ;<B> написание жирным шрифтом.
Начальная структура HTML кода выглядит следующим образом:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Здравствуйте, это моя первая web-страница.
<br>
Добро пожаловать! :)
</body>
</html>
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title> - заголовок. То, что написано в таком контейнере, и будет названием сайта, точнее окна в котором будет показываться ваш сайт.
Все тэги, расположенные между <body> </body>- непосредственное содержание документа.
Обратите внимание:
<i> <b> <u> ... </u> </b> </i>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.
В среде web-дизайнеров почему-то принято считать, что на свете существуют всего две методики создания web-страниц. Первая заключается в использовании web-редакторов. Web-мастеру, использующему в своей работе подобную программу, по большому счету не нужно знать HTML: достаточно лишь уметь обращаться с данным приложением и щелкать мышью. Весь необходимый код редактор генерирует сам. Не удивительно, что такой подход считается <непрофессиональным>, поскольку в данной ситуации создатель web-ресурса не может гибко управлять структурой разрабатываемых им документов, а сами эти редакторы по качеству работы весьма далеки от идеала. Второй подход, считающийся “верхом профессионализма”, подразумевает написание всего кода вручную, с применением стандартного текстового редактора MS Windows -программы Notepad, известной также как Блокнот. Скажу по секрету, что раньше я поступал именно так.
Лично я рекомендую использовать третий подход, “смешанный”. Заключается он в том, что шаблон страницы, включая невидимые таблицы, часть графических элементов и необходимый набор гиперссылок, готовится в web-редакторе,после чего осуществляется “доводка”, дописывание, отладка и оптимизация кода вручную. Объясняется это, прежде всего, элементарными соображениями удобства и, если хотите, лени: структура сложных html-документов подразумевает наличие большого количества идентичных, часто повторяющихся команд, используемых, например, при создании таблиц и форматировании абзацев. Поверьте, писать эти тонны кода “руками” - удовольствие сомнительное. В конце концов, web-редакторы и были созданы как раз для того, чтобы облегчить жизнь web-мастеру. На практике большинство web-дизайнеров поступает сейчас именно так.
Тэги и их атрибуты
Для того чтобы в будущем у вас не возникло каких-либо затруднений, необходимо
прежде всего разобраться в понятиях тегов и их атрибутов. Итак, тег -это
некая команда HTML, указывающая интерпретатору броузера, каким образом он
должен обрабатывать соответствующее каждой конкретной директиве значение. Это
значение и называется c атрибутом тега.
Тег может иметь атрибут или не иметь его. Например, тег верхнего уровня
не имеет атрибутов, а в строке создания новой таблицы
<TABLE BORDER="1"WIDTH="100"> выражение <BORDER="1" WIDTH="100"> является
атрибутом тега <TABLE>.
В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ"
...ИМЯ_АТРИБУТА-n="ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <TABLE> - это параметр "BORDER", второй
атрибут - параметр "WIDTH", а их значения составляют соответственно "1" и"100".
Значения атрибутов заключаются в прямые кавычки, записываемые символом <">.
Если внутри атрибута какого-либо тега встречается другое значение, заключенное
в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве
<внутренних> кавычек рекомендуется использовать одинарные, записываемые
символом <'>. В общем случае такое выражение выглядит следующим образом:
<ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; 'ЗНАЧЕНИЕ-2'; ЗНАЧЕНИЕ-3">
Регистр в HTML-коде
Спецификация языка HTML позволяет опускать кавычки для
следующих видов атрибутов:
Атрибуты, записываемые только строчными или заглавными символами латинского
алфавита и не включающие иных символов, например, цифр.
Атрибуты, состоящие только из цифр от 0 до 9.
Атрибуты, обозначающие промежутки времени.
Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить
как BORDER=1 и ALIGN=CENTER.
|
