Анализ готовой html-страницы

Применив на практике все ранее сказанное, главная страница сайта http://v-mire-givotnyh.ru приобрела следующий вид:

Вот HTML-код страницы:

<html>
<head>
<title>
В мире животных - сайт о жизни животных и их повадках
</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="Title" content="В мире животных - сайт о жизни животных и их повадках">
<meta name="description" content="Жизнь диких животных в природе">
<meta name="keywords" content="животные, дикие животные, жизнь животных, природа животных">

</head>

<table width="100%"  bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" background="img/fon2_1.jpg" height="29">
<font size="+1" color="#ffffff"><strong>В МИРЕ ЖИВОТНЫХ</strong> - сайт о жизни диких животных в природе</font>
</td>
<td background="img/fon2_1.jpg" height="29">
<span style="color: white; font-family: Verdana; font-weight:bold">http://v-mire-givotnyh.ru</span>
</td>
</tr>
<tr><td colspan="2" background="img/fon3_1.jpg" height="22" width="100%">
<tr><td colspan="2"><img src="img/animals.jpg" alt="" width="1024" height="90" border="0"></td></tr>
<tr><td colspan="2" background="img/fon3.jpg" height="22" width="100%">
<tr><td colspan="2" background="img/fon2.jpg" height="29" width="100%">
<span style="color: yellow; font-family: Verdana; font-weight:bold;">
 
</span>
</td></tr>
</table>

<table width="100%" height="300" cellpadding="0" cellspacing="0" border="0">
<tr><td valign="top">

<table width="100%" height="100%" bgcolor="#ffffff" cellpadding="5" cellspacing="5" border="1" frame="void" bordercolor="#d0d0d0">
<tr>

<td valign="top" width="224" bgcolor="#ffffff">
 
</td>

<td valign="top" width="800" bgcolor="#ffffff">
<h1>Классификация животных</h1>
<p>Наивысшая ступень классификации всего живого называется <strong>царством</strong>. В настоящее время биологи выделяют четыре царства: <em>прокариоты, грибы, растения, животные</em>. Классификация царства ЖИВОТНЫЕ представлена в таблице ниже.</p>
<h3>Подцарство: одноклеточные</h3>
<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Подтип</th>
    <th>Класс</th>
</tr>
<tr>
    <td rowspan="2" valign="top">Саркомастигофоры</td>
    <td valign="top">Саркодовые</td>
    <td valign="top">Корненожки<br>Лучевики<br>Солнечники</td>
</tr>
<tr>
    <td valign="top">Жгутиконосцы</td>
    <td valign="top">Растительные жгутиконосцы<br>Животные жгутиконосцы</td>
</tr>
<tr>
    <td valign="top">Споровики</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Книдоспоридии</td>
    <td valign="top"> </td>
    <td valign="top">Миксоспоридии</td>
</tr>
<tr>
    <td valign="top">Микроспоридии</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Инфузории</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
</table>

<h3>Подцарство: многоклеточные; Надраздел: <em>фагоциттелозои</em></h3>

<p>Тип: пластинчатые</p>

<h3>Подцарство: многоклеточные; Надраздел: <em>паразои</em></h3>

<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Подтип</th>
    <th>Класс</th>
</tr>
<tr>
    <td rowspan="2" valign="top">Губки</td>
    <td valign="top">Известковые губки</td>
    <td valign="top">Фаретронные губки<br>Кальцинейные губки<br>Калькаронные губки</td>
</tr>
<tr>
    <td valign="top">Кремниевые губки</td>
    <td valign="top">Стеклянные губки<br>Обыкновенные губки</td>
</tr>
</table>

<h3>Подцарство: многоклеточные; Надраздел: <em>эуметазои</em></h3>

<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Подтип</th>
    <th>Класс</th>
</tr>
<tr>
    <td colspan="3" align="center"><strong>РАЗДЕЛ: <em>Лучистые</em></strong></td>
</tr>
<tr>
    <td rowspan="2" valign="top">Кишечнополостные</td>
    <td valign="top">Медузопроизводящие</td>
    <td valign="top">Кубоидные<br>Гидроидные<br>Сцифоидные<br>Сифонофоры</td>
</tr>
<tr>
    <td valign="top">Коралловые полипы</td>
    <td valign="top">8-лучевые кораллы<br>6-лучевые кораллы<br>Цериантарии<br>Антипатарии</td>
</tr>
<tr>
    <td valign="top">Гребневики</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Мезозои</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
</table>
<br>
<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Класс</th>
    <th>Подкласс</th>
</tr>
<tr>
    <td colspan="9" align="center"><strong>РАЗДЕЛ: <em>Двусторонне-симметричные</em></strong></td>
</tr>
<tr>
    <td valign="top" rowspan="2">Плоские черви</td>
    <td valign="top">Турбеллярии</td>
    <td valign="top">Архоофоры<br>Неоофоры</td>
</tr>
<tr>
    <td valign="top">Ксенотурбеллиды<br>Гнатостомулиды<br>Трематоды<br>Аспидогастриды<br>Моногенеи<br>Гирокотилиды<br>Цестоды<br>Амфилиноидеи</td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top" rowspan="2">Немательминты</td>
    <td valign="top">Нематоды</td>
    <td valign="top">Эноплия<br>Хромадория<br>Рабдития</td>
</tr>
<tr>
    <td valign="top">Брюхоресничные<br>Коловратки<br>Киноринхи<br>Волосатики<br>Скребни<br>Приапулиды<br>Камптозоа</td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Немертины</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top" rowspan="2">Кольчатые черви</td>
    <td valign="top">Первичные кольчецы<br>Многощетинковые кольчецы<br>Олигохеты</td>
    <td valign="top"> </td>
</tr>

<tr>
    
    <td valign="top">Пиявки</td>
    <td valign="top">Древние пиявки<br>Настоящие пиявки</td>
</tr>
<tr>
    <td valign="top">Щупальцевые</td>
    <td valign="top">Форониды<br>Мшанки<br>Плеченогие</td>
    <td valign="top"> </td>
</tr>
</table>

<br>
<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Подтип</th>
    <th>Класс</th>
    <th>Подкласс</th>
    <th>Надотряд</th>
</tr>
<tr>
    <td colspan="9" align="center"><strong>РАЗДЕЛ: <em>Двусторонне-симметричные</em></strong></td>
</tr>
<tr>
    <td valign="top" rowspan="4">Моллюски</td>
    <td valign="top"> </td>
    <td valign="top">Панцирные<br>Бороздчатобрющие<br>Моноплакофоры<br>Лопатоногие</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>

<td valign="top"> </td>
    <td valign="top">Брюхоногие</td>
    <td valign="top">Переднежаберные<br>Заднежаберные<br>Легочные</td>
    <td valign="top"> </td>
</tr>
<tr>

<td valign="top"> </td>
    <td valign="top">Двустворчатые</td>
    <td valign="top"> </td>
    <td valign="top">Первичножаберные<br>Настоящие пластинчатожаберные<br>Перегородчатожаберные</td>
</tr>
<tr>

<td valign="top"> </td>
    <td valign="top">Головоногие</td>
    <td valign="top">Наружнораковинные<br>Внутрираковинные</td>
    <td valign="top"> </td>
</tr>

<tr>
    <td valign="top" rowspan="5">Иглокожие</td>
    <td valign="top">Стебельчатые иглокожие</td>
    <td valign="top">Морские лилии</td>
    <td valign="top">Членистые морские лилии</td>
    <td valign="top"> </td>
</tr>
<tr>
    
    <td valign="top" rowspan="3">Эхинозои</td>
    <td valign="top">Морские кубышки</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    
    
    <td valign="top" rowspan="2">Морские ежи</td>
    <td valign="top">Правильные морские ежи</td>
    <td valign="top">Перишехинацеи<br>Диадематоцеи</td>
</tr>
<tr>
    
    <td valign="top">Неправильные морские ежи</td>
    <td valign="top">Гнатостоматы<br>Ателостоматы</td>
</tr>
<tr>
    
    <td valign="top">Астерозои</td>
    <td valign="top">Морские звезды<br>Офигуры</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Погонофоры</td>
    <td valign="top"> </td>
    <td valign="top">Френуляты<br>Афренуляты</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Щетинкочелюстные</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Полухордовые</td>
    <td valign="top"> </td>
    <td valign="top">Кишечнодышащие<br>Крыложаберные</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
</table>

<br>
<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Тип</th>
    <th>Подтип</th>
    <th>Надкласс</th>
    <th>Класс</th>
    <th>Подкласс</th>
    <th>Надотряд</th>
</tr>
<tr>
    <td colspan="6" align="center"><strong>РАЗДЕЛ: <em>Двусторонне-симметричные</em></strong></td>
</tr>
<tr>
    <td rowspan="9" valign="top">Членистоногие</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top">Морские ежи</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="2" valign="top">Жабродышащие</td>
    <td valign="top"> </td>
    <td rowspan="2" valign="top">Ракообразные</td>
    <td valign="top">Жаброногие<br>Ракообразные<br>Ремипедии<br>Цефалокариды<br>Максиллоподы<br>Ракушковые<br>Ракообразные</td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top"> </td>
    <td valign="top">Высшие ракообразные</td>
    <td valign="top">Филлокариды<br>Синкариды<br>Гоплокариды<br>Перакариды<br>Эвкариды</td>
</tr>
<tr>
    <td valign="top">Трилобиты</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Хелицеровые</td>
    <td valign="top"> </td>
    <td valign="top">Меростомовые<br>Паукообразные</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="4" valign="top">Трахейнодышащие</td>
    <td valign="top">Многоножки</td>
    <td valign="top">Пауроподы<br>Симфилы<br>Двупарноногие<br>Губоногие</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="3" valign="top">Насекомые</td>
    <td valign="top">Скрыточелюстные насекомые</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="2" valign="top">Открыточелюстные насекомые</td>
    <td valign="top">Первичнобескрылые насекомые</td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Крылатые насекомые</td>
    <td valign="top">Насекомые с неполным превращением<br>Насекомые с полным превращением</td>
</tr>
<tr>
    <td valign="top">Язычковые</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Тихоходки</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Онихофоры</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top">Первичнотрахейные</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
</table>

<br>
<table class="tblgreen" cellspacing="2" cellpadding="2" border="1" bordercolor="#CADBBB">
<tr>
    <th>Подтип</th>
    <th>Надкласс</th>
    <th>Класс</th>
    <th>Подкласс</th>
    <th>Инфркласс</th>
	<th>Надотряд</th>
</tr>
<tr>
    <td colspan="6" align="center"><strong>РАЗДЕЛ: <em>Двусторонне-симметричные</em></strong> <strong>ТИП: <em>Хордовые</em></strong></td>
</tr>
<tr>
    <td valign="top">Оболочники</td>
    <td valign="top"> </td>
    <td valign="top">Аппендикулярии<br>Асцидии<br>Сальпы</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top">Бесчерепные</td>
    <td valign="top"> </td>
    <td valign="top">Ланцетники</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="11" valign="top">Позвоночные</td>
    <td valign="top">Бесчелюстные</td>
    <td valign="top">Круглоротые</td>
    <td valign="top">Миксины<br>Миноги</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="5" valign="top">Челюстноротые</td>
    <td rowspan="2" valign="top">Хрящевые рыбы</td>
    <td valign="top">Пластиножаберные рыбы</td>
    <td valign="top"> </td>
    <td valign="top">Акулы<br>Скаты</td>
</tr>
<tr>
    <td valign="top">Слитночерепные рыбы</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td rowspan="3" valign="top"Костные рыбы></td>
    <td valign="top">Лопастеперые рыбы</td>
    <td valign="top"> </td>
    <td valign="top">Двоякодышащие рыбы<br>Кистеперые рыбы</td>
</tr>
<tr>
    <td rowspan="2" valign="top">Лучеперые рыбы</td>
    <td valign="top"> </td>
    <td valign="top">Ганоидные</td>
</tr>
<tr>
    <td valign="top">Костистые рыбы</td>
    <td valign="top">Клюпеоидные рыбы<br>Араваноидные рыбы<br>Ангвиллоидные рыбы<br>Циприноидные рыбы<br>Атериноидные рыбы<br>Параперкоидные рыбы<br>Перкоидные рыбы<br>Батрахоидные рыбы</td>
</tr>
<tr>
    <td valign="top"> </td>
    <td valign="top">Земноводные</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top"> </td>
    <td valign="top">Пресмыкающиеся</td>
    <td valign="top">Анапсиды<br>Лепидозавры<br>Архозавры</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top"> </td>
    <td valign="top">Птицы</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
    <td valign="top">Плавающие птицы<br>Бегающие птицы<br>Новонебные птицы</td>
</tr>
<tr>
    <td valign="top"> </td>
    <td rowspan="2" valign="top">Млекопитающие</td>
    <td valign="top">Первозвери</td>
    <td valign="top"> </td>
    <td valign="top"> </td>
</tr>
<tr>
    <td valign="top"> </td>
    <td valign="top">Настоящие звери</td>
    <td valign="top">Низшие звери<br>Высшие звери</td>
    <td valign="top"> </td>
</tr>
</table>

</td>

</tr>
</table>

</td></tr>
</table>

<table width="100%" height="90" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
<tr><td valign="bottom"><h6>v-mire-givotnyh.ru, 2011</h6></td></tr>
</table>

</td></tr>
</table>

</body>
</html>

Давайте его кратенько разберем.

В качестве фона всего сайта использована картинка fon.jpg, размером 4*4 пикселя, увеличенный вид которой представлен справа. Фоновое изображение использует два оттенка зеленого цвета, которые чередуются в шахматном порядке. Используя разные оттенки и порядок их размещения, можно получать разнообразные фоновые узоры. Чем крупнее фоновая картинка, тем крупнее будет общий фоновый узор.

Верхняя таблица "шапки" сайта состоит из 5 строк:

1 строка содержит два столбца: в левом написано "В мире животных - сайт о жизни животных в дикой природе"; в правом - URL сайта. В качестве фона строка использует изображение fon1.jpg (размер 2*29 пикселей), представленное справа. Изображение получено в растровом графическом редакторе CorelDraw при помощи интерактивного перетекания одного оттенка зеленого цвета, в другой оттенок (сами оттенки зеленого взяты из фоновой картинки);
2 строка является пустой, в качестве фона используется изображение fon3.jpg (размер 22*22 пиксела), имитирующее край фотопленки. Картинка была найдена в сети Интернет и обрезана до нужных размеров;
3 строка содержит рисунок animals.jpg (размер 1024*90) с нарезкой разных животных;
4 строка повторяет вторую строку, но фоновое изображение перевернуто на 180°;
5 строка повторяет первую строку, но с перевернутым фоновым изображением и одной ячейкой, в которой планируется располагать навигационные ссылки по сайту.

Далее идет центральная таблица, состоящая из двух ячеек. В таблице убраны все бордюры за исключением бордюров между ячейками. Левая ячейка на момент написания этого материала остается пока пустой. В правой ячейке располагается контент главной страницы сайта.

Заканчивает страницу таблица "подвала" сайта, на которой пока находится URL сайта и год создания. В дальнейшем будут располагаться кнопки счетчиков.

Страница использует внешний лист стилей, содержимое которого на данный момент представлено в окне ниже:

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

В начало страницы

Практические примеры

Анализ готовой html-страницы