Дом Гнома

В гости к Гному - www.ugnoma.NET...
Как это нет??? У Гнома всё есть!!!

Базовые элементы и структура языка HTML

 

 
 

Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:

<ТЕГ атрибут1=ЗНАЧЕНИЕ ... атрибутN=ЗНАЧЕНИЕ>

Тег в иллюстрацииПримерно так, как на рисунке справа ))))

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий

<ТЕГ> Контейнер

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

Далее – Внимание! Чтобы мой и ваш браузер не воспринимал теги примеров, по которым мы будем заниматься, и не интерпретировал их в код, после открывающей скобки я буду вставлять точку. Т.е. выглядеть это будет так: « <. ». Вы же при написании не забывайте писать БЕЗ точек, иначе браузер будет воспринимать ваши листинги, как обычные тексты. Точки вообще можно заменить специальным символом, или пробелом, но как мне кажется, так воспринимается гораздо легче, а про пробел можно вообще забыть. Поэтому далее, в течении всего курса, я буду использовать это соглашение. А Вы не забывайте про него.

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

То есть 

<.HEAD>< /.HEAD> - правильное написание,

<.head>< /.head> - правильное написание

<.heAD>< /.HeAd> - правильное написание,

<.хэд>< /ХЭД> - неправильное написание, браузер воспримет это как простой текст.

 

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

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

Чтобы было попонятней, насчёт строения документа HTML, приведу такой пример, по лицу и строению тела человека мы  определяем, кто это – мужчина, женщина, какой расы, скольки лет и т.п. У HTML примерно та же система. По заголовку с темой, и атрибутам тела документа становится понятным, о чём идёт в документе речь, и как это всё выглядит в интерпретации браузеров.

 

 

Рассмотрим на примере. Начинается это всё открывающим тегом <.HTML> и заканчивается закрывающим тегом <./HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа – заголовок заключенный в контейнер <.HEAD>...<./HEAD>

и тело документа в контейнере <.BODY>...<./BODY>.

Таким образом структура простейшего HTML документа выглядит примерно так:

 

<.HTML> - Начало документа

 

<.HEAD>

 ЗАГОЛОВОК ДОКУМЕНТА

 <./HEAD>

 

<.BODY>

 ТЕЛО ДОКУМЕНТА

 <./BODY>

 

<./HTML> - Окончание документа

 

 

 

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

Теги заголовка (головы) и тела (основной части документа) входят в контейнер тегов «HTML».

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

Теги <.HTML> и <./HTML> сразу дают понять браузерам и другим программам, работающим с гипертекстовыми страницами, что они как раз и имеют дело с HTML документом. Любой HTML документ должен начинаться с <.HTML> и заканчиваться <./HTML>. Т.е. между этими тегами находится ВЕСЬ код html.

           

    Между тегами <.HEAD> и <./HEAD> находится заголовок документа. В нем хранится название  HTML страницы и метатеги с ключевыми словами (об этом подробнее ещё поговорим). Вообще, по большому счёту, тег <.HEAD>  уже не является обязательными, т.е. без него HTML документ будет нормально функционировать в браузерах. Но даже, если вы по каким-то причинам не собираетесь использовать область заголовка,  то хотя-бы напишите просто <.HEAD> <./HEAD>. Это нужно для корректного понимания структурыHTML документа браузерами. Все символы, находящиеся между этими тегами, никак не отображаются браузерами (за исключением информации между тегами <.TITLE> <./TITLE>, там находится название HTML документа, выводимое в верхней панели браузеров). Но эти символы (метатеги) оказывают большое влияние на ранжирование страницы поисковыми системами, и как следствие  от них зависит активная и счастливая жизнь сайта в сети. Всё это более подробно рассматривается в разделах о продвижении сайтов в поисковых системах. 

Ещё раз повторюсь! Большинство веб-браузеров позволяют просматривать Web-страницы в формате HTML. Например, в браузере IE, для просмотра исходного кода документа необходимо нажать на просматриваемой странице правую кнопку мыши и выбрать во всплывающем меню пункт «Просмотр в виде HTML», или  «Исходный код» - это для Opera.

Иногда очень полезно, в целях самообучения, просмотреть, как реализованы отдельные элементы на профессионально разработанных сайтах. Главное в этом деле не заниматься плагиатом. Например, копируя их графические элементы или сценарии на свои страницы.

 

Комментарии в HTML документах

Об этом не самом важном (но очень удобном) теге речь ещё пойдёт, но на своём опыте знаю, что он часто бывает нужен начинающим веб-мастерам, и поэтому скажу о нём пораньше. При создании веб-документов, часто для своего удобства бывают необходимы комментарии. Они помогают нам в работе с html-кодом страниц, особенно по истечении какого-то времени, когда начинает забываться, что ты хотел сказать людям тем или иным фрагментом кода. Часто сам поступаю подобным образом, особенно когда имею дело с каскадными таблицами (о них речь пойдёт в другом разделе). Комментарии не отображаются браузерами и их можно вставлять в документе где угодно и сколько угодно.. В языке HTML эта возможность реализована конструкцией -<.!--  --> - тег

пример: 

 

 

Поделиться ссылкой на страницу:
В начало страницы
Дружно все тыкаем сюда!