Добавление графики на веб-страницу

Практическое занятие № 3

Ссылки и графика в HTML-документе

Цель: научиться устанавливать связи HTML-документа с различными сетевыми ресурсами, оформлять гиперссылки и вставлять графические изображения в HTML-документ.

Методические указания

Работа с графикой

Тег, позволяющий добавить изображение на веб-страницу впервые появился в стандарте HTML 3.2 (от 14 января 1997 года).

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

Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – swf, cdr, max, ai ….

Из вышеперечисленных форматов хранения графики, в веб-разработке используются JPEG, PNG и GIF для растровой графики и SWF для векторной. Все три формата для растровой графики используют сжатие графической информации.

Добавление графики на веб-страницу

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

Для добавления изображения средствами html используется непарный тег < img >, содержащий обязательный атрибут src, указывающий расположение графического файла для отображения.

К числу необязательных атрибутов < img > относятся:

· align – задает тип выравнивания изображения;

· alt – задает текст, отображаемый в случае, если картинка не загрузилась;

· border – определяет толщину рамки вокруг изображения;

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

· hspace – задает величину горизонтального отступа от изображения до ближайшего контента;

· ismap – определяет, является ли изображение картой (т.е. к различным частям изображения "привязаны" разные ссылки);

· vspace – задает величину вертикального отступа от изображения до ближайшего контента;

· width – задает ширину изображения;

· usemap – определяет ссылку на < map >, содержащий координаты клиентской карты - изображения.

< img > является встроенным тегом, т.е. он не может использоваться вне абзаца. Пример:

Не нашли, что искали? Воспользуйтесь поиском: