Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...

Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...

Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...

Интересное:

Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...

Аура как энергетическое поле: многослойную ауру человека можно представить себе подобным...

Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Ссылки на другие документы и файлы

2021-03-17

0.00 из 5.00 0 оценок

Заказать работу

Одним из важнейших понятий для HTML-документов являются ссылки. Гипертекстовый документ – документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. За основу гипертекста взят принцип организации энциклопедических словарей, в которых во многих статьях есть ссылки на другие.

Организация ссылок

Ссылка состоит из двух частей. Первая – то, что вы видите на Web-странице; она называется указатель ссылки (anchor).Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL -адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Указатели бывают двух типов – текстовые и графические.

Правила записи ссылок

Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь. Оба действия выполняются при помощи тэга <A>.

Тэг < A>.

Тэг < A > имеет единственный параметр HREF,и значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </A>, например:

<A HREF = URL-адрес > Текстовый указатель ссылки </ A >

Для обеспечения работы с относительными указателями ссылок введен тэг <BASE>. Он располагается в начале документа в разделе <HEAD> и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на различные части текущего документа. Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра NAME тэга <A>. При этом параметр HREF не используется, а браузер не выделяет содержимое тэга <A>.

Например: <A NAME = chapter_5> </A>

После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре HREF адреса документа, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка:

<A HREF =”# chapter_5”> глава 5 </A>

Теперь, если пользователь щелкнет кнопкой мыши на словах “глава 5”, браузер выведет соответствующую часть документа в окне просмотра.

Ссылки на другие ресурсы Интернета.

Web-пространство является лишь частью сети Интернет. Другие ресурсы начали свое существование задолго до рождения WWW, поэтому накопили уже много достойной внимания информации и имеют достаточно большую аудиторию. Поэтому, разрабатывая свою персональную страницу или документ, вы, возможно, захотите включить ссылки на другие ресурсы. Схема доступа к ресурсу в общем виде имеет следующий синтаксис:

HREF = Протокол: // Адрес ссылки

Правила записи приведены в таблице 5.

Таблица 5. Ссылки на ресурсы Интернета

Ресурсы Интернета	Формат ссылки	Пример записи ссылки
Web-страница	http://sitename	http://www.mysite.com/
E–mail	mailto:address	mailto:[email protected]/
FTP	ftp://sitename	ftp://ftp.mysite.com/
Newsgroup	news:newsgroupname	news:news.newusers.guest
Gopher	gopher://sitename	gopher://gopher.mysite.com/
WAIS	wais://sitename	wais://wais.mysite.com/
Telnet	telnet://sitename	telnet://bbs.mysite.com/
NNTP	nntp://newsgroup	nntp://news.newsgroup
File	file://диск:/ путь к файлу	file:///c:/mydir/my.txt

Списки

Язык HTML содержит несколько механизмов создания списков информации. В каждом списке должен быть один или несколько элементов списков. Списки могут содержать:

· Неупорядоченную информацию.

· Упорядоченную информацию.

· Определения.

Маркированные списки. Тэги <UL> и <LI>

Для создания маркированного списка необходимо использовать тэг контейнер < UL > </ UL >, внутри которого располагаются все элементы списка. Каждый элемент списка должен начинаться тэгом < LI > (List Item, элемент списка). Тэг < LI > не нуждается в соответствующем закрывающем тэге, хотя допускается его наличие. Браузеры при отображении документа начинают каждый новый элемент списка с новой строки. Кроме элементов списка, отмечаемых тэгом < LI >, могут присутствовать и другие HTML-элементы, например, заголовки списка.

В тэге < UL > может быть указан параметр TYPE, который определяет конкретный вид маркера. Это параметр может принимать три значения:

TYPE = disc — маркеры отображаются в виде

TYPE = circle — маркеры отображаются в виде

TYPE = square — маркеры отображаются в виде

По умолчанию используется значение disc. Фрагмент HTML-документа, использующего маркированный список.

<UL TYPE = circle>

 Знаки зодиака:

<LI>Овен

<LI>Телец

<LI>Близнецы

</ UL >

В качестве маркеров списка можно использовать графические изображения. При этом перед каждым элементом списка вставляют желаемое изображение. Для отделения элементов списка друг от друга используют тэги абзаца  или принудительного перевода строки  . Тэг <LI> при этом отсутствует. Фрагмент HTML-документа, использующего графические маркеры в списке:

< UL >

Знаки зодиака: 

<IMG SRC = "help.gif"> Овен 

<IMG SRC = "help.gif"> Телец 

<IMG SRC = "help.gif"> Близнецы 

</ UL >

Нумерованные списки. Тэги <OL> и <LI>

Для создания нумерованного списка необходимо использовать тэг контейнер < OL > </ OL >, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя список от основного содержимого документа. Каждый элемент списка должен начинаться тэгом < LI >. В тэге < UL > может быть указан параметр TYPE, который определяет вид нумерации списка. Это параметр может принимать следующие значения:

TYPE = А — маркеры в виде прописных латинских букв;

TYPE = a — маркеры в виде строчных латинских букв;

TYPE = I — маркеры в виде больших римских цифр;

TYPE = i — маркеры в виде маленьких римских цифр;

TYPE = 1 — маркеры в виде арабских цифр.

По умолчанию предполагается TYPE = 1.

Параметр TYPE с темиже значениями можно использовать для указания вида отдельных элементов списка. Для этого параметр TYPE с соответствующим значением указывают в тэге элемента списка <LI>.

Например: < LI TYPE = A >.

Параметр START тэга < OL > позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка.

Например: <OL TYPE = A START=5>.

Параметр VALUE тэга <LI> позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Типичным применение являются списки с пропуском некоторых элементов.

Списки определений. Тэги <DL>, <DT>, <DD>

Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. Каждый элемент списка определений состоит из двух частей. В первой части записывается определяемый термин, а во второй части — текст в форме словарной статьи, раскрывающий значение термина.

Списки определений задаются с помощью тэга-контейнера < DL > (Definition List). Внутри контейнера тэгом < DT > (Definition Term) помечается определяемый термин, а тэгом < DD > (Definition Description) — абзац с его определением. Для тэгов < DT > и < DD > можно не записывать соответствующие закрывающие тэги. В общем, список определений записывается так:

<DL>

Знаки зодиака:

<DT>Термин

<DD>Определение термина

</DL>

Вложенные списки.

В HTML допустимо вложение различных типов списков, но при этом следует проявлять аккуратность. Пример HTML-кода документа с вложенными списками:

< HTML >

< HEAD >

< TITLE > Пример вложенного списка </ title ></ head >

< BODY >

<UL>

Спутники планет

<LI>Земля

<OL>

<LI>Луна

</OL>

<LI>Марс

<OL>

<LI>Фобос

<LI>Деймос

</ OL >

< LI >Уран

< OL >

< LI >Ариэль

< LI >Умбриэль

<LI>Титания

<LI>Оберон

<LI> Миранда

</OL>

</UL>

</BODY>

</HTML>

Язык HTML не допускает автоматическую многоуровневую нумерацию списков, как это делают мощные текстовые редакторы.

Графические изображения

Фоновые изображения.

Разработчики WEB-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала. Например:

< BODY BACKGROUND = backgrd 2. png BGCOLOR = GRAY >

Одновременное задание параметров BACKGROUND и BGCOLOR не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать. Может показаться, что указание фонового цвета излишне при задании фонового изображения. На практике рекомендуют всегда указывать цвет фона документа, если задается фоновое изображение. Так как при загрузке документа, прежде всего, отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона будет определяться значением параметра BGCOLOR илиустанавливаться по умолчанию. Опыт работы с HTML-документами, получаемыми по сети, показывает, что до загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. При появлении фонового изображения меняется гамма цветов документа. Чтобы предотвратить резкое изменение цветов, следует задавать значение цвета фона близким к цветам фонового изображения.

Цветовая нотация:

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"

Встраивание изображений в HTML-документы.

Для встраивания изображений в HTML-документ используют тэг < IMG >, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания задается значением параметра ALIGN тэга < IMG >. Возможные значения этого параметра приведены в таблице 6.

Таблица 6. Значения параметра ALIGN

Тэг/атрибут	Описание
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения по середине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

Все значения параметров выравнивания изображений условно делят на две группы по их принципу действия. К одной группе относят два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Например:

< HTML >

< HEAD >

< TITLE >Встраивание изображений</ title ></ head >

< BODY >

Выравнивание изображений <IMG SRC = final.gif ALIGN=top > по верхнему краю

Выравнивание изображений по <IMG SRC = final.gif ALIGN=baseline > базовой линии

</BODY>

</HTML>

В этом примере изображения используются как элемент строки.

Приведем пример плавающего изображения:

<HTML>

<HEAD>

<TITLE>Встраивание изображений - как плавающих элементов строки</title></head>

<BODY>

<IMG SRC =final.gif ALIGN=right>

(Здесь идет текст абзаца)

<IMG SRC =final.gif ALIGN=left>

(Здесь идет текст абзаца)

</BODY>

</HTML>

Если в документе используются плавающие изображения, выровненные со значением RIGHT и LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки   с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так для приведенного выше примера в нужном месте текста можно разместить строку:

 

Текст, следующий далее, будет размещаться ниже изображения с новой строки.

Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображений при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры при загрузке изображений выполняют его перемасштабирование. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр буде вычисляться автоматически из условия сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT.

Указание действительных размеров:

ü позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);

ü позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.

Например:

< HTML >

< HEAD >

< TITLE >Масштабирование изображений</ title ></ head >

<BODY>

<IMG SRC =final.gif WIDTH=300>

<IMG SRC =final.gif WIDTH=500>

<IMG SRC =final.gif WIDTH=100>

</BODY>

</HTML>

Поделиться с друзьями:

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...