Вставка рисунков в HTML-документ

Для вставки картинки используется непарный тег < IMG >: < IMG src= " путь к рисунку " >

· src – обязательный параметр тега < IMG>, в котором указывается путь к картинке [1].

· width – задает ширину рисунка;

· height – задает высоту рисунка;

· align – задает положение рисунка относительно абзаца, внутри которого помещен рисунок.

- top – вывод рисунка на уровне самого высокого элемента абзаца;

- middle – вывод рисунка по центру строки абзаца;

- center – вывод рисунка по центру строки абзаца;

- bottom – вывод рисунка на уровне самого низкого элемента абзаца;

- left – вывод рисунка слева от абзаца;

- right – вывод рисунка справа от абзаца.

· hspace, vspace – задает горизонтальный и вертикальный отступы текста от изображения (задается в пикселях);

· border – задает границу картинки (измеряется в пикселях, отсутствие границы – border = 0);

· alt – задает альтернативный текст картинки. Цель альтернативного текста – объяснить, что изображено на рисунке. Альтернативный текст выводится на том месте, где должен находиться рисунок, который не отображается в браузере. Если используется альтернативный текст, тогда страничка будет выглядеть как на рис.

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

Примечание:

В уменьшении размеров рисунка средствами HTML есть плюсы и минусы.

Минусы уменьшения размеров рисунка при помощи HTML:

· рисунок сохраняет свои реальные размеры и, соответственно, его «вес» не изменится, даже если вы сделаете огромный рисунок, который «весит» 1 Мб, размером с почтовую марку, а следовательно и вес странички будет большим;

· картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.

Плюсы уменьшения размеров рисунка при помощи HTML:

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

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

Горизонтальная линия

С помощью тега < HR > можно изобразить горизонтальную линию. Тег < HR> имеет следующие параметры, с помощью которых можно задать внешний вид линии:

· width – задает длину линии (измеряется в процентах от ширины окна браузера или пикселях);

· size – задает толщину линии (измеряется в пикселях);

· align – задает горизонтальное положение линии относительно окна браузера:

- right – размещение относительного правого края окна браузера;

- left – размещение относительно правого края окна браузера;

- center – размещение по центру окна браузера.

· color – задает цвет линии.

Задание 2.1. Создайте HTML-документ по образцу (рисунки выберите на ваше усмотрение, измените их размеры, так чтобы все используемые рисунки были одинакового размера). У каждого рисунка задайте альтернативный текст, отступы текста от рисунков.

Лабораторная работа №3 «Гиперссылки в HTML-документе»

Гиперссылки в HTML-документе

Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой файл в сети Интернет. Такие ссылки называются гипертекстовыми, или гиперсвязью. Существуют ссылки текстовые и графические (когда ссылкой является рисунок). По умолчанию текстовая ссылка выделяется синим цветом и подчеркиванием, а графическая – синей рамкой.

Но цвет ссылок на страничке можно устанавливать и самим через специальные параметры тега < BODY>:

· link – цвет ссылки, еще не посещенной;

· alink – цвет активной ссылки;

· vlink – цвет ссылки, уже посещенной;

Например, < BODY link=”blue” alink=”green” vlink=”red”>

задает синий цвет еще не посещенным ссылкам, зеленый – активным, красный – уже посещенным.

Создание гиперссылки

Для добавления гиперссылки в HTML-документ используют парные теги < A> и < /A>:

< A href=”путь к документу”> текст ссылки (или рисунок) < /A>

Тег < А> имеет ряд параметров:

· href (обязательный параметр) определяет адрес документа, на который будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами. Адресом может быть либо локальный документ, либо страничка в сети Интернет.

· title – текст подсказки, которая всплывает при наведении на ссылку;

· target – наличие или отсутствие этого параметра определяет, как открыть документ, на который ведет ссылка. Параметр target может иметь еще следующие значения:

- _self – документ будет загружаться в текущем окне, то есть в том же, что и ссылка на этот документ. По умолчанию присваивается это значение;

- _blank – документ будет открываться в новом окне;

- _parent – используется при работе с фреймами: документ будет загружаться во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;

- _top – используется при работе с фреймами: документ загружается в полном окне без фреймов, если фреймов нет, то этот параметр работает как _self.

· name – используется при задании ссылки внутри текущего документа (метки) (см. далее).

Метки

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

Место, в которое пользователь будет перемещаться, щелкнув по ссылке, метится тегом < A> с параметром name:

< A name=" имя метки" > текст метки < /A>

Имя метки может быть любое: числа и буквы.

Ссылка на метку оформляется следующим образом:

< A href=" имя документа#имя метки" > текст ссылки < /A>

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

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

⇐ Предыдущая1234567Следующая ⇒

Поделиться: