Снова мне попался шедевр html-кодинга. Вообще-то таких много, я обратила на него внимание только в сравнении с шедевром от прошлой недели. Итак, размётка (сократить, как в прошлый раз, не выходит: слишком много всего).
<!--Доктайпа нет вовсе, корневой элемент отсутствует-->
<!--<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">-->
<title></title>
<Meta name="Description" Content="">
<Meta name="Keywords" Content="">
<script>
<!--
function vis(name,im)
{...}
-->
</script>
<style type="text/css">
<!--
.st1{color:black;display:none;}
.st2{display:none;}
-->
</style>
<!--<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />-->
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; CHARSET=Windows-1251">
<style type="text/css">
</style>
<!--<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">-->
<!--<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">-->
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; CHARSET=Windows-1251">
<!--Ну так мы определились с кодировкой, наконец?-->
<style>
p.another{font-family:Arial, Helvetica,
sans-serif;font-size:12px;color:CC0000;font-weight:bold;}
</style>
<!--<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">-->
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<!--Сейчас браузер закричит:
«Я понял, понял, windows-1251!»-->
<!--
1 ) Reference to the file containing the javascript.
This file must be located on your server.
-->
<script type="text/javascript"
src="client_files/highslide/highslide.js"></script>
<!--
2) Initialize the hs object and optionally override
the settings defined at the top of the highslide.js file.
The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'client_files/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
<!--
3) These CSS-styles are necessary for the script to work.
You may also put them in an external CSS-file.
See the webpage for documentation.
-->
<style type="text/css">
<!--Здесь идёт полтора десятка объявлений css,
которые nobody put in external css-file...-->
</style>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<!--...-->
<!--
1 ) Reference to the file containing the javascript.
This file must be located on your server.
-->
<script type="text/javascript"
src="client_files/highslide/highslide.js"></script>
<!--Стоп, это, кажется, уже было!-->
<!--
2) Initialize the hs object and optionally override
the settings defined at the top of the highslide.js file.
The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'client_files/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
<!--И это было!-->
<!--
3) These CSS-styles are necessary for the script to work.
You may also put them in an external CSS-file.
See the webpage for documentation.
-->
<style type="text/css">
<!--И это тоже-->
</style>
<html><!--А теперь вдруг вспомнили про корневой элемент-->
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<link type="text/css" rel="stylesheet" href="client_files/styles.css"/>
<style type="text/css">
a.456 {
font-size: 30px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--Большой скрипт, который что-то делает с картинками-->
</script>
</head>
<body marginheight="0" marginwidth="0"
leftmargin="0" rightmargin="0" OnLoad="startPix()">
<table cellpadding="0" cellspacing="0"
width="100%" border="0" height="100%">
<tr height="49px">
<td></td>
</tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<!--Все эти пустые строки нужны,
чтобы нарисовать 4 мелких полосочки-->
<tr height="362px" valign="top">
<td class="head">
<table cellpadding="0" cellspacing="0"
width="100%" border="0" height="362px">
<tr valign="top">
<td class="head_1" rowspan="2"></td>
<td class="head_2">...</td>
<!--Забегая вперёд: в этой ячейке забыли colspan="2"-->
</tr>
<tr height="180px" valign="middle">
<td>
<!-- Вывод меню-->
<p style="margin:0px; margin-bottom:5px;">
<img src="..." border="0" style="margin-right:10px;" />
<a href="index.php?id=1" class="menu">О компании</a>
</p>
<!-- Вывод меню-->
<p style="margin:0px; margin-bottom:5px;">
<img src="..." border="0" style="margin-right:10px;" />
<a href="index.php?id=2" class="menu">Каталог продукции</a>
</p>
<!--Меню из абзацев; конечно, дело вкуса-->
</td>
<td>
<p class="title">Контакты</p>
</td>
</tr>
</table>
</td>
</tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<tr height="1px"><td></td></tr>
<tr height="1px" bgcolor="#dae3da"><td></td></tr>
<!--Опять полосочки...-->
<tr height="100%">
<td class="center">
<br/>
<!--В наше время ещё кто-то делает отступы br?-->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr width="100%" valign="top">
<td width="200px" align="center">...</td>
</tr>
</table>
<br>
<table cellpadding="0" cellspacing="0"
border="0" width="100%" height="100%">
<tr height="100%" valign="top">
<td style="padding-right:72px">
<p class="title">О компании</p>
<h1 align="left"><strong>
Мы рады приветствовать
Вас на нашем интернет-сайте.
</strong></h1>
<!--Кто у нас заголовок, а кто абзац?
И зачем в заголовке, жирном по умолчанию, ещё и strong?-->
<div align="center">
<a target="_self" href="http://sauna-kamin.ru/index.php?id=197">
<img height="132" border="0" width="293" alt=""
src="/images/image/action-15.gif" />
</a>
</div>
<font size="3"><font size="1"><font face="Arial"><br />
<!--Если используются фонты, то уже неважно,
сколько их вложено друг в друга...-->
Компания «Сауны и камины» продает камины, печи-камины,
топки, барбекю, дымоходы из Европы,
осуществляет монтаж, устройство каминов
и дымоходов более 15 лет.<br />
<br />
...
<br />
</font></font></font>
<ul>
<li><font size="3"><font size="1"><font face="Arial">
«Nordica» дровяные камины, печи-камины, топки.
</font></font></font></li>
...
</ul>
<font size="3"><font size="1"><font face="Arial">...<br />
</font></font>
<p><font size="1"><font face="Arial">
Компания "Сауны и камины" поможет Вам:
</font></font></p>
<ul type="disc">
<li style="margin: 0cm 0cm 0pt;" class="MsoNormal">
<font size="1">
узнать что такое дровяные камины, топки, печи, дымоходы
</font>
</li>
<!--А это явно верстал Word-->
</ul>
</font><p class="title" style="margin-bottom: 10px">Новости</p>
<p style="margin:0px; font-family:Arial, Helvetica,
sans-serif; font-size:10px; color:#333333">2.9.2008</p>
...
</td>
<td width="256px" style="padding-right:30px;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<br/> <br/><br/>
<!--Дальше ничего нового-->
</table>
</td>
<td width="400px" valign="middle" align="right"
style="padding-right:55px; ">
<a href="" target="_blank" class="divier">
разработано в web-студии
</a><br/>
<a href="" target="_blank">
<img src="client_files/images/divier.jpg"
style="margin-top:3px; " border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Сравнивая этот экземпляр с примером недельной давности, можно с уверенностью ответить на вопрос, какая вёрстка лучше, блочная или табличная. Лучше та, где у мастера руки нужным концом вставлены!
Понравилось? Самое время поделиться заметкой!
Отзывы (13) на «Читая код-4»
Оставить свой отзыв »
Валялись с коллегами под стулом. ))))))
[Ответить на этот комментарий]
Впрочем, нам это еще сложнее. У нас под стульями и вовсе нет пространства, потому что у нас в качестве стульев — мячи.
Тем не менее — умудряемся.
[Ответить на этот комментарий]
А мне другое интересно. Чем сваяли этот шедевр (и аналогичные)
?
Наверняка какой-то супер-пупер-гипер-редактор поработал… Не M$-Word!
Если встречаются, и не один раз? Может, шаблон им такой «заковыристый» попался.
[Ответить на этот комментарий]
Ужас, просто тихий ужас.
[Ответить на этот комментарий]
Ммм, это точно не Word… Word добавляет свой namespace и очень неудобоваримый stylesheet. По стилю исполнения очень (с 98% вероятностью) на FrontPage похоже. Плюс использование SSI.
А ссылочку на оригинал не дадите?
[Ответить на этот комментарий]
По моему генератор называется Ctrl+C и Ctrl+V
Чел открывал сырцы сайтов которые встречал (сделанные такими же артистами с помощью то Word и Front Page), копировал нужные ему элемены и персонализивал font прямо в тегах.
[Ответить на этот комментарий]