В данном уроке вы коротко ознакомитесь с тем, как добавлять картинки на web-страницы своего сайта.

Для того, чтобы разместить картинку понадобится довольно простой тэг:

Например,

будет выводится в браузере:

При добавлении изображения вам в первую очередь необходимо сообщить браузеру  о том, что вы собираетесь вставить изображение/image (img) на страницу, и указать путь к данному изображению (scr, сокращение от слова “source”).

Также не забудьте обратить свое внимание на то, что тэг img не требует наличия закрывающего тэга. Он также как и тэг <br /> не нуждается в нем, так как данные команды не связаны с буквенным текстом.

«P2KLe1e0htA.jpg» – является названием добавляемого файла изображения. “.jpg” – это расширение файла указывающее, что данный файл является изображением. Существует три основных расширения файлов изображения, которые вы сумеете разместить на своих страницах:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

Такое расширение как GIF – больше подходит для графики и рисунков, а JPEG – для фотографий. Существует две довольно простые причины: GIF может содержать в себе только до 256 цветов, а JPEG в свою очередь способен содержать в себе до миллиона цветов, второе их отличие в том, что GIF способен на более лучше сжатие простых изображений нежели JPEG, который предназначен для более сложных изображений. Чем сильнее будет сжат файл, тем быстрее он будет прогружается на страницах сайта. А исходя из того, что большинство пользователей не любят сайты с долгой прогрузкой страниц, можно прийти к выводу того, что лучше добавлять на страницы сайта файлы с меньшим размером памяти.

Такие форматы как GIF и JPEG являются преобладающими, но в последнее время набирает популярность такой формат как PNG. PNG формат по многим из своих параметров превосходит JPEG и GIF: миллионами цветов и более эффективным сжатием.

При создании собственных сайтов вам не обойтись без программ для редактирования файлов изображений. Так как при создании сайтов использование изображений позволяет сделать страницы web-сайтов более интересными.

К сожалению не одна из операционных систем Windows не содержит в себе хороших программ для редактирования изображений. Но у вас всегда есть возможность вложить деньги в приобретении таких программ как Paint Shop Pro, PhotoShop или Macromedia.

Но вам необязательно всегда приобретать дорогое программное обеспечение. Вы всегда можете загрузить прекрасную программу для работы с изображениями, Irfan View, которая является т. н. freeware, и, следовательно, ничего не стоит.

Так же вы всегда можете скачать готовые изображения с интернета. Но всегда будьте внимательными, чтобы не нарушить при этом авторские права. Для того, чтобы скачать картинку вам необходимо:

• Правой клавишей мыши щёлкните на изображении в Internet.
• Выберите «Save picture as…» в меню.
• Выберите место для сохранения на вашем компьютере и нажмите «Save».

Сохраните изображение приведенное ниже на свой компьютер в том месте, где у вас расположен HTML-документ:

Теперь вы можете добавлять данное изображение на страницы своего сайта.

Вы также можете добавлять изображения находящиеся в других папках, или даже изображения размещенные на других сайтах:

или

Также вы можете использовать изображения в качестве ссылки:

Щелкните на изображение расположенное ниже:

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

Если при добавлении изображения на сайт вы не указываете width и height, изображение будет показано в своём реальном размере. При помощи данных атрибутов вы можете менять размеры изображений:

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

Такой атрибут как alt используют для альтернативного описания изображений, если по каким-то из причин изображение не погрузилось. Это касается таких моментов когда у пользователя ослабленное зрение или если страница очень медленно погружается. Поэтому никогда не забывайте использовать данный атрибут.

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

Для того, чтобы дать изображению краткое описание используют атрибут title:

Например,

Если вы наведете курсор соей мыши, без щелчка, на изображение то увидите текст “WOLF wolf” которое появится в всплывающем боксе.

Урок 10. Таблицы в html >>