Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Вчера долго пытался объяснить бабуле, что работаю программистом...
— ???
— Короче, сошлись на том, что чиню телевизоры и развожу мышей...

  Моя группа в контакте:



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

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

За размещение картинки на нашей странице отвечает тэг:
<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 

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь