Изменение параметров изображений

Для изменения параметров изображения на Web-странице используется дополнительные атрибуты:

HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (иногда при этом заметно теряется качество).

HSPACE и VSPACE – определяют количество свободного пространства (в пикселях) по горизонтали и вертикали вокруг изображения.

BORDER – определяет ширину рамки вокруг изображения в пикселях.

ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением. Кроме того, текст, указанный в параметре ALT, будет отображаться во всплывающей подсказке, появляющейся при наведении указателя мыши на изображение.

< IMG SRC=Ris1.jpg HEIGHT=100 WIDTH=100 HSPACE=20 VSPACE=20 BORDER=15 ALT=”Эмблема”>

Выравнивание изображений

Для выравнивания изображений и определения их положения относительно текста применяется атрибут ALIGN.

< IMG SRC=”адрес” ALIGN=…>

Он может принимать следующие значения:

left или right –выравнивает изображение по левому или правому краю документа.

top - выравнивает верхнюю линию текущей текстовой строки относительно верхней кромки изображения.

middle - выравнивает базовую (нижнюю) линию текущей текстовой строки с вертикальным центром изображения.

bottom - выравнивает базовую линию текстовой строки относительно нижней кромки изображения.

Кроме этого для центрирования изображения по горизонтали всего HTML – документа используется тег < CENTER>.

< IMG SRC=”адрес” ALIGN=top>

< IMG SRC=”адрес” ALIGN=middle>

< IMG SRC=”адрес” ALIGN=bottom>

< IMG SRC=”адрес” ALIGN=left>

< IMG SRC=”адрес” ALIGN=right>

< CENTER> < IMG SRC=”адрес”> < /CENTER>

Изображение в качестве гиперссылки

Изображения можно использовать в качестве гиперссылок. Если тег < IMG> находится внутри контейнера < A HREF=”…”> … < /A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.

< A HREF= “File1.htm”> < IMG SRC= “Ris1.JPG” BORDER=5 > < /A>

“File1.htm” – адрес перехода

< IMG SRC= “Ris1.JPG” BORDER=5 > - тег изображения

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

Если в теге < A> указать атрибут TARGET=”_blank”, документ, на который указывает гиперссылка, будет открыт в новом окне.

< H3> Образец сертификата< /H3>

< A HREF=” Сертификат_большой.JPG”>

< IMG SRC=” Сертификат_малый.JPG” BORDER=5 > < /A>

Включение звука в Web-страницу

Звуковой файл включается в Web-страницу путем указания его имени в теге < a href=>. Не забудьте про закрывающий тег. После данного тега следует привести текст, характеризующий содержание звукового файла. Совсем не плохо указать его размер, чтобы посетитель мог решить, стоит ли его загружать. Тип данного файла wav. (имеется в виду расширение файла).

Пример 1: Воспроизведем рычание тигра. Имя звукового файла: tiger.wav

Его размер: 29, 740 bytes.

Текст ссылки звукового файла: Рычание тигра.

Запись в блокноте: < a href=tiger.wav> Рычание тигра. (29, 740 bytes)< /a>

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

Пример 2: Использование графики.

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

Запись в блокноте:

< img src=tiger.gif width=70 height=70> < a href=tiger.wav> Рычание тигра (29, 740 bytes)< /a>

Включение видео в Web-страницу

Видеофайл включается в HTML-документ точно так же, как звуковой файл. Единственное различие, что теперь тип файла - MOV или AVI.

Пример 1:

< a href=play.avi> Вид горной долины.(1, 600 bytes)< /a>

Так же можно использовать графику с пояснительным текстом.

Пример 2:

< img src=gor.gif> < a href= play.avi> Вид горной долины.(1, 600 bytes)< /a>

E)Гиперссылки

Что такое гипертекст?

Гипертекст – способ структурирования документов путем размещения ссылок внутри одного документа или между документами. В отличие от обыкновенного текста гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент – гиперссылку текущего документа – происходит переход к некоторому заранее назначенному документу или фрагменту документа.

В HTML переход по гиперссылке задается с помощью тега вида:

< A HREF=”[адрес]”> ссылка< /A>

”[адрес]” – адрес перехода;

ссылка - текст, активизация которого вызывает переход.

В качестве параметра [адреса перехода] может использоваться несколько типов аргументов:

§ адрес документа

§ адрес сайта сети Интернет или внешнего сервера

§ адрес электронной почты

§ адрес перехода к определенному месту внутри документа.

Гиперссылки на документ и сайты Интернет

Для перехода от одного документа к другому в качестве адреса перехода задается путь к файлу:

< A HREF=”Документ1.htm”> Перейти к документу1< /A>.

Причем, не обязательно это должен быть HTML-документ (например, это могут быть документы Microsoft Office или др.) Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к документу1, при нажатии на который в текущее окно будет загружен файл Документ1.htm.

Если файл, на который указывает ссылка, и файл с самой ссылкой расположены в разных директориях, то создается относительная ссылка, в которой прописывается часть пути между директорией с исходным документом и файлом-назначением.

< A HREF=”каталог1/Документ1.htm”> Перейти к документу1< /A>.

Чтобы создать ссылку на файл во внешнем каталоге относительно текущего, т. е. расположенном уровнем выше, используется горизонтальное двоеточие “../пример.htm”.

Если необходимо сделать ссылку на какой-либо сайт сети Интернет, внешний сервер или на какой-либо другой ресурс, то в качестве адреса перехода используется URL-строка:

[протокол][адрес][порт][путь][имя файла].

Гиперссылки на почтовый адрес

Существует возможность использовать гиперссылку для вызова почтовой программы. Для этого используется ссылка вида:

Существует возможность использовать гиперссылку для вызова почтовой программы. Для этого используются ссылка вида: < A HREF=”mailto: [email protected]''> Послать письмо < /A>, где: [email protected] - адрес электронной почты.

Если пользователь совершит переход по такой ссылке, то у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To (Кому) окна почтовой программы будет указано [email protected]. Пользователю предоставляется возможность текст письма и отправить его по указанному адресу.

Переходы внутри документа

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри документа. Для этого необходимо создать в документе некоторую опорную точку или анкер. Это тег < A> специального вида, в котором используется атрибут NAME. Допустим, что необходимо осуществить переход к слову ''Параграф 1''.

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

< A NAME = “Метка 1”> Параграф 1< /A> где: Метка 1 - имя анкера.

Слово “Параграф 1”при этом не как не будет выделен в тексте документа браузером. Затем необходимо определить ссылку для перехода на этот анкер: < A HREF=”#Метка 1”> Переход к слову – Параграф 1 < /A>.

При активизации этой ссылки браузер переместит изображение страницы так, чтобы текст «Анкер1» оказался в верней видимой строке окна.

f) & -последовательности

В HTML имеется возможность вывести на экран специальные или зарезервированные символы, это делается с помощью & -последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ «< », когда встречается в тексте последовательность & lt (по первым буквам английских слов less than- меньше, чем). Знак «> » кодируется последовательностью & gt (по первым буквам английских слов greater than – больше, чем). Символ «& » (амперсант) кодируется последовательностью & amp. Двойные кавычки ('') кодируются последовательностью & quot. Очень часто используется неразрывный пробел- & nbsp.

& -последовательности - символьные объекты или эскейп- последовательности - кодовая комбинация, позволяющая вывести на экран специальные символы.

Ниже приведено несколько часто используемых & -последовательностей

& larr	Стрелка влево	& cent	Цент
& uarr	Стрелка вверх	& pound	Фунт стерлингов
& rarr	Стрелка вправо	& curren	Денежная единица
& darr	Стрелка вниз	& yen	Иена или юань
& harr	Стрелка влево-вправо	& brvbar	Разорванная вертикальная черта
& iexcl	Перевернутый восклицательный знак	& sect	параграф

G)Режимы браузеров

Во время противостояния браузеров Internet Explorer и Netscape каждый из разработчиков старался улучшить свой продукт. Netscape 4 и IE4 плохо поддерживали веб-стандарты, поэтому следующая версия, IE5 должна была не только исправить ошибки IE4, но и показать улучшенную поддержку спецификации CSS. Это было необходимо еще и по политическим мотивам, поскольку компания Microsoft вошла в группу W3C и начала оказывать сильное влияние на разработку HTML и CSS.

В процессе работы над браузером IE5 его разработчики столкнулись с неожиданной трудностью. Разница при отображении страницы в разных версиях браузера была настолько велика, что множество сайтов оказались бы неработоспособными при просмотре в IE5. Идея сделать кнопку для переключения в режим совместимости пришла только в версии 8.0, поэтому разработчики IE5 пошли другим путём. Все старые страницы отображались по старым правилам, а для включения режима поддержки стандартов в код страницы необходимо добавить элемент <! DOCTYPE> (доктайп).

Режим браузера для просмотра конкретной веб-страницы устанавливается через элемент <! DOCTYPE>, который является обязательным согласно спецификации HTML и XHTML. Сложности возникают из-за того, что по сути доктайп не один, а различается дополнительными параметрами, влияющими в итоге на режим отображения страницы.

Почти стандартный режим

Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.

Для HTML:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

Для фреймов в HTML:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset//EN" " http: //www.w3.org/TR/html4/frameset.dtd" >

Для XHTML:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" >

Для фреймов в XHTML:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" >

Кроме переключения браузера в один из режимов, доктайп также сообщает, согласно каким правилам синтаксиса проводить проверку текущего документа. К примеру, для HTML 4.01 и XHTML 1.0 существует по три разных типа доктайпа, для HTML5 лишь один.

Строгий доктайп

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

Для HTML 4.01:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

Для XHTML 1.0:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

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

· Осуждается использование следующих тегов:

< applet>, < basefont>, < center>, < dir>, < font>, < isindex>, < noframes>, < plaintext>, < s>, < strike>, < u>, < xmp>. Взамен по возможности рекомендуется использовать стили.

· Текст, изображения и элементы форм нельзя напрямую добавлять в < body>, эти элементы должны обязательно находиться внутри блочных элементов вроде < p> или < div>.

· Осуждается применение атрибутов

target, start (тег < ol> ), type (теги < li>, < ol>, < ul> ) и др.

Естественно, также должен соблюдаться синтаксис языка — правильное вложение тегов, закрытие тегов, должны присутствовать обязательные теги и др. Документ с неявными ошибками приведён в примере 1

Пример 1. Невалидный код HTML

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < title> Заголовок< /title> < /head> < body> < form> < input type=" text" > < /form> < /body> < /html>

В данном примере у тега < form> нет обязательного атрибута action, тег < input> располагается напрямую внутри формы, хотя должен быть заключён в блочный тег. Также не указана кодировка через метатег. Это не является ошибкой, но пользователям в некоторых случаях придется самостоятельно указывать её в браузере. Валидный код XHTML с учётом исправленных ошибок при строгом доктайпе продемонстрирован в примере 2.

Пример 2. Валидный код XHTML

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Заголовок< /title> < /head> < body> < form action=" " > < p> < input type=" text" /> < /p> < /form> < /body> < /html>

Переходный доктайп

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

Для HTML 4.01:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

Для XHTML 1.0:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Цель переходного доктайпа заключается в постепенном знакомстве с синтаксисом языка. При переходном доктайпе добавление target к тегу < a> абсолютно валидно (пример 3).

Пример 3 Использование переходного доктайпа
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Ссылка в новом окне< /title> < /head> < body> < a href=" http: //htmlbook.ru" target=" _blank" > Открыть в новом окне< /a> < /body> < /html>

HTML5

В HTML5 существует лишь один тип доктайпа, который переводит браузер в стандартный режим.

<! DOCTYPE html>

Режимы Internet Explorer

⇐ Предыдущая 1 234 5 Следующая ⇒