Как вставить картинку (графику) в web страницу - пример для начинающихся - Верстка HTML / CSS

Следующая статья: Как загружать картинки (графику) большого размера на своих сайтах

Содержание

Первый метод
Как загружать рисунки на сервер
Как верно вставлять тег img
Просмотр приобретенного результата
Как можно масштабировать изображение

Первый метод

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

Напомним, что, вставляя набросок в код HTML, мы использовали его относительный адресок, другими словами адресок, который определяется относительно текущей папки данного компьютера. Но в ссылке на набросок можно указать также и абсолютный адресок, другими словами адресок файла с изображением, который находится на любом web узле в Интернет. Поглядим, как воткнуть в HTML код файла other.html абсолютную ссылку на набросок image.gif, лежащий не в папке Web вашего компьютера, а в каталоге вашего web сайта в WWW.

Откройте other.html из папки Web.

Нам необходимо в теге <img>, вставляющем набросок на web страничку, поменять атрибут src, который имеет вид src="image.gif", на URL-адрес этого же рисунка, но находящегося на вашем web сайте.

Отредактируйте тег <img> файла other.html так, чтоб значением атрибута src был адресок файла image.gif, находящегося на вашем web сайте, к примеру: src="http://other.narod.ru/image.gif".

Напомним, что URL-адрес файла включает протокол доступа к WWW - http://, имя web сайта в Интернет, к примеру, other.narod.ru и название файла - image.gif, отделенное от имени web сайта косой чертой /. В общем случае перед названием файла могут находиться также имена каталогов.

Сохраните файл other.html и загрузите браузер и откройте в его окне файл other.html из папки Web.

Видите ли, пока ваш компьютер не подключен к Вебу, набросок в окне браузера не отображается. Заместо него выводится только рамка, толщина которой определена атрибутом border. Чтоб узреть набросок, нужно подключиться к Вебу.

Как загружать рисунки на сервер

Когда связь будет установлена, нажмите кнопку Обновить (Refresh) на панели инструментов браузера Internet Explorer либо кнопку Обновить текущую страничку (Reload Current Page) на той же панели браузера. Браузер подключится к вашему web сайту и загрузит набросок image.gif.

Может быть, если ваша линия связи недостаточно стремительная, вы увидите, что изображение вроде бы равномерно «выкристаллизовывается» из «бесформенной массы». Потому что данный набросок сохранен с внедрением чересстрочной развертки, то браузер показывает его равномерно, по мере загрузки: поначалу показывается любая восьмая строчка пикселов, потом - любая 4-ая, дальше - любая вторая и, в конце концов - все оставшиеся нечетные строчки. Приняв из сети еще одну порцию данных, браузер не только лишь отрисовывают каждую строчку пикселов на собственном месте, да и заполняет копиями предшествующей строчки все промежутки меж строчками. Потому сначала чересстрочный набросок формата GIF состоит из широких горизонтальных полос, которые сужаются по мере возникновения изображения.

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

Для тех браузеров, которые не могут показывать картинки, в языке HTML предусмотрен для тега <img> особый атрибут alt, определяющий другой текст, который будет выводиться заместо рисунка. Этот текст должен показывать смысл рисунка, заменяя собой изображение. Атрибут alt лучше использовать к тому же поэтому, что многие пользователи отключают в браузере функцию отображения рисунков, чтоб ускорить загрузку web страничек. В таком случае пользователь должен созидать другой текст, заменяющий набросок. Не считая того, есть особые речевые браузеры для слепых, в каких текст выводится голосом.

Как верно вставлять тег img

Вставим в тег <img> файла other.html атрибут alt со значением "Область нашей деятельности", которое в этом случае открывает смысл рисунка и ссылки. Значение атрибута alt должно быть заключено в кавычки. Этот текст будет появляться в браузерах, не позволяющих демонстрировать изображения на месте рисунка.

Отредактируйте файл other.html, вставив в тег <img> относительную ссылку на файл с рисунком image.gif, находящий в папке Web вашего компьютера, и атрибут alt="Область нашей деятельности" так, чтоб элемент, содержащий обозначенный тег, принял последующий вид:

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

Установите указатель мыши на рисунке в окне браузера. Под ним появится рамка с текстом, определенным в качестве значения атрибута alt.

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

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

В браузере Internet Explorer изберите команду меню Сервис - Характеристики обозревателя (Tools - Internet Options). На дисплее появится диалог Характеристики обозревателя (Internet Options).

В браузере Internet Explorer щелкните мышью на ярлычке Дополнительно (Advanced), чтоб перейти на подобающую вкладку.

В браузере Internet Explorer скиньте флаг Показывать картинки (Show pictures). Чтоб отыскать его, воспользуйтесь вертикальной полосой прокрутки.

В браузере Internet Explorer нажмите кнопку Применить (Apply).

Нажатием кнопки ОК закройте диалог Характеристики обозревателя (Internet Options) либо Характеристики (Preferences).

Просмотр приобретенного результата

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

Обновите изображение в окне браузера, нажав подобающую кнопку на панели инструментов. Вы увидите, что заместо рисунка в рамке отображается текст, который определен атрибутом alt.

Особые атрибуты width (ширина) и height (высота) тега <img> позволяют программкам просмотра зарезервировать место на дисплее для рисунка еще до того, как он будет передан по сети. Это дает возможность пользовательу начать чтение документа, пока передача данных еще длится.

Добавим в тег <img> атрибуты width="600" и height="50", значения которых соответствуют фактической ширине и высоте рисунка в пикселах. Размеры изображения можно найти при помощи графического редактора, к примеру, Adobe Photoshop.

Отредактируйте в файле other.html тег <img>, добавив обозначенные атрибуты так, чтоб этот элемент принял последующий вид:

В окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено столько места, сколько обозначено значениями атрибутов width (ширина) и height (высота).

Восстановите отображение графики в окне программки просмотра web страничек.

Как можно масштабировать изображение

Многие браузеры, хотя и не все, могут масштабировать изображение в согласовании с атрибутами width и height. Проверим это, уменьшив значения данных атрибутов в 6 раз. Соответственно должен поменяться и размер рисунка на дисплее.

Отредактируйте элемент HTML, содержащий тег <img>, изменив в нем значения атрибутов: width="100" height="10" так, чтоб данный элемент принял последующий вид:

Обновите изображение в браузере.

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