Читая код-4. Блог Княгини

Ноябрь 30, 2008

Читая код-4

написано в рубрике: Курьёзы, Профессиональные заметки; 23:42

Снова мне попался шедевр 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>

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

13 комментариев »

Аня — Декабрь 1, 2008 || 17:56

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

[Ответить на этот комментарий]
Княгиня — Декабрь 1st, 2008 || 18:12
Я, к сожалению, не умею валяться под стульями и другими предметами мебели. У меня просто лезут глаза на лоб.

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

Аня — Декабрь 1, 2008 || 21:14

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

[Ответить на этот комментарий]
Княгиня — Декабрь 1st, 2008 || 21:21
А мне вот уже плакать хочется: у меня наклёвывется аналогичный материал на следующие выходные…

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

[Ответить на этот комментарий]
Аня — Декабрь 2nd, 2008 || 12:41
О! И правда. А я не заметила.

[Ответить на этот комментарий]
Аня — Декабрь 2nd, 2008 || 12:42
Ой, сколько рамочек получается…

[Ответить на этот комментарий]
Княгиня — Декабрь 2nd, 2008 || 13:40
Я сделала длиннее название кнопки: раньше там было одно «Ответить». Может быть, она просто стала заметнее.

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

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

Иван — Декабрь 1, 2008 || 21:33

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

[Ответить на этот комментарий]
Княгиня — Декабрь 1st, 2008 || 21:41
Мне кажется, что тут присутствует труд нескольких людей попеременно. В частности, есть строки, типичные для свёрстанных в Ворде, а есть и не-вордовые. Скрипт явно написан одним одним человеком, а в страницу вставлен другим. И т. д.

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

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

Martin — Декабрь 2, 2008 || 01:42

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

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

Vladimir — Декабрь 2, 2008 || 15:59

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

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

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

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

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

Алексей — Декабрь 22, 2009 || 19:19

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

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

Комментировать

Вы не авторизованы. Вы можете:

Авторизоваться

Зарегистририроваться

Написать без авторизации (премодерируется)

Ваше имя Ваш e-mail (не публикуется) Ваш сайт
Ваш комментарий

Оповещать о новых комментариях по почте

Отменить написание комментария

Блог Княгини

Медвежонок

Читая код-4

13 комментариев »

Комментировать