Учимся вставлять картинки

На этой странице я расскажу как вставлять изображение в Web-документ и как правильно прописывать ссылки на другие документы или Web-ресурсы.

Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше передать содержание документа. Рисунки на Web-странице должны быть созданы в таком графическом формате, который поддерживается браузером. К стандартным форматам Web-графики относятся GIF, JPG и PNG. Эти форматы обеспечивают эффективное сжатие изображений и минимальный размер файлов, что значительно сокращает время загрузки вашей страницы из сети. Для вставки изображения в Web-документ используется тег <img>, тэг <img> не требует закрывающего тэга.

<img src="photo.jpg">

photo.jpg это имя картинки и вы можете подставить имя любой картинки. Самое главное понять, что все расположенное между кавычками это ссылка, путь к картинке. В моем примере картинка лежит в той же папке (директории), в которой лежит документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="index.files/photo.jpg">

Такая ссылка означает, что картинка лежит в папке index.files с именем photo.jpg. У себя на компьютере я сохранил картинку с именем photo.jpg на диске Е: внутри папки Мой первый сайт (в этой папке я сохранял свой документ html)
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

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

<img src="http://www.index.ru/index.files/photo.jpg">

Хочу обратить ваше внимание на то, что имя графического файла в теге следует указывать с соблюдением регистра PHOTO.jpg, photo.JPG, photo.jpg и PHOTO.JPG это разные имена файлов.


  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<img src="photo.jpg" width="320" height="256">
<font size="+2" face="Cosmic Sans, arial, verdana, courier">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

Из примера видно, что рядом с картинкой одна строчка текста, чтобы текст располагался весь рядом с картинкой надо вспомнить об уже знакомом вам атрибуте align, который отвечает за выравнивание.

  • <img src="photo.jpg" align="left"> Картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
  • <img src="photo.jpg" align="right"> Картинка будет прижата к правому краю экрана, а текст будет обтекать ее слева.
  • <img src="photo.jpg" align="bottom"> Текст будет располагаться внизу картинки.
  • <img src="photo.jpg" align="middle"> Текст будет располагаться посередине картинки.
  • <img src="photo.jpg" align="top"> Текст будет располагаться вверху картинки.

Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:

  • <img src="photo.jpg" vspace="10"> Атрибут vspace - задает расстояние между текстом и рисунком по вертикали (в пикселях).
  • <img src="photo.jpg" hspace="30"> Атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали (в пикселях).
  • <img src="photo.jpg" alt="моя фотография"> Атрибут alt - краткое описание картинки.
  • <img src="photo.jpg" width="100"> Атрибут width - ширина самой картинки (в пикселях).
  • <img src="photo.jpg" height="200"> Атрибут height - высота самой картинки (в пикселях).
  • <img src="photo.jpg" border="5"> Атрибут border - рамка вокруг самой картинки (в пикселях).

Напоминаю, что атрибуты для одного тэга могут употребляться одновременно друг с другом, В документе это будет выглядеть примерно так:

<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="0" alt="Просто картинка">

Картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей, ширина картинки 320 пикселей, высота картинки 256 пикселей, рамка вокруг картинки отсутствует, ну и если вы наведете на картинку курсор, то выскочит подсказка "Просто картинка".

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="0" alt="Просто картинка">
<font size="+2" face="Cosmic Sans, arial, verdana, courier">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

Чтоб расположить саму картинку в центре экрана, справа или слева, вспомните параграфы <p></p> или <div></div> эти теги выравнивают не только текст.
Картинку можно сделать основным фоном документа, добавляем атрибут background="photo.jpg" для открывающего тега <body>

<body text="#336699" bgcolor="#000000" background="photo.jpg">

Атрибут background указывает на то, где лежит фоновая картинка, в данном примере он указывает на то, что фоновая картинка лежит в той же папке, что и наш документ. Попробуйте у себя в блокноте добавить атрибут background для открывающего тега <body> и посмотрите, что у вас получится. В качестве фона можете взять любую картинку или сохранить у себя на компьютере мой образец.



Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru