ЛАБ11_HTML_1
.pdf
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Дополнительные стили:
big (большой)
small (маленький)
sub (подстрочник)
sup (надстрочник)
Стиль |
Элемент или тег |
Результат |
|
Big |
Этот текст <BIG> большой </BIG> |
Этот текст большой |
|
Small |
Этот текст <SMALL> маленький |
Этот текст маленький |
|
</SMALL> |
|||
|
|
||
Sub |
Этот текст <SUB> подстрочник </SUB> |
Этот текст подстрочник |
|
Sup |
Этот текст <SUP> надстрочник </SUP> |
Этот текст надстрочник |
Теперь рассмотрим один пример с использованием этих тегов.
<html>
<body>
<p>Формула воды H2O. В данном параграфе формула набрана без использования
тега <sub></p>
<p>Формула воды H<sub>2</sub>O. В данном параграфе формула набрана с использованием тега <sub>. Формула выглядит более привычно.</p> <p>2^4=16. В данном параграфе формула набрана без использования тега <sub></p>
<p>2<sup>4</sup>=16. В данном параграфе формула набрана с использованием тега <sub>. Формула выглядит более привычно.</p>
</body>
</html>
Результат работы выглядит как на рисунке.
21
1.2. Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<EM> ... </EM>
От английского emphasis — акцент, т.е. курсив .
<STRONG> ... </STRONG>
От английского strong emphasis — сильный акцент, т.е. полужирный.
<CODE> ... </CODE>
Рекомендуется использовать для фрагментов исходных текстов.
<SAMP> ... </SAMP>
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
<KBD> ... </KBD>
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
<VAR> ... </VAR>
От английского variable — переменная. Рекомендуется использовать для написания имен переменных, этот шрифт также напоминает курсив.
Подытожим наши знания о логических и физических стилях с помощью примера 3.1. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили. Пример 3-1:
<HTML> <HEAD> <TITLE>Пример 3.1 </TITLE> </HEAD>
<BODY> <CENTER> <H1>Шрифтовое выделение фрагментов текста</H1> <HR> <P>Теперь мы знаем, что фрагменты текста можно выделять
<BR> <B>жирным</B> или <BR> <I>наклонным</I> шрифтом или <BR> <U> с подчеркиванием </U> шрифтом.
<BR> Кроме того, можно включать в текст фрагменты с фиксированной шириной символа
<TT>(имитация пишущей машинки)</TT> <HR> <P>Кроме того, существует ряд логических стилей: <P><EM>EM - от английского emphasis - акцент, то же самое, что курсив </EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент, то же самое, что полужирный </STRONG><BR>
<CODE>CODE - для фрагментов исходных текстов</CODE><BR> <SAMP>SAMP - от английского sample - образец </SAMP><BR> <KBD>KBD - от английского keyboard - клавиатура</KBD><BR> <VAR>VAR - от английского variable - переменная </VAR> <HR> </CENTER></BODY>
</HTML>
Результат этой программы:
22
2.Тело документа
Теги (метки) <BODY> и </BODY> содержат основное тело документа. Тело документа может содержать параметры в виде атрибутов. Основные атрибуты метки <BODY>:
bgcolor |
Определяет цвет фона документа. Синтаксис цвета см. ниже. |
text |
Определяет цвет текста. |
link |
Определяет цвет ключевых слов для гипертекстовых ссылок. |
vlink |
Определяет цвет использованных гипертекстовых ссылок. |
alink |
Определяет цвет гипертекстовой ссылки в момент нажатия на нее. |
background Определяет изображение, служащее фоном, т.е. рисунок обоя. Цвета в HTML указываются с помощью шестнадцатеричной системы кодирования. Эта система основана на трех компонентах — красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название — RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету. Поскольку немногие могут определить цвет по его шестнадцатеричному коду, в HTML можно использовать
23
английские стандартные названия цветов, которые перечислены вместе с их шестнадцатеричными значениями в нижней табл.
Названия цветов и значения #RGB
Названия |
коды |
Названия |
коды |
Black (черный) |
"#000000" |
Green (зеленый) |
"#008000" |
Silver (серебристый) |
"#C0C0C0" |
Lime (лимонный) |
"#00FF00" |
Gray (серый) |
"#808080" |
Olive (олифковый) |
"#808000" |
White (белый) |
"#FFFFFF" |
Yellow (желтый) |
"#FFFF00" |
Maroon (темнобордовый) |
"#800000" |
Navy (темносиний) |
"#000080" |
Red (красный) |
"#FF0000" |
Blue (синий) |
"#0000FF" |
Purple (фиолетовый) |
"#800080" |
Teal (Зеленоголубой) |
"#008080" |
Fuchsia (розовый, фуксия) |
"#FF00FF" |
Aqua (светлосиний) |
"#00FFFF" |
Пример: <body bgcolor = white text = black link = red vlink = maroon alink = fuschia background = "face.jpg">
При определении цветов для документа HTML вы можете использовать либо названия цветов, либо их коды. Например, следующие строки идентичны:
<BODY BGCOLOR=”#FFFFFF”>
<BODY BGCOLOR=”WHITE”>
3.HR - горизонтальные линии
Горизонтальные линии можно использовать, чтобы указать на изменение темы.
Закрывающие метки в элементах HR запрещены. Допустимые атрибуты:
ALIGN, SIZE и WIDTH.
Атрибут |
Назначение |
ALIGN |
С помощью этого атрибута можно задать выравнивание линии по |
|
левому краю (align=LEFT), по правому краю (align=RIGHT) или по |
|
центру (align=CENTER). По умолчанию, линия выравнивается по |
|
центру. |
WIDTH |
Длину линии можно указать в пикселях (например, width=100) или |
|
в процентном отношении (например, width="50%") к ширине окна |
|
броузера. Если используются проценты, добавьте знак процента к |
|
числу. По умолчанию установлено 100%. |
SIZE |
Высота линии в пикселях, этот атрибут может принять значения в |
|
виде целых чисел, например, 4, или 8, или 16 и т.д. |
COLOR |
Для указания цвета разделительной линии можно использовать ше- |
|
стнадцатеричное значение RGB или стандартное название цвета. |
Горизонтальные линии следует использовать в тех случаях, когда требуется жесткое разделение текста. Основные принципы использования линий заключаются в том, что они никогда не должны располагаться между заголовком и последующим текстом. Их также не следует использовать для создания пустот
24
в документе. Пустые места, не заполненные текстом, играют важную роль в оформлении страниц. Конечно, излишек пустых мест на страницах портит общий вид документа; однако если свободного места совсем нет, то страницы выглядят переполненными.
<HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>
В нижнем примере приведена небольшая коллекция горизонтальных линий.
<html> <head> <title>Пример 4</title> </head>
<body> <H1 ALIGN=CENTER>Коллекция горизонтальных линий</H1> <HR SIZE=2 WIDTH=100% COLOR=red> <BR>
<HR SIZE=4 WIDTH=50% COLOR=green> <BR>
<HR SIZE=8 WIDTH=25% COLOR=blue> <BR>
<HR SIZE=16 WIDTH=12% COLOR=black> <BR> </body>
</html>
Результат данного фрагмента программы приведен ниже:
Коллекция горизонтальных линий
4. Добавление изображений в документ HTML
Поместить изображение в документ HTML очень просто. Введите этот тег в то место документа HTML, где вы хотите поместить изображение. Затем замените имя файла на URL рисунка.
<IMG SRC=”имя файла”>
Здесь SRC обязательный атрибут. Указывает путь к изображению – файлу формата GIF, JPEG или PNG.
По умолчанию, броузер отобразит это изображение в указанном месте, справа от текста или другого объекта, который непосредственно предшествует изображению.
Посмотрите на пример, приведенный ниже. Он показывает одно и то же изображение три раза. Каждый раз изображение отображается в строке, поэтому броузер располагает его справа от предшествующего текста.
<HTML> <HEAD> <TITLE> Использование тега IMG </TITLE> </HEAD>
<BODY> <Р> <IMG SRC=”dog.gif”> Этот текст идет сразу же после рисунка. <Р> Этот текст разорван <IMG SRC=”dog.gif”> рисунком.
<Р> В этом случае рисунок появляется после текста. <IMG SRC=” dog.gif”>
</BODY> </HTML>
25
Выравнивание текста с изображениями в строке осуществляется атрибутом ALIGN. По умолчанию при помещении изображения в строке текст выравнивается по нижней части изображения. Возможно, вы захотите изменить такое выравнивание, поскольку при этом остается слишком много пустого места на странице. Эту настройку можно изменить с помощью атрибута ALIGN в теге <IMG>. В табл. приведены значения, которые можно присвоить этому атрибуту.
Значение Описание
Выравнивает текст по верхнему краю изображения Выравнивает текст по средней части изображения Выравнивает текст по нижнему краю изображения Выравнивает изображение по левому полю. Текст, следующий за изображением, "обтекает" изображение справа. Выравнивает изображение по правому полю. Текст, следующий за изображением, "обтекает" изображение слева.
В примере ниже приведен код документа HTML, включающего три изображения, для каждого из которых используется одна из опций выравнивания, перечисленных выше.
<HTML> <HEAD> <TITLE>Использование атрибута ALIGN в дескрипторе IMG</TITLE> </HEAD> <BODY> <Р> <IMG SRC=”dog.jpg” ALIGN=TOP>
Этот текст выравнивается по верхнему краю изображения. </Р> <Р> <IMG SRC=”dog.jpg” ALIGN=MIDDLE>
Этот текст выравнивается по средней части изображения. </Р> <Р> <IMG SRC=”dog.jpg” ALIGN=BOTTOM>
Этот текст выравнивается по нижнему краю изображения. </Р> </BODY> </HTML>.
Следующий пример показывает варианты обтекания рисунка текстом.
<HTML><HEAD> <TITLE>Использование атрибута ALIGN в теге IMG&</TITLE></HEAD> <BODY>
<P> <IMG SRC=”dog.jpg” ALIGN=LEFT>
Этот текст располагается справа от изображения и ниже. <P> <IMG SRC=”dog.jpg” ALIGN=RIGHT>
Этот текст располагается слева от изображения и ниже. </Р>
</BODY> </HTML>
5. Переход по гиперссылке – тег <A> (анкер)
Гиперссылки являются ключевым компонентом, делающим WEB-документ привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать
26
файл по FTP-протоколу для отображения его броузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
URL-адрес. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:
method://machine-name/path/foo.html
Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола: http://www.softexpress.com/index.html
Uniform Resource Locator имеет следующий формат: method://servername:port/pathname#anchor
Опишем каждый из компонентов URL: METHOD
Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:
file:
чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отобажает файл index.html из каталога /home/alex на пользовательской машине
http:
доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например:
http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress
ftp:
запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename
mailto:
активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слэшей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)
telnet:
обращение к службе telnet
news:
вызов службы новостей, если броузер ее поддерживает. Например: news:relcom.www.support
SERVERNAME
Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.
Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.
PORT
27
Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.
PATHNAME
Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEBсервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe
В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слэши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEBсервером в качестве корневого. Если же URL закагчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).
#ANCHOR
Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тега NAME, как это будет описано далее.
ВHTML переход от одного фрагмента текста к другому задается с помощью тега вида:
<A HREF="[адрес перехода]">выделенный фрагмент текста</A>
Вкачестве параметра [адрес перехода] может использоваться несколько ти-
пов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF="Oglavlenie.htm">Перейти к оглавлению</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в следующее окно будет загружен документ Oglavlenie.htm. Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога.
Таким образом, если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или на Интернет. Теперь у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
28
Следующий пример осуществляет переход к файлам window2.html и window3.html при щелчке по гиперссылкам Ссылка на 2 страницу и Ссылка на 3 страницу соответственно.
<h1>Страница 1</h1>
<a href="window2.html"> Ссылка на 2 страницу </A> <br> <a href="window3.html"> Ссылка на 3 страницу </A>
После просмотра загруженного файла, например страницы 2, обратно можно вернуться нажатием кнопки НАЗАД (Back) в панели инструментов броузера.
Рис.1. Исходная страница (слева) и переход по строке “Ссылка на 2 страницу” (справа)
При необходимости можно задать переход к рисунку или звуковому файлу, например:
<h1>Страница 1</h1>
<A href="gostinica 27.jpg"> рис.1 </A> <br>
<A href="kbtu.jpg"> рис. 2 </A> <br>
<A href="kbtu.jpg">
img src="kbtu.jpg" height=20 width=50> </A>
Рис.2. Исходный текст тегов (слева) и его результат на экране
В гиперссылках можно задать переход к определенному месту внутри одного документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла pr1.htm к словам "Переход закончен" в файле pr2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле pr2.htm:
<A NAME="AAA">Переход закончен</A>
Слова "Переход закончен" при этом никак не будут выделены в тексте документа.
29
Затем в файле pr1.htm (или в любом другом) можно определить переход на этот анкер:
<A HREF="pr2.htm#AAA">Переход к анкеру AAA</A>
Кстати говоря, переход к этому анкеру можно определить и внутри самого документа pr2.htm — достаточно только включить в него вот такой фрагмент:
<A HREF="#AAA">Переход к анкеру AAA</A>
На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.
Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство броузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно.
Рассмотрим пример ссылки на анкеры внутри одного документа.
<p> <b>Список разделов</b> </p> <a href="#ex1">Раздел 1</a><br> <a href="#ex2">Раздел 2</a> <hr>
<H2 align=center>Далее стоит картинка </H2> <hr>
<img src="kbtu.jpg" width=400 height=200 align=middle>Это здание КБТУ <hr> <p><a name="ex1"></a>Раздел 1</p>
<p>Текст раздела 1</p> <hr>
<H2 align=center>Далее стоит другая картинка </H2> <hr> <p align=right> Это высотная гостиница
<img src="Gostinica 27.jpg" align=middle> <p><a name="ex2"></a> Раздел 2</p>
<p> Текст раздела 2 <br></p>
Рис.3. Пример перехода по анкерам “Раздел 1” и “Раздел 2”
30