Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 25


Самоучитель по HTML и CSS

Добрый день.

Как обычно, начнем с ответов на вопросы предыдущего выпуска.

1. <h1><a>Текст</a></h1>
2. <table>, <td>
3. <img title="картинка" height="100" width="100" src="1.gif">
<img alt="" src="1.gif">

Напоминаю, что те, кто пропустил первую часть рассылки, посвященную HTML, могут скачать самоучитель в формате CHM по адресу http://htmlbook.ru/download/?id=4, объем файла 519 кБ. Также в первой части тема графики была затронута весьма кратко из-за своего объема, поэтому рекомендую посетить сайт webimg.ru, который сейчас активно заполняется новыми материалами, и почитать о графике для сайтов подробнее.

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

4. Исправление ошибок

Большинство ошибок, возникающих при валидации кода можно свести к набору типовых вариантов, зная которые легко понять, на что «намекает» валидатор. В качестве образца возьмем расширение HTML Tidy для браузера Firefox, предназначенное для проверки кода и рассмотрим список ошибок и замечаний по коду.

Посмотреть все возможные сообщения валидатора можно по адресу http://www.htmlpedia.org/wiki/HTML_Tidy, далее приведены основные ошибки с их описанием и решением. В качестве многоточия подразумевается элемент, к которому возникает претензия.

Notice: entity "..." doesn't end in ";"

Это замечание возникает при использовании спецсимволов вроде &lt; при отсутствии на конце точки с запятой.

Правильно: &nbsp;

Неверно: &nbsp

Решение

Добавьте в конце спецсимвола точку с запятой.

Notice: numeric character reference "..." doesn't end in ';'

Возникает при использовании числовых спецсимволов вроде &#8212; когда в конце забыли добавить точку с запятой.

Правильно: &#8482;

Неверно: &#8482

Решение

Добавьте в конце спецсимвола точку с запятой.

unescaped & or unknown entity "&..."

Символ амперсанда (&) часто применяется в адресах ссылок (аргумент href тега <A>), поскольку он разделяет несколько параметров. Однако амперсанд зарезервирован для спецсимволов вроде &nbsp; поэтому в ссылках необходимо указывать &amp; вместо &.

Правильно: <a href="http://www.htmlbook.ru/content/?id=30&amp;text=1">Ссылка</a>

Неверно: <a href="http://www.htmlbook.ru/content/?id=30&text=1">Ссылка</a>

Решение

Замение & на &amp;

missing </...>

Отсутствует обязательный закрывающий тег.

Правильно: <head><title>Заголовок</title></head>

Неверно: <head><title>Заголовок</head>

Решение

Добавьте закрывающий тег.

missing </aaa> before <bbb>

Ошибка возникает при нарушении порядка тегов, когда блочный тег располагается внутри встроенного. В данном случае блочный тег <bbb> находится внутри встроенного тега <aaa>.

Правильно: <p><span>Текст</span></p>

Неверно: <span><p>Текст</p></span>

Решение

Поменяйте расположение тегов — перенесите встроенный тег внутрь блочного.

discarding unexpected <...>

Обнаружен открывающий или закрывающий тег, у которого нет пары. Подобная ошибка возникает в двух случаях: есть открывающий тег, но нет закрывающего; имеется закрывающий тег, которому не соответствует открывающий.

Правильно: <div><div>Текст</div></div>

Неверно: <div>Текст</div></div>

Неверно: <div><div>Текст</div>

Решение

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

Notice: nested emphasis ...

Контейнер содержит аналогичный тег физического форматирования, который не должен повторяться.

Правильно: <p><b>Текст</b></p>

Неверно: <p><b><b>Текст</b></b></p>

Решение

Удалите один из тегов.

replacing unexpected ... by </...>

Закрывающий тег не соответствует открывающему тегу.

Правильно: <p><b>Текст</b></p>

Неверно: <p><b>Текст</span></p>

Решение

Замените открывающий или закрывающий тег на парный.

... isn't allowed in <...> elements

Обнаружены теги, которые запрещено размещать внутри указанных элементов.

Правильно: <head><title>Заголовок</title></head>

Неверно: <head><body>Текст</body></head>

Решение

Переместите HTML-элемент в правильный раздел.

missing <...>

Нет обязательного тега в структуре элементов. Ошибка, к примеру, может возникнуть при формировании таблицы, когда пропущен тег <TR> и сразу же после <TABLE> следует <TD>.

Правильно: <ol><li>Список</li></ol>

Неверно: <ol>Список</ol>

Решение

Проверить правильность вложения тегов в текущем элементе и наличие обязательных элементов.

Notice: inserting implicit <...>

Сообщение возникает из-за предыдущей ошибки на странице.

Решение

Исправьте предыдущие ошибки.

Insert missing <title> element

В коде не вставлен тег <TITLE>.

Правильно: <head><title>Заголовок</title></head>

Неверно: <head></head>

Решение

Добавьте контейнер <TITLE>.

Multiple <frameset> elements

Тег <FRAMESET> используется более одного раза без вложения. Допускается вставлять несколько элементов <FRAMESET>, но вложенных один в другой.

Правильно: <frameset ...><frame ...>
<frameset ...><frame ...></frameset>
</frameset>

Неверно: <frameset ...><frame ...></frameset>
<frameset ...><frame ...></frameset>

Решение

Используйте вложенные теги <FRAMESET>.

<...> is not approved by W3C

Указанный тег не входит в спецификацию HTML.

Правильно: <span style=""white-space:" nowrap;">текст без переносов</span>

Неверно: <nobr>текст без переносов</nobr>

Решение

Удалите тег или замените его подходящим эквивалентом.

Error: <...> is not recognized!

Тег не распознан и не входит в спецификацию HTML.

Правильно: <p>Текст</p>

Неверно: <p><adres>Текст</adres></p>

Решение

Удалите неизвестный тег.

Trimming Empty Tag

Контейнер пустой или содержит только пробел.

Правильно: <p>Текст</p>

Правильно: <p>&nbsp;</p>

Неверно: <p></p>

Решение

Удалите тег или добавьте внутрь контейнера текст.

Рецепты CSS

Как растянуть фон на всю ширину окна браузера?

В отличие от обычной картинки, добавляемой через тег <IMG>, фоновый рисунок напрямую никак не получится растянуть. Но можно пойти на хитрость и расположить картинку в качестве нижнего слоя, а остальное содержимое веб-страницы поместить поверх него.

Для этого создаем с помощью тега <DIV> два слоя, назовем их layer1 и layer2 и определим их порядок через стилевой атрибут z-index. Чем больше значение этого параметра, тем выше располагается текущий слой относительно других слоев. Также необходимо задать абсолютное позиционирование для каждого слоя (пример 1).

Пример 1. Растягиваемый фон

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Растягиваемый фон</title>
<style type="text/css">
#layer1 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}
#layer2 {
position: absolute; /* Абсолютное позиционирование */
z-index: 2; /* Порядок слоев */
}
</style>
</head>
<body>
<div id="layer1">
<img src="help.gif" width="100%" alt="">
</div>
<div id="layer2">
Основное содержимое веб-страницы
</div>
</body>
</html>

Для слоя layer1 требуется установить ширину и высоту равную 100% и координаты левого верхнего угла задать нулевыми. Тогда не возникнет горизонтальной полосы прокрутки. Обратите внимание, что в самом теге <IMG> указана только ширина изображение без высоты. Это сделано для того, чтобы сохранить пропорции картинки, в противном случае в браузере Opera возникнут искажения.

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнет расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2

Рис. 2. Вид фона при увеличенном размере окна

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное