Добавляем изображения на WEB-страницу, а еще видео и аудио! Графика на WEB-странице в HTML
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу
. У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге
и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег
. Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег , стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
1. Формат JPEG (Joint Photographic Experts Group ). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
2. Формат GIF (Graphics Interchange Format ). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
3. Формат PNG (Portable Network Graphics ). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
- GIF используется в основном для анимации;
- PNG — формат для всего остального (иконки, кнопки и др.).
JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег
. Браузер помещает изображение в том месте веб-страницы, где встретит тег
.
Код вставки картинки в html страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .
Приведу еще несколько примеров указания адреса файла с изображением:
— этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега
— абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Научным языком автомобиль это:
Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Классификация автомобилей
Автомобили бывают следующих типов:
- Легковой;
- Грузовой;
- Внедорожник;
- Багги;
- Пикап;
- Спортивный;
- Гоночный.
Все права защищены. 2010 год.
Сайт об автомобилях.
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега .
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:
width="300" height="200"
>
В обоих атрибутах указывается размер в пикселях . Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге
Для вставки видеоролика на веб-страницу предназначен парный тег . С этим тегом все тоже самое, что и с тегом
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги:
- с помощью атрибута alt
тега
можно задавать текст замены на случай если изображение не загрузится;
- с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
- для вставки аудио и видео в html5 есть парные теги
для вставки изображений на html
страницу пользуемся одиночным тегом
и указываем адрес файла с картинкой в атрибуте src
:
Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!
В этом уроке рассматривается, как украсить веб-страницу путем добавления к ней графических изображений. Мы познакомимся с самыми распространенными форматами изображений, узнаем с помощью какого тега осуществляется добавление картинок на страницу, разберемся с альтернативными надписями и выравниванием текста и графики. Также ознакомимся с основными атрибутами изображений и научимся настраивать ширину и высоту картинки. Далее несколько слов об использовании изображений в качестве ссылок и о том, что такое миниатюры изображений. В заключение приведены несколько общих советов по использованию графики на веб-странице.
Добавление изображений на веб-страницу
Если на веб-странице не будет ничего, кроме текстовой информации, она, возможно, и покажется кому-то интересной, благодаря представленным на ней сведениям, однако вряд ли у кого то повернется язык назвать ее привлекательной. Добавлять изображения на веб-страницу очень легко. Для добавления же графики, которая сможет придать странице профессиональный вид, требуются некоторые знания. Чему, собственно и посвящен сегодняшний урок.
Двумя наиболее часто применяемыми в Интернете графическими форматами являются GIF и JPEG. Формат, разработанный группой JPEG (Joint Photographic Experts Group — Объединенная группа экспертов по машинной обработке фотографических изображений) и получивший ее название, используется, как правило, для сохранения изображений с плавными цветовыми переходами, таких, например, как фотоснимки.
Практически все другие графические элементы сохраняются в формате GIF (Graphics Interchange Format) — формат обмена графическими данными. В настоящее время появился еще один новый графический формат, приобретающий все большую популярность: PNG (Portable Network Graphics — переносимая сетевая графика). Ожидается, что со временем он заменит собой формат GIF. Однако не спешите пересохранять все свои графические файлы в этом формате, пока еще он поддерживается далеко не всеми браузерами.
Все изображения добавляются на веб-страницу с помощью одного и того же тега, называемого тегом источника изображения 
. Наверное, сейчас уже вы сами можете определить, что данная запись состоит из собственно тега , его атрибута (scr) и значения данного атрибута (место расположения). Однако, поскольку применение атрибута scr является обязательным, удобнее говорить об этой записи как об одном общем теге. Вероятно, вы обратили также внимание, что для тега источника изображения не предусмотрен соответствующий закрывающий тeг. Это отдельный самодостаточный тeг, и потому не забывайте добавлять в его конце закрывающую косую черту:
.
#1058;D XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd">
Первые изображения
е>
Этот рисунок добавлен на мою первую веб-страницу.р>
Добавление альтернативных надписей
Путешествуя по Интернету, вы, наверное, не раз замечали различные надписи, отображаемые при наведении указателя мыши на какой-нибудь графический элемент веб-страницы. Эти надписи обычно сообщают какую-то дополнительную информацию о самом изображении или о той области страницы, которую оно занимает.
На примере представленного далее НТМL кода показано, как атрибут alt добавляется внутрь тега . Подобно атрибуту src, атрибут alt сообщает веб-браузеру некоторую дополнительную информацию об изображении, и его также всегда можно использовать вместе с тeгом
.
Атрибут alt определяет для добавленного на веб-страницу графического элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению. Атрибут alt имеет еще одно очень важное назначение. Многие посетители интернета, использующие каналы доступа с низкой скоростью передачи данных, могут давать указание своим браузерам не загружать и не отображать графическую информацию. Это позволяет им ускорить загрузку веб-страниц на свои компьютеры.
Кроме того, помните, что не все браузеры способны отображать в своих окнах графику. Например, браузер Lynx вообще не поддерживает такой возможности. Таким образом, атрибут alt позволяет веб-дизайнеру быть уверенным в том, что, если посетитель его веб-страницы не увидит на своем экране изображения, он по крайней мере сможет ознакомиться с добавленной к этому изображению текстовой информацией.
Хотя атрибут alt можно определять для каждого тега , следите за тем, чтобы не назначить некоторым графическим элементам несоответствующие им текстовые сообщения. Например, не имеет смысла добавлять альтернативные текстовые надписи к различным элементам внешнего оформления веб-страницы. Чтобы избежать подобных ошибок, можете присваивать атрибуту alt таких элементов пустое значение (alt=» »). Если не задавать значения никаких других атрибутов, браузер воспроизведет изображение в егo исходном размере, выровняв верхний край изображения с верхним краем расположенной рядом текстовой строки. Вы можете изменить оба эти параметра, воспользовавшись тегами стилевых таблиц.
Атрибуты изображения
Для тега предусмотрены атрибуты, позволяющие изменять размер изображения. Некоторые из этих атрибутов перечислены ниже.
height
— Указывается в пикселях или процентах — Определяет высоту изображения
width
— Указывается в пикселях или процентах — Определяет ширину изображения.
Настройка высоты и ширины изображения
Размеры размещаемого на веб-странице изображения могyт быть заданы с помощью атрибутов height и width. 3начения этих атрибутов задаются либо как фиксированные количества пикселей, либо в процентном выражении относительно размеров страницы. Взгляните на представленный далее код HTML. В первом тегe размеры исходного изображения, которое вы уже видели на предыдущих рисунках этого урока, устанавливаются равными 60 пикселям по вертикали и 60 пикселям по горизонтали. Во втором тегe ширина того же изображения устанавливается равной 6% от ширины страницы, а высота — 10% относительно высоты страницы. На рисунке показано, как оба эти изображения выглядят в окне браузера.
Воспроизводя изображение в своем окне, браузер одинаково хорошо справляется с обработкой значений, заданных как в пикселях, так и в процентах, Помните, однако, о том, что на компьютерах посетителей вашей веб-страницы может быть задано экранное разрешение, отличное от того, которое установлено для вашего монитора. Что из этого следует? Например для монитора задано разрешение 800х600. В предыдущем примере для добавляемого на веб-страницу рисунка была задана ширина на уровне 6% от ширины страницы, которая при таком разрешении составит 48 пикселей. Если просматривать то же изображение на мониторе с разрешением 1024х800, указанным 6% от ширины страницы будет соответствовать уже ширина, равная 61 пикселю.
Изменяя размеры изображения, не забудьте задать оба значения соответствующие его высоте и ширине. Если изменить только одно из этих значений, на экране само изображение окажется растянутым по вертикали или горизонтали. Альтернативный вариант состоит в настройке размеров изображения средствами графического редактора.
Вы можете создать иллюзию более быстрой загрузки изображения. Независимо от того, изменены размеры изображения или нет, вceгда указывайте значения атрибутов height и width, так как они сообщат браузеру важные сведения о том, сколько места должно быть выделено на странице для размещения данного рисунка. В таком случае браузер сможет обозначить требуемое для изображения пространство и продолжить построение других элементов страницы, не прекращая загрузки самого изображения. Таким способом создается впечатление, будто страница загружается быстрее, поскольку ее посетителям не придется ждать полной загрузки изображения, чтобы увидеть наконец другую представленную на странице информацию.
Если действительно необходимо, чтобы изображение занимало точно определенное пространство по ширине страницы, используйте процентные значения. В таком случае на экране любого монитора изображение будет занимать ту же часть страницы, что и на вашем экране. Если необходимо, чтобы постоянным оставалось разрешение самого рисунка (его размер в пикселях), используйте значения, выраженные в пикселях.
Выравнивание текста и графики
Атрибут align тега позволяет выравнивать изображение по правому (значение right) или левому (значение left) краю текстовой строки. Примеры использования этого атрибута показаны на рисунке.
Этот же атрибут может при меняться и для выравнивания изображения по вертикали (опять-таки относительно текстовой строки). Он может принимать три других значения top, bottom и center. Если атрибуту align присвоено значение top, верхний край изображения выравнивается по верхнему краю любого окружающего его текста. Если атрибуту align присвоено значение bottom, нижний край изображения выравнивается по нижнему краю окружающего его текста. Если же атрибуту align присвоено значение center, центр изображения выравнивается по центру текстовой строки.
Использование изображений в качестве ссылок
Изображения хороши не только для оформления веб-страницы. Их с успехом можно использовать в качестве гиперссылок на другие документы. В HTML данная задача решается просто, поскольку изображения превращаются в гиперссылки точно тем же способом, что и надписи. Для этого необходимо также применить тeг, заключив в него элемент веб-страницы, который должен стать ссылкой на другой документ. Таким образом, если переход по гиперссылке должен осуществляться после щелчка на каком то изображении, в тeг необходимо заключить тeг данного изображения.
В данном случае, после того, как посетитель веб-страницы наведет указатель мыши на это изображение, рядом с курсором отобразится текстовое сообщение «Это мой автопортрет!». После щелчка на изображении будет открыт документ DOС2.htm, на который указывает гиперссылка.
Миниатюры изображений
Другим распространенным способом применения имеющейся в HTML возможности создания гиперссылок является использование одних изображений для перехода к другим. Для чего это необходимо? Дело в том, что довольно часто размер изображений, которые вы хотите опубликовать на веб-странице, слишком велик, и нет никакой уверенности, что у посетителей хватит терпения дожидаться окончания их загрузки. В таких случаях создают уменьшенную копию исходного изображения, называемую миниатюрой, с загрузкой которой браузер справится гораздо быстрее. Если посетитель заинтересуется изображением и захочет загрузить его полноценную копию, ему достаточно будет щелкнуть на данной миниатюре. Вот как выглядят соответствующие коды HTML.
Как видите, щелчок на изображении миниатюра.jpg сопровождается открытием файла другого изображения (изображение.jpg). Текстовая строка, заданная как значение атрибута alt, сообщает посетителю, как открыть основное изображение.
Секреты успешного использования изображений
Изображения интересны и привлекательны, несут в себе массу наглядной информации и их очень просто добавлять на веб-страницы, однако все же следует придерживаться некоторых перечисленных далее правил, если вы действительно хотите создать сайт, который станет популярным среди пользователей Интернета.
Чем больше размеры файла изображения, тем больше времени потребуется для его загрузки на компьютер пользователя. Поскольку большинство посетителей Интернета для доступа к сети по-прежнему используют каналы связи с низкой пропускной способностью, размеры загружаемых файлов все еще имеют для них принципиальное значение. Обязательно учитывайте данное обстоятельство и старайтесь размещать на своих веб-страницах изображения как можно меньших размеров.
Важное значение имеют не только размеры файла отдельного изображения, но и общий размер файла всего HTML документа. Чем больше изображений будет добавлено на веб-страницу, пусть даже малых размеров, тем большим будет размер файла финального документа. Выполните предварительный просмотр своей страницы в разных браузерах и оцените, какое время потребуется каждому браузеру на ее загрузку.
Поскольку атрибут alt имеет столь важное значение (ведь его рекомендуется определять для каждого тега , будьте внимательны при его использовании. Следите за тем, чтобы содержание текстового сообщения всегда соответствовало самому изображению, иначе посетители вашей страницы могут быть введены в заблуждение. Это же замечание применимо и в обратном направлении: следите за тем, чтобы изображения соответствовали представленной на веб-странице текстовой информации. Фотоснимок самолета будет уместен на сайте, посвященном авиаперевозкам, и совершенно лишним на сайте, рассказывающем о дикой природе.
В интернете вы можете найти множество интересных изображений и с легкостью сохранить их на своем компьютере. Однако многие из этих изображений защищены авторскими правами. Если вы нашли какое то понравившееся вам изображение на коммерческом сайте, посмотрите, нет ли там же каких то сообщений об авторских правах и доступно ли это изображение для свободного использования.
Если представленное на веб-странице изображение не защищено авторскими правами, вы можете скопировать его в память cвoeгo компьютера. Для этогo достаточно просто щелкнуть на этом изображении правой кнопкой мыши и выбрать в открывшемся меню команду Сохранить изображение как. Сохранив изображение на своем компьютере, вы можете использовать его далее подобно любому другому рисунку.
Для вставки изображения в текст Web-страницы используется одинарный тег (табл. П 1). Атрибуты этого тега задают все параметры изображения, размещаемого на странице. Обязательным является атрибут SRC, определяющий адрес и имя графического файла. Если атрибут SRC не установлен, то будет отображаться только значок пустого изображения.
Структура тега с атрибутом SRC имеет вид:
.
Если графический файл с именем Институт находится в той же папке, что и Web-страница, то для его размещения следует записать:
.
Имя файла Формат
Для размещения графического файла с именем МИНСК, нахо-дящегося по адресу D:\Коллекция\Города\ МИНСК.GIF, следует записать .
С помощью тега на Web-странице размещается графический файл, находящийся на другом компьютере в глобальной сети «Интернет».
Чтобы создать Web-страницу с фотографией нашего института, которая приведена на рис. 4.1, нужно ввести следующий HTML-код:
Наш институт
Рис. 4.1. Web-страница с фотографией института
В приведенном примере высота фотографии (HEIGHT) составляет 200 пикселей, а ширина (WIDTH) – 300 пикселей. Для размещения фотографии создается абзац с выравниванием по центру.
Горизонтальные линии
Размещение на Web-странице горизонтальных линий осуществляется с помощью одинарного тега
. С помощью атрибутов SIZE, WIDTH,COLOR и ALIGN изменяются соответственно толщина, ширина, цвет и способ выравнивания линий.
Рассмотрим несколько примеров, поясняющих размещение гори-зонтальных линий:
1.
- горизонтальная линия на всю страницу толщиной 2 пикселя.
2.
WIDTH = "200" ALIGN="RIGHT"> – горизонтальная линия зеленого цвета толщиной 15 пикселей, шириной 200 пикселей и вырав-ниванием по правому краю.
3.
– горизонтальная линия синего цвета на всю страницу толщиной 25 пикселей.
4.
WIDTH = "300" ALIGN = "LEFT"> – горизонтальная линия красного цвета толщиной 20 пикселей, шириной 300 пикселей и выравниванием по левому краю.
Отображение линий для четырех записанных примеров показано на рис. 4.2.
Рис. 4.2. Линии на Web-странице
ТАБЛИЦЫ
Создание таблиц
Создание таблицы осуществляется с помощью парного тега
в коде HTML.
Любая таблица состоит из строк, а строки – из ячеек. Для фор-мирования строк и ячеек таблицы используются следующие теги:
Эти теги записываются внутри парного тега
Формирование таблицы происходит по строкам – вначале задается одна строка и в ней указывается необходимое количество ячеек, затем вторая строка и т.д.
Для того чтобы на Web-странице получить таблицу, представленную на рис. 5.1, необходимо набрать следующий HTML-код:
| Автомобили | Цена | Форд | 5000 | Гольф | 6000 |
|---|
то толщина внешней границы будет равна 6 пикселям. Чтобы границы таблицы не отображались, необходимо атрибуту BORDER присвоить значение, равное 0, или просто этот атрибут опустить.
Цели урока:
расширение и углубление представлений о языке гипертекстовой разметки HTML;
формирование умений создавать веб-страницы с графикой;
развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.
Тип урока: урок усвоения новых знаний и умений .
Учащиеся должны уметь:
создавать в редакторе Блокнот веб-страницы
с графикой.
Программное и методическое обеспечение урока:
редактор Блокнот
;
учебное пособие «Информатика 11», § 3
(
п. 3
.2) ; приложения к уроку 6;
ЭСУ W
eb11 6 .
1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная формы работы).
Выполнение индивидуальных заданий на компьютере: оформить текст на предложенной учителем веб-странице в соответствии с рисунком упражения к §3 ( п.3 .1) пособия или ЭСУ W eb11-5 .
Предложите у чащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? Какова структура HTML-документа? Каким тегом задается абзац? Переход на новую строку? Какими тегами задается полужирное и курсивное начертание символов? Как задать фон и цвет текста всей веб-страницы? Какими тегами и атрибутами задается шрифт, размер и цвет символов? Возможно использование теста (приложение к уроку 6; ЭСУ W eb11 5).
2. Актуализация знаний и мотивация учащихся на изучение нового материала ( фронтальная форма работы).
Перед началом объяснения нового материала в форме фронтальной беседы обсудите роль, которую в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения (обои), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Продемонстрируйте примеры ( ЭСУ W eb11 6 ).
Подчеркните, что предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или из сети Интернет. Наиболее предпочтительны графические форматы gif , jpg и png , файла которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. Напомните, что в формате jpg обычно сохраняют фотографии. Формат gif поддерживает анимацию и прозрачность.
3. Объяснение нового материала (объяснительно -иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы ).
Объяснение начните с вопроса: хранятся ли изображения на самой веб-странице? П одчеркните, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML -коде имеются лишь ссылки на них. Для отображения рисунков предназначен тег < img > , неотъемлемым атрибутом которого является имя графического файла.
Далее продемонстрируйте действие некоторых атрибутов тега < img >. Так, высоту и ширину отображаемого на экране рисунка задают значениями атрибутов height и width , а толщину рамки вокруг изображения значением атрибута border . В классах с низким уровнем подготовки это делает учитель с помощью видеопроектора. При достаточной подготовленности учащихся можно предложить им провести самостоятельное исследование с последующим фронтальным обсуждением результатов.
Важно подчеркнуть, что указание размеров позволяет увеличить или уменьшить лишь видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не указаны, то по мере загрузки рисунка может измениться расположение текста и других объектов на экране. Поэтому, полезно всегда явно задавать эти атрибуты. Значения атрибута align указывают на выравнивание текста относительно рисунка или на способ обтекания текстом.
С помощью атрибута alt можно задать текст сообщени я , которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, это сообщение показывается в виде подсказки, когда курсор мыши подводится к рисунку. Продемонстрировать полезность явного задания атрибутов height , width и alt можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.
В заключение продемонстрируйте использование изображения из файла в качестве фона веб-страницы с помощью атрибута background тега < body >. ополнительно предложите создать поздравительную открытку (пример 3 из §3 ( п.3.2) пособия , ЭСУ W eb11 6 .
5. Подведение итогов урока
Учащиеся демонстрируют созданные страницы. Обсуждаются этапы работы и затруднения учащихся. Кратко формулируются особенности использовании изображений на веб-страницах,
6. Домашнее задание
Изучить материал § 3 ( п. 3 .2 ) учебного пособия , ответить на вопросы 1 3, подготовиться к практическому выполнению одного из заданий упражнения 2
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.
Существуют два способа размещения графических изображений на странице:
- вставка отдельных картинок;
- заполнение фона картинкой.
В любом случае графическое изображение берется из файла.
Вставка графических изображений
Вставка на страницу графического изображения из файла графического формата производится с помощью тэга
(от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:
< IMG SRC = "адрес_графического_файла" >
Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:
< IMG SRC = "logotip.jpg" >
Для увеличения скорости передачи графического изображения в тэге
можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:
< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >
…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:
< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN
тэга
с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ
для верхнего и нижнего полей и НSPACE
для боковых полей в тэге
. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.
Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):
< IMG SRC = "logotip.jpg" ALIGN = LEFT >
Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :
< IMG SRC = "logotip.jpg" ALIGN = RIGHT >
Чтобы задать поля вокруг картинки, надо написать тэг вида:
< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >
Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.
< HTML >
< HEAD >
< TITLE > Упражнение 1 < / TITLE >
< / HEAD >
< BODY BGCOLOR = "YELLOW" >
< IMG SRC = "logotip.gif " ALIGN = LEFT >
< H1 > Текст обтекает графику справа < / H1 >
Рис. 657 . Текст обтекает картинку справаШирокие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.
