Отправляет 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 - 27


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

Добрый день.

Завершаем вторую часть нашей рассылки, посвященной валидации HTML-документов. Кто присоединился к нашей рассылке поздно, рекомендую скачать самоучитель, в котором дается подробное описание HTML и валидации. Как и полагается с большим количеством примеров, заданий и вопросов для проверки. Ответы тоже имеются. Формат файла CHM, объем 651 кБ.

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

Как и положено в самоучителе, вначале вопросы для закрепления материала о валидации документов.

Вопросы для проверки

1. Какая ошибка содержится в следующей строке кода?

<a HREF="journ.html"><font color=#ffffff><b>Неофициальный сайт журфака</b></a>

  1. У тега <A> нет обязательного параметра alt.
  2. Тег <B> нельзя располагать внутри ссылок.
  3. Параметр href набран большими буквами.
  4. Нет закрывающего тега <FONT>.
  5. Значение параметра color не в кавычках.

2. Какая ошибка содержится в следующей строке?

<tr><td height="39"><li></td><td><a class="tk12" href="plast.html" title="Пластиковые окна и жалюзи"><strong>Пластиковые окна и жалюзи</strong></a><td></tr>

  1. Параметр title запрещен для тега <A>.
  2. Внутри контейнера <TD> неверно расположен тег <LI>.
  3. Неверно указана высота ячейки, вместо height="39" следует писать height="39px".
  4. Имена классов не должны содержать цифры, вместо class="tk12" надо указать class="tk".
  5. Параметр height запрещен для тега <TD>.

3. В коде ниже валидатор W3C выдает следующую ошибку . Как ее исправить (два варианта)?

<!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>test</title>
</head>
<body>
<form name ="form1" target="_top" action="index.php">
<p>...</p>
</form>
</body>
</html>

  1. Добавить параметр target к тегу <P>.
  2. Добавить параметр target к тегу <BODY>.
  3. Заменить <!DOCTYPE> на переходный.
  4. Изменить значение _top параметра target на _self.
  5. Убрать параметр target в теге <FORM>.

4. В коде ниже валидатор W3C выдает замечание . Какая строка является корректным заменителем?

<form name ="form1" method="post" action="/index.php?referer1=user&referer2=logo">

  1. <form name ="form1" method="get" action="/index.php?referer1=user&referer2=logo">
  2. <form name ="form1" method="post" action="/index.php?referer1=user?referer2=logo">
  3. <form name ="form1" method="post" action="/index.php?referer1=user & referer2=logo">
  4. <form name ="form1" method="post" action="/index.php?referer1=user&amp;referer2=logo">
  5. <form name ="form1" method="post" action="/index.php?referer2=logo&referer1=user">

5. Какой параметр в данной строке лишний при использовании переходного <!DOCTYPE> (два варианта)?

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#0033CC">

  1. bgcolor
  2. text
  3. leftmargin и topmargin
  4. marginwidth и marginheight
  5. link

6. Во фрагменте кода валидатор при строгом <!DOCTYPE> выдает три ошибки. Какие действия необходимы, чтобы их устранить (два варианта)?

<body><img src="images/tools.gif" width="77" height="65"></body>

  1. Добавить параметр alt к тегу <IMG>.
  2. Добавить параметр title к тегу <IMG>.
  3. Изменить width="77" height="65" на width="77px" height="65px".
  4. Добавить к тегу <BODY> параметр bgproperties.
  5. Поместить тег <IMG> внутрь контейнера <P>.

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

 

1. Что такое XHTML

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

Определенным ограничением HTML является и то, что он относится к формальным языкам, в том смысле, что теги и их иерархическая структура жестко описаны в спецификации. Поэтому популярность набирает XML, с помощью которого можно создавать собственные теги и формировать их структуру. Разница между HTML и XML состоит не только в тегах, но и правилах написания кода. Браузер при работе с HTML «закрывает глаза» на разные мелкие огрехи и недочеты в структуре или тому, что не корректно указан параметр. С XML такие фокусы не проходят, поэтому браузер выдаст ошибку о том, что документ неверно сформирован.

Чтобы научить разработчиков «правильному» мышлению, изменить их стиль написания кода, а также сократить разрыв между HTML и XML, и был разработан XHTML, как промежуточный этап между ними.

XHTML (EXtensible HyperText Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще,W3C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время.

Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному» коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов, наладониках и т.д.

На деле все обстоит не так прозаично. Разработчики браузеров не могут позволить себе, чтобы их детище работало только с «правильным» кодом. А все из-за того, что большая часть сайтов в мире просто не будет отображаться в таком браузере. Виноваты в таком положении вещей разработчики браузеров и пользователи. Первые не обеспечили должную поддержку спецификации в своих браузерах, а вторые не потрудились ей следовать.

По этим причинам XHTML 1.x является всего лишь подобием HTML, но с более строгим синтаксисом, а не тем перспективным языком разметки, на который обязательно стоит переходить из-за его уникальных возможностей.

Рецепты CSS

Как создать вложенные списки с автоматической нумерацией пунктов и подпунктов?

Списки активно используются для автоматической нумерации блоков текста. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в HTML, можно возложить на стили, применяя для этого параметры counter-reset, counter-increment и content, как показано в примере.

Пример 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">
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
 counter-increment: list1; /* Увеличиваем значение счетчика */
 content: counter(list1) ". "; /* Выводим значение */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
 counter-increment: list2; /* Увеличиваем значение счетчика */
 content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
</style>
</head>
<body>
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>

Атрибут counter-reset устанавливает идентификатор, в котором хранится счетчик, выводимый при помощи content с псевдоэлементом before. Стилевой элемент counter-increment предназначен для увеличения значения счетчика приращений, который задается параметром counter-reset.

Приведенный пример не работает в браузере Internet Explorer, поскольку он не поддерживает ни одно из приведенных стилевых свойств.

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