Основы 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:

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

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

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

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

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

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

Например, атрибут тега эквивалентен атрибуту

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

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

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

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

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

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

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

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

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

2005 Big Company, Inc.

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


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

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:

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.