МНИ_лаб_раб_7_HTML
.pdfимя |
возможные |
описание |
|
атрибута |
значения |
|
|
|
|
||
SRC |
URL |
адрес изображения |
|
ALT |
строка |
текстовое |
описание |
изображения |
|
||
|
|
|
|
|
TOP, |
позиционирование |
|
|
MIDDLE, |
||
|
изображения |
||
ALIGN |
BOTTOM, |
||
относительно текущей |
|||
|
LEFT, |
||
|
текстовой строки |
||
|
RIGHT |
||
|
|
примечания
обязателен
TOP –позиционирует верх изображения с верхом текущей текстовой строки.
MIDDLE - выравнивает середину изображения по основной текстовой строке.
BOTTOM (по умолчанию) – выравнивает низ изображения по основной строке.
LEFT – перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения.
RIGHT – перемещает изображение к текущему правому краю.
HEIGHT целое
WIDTH целое
BORDER целое
HSPACE целое
VSPACE целое
USEMAP URL
ISMAP
высота в пикселях
ширина в пикселях
ширина бордюра (рамки) в пикселях
ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях
высота незаполненного пространства выше и ниже изображения в пикселях
фрагмент идентификатора для сайта клиента с картой образа
показывает, что изображение является
используется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
карты определены элементом MAP; имена карт - чувствительны к регистру набора символов
когда пользователь "кликает" на изображении, этот атрибут
картой |
образа, |
обеспечивает передачу координат |
реагирующей на нажатие |
курсора серверу |
|
клавиши мыши |
|
|
Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это
позволяет пользователю начать чтение, пока передача |
данных еще продолжается. Эти |
атрибуты непредназначены для автоматического изменения |
размера изображения броузерами. |
Хотя некоторыеброузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения.
Что касается ISMAP, приведем пример того, как можно его использовать:
<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>
Нажатые координаты передаются серверу. Броузер извлекает новый URL из URL, специфицированного атрибутом HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с использованием уже нового URL. Например, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27" В целом, это хорошая идея для подавления бордюра (использование атрибута BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.
Примеры
<IMG SRC="Yucca.jpg" ALT="Picture of Yucca" WIDTH=110 HEIGHT=168>
<P> <IMG SRC="Yucca.jpg" ALT="Pic Yucca" WIDTH=110 HEIGHT=168 ALIGN=RIGHT> This is a simple example of embedding images.
</P>
Используйте IMG с ISMAP, чтобы создать реагирующую на нажатие клавиши мыши карту:
<A HREF="http://htmlweb.ru/imagemap/english.map">
<IMG HEIGHT="400" WIDTH="400"
SRC="http://htmlweb.ru/Pictures/english.gif"
ALT="Helsinki University of Technology" ISMAP>
</A>
Примечания
Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.
Не стоит перегружать свои страницы графикой, из-за того, что файлы большого размера медленно передаются по сетям. По этой же причине, фотографии объектов живой природы лучше хранить в формате *.jpg, а рисованные, или чертежи с небольшим числом цветов - в *.gif.
Информация в заголовке <HEAD>
Необязательный атрибут заголовка PROFILE указывает на внешний файл META-тегов. В качестве значения этого атрибута указывается URL данного файла. Например:
<HEAD profile="http://htmlweb.ru/meta.php">
...
</HEAD>
<TITLE> Название страницы </TITLE>. Передача его менеджеру окон, и он будет показан системным шрифтом на рамке окна.
<META>
Атрибуты META |
Назначение |
HТТР-EQUIV |
Определяет свойство для элемента. |
NАМЕ |
Обеспечивает дополнительное описание элемента. Если этот атрибут |
|
опущен, он считается эквивалентным атрибуту HTTP-EQUIV. |
URL |
Определяет адрес документа для свойства. |
СONTENT |
Определяет возвращаемое значение для свойства. |
<Meta Http-equiv="Content-Type" CONTENT="text/html; charset=windows-1251"> Документ написан кириллицей в кодировке Windows. Замена в аттрибуте CONTENT параметра charset наkoi8-r означала бы документ на русском языке в UseNet-овской кодировке. Замена text/html; наtext/plain; приведет к выводу неформатированного текста.
<Meta Http-equiv="Refresh" Content="{число}; Url={URL файла }"> Перенаправление на другую страницу через определѐнное время (в секундах), или перезагрузка текущей страницы (например, такое часто используется в чатах) Например: <Meta Http-equiv="Refresh" Content="20; Url=http://host.com/">
<Meta Http-equiv="Author" Content="{текст}"> Указание имени автора
<Meta Http-equiv="Description" Content="{ Описание документа }">
<Meta Http-equiv="Keywords" Content="{список ключевых слов через запятую или пробел}">
<Meta Http-equiv="Reply-to" Content="{Ваш E-Mail адрес}">
Например:
<Meta Http-equiv="Reply-to" Content="support@aaanet.ru">
<Meta Name="Date" Content="{дата}"> Дата создания Вашей странички Например:
<Meta Name="Data" Content="Nov 11 2000 10:12 GMT">
< Meta Http-equiv ="Set-Cookie" CONTENT="NAME=value; EXPIRES=date; DOMAIN=domain_name;
PATH=path; SECURE"> Записать информацию(Cookie) на машине клиента.
Например:
<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=aaa13;
expires=Friday,31-Dec-99 23:59:59 GMT; path=/win/internet/html/;
domain=citforum.ru;">
< Meta Http-equiv ="Pragma" CONTENT="no-cache"> Не сохранять страницу в кэш, используется для банеров
<Meta name="Revisit-after" Content=" ... days"> - частота индексации роботами поисковых систем
<meta name="revisit-after" content="1 days" />
<LINK HREF= url - Определяет URL адрес документа, который имеет отношение к текущему документу.>
Команда LINK устанавливает иерархическую организацию между связанными документами. ЭлементHEAD может содержать несколько элементов LINK.
<LINK REL=relation HREF=URL>
или
<LINK REV=relation HREF=URL>
атрибуты |
возможные |
LINK |
значения |
HREF |
URL |
REL |
строка |
REV |
строка |
TITLE |
строка |
описание
URL для связанных ресурсов
тип связи "вперед"
тип связи "назад"
необязательная строка заголовка для связанного ресурса
Связь от документа A к документу B по выражению REV=relation - та же самая связь, что от B к A по выражению REL=relation.
Значение REL, |
описание |
REV |
|
INDEX |
Документ задает индекс для текущего документа. |
GLOSSARY |
Документ дает глоссарий терминов, которые имеют отношение к |
|
текущему документу. |
COPYRIGHT |
Объявление авторского права для текущего документа |
CONTENTS |
Документ оглавления для нескольких взаимосвязанных документов. |
NEXT |
Следующий документ для посещения в управляемом просмотре. |
PREVIOUS |
Предыдущий документ в управляемом просмотре. |
HELP |
Документ предлагает помощь, например, описывая расширенный |
|
контекст и предлагая дополнительные ссылки к полезным документам. |
|
Это помогает в восстановлении ориентирования пользователя, который |
|
"потерялся" на своем пути. |
BOOKMARK |
Закладка, используемая для обеспечения прямых связей по отмеченным |
|
(введенным в список закладок) точкам при работе с документом |
TITLE |
может быть использован в качестве метки в списке закладок. Несколько |
|
закладок может быть определено в каждом документе, предоставляя |
|
пользователю средства для ориентирования в расширенном документе. |
информация в теле <BODY>
Атрибут BODY |
Назначение |
ALINK |
Определяет цвет активной ссылки. |
BACKGRQUND |
Указывает на URL-адрес изображения, которое используется в |
|
качестве фонового. На экран выводятся повторяющиеся копии |
|
картинки, поверх которых показывается текст. Для фона желательно |
|
подбирать неконтрастные изображения |
BGCOLOR |
Определяет цвет фона документа |
BGPRQPERTIES |
Если установлено значение FIXED, фоновое изображение не |
|
прокручивается.(Только для IE) |
VLINK |
Определяет цвет уже просмотренной ссылки. |
LINK |
Определяет цвет еще не просмотренной ссылки. |
ТЕХТ |
Определяет цвет текста. |
LEFTNARGIN |
Устанавливает границу левого поля в пикселах. |
TOPMARGIN |
Устанавливает границу верхнего поля в пикселах. |
Другие атрибуты задают цвет текста и ссылок. Параметр "цвет" задается названием цвета или как "#XYZ", где X, Y и Z -- три двузначных шестнадцатеричных числа означающих интенсивность: X -- красного, Y -- зеленого и Z синего цвета:
Например:
<BODY background="mramor.gif"
BGCOLOR="#cccccc"
LINK="#2000C0"
VLINK="900020"
ALINK="#336633"
TEXT="#000000">
<BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW">
Задание:
1.Создать HTML-документ общего вида включающий в себя форматированный текст и список.
2.Создать HTML-документ общего вида, включающий в себя ссылки перечисленных выше видов.
3.Создать HTML-документ с использованием картинок.