Создадим простейшую страничку HTML

Давайте, применим полученные знания на практике и создадим простейшую страничку. Запустите текстовый редактор, например "Блокнот" или "WordPad", откройте или создайте если еще не создали в вашей папке стартовый файл с именем index.html.

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

Сначала пишем тег открытия HTML документа:

<HTML>

Затем описываем заголовок и тэг <BODY> с атрибутами, устанавливающими цвета текста, активной, не просмотренной и просмотренной ссылок, а так же рисунок фона - "Stars.gif"

  <HEAD>
    <TITLE>Моя домашняя страничка</TITLE>
  </head>

  <body bgcolor="#000000" 
        background="Stars.gif" 
        text="#ffffff" 
        alink="#DDOOOO" 
        link="#0000FF"  
        vlink="#FF00FF">

Поместим теперь на первую строку приветствие, выравнив его по центру и определив его как заголовок второго уровня.

  <CENTER>
    <H2>
      Добро пожаловать на мою домашнюю страничку!
    </H2>
  </CENTER>

Как вы помните, я говорил, что для позиционирования различных элементов на Web-странице используют таблицы. Создадим таблицу размером 2 на 2, шириной 100% и высотой 80%. Для каждой ячейки определим ширину 50% и высоту 50%. Во второй ячейке первой строки создадим ссылку для отправки почты. Для указания на гиперссылку используем картинку "snail.gif":

<a href="mailto:support@narod.ru">
  <img border="0" alt="Напиши мне письмо" 
       height="84" width="92" src="snail.gif">
</a>

Для указания на фотоальбом используем ссылку:

<a href="PhotoAlbum.html">
Мой фотоальбом
</a>

В итоге наша таблица будет иметь вот такой код:

<TABLE border="0" width=100% height="80%">  
   <TR height="50%">
   <TD align="center" width=50%>
   </TD> 
   <TD align="center" width=50%>
     <a href="mailto:support@narod.ru">
       <img border="0" alt="Напиши мне письмо" 
           height="84" width="92" src="snail.gif">
       </a>       
   </TD> 
 </TR> 
 <TR height="50%">
   <td align="center" width=50%>
     <a href="PhotoAlbum.html" target="_blank">
       Мой фотоальбом
     </a>
   </TD> 
   <TD align="center" width=50%>
   </TD> 
 </TR>
</TABLE>

Завершим нашу страничку закрывающими тэгами:

 
</BODY>
</HTML>

Теперь будем создавать фотоальбом. Создайте в текущей папке, две папки: "PhotoAlbum" для Ваших фотографий, и "PreView" для уменьшенных фотографий, предназначенных для предварительного просмотра.

Обратите внимание, что на многих серверах имеет большое значение регистр символов в названиях файлов. Это значит, что ссылки <a href="PhotoAlbum.html"> и <a href="photoalbum.html">, будут указывать на разные файлы.

С помощью текстового редактора создайте в текущей папке файл "PhotoAlbum.html". Начнем его заполнять.

Сначала создадим таблицу, например, 3 на 2. В каждой ячейке разместим фотографии для предварительного просмотра из папки "PreView", которые будут указывать на полные фотографии из папки "PhotoAlbum". При нажатии на маленькую картинку, в отдельном окне будет раскрываться полная фотография.

Код странички с нашим фотоальбомом будет выглядеть следующим образом:

<HTML>
<HEAD>
<TITLE>Мой фотоальбом</TITLE>
</HEAD>

<BODY>

<TABLE border="0" width=100%>
 <CAPTION>Мои любимые фотографии</CAPTION>

 <tr>
  <td width=30% align="center">
   <a href='PhotoAlbum/11.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0" 
        src="PreView/11.jpg">
   </a>  
  </td>

  <td width=30% align="center">
   <a href='PhotoAlbum/12.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0" 
        src="PreView/12.jpg">
   </a>  
  </td>

  <td width=30% align="center">
   <a href='PhotoAlbum/13.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0" 
        src="PreView/13.jpg">
   </a>  
  </td>

  </tr>

  <tr>
   <td width=30% align="center">
   <a href='PhotoAlbum/21.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0"
        src="PreView/21.jpg">
  </a>  
  </td>

  <td width=30% align="center">
   <a href='PhotoAlbum/22.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0"
        src="PreView/22.jpg">
   </a>  
  </td>

  <td width=30% align="center">
   <a href='PhotoAlbum/23.jpg' target='_blank'>
   <img border="0" align="" valign="" hspace="0" vspace="0"
        src="PreView/23.jpg">
   </a>  
  </td>
 </tr>

</TABLE>

</BODY>
</HTML>

Шаг 7 - Создадим простейшую страничку HTML