|
Чтобы проще было понять, как «устроена» Web-страница, загрузим какой-нибудь документ из WWW и рассмотрим его строение. Загрузим в качестве примера главную страницу сайта www.3st.ru
>• Установите связь с вашим провайдером Интернета.
> Загрузите в браузер главную страницу сайта www.3st.ru
> Прервите связь с провайдером.
Когда вы загружаете из WWW любой документ, то его текст в окне вашего браузера отображается в хорошо отформатированном, удобном для просмотра виде. Это значит, что Web-страницы представляют собой не простой текст, а содержат также некоторую вспомогательную информацию для управления представлением документа в окне вашего браузера. Поскольку при создании документа не известно, на компьютере какого типа пользователь будет его просматривать, то Web-страницы не могут готовиться и храниться в формате, разработанном для конкретной компьютерной платформы, например, в формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий на компьютере любого типа, видел документ, отформатированный надлежащим образом,
используется специально разработанный для этого язык HTML. Что же представляет собой язык HTML?
> Если вы работаете с браузером Internet Explorer, то выберите команду меню Вид • Просмотр HTML-кода (View • Source). На экране появится окно с исходным кодом этой страницы на языке HTML
Возможно, код, который вы увидите на своем экране, будет несколько отличаться от кода, показанного на рисунке. Вид Web-страниц в Интернете очень часто меняется. Но для нас сейчас это не существенно.
HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собог довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, я именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Как уже отмечалось, создавать Web-страницы можно с помощью специальных программ-редакторов, автоматически генерирующих код HTML, работа с которыми не требует знания языка разметки. Однако эти программы часто ограничены в своих возмож ностях, содержат ошибки и нередко создают плохой HTML-код, который работает не на всех платформах. Поэтому, если вы хотите серьезно освоить Web-дизайн и понять принципы создания Web-документов, вам не обойтись без знания основ языка HTML, тем более, что создавать Web-страницы на нем совсем не трудно. Возможно, это даже легче, чем освоить программу для создания HTML-страниц.
Язык HTML существует в нескольких вариантах, или спецификациях. Как и версии программных продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая спецификация представляет собой расширение и дополнение предыдущей. В этой книге мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства распространенных браузеров.
Как видите, документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе
HTML обычный текст сочетается с элементами разметки, заключенными в угловые
скобки < и >, например, <html>, <head>, <title>, </title>. Такие элементы разметки называются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:
• левой угловой скобки <;
• необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;
• имени тега, например, html;
• необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним
или несколькими атрибутами, например, align="center";
• правой угловой скобки >.
Таким образом, открывающий тег <html>, стоящий в начале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тег </html>,
находящийся в конце Web-документа, кроме указанных элементов содержит также
символ слэш /, означающий закрывающий тег и указывающий на конец документа.
Тег <script language=Mvbscript"> означает начало кода встроенной в документ программы-сценария. Этот тег содержит, кроме имени script, атрибут language со значением "vbscript", означающий, что сценарий написан на языке vbscript.
В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например, nama="Раздел 1". Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре. Большинство тегов являются парными: за открывающим тегом следует соответствующий ему закрывающий тег, а между ними содержится текст или другие теги, например:
<Ъз.Ъ1е>Книжный Интернет-магазин Три Ступеньки</Ь1ъ1е>
В таких случаях два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными и для них закрывающий тег не применяется. Такие теги сами по себе являются элементами HTML. Большинство тегов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Однако атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например, "center":align=»"center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center. Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:
<html>
<head>
• • • • *
</head>
<body>
</body>
</html>
Структура HTML-документа содержит следующие обязательные элементы:
• теги <html> и </html>, которые отмечают начало и конец документа;
*^ заголовок, ограниченный тегами <head> и </head>;
^ тело, ограниченное тегами <body>... </body>.
В заголовке, ограниченном тегами <head> и </head>, с помощью тегов <tit
l e > . . . < / t i t l e > определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузера
ми в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.
Кроме элемента < t i t l e > . . .</title>, заголовок может содержать элементы <meta> ...</meta>,например, <meta http-equiv="Content-Type" content="text/html; charset=windows-l25l">, для указания информации о документе. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например, тип документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.
Файл HTML может содержать комментарии, дающие пояснения человеку, читающему HTML-код. Комментарии начинаются с четырехсимвольной последовательности < !— и завершаются трехсимвольной последовательностью —>, например: <!—Главная страница -->. Комментарии игнорируются браузером и не влияют на представление документа на экране. Комментарии желательно использовать в редких случаях, когда это необходимо, например, для объяснения кода HTML. Следует помнить, что они являются частью файла и передаются по сети вместе с документом. Большое количество комментариев может значительно увеличить размер файла и, соответственно, время его загрузки, что нежелательно.
Изучая язык HTML, очень полезно просматривать и анализировать HTML-код Web-страниц, созданных опытными мастерами. Это помогает быстрее освоить и понять принципы и структуру языка.
> Закройте окно с кодом HTML, нажав кнопку [х] в правом верхнем его углу.
>• Закройте также программу-браузер.
Теперь, когда мы представляем себе внутреннее устройство Web-страниц, можно приступить к их созданию.
|
![[Image]](/.s/t/121/3.gif){kind=small}
![[Image]](/.s/t/121/5.gif){kind=small}
SEO, технологии, игры, IT новости![[Image]](/.s/t/121/8.gif){kind=small}
![[Image]](/.s/t/121/9.gif){kind=small}
![[Image]](/.s/t/121/7.gif){kind=small}
