1. Главная страница » Уроки HTML » Как вставить картинку, фото или изображение на сайт

Как вставить картинку, фото или изображение на сайт

Автор: | 21.04.2013

Ну а теперь мы научимся работать с картинками и ссылками.

За размещение картинки на нашей странице отвечает тэг:
<img src=»путь/имя.формат»> обратите внимание, что у него нет закрывающего тэга. Ну а теперь разберем по порядку:

Img – говорит о том, что здесь будет размешено изображение.

src=»путь/имя.формат» – указывает браузеру где находиться данное изображение и какой у нее формат (в какой программе было создано данное изображение, в основном вы будете сталкиваться с форматами: jpg; png; bmp. Для того чтобы узнать формат изображения достаточно навести курсор мыши на нее, нажать правую кнопку мыши, в сплывающем окне выбираем «свoйства», нажимаем и в следующем окне всплывает вся информация о данном изображение, обращайте внимание на их регистр).

Что касается пути к картинки то здесь есть нюансы. Если картинка находиться в той папки что и ваша страница, то путь к ней не прописывается: <img src=»имя.формат»>.

Если картинка лежит на уровне выше, а ваша страница находится в поддиректории, то путь до неё будет такой:
<img src=»../имя.формат»> в данном случае две точки обозначают, что папка в которой лежит картинка, находится выше на одну позицию.

Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то путь до неё будет выглядеть так:
<img src=»имя папки/имя.формат»>

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

  • Х1здесь находится рисунок с именем «луна» в формате «png»
  • в ней:
  • Х2
  • в ней:
  • Х3здесь находится наша страничка «index.html» и рисунок с именем «значок» в формате «bmp»
  • в ней:
  • Х4
  • в ней:
  • Х5здесь находится фото с именем «природа» в формате «jpg»

Выводим рисунок с луной «луна»:

<img src=»../../луна.png»>

Выводим рисунок со значком «значок»:

<img src=»значок.bmp»>

Выводим рисунок с природой «природа»:

<img src=»х4/х5/природа.ipg»>

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

<img src=»http://www.web-shpargalka.ru/image/coloboc3.png»>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<div align=»center»>
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color=»red»> Привет!!! </font><br/>
<img src=»image/coloboc3.png»>
</div>
</body>
</html>

Обратите внимание, где расположено наше изображение (в контейнере <div>). Поместите изображение за пределами этого контейнера и посмотрите что изменяться. А все дело в том, что все, что находиться в нашем контейнере <div> выравнивается по центру: <div align=»center» > </div>. Экспериментируйте, как вы быстрее освоите материал.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code