Первые
шаги в HTML! |
||||||||||||||||
| Введение HyperText Markup Language (HTML) - переводится как Язык Разметки Гипертекста. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:
Документ, написанный на HTML, представляет из себя текстовый файл, который можно писать и редактировать при помощи любых текстовых редакторов. Он включает в себя:
Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов, такие как, например, Internet Explorer, интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, принято расширение .htm или .html Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (Less Than) > (Greater Than) & (Ampersand) " (Double Quote) Символ табуляции, символ возврата каретки и символ перехода на новую строку считаются эквивалентными пробелу, а несколько следующих друг за другом пробелов и/или табуляций и/или символов возврата каретки и/или символов перехода на новую строку эквивалентны ровно одному пробелу Пример текста с пробелами и пустыми строками: Если вы желаете опубликовать что-либо в WWW, то вам следует придерживаться соглашений, принятых в HTML. Как выглядит на дисплее:
Флаги (Tags - тэги) Флаги предназначены для форматирования и разметки документа. Любой флаг начинается символом < и заканчивается символом > . В названиях флагов строчные и прописные буквы считаются эквивалентными. Например, флаг <br> может быть записан как <BR>. Существует два вида флагов: парные и непарные. Действие любого парного флага начинается с того места, где встретился открывающий флаг и заканчивается при встрече соответствующего закрывающего флага (признаком которого является символ /, следующий сразу после < ) или конца файла. Например, текст, следующий за флагом курсивного начертания <I> и продолжающийся до его закрывающего парного флага </I> выводится на экран курсивом. Непарный флаг вызывает "единичное" действие в том месте, где он встречается. Например, флаг <BR> служит для перехода на новую строку при выводе текста. Многие флаги могут включать дополнительные параметры, или атрибуты, модифицирующие эффект данного флага, например: <P> - флаг начала параграфа, <P ALIGN=CENTER> флаг начала параграфа, выровненного по центру окна. Структура HTML документа. Типичный HTML-документ имеет головную часть и тело. Начало документа отмечается флагом <HTML>, а конец - флагом </HTML>. Синтаксис <HTML> <HEAD> <TITLE>...</TITLE> </HEAD> <BODY> ... ... ... </BODY> </HTML> Пример <HTML> <HEAD><TITLE>Vasya's Homepage</TITLE> </HEAD> <BODY>Добро пожаловать ко мне в гости!<BR>Рад вас видеть у себя дома. </BODY> </HTML> Как выглядит на дисплее (нажмите на эту ссылку) Головная часть документа (Head) Головная часть документа является служебной (на дисплей вместе с остальной частью документа не выводится.). Она обычно включает в себя название документа . Кроме того, в нее часто помещается <META>-информация - ключевые слова и описание документа, которые читаются некоторыми программами-роботами Синтаксис <HEAD>...</HEAD> Название документа (Title) Название документа помещается внутри его головной части. Оно выводится не вместе с самим документом, а в полосе заголовка окна программы просмотра. Поле title в документе является обязательным. Его не следует делать длиннее 64 символов. Название документа должно быть осмысленным, поскольку это поле читается программами-роботами и заносится в базы данных поисковых систем. Синтаксис <TITLE>...</TITLE> Пример <HEAD><TITLE>Caucasian Ovcharka Homepage</TITLE></HEAD> Определяет "видимую" часть HTML-документа. В документе должно быть только одно тело. Синтаксис <BODY>...</BODY> Пример: <BODY>Это крошечный HTML-документ.</BODY> Как выглядит на дисплее:
Флаги форматирования текста Параграф (Paragraph) Флаг параграфа может использоваться и как парный, и как непарный флаг. Он служит признаком начала нового параграфа (т.е., абзаца). Программа просмотра выводит перед началом параграфа пустую строку и начинает параграф с новой строки. В сложившейся практике использования языка HTML в качестве атрибута флага начала параграфа <P> можно задать параметр ALIGN, устанавливающий выравнивание (выключку) параграфа по левому полю, центру или правому полю. Если этот параметр не задавать, выравнивание производится по левому полю. Синтаксис
Пример: <P>Это первый параграф.<P ALIGN=RIGHT>Это второй.<P>А это - третий. <P ALIGN=CENTER>Этот параграф выровнен по центру.</P> Как
выглядит на дисплее:
Замечание: прием, когда для увеличения расстояния между параграфами вводят несколько последовательных флагов <P><P><P>, не является правильным с точки зрения языка HTML и не будет поддерживаться в будущем. Поэтому авторы не рекомендуют использовать его при форматировании документа. "Правильная" программа просмотра "сожмет" несколько повторяющихся флагов <P> в один. Разрыв строки (жесткий возврат каретки) (Line Break) Текст, следующий за этим флагом, начинается с новой строки (в отличие от флага параграфа, пустая строка при этом в текст не вставляется). Синтаксис <BR> Пример: МГУ<BR>Химический факультет<BR>Кафедра электрохимии.<BR> Как выглядит на дисплее:
Замечание: как и для флага <P>, последовательность флагов <BR><BR><BR> не следует использовать для увеличения расстояния между строками текста. Горизонтальная линия (Horizontal Rule) Обычно используется для разделения текста на логические части. На месте этого флага рисуется горизонтальная линия. Обратите внимание, что данный флаг завершает текущий параграф и вызывает переход на новую строку. Флаг <HR> часто используется с несколькими параметрами, определяющими длину линии по горизонтали в пикселах или процентных долях ширины экрана (WIDTH), ее ширину в пикселах (SIZE), положение на экране (ALIGN) - слева, по центру, справа, - а также вид (атрибут NOSHADE выводит линию черного цвета). Синтаксис <HR> <HR ALIGN=LEFT|CENTER|RIGHT SIZE=nn WIDTH=mm | mm% NOSHADE> Пример: Первая логическая часть.<HR>Вторая.<HR><P ALIGN=CENTER> Третья.<HR ALIGN=CENTER WIDTH=50%> Как выглядит на дисплее:
Флаги, задающие физические стили текста Жирный шрифт (Boldface) Синтаксис <B>...</B> Пример: Нажмите клавишу <B>Enter</B>, когда вы готовы. Как выглядит на дисплее:
Синтаксис <I>...</I> Пример: Есть сведения, что <I>de facto</I> он является руководителем этой организации. Как выглядит на дисплее:
Текст с подчеркиванием (Underline) Этот флаг не является легальным в стандарте языка HTML 2. Возможно, он будет включен в последующие версии языка. Однако следует иметь в виду, что большинство программ просмотра использует подчеркивание для выделения гиперссылок, поэтому мы бы не рекомендовали использовать флаг подчеркивания, чтобы не запутать читателя. Синтаксис <U>...</U> Пример: Есть сведения, что <u>de facto</u> он является руководителем этой организации. Как выглядит на дисплее:
Подстрочные и надстрочные индексы (Subscripts and Superscripts) Подстрочные и надстрочные индексы широко используются при написании математических и химических формул. Синтаксис Подстрочный индекс: <SUB>...</SUB> Надстрочный индекс: <SUP>...</SUP> Пример: SO<SUB>4</SUB><SUP>2-</SUP> + Ba<SUP>2+</SUP> = BaSO<SUB>4</SUB> Как выглядит на дисплее:
Размер и цвет шрифта (Font Size and Color) Размер шрифта выражается в некоторых условных единицах, изменяющихся от 1 до 7, и задается с помощью атрибута SIZE флага FONT. Можно задать либо абсолютный размер, либо его изменение относительно размера, установленного в программе просмотра по умолчанию (такому размеру приписывают значение 3). Цвет участка текста задается с помощью атрибута COLOR. Синтаксис Абсолютный размер: <FONT SIZE="nn">...</FONT> где nn - размер шрифта в произвольных единицах (от 1 до 7). Относительный размер: <FONT SIZE="+nn">...</FONT> или <FONT SIZE="-nn">...</FONT> где nn - число пунктов, на которые шрифт будет увеличен (уменьшен) относительно шрифта, принимаемого по умолчанию. Цвет: <FONT COLOR="#RRGGBB">...</FONT> где RR, GG и BB характеризуют доли, соответственно, красного, зеленого и синего компонент в цвете, которым будет выделена часть текста, заключенная между открывающим и закрывающим флагами. Значения RR, GG и BB выражаются в шестнадцатеричной системе счисления. Пример: <font size="-2">Привет! </font>Привет!! <font color="#FF0000" size="+4">Привет!!!</font> Как выглядит на дисплее:
Включение графики в HTML-документыВключение изображения из графического файла (Inline Image)В HTML-документ можно включить изображения из графических файлов в форматах GIF, JPEG и некоторых других. Но наиболее часто используемыми в WWW являются графические форматы GIF и JPEG. Синтаксис <IMG SRC="местоположение_файла" ALIGN= left | right | top | texttop | middle | absmiddle | bottom | absbottom WIDTH=nnn HEIGHT=nnn HSPACE=nnn VSPACE=nnn ALT="альтернативный текст"> Атрибуты ALIGN, WIDTH, HEIGHT, HSPACE и VSPACE, задающие расположение рисунка на странице, являются необязательными. ALT, задает так называемый альтернативный текст. Атрибут SRC служит для указания программе просмотра имени и местоположения графического файла. Ниже мы более подробно рассмотрим все атрибуты, но прежде всего расскажем о том, как правильно задать местоположение графического файла. Простейший пример: <IMG SRC="gsdog.gif" ALT="German Shepherd">Пр-р-ривет! Как выглядит на дисплее:
Где программа просмотра должна искать графический файл?Чтобы программа просмотра смогла найти графический файл с изображением, включаемым в HTML-документ, необходимо указать имя и местоположение графического файла в WWW-пространстве. При этом, в зависимости от взаимного расположения HTML-файла с документом и графического файла, можно указывать либо абсолютный URL графического файла, либо его координаты относительно HTML-файла с документом. Ниже мы рассмотрим, в порядке возрастания сложности, следующие три ситуации:
В любом случае допустимо указание полного, или, как говорят, абсолютного, URL графического файла. Абсолютный URL, включает имя протокола, адрес сервера, имя директории и имя файла. Однако, в первых двух из вышеперечисленных случаев указание абсолютного URL часто не только избыточно, но и нежелательно, поскольку значительно усложняет перенос документа с одного сервера на другой или даже из одной директории в другую. Если файл с изображением находится на том же сервере (или на том же локальном диске) и в той же директории, что и сам HTML-документ, то достаточно указать только имя этого файла. Синтаксис <IMG SRC="имя_файла" ALT="..."> Пример Представим себе, что URL документа - http://www.scs.uiuc.edu/~dima/index.html, а URL графического файла - http://www.scs.uiuc.edu/~dima/mailbox.gif. Тогда изображение из графического файла включается так: <IMG SRC="mailbox.gif" ALT="Mail Box"> Если графический файл находится на том же сервере (или том же локальном диске), что и сам HTML-документ, но в другой директории, указывается путь к файлу. При этом путь к файлу может быть задан либо по отношению к директории с HTML-документом, либо по отношению к корневой директории. При загрузке документа с WWW-сервера корневой директорией считается document root directory, которая, задается при настройке сервера. При загрузке с локального диска корневой будет считаться корневая директория в файловой системе. Имена директорий указываются по правилам UNIX:
Синтаксис <IMG SRC="имя_директории/имя_файла" ALT="..."> Пример Пусть URL документа - http://www.scs.uiuc.edu/~dima/k9dict_internal/k9dict.html а файла с изображением - http://www.scs.uiuc.edu/~dima/mailbox.gif Тогда команда включения файла может выглядеть так: <IMG SRC="../mailbox.gif" ALT="Mail Box"> Представим теперь, что в примере, приведенном выше, для включения графического файла в файл k9dict.html мы бы использовали следующую команду: <IMG SRC="http://www.scs.uiuc.edu/~dima/mailbox.gif" ALT="Mail Box"> При "пересадке" дерева взаимосвязанных документов с одного сервера на другой абсолютные URL графических файлов, принадлежащих дереву, становятся недействительными, а относительные - остаются верными. До тех пор, пока не возникнет необходимости переместить в WWW-пространстве множество взаимосвязанных документов, в которое входит файл k9dict.html, обе приведенные выше формы включения графического файла с точки зрения читателя документа совершенно эквивалентны. Но при перемещении всей структуры взаимосвязанных HTML-документов и графических файлов из http://www.scs.uiuc.edu/~dima/ на другой сервер и/или в другую директорию и/или локальный диск URL графического файла mailbox.gif изменится. Вследствие этого команда <IMG SRC="http://www.scs.uiuc.edu/~dima/mailbox.gif" ALT="Mail Box"> станет неправильной и потребует редактирования, тогда как <IMG SRC="../mailbox.gif" ALT="Mail Box"> по-прежнему останется действительной, поскольку расположение файлов друг относительно друга при таком перемещении останется прежним. И лишь только если графический файл и HTML-документ находятся на разных серверах, то у автора документа не остается другого выбора, кроме как указать URL полностью. Синтаксис <IMG SRC="http://адрес_сервера:номер_порта/имя_директории/имя_файла" ALT="..."> Пример Пусть URL HTML-документа - http://www.chem.msu.su/foo.html, а URL графического файла - http://www.scs.uiuc.edu/~dima/dima_tim.jpg Тогда команда включения будет такой: <IMG SRC="http://www.scs.uiuc.edu/~dima/dima_tim.jpg" ALT="Dima and Tim"> Таким образом, мы видим, что чем ближе файлу с HTML-документом расположен графический файл в WWW-пространстве, тем менее подробно указываются его координаты. Расположение изображений на WWW-странице (Alignment)При помощи необязательного атрибута ALIGN флага <IMG ...> можно управлять расположением изображения на странице относительно текста и других изображений. Синтаксис ALIGN=left | right | top | texttop | middle | absmiddle | bottom | absbottom
Номера на рисунке соответствуют номерам в нижеследующем списке; Атрибуты, помеченные в списке звездочкой, не входят в стандарт HTML 2.0 и поддерживаются не всеми программами просмотра. 1. ALIGN=bottom - нижняя сторона изображения выравнивается по базовой линии следующего за ним текста. 2. *ALIGN=absbottom - нижняя сторона изображения выравнивается по низу строки следующего за ним текста. 3. *ALIGN=absmiddle - горизонтальная линия, проходящая через центр строки следующего за рисунком текста выравнивается по центру изображения. 4. ALIGN=middle - базовая линия следующего за рисунком текста выравнивается по центру изображения. 5. ALIGN=top - изображение располагается на одной линии с самым высоким объектом (текстом или рисунком) в строке. 5'. *ALIGN=texttop - изображение располагается на одной линии с самым высоким символом текста в строке. 6. *ALIGN=left - изображение выравнивается по левому краю окна, а следующий за ним текст обтекает его справа. 7. *ALIGN=right - изображение выравнивается по правому краю окна, а следующий за ним текст обтекает его слева. Пример: Пр-р-ривет! <IMG SRC="gsdog.gif" ALT="German Shepherd">В данном случае изображение не выровнено. Как выглядит на дисплее:
Пример: Пр-р-ривет!<IMG SRC="gsdog.gif" ALIGN=left ALT="German Shepherd">Это изображение выровнено по левому краю страницы. Обратите внимание на то, как текст окружает рисунок. Как выглядит на дисплее :
Ширина и высота изображений (Width and Height)При помощи атрибутов WIDTH и HEIGHT, задают размеры изображения в пикселах, чтобы при загрузке HTML-документа программа просмотра сразу отвела под это изображение необходимое ему пространство на странице и загрузила основной текст, который можно читать, пока программа просмотра получает содержимое графического файла. Следует иметь ввиду, что если размеры изображения не заданы, то чтобы их узнать, программа просмотра вынуждена вначале загрузить весь графический файл (что иногда занимает до нескольких минут), и только после этого - следующий за изображением текст. Долгое ожидание раздражает читателя, и он может просто прервать загрузку вашего HTML-документа и никогда больше к нему не возвращаться. Пример: <IMG SRC="GSDog.gif" width=52 height=130 ALT="German Shepherd">Пр-р-ривет! Изображение искажено! Размер оригинала 100х130, а выведено 52х130. Как выглядит на дисплее:
Горизонтальный и вертикальный отступ (Horizontal and Vertical Spaces)Текст, вплотную прилегающий к изображению, выглядит некрасиво. Гораздо лучше, если между изображением и окружающим его текстом имеется некоторый "зазор". Синтаксис HSPACE=nnn VSPACE=nnn где nnn - величина зазора, выраженная в пикселах. Пример: Пр-р-ривет!<IMG SRC="gsdog.gif" ALIGN=left hspace=20 vspace=20 ALT="German Shepherd">Это изображение выровнено по левому краю, и, кроме того, заданы размеры вертикального и горизонтального отступов. Обратите внимание на то, что текст, окружающий рисунок, теперь не прилегает к нему вплотную. Как выглядит на дисплее :
Гиперсвязи в HTML-документах (Hyperlinks)Как мы уже знаем, HTML-документы являются гипертекстовыми. Это означает, что часть текста или участок изображения в HTML-документах может ссылаться на другой участок внутри того же самого документа, или на другой документ в сети Internet. Такая ссылка называется гипертекстовой связью (hypertext link), гипертекстовой ссылкой (hypertext reference) или просто гиперсвязью.. Программа просмотра каким-либо образом (чаще всего подчеркиванием и/или особым цветом) выделяет гиперссылку на фоне остального текста. Когда читатель выбирает гиперссылку при помощи клавиатуры или мыши, программа просмотра пытается загрузить связанный с ней документ. Синтаксис <A HREF="путь_к_файлу | URL">Якорь</A> где путь_к_файлу - путь к файлу со связанным документом, а URL - это Uniform Resource Locator связанного документа. Замечание: в якорь гиперссылки можно включить изображение из графического файла. При этом, щелчок мышью на любой части этого изображения приведет к выбору данной гиперссылки. Пример: Щелкните на рожице <A HREF="10anecdotes.html"><IMG SRC="face.gif" ALT="Face"></A> - и вы прочитаете десятку наших лучших анекдотов. Как выглядит на дисплее:
В предыдущем разделе, посвященном включению графики в HTML-документ, мы обсуждали возможность задать либо абсолютный URL, либо положение графического файла относительно включающего его HTML-документа. Это обсуждение остается в силе также и для гиперсвязей, рассматриваемых здесь. Помните, что указание полного пути к файлу и, тем более, его абсолютного URL, существенно затрудняет переносимость группы связанных документов из одной директории в другую или с одного сервера на другой. |
||||||||||||||||
Пр-р-ривет!
