<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Работа с изображениями в HTML</title>
</head>
<body>
 <p>
  <img src="image/les.gif" width="100" height="100" alt="Лес">
  <img src="image/les.gif" width="200" height="200" alt="Лес">
  <img src="image/les.gif" width="200" height="100" alt="Лес">
 </p>

 <p>Lorem ipsum dolor sit amet consectetuer <img src="image/les.gif" style="margin:0 30px 0 30px" width="100" height="100" alt="Лес" title="Изображение леса"> tellus convallis tincidunt orci Donec. Nulla id lacinia a quis laoreet pretium non consequat quis lacinia. Est volutpat Integer semper turpis interdum gravida dui Aliquam lobortis ut. Lobortis feugiat rutrum urna consequat ornare ante Morbi vitae elit nibh. Velit Curabitur netus tempor Curabitur Nunc et Integer iaculis vitae.</p>

 <div><img src="image/les.gif" style="margin:0 0 20px 20px; float:right" width="100" height="100" alt="Лес"></div>
 <p>At purus ligula pretium aliquet mauris enim Quisque commodo urna elit. Quam tellus tellus sem nisl nibh Sed Cras Nam nibh rutrum. Et augue tincidunt Quisque ac Sed cursus justo netus accumsan ipsum. Maecenas vel Vestibulum at Pellentesque lacus Nam faucibus lorem lacus nibh. Odio faucibus.</p>

 <p style="clear:right">Ac sem Duis vitae elit vitae Sed non massa Pellentesque magna. Orci pretium eget ligula pretium eu lacinia vitae pretium aliquam mauris. Metus ante ornare vitae tincidunt In id lacus congue volutpat nascetur. Ultrices mauris quis tempus orci Morbi et.</p>
 
 <div><img src="https://seodon.ru/html/image/orel.gif" width="100" height="50" alt="Летящая птица"></div>
</body>
</html>

Ну что, надеюсь вы во всех изображениях указали альтернативный текст и ширину с высотой? Хорошо.

Как видите, я поместил изображение перед третьим параграфом в отдельный блок, но в данном случае его можно указать и внутри третьего параграфа — результат будет один. И снова вспоминаем о гибкости HTML и множестве подходов в решении разных задач.

Теперь подробнее о последнем задании, особенно если вы не смогли его решить самостоятельно.

Если посмотреть на код примеров, то можно увидеть один и тот же относительный адрес: "image/имя картинки". А это значит, что картинки могли отобразиться на странице урока только в одном случае — если в папке с HTML-страницей урока есть подпапка image, в которой и находятся изображения.

Далее. Значит, чтобы нам попасть в эту подпапку image и загрузить изображение, надо в адресе вместо имени страницы урока подставить "image/имя картинки". Ну а сам адрес урока вы можете увидеть в адресной строке вашего браузера. Все. :)

Вернуться в урок → Перейти к следующему уроку