Обязательные метки <html> ... </html> Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ. <head> ... </head> Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже. <title> ... </title> Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов. <body> ... </body> Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. <H1> ... </H1> — <H6> ... </H6> Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий. <P> ... </P> Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например: <H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1> или <P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
ПРИМЕР 1 <html> <head> <title> Пример 1 </title> </head> <body> <H1> Привет! </H1> <P> Это простейший пример HTML-документа. </P> <P> Этот *.html-файл может быть
</P> </body> </html>
<BR> Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов
ПРИМЕР 2 <html> <head> <title>Пример 2</title> </head> <body> <H1>Стих</H1> <H2>Автор неизвестен</H2> <P>Однажды в студеную зимнюю пору<BR> Сижу за решеткой в темнице сырой.<BR> Гляжу - поднимается медленно в гору<BR> Вскормленный в неволе орел молодой.</P> <P>И шествуя важно, в спокойствии чинном,<BR> Мой грустный товарищ, махая крылом,<BR> В больших сапогах, в полушубке овчинном,<BR> Кровавую пищу клюет под окном.</P> </body> </html> <HR> Метка <HR> описывает вот такую горизонтальную линию:
Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 3 приведена небольшая коллекция горизонтальных линий.
ПРИМЕР 3 <html> <head> <title>Пример 3</title> </head> <body> <H1>Коллекция горизонтальных линий</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html> Комментарии! Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. <!-- Это комментарий --> Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах. Физические стили
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. Ненумерованные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список: Иван; Данила; белая кобыла
необходим вот такой HTML-текст: <UL> <LI>Иван; <LI>Данила; <LI>белая кобыла </UL>
Обратите внимание: у метки <LI> нет парной закрывающей метки. Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример: <OL> <LI>Иван; <LI>Данила; <LI>белая кобыла </OL>
получится вот такой список: Иван; Данила; белая кобыла Списки определений: <DL> ... </DL>
Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста: <DL> <DT>HTML <DD>Термин HTML означает 'язык маркировки гипертекстов'. <DT>HTML-документ <DD>Текстовый файл с расширением *.html </DL>
Этот фрагмент будет выведен на экран следующим образом:
HTML
Термин HTML означает 'язык маркировки гипертекстов'.
HTML-документ
Текстовый файл с расширением *.html
Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста: <DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL>
будет выведен на экран примерно так:
А Первая буква алфавита
Б Вторая буква алфавита
В Третья буква алфавита
СВЯЗЫВАНИЕ ДОКУМЕНТОВ
При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например: <A HREF="index.html">Перейти к оглавлению</A>
При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html: <A NAME="AAA">Переход закончен</A>
Слова "Переход закончен" при этом никак не будут выделены в тексте документа.
Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер: <A HREF="2.html#AAA">Переход к анкеру AAA</A>
Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.html — достаточно только включить в него вот такой фрагмент: <A HREF="#AAA">Переход к анкеру AAA</A>
Изображения в HTML-документе
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например: <IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
АТРИБУТ ALIGN ТЕГА <IMG>
ПАРАМЕТРЫ
Left-выравнивается изображение по левому полю страницы , последующий текст будет размещен справа от изображения
Right-изображение выравнивается по праваму полю страницы, последующий текст будет изображен слева
Top-верх изображения будет выравнян по самому высокому элементу строки
Middle- базовая линия текущей строки будет проходить по середине высоты изображения
Bottom-выравнивает низ изображения по нижней линии текущей строки
ПРИМЕР 4
<HTML>
<HEAD>
<TITLE>Пример 4 </TITLE>
</HEAD>
<BODY>
<H1>Изображения </H1>
<P>Изображение можно встроить очень просто: </P>
<P><IMG ALIGN=LEFT SRC="E:\USER\1.GIF">
В ДАННОМ ПРИМЕРЕ ТЕКСТ БУДЕТ НАХОДИТСЯ СПРАВА ОТ ИЗОБРАЖЕНИЯ
А СЛОВО "КОНЕЦ" НИЖЕ ИЗОБРАЖЕНИЯ ПО ЦЕНТРУ <BR CLEAR=ALL> </P>
<P> <CENTER> <H1> <I> КОНЕЦ </I> </H1> </CENTER> </P>
</BODY>
</HTML>
АТРИБУТ HSPACE ТЕГА <IMG>
<IMG HSPACE=N> РАССТОЯНИЕ МЕЖДУ ИЗОБРАЖЕНИЕМ И ОКРУЖАЮЩИМ ЕГО ОБЪЕКТОМ
N-количество пикселей
ПРИМЕР 5 <HTML> <HEAD> <TITLE>Пример 5</TITLE> </HEAD> <BODY> <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG ALIGN=LEFT SRC="E:\USER\1.gif" HSPACE=6 > Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> </BODY> </HTML>
< IMG BORDER=N> ДОБАВЛЕНИЕ РАМКИ ШИРИНОЙ N ВОКРУГ ИЗОБРАЖЕНИЯ
<IMG BORDER=3 SRC="picture.gif>
ПРИМЕР 6 <HTML> <HEAD> <TITLE>Пример 6</TITLE> </HEAD> <BODY> <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG ALIGN=LEFT BORDER=4 SRC="E:\USER\1.gif" HSPACE=6 > Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> </BODY> </HTML>
ДРУГИЕ АТРИБУТЫ ТЕГА <IMG>
<IMG WIDTH=125 HEIGTH=125 > УПРАВЛЕНИЕ РАЗМЕРОМ КАРТИНКИ
<IMG WIGTH=125 HEIGTH=125 SRC="picture.gif" >
ПРИМЕР 7 <HTML> <HEAD> <TITLE>Пример 7</TITLE> </HEAD> <BODY> <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG ALIGN=LEFT WIGHT=90 HEIGHT=90 SRC="E:\USER\1.gif" HSPACE=6 > Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> </BODY> </HTML>
Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя
Разберем все, что мы знаем об изображениях, с помощью примера 8 <HTML> <HEAD> <TITLE>Пример 8</TITLE> </HEAD> <BODY> <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG SRC="E:\USER\1.GIF"></P> <P>Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> <P><A HREF="PRIM.html"><IMG SRC="E:\USER\1.GIF"> </A></P> </BODY> </HTML>
Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (в примере 8 переход происходит на оглавление Руководства). Цветовая гамма HTML-документа
Если Вы читаете это Руководство на Интернет, Вы уже могли заметить, что главы Руководства и примеры несколько отличаются по цветовой гамме. Главы Руководства написаны черным по белому, а гипертекстовые ссылки выделены красным цветом. Я не знаю, как Вы видите примеры, но у меня они написаны черным по серому с выделением ссылок синим цветом.
Дело в том, что главы Руководства содержат HTML-метки, определяющие их цветовую гамму. Примеры таких меток не содержат, поэтому их цветовая гамма устанавливается браузером самостоятельно. Именно поэтому я не знаю, какие цвета Вы видите в примерах — это определяется настройкой Вашего браузера.
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:
bgcolor
Определяет цвет фона документа.
text
Определяет цвет текста документа.
link
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.
bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.
Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета
НЕКОТОРЫЕ ИНТЕРЕСНЫЕ НЬЮАНСЫ
(ЗАМЕНЯЕТ СУЩЕСТВУЮЩИЙ ДОКУМЕНТ НА 2.HTML ЧЕРЕЗ 9 СЕКУНД)
<HTML>
<HEAD>
<TITLE> type_Document_ Title_
here </TITLE>
<META HTTP-EQUIV = "Refresh"
CONTENT = "9; URL =
2.htmL">
</HEAD>
<BODY>
<H1>Document 1</H1>
</BODY>
</HTML>
(ОРГАНИЗАЦИЯ МНОГООКОННОЙ СИСТЕМЫ)
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS = "200, *,
200">
<FRAME SRC = 3.html
NAME = boot>
<FRAMESET COLS = "%50, %50">
<FRAME SRC = 3.html NAME
= left>
<FRAME SRC = 4.html NAME =
right>
</FRAMESET>
<FRAME SRC = 5.html
NAME = foot>
</FRAMESET>
</HTML>
ПАРАМЕТР TARGET=ИМЯ ТЕГА <A HREF= ....> УКАЗЫВАЕТ В
ОКНО С КАКИМ ИМЕНЕМ ПОМЕСТИТЬ ДОКУМЕНТ.
ДИНАМИЧЕСКИЕ СТИЛИ
<H2 STYLE="color: green; cursor: hand">Наведи на меня мышь</H2>
