Читая код-4

30 ноября 2008. Рубрики: Курьёзы, Рабочие заметки; автор — Юлия Панина aka Княгиня.

Снова мне попался шедевр 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>
Мы рады при&#1074;етст&#1074;о&#1074;ать
&#1042;ас на нашем интернет-сайте.
</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 />
<!--Если используются фонты, то уже неважно,
сколько их вложено друг в друга…-->
Компания &#171;Сауны и камины&#187; продает камины, печи-камины,
топки, барбекю, дымоходы из &#1045;&#1074;ропы,
осущест&#1074;ляет монтаж, устройст&#1074;о камино&#1074;
и дымоходо&#1074; более 15 лет.<br />
<br />
…
<br />
</font></font></font>
<ul>
<li><font size="3"><font size="1"><font face="Arial">
&#171;Nordica&#187; дро&#1074;яные камины, печи-камины, топки.
</font></font></font></li>
…
</ul>
<font size="3"><font size="1"><font face="Arial">…<br />
</font></font>
<p><font size="1"><font face="Arial">
Компания &quot;Сауны и камины&quot; поможет &#1042;ам:
</font></font></p>
<ul type="disc">
<li style="margin: 0cm 0cm 0pt;" class="MsoNormal">
<font size="1">
узнать что такое дро&#1074;яные камины, топки, печи, дымоходы 
</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>

Сравнивая этот экземпляр с примером недельной давности, можно с уверенностью ответить на вопрос, какая вёрстка лучше, блочная или табличная. Лучше та, где у мастера руки нужным концом вставлены!

Также рекомендую:
  1. Читая код-3
  2. Читая код-2
  3. Читая код…
13 комментариев на «Читая код-4»

  1. Аня (42 комментария)

    1 декабря, 2008 в 17:56

    Валялись с коллегами под стулом. ))))))

    Ответить на этот комментарий

    • Княгиня (660 комментариев)

      1 декабря, 2008 в 18:12

      Я, к сожалению, не умею валяться под стульями и другими предметами мебели. У меня просто лезут глаза на лоб. :)

      Ответить на этот комментарий

  2. Аня (42 комментария)

    1 декабря, 2008 в 21:14

    Впрочем, нам это еще сложнее. У нас под стульями и вовсе нет пространства, потому что у нас в качестве стульев — мячи. :) Тем не менее — умудряемся.

    Ответить на этот комментарий

    • Княгиня (660 комментариев)

      1 декабря, 2008 в 21:21

      А мне вот уже плакать хочется: у меня наклёвывется аналогичный материал на следующие выходные…

      Кстати, а почему ты не пользуешься кнопкой ответа на выбранный комментарий? У меня теперь есть такая возможность.

      Ответить на этот комментарий

      • Аня (42 комментария)

        2 декабря, 2008 в 12:41

        О! И правда. А я не заметила. :)

        Ответить на этот комментарий

        • Аня (42 комментария)

          2 декабря, 2008 в 12:42

          Ой, сколько рамочек получается…

          Ответить на этот комментарий

        • Княгиня (660 комментариев)

          2 декабря, 2008 в 13:40

          Я сделала длиннее название кнопки: раньше там было одно «Ответить». Может быть, она просто стала заметнее.

          Насчёт рамочек — ну, я просто не придумала, как оформить, решила вот так — по мотивам того, что уже было. 😀

          Ответить на этот комментарий

  3. Иван (62 комментария)

    1 декабря, 2008 в 21:33

    А мне другое интересно. Чем сваяли этот шедевр (и аналогичные) :) ?
    Наверняка какой-то супер-пупер-гипер-редактор поработал… Не M$-Word!
    Если встречаются, и не один раз? Может, шаблон им такой «заковыристый» попался.

    Ответить на этот комментарий

    • Княгиня (660 комментариев)

      1 декабря, 2008 в 21:41

      Мне кажется, что тут присутствует труд нескольких людей попеременно. В частности, есть строки, типичные для свёрстанных в Ворде, а есть и не-вордовые. Скрипт явно написан одним одним человеком, а в страницу вставлен другим. И т. д.

      А если искать подозреваемого среди редакторов, то я в первую голову назову ФронтПейдж. :)

      Ответить на этот комментарий

  4. Martin (49 комментариев)

    2 декабря, 2008 в 01:42

    Ужас, просто тихий ужас.

    Ответить на этот комментарий

  5. Vladimir (6 комментариев)

    2 декабря, 2008 в 15:59

    Ммм, это точно не Word… Word добавляет свой namespace и очень неудобоваримый stylesheet. По стилю исполнения очень (с 98% вероятностью) на FrontPage похоже. Плюс использование SSI.

    А ссылочку на оригинал не дадите?

    Ответить на этот комментарий

    • Княгиня (660 комментариев)

      2 декабря, 2008 в 16:10

      Участие Ворда я заподозрила по фрагментам, содержащим класс «MsoNormal». Но я не считаю, что Вордом сделана вся страница. Кстати, да — припоминаю, что такой или похожий класс генерил FrontPage. Но это было (для меня :) ) так давно, что я могу и ошибиться.

      Ссылки я обычно не выкладываю по соображениям этического характера. И, в конце концов, сайт могут исправить, а мне что — отслеживать состояние каждого моего «примера»?.. Но если хотите, могу дать эту ссылку в приватном порядке.

      Ответить на этот комментарий

  6. Алексей (4 комментария)

    22 декабря, 2009 в 19:19

    По моему генератор называется Ctrl+C и Ctrl+V
    Чел открывал сырцы сайтов которые встречал (сделанные такими же артистами с помощью то Word и Front Page), копировал нужные ему элемены и персонализивал font прямо в тегах.

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.