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

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

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

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

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

  Июнь 2007   →
 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 - 4


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

Добрый день.

Вначале рассмотрим ответы на проверочные вопросы, заданные в прошлом номере рассылки.
1. 9 и 12
В строке 9 кода есть открытый тег <b>, но нигде нет закрывающего тега, а в 12 строке наоборот, имеется закрытый тег </p>, но нет открывающего тега.

2. <a class="mylink" href="/images/2.html" title="Sample">Sample</a>
3. Неправильное вложение тегов.
4. У Лены
5. Применять правильное вложение тегов.
6. <tag>

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

4. Структура HTML-кода

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

Листинг 4.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>
</head>
<body>
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html.
После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O).
В диалоговом окне выбора документа укажите файл example41.html.

В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 1

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <TITLE>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе. Впрочем, подробнее об этом идет в последующих выпусках рассылки.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Замечание

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница "рассыплется", т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

<html>

Тег <HTML> определяет начало HTML-файла, внутри него хранится заголовок (<HEAD>) и тело документа (<BODY>).

<head>

Заголовок документа, как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <TITLE>.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Тег <META> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой "Кириллица (Windows)" и добавляется данная строка.

<title>Пример веб-страницы</title>

Тег <TITLE> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 2

Рис. 4.2. Вид заголовка в браузере Firefox


Замечание

Тег <TITLE> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </HEAD>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <BODY> предназначено для размещения тегов и содержательной части веб-страницы.

<h1>Заголовок</h1>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1>...<H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

<!-- Комментарий -->

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

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

<p>Первый абзац.</p>

Тег <P> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

<p>Второй абзац.</p>

Тег <P> является блочным элементом, поэтому текст всегда начинается с новой строки, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </BODY>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </HTML>.

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

1. Почему в браузере не отображается текст, расположенный между тегами <!-- и --> ?

  1. Такой текст воспринимается браузером как стилевые параметры для оформления элементов веб-страницы.
  2. Это комментарий к коду, поэтому он не выводится.
  3. Это директива, которая дает веб-серверу задачу выполнить определенную команду.
  4. Это команды для поисковых систем, а не для браузеров.
  5. Потому что таких тегов не существует и браузер их игнорирует.

2. Содержимое какого тега можно увидеть в окне браузера?

  1. <META>
  2. <LINK>
  3. <!DOCTYPE>
  4. <TITLE>
  5. <BR>

3. Какое утверждение наиболее подходит к случаю, когда тег <P> располагается в контейнере <HEAD>?

  1. Содержимое тега <P> не будет отображаться на веб-странице.
  2. Браузер выведет сообщение об ошибке.
  3. Вместо веб-страницы будет показано пустое окно.
  4. Изменится кодировка текста в документе.
  5. Код HTML не пройдет валидацию.
4. Какая функция из предложенных вариантов наиболее подходит метатегам?
  1. Задают региональные настройки текущей страны.
  2. Хранят вспомогательную информацию о типе документа.
  3. Содержат служебные параметры веб-страницы.
  4. Определяют функции носителя языка.
  5. Устанавливают настройки браузера по умолчанию.

Задание

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<body>
<h2>Опрос общественного мнения показал</h2>
<p>Диего Веласкес писал свои полотна в стиле: империализма, кубизма и империосионизма;</p>
конфуцианство возникло в: Италии, Корее и Франции;</p>
<p>богами торговли и воровства в Древней Греции были: Марс, Меркурий и Дионис;</p>
<li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</p>
<p>столица Золотой Орды - Монголия;</p>
<p>главные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;</p>
<p>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</p>
</ul>
</body>
</html>

Рецепты CSS

Почему различается явно заданная ширина слоя в разных браузерах?

По спецификации CSS общая ширина слоя складывается из следующих значений: ширина контента (параметр width), толщина границ слева и справа (border), поля (padding) и отступы (margin). Для наглядности рассмотрим следующий код (пример 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">
#layer {
width: 400px; /* Ширина слоя в пикселах */
background: #fc0; /* Цвет фона */
margin: 20px; /* Отступы вокруг слоя */
padding: 10px; /* Значения полей */
border: 2px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div id="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

В данном случае суммарная ширина слоя в пикселах равна

400 + 20 + 20 + 10 + 10 + 2 + 2 = 464

Удвоенные числа получились из-за того, что параметры margin, padding и border действуют для всех сторон элемента одновременно. Поэтому по горизонтали отступы, поля и границы добавляются сразу слева и справа.

Однако в некоторых браузерах, в частности, Internet Explorer и Opera, за общую ширину слоя берется значение параметра width. Различие подходов приводит к неодинаковому отображению одного и того же документа в разных браузерах. Впрочем, подобное различие проявляется только в том случае, если не указан <!DOCTYPE>. Так что код, приведенный в примере 1, работает корректно во всех браузерах.

Вывод следующий — всегда задавайте полный <!DOCTYPE> и учитывайте, что ширина слоя это не просто параметр width, а сумма значений ширины контента, отступов, полей и границ.

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