Делаем сайт — как вставить картинки. Урок HTML – 3

Делаем сайт — как вставить картинки. Урок HTML – 3

Делаем сайт - как вставить картинки. Урок HTML – 3

Делаем сайт - как вставить картинки. Урок HTML – 3

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


Первое, что нужно вспомнить из прошлого урока, это пути к файлам.
Мы не знаем, как будет называться наш сайт (вдруг то доменное имя, которое мы хотим, уже занято) и поэтому будем использовать только относительные ссылки – они укорочены т.е. отсутствует имя нашего сайта с указанием протокола.
Пример абсолютной ссылки: http://www.vash-sait.xosting.ru/images/kartinka.jpg
Пример относительной ссылки: images/kartinka.jpg
Легко видеть, что от адреса в втором случае просто отрезана часть, где было имя сайта – использовать относительные ссылки нужно всегда, абсолютные ссылки только для обмена баннерами т.е. если ваша ссылка будет вставляться на чужом сайте она должна быть полной – абсолютной, а для своего сайта делаете укороченные – относительные ссылки.
Надеюсь вы обратили внимание на ссылку: http://www.vash-sait.xosting.ru/images/kartinka.jpg и уже можете сказать где рисунок… можете? Попробую прояснить, на вашем сайте есть папка images в этой папке есть файл kartinka с расширением .jpg

Если файл в корневом каталоге, то путь к файлу будет выглядеть так — kartinka.jpg
А если в папке images есть папка diz то путь к файлу лежащему в папке diz будет выглядеть так: images/diz/kartinka.jpg

Тег вставки изображений:
<img src=”” > — это не парный тег, закрывать ничего не нужно, а путь к картинке пишется внутри кавычек.
Например: <img src=”images/diz/kartinka.jpg”
> (Постарайтесь без лишних пробелов до тегов и в кавычках).

Вот только если вы на этом остановитесь, то будете удивлены – почему картинка такая большая? Как уменьшить размер картинки? Как сделать чтобы не было рамки вокруг картинки?

Все очень просто – нужно прописать еще и параметры рисунка.

1. Ширина: Width – означает то же, что и для таблицы – длина объекта, в нашем случае изображения. Единицы измерения советую выбирать пиксели.
2. Высота: Height – высота изображения..
Пример: <img src=”images/diz/kartinka.jpg” Width=300px Height=25px>
3. Align – выравнивание, в основном используется выравнивание по центру align=center и top
4. border – рамка вокруг рисунка, в некоторых браузерах показывается по умолчанию, поэтому всегда ставим нулевую ширину рамки border=0
5. ALT – текст который будет виден если в браузере отключены рисунки.
Пример: <img src=”images/diz/kartinka.jpg” Width=300px Height=25px Alt=”прикольная картинка” border=0>
Другие теги осваивайте в случае, если собираетесь осваивать HTML профессионально.

Итак мы получили строку для вставки в документ HTML – вашу страничку с таблицей – возможно ваш логотип. Включаем просмотр HTML – кода (1 урок) и вставляем свой логотип в первую ячейку таблицы.

Не показывается картинка?
Нажмите обновить страницу (Ctrl+R).

Так и не показывается картинка?
А расширение точно jpg? Дело в том, что расширений
изображений очень много, возможно, если вы рисовали в Paint вставляете свой чудо-рисунок сохраненный в формате jpg он тоже не вставится – его расширения записано большими буквами – JPG а для компьютера это уже разные имена файлов kartinka.jpg и kartinka.JPG

Как проверить расширение файла – если у вас не компьютере на включена функция показа расширений их можно посмотреть вторым способом.

1. Нажимаем правой кнопкой мыши на рисунке и выбираем «свойства»

Делаем сайт: выбираем «свойства»

Делаем сайт: выбираем «свойства»


2. В появившемся окне нажимаем «изменить»
Делаем сайт:  нажимаем «изменить»

Делаем сайт: нажимаем «изменить»


3. В появившемся окне смотрим информацию о файле.
Делаем сайт - смотрим информацию о файле

Делаем сайт - смотрим информацию о файле

Вот и все – смотрим расширение и записываем правильное в адрес рисунка.

Пример: <img src=”images/diz/kartinka.gif” Width=300px Height=25px Alt=”прикольная картинка” border=0>

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



Понравилась статья?
Закажи бесплатную подписку!

Сообщения по теме:

  • Как сделать сайт и быть на нем админом
  • Word – как вставить рисунок
  • Word – как вставить таблицу

  • Метки: , , , ,

    Комментарии (15)

    1. евгений 09.05.2011 #

      подскажите, я вставил одну картинку, под нее хочу еще одну вставить, ввожу тот же код(но с другой картинкой), а вторая картинка появляется рядом с первой

    2. admin 09.05.2011 #

      евгений, вставьте тег между картинками, или вставляйте картинку каждую в своей строке

    3. Brand 25.08.2011 #

      Да нет. Надо поставить тег

    4. AHHA 27.11.2011 #

      Помогите, пожалуйста! Я уже все перепробовала, но картинки на своём html я так и не увидела((((((((((

      Что не так????????

    5. admin 27.11.2011 #

      AHHA, видимо неправильно указан путь к файлу. Проверьте так же разными браузерами, если хоть в одном отображается то возможно что-то в адресе немного не так. И конечно же непонятно какой тип ссылки у Вас абсолютный или относительный?

    6. AHHA 28.11.2011 #

      — вот моя ссылка. Пробую в Mozilla, Explorer — нигде ничего… Изменяю и размер и отступ, а картинки нет, только маленький значок.

    7. admin 29.11.2011 #

      AHHA, если картинка в папке images и эта папка в одной с index.htm то ссылка выглядит так images/картинка.тип Возможно Вы неправильно указали тип файла, я так например делал рисунки в пеинте и думал в чем причина, а оказалось, что там тип файла большими буквами JPG. Ваш маленький значок, это неправильная ссылка — картинку не удалось найти.
      Кстати ссылку вашу сайт съел) поэтому попробуйте сделать как написано выше.

    8. AHHA 29.11.2011 #

      Разобралась!!!!!! Оказалась невнимательной — вместо img src писала img SCR)))))) В любом случае благодарна за помощь;)

    9. sollers 30.11.2011 #

      у меня такая же проблема , перепробовал все,а картинка так и не появилась.Я работаю через PSPad,ставлю ссылку в коде, сохраняю все это как chrom html документ,открываю этот документ через IE,таблицы и текст показывает, вместо картинки показывает что там должна быть картинка (как будто не загружена),но не своиств ничего нету

    10. admin 30.11.2011 #

      AHHA, это ошибка практически всех начинающих, из моего опыта — редактирование файла и просмотр его копии, не удивительно, что, чтобы я не делал, ничего не менялось)

    11. admin 30.11.2011 #

      sollers, судя по всему ссылка на картинку неправильная и свойств Вы не увидите.

    12. sollers 30.11.2011 #

      я сделал как говорят, у меня рисунок и сохраненный htmlдокумент находятся в одной папке my sait,ссылка вот такая <img scr="/chevrolet_camaro_.jpg Width=400px Height=250px border=0"..

    13. sollers 30.11.2011 #

      все!!! нашел!!!!! благодаря АННЕ,также писал неправильно src)))

    14. Антон 30.11.2011 #

      Всем привет я сначала пробовал на Internet Explorer.Все получалось, решил создать уже сайт в Оpere фон менял ни просто политру а типо небо или космос Internet Explorer все норм работает а в Оpere хоть тресни все менял ни че ни помогает.Делал следуещее:

    15. admin 01.12.2011 #

      Антон, проблема со ссылками, может быть типа \kartinka.jpg и kartinka.jpg — один браузер поймет, а другой нет, поэтому может отображаться по разному. Так же стоит время от времени чистить кеш браузера, чтобы отображались изменения (по моему я жал так же на кнопку «Обновить»).

    Оставить комментарий