- это выравнивание по нижнему
краю (делается browser по умолчанию).
В HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе (например, Emacs или vi на UNIX машинах, или любом редакторе на IBM PC).
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:
Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:
Примечание: HTML не различает, какими буквами набраны символы форматирования: <title> равносильно <TITLE> или <TiTlE>.
Основной текст отделяется от сопроводительного символами:
<BODY> </BODY>
Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов.
Практически во всех browsers заголовок документа виден в верхней части экрана (окна).
Для выделения заголовка служат символы:
<HEAD><TITLE>Заголовок</TITLE></HEAD>
HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <H1>. Синтаксис заголовков: <Hy> Текст заголовка</Hy > где y - число от 1 до 6, определяющее уровень заголовка.
В отличие от документов в больши нстве текстовых процессоров, прерывани строк и слов в HTML-файлах не существенны. Обрыв слова или строки может происходить в любом пункте в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Напомним, что в нашем примере, первый параграф был представлен как
В исходном файле два предложения находятся на двух разных стороках. Web browser игнорирует это перерывание строки и начинает новый абзац только, после знака < P>. Однако, чтобы сохранить удобочитаемость в исходных HTML-файлах, мы рекомендуем заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к < P>).
Также заметим, что хотя в действующих версиях HTML нет признака форматировани < /P>, мы Вам рекомендуем его употреблять, поскольку он может быть введен в последующих версиях. К ошибке это не приведет, поскольку все незнакомые символы browser просто игнорирует. В противном случае, Вам в последствии, может быть, придется переделывать Ваши HTML-документы. В версии HTML+ предлагается, по аналогии с описанием заголовков, использовать как открывающий, так и закрывающий знаки абзаца:
Преимущество этого изменения в том, что Вы будете способны форматировать абзац. Например, располагать его в цетре строки, выделив его символами:
<P ALIGN=CENTER>
Главное преимущество HTML состоит в его способности связываться с другими документами. Browser выделяет (обычно цветом и/или подчеркиванием) ключевые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описываетс ссылка на другой документ следующим образом:
<A HREF="имя файла"> Текст, который будет служить как обращение к другому документу</A>.
Приведем пример такой гипертекстовой ссылки:
<A HREF="minihtml.html">Пример HTML-текста</A>
Здесь ключевые слова `Пример HTML-текста' являются гиперссылкой на файл minihtml.html, который лежит в той же директории, что и текущий документ. Вы можете ссылаться на документ, лежащий в любой директории, описав к нему полный путь. Так, например, ссылку на файл NJStats.html, лежащий в поддиректории AtlanticStates можно описать как:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Это так называемые относительные ссылки. Вы также можете использовать абсолютное имя файла (полный путь). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.
URL - это абревиатура от Uniform Resource Locator. В него входит, кроме названия файла и директории: сетевой адрес машины и метод доступа к файлу.С помощью URL можно запускать удаленные программы, и передавать им значения. На этом принципе построены шлюзы в другие интернетовские сервиса: finger, archie, ..... Здесь представлены несколько наиболее часто используемых типов URL. Допустим файл с именем "online15.zip" лежит на ftp сервере ftp.simtel.ru в директории /pub/doc/services/ тогда URL этого файла будет выглядeть так: file://ftp.simtel.ru/pub/doc/services/online15.zip URL директории в которой лежит файл: file://ftp.simtel.ru/pub/doc/services/ а URL корневой директории ftp сервера ftp.simtel.ru выглядит вот так: file://ftp.simtel.ru/
Gopher URL's не так разнообразны, как файловые. Это связано с ограниченностью этого сервиса. Для того что бы описать, например, gopher сервер узла gopher.kiae.su необходим URL:
Некоторые gopher-сервера могут находиться на нестандартном номере порта (по умолчанию обычно используется 70 порт) тогда он должен указываться:
Если вы внимательно посмот рите на исходники какого нибудь гипертекстового документа, и обратите внимание на то как указаны ссылки на другие URL то заметите, что встречаются два вида:
1. <A Href="http://www.simtel.ru/news/snews.http">News</A> 2. <A Href="aaa.html">AAA</A>
Первый - это полный URL, а второй - частичный. Частичный URL указывает на документ который находится на том же сервере и в тойже директории, что и документ в котором встречается эта ссылка.
Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, мы хотим соединить документ А с первой главой документа В, для чего нам необходимо создать именнованную гиперссылку в документе B.
Теперь, описывая ссылку в документе A, надо включить не только имя файла "documentB.html"но также и имя гиперссылки, отделяемое символом (#):
Теперь "кликнув" в слово"Главы 1" в документе А, вы переходите непосредственно в Главу 1 в документе B.
Техника соединения аналогична описанной выше, только опускается им файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ B)
Выше было описано, как создавать простые HTML-документы. Для более сложных документов, HTML имеет некоторые дополнительные возможности форматирования.
HTML поддерживает ненумерованные, нумерованные списки и списки определений.
Ненумерованный список: <UL><LI>список пунктов </UL>, например:
что дает на экране:
Нумерованный список идентичен ненумерованному списку, только вместо < UL> используется < OL>.
что дает на экране:
Browser автоматически нумерует элементы такого списка.
Список определений обычно состоит из чередования термина ( DT ) и определения ( DD ). Обычно Web browsers определения располагает на новой строке. Приведем пример списка определений:
<DL>
<DT> NCSA
<DD> NCSA (National Center for Supercomputing Applications).
<DT> CTC
<DD> CTC (Cornell Theory Center).
</DL>
что дает:
Списки могут быть произвольно вложены, хотя разумнее было бы практически ограничиться тремя уровнями вложенных списков.
Приведем пример вложенных списков:
что дает на экране:
Как мы уже говорили выше, в общем случае, текст документа формируетс browser, игнорируя пробелы и переносы строк. Используя <PRE> можно описать в тексте заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы и пустые строки, и строки будут прерыватьс там же что и в исходном HTML-файле.) Это полезно, например, для изображени программ:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile rm *
</PRE>
что дает на экране:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile rm *
При этом на экране текст пишется шрифтом фиксированной ширины.
В пределах <PRE> могут использоваться гиперссылки. Однако, в пределах < PRE> , необходимо избегать использовать другие методы форматирования HTML-документов. Заметим, что поскольку <, >, и & имеют специальное значение в HTML, необходимо использовать вместо них симвлды ( & lt; , & gt; , и & amp; , соответственно).
Используя < BLOCKQUOTE> , можно включить в текст отдельную цитату. Большинство browsers отделяет такую цитату от окружающего текста. Например:
Что дает на экране:
Для того чтобы перейти в другой каталог на том же диске, можно нажать комбинацию клавиш [Alt-F10]. После этого на экране изображается дерево каталогов на диске. Клавишами перемещения курсора следует выделить нужный катлог и нажать [Enter].
Можно также набрать первые буквы имени того катлога, в который надо перейти. Norton Commander постарается сам выделить нужный каталог.
< ADDRESS> используется, чтобы определить автора документа и способы контакта c ним (например, e-mail адрес). Обычно это последний пункт в файле.
Например, последняя строка этого документа выглядит:
<ADDRESS> Введение в HTML/ НИИЯФ МГУ/ lenka@srdlan.npi.msu.su</ADDRESS>
Что дает на экране:
Введение в HTML/ НИИЯФ МГУ/ lenka@srdlan.npi.msu.suВнимание: <ADDRESS>НЕ используется дл почтового адреса.
Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический. Логические стили определяют текст согласно заданному значению, в то время как физические стили определяют некоторые участки текста.
Зачем существуют два стиля, если они могут дать одинаковый результат на экране? В ка честве ответа на этот вопрос сошлемнся на аксиому: "Доверьтесь вашему browser."
В идеале, в SGML, содержание отделяется от заглавия. Таким образом, SGML определяет строку как заголовок, но не определяет, что заголовок должен быть написан, например, жирным шрифтом с размером букв 24 пункта, и должен быть расположен в верхней части страницы. Преимущество этого подхода (это подобно в концепции стиля в большинстве текстовых процессоров) - в том, что если Вы решаете заменить стиль заголовка - все, что Вы должны сделать - это измененить определение заголовка в Web browser.
Другое преимущество стилей в том, что, например, удобнее определить что - нибудь как < H1> чем помнить, каким шрифтом надо описывать заголовок. Это же истинно и для отдельных символов. Например, рассмотрим <STRONG> . Большинство browsers рассматривают это как жирный шрифт в тексте. Однако, возможно, что читатель предпочел бы что этом разделе это выделялось, например, другим цветом. Таким образом, стили дают пользователю большую свободу в выборе шрифтов.
Существуют физические способы выделения - автор задает стиль написани текста, описывая шрифт в исходном HTML-документе.
Вы можете задать:
Символы <, >, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать:
ЗАМЕЧАНИЕ:Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать < вместо <.
Используя <BR> Вы можете перейти на новую строку, не начиная нового абзаца (в большинстве browser абзацы выделяются дополнительными пустыми строками).
Например:
даст на экране:
Фирма СофтСервис
предоставляет различные услуги
Используя <HR> Вы можете разделить текст горизонтальной чертой:
Большинство Web browsers могут показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет показ документа) то мы не рекомендуем Вам включать слишком большое количество или чрезмерно большие по размеру рисунки в Ваш HTML-документ.
Чтобы включить рисунок, надо описать гиперссылку на него:
<IMG SRC=image_URL>
где image_URL - URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF.
Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текта, но Вы можете задавать взаимное расположение рисунка и текста:
- это выравнивание по нижнему
краю (делается browser по умолчанию).
- это выравнивание
по верхнему краю.
Форматирование положения рисунка задается включением в гиперссылку пункта "ALIGN = ":
<IMG ALIGN=top SRC=image_URL>
Также возможны типы выравнивания:
Некоторые WWW-browsers, (напоимер, используемые на VT100-терминалах) не могут показывать рисунки. Такие пользователи смогут увидеть только текст, заданный в пункте гиперссылки "ALT = ". Сопроводительный текст должен быть включет в кавычки. Например:
<IMG SRC="/pics/digest/LOGO.GIF" ALT = "logo.gif" >
Если Вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить - смотреть или не смотреть ему этот рисунок:
<A HREF = image_URL>Здесь</A> Вы можете увидеть рисунок.
Рассмотрим следующую строку HTML-документа:
<B>Это пример <DFN>наложения стилей</B> в HTML-документе</DFN> Слова "наложения стилей" определены одновременно как <B> и <DFN>. Как будут реагировать на это browser? Очевидно, что разные browser - по разному, и предсказать, каким на самом деле увидет Ваш текст пользователь, нельзя. Поэтому рекомендуем Вам избегать такого наложения стилей.
Можно использовать гиперссылку внутри строки заданного стиля:
<H1><A HREF = " begth_r1.html "> Введение в HTML </A></H1>
Но нельзя изменять стиль внутри гиперссылки:
<A HREF = " begth_r1.html "> <H1> Введение в HTML </H1> </A>
Когда Вы описываете ссылку <IMG> на рисунок, которого не существует, он заменяется фиктивным изображением. Проверьте, что рисунок существует, что в гиперссылке указан правильный URL, и что у пользователей есть права на использование этого файла.
Рассмотрим более длинный пример HTML-документа:
Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-броузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введенна пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Когда вы описываете форму, каждый элемент ввода данных имеет тэг <INPUT>. Когда пользователь помещает данные в элемент формы, инфоромация размещаетс в разделе VALUE данного элемента.
Все формы начинаются тэгом <FORM> и звершаются тэгом </FORM>.
<FORM METHOD="get|post" ACTION="URL"> Элементы_формы_и_другие_элементы_HTML </FORM>
METHOD
Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
ACTION
ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.
TEXTAREA
Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вот пример использовани тэга <TEXTAREA>:
<TEXTAREA NAME="address" ROWS=10 COLS=50> Москва, Дмитровкое шоссе, д.9Б, офис 448 </TEXTAREA>
Атрибуты, используемые внутри тэга <TEXTAREA> описывают внешний вид и имя вводимого значения. Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.
INPUT
Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:
Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:
SELECT
Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Тэг SELECT имеет один или более параметр пежду стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображаетс в строке выбора. Вот пример тэга <SELECT>:
<FORM> <SELECT NAME=group> <OPTION> AT 386 <OPTION> AT 486 <OPTION> AT 586 </SELECT> </FORM>
SELECT SINGLE
Тэг SELECT SINGLE - это то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический свертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:
<FORM> <SELECT SINGLE NAME=group SIZE=4> <OPTION> AT 386 <OPTION> AT 486 <OPTION> AT 586 <OPTIONS> Pentium PRO </SELECT> </FORM>
SELECT MULTIPLE
Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Пример:
<FORM> <SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2> <OPTION> AT 386 <OPTION> AT 486 <OPTION> AT 586 <OPTIONS> Pentium PRO </SELECT> </FORM>
Если выбрано одновременно несколько значений, то серверу передаютс соответствующее выбранному количество параметров NAME=VALUE с оддинаковыми значениями NAME, но разными VALUE.
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Таблица: <TABLE>...</TABLE>
Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамлени и разделителей. Обрамление добавляется атрибутом BORDER.
Строка таблицы: <TR>...</TR>
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы: <TH>...</TH>
Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись: <CAPTION>...</CAPTION>
Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
BORDER
Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
ALIGN
Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>,
то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию
ALIGN=top.
Если атрибут ALIGN встречается внутри <TR>, <TH> или
<TD>, он управляет положением данных в ячейках по горизонтали. Может
принимать значения left (слева), right (справа) или center (по центру).
VALIGN
Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
NOWRAP
Данный атрибут говорит о том, что данные в ячейке не могут логически разбиываться на несколько строк и должны ьбыть представлены одной строкой.
COLSPAN
Указывает, какое количество ячеек будет объединено по горизонтали дл указанной ячейки. По умолчании - 1.
ROWSPAN
Указывает, какое количество ячеек будет объединено по вертикали дл указанной ячейки. По умолчании - 1.
COLSPEC
Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".
<TABLE BORDER=15>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее
значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD
ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD
ALIGN=center>56</TD></TR>
</TABLE>
| Среднее значение | ||
|---|---|---|
| Рост | Вес | |
| Мужчины | 174 | 78 |
| Женщины | 165 | 56 |