@ Карта сайта News Автора!

Bog BOS: sitelife:  безопасный HTML

Последнее изменение файла: 2007.08.08
Скопировано с www.bog.pp.ru: 2024.03.28

Bog BOS: sitelife: безопасный HTML

Какой стандарт выбрать?

Стандарт HTML (HyperText Markup Language) разрабатывается и принимается Консорциумом WWW. Последняя версия 4.01 принята 24 декабря 1999 (около 400 страниц). К сожалению, даже новейшие версии браузеров не поддерживают данный стандарт в полном объеме (причем разработчики даже не сообщают какие элементы поддерживаются, а какие - нет!). К тому же многие люди пользуются старыми (иногда очень старыми версиями браузеров). Браузеры обрабатывают теги, не вошедшие в стандарт или исключенные из него. Так что новые возможности (CSS) будут недоступны владельцам старых браузеров, а старые (FONT) будут несовместимы с новыми "правильными" реализациями. Так какими же возможностями HTML можно пользоваться в реальной жизни (ограничиться HTML 2.0 не предлагать :)? Можно ориентироваться на статистику использования браузеров. Для себя я решил, что надо ориентироваться на MS IE 4+ и Netscape 4+ (т.е. HTML 4.0 и CSS1). Полезно также посмотреть как выглядит сделанная страница в Opera и Lynx/Links (примерно также ваша страница будет "видна" поисковому роботу).

HTML 4 предлагает варианты:

К сожалению, Netscape 4 не полностью поддерживает CSS1 (в частности, шрифты), поэтому приходится пользоваться transitional версией HTML 4.

Браузеры (особенно MS IE) снисходительно относятся к синтаксическим ошибкам, но отображение документа может не соответствовать Вашим ожиданиям :).

Шаблоны

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

   <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0 Transitional//EN" 
                      "http://www.w3.org/tr/REC-html40/loose.dtd">
   <html lang="ru">
   <head>
   <title>заголовок страницы</title>
   <link rel=stylesheet href="таблица_стилей.css" type="text/css">
   <meta name="Author" content="Sergey E Bogomolov">
   <meta name="keywords" content="ключевые, слова, через, запятую">
   <meta http-equiv="Content-Type" content="text/html">
   </head>
   <body  alink="#ff0000" bgcolor="#ffffff" link="#0000ff" text="#000000" vlink="#0000aa">
   <!--#include file="navbar.html" -->
   <h1>заголовок страницы</h1>

   <table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tr>
       <td bgcolor="#0086b2" width="100%"><p class="h2">заголовок раздела</p></td>
     </tr>
   </table>

   <p class="abzac">текст раздела</p>
   <!--#include file="navbar.html" -->
   <!--#include file="footer.html" -->

Я использую механизм стилей (CSS) и включения файлов на сервере (SSI) для сокращения кодирования. Файл footer.html содержит информацию об авторском праве и "закрывающие скобки" HTML:

   </body>
   </html>

Синтаксис

HTML является приложением SGML, т.е. синтаксис HTML определяется DTD. В первой строке должна быть ссылка на соответствующий DTD (см. строку DOCTYPE выше). Или

   <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0 //EN" 
                      "http://www.w3.org/tr/REC-html40/strict.dtd">

или

   <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0 Frameset//EN" 
                      "http://www.w3.org/tr/REC-html40/frameset.dtd">

Остальной текст состоит из иерархически вложенных элементов. Элемент состоит из открывающего тэга, содержимого и закрывающего тэга. Открывающий тэг состоит из имени тэга в угловых скобках. Закрывающий тэг перед именем содержит слэш (/). Содержимое элемента может включать текст и другие элементы. Тэги можно рассматривать как поименованные скобки. Открывающий тэг может содержать список имен атрибутов и (после знака равенства) значений через пробел. Некоторые элементы не имеют закрывающего тэга. Имена тэгов и атрибутов задаются DTD HTML. Головным элементом HTML является элемент с именем html:

   <html lang="ru"><head></head><body></body></html>

Имена тэгов и атрибутов могут записываться как прописными, так и строчными буквами, но для упрощения перехода к XML рекомендуется использовать строчные. По той же причине рекомендуется заключать значения атрибутов в кавычки и вставлять закрывающие тэги даже если это необязательно (<p> или <li>).

Дополнительные пробелы и пустые строки в содержимом элемента не влияют на отображение документа (интерпретатор HTML заменяет несколько подряд идущих пробельных символов и переводов строки на один пробел).

Комментарии оформляются следующим образом (текст комментария не может содержать два тире подряд, дескрипторы внутри комментария не обрабатываются):

   <!-- текст комментария -->

Общеупотребительные атрибуты

Следующие атрибуты можно использовать почти в любом элементе:

Некоторые специальные символы (entities)

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

изображениеимякодописание
"&quot;&#34;кавычка
&&amp;&#38;амперсенд
<&lt;&#60;меньше
>&gt;&#62;больше
&#133;троеточие
&#134;крестик
&#135;двойной крестик
ˆ&#136;циркумфлекс
&#137;промилле
&#145;левый апостроф
&#146;правый апостроф
&#147;левая кавычка
&#148;правая кавычка
&#149;жирная точка
&#150;короткое тире
&#151;длинное тире
˜&#152;тильда
&#153;товарный знак
 &nbsp;&#160;неразрывный пробел
¡&iexcl;&#161;перевернутый !
¢&cent;&#162;цент
£&pound;&#163;фунт
¤&curren;&#164;валюта
¥&yen;&#165;иена
¦&brvbar;&#166;верт.черта
изображениеимякодописание
§&sect;&#167;параграф
¨&uml;&#168;умляут
©&copy;&#169;copyright
«&laquo;&#171;левая угловая кавычка
¬&not;&#172;не
­&shy;&#173;программный перенос
®&reg;&#174;товарный знак
¯&macr;&#175;долгота гласного
°&deg;&#176;градус
±&plusmn;&#177;плюс/минус
²&sup2;&#178;степень 2
³&sup3;&#179;степень 3
´&acute;&#180;острое ударение
µ&micro;&#181;микро
&para;&#182;абзац
·&middot;&#183;средняя точка
¸&cedil;&#184;cedil
¹&sup1;&#185;степень 1
»&raquo;&#187;правая угловая кавычка
¼&frac14;&#188;1/4
½&frac12;&#189;1/2
¾&frac34;&#190;3/4
¿&iquest;&#191;перевернутый ?
÷&divide;&#247;знак деления
 

Полный список

Шапка документа

Документ состоит из ссылки на DTD и элемента html. Элемент html содержит элементы head и body.

Атрибуты элемента html:

Элемент head описывает характеристики документа и может содержать элементы:

Элемент body включает содержательную часть документа и может иметь атрибуты:

Форматирование текста

Списки

Списки могут быть вложенными на любую глубину и содержать другие блочные элементы:

Ссылки

Что такое URL, URI, схема, относительный URI, базовый URI, фрагмент.

Типы ссылок:

Часто употребляемые схемы URI:

Размещение ссылки: <a href="адрес ресурса">поясняющий текст или изображение</a>

Определение идентификатора фрагмента (см. также атрибут id): <a name="имя">...</a>

Задание базового URI:

<head>
...
<base href="базовый URI">
...
</head>

Картинки

Таблицы

Фреймы

Формы

Ссылки

@ Карта сайта News Автора!

Bog BOS: sitelife:  безопасный HTML



Copyright © 1996-2024 Sergey E. Bogomolov; www.bog.pp.ru