Сегодня: 18 апреля 2024 г., четверг Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 8. Картинки, фотографии

Хотите разместить СВОЮ фотографию на СВОЕМ сайте?

Это очень просто. Всё, что вам необходимо – это тег <img>:

И вот мы уже видим в браузере (скромности ради, я решил для примера разместить не свою фотографию, а Бреда Пита):

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-сайтах:

Этот пример говорит, что требуемая картинка лежит аж внутри трех папок, расположенных одна в другой. Но это не проблема для Интернет-браузера – он ее там легко найдет.

А этот пример говорит, что изображение лежит на другом сайте. Но и это не проблема: Интернет-браузер найдет его там (если оно там действительно лежит!) и вставит в вашу страницу. И все это займет у него доли секунды, вы даже не заметите.

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

Вот как это будет выглядеть в браузере: щелкните по изображению и вы попадете на главную страницу проекта:

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 05.11.2013

Дмитрий! Если картинка лежит в папке выше, перед именем файла прописывается двоеточие/слеш: ../имя файла, либо можно указать полный адрес, например, http://www.site.ru/file.jpg

Комментарий добавил(а): дмитрий
Дата: 04.11.2013

Как вставить картинку если она лежит в папке выше

Комментарий добавил(а): Нина Ивановна Кравцова
Дата: 16.06.2013

Уважаемый Евгений! Я почти 14 лет работаю координатором Благотворительного Фонда. Фонду благотворительно же сделали сайт, и всё не находят времени научить меня, КАК ПЕРЕНОСИТЬ ФОТО И ТЕКСТЫ С РАБОЧЕГО СТОЛА (или откуда-то ещё) НА ЭТОТ САЙТ (WWW.GROTFUND.RU). Тут ещё важно, что я "глубокая пенсионерка" и научилась только пользоваться почтой и печатать вслепую. Компьютерный мастер и те, кто делал сайт, говорят, что я плохо ориентируюсь в компьютерных делах. Пожалуйста, помогите, если сможете и найдёте нужным. На всякий случай МОИ КООРДИНАТЫ: 193312, Россия, Санкт-Петербург, пр.Солидарности, д.7, кор.1, кв.130, д/т/ф (812)6845547, м.м.: +79312959973, +7931340818, +79312534518. E-mail:fandrais@bk.ru, kravtsova.ninaivanovna@yandex.ru С уважением, Кравцова Нина Ивановна, пенсионерка, инв.2 гр.2 ст.

Комментарий добавил(а): Евгений Андросов
Дата: 04.06.2013

Анастасия! Какие варианты вы пробовали, с выкладыванием картинок на сайт? Здесь очень важно правильно указать путь к файлу, обратите на это особое внимание. Если хотите, можете прислать на адрес webmaster(собака)freeadvice.ru пример, я посмотрю и подскажу, что не так.

Комментарий добавил(а): Анастасия
Дата: 04.06.2013

честно говоря я пробывала все варианты которые вы выложили но у меня ничего из этого не получается

Комментарий добавил(а): Евгений Андросов
Дата: 18.02.2013

Вика! Появление картинки при выкладывании ссылки - это функция соцсетей, вы на это повлиять никак не можете. Если у соцсети есть такая функция, то картинка появляться будет (причем, если их на странице несколько, то появится какая-то одна, выбираемая роботом произвольно), если такой функции нет, то не появится.

Комментарий добавил(а): Вика Лирика
Дата: 16.02.2013

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