Это очень просто. Всё, что вам необходимо – это тег <img>:
<img src="bred_pitt.jpg" alt="Brad Pitt">
И вот мы уже видим в браузере (скромности ради, я решил для примера разместить не свою фотографию, а Бреда Пита):
С помощью тега <img> вы сообщаете браузеру, что вы хотите вставить изображение, а атрибут "src" (сокращение от "source" - источник) указывает его местонахождение. Обратите внимание, что тег <img> не требует наличия закрывающего тега. Как и <br> - это команда не связана с текстом.
"brad_pitt.jpg" - это название файла изображения, ".jpg" - расширение файла, тип изображения. Как расширение ".html" указывает, что файл является HTML-документом, так и ".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 (прежде всего из-за издержек формата GIF). Формат PNG по многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие.
Для того, чтобы выкладывать изображения на сайт, их предварительно нужно обработать – уменьшить и сделать того размера, какой гармонично и красиво впишется в вашу страницу.
Обычно, размер изображения, которое вам требуется, определяется на глаз, либо, при использовании более сложных программ по созданию сайтов – Adobe Dreamweaver, например - вычисляется с помощью специальных линеек, расположенных в окне программы. Мой совет: поэкспериментируйте с картинками, делая их произвольного размера и вставляя на сайт – скоро вы поймете оптимальные размеры, которые будут гармонично вписываться в ваши страницы.
Для того, чтобы вам было от чего отталкиваться, приведу четыре размера картинок в пикселях:
Пример №1. Размер 42х42 пикселя
Пример № 2. Размер 200х200 пикселей
Пример № 3. Размер 500х100 пикселей
Пример № 4. Размер 500х500 пикселей
Лучшая программа для обработки изображений, которой пользуются и маститые профессионалы, и начинающие пользователи – Adobe Photoshop. Она дорога (если ее покупать) и сложна в освоении. Поэтому, имея ввиду ее на будущее, обратитесь к более простым, для начала, и бесплатным программам. Например, к программе Picasa, которую вы можете скачать в разделе «Программы». Там же вы найдете ее краткое описание.
Но где же брать изображения, если, конечно, вы не фотограф с многолетним стажем и у вас не образовалось огромной личной коллекции фотографий и картинок? Для этих целей существуют клипарт-коллекции, в том числе - бесплатные. Набрав в поисковике запрос «клипарт скачать бесплатно» вы найдете не мало сайтов, предоставляющих эту замечательную услугу. Скачайте пару-тройку таких коллекций, рассортируйте картинки и фотографии по своему вкусу и вы обеспечены запасом имиджей на несколько лет! То же самое касается иконок и различных значков, которые украсят ваш сайт.
Дополнительная информация к уроку.
Вам необходимо знать ещё две вещи.
Во-первых, вы можете легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:
<img src="images/companies/ford/logo.png">
Этот пример говорит, что требуемая картинка лежит аж внутри трех папок, расположенных одна в другой. Но это не проблема для Интернет-браузера – он ее там легко найдет.
<img src="http://www.ford.com/logo.png">
А этот пример говорит, что изображение лежит на другом сайте. Но и это не проблема: Интернет-браузер найдет его там (если оно там действительно лежит!) и вставит в вашу страницу. И все это займет у него доли секунды, вы даже не заметите.
Во-вторых, изображения могут быть ссылками:
<a href="http://www.freeadvice.ru"> <img src="logo.jpg"></a>
