Основные теги HTML

Автор работы: Пользователь скрыл имя, 04 Декабря 2014 в 12:16, лабораторная работа

Краткое описание

Цель работы:
Научить студентов:
• созданию первичного HTML-документа,
• использованию основных тегов,
• построению простейших HTML-документов.

Скачать полностью (1.11 Мб) Сколько стоит заказать работу?

Прикрепленные файлы: 1 файл

10-методические указания по проведению лабораторных занятий Web-технологии.docx

— 1.14 Мб (Скачать документ)

Значение	Описание
align=тор	Выравнивает текст по верхнему краю изображения
align=middle	Выравнивает текст по средней части изображения
align=bottom	Выравнивает текст по нижнему краю изображения
align=left	Выравнивает изображение по левому полю. Текст, следующий за изображением, "обтекает" изображение справа.
align=right	Выравнивает изображение по правому полю. Текст, следующий за изображением, "обтекает" изображение слева.

В примере ниже приведен код документа 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>

Этот текст располагается справа от изображения и ниже.

Этот текст располагается слева от изображения и ниже.

</Р>

</BODY> </HTML>

5. Переход по гиперссылке – тег <A> (анкер)

Гиперссылки являются ключевым компонентом, делающим WEB-документ привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по 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

Номер порта 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-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или на Интернет. Теперь у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.

Следующий пример осуществляет переход к файлам 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>

img src="kbtu.jpg" height=20

width=50> </A>

Рис.2. Исходный текст тегов (слева) и

его результат на экране

В гиперссылках можно задать переход к определенному месту внутри одного документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.

Допустим, что необходимо осуществить переход из файла pr1.htm к словам "Переход закончен" в файле pr2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле pr2.htm:

<A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле 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”

Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в папке directory на сервере server, на локальный диск пользователя.

<A HREF="mailto:user@mail.box"> Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

Разберем все, что мы знаем о связывании, с помощью следующего примера.

<HTML> <HEAD> <TITLE>Пример 7</TITLE> </HEAD>

<BODY>

<H1>Связывание </H1>

<P> С помощью ссылок можно переходить к другим файлам (например, к

<A HREF="pr.htm">оглавлению этого руководства</A>).</P>

<P> Можно выгружать файлы (например,

<A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc"> это руководство в

формате Microsoft Word </A>) по FTP.</P>

<P>Можно дать пользователю возможность послать почту (например,

<A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P>

</BODY>

</HTML>

Анкеры не могут находиться один внутри другого. Открывающая и закрывающая метки обязательны. Анкеры используются для определения гипертекстовых ссылок, например,

Путь к <a href="hands-on.html">счастье</a>.

а также конкретных точек внутри документа, на которые могут указывать гипертекстовые ссылки, например,

<h2> <a name=mit> Сквер – место для отдыха </a> </h2>

name	строка, определяющая имя анкера. Имена анкеров в одном документе не должны повторяться.
href	указывает адрес ресурса, на который будет производиться переход по гипертекстовой ссылке. Это может быть другой HTML-документ, PDF-файл, изображение и т.п.
title	указывает наименование ресурса, на который сделана ссылка.

Задания

1.Открыть файл lab2.htm (C:\Мои документы\student) и выполнить следующие изменения:

Информация о работе Основные теги HTML