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


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

Добрый день.

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

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

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

По адресу http://www.w3.org/TR/html401/ ознакомиться с правилами HTML версии 4.01 может каждый, здесь же мы рассмотрим рядовые ошибки и научимся, как же их обходить.

Ошибки в коде обычно возникают по следующим причинам:

  • на странице не задан !DOCTYPE;
  • опечатка (неверно написан тег или его атрибут);
  • не указан обязательный параметр тега;
  • используется тег или его параметр, который не входит в спецификацию;
  • неверное вложение тегов.

Далее разберем эти ошибки подробнее.

Не указан !DOCTYPE

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

Опечатки

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

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

У некоторых тегов имеются параметры, которые обязательно должны присутствовать. Например, нельзя просто указать тег <style>, необходимо писать <style type="text/css">.

Параметр или значение не входит в спецификацию

В порыве завоевать рынок пользователей разработчики браузеров добавляли в них специальные теги, не входящие в спецификацию HTML, но расширяющие возможности веб-страниц. Со временем часть таких тегов была включена в спецификацию, но многие так и остались «за бортом». При этом поддержка браузером осталась, так что результат работы тега наблюдать можно, но валидацию документ не пройдет. Типичным примером подобного тега является <MARQUEE> придуманный компанией Microsoft и понимаемый всеми современными браузерами. Вот только в спецификацию этот тег не включен.

Неверное вложение тегов

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

  • блочный элемент располагается внутри встроенного, когда должно быть наоборот — встроенные элементы допустимо помещать внутрь блочных;
  • пересечение тегов, например, как это показано в следующем примере: <strong><em>текст</strong></em>. Здесь закрывающий тег </strong> помещается в контейнер <em>, тогда как он должен следовать только после тега </em>;
  • не соблюдается порядок вложения тегов. В определенных элементах вроде списка и таблицы принципиальное значение имеет порядок следования тегов. Перестановка тегов местами может привести к неверному отображению объекта и появлению ошибок при валидации документа.

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

Закрывайте все теги

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

Указывайте значения параметров тегов в кавычках

Валидатор во многих случаях пропустит значения параметров указанных без всяких кавычек, тем не менее, кавычки лучше писать всегда. Во-первых, подобный навык поможет для устранения возможных ошибок связанных с параметрами тегов. А во-вторых, поможет легче перейти на XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста), синтаксически более строгую версию HTML. В XHTML кавычки выступают обязательным элементом синтаксиса.

Коллекционируйте заготовки

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

Используйте блочные элементы

Нельзя так просто вставить текст в код документа, он должен располагаться внутри абзаца (тег <P>) или другого блочного элемента. В тех случаях, когда вы не знаете, какой блочный тег использовать, добавляйте универсальный элемент <DIV>.

Переключайте !DOCTYPE

В HTML-коде обычно применяется строгий !DOCTYPE, который наиболее полно соответствует спецификации. Однако он же и требует соблюдения всех, самых жестких правил написания кода. В тех случаях, когда это сложно или затратно по времени, переключайтесь на переходный !DOCTYPE.

Задание

1. Исправьте ошибки в каждой строке.

  1. <BODY text=#000000 bgColor=#ffffff background="bg.gif">
  2. <IMG height=2 src="1x1.gif" width=2>
  3. HR align=right width=150 noShade height="2">
  4. <body leftmargin="0" topmargin="0">
  5. <script language="JavaScript">

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Шаблон дизайна</TITLE>
<style type=text/css>
TD { FONT-SIZE: 12pt; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; }
A { TEXT-DECORATION: none; }
A:hover { TEXT-DECORATION: underline; }
A:visited { color: #ee99FF; }
H1 { FONT-WEIGHT: bold; FONT-SIZE: 32px; COLOR: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; }
H2 { FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #4ADBFF; text-align: center; }
</style>
</HEAD>
<BODY text=#ffffff vLink=#CC99FF aLink=#ff6666 link=#ffff66 bgColor=#003399>
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TR><TD heigh=60><h1>Название сайта</h1></TD>
</TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif"></TD></TR>
<TR><TD height=40><DIV align=center>| <A
href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A href="#">Ссылка 3</A> | <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> | <a href="#">Ссылка 6</a> |</DIV></TD></TR>
<TR><TD height=1 bgcolor=white><img src="images/1x1.gif"></TD></TR>
<TR><TD><h2>Заголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit au gue duis dolore te feugat nulla facilisi. </p>
</TD></TR><TR><TD height=1 bgcolor=white><img src="images/1x1.gif"></TD>
</TR><TR>
<TD height=40><DIV align=center>| <A href="#">Ссылка 1</A> | <A href="#">Ссылка 2</A> | <A
href="#">Ссылка 3</A> | <A href="#">Ссылка 4</A> | <A href="#">Ссылка 5</A> |<a href="#"> Ссылка 6</a> |</DIV>
</TD></TR><TR>
<TD height=1 bgcolor=white><img src="images/1x1.gif"></TD>
</TR><TR><TD><DIV align=center><br>Copyright Влад Мержевич</TD></TR>
</TABLE></DIV></BODY></HTML>

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

1. Какое расположение тегов является правильным?

  1. <h1><p>Текст</p></h1>
  2. <a><p>Текст</p></a>
  3. <p><h1>Текст</p></h1>
  4. <p><p>Текст</p></p>
  5. <h1><a>Текст</a></h1>

2. Какой порядок вложения тегов неверный?

  1. <ol>, <li>
  2. <tr>, <td>
  3. <ul>, <li>, <ul>, <li>
  4. <table>, <td>
  5. <dl>, <dt>, <dd>

3. В каких строках содержится ошибка?

  1. <img src="1.gif" alt="картинка" height="100" width="100">
  2. <img title="картинка" height="100" width="100" src="1.gif">
  3. <img width="100" src="1.gif" alt="картинка" title="текст">
  4. <img alt="картинка" href="1.gif" width="100" height="100">
  5. <img alt="" src="1.gif">

Рецепты CSS

Как с помощью стилей задать цвет линии, созданной с помощью тега HR?

Цвет линии, добавленной на веб-страницу через тег <HR>, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color, а браузеры Firefox и Opera — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (параметр height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у атрибута border. Собирая все параметры воедино для селектора HR, получим универсальное решение для популярных браузеров.

Пример

<!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">
HR {
 border: none; /* Убираем границу для браузера Firefox */
 color: red; /* Цвет линии для браузера Internet Explorer */
 background-color: red; /* Цвет линии для браузера Firefox и Opera */
 height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<hr>
</body>
</html>

В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).

Рис. 1

Рис. 1. Цветная горизонтальная линия в браузере Opera

Учтите, что валидатор CSS выдаст предупреждение о том, что совпадают значения параметров color и background-color, поэтому стиль в данном случае не пройдет валидацию.

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