Поставить фото на страницу сайта, код, пример.

Коды с данной страницы см.здесь - Фото. Тема № 1 -Поставить фото

Новые шрифты для сайта – качаем отсюда!

Мы уже рассказывали, как вставить картинку в программе Dreamweaver.

Сегодня коснёмся ещё раз вопроса вставки фотографии, либо картинки на страницу своего сайта! Прежде всего нужно иметь картинку, либо фотографию! Возьмём для наших экспериментов по вставке фотографий абсолютно любую фотографию!

Ну, к примеру, вот такую:

<img src="../1_foto/Foto/Foto.jpg" width="500" height="362" alt="ракушка для примера"/>.

Внимание!!!

Здесь нужно отметить, обязательно!  Что иногда, расположение вашего файла в папке, уровнем выше, либо уровнем ниже, может  код самой фотографии изменить!

Что мы видим на странице с кодами!  На этой странице, код данной фотографии уже имеет вид :

Сравните с верхним кодом.

<img src="1_foto/Foto/Foto.jpg" width="500" height="362" alt="ракушка для примера"/>.</p>

Удивительно, фотография  не изменила своё местоположение, но код изменился, из-за изменения положения страницы, адреса можете сравнить ниже! Так, что будьте внимательны к мелочам!

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

Адрес нашей страницы –

http://doing-sites.narod.ru/Site-v-bloknote/Kak-vstavit-foto-na-stranitsu-sayta.html

Адрес страницы с кодами -

http://doing-sites.narod.ru/Vse-kodi.html

---

Для работы с кодом пользуйтесь программой notepad++.

До начала формирования пути к фотографии нужно помнить, что никакие пробелы и кириллица исключены! Просто фотография не будет показываться! Если вы хотите отделить слова, то используем, либо тире, либо нижнее подчеркивание!

С самого начала нужно правильно сформировать путь к картинке или фотографии! Если у вас фото будет находится в корневой папке, то  путь к картинке будет представлять собой:

Начальную ссылку + название фотографии!

http://doing-sites.narod.ru/название_фотографии

Если фотография находится в папке первого уровня, то добавляется папка, между ссылкой и названием фотографии и так далее.

http://doing-sites.narod.ru/папка_первого_уровня/название_фотографии

Количество уровней –необходимо узнать у своего провайдера!

Далее, чаще всего  при описании пути к фотографии не используется ссылка, а используется обозначение  двумя точками и слешем. Я не знаю почему и для чего, но подозреваю, что для облегчения создания этого пути!

1.вариант:

http://doing-sites.narod.ru/название_фотографии будет иметь вид:

 ../название_фотографии.jpg

2.вариант

http://doing-sites.narod.ru/папка_первого_уровня/название_фотографии

Будет иметь вид:

../папка_первого_уровня/название_фотографии.jpg

Далее добавляем тег <img> и атрибут src., задаём  ширину -  width и высоту – height, alt – ставим по желанию(название фотографии, например если фотография стола, то: «стол на кухне»  

<img src="../папка_первого_уровня/название_фотографии.jpg " width="100" height="100" alt="Замещающий текст."/>