Rules html общие правила документальный з2. Правила языка HTML. Указывайте селекторы и правила с новой строки

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Attribute of What does do? Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead.

The Rules Attribute has been Deprecated This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style tables.

The RULES Attribute

RULES , an HTML 4.0 attribute, indicates if there should be internal borders in the table. We"ll go over each of the values of RULES and demonstrate how they are used. RULES and FRAME have an annoying way of changing each other"s defaults. To simplify your life, here"s a rule of thumb: if you use RULES also use FRAME and BORDER . It"s easier to avoid getting confused.

The NONE Value for the RULES Attribute

RULES=NONE means that there are no inside borders. RULES=NONE is the default if you don"t use BORDER or set it to zero, but otherwise must be explicitly stated to have no inside borders. Note that currently Netscape does not recognize RULES .

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The ALL Value for the RULES Attribute

RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID so that there are outer borders but no inner borders.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The COLS Value for the RULES Attribute

COLS indicates that there should be borders between the columns but not between rows.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The ROWS Value for the RULES Attribute

RULES=ROWS indicates that there should be borders between rows but not between columns.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The GROUPS Value for the RULES Attribute

RULES=GROUPS allows you to put borders between groups of table cells. There are two ways cells can be grouped: by row and by column. Let"s go over each of them. Note that currently Netscape does not recognize RULES .

Grouping By Row

To group by row use the , , tags. indicates the header rows of the table, indicates the main body of the table, and indicates the bottom rows. So, for example, this code creates a table with three groups. Borders appear just between groups:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Here"s how that table renders:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Grouping By Column

To group by column use the tag and its SPAN attribute. takes a little getting used to because it doesn"t actually go around any table cells. It goes at the top of the table code where it sets rules about the table columns including which are grouped together. to indicates how many columns are in each group. If you leave SPAN out then it is assumed the group has just one column. So, for example, the following code says that the first column is in a group by itself and the three after that are together in a group. Notice that requires an end tag. Borders will go only between the groups.

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

Используйте

Элемент располагается на первой строке любой HTML-страницы. Он определяет версию языка разметки, который используется на странице. На данный момент рекомендуется использовать doctype вида - он является универсальным для любой версии языка.

Используйте правильную структуру документа

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

Неправильно

Hello world!

hello world!

Правильно

Hello world!

hello world!

Определяйте техническую информацию страницы правильно

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

Неправильно

Hello world!

Правильно

Hello world!

Следуйте стандартам разметки

Используйте элементы в соответствии с их семантикой

Проверяйте html-код на валидность

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

Изображения должны всегда включать атрибут alt. Браузер полагается на данный атрибут, чтобы обеспечить контекст для изображения. Атрибут alt должен содержать текст, который будет отображаться в том случае, если картинка не загрузилась.

Неправильно

Правильно

Не используйте стили в HTML разметке

Это создает страницы, которые загружаются слишком долго и трудно поддерживаются. Прописывайте все стили в отдельном CSS-документе. Старайтесь использовать тег и атрибут style по минимуму.

Пишите комментарии

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

Пример:

Страница

Используйте подходящие имена классов

Задавайте имена css-классам в соответствии с содержанием блока, например: шапка - header, подвал - footer, меню - menu, контент - content. Благодаря этому код будет намного понятнее и его легче будет поддерживать.

Плохой код

Пункт меню 1

Пункт меню 2

Пункт меню 3

Хороший код

Правила написания CSS

В css также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.

Сбрасывайте стили браузера по умолчанию

Они могут мешать стилям, которые мы хотим применить на самом деле. Скачать файл для сброса стандартных стилей браузера можно тут - reset.css .

Используйте сокращённые свойства и значения

Плохой код

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Хороший код

padding: 5px 10px 15px 20px;

Указывайте селекторы и правила с новой строки

Плохой код

Element {display:block;position: relative;padding:5px 10px 15px 20px;}

Хороший код

Element {
display: block;
position: relative;
padding: 5px 10px 15px 20px;
}

Указывайте нулевые значения без единиц измерения

Плохой код

padding: 10px 0px;
margin-left: 0%;

Хороший код

padding: 10px 0;
margin-left: 0;

Пишите комментарии

Разделяйте основные блоки комментариями, это улучшит читаемость кода.

Пример:

/*HEADER*/
header {
}
/*HEADER END*/

/*MAIN*/
main {
}
/*MAIN END*/

/*FOOTER*/
footer {
}
/*FOOTER END*/

Проверяйте css-код на валидность

Заключение

Данные рекомендации и правила - лишь основы, поскольку языки HTML и CSS развиваются все быстрее, разрабатываются новые методы написания правильного кода. Следуя нашим рекомендациям, вы будете уверены, что ваш код является простым, легко читаемым и оптимизированным. А также получите +100 к карме и благодарности от разработчиков, которым предстоит работать над сайтом после вас.

HTML - это детально описанный язык со своими правилами, которым необходимо следовать.

HTML-документы - это документы, имеющие структуру . Язык HTML подчиняется правилам DTD (Document Type Definition - определение типа документа), написанным на языке SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки). Правила DTD формально определяют структуру HTML-документов.

1.Имена элементов не зависят от регистра . Элемент эквивалентен элементу .

Браузер не различает ПРОПИСНЫЕ и строчные буквы в названиях элементов.

2. Имена атрибутов тегов не зависят от регистра .

Например, атрибут тега

эквивалентен атрибуту

3. Значения атрибутов могут зависеть от регистра . Например, имена файлов, указанные в атрибутах: и могут относиться к разным файлам.

4. Имена тегов и атрибутов не должны содержать пробелы . Браузеры рассматривают первый пробел, встречающийся в элементе, как конец имени элемента и начало его атрибута. Например, тег не эквивалентен тегу вставки рисунка . Он является тегом наклонного начертания текста (курсива) с двумя неопределенными атрибутами M и G .

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

В некоторых атрибутах используются зарезервированные значения, такие как строки типа LEFT, RIGHT, CENTER . Данные значения не требуется заключать в кавычки .

Кавычки применяются только в случае, когда внутри значения имеются пробелы или специальные символы. Например, <IMG SRC=dog.gif ALT=”My dog Rover” >

6. Браузеры игнорируют пробелы в тексте HTML -документа . Браузеры преобразуют последовательность из нескольких пробелов и/или символов табуляции в HTML -документе в один единственный символ пробела . Таким образом, данные символы не могут быть использованы для форматирования выводимого на страницу текста (за исключением тега
, который сохраняет заранее произведенное оформление каждого символа ).

7. HTML -документы могут содержать комментарии . Комментарии начинаются с символов

Название документа: Мой HTML -документ

Дата создания: 06/10/2005

2005 Big Company, Inc.

8. Элементы могут быть вложенными друг в друга, но не должны пересекаться . Любой элемент, который открывается в тексте, заключенном внутри другого элемента, должны внутри этого элемента и закрываться .

Правильно Не правильно

Что такое HTML

Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекста HTML (HyperText Markup Language). Хотя многие говорят о программировании на этом языке, HTML вовсе не является языком программирования в традиционном понимании. HTML - язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе.

Специальные программы просмотра HTML-документов, которые часто называют браузерами, служат для интерпретации файлов, размеченных по правилам языка HTML, форматирования их в виде Web-страниц и отображении их содержимого на экране компьютера пользователя. Существует большое количество программ-браузеров, разработанных различными компаниями, однако, на сегодняшний день из всего разнообразия программ явно выделяются две программы-лидера - Netscape Communicator и Microsoft Internet Explorer.

Программа Netscape Navigator разработана компанией Netscape Communications Corporation. Как и у многих программных продуктов, существует ряд версий этой программы. Последней версией программы Netscape Communicator на момент написания книги являлась версия 4.7. Программа Internet Explorer разработана компанией Microsoft. Последняя версия этой программы - 5.0.

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

встречались сообщения о войне между браузерами за пользователей. Сейчас эти два браузера сравнимы по популярности. Росту популярности браузера Microsoft способствует включение браузера в состав операционной системы Windows 98, однако, в конечном счете, выбор браузера остается за пользователем.

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

Чтобы понять, что собой представляет язык разметки, вспомним старые добрые времена, когда многие работали с текстовыми редакторами типа WordStar. В них для выделения какой-либо фразы, например, полужирным шрифтом, в ее начале и в конце ставились специальные отметки (/B и /b ):

/B Этот текст будет выведен полужирным шрифтом/b

При выводе такого текста на печатающее устройство (о дисплеях еще речь не идет, в те далекие времена их еще или не было вообще или существовали алфавитно-цифровые дисплеи, не позволяющие изменять шрифты) символы /в заставляли использовать полужирный шрифт до тех пор, пока не встретятся символы /b .

HTML работает точно так же. Если есть необходимость выделить текст на экране полужирным шрифтом, то это можно сделать аналогично:

Этот текст будет выведен полужирным шрифтом

Символы включают полужирное начертание, а символы выключают его. Такие символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML принято называть тэгами (от английского слова tag - ярлык, признак).

Все теги языка HTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тега (в нашем примере это в), и, возможно, его параметры. Единственным исключением из этого правила являются теги комментария с более сложными ограничителями (). Названия тэгов, а также их параметров можно записывать на любом регистре. Для единообразия в данной книге большинство тегов записывается прописными буквами.

Большинство тегов HTML используется попарно, т. е. для определенного тэга, назовем его открывающим, в документе имеется соответствующий закрывающий тэг. По правилам HTML закрывающий тег записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тэга. Единственным принципиальным различием парных тегов является то, что закрывающие теги не используют параметры.

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

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

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

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