Лишние теги, фрагменты

Величина штрафа

За каждую обнаруженную погрешность назначается штраф 0.1.

Общая сумма штрафов ограничена числом 0.5. То есть при обнаружении более пяти ошибок, они по-прежнему фиксируются в комментариях, но не увеличивают суммарный штраф.

Буквальное повторение одной и той же ошибки (одного и того же кода) считать одной погрешностью.

Пояснение

Наличие в коде необязательных закрывающих тегов ошибкой не считается.

Появление в критериях описания данной погрешности явилось своего рода защитой от построения гипертекстовых страниц в визуальных редакторах.

Именно визуальные редакторы, генерируя автоматический код записывают в него много “мусора”.

Особенно этим грешит Word.

Легкость, с которой Word переводит свой текст в формат HTML, заставляет начинающего вебмастера задаться неизбежным вопросом: зачем изучать язык, если можно получать HTML-коды без всякой головной боли?

Что касается Word, то пример явно неудачный. Как раз здесь, головная боль обеспечена на все 100%.

При использовании Word как визуального HTML-редактора возникают следующие проблемы:

Существуют более продвинутые, по сравнению с Word, визуальные HTML-редакторы. Среди них — HomeSite и FrontPage 2000.

Но если вам нужно создать оригинальное HTML-произведение, которое не будет выглядеть как набившие оскомину интернетовские штампы, если вы хотите получить оптимальный код и добавить на страницу интерактивность за счёт собственных скриптов и таблиц стилей, знания тегов и принципов построения HTML-кода просто необходимы.

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

Наконец, свободно владея HTML, вы будете ощущать себя принятым в хорошую компанию.

HTML — это латынь гипертекстовой разработки и знать её необходимо, хотя бы для того, чтобы понимать, о чём говорят и пишут люди в этой области.

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

Конкурсы Роботландского университета — бездонный колодец поучительнейших иллюстраций ко всем мыслимым ошибкам и погрешностям начинающих веб-проектировщиков.

Ниже предлагается ведерко из этого источника. Оно наполнено кодами, сгенерированные визуальными редакторами. Примите напиток как горькое лекарство, и вы всерьёз начнете учить “матчасть” (теги и технику их использования).

Штраф для каждого примера — 0.1.

  1. Пробел, который центрируется в пустой строке.
    <p align="center">&nbsp;</p>
    

    Визуальному редактору все равно, что центрировать, можно и пробел.

  2. Ужасный абсолютный адрес
    <p align="center"><img
    src="file:///C:/WINDOWS/Рабочий%20стол/10'A'/fleayoyosb.gif"
    width="69" height="106"></p>
    

    Совет для любителей визуального редактирования: обязательно перед публикацией в Интернете перенесите свой сайт на другое место жесткого диска. Вы с удивлением обнаружите, что картинки не показываются, а ссылки не работают. Причина в абсолютных адресах, которые появляются в большом количестве у неумелых “визуалов”.

    И ещё один совет: введите на своём сайте строгую дисциплину имён файлов и каталогов, ведь на сервере, который обычно работает под UNIX, регистр символов имеет значение! Адреса, прекрасно уживающиеся с Windows, на сервере могут перестать работать. Если картинка, например, имеет имя bacground.jpg, а в ссылке на неё написано Bacground.jpg, то изображения в Интернете не увидеть.

    Самое лучшее, когда имена всех файлов и каталогов внутри сайта имеют формат 8.3: не более 8 символов в имени, не более 3 в расширении. Никаких русских букв, пробелов и спецсимволов. Все имена каталогов и файлов записаны в одном регистре (например, нижнем).

  3. Полужирный пробел с собственным лицом.

    Визуальный редактор сотворил такой код:

    <font
    color="#FF0080" size="6" face="Courier New"><strong> </strong></font>
    

    Для пробела (пустого места) определяется новый шрифт, цвет и он записывается полужирным начертанием!

  4. А — это совсем не то, что ккордики!
    <font color="#0000FF" size="5" face="Times New Roman">А</font><font
    color="#0000FF" size="5" face="Times New Roman">ккордики</font><font
    color="#0000FF" size="5" face="Times New Roman"><img
    src="Star.jpg" width="14" height="11"></font>
    

    Шрифт Times New Roman браузер использует по умолчанию. Задавать его явно не нужно и даже вредно, как, вообще, задавать шрифт атрибутом face. Цвет шрифта надо задавать один раз в теге BODY, а не в каждом слове абзаца (тем более, один и тот же). Зачем выделять букву А в отдельный font-блок, когда для неё задается то же самое, что и для продолжения ккордики? Зачем задавать размер, вид и цвет шрифта для картинки?

    Приведенный выше бред переписывается так:

    <FONT size=5>Аккордики</FONT>
    <IMG src=Star.jpg width=14 height=11>
    

    Или так, если не нужен пробел между словом и картинкой:

    <FONT size=5>Аккордики</FONT
    ><IMG src=Star.jpg width=14 height=11>
    
  5. Хорошего должно быть много!

    Вот плотно набитый код табличной строки:

    <td width="34%"><font color="#0000FF" size="4"
    face="Courier New"><strong>Местонахождение</strong></font></td>
    <td width="18%"><font color="#0000FF" size="4"
    face="Courier New"><strong>Количество MB</strong></font></td>
    <td width="17%"><font color="#0000FF" size="4"
    face="Courier New"><strong>E-Mail</strong></font></td>
    <td width="7%"><font color="#0000FF" size="4"
    face="Courier New"><strong>CGI </strong></font></td>
    <td width="23%"><font color="#0000FF" size="4"
    face="Courier New"><strong>Примечание</strong></font></td>
    

    “Руками” это записывается так:

    <FONT color=#0000FF size=4 face="Courier New">
      <STRONG>
    ...
        <TD width=34%>Местонахождение</TD>
        <TD width=18%>Количество MB</TD>
        <TD width=17%>E-Mail</TD>
        <TD width=7%>CGI</TD>
        <TD width=23%>Примечание</TD>
    ...
      </STRONG>
    </FONT>
    

    Приведённый выше код (как и исходный) является неверным — блочные элементы нельзя помещать внутрь строчных.

  6. Брр!
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br>
    
    Если вам нужен большой отступ, используйте картинку-распорку, а ещё лучше — соответствующие указания CSS.

  7. Двойное центрирование: а вдруг однократное не поможет?
    <div align="center"><center>
    ...
    </center></div>
    
  8. Визуальные узоры.
    <table>
    <ul>
    <tr><td rowspan=9 width=20></td>
    <td><li><font size=+1 face="courier new"><i><b><small><a href="biog.htm">биография</a></small></b></i></font></td></tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="friend.htm">друзья</a></small></b></i></td></tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="hobby.htm">увлечения</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="favorite.htm">любимое</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="educat.htm">образование</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="future.htm">future life</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="dream.htm">мысли по поводу...</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="map.htm">карта сайта</a></small></b></i></td</tr>
    <tr><td><font size=+1 face="courier new"><i><b><li><a href="ps.htm">P.<small>ост</small> S.<small>сриктуп</small></a> </b></i></td</tr>
    </ul>
    </table>
    
  9. Строки, длиной в километр.
    <p align=justify><strong>Образование</strong> - одна из самых моих любимых тем для разговора, потому что именно оно (образование) часто определяет человека, показывает его качества, а так же дает человеку возможность жить в благоприятных
    

Как видите проводить “уборку” после визуального редактора очень утомительно и требует больших временных затрат. Гораздо быстрее, качественнее и безопаснее писать сразу в обычном текстовом редакторе.