<!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>Создание ссылок - изображений</title>
<style type="text/css">
a:link {color:#000000}
a:visited {color:#000000}
a:hover {color:#FF0000}
a:active {color:#CCCCCC}
img {border:0}
</style>
</head>
<body style="font-size:85%; background:#FFFFFF url('image/fon3.jpg')">

 <div>
  <a href="https://seodon.ru/"><img src="image/but1.png" width="106" height="30" alt="Главная страница"></a>
  <a href="https://seodon.ru/news/"><img src="image/but2.png" width="106" height="30" alt="Новости"></a>
  <a href="https://seodon.ru/contact/"><img src="image/but3.png" width="106" height="30" alt="О компании"></a>
  <a href="https://seodon.ru/mapsite/"><img src="image/but4.png" width="106" height="30" alt="Карта сайта"></a>
 </div>
 
 <h1 style="text-align:center">Lorem ipsum dolor</h1>
 
 <div style="background:#FFFFFF">
  
  <hr style="background:#999999; height:2px; border:0">
  
  <h2>Pellentesque Aenean</h2>
  <p>Lorem ipsum dolor sit amet consectetuer Pellentesque tincidunt leo consequat eu. Libero lacinia id sollicitudin wisi Pellentesque Aenean netus eget ullamcorper Cum. Quisque Vestibulum dolor nibh nibh nunc Quisque felis convallis Sed Quisque. Dictum Curabitur tincidunt nascetur nibh pede venenatis faucibus magna sapien elit. Tellus Quisque augue Phasellus Sed sem leo felis ligula est sed. Sed at ligula sed fermentum magna pellentesque odio eros laoreet nisl. Tortor.</p>
  <p>Urna id malesuada Lorem consectetuer ac pellentesque dui orci et tincidunt. Quis sodales aliquet egestas justo et mauris hendrerit Nullam non facilisis. Congue eros Pellentesque sagittis eget nibh pede eros vitae.</p>

  <hr style="background:#999999; height:2px; border:0">
  
  <h2>Justo orci</h2>
  <p>Fringilla urna risus aliquam Vestibulum at tristique massa ipsum dui eleifend. Justo orci congue nisl interdum ipsum elit tincidunt tellus facilisis Maecenas. Suspendisse tempor et.</p>
  <p>Maecenas euismod tellus Morbi est vitae leo pretium et laoreet libero. Neque urna Donec Aenean Vestibulum nibh purus tortor Nunc iaculis ac. Ut at interdum diam nibh quis laoreet Quisque Curabitur neque Lorem. Quis metus vitae nibh.</p>

  <hr style="background:#999999; height:2px; border:0">
  
  <h2>Aliquam Aenean Nulla</h2>
  <blockquote>
  <p>Aliquam Aenean Nulla mauris augue vitae magna porttitor Aliquam tincidunt pede. Curabitur venenatis sapien Cras Sed pretium pharetra mattis Pellentesque risus Ut. Wisi ac ac.</p>
  <p>Eros et Cras aliquam parturient vel mattis tellus fringilla dapibus Ut. Sed congue Pellentesque quis velit Pellentesque Mauris est laoreet hendrerit commodo. Et Sed sagittis semper libero habitasse Nam adipiscing laoreet et Nam. Mauris ut leo quis In orci laoreet facilisi nulla Pellentesque eu. Maecenas pretium tincidunt Aenean eros pellentesque congue nibh tristique tellus elit. Fringilla cursus ligula Ut eget metus pellentesque Nunc et congue quis. At cursus In.</p>
  </blockquote>
  
  <hr style="background:#999999; height:2px; border:0">
  
 </div>
 
 <p style="text-align:center">
  <a href="https://seodon.ru/">Главная</a> |
  <a href="https://seodon.ru/news/">Новости</a> |
  <a href="https://seodon.ru/contact/">О компании</a> |
  <a href="https://seodon.ru/mapsite/">Карта сайта</a>
 </p>
 
</body>
</html>

Ну вот, ваша страничка уже приобретает очертания нормального интернет-сайта, но то ли еще будет!

Когда писали длинную цитату, не забыли, что тег <BLOCKQUOTE> может содержать только блочные теги? И что тег <BODY> не может содержать встроенные (уровня строки) теги, тоже не забываем. Именно поэтому все ссылки вверху и внизу страницы пришлось поместить в блочные теги.

Ну и конечно не забываем про обязательные атрибуты тега <IMG>, особенно про alt.

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