Энтомологический кружок А. Куприянова » Библиотека » Разработка домашних страниц
Первое | Второе | Handouts | Ссылки
Имя файла может состоять из латинских букв, цифр и знаков дефиса ("-") и подчеркивания ("_"). Расширение файла, по которому можно, не заглядывая внутрь, опознать его тип, должно быть "htm" или "html". В именах файлов могут использоваться как строчные (маленькие, в нижнем регистре), так и прописные (заглавные, большие, в верхнем регистре) буквы. При этом следует помнить, что в операционной системе UNIX (а именно на ней работают обычно интернет-сервера) одна и та же буква в верхнем и нижнем регистре считается разными символами, поэтому файлы с именами Links.html, links.html и links.HTML будут восприниматься как три разных файла. Это становится особенно важным при написании гиперссылок, в состав которых входят и имена файлов. Чтобы потом голова не болела, сразу приучите себя писать все имена файлов и расширений маленькими буквами.
Если в именах файлов, из которых состоит домашняя страница, будет присутствовать что-то, кроме перечисленного, например пробелы, знаки препинания или кириллические символы (буквы русского алфавита), то проблемы посетителям вашей страницы (если не всем, то многим) гарантированы. Если ваша домашняя страница нормально работает на вашем настольном компьютере, это не означает, что она будет работать так же на интернет-сервере.
Примеры правильных имен:
"links.html" "lesson-2.htm" "wizard_of_oz.html"
Примеры неправильных имен:
"Ссылки.htm" "lesson 2.html" "why?.htm"
Внутри файлы, размеченные при помощи HTML, состоят из собственно текста, команд HTML разметки и символьных элементов. Команды HTML разметки, как и сам текст, набираются обычными текстовыми символами. Эти команды называют "тэгами" (тэг (tag)--вообще-то, довольно многозначное английское слово, которое в большинстве случаев можно перевести как "ярлык"). Тэги состоят из букв латинского алфавита (сокращенных английских слов и выражений). Чтобы тэги отличались от всего остального текста, их заключают в угловые скобки "<" и ">".
Тэги позволяют разделить текст на блочные и строчные логические элементы. Собственно, они обозначают границы (начало и конец) этих элементов.
Символьные элементы начинаются со специального символа "амперсанд" ("&") и заканчиваются точкой с запятой (";"). Во-первых, они нужны для того, чтобы вводить в текст символы, которые нельзя без специальных ухищрений ввести в текстовый файл прямо с клавиатуры одним нажатием клавиши (например, "©" или "«"). Во вторых, с их помощью в текст встявляются обычные текстовые символы, зарезервированные для написания тэгов и символьных элементов ("<", ">" и "&"). Так, чтобы вставить символ "<" (открывающая угловая скобка, или знак "меньше"), я должен написать в коде страницы последовательность символов <. Вы уже, наверное, догадались, что "lt"--это сокращение от английского выражения "less than" ("меньше, чем"). Сходным образом, ">" кодируется как > (greater than) и "&"--& (ampersand). Один из наиболее почитаемых символьных элементов--"неразрывный" пробел (non-breaking space). Он ставится между словами вместо обычного пробела (" "), если необходимо запретить разрыв строки между этими словами, и в некоторых других местах. С краткой таблицей самых необходимых символьных элементов мы познакомимся на одном из следующих занятий, а в приложении можно будет найти ссылки на полные таблицы символьных элементов.
С точки зрения визуального агента, элементы HTML делятся на блочные, строчные и символьные. О символьных элементах мы уже говорили выше и еще не раз вернемся к ним на следующих занятиях. Они, по сути дела, не являются логическими элементами и служат лишь для включения в текст определенных символов, которые нельзя ввести с клавиатуры одним нажатием клавиши. Сейчас пришла пора обратиться к блочным и строчным логическим элементам.
В принципе, весь файл--это длинная цепочка символов, которые визуальный агент пытается уместить на экране компьютера. Для этого он разделяет эту цепочку на строки, длина которых не превышает ширины экрана. При разделении на строки визуальный агент прежде всего руководствуется границами блочных элементов, а внутри блочных элементов--пробелами и знаками переноса ("-"). Примеры блочных элементов, которые вы видите на этой странице--заголовки разных уровней и абзацы (параграфы) текста. Строчные элементы располагаются внутри блочных. Ни в начале, ни в конце строчных элементов перенос (разрыв) строки не производится. Пример строчного элемента, который вам уже более-менее известен--гиперссылка. О других блочных и строчных элементах мы поговорим позже, а сейчас надо ознакомиться с общими правилами обозначения границ элементов при помощи тэгов.
В отношении написания тэгов, лучше соблюдать правила, которые будут изложены ниже. Некоторые скажут, что нет смысла излишне строго придерживаться этих правил, поскольку, с одной стороны, самый распространенный браузер достаточно снисходителен к огрехам в коде, а с другой стороны, даже строгое следование правилам не гарантирует того, что ваша страница будет выглядеть одинаково в разных браузерах. На это я могу ответить только одно: если мы не можем утверждать, что соблюдение этих правил гарантирует однозначность интерпретации созданной вами страницы разными визуальными агентами, то мы можем утверждать, что несоблюдение этих правил гарантирует неоднозначность интерпретации. Те, кто доживет до конца раздела, получат в подарок байку по случаю.
О том, что тэги пишутся в угловых скобках вы уже слышали. Для того, чтобы писать код грамотно, нужно знать несколько больше.
Тэги делятся на тэги-контейнеры и "пустые" тэги.
Тэг-контейнер состоит из пары команд, между которыми находится содержимое логического элемента. Команда, обозначающая конец элемента пишется точно так же, как и та, которая обозначает его начало, но перед ней ставится косая черта "/". Например, границы параграфа обозначаются тэгами <p> (начало параграфа) и </p> (конец параграфа). Таким же образом обстоит дело с заголовками и гиперссылками. "Пустые" тэги не содержат внутри себя никаких текстовых элементов. Их не так много. Самые известные--принудительный разрыв строки "<br>", горизонтальная разделительная линия "<hr>", тэг "<img>", позволяющий вставить в текст картинку (об этих тэгах я подробнее расскажу позже).
Все логические элементы имеют начало и конец. Поэтому не забывайте поставить в конце элемента "закрывающий" тэг с косой чертой.
Правильно (один абзац закончился и начался другой):
<p>Всякие слова первого параграфа</p>
<p>Всякие слова второго параграфа</p>
Неправильно (один абзац еще не закончился, а другой уже начался):
<p>Всякие слова первого параграфа
<p>Всякие слова второго параграфа
Логические элементы могут быть расположены рядом друг с другом или один внутри другого, но никогда не могут частично перекрываться. Поэтому, расставляя в тексте тэги-контейнеры, следите, чтобы получающиеся логические элементы не перекрывались.
Правильно (гиперссылка находится внутри абзаца):
<p>Всякие слова и <a href="there.html">гиперссылка</a></p>
Неправильно (гиперссылка и абзац перекрываются):
<p>Всякие слова и <a href="there.html">гиперссылка</p></a>
В состав тэга могут входить атрибуты, которым приписывают какие-то значения. Например, в состав тэга <a>/</a> (anchor--якорь) входит атрибут href (hypertext reference--гипертекстовая ссылка), значение которого--адрес файла, на который вы ссылаетесь. Значение атрибутов следует всегда заключать в двойные кавычки.
Правильно (атрибут заключен в двойные кавычки):
<a href="there.html">туда</a>
Неправильно (атрибут не заключен в двойные кавычки):
<a href=there.html>туда</a>
Строго говоря, можно не заключать в кавычки значения атрибутов, которые не содержат ничего, кроме цифр (например, <table border=0>--таблица, ширина рамки которой составляет 0 пикселей). Однако от вас не убудет, если вы и цифровые значения атрибутов будете заключать в кавычки, а при переходе к XHTML вам не придется переучиваться (подробнее об этом смотри ниже).
Когда вам покажется, что можно облегчить себе жизнь, наплевав на те правила, которые тут были изложены, потому что Internet Explorer все равно показывает то, что вы задумали, вспомните нижеследующую байку.
На кафедре энтомологии стоял распределительный щит. Когда в очередной раз погорел какой-то полюбившийся всем предохранитель, а за новым в магазин идти было лень, сотрудники приступили к экспериментам. Путем поочередного вывинчивания предохранителей удалось выяснить, какие из них за что отвечают. К радости собравшихся было обнаружено, что в щитке есть штук пять предохранителей, вывинчивание которых не влияет решительно ни на что. То есть, выкручиваешь их, а все лампы как горели, так и горят. И розетки не отключаются. Их вывернули и сложили горкой тут же, чтобы было ясно, откуда брать новые предохранители, когда какой-нибудь из старых перегорит.
Каково же было горестное изумление сотрудников кафедры, когда назавтра к ним прибежали разъяренные соседи-химики, у которых оказалось обесточенным оборудование, которое должно было работать круглосуточно! Отбрасывая какое-то из этих трех несложных правил, вы обрекаете себя и свою страницу на непредсказуемые последствия.
Каждый грамотно составленный файл HTML должен содержать два основных компонента:
В декларации типа документа сообщается, какая версия HTML использована автором при разметке файла и по какому адресу в интернете можно найти документ, описывающий эту версию. Для декларации типа документа используется "пустой" тэг
Собственно документ помещается внутри тэга-контейнера <html>/</html> и состоит из друх элементов: "заголовка" (обозначается тэгом-контейнером <head>/</head>) и "тела" (обозначается тэгом-контейнером <body>/</body>). В заголовке содержится информация о документе, которая нужна, скорее, поисковым роботам или браузерам, чем читателям, а в теле документа--само его содержимое.
Эта элементарная структура HTML файла видна на приведенном ниже примере.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Название документа</title>
</head>
<body>
<p>Содержимое документа</p>
</body>
</html>
Посмотреть на этот документ можно здесь.
В декларации типа документа указано, что при разметке использовался HTML версии 4.01. Transitional означает "переходный" вариант этой версии, позволяющий вводить в текст элементы форматирования (отличается от "strict", который позволяет вводить только логическую разметку, и от "frameset", который включает не только элементы и атрибуты форматирования, но и "фреймы"--рамки, позволяющие показать на одной странице сразу несколько HTML файлов). Советы по интерпретации кода этой версии HTML на понятном для браузера языке можно найти в специальном документе "Document Type Definition" по адресу "http://www.w3.org/TR/html4/loose.dtd". Можете сами сходить по указанному адресу и посмотреть, как это выглядит. При знании основ английского, можно увидеть, что многое в dtd понятно не только браузерам.
В данном примере внутри <head>/</head> содержится единственный элемент "название документа" (обозначается контейнером <title>/</title>). Из него браузер заимствует название окна, в котором просматривается данный документ. В <body>/</body> покоится одинокий параграф (<p>/</p>), играющий роль содержимого.
О том, какие еще элементы могут входить в состав элементов <head>/</head> и <body>/</body> будет рассказано на следующем занятии.
© Алексей Куприянов, 2003