Отправляет 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
31
Автор
ImHoster.net

Статистика

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

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


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

Добрый день.

Сегодня завершаем вторую часть рассылки, посвященную валидации HTML-документов. Если вы не успели прочитать предыдущие выпуски, то можете сделать это по следующим ссылкам.

1. Валидация документов

2. Проверка данных на валидность

3. Написание корректного кода

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

Также доступен для скачивания самоучитель HTML, охватывающий первую часть нашей рассылки. Формат файла CHM, объем 519 кБ.

Скачать самоучитель

Для тех, кто перерос HTML, доступен для скачивания справочник по CSS в формате CHM. Объем файла 715 кБ.

Скачать справочник по CSS

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

<a> is probably intended as </a>

В закрывающем теге <A> отсутствует слэш.

Правильно: <a href="http://htmlbook.ru">Ссылка на сайт</a>

Неверно: <a href="http://htmlbook.ru">Ссылка на сайт<a>

Решение

Добавьте слэш к закрывающему тегу.

... shouldn't be nested

Некоторые теги вроде <FORM> не могут содержать сами себя. Это сообщение также возникает из-за предыдущей ошибки.

Правильно: <form action="gb.php" name="guestbook"></form>
<form action="gb2.php" name="guestbook2"></form>

Неверно: <form action="gb.php" name="guestbook">
<form action="gb2.php" name="guestbook2"></form>
</form>

Решение

Удалите вложенные теги или исправьте предыдущую ошибку.

Text found after closing </body>-tag

Теги или текст добавляется после закрывающего тега </body>.

Правильно:
<html>
 <head><title>Заголовок</title></head>
 <body><p>Основной текст</p></body>
</html>

Неверно:
<html>
 <head><title>Заголовок</title></head>
 <body><p>Основной текст</p></body>
 <b>Привет!</b>
</html>

Решение

Удалите текст после тега </body> или перенесите этот тег в конец текста.

Adjacent hyphens within comment

Комментарии в коде HTML определяются конструкцией вида <!-- комментарий -->. Если в тексте комментария подряд идет два и более дефиса, возникает ошибка.

Правильно: <!-- Комментарий - заголовок -->

Неверно: <!--- комментарий --->

Неверно: <!-- Комментарий -- тело документа -->

Решение

Удалите лишние дефисы.

SYSTEM, PUBLIC, W3C, DTD, EN must be upper case

Элемент DOCTYPE указан неверно, в частности следующие атрибуты необходимо писать в верхнем регистре: SYSTEM, PUBLIC, W3C, DTD, EN.

Правильно: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Неверно: <!doctype html public "-//w3c//dtd html 4.01 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd">

Решение

Пишите DOCTYPE корректно.

Warning: missing <!DOCTYPE> declaration

Не указан элемент DOCTYPE.

Правильно:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<p>Основной текст</p>
</body>
</html>

Неверно:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Решение

Поместите элемент DOCTYPE в самую первую строку кода документа.

Too much <...>-elements

Повторяется тег, который в коде должен быть только один. К таким тегам относится <HTML>, <HEAD>, <TITLE> и <BODY>.

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

Неверно:
<head>
<title>Заголовок</title>
<title>Название статьи</title>
</head>

Решение

Удалите повторяющийся тег.

<...> inserting "..." attribute

Не указан обязательный параметр для данного тега.

Правильно: <style type="text/css">

Неверно: <style>

Решение

Проверьте параметры тега и добавьте недостающие атрибуты.

... attribute ... lacks value

Параметр тега не содержит обязательное значение или оно написано с синтаксической ошибкой.

Правильно: <a href="link.html">Ссылка</a>

Неверно: <a href>Ссылка</a>

Решение

Проверьте параметры тега и добавьте недостающие значения.

... attribute "..." has invalid value "..."

Параметр содержит некорректное значение. Ошибка проявляется в тех случаях, когда в значении вместо текста пишется число и наоборот. Так, параметр id и name должен начинаться с символа ([A-Za-z]) и может содержать цифры ([0-9]), дефис (-), подчеркивание (_), двоеточие (:) и точку (.). Значение ширины и высоты в параметрах тегов не должно содержать ничего, кроме цифр ([0-9]).

Правильно: <div id="layer1">Слой 1</div>

Правильно: <img src="images/pic.gif" width="200" height="120">

Неверно: <div id="2layer">Слой 2</div>

Неверно: <img src="images/pic.gif" width="200px" height="120px">

Решение

Проверьте параметр тега и измените его значение.

<...> missing > for end of tag

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

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

Правильно: <p>Для случая 0&lt;p рассмотрим следующий пример.</p>

Неверно: <p Пример текста</p>

Неверно: <p>Для случая 0<p рассмотрим следующий пример.</p>

Решение

Вставьте отсутствующую закрывающую скобку.
Замените < на &lt;.

<...> proprietary attribute "..."

Тег содержит параметр, специфичный только для браузера Nescape или Internet Explorer и не входящий в спецификацию. Примером такого параметра является атрибут height тега <TABLE>.

Список всех атрибутов, входящих в спецификацию HTML приведен по адресу: http://www.w3.org/TR/html4/index/attributes.html

Правильно: <table style=""height:" 100%">

Неверно: <table height="100%">

Решение

Список наиболее характерных параметров тегов приведен в табл. 1.

Табл. 1. Замена нестандартных параметров тегов
Тег Устаревший параметр Стандартный параметр
<body> marginwidth=0, marginheight=0, leftmargin=0, topmargin=0 style=""margin:" 0"
<table> height=100% style=""height:" 100%"
<table> nowrap style=""white-space:" nowrap" или
<td nowrap>
<td> background="abc.gif" style=""background-image:url(abc.gif)""

... proprietary attribute value "..."

Значение параметра не входит в спецификацию HTML и является специфичным для браузера Nescape или Internet Explorer. Например, значение align="absmiddle" тега <IMG> недопустимо.

Правильно: <p><img src="hello.gif" alt="Привет" align="middle"></p>

Правильно: <p><img src="hello.gif" alt="Привет" style=""vertical-align:" middle"></p>

Неверно: <p><img src="hello.gif" alt="Привет" align="absmiddle"></p>

Решение

Используйте стандартные значения атрибутов тегов или используйте стилевой эквивалент.

... dropping value "..." for repeated attribute "..."

Параметр применяется в теге больше одного раза.

Правильно: <img src="image.jpg">

Неверно: <img src="image.jpg" src="image.jpg">

Решение

Удалите повторяющийся параметр.

... unexpected or duplicate quote mark

Отсутствует открывающая или закрывающая кавычка в параметре тега.

Правильно: <img src="image.jpg">

Неверно: <img src=image.jpg">

Решение

Добавьте парную кавычку к значению параметра.

... attribute with missing trailing quote mark

Тег содержит параметр, в котором задано неверное количество кавычек.

Правильно: <p id="my_id">

Неверно: <p id="my_id"">

Решение

Добавьте или удалите одну из кавычек.

... id and name attribute value mismatch

Ошибка возникает, когда значения параметров id и name не совпадают между собой, что приводит к конфликту при обращении к свойствам элемента через скрипты.

Правильно: <a name="elm" id="elm">

Правильно: <a id="elm">

Неверно: <a name="abcd" id="db1">

Решение

Удалите один из параметров или сделайте значения атрибутов name и id одинаковыми.

Notice: replacing <...> by <...>

Ошибка возникает в следующих случаях:

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

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

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

Неверно: <p>abc<br><table>...</table></p>

Решение

Измените порядок тегов или удалите один из открывающих или закрывающих тегов.

... anchor "..." already defined

Значения параметра name у различных тегов совпадает между собой. Значение name должно быть уникальным.

Правильно: <form name="my_form1" action="test1.php"></form>
<form name="my_form2" action="test2.php"></form>

Неверно: <form name="my_form" action="test1.php"></form>
<form name="my_form" action="test2.php"></form>

Решение

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

<...> is probably intended as </...>

Тег повторяется дважды в коде HTML, тогда как подобный тег содержать сам себя.

Правильно: <em>Привет, мир!</em>

Неверно: <em>Привет<em>, мир!</em></em>

Решение

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

<...> lacks "..." attribute

Требуется обязательный параметр тега, который, тем не менее, отсутствует.

Правильно: <form action="my_action.php">

Неверно: <form>

Решение

Добавьте недостающий атрибут к тегу.

Рецепты CSS

Как добавить два фоновых изображения к одному элементу?

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

Стили напрямую не позволяют добавить два фона к одному элементу, поэтому приходится идти на хитрость и вкладывать один элемент внутрь другого. При этом для каждого вложенного элемента создается своя фоновая картинка, за счет наложения блоков и рождается эффект, что элемент один, и он содержит несколько фоновых изображений. Здесь важно не добавлять отступы к внешним элементам, иначе эффект будет потерян.

Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показано фоновое изображение, которое будет применяться для первого элемента, оно будет формировать границу слева, а на рис. 2 фон для вложенного элемента, который добавляет границу справа.

Рис. 1

Рис. 1. Фоновая картинка для границы слева

Рис. 2

Рис. 2. Фоновая картинка для границы справа

В качестве блочного элемента, к которому добавляется фон, обычно используется тег <DIV> в силу его удобства и универсальности. Фоновое изображение устанавливается стилевым параметром background, как показано в примере 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">
BODY {
background: #f2f0e3; /* Цвет фона веб-страницы */
}
DIV.block {
background:
 #fff /* Цвет фона блока */
 url(bg_left.gif) /* Путь к фону с границей слева */
 repeat-y; /* Повторение по вертикали */
width: 400px; /* Ширина блока */
}
DIV.block DIV {
background:
 url(bg_right.gif) /* Путь к фону с границе справа */
 repeat-y /* Повторение по вертикали */
 100% 0; /* Расположение фона по правому краю блока */
 padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
<div>
За 11 месяцев вахты радисты провели 8642 сеансов связи общим объемом 300625 групп. Это только метео и аэротелеграммы. Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</div>
</body>
</html>

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

Рис. 3

Рис. 3. Вид блока с двумя фоновыми картинками

В данном примере, чтобы фон добавлялся только к нужному тегу <DIV>, а не ко всем подобным элементам на странице, используется класс с именем block, к которому и применяются все стилевые атрибуты. Чтобы задать стиль только для вложенного <DIV> в примере указывается контекстный селектор (конструкция DIV.block DIV), он определяет стиль только для тега <DIV>, расположенного внутри <DIV class="block">.

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