Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лекции ЯРД.docx
Скачиваний:
39
Добавлен:
31.03.2015
Размер:
775 Кб
Скачать
☆

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

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

  • DL - задает сам список (Definition List)

  • DT - термин  (Definition Term)

  • DD - его определение  (Definition Description)

<DL>

< DT >Термин 1</ DT >

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

<DT>Термин 2</DT>

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

</DL>

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

Вложенные списки предназначены для организации сложной иерархической структуры текста.

Чтобы корректно организовать вложение списков тег <OL> или <UL>, формирующий подпункты, должен располагаться внутри тега <LI>.

<ol>   <li>Пункт 1    <ol>             <li>Подпункт 1.1</li>             <li>Подпункт 1.2</li>    </ol>   </li>   <li>Пункт 2         <ol>           <li>Подпункт 2.1</li>            <li>Подпункт 2.2</li>       </ol>     </li> </ol>

Гиперссылки

Ссылки являются основой гипертекста, позволяя переходить от одного документа к другому простым нажатием кнопки мыши.

Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт.

Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение.

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

Гиперссылки. Тег а

  • А (Anchor) Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.

Атрибуты:

  • HREF - Задает адрес документа, на который следует перейти. href="URL“

  • TARGET - Имя окна или фрейма, куда браузер будет загружать документ. Возможные значения: имя_окна | _blank | _self | _parent | _top

  • TITLE - Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке

  • NAME - используется для определения якоря внутри страницы. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки.

Гиперссылки. Url

URL (Uniform Resource Locator) - В World Wide Web используется для задания местоположения файлов на других серверах сети Internet.

В общем виде формат URL выглядит так:

protocol://host.domain[:port]/path/filename# anchor?search

  • protocol – протокол прикладного уровня: FILE | HTTP | MAILTO | FTP | GOPHER | WAIS | NEWS | TELNET

  • host.domain - адрес ресурса в сети Internet.

  • port - число, которое необходимо указывать, если протокол требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Стандартными портами являются : 21 – FTP | 23 – Telnet | 70 – Gopher | 80 – HTTP

  • anchor - имя закладки, созданной с помощью тега А с атрибутом NAME

  • search – строка запроса формируемая HTML формой методом GET

Адрес ссылки может быть абсолютным, относительным и неполным.

  • Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка http://www.w3.org/TR/html4/frameset.dtd

  • Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта document.html

  • Неполные адреса опускают имя файла, предполагая имя по умолчанию http://www.w3.org/

Использование изображений в HTML

Кодирование графической информации

Существуют два основных способа кодирования графической информации:

ВЕКТОРНЫЙ

РАСТРОВЫЙ

  • Scalable Vector Graphics (SVG)

  • Computer Graphics Metafile(CGM )

  • Joint Photographic Experts Group (JPEG)

  • Portable Network Graphics (PNG)

  • Graphics Interchange Format (GIF)

Векторная графика

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

Растровая графика

Растровый способ заключается в том, что все изображение по вертикали и горизонтали разбивается на достаточно мелкие прямоугольники - так называемые элементы изображения, или пиксели (Picture Element = pixel или pel). В файле, содержащем растровую графику, хранится информация о цвете каждого пикселя данного изображения. Чем меньше прямоугольники на которые разбивается изображение, тем больше разрешение, то есть, тем более мелкие детали можно закодировать в таком графическом файле.

Включение графики в HTML-документ

HTML-документ — это текстовый файл.

Графическую информацию размещают не в самом HTML-файле,а в отдельных файлах.

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

Существуют два различных способа использования изображений в Web-документе:

  • Связать изображение с документом, используя элементA. Активизация этой связи приводит к появлению изображения, либо в том же самом окне, либо в другом

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

Тег <IMG>

Предназначен для отображения на web-странице изображений в графическом формате

Атрибуты:

  • SRC - Путь к графическому файлу. Обязательный атрибут. src =“URL“

  • ALT - Альтернативный текст для изображения. alt =“текст”

  • TITLE - Текст всплывающей подсказки. title =“текст”

  • ALIGN - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. align =bottom | top | middle | right | left

  • BORDER - Толщина рамки вокруг изображения. border = n

  • WIDTH - Ширина изображения. width = n|%

  • HEIGHT - Высота изображения. height = n|%

  • HSPACE - Горизонтальный отступ от изображения до окружающего контента. hspace = n

  • VSPACE - Вертикальный отступ от изображения до окружающего контента.

vspace = n

  • ISMAP - Говорит браузеру, что картинка является серверной картой-изображением. ismap

  • USEMAP - Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения. usemap =URL

<p> Пример вставки изображения толщиной 5 рх .

<IMG SRC="/images/square.gif " ALT="Квадрат" TITLE =" Пример использования изображения" ALIGN="right" BORDER ="5" WIDTH="150" HEIGHT="150" HSPACE="5" VSPACE="7" >

в html-документ с заданным размером 150х150 , рамкой вокруг рисунка

Для изображения определено расположение по правому краю. Установлены отступы: горизонтальный – 5 рх и вертикальный – 7 рх. </p>