В данном уроке вы коротко ознакомитесь с тем, как добавлять картинки на web-страницы своего сайта.
Для того, чтобы разместить картинку понадобится довольно простой тэг:
Например,
1 |
<img src="P2KLe1e0htA.jpg"/> |
будет выводится в браузере:
При добавлении изображения вам в первую очередь необходимо сообщить браузеру о том, что вы собираетесь вставить изображение/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-документ:
Теперь вы можете добавлять данное изображение на страницы своего сайта.
Вы также можете добавлять изображения находящиеся в других папках, или даже изображения размещенные на других сайтах:
1 |
<img src="images/wolf.png"> |
или
1 |
<img src="http://www.html.net/logo.png"> |
Также вы можете использовать изображения в качестве ссылки:
1 2 |
<a href="http://itechnologi.ru/"> <img src="wolf.png"></a> |
Щелкните на изображение расположенное ниже:
Теперь давайте поговорим о таки атрибутах как, width и height. С помощю данных атрибутов вы можете задавать ширину и высоту изображениям. Значения указываются в пикселях. Пиксель это единица с помощью которой измеряют разрешение экрана.
Если при добавлении изображения на сайт вы не указываете width и height, изображение будет показано в своём реальном размере. При помощи данных атрибутов вы можете менять размеры изображений:
1 |
<img src="wolf.jpg" width="150" height="150"> |
При этом не забывайте, что размер файла останется прежним, и данный файл будет занимать то же время при загрузке, как и раньше, хоть и будет выглядеть уменьшенным.
Такой атрибут как alt используют для альтернативного описания изображений, если по каким-то из причин изображение не погрузилось. Это касается таких моментов когда у пользователя ослабленное зрение или если страница очень медленно погружается. Поэтому никогда не забывайте использовать данный атрибут.
1 |
<img src="wolf.jpg" alt="Wolf" /> |
Также никогда не используйте данный атрибут при создании всплывающих сообщений, так как пользователи у которых слабое зрение будут вынуждены слушать сообщения, не имея понятия о том, что на них изображено.
Для того, чтобы дать изображению краткое описание используют атрибут title:
Например,
1 |
<img src="wolf.jpg" title="WOLF wolf"> |
Если вы наведете курсор соей мыши, без щелчка, на изображение то увидите текст “WOLF wolf” которое появится в всплывающем боксе.