Loading
Красноглазым Джедаям
компьютерной вселенной
посвящается.

HyperText Markup Language (HTML)

В этом разделе мы рассмотрим основы HTML - язык гипертекстовой разметки документов для размещения их в сети Интернет, разновидность SGML(SPECIFICATION GLOBAL MARKUP LANGUAGE - спецификация обобщенного языка разметки документов). Элементы документа имеют два типа: блочные и строчные. Блочные это кирпичики, строчные это рисунки на кирпичиках из которых мы будем строить наш сайт.

Взять бы много кирпичей
штук примерно пять
вот бы вышел славный дом
только где их взять?

Базовые типы данных SGML.

CDATA
последовательность символов
ID, NAME
лексемы (A-Z, a-z), цифры, точки, дефисы.
IDREF
ссылки на лексемы.
NAMBER
цифры.

Для правильного отображения документов, созданных на HTML нужна специальная программа - интерпретатор, она прочитывает код созданный програмистом и выводит уже отформатированнй документ в окне браузера. В каждый интернет браузер встроен такой интерпретатор. Документы HTML состоят из элементов(они обозначаются тэгами) и имеют объектную структуру. Это означает, что каждый элемент документа это объект, а значит им можно управлять как объектом, например изменять его свойства(значения атрибутов), добавлять или удалять по своему усмотрению и в соответствии с правилами языка (см. далее "Идентификаторы элементов").

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

Пример:
открывающий тэг:(<div>) и закрывающий тэг:(</div>).
Чаще всего элемент имеет открывающий и закрывающий тэги, иногда только открывающий, например тэг:(<br/>). Свойства элементов определяются с помощью "атрибутов", которые всегда! записываются в открывающий тэг.
Пример:
<span class="atrvalue">
, здесь span это элемент, а class это его атрибут и после знака "=" в кавычках записано значение атрибута.

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

Идентификаторы элементов:
При формировании документа для последующего обращения к элементам им присваивают идентификаторы.
ID
уникальный идентификатор (по нему обращаемся из скриптов и CSS)
NAME
имя элемента, используется для обращения из скриптов и CSS, однако использовать следует ID, поскольку использование имени требует указания пути к обьекту.
CLASS
идентификатор групп (для CSS-каскадных таблиц стилей)

При помощи идентификаторов можно работать с элементами как с объектами документа, произвольно меняя их свойства. При этом имена должны быть семантические, то есть указывать на значение элемента, его роль! А не на описание.

Пример неправильного использования:
"Желтые_буквы" или "Таблица_с_зеленым_фоном".

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

Пример правильного использования:
"Цвет_текста_атрибутов" или "Таблица_о_недвижимости".

Тип содержимого(MIME)(внимание! это ссылка на англоязычный сайт). Каждый тип файла должен воспроизводиться надлежащим образом. Для этого нужно указать браузеру MIME тип файла. После этого файл будет воспроизведен либо плагином браузера, либо внешней программой.

Элемент записывается вот таким порядком:
<META http-equiv=”content type” content=”text/html charset=”iso” > 
(http-equiv это ШАПКА ОТВЕТА элемент мета содержит информацию о типе содержимого) (content это тип содержимого - текст html) (charset это кодировка)
Напишем код страницы

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

  1. Тип первый: strict (строгое), выбирая этот тип, вы должны указать следующее:
    Пример:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN” http://www.w3.org/TR/html4/strict.dtd> 
    
  2. Тип второй: transitional (переходное) :
    этот тип рекомендуется для использования в большинстве случаев.
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd">
    
  3. Тип третий: frameset (фреймы) :
    Пример:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Frameset//EN” http://www.w3.org/TR/html4/frameset.dtd">
    
  4. Тип четвертый: XHTML (расширяемый html):
    Пример:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <"html xmlns="http://www.w3.org/1999/xhtml" xml:lang"en" lang="en"> 
    
  5. Тип пятый самый современный: HTML5 :
    Пример:
    <!DOCTYPE html> 
    

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

  1. Шапка - содержит техническую информацию документа, например привязку к файлу стиля, ключевые слова для поисковых роботов, информацию о кодировке и языке текста. Открывается тэгом <head> и закрывается тэгом </head>.
  2. Тело - содержит текст документа. Открывается тэгом <body> и закрывается тэгом </body>, в документе имеется только одно! тело, следовательно должнен быть только один элемент body, обозначенный открывающимся и закрывающимся тэгом. Он имеет ряд атрибутов, но все они связаны с дизайном документа и поэтому для употребления не рекомендуются, так как разработчики настаивают на применении каскадных таблиц стилей, что и я вам рекомендую. По этой причине атрибуты не рассматриваем.
Примеры нерекомендуемого кода и замены его стилями:

Этот фрагмент HTML иллюстрирует использование не рекомендуемых атрибутов.

Здесь установлен белый цвет фона канвы, чёрный цвет текста, красный первоначальный цвет гиперссылок, фуксиновый при активации и коричневый после посещения.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> 
<title>A study of population dynamics</title>
</head> 
<body bgcolor="white" text="black" 
link="red" alink="fuchsia" vlink="maroon">
... тело документа... 
</body> 
</html>
Использование таблиц стилей приведёт к тому же результату:
Пример рекомендуемого кода:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>
A study of population dynamics</title>
<style type="text/css"> 
body { background: white; color: black} 
a:link { color:red } 
a:visited { color: maroon } 
a:active { color: fuchsia } 
</style> </head>
<body> ... тело документа... 
</body> </html>
Использование внешних (связанных) таблиц стилей позволяет более гибко управлять представлением, не пересматривая документ-источник HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>
A study of population dynamics</title>
<link rel="stylesheet" type="text/css" 
href="smartstyle.css"> 
</head>
<body> ... тело документа... 
</body> </html>
Формируется текст при помощи тегов форматирования текста. И оформляется методами CSS.

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

<!--//-->.
<!-- здесь находится ваш комментарий //-->. 


Контактная информация

E-Mail: oleynikww@gmail.com

Добавить комментарий

Комментарии пользователей