русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Использование графики в HTML


Дата добавления: 2013-12-24; просмотров: 1251; Нарушение авторских прав


Гипертекстовые ссылки

Комментарии в языке HTML

Список определений

Список определений — тег <DL>

Теги списка (Definition List: <DL>, Definition Term: <DT>, Definition Description: <DD>) используют для создания списка терминов и их определений. Схема использования тега следующая.

<DL><DT>Термин</DT> <DD>Определение</DD></DL>

<DL>

<DT>HTML</DT>

<DD>Это язык разметки гипертекста</DD>

<DT>Браузер</DT>

<DD> Это программа для просмотра гипертекста в интернете</DD>

</DL>

Определяемый термин записывается на одной строке, а его определение — на следующей, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>.

 

При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. В таких примечаниях можно найти информацию о том, кто является автором документа, где и почему используется конкретный элемент HTML и т.п. Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Можно вставлять текст с любыми символами. Комментарии могут состоять из нескольких строк текста. В общем и целом они ничем не отличаются от аналогичных комментариев в других языках программирования, так как видимы только тогда, когда это необходимо.

Все рассмотренные выше средства управления отображением текста, безусловно, важны, но они только дополняют основной тег HTML-документа — гипертекстовую ссылку. Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF.



Простую ссылку можно записать в виде

<А НREF="http://www.intuit.ru/index.htm">Отображаемое название гипертекстовой ссылки</А>,

где значение атрибута HREF — адрес документа "index.htm" на машине "www.intuit.ru", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов URL и является составной частью технологии WWW.

Может также использоваться необязательный атрибут target, который может иметь одно из следующих значений (target=):

 

name Имя ссылки или фрейма
_blank Загружает ссылку в новое окно
_parent Загружает ссылку в родительском окне
_search Загружает ссылку в панель поиска браузера
_self По умолчанию. Загружает ссылку в это же окно, где была активизирована эта ссылка
_top Загружает ссылку в раскрывающееся окно

 

Согласно схеме HTTP нотации URI, полный адрес информационного ресурса, доступного по протоколу HTTP, надлежит записывать следующим образом:

http://user:password@domain.ru:port/path/some.html?query_string,

где http — протокол обмена данными; user — идентификатор пользователя; password – пароль; domain.ru — доменное имя сервера; port — номер TCP-порта, на котором ведет обслуживание сервер; path — путь в корневом каталоге сервера к файлу ресурса; some.html — файл ресурса; query_string — поисковое предписание.

Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса. На практике редко используют все компоненты полного адреса схемы HTTP.

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

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

 

Атрибуты тега <ВОDY>
Атрибут Значение
ТЕХТ=#000000 Цвет текста (черный)
ALINK=#FF0000 Цвет "активных" гипертекстовых ссылок (красный)
VLINK=#FF00FF Цвет пройденных гипертекстовых ссылок (пурпурный)
LINK=#0000FF Цвет гипертекстовой ссылки (синий)

 

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

<A HREF="http://www.intuit.ru/help/index.html">Помощь</A>

При нажатии на ссылку в окно браузера будет загружен новый документ.

Другой формой использования тега <А> является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:

<А NАМЕ="роint">

Для ссылки на такую точку используют следующую форму URL:

<А НREF="http://www.intuit.ru/index.html#роint">Ссылка на точку "роint" в документе "index.html"</А>Примеры ссылок:

• Ссылка на HTML файл по протоколу HTTP
<a href="http://www.vstu.vitebsk.by/index.html">УО ВГТУ</a>

• Ссылка на e-mail при помощи протокола mailto
<a href="mailto:name@domen.ru">Пример</a>

• Ссылка на e-mail при помощи протокола mailto с автозаполнением темы и текста послания
<a href="mailto:name@domen.ru?Subject=Teмa&BODY=Тeкст
послания">Пример</a>

• Ссылка на группу новостей,при помощи протокола news
<a href="news:comp.infosystems.www.announce">Пример</a>

• Ссылка на EXE файл по протоколу FTP
<a href="ftp://
ftp.sausage.com/pub/hotdog/hotdog6/hotdog6install.exe">Пример</a>

 

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

  • логотип компании на деловой странице;
  • графика для рекламного объявления;
  • различные рисунки;
  • диаграммы и графики;
  • художественные шрифты;
  • подпись автора страницы;
  • применение графической строки в качестве горизонтальной разделительной линии;
  • применение графических маркеров для создания красивых маркированных списков.

Теперь рассмотрим как вставить изображение в Web-страницу. Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Закрывающего тега не требуется.

Пример вставки изображения:

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :

<A HREF="адрес файла или изображения"> <IMG SRC="image.gif"></A>

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

Атрибуты и их аргументы. Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC. Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.

Атрибут ALT. Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику. В некоторых случаях при недостаточной пропускной способности линий связи пользователи отключают отображение графики. Наличие названий вместо картинок облегчает восприятие Web-страниц в таком режиме.

Атрибут АLIGN. Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента — ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста.

Дополнительные возможные значения аргумента — ["left" | "right" | "top" | "texttop" | "middle" |"absmiddle" | "baseline" | "bottom" | "absbottom" ].

ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="texttop" выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев, но не всегда, подобно действию аргумента ALIGN="top".

ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.

ALIGN="baseline" выравнивает нижний край изображения по базовой линии строки окружающего текста, то есть производит такое же действие, как и ALIGN="bottom".

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Атрибут BORDER. Целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=0 в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.

Атрибут HSPACE. Целочисленное значение этого атрибута задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом.

Атрибут VSPACE. Целочисленное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.

Атрибуты WIDTH и HEIGHT. Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно. Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу.

<IMG SRC="image.gif" ALT="изображение" WIDTH="100" HEIGHT="200" HSPACE="10" VSPACE="10" BORDER="2" ALIGN="left">

Активные изображения (map)

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение — это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов.

Синтаксис: <MAP name="имя "> <AREA атрибуты> </MAP>

 

Элемент <AREA>

Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. Элемент <AREA> поддерживает различные атрибуты:

href
Этот атрибут указывает URLссылки.
Синтаксис: <AREA href="URL ">

alt
Этот атрибут задает альтернативный текст для браузеров, которые не поддерживают данный элемент.
Синтаксис: <AREA alt="текст подсказки ">

title
Этот атрибут задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент.
Синтаксис: <AREA title="текст подсказки ">

shape
Этот атрибут задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левуюи правую нижнюювершины "rect" coords=X1,Y1,X3,Y3.
Синтаксис: <AREA "circle " coords=X,Y,R >

 

Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой.

Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Не забудьте перед именем карты в атрибуте USEMAP записать символ "#" следующим образом:

<IMG SRC="mymap.gif" USEMAP="#sitemap">

Приведем пример активных изображений.



<== предыдущая лекция | следующая лекция ==>
Нумерованные списки | Как работают фреймы


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.22 сек.