Rules html общие правила десять. Все тэги должны быть в нижнем регистре. и единицы измерения

На iOS - iPhone, iPod touch 11.03.2019
На iOS - iPhone, iPod touch

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

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

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

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

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

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

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

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.


Рис. 1. Простейшая структура веб-страницы

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

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

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

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

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

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

1.2.2. Элемент

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

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

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Таблица 2. Атрибуты тега Атрибут
charset Указывает кодировку символов для текущего HTML-документа:
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
name Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:

generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
.
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
1.2.3. Элемент

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

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

.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:

1.2.4. Элемент

Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

@import url(style.css);

с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

Таблица 4. Атрибуты тега Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована.
href Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
.


archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.

nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.

search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения:
ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например:
;
any - иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" .
1.2.5. Элемент Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.
1.3. Элемент

В этом разделе располагается все содержимое документа. Для элемента доступны .

Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 .
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

Статья не совсем актуальна
В 10.2 и выше, добавлена возможность для переименования страницы с правилами сайта прямо в админпанели движка, при непосредственном редактировании текста правил. Тем не менее, страница с правилами сайта в осталась. Она существует и находится на любом сайте DLE по адресу http://мой_сайт/rules.html
Как выжать из этого адреса все соки - читаем дальше

Страница с правилами сайта в CMS DLE

Страница с правилами сайта в - это системная статическая страница. Она обрабатываются движком и генерируется точно также, как и обычная стат.страница. Только удалить её невозможно - не предусмотрено разработчиком движка. Даже, если сами правила сайта выключены для показа при регистрации, то - страница с правилами сайта всегда доступна по адресу http://мой_сайт/rules.html Первый-же поисковик, который там её найдёт - начнёт блевать и плеваться на текст и название. Оно и не мудрено. Ведь на всех сайтах DLE - одно и тоже.

Когда страница с правилами сайта попадает в карту сайта, то она расценивается поисковиком как «мусорная» и не берётся в поисковый индекс, поскольку правила сайта, практически везде - одинаковы. Поэтому, страница с правилами сайта в DLE, по-умолчанию - запрещена (закрыта) от поисковой индексации в файле (строка Disallow: /rules.html ).

Уникальность «Правил сайта»

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

Нет, ну кто-то видел на фейсбуке или в твиттере какие-нибудь грозные или особые правила при регистрации? Или, может быть - на Вконтакте и в Одноклассниках они есть? То-то-же!

А какой-то сайтец, с посещалкой в 1000 уников -
начинает писать свои уникальные правила для юзеров.
Как на меня, так лучшие правила на сайте - это полное их отсутствие.
Если пользователь нормальный и адекватный, он и так всё понимает.

Нет страницы - нет проблем

Ни для кого не секрет, что блокировка страниц и каталогов от поисковой индексации - не панацея. Так или иначе, любая страница сайта рано или поздно будет «пережёвана» поисковиком. Например, взять тот-же Яндекс. Его поисковые роботы выкачают из сайта абсолютно всё, что только найдут и лишь потом - начнут сортировать и думать - выдавать страницы в поиск или нет. Это, совершенно очевидно, несмотря на умилительные заверения Яндекса, что он и его роботы лишнего материала из сайта не качают. Мол, если веб-страница закрыта от индексации, то Яндекс сохраняет только её адрес с пометкой , или (кто как закроет).

Чем ныкаться и блокировать «мусорную» страницу с правилами сайта от поисковой индексации, гораздо лучше переделать её под какую-либо другую полезную вещь и открыть к ней доступ поисковикам - пусть успокоятся. Или, хотя бы просто написать свои поведения на сайте и, опять-же таки - допустить к странице поисковиков.

Открываем правила сайта для поисковиков

Делаем смелый шаг и открываем поисковикам доступ к странице с правилами сайта. Для этого, в своём файле находим строку Disallow: /rules.html и удаляем её нафик. Дело сделано! Теперь, любой поисковый робот сможет официально залезть в открытые «Правила сайта» и конечно-же - сказать «Фe-e!» и «Бe-e!». Чтобы этого не произошло, переделываем страницу «Правила сайта» - вставляем свой уникальный текст на любую тему, картинки и меняем наименование (тайтл) страницы.

Редактирование страницы «Правила на сайте»

Редактирование страницы с правилами сайта доступно в админпанели движка DLE, в разделе «Список всех разделов» - «Правила на сайте». Редактирование страницы «Правила на сайте» выполняется, как для любой другой статической страницы - в штатном режиме работы визуального текстового редактора. Здесь проблемы могут быть только с написанием уникального текста да подбором уникальных картинок. Чуть выше, есть специальное окошко для введения заголовка (тайтла) для обновляемой страницы. Но, такое новшество появилось в , начиная с версии 10.2.

Чтобы переименовать страницу с правилами сайта
в более древних моделях движка -
нужно будет покопаться в его системных файлах.

Переименование страницы «Правила на сайте»
(для CMS DLE 10.1 и ниже)

Непосредственно переименование самой страницы «Правила на сайте» производится в файле adminpanel.lng, который находится в папке language/Russian/adminpanel.lng. Файл adminpanel.lng - это системный файл движка DLE. Для его редактирования, заходим на свой сервер (иначе - никак).

Открываем файл adminpanel.lng.
Ищем строку
"rules_edit" => "Общие правила на сайте"
Меняем слова «Общие правила на сайте» на своё новое название. Закрываем. Сохраняем. (Менять можно только кириллицу, которая находится между кавычек. Иначе, вообще перестанет работать.)

Чистим кэш движка и браузера . После правки и сохранения файла adminlogs.lng нужно обязательно почистить кэш движка и кэш браузера, чтобы заставить движок по-новой сгенерировать страницу с новым наименованием, а браузер - её скачать. Если это не помогает и продолжает отображаться старое название - нужно зайти в админпанель движка, отредактировать и пересохранить страницу «Правила на сайте» каким-нить незначительным знаком. Например - поставить точку в тексте (потом можно будет все исправить назад). Подобные издевательства и зверства обязательно прочистят движку и серверу мозги и заставят их сгенерировать и отобразить новое название.

Мысли вслух. Такое ощущение что уважаемый celsoft читает этот блог. Немногим позже, после этой публикации, в админпанели движка версии CMS DLE 10.2 появилась возможность сделать переименование страницы с правилами сайта нормальным цивилизованным способом, без утомительного ковыряния в системных файлах скрипта. Огромное спасибо разработчикам CMS DLE за их труды и внимание к проблемам простого люда.

На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Однако нужно быть внимательным при написании 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 к карме и благодарности от разработчиков, которым предстоит работать над сайтом после вас.

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:

NameFoodPriceTotal
Starflowerstir fied tofu5.95
Mikovegetable rice soup4.95
Andyhummus3.95
Pingfrench toast5.95
20.80

Here"s how that table renders:

Name Food Price Total
Starflower stir fied tofu 5.95
Miko vegetable rice soup 4.95
Andy hummus 3.95
Ping french toast 5.95
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.

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

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

1: Всегда закрывайте тэги

  • Some text here.
  • Some new text here.
  • You get the idea.

    Обратите внимание на то, что тэг оболочки UL/OL опущен. Вдобавок многие предпочитали также не закрывать тэг LI . По сегодняшним стандартам это просто недобросовестная практика и ее следует избегать на 100%. Всегда-всегда закрывайте ваши тэги. Иначе проблемы с валидацией будут возникать на каждом шагу.

    Как сделать лучше

    • Some text here.
    • Some new text here.
    • You get the idea.

    2: Задайте правильный DocType

    Когда я был помоложе, я иногда сидел на CSS форумах. И всегда, когда у пользователя возникал вопрос, прежде чем спрашивать у нас, он ДОЛЖЕН был сделать сначала две вещи:

    Подтвердить валидность CSS файла. Исправить все ошибки. Добавить doctype

    "DOCTYPE ставится перед открывающим тэгом html вверху страницы и сообщает браузеру что содержит страница - HTML, XHTML или и то и другое, так, чтобы он мог корректно отображать разметку."

    Большинство использует четыре различных doctype при создании новых сайтов.

    Сейчас идут горячие споры относительно правильного выбора в данной ситуации. Сначала считалось, что лучшим вариантом будет использование версии XHTML Strict. Однако, после некоторые исследований, стало понятно, что большинство браузеров переходят обратно на обычный HTML при обработке этих страниц. По этой причине многие выбрали использование HTML 4.01 Strict вместо него. По сути все эти варианты дают вам контроль. Исследуйте обстановку и выберите сами свой вариант

    3: Никогда не используйте включенные стили

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

    I"m going to make this text red so that it really stands out and makes people take notice!

    Конечно - это выглядит достаточно безобидно. Тем не менее, это ведет к ошибке ваших кодов.

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

    Этот как пересекать лучи в Охотниках за Привидениями. Это просто плохая идея. -Крис Койер (Chris Coyier) (по поводу чего, совершенно не по теме.)

    Вместо этого, закончите шаблон, после чего дайте ссылку на этот тэг P во внешнем CSS файле.

    Как сделать лучше

    #someElement > p { color: red; }

    4: Помещайте все внешние CSS файлы внутри тэга HEAD

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

    Когда мы исследовали произодительность в Yahoo!, мы обнаружили, что перемещение таблиц стилей в HEAD документа заставляет страницы грузиться быстрее. Это происходит потому, что помещение таблиц стилей в HEAD позволяет странице грузиться прогрессивно. - Команда ySlow

    My Favorites Kinds of Corn

    5: Лучше разместить файлы Javascript в конце страницы

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

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

    Как сделать лучше

    #

    And now you know my favorite kinds of corn.

    6: Никогда не используйте подключенный Javascript. На дворе не 1996!

    Еще одна распространенная практика в прошлом это помещать команды JS напрямую в тэги. Это часто использовалось в простых галереях изображений. По существу, тэгу просто присваивался атрибут "onclick". Его значение при этом равнялось какой-либо процедуре JS. Нет нужды говорить, что такого никогда нельзя делать. Вместо этого превратите этот код во внешний файл JS и используйте "addEventListener/attachEvent" чтобы "прослушать" желаемое событие. Или же, при использовании такого фреймворка как jQuery, просто используйте метод "click".

    $("a#moreCornInfoLink").click(function() { alert("Want to learn more about corn?"); });

    7: Постоянно проверяйте на валидность

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

    Однако, особенно в самом начале, я настоятельно рекомендую, чтобы вы скачали Web Developer Toolbar и постоянно использовали пункты "Validate HTML" (проверить HTML) и "Validate CSS". Хотя CSS и достаточно простой в изучении язык, он также может заставить вас рвать на себе волосы. Также вы часто будете убеждаться в том, что это ваша некачественная разметка привела к странным пробелам на странице. Поэтому проверяйте, проверяйте и еще раз проверяйте.

    8: Скачайте Firebug

    Не перестану его рекомендовать. Firebug без сомнения является лучшим из всех доступных плагинов для создания сайтов. Он не только предоставляет отличную отладку Javascript, но вы также узнаете, как определять какие элементы наследуют те дополнительные вложения, о которых вы не подозревали. Скачайте его !.

    9: Используйте Firebug!


    Из моего опыта большинство пользователей используют Firebug лишь на 20% его возможностей. Поистине вы оказываете себе плохую услугу. Потратьте пару часов и поищите в сети все достойные материалы по этому вопросу.

    10: Все тэги должны быть в нижнем регистре

    Технически, можно обойтись и тэгами в верхнем регистре.

    С другой стороны, не делайте так. Это не служит никакой цели и режет глаз - не говоря уж о том, что это напоминает мне о функции html Microsoft Word!

    Как сделать лучше

    Here"s an interesting fact about corn.

    11: Используйте тэги H1 - H6

    Надо сказать, что это то, о чем я частенько забываю. Лучше всего использовать все шесть этих тэгов. Честно говоря, я обычно использую первые четыре, но я над этим работаю! : Для улучшения семантики и SEO сайта заставьте себя заменить тэг P на какой-либо подходящий H.

    This is a really important corn fact! Small, but still significant corn fact goes here.

    12: При создании блога, припасите H1 для заголовка


    Я спросил наших последователей считают ли они целесообразным использовать H1 для логотипа или же использовать его для заголовка. Около 80% возвращенных твитов было в пользу последнего варианта.

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

    13: Скачайте ySlow


    Особенно в последние годы команда Yahoo проделала действительно отличную работу в нашей области. Не так давно они выпустили дополнение к Firefox под названием ySlow . Включите его, и он проанализирует данный вебсайт и выдаст "карточку отчета", которая детально опишет вам области сайта, которые необходимо улучшить. Может это слегка и жестко, но все же на благо. Я крайне рекомендую это дополнение

    14: Панель навигации заключите в неупорядоченный список


    Каждый вебсайт содержит хоть какое-то подобие навигационного меню. Может и можно оформить его следующим образом:

    Home About Contact

    К чему оформлять список навигационных ссылок чем-либо иным кроме неупорядоченного СПИСКА?

    Предполагается, что тэг UL содержит в себе список элементов.

    Как сделать лучше

    15: Учитесь целиться на IE

    Рано или поздно вы все-таки будете проклинать IE. Это вообще стало обязательным элементом в нашем сообществе. Когда я читаю на Твиттере, как один из моих друзей сражается с силами IE, я просто улыбаюсь и думаю про себя: "Я знаю, каково тебе, приятель".

    Первым шагом после того как вы создали ваш основной CSS файл будет создание отдельного файла ie.css. Потом вы можете направлять на него исключительно ie, используя следующий код.

    Этот код значит, что "браузер пользователя является Internet Explorer 6 или ниже, используй эту таблицу стилей, в ином случае, ничего не делай". Если вы хотите замены и для IE7, просто замените "lt" на "lte" (меньше или равно)

    16: Выберите хороший редактор


    Сидите вы на Windows или на Mac, для обоих создано много отличных редакторов кода, которые вам подойдут наилучшим образом. Лично у меня есть и Mac и PC, которые я использую вместе в моей повседневной работе. В результате, я имею хорошее представление о доступных вариантах.

    17: Когда вебсайт готов, сожмите его!


    Сжимая файлы CSS и Javascript, вы можете уменьшить размер каждого файла на значительные 25% или больше. Можно не думать об этом в процессе разработке, но как только сайт более-менее готов используйте несколько онлайновый программ-архиваторов, чтобы сэкономить на трафике.

    Сервисы сжатия Javascript

    18: Сокращайте, сокращайте, сокращайте


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

    После завершения работы над шаблоном пройдитесь по нему глазами несколько раз и поищите способы уменьшить количество элементов на странице. Обязательно этот UL помещать в свой собственный div ? Думаю необязательно.

    Также как и ключ при письме, "сокращать, сокращать, сокращать" - верно и для шаблонов.

    19: Все изображения требуют собственные атрибуты Alt

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

    Плохой вариант

    Как сделать лучше

    20: Изучайте до последнего

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

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

    Разве есть лучший способ выучить HTML, кроме как копировать ваших героев? По большому счету мы все плагиатчики! Уже потом потихоньку мы начинаем вырабатывать собственные способы и методы. Поэтому посмотрите на сайты тех, кого вы уважаете. Как они выполнили ту или иную секцию? Учитесь и подражайте им. Мы все так делали, делайте так и вы. (Не надо воровать дизайн, просто учитесь из самого кода)

    Заметили какие-нибудь классные эффекты Javascript, которые вы хотели бы изучить? Возможно, он использует плагин для отображения эффекта. Просмотрите исходный код и поищите в тэге HEAD имя скрипта. Затем поищите его в Google и поставьте себе на сайт! Ура.

    22: Стилизуйте ВСЕ элементы

    Это очень важное правило, особенно когда работаешь на клиента. Только потому, что вы не использовали элемент blockquote, не значит, что он не понадобится вашему клиенту. Не используете упорядоченные списки? Это не значит, что ваш клиент тоже не будет. Сделайте себе одолжение и создайте специальную страницу, чтобы покрасоваться вашими стилями для каждого элемента: ul , ol , p , h1-h6 , blockquotes , и т.д.

    23: Используйте Twitter

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

    Изначально, основной идеей твиттера было записывать "что ты делаешь". Несмотря на то, что это и сейчас остается так в некоторой степени, твиттер больше превратился в сетевой инструмент в нашей индустрии. Если уважаемый мной веб девелопер запостил ссылку на статью, которую он нашел интересной, поверьте, я ее тоже прочту - и вам следует! Вот причина, по которой такие сайты как Digg становятся все больше и больше раздражающими.


    24: Изучите Photoshop


    Один недавний посетитель Nettuts+ был недоволен за то, что опубликовали рекомендации с сайта Psdtuts+. Он утверждал, что Photoshop не имеет никакого отношения к блогу о веб разработках. Не уверен как там у него, но у меня Photoshop открыт на компьютере круглые сутки.

    На самом деле, Photoshop вполне вероятно станет самым важным вашим инструментом. После того как вы выучили HTML и CSS, я бы порекомендовал вам изучить максимальное количество техник Photoshop

    25: Изучите каждый HTML тэг

    Есть десятки HTML тэгов, с которыми вы не столкнетесь в вашей работе. Тем не менее, это не означает, что вы не должны их знать! Вы знакомы с тэгом abbr например? А как насчет cite? Это два тэга заслуживают своего места в вашем ящике инструментов. Изучите их всех!

    Кстати, если вы все-таки не знакомы с этими двумя тэгами:

    abbr делает именно то, что от него и ждут. Он означает аббревиатуру. "Blvd" можно обернуть в тэг abbr так как это аббревиатура слова "boulevard".

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

    26: Принимайте участие в жизни сообщества

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

    27: Используйте сброс CSS

    Вот еще один вопрос, по которому ведутся горячие дебаты. Сброс CSS: использовать или не использовать, вот в чем вопрос. Если вы спросите моего личного совета, я бы 100% рекомендовал бы создать вам ваш собственный файл сброса. Можно начать со скачивания какого нибудь популярного файла, такого как файл Eric Meyer"s, и затем медленно, по мере того как вы учитесь, начать превращать его в ваш собственный. Если вы не сделаете этого, вы не поймете по-настоящему, почему элементы ваших списков получают дополнительное заполнение, которое вы не указывали нигде в вашем CSS файле. Пожалейте себе нервы и просто сбросьте все! Вот вам для начала.

    Html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baselinebaseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

    28: Выровняйте все!

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

    29: Разберите PSD

    Итак, у вас уже есть твердые знания HTML, CSS и Photoshop. Следующим шагом будет конвертация вашего первого PSD файла в рабочий вебсайт. Не волнуйтесь, это не так трудно как кажется. Лучшего способа применить ваши знания на практике просто не придумаешь.

    30: Не используйте фрэймворки..Пока

    Фрэймворки, будь то для Javascript или CSS прекрасны, но пожалуйста, не используйте их, когда вы еще только начинающий. Хотя и можно утверждать, что jQuery и Javascript можно выучить одновременно, с CSS так сделать не получится. Я всегда советовал 960 CSS Framework, и часто его использую. Имея это в виду, если вы все еще в процессе изучения CSS - а значит только первый год - вы только еще больше запутаетесь, если будете его использовать.

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

    • Currently 4.00/5


  • Рекомендуем почитать

    Наверх