Конспект урока на тему "Вставка изображений в HTML-документ"
Вставка изображений в HTML-документ
С
оздайте в своей папке папку Картинки.Запустите программу Блокнот и создайте простейший HTML-документ согласно рисунку. Сохраните созданную страницу в папку Картинки. Задайте для страницы имя index.html
Для встраивания изображения в документ используется тег <img>, имеющий единственный обязательный параметр src, который позволяет задать имя файла с картинкой.
В папке Картинки создайте папку Pic. Скопируйте в созданную папку изображение 01.gif
Вставьте на созданную нами страничку изображение 01.gif, для этого после тега <body> запишите следующий тег <img src=01.gif>. Просмотрите полученную страничку с помощью браузера. Отображается ли картинка?
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt тега <img>. Измените содержимое тега <img> следующим образом <img src=01.gif alt=”Зверь”>. Сохраните изменения. Просмотрите полученную страничку с помощью браузера.
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, при наведении курсора на картинку, в маленьком окошке появиться надпись, и сообщит дополнительную информацию.
Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с html-файлами. Тогда команда вывода графики будет иметь вид: <img src=pic/01.gif alt=”Зверь”>.
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега
. Эти атрибуты задают ширину и высоту прямоугольника, в который выводится картинка в пикселях. Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Обязательно задавайте размеры всех изображений на web-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений размещенных внутри таблицы. Такая таблица не будет показана до тех пор, пока рисунок не будет загружен полностью.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому может возникать ситуация, когда маленький рисунок грузится на странице долго. А увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл загружается быстро.
Алгоритм использующийся браузерами для изменения размера изображения весьма не качественный и применять данный эффект нужно в крайних случаях, поскольку качество картинки портится. Для изменения размера изображения лучше воспользоваться средой графического редактора. Исключением являются рисунки, содержащие прямоугольные области.
Измените тег <img> следующим образом: <img src=pic/01.gif alt=”Зверь” width=150 height=100>. Просмотрите какие изменения произошли на странице. Верните первоначальные размеры изображению.
Изображение, помещаемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега
. При отсутствии атрибута или при значении атрибута 0 рамка вокруг изображения не рисуется. Цвет рамки совпадает с цветом текста, заданным с помощью параметра text тега . Зададим для нашего рисунка рамку зеленого цвета толщиной в 5 пикселей. Для этого необходимо изменить содержимое тега : , а затем изменим содержимое тега <img>: <img src=pic/01.gif alt=”Зверь” border=5>.
Уберите рамку вокруг изображения.
Для любого изображения можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace и vspace тега <img>. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство.
Скопируйте в папку Картинки html-страницу skazka.html и в папку pic рисунок 02.jpg.
Вставьте рисунок 02.jpg на страницу skazka.html в раздел подходящий по смыслу сказки. Для этого откройте страницу, щелкните по тексту правой кнопкой мыши и в контекстном меню выберите пункт Просмотр html-кода. Затем измените его необходимым образом. Просмотрите измененную страницу.
Задайте для вставленного рисунка отступы по горизонтали и вертикали. Для этого измените тег
следующим образом: <img src=pic/02.jpg hspace=10 vspace=10>. Сохраните изменения, просмотрите страницу.
Для изображений можно указывать их положение относительно текста или других изображений на web-странице. Способ выравнивания изображений задается параметром align тега <img>. В таблице перечислены возможные значение этого параметра и результат его использования.
Код HTML
Описание
<img src=pic/02.jpg align=texttop>
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
top>
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
middle>
Выравнивание середины изображения по базовой линии текущей строки.
absmiddle>
Выравнивание середины изображения по средине текущей строки.
baseline>
Выравнивание изображения по базовой линии текущей строки.
bottom>
Выравнивание нижней границы изображения по окружающему тексту.
left>
Выравнивает изображение по левому краю окна.
right>
Выравнивает изображение по правому краю окна.
Используйте различные способы выравнивания рисунка относительно текста для страницы skazka.html.
Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <img> добавить параметр hspace и vspace, задающих расстояние до текста в пикселях. Измените содержимое тега <img> следующим образом <img src=pic/02.jpg hspace=10 vspace=10 align=left>. Сохраните изменения и просмотрите страницу.
Задание. Веселый зоопарк.
Создайте для детей страничку с забавными историями про животных. В качестве иллюстраций можно использовать коллекцию картинок из каталога pic01.
Нравится материал? Поддержи автора!
Ещё документы из категории информатика:
Чтобы скачать документ, порекомендуйте, пожалуйста, его своим друзьям в любой соц. сети.
После чего кнопка «СКАЧАТЬ» станет доступной!
Кнопочки находятся чуть ниже. Спасибо!
Кнопки:
Скачать документ