Уроки HTML - Структура языка

Здравствуйте, дорогие жители этого замечательного познавательного портала!

Давненько меня тут небыло, а на время моего отсуствия вместо меня остались всего два урока: »Введение в HTML« и »Введение в PHP«, что очень печально :( - всё это с нами делает лень матушка, поетому... поетому мы незамедлительно переходим к уроку.

В этом уроке, как понятно из названия, мы разсмотрим структуру языка.

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

здесь мы видим один элемент HTML от которого идут еще два элемента - HEAD и BODY, в HEAD тоже размещаются дочерние элементы, просто здесь они не указаны (почему то).

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

Начнём:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trasitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Структура <!DOCTYPE>:

<!DOCTYPE [элемент верхнего уровня] [публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значениеPUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

DTD — Document Type Definition

Дальше идёт элемент верхнего уровня <html>, он имеет закрывающий тег </html>. Кстати все элементы должны иметь закрывающий тег (это мой вам совет). Можно конечно не закрывать теги:

<html>   <head>     <titile>Заголовок           <meta name="Content-Type" content="text/html; charset=utf-8">  <body>   <div>     <h1>Blabla      <p>This is BIG TEXT        This is BIG TEXT        This is BIG TEXT    <div><p>This is Paragraph

- согласен не очень удачный пример (лень матушка), но представте себе тонны такого кода, ага ну как? Легко искать и редактировать нужные элементы? И согласитесь так он выглядит гораздо красивее и читабельнее:

<html>   <head>     <titile>Заголовок</title>           <meta name="Content-Type" content="text/html; charset=utf-8" />  <body>   <div>     <h1>Blabla</h1>      <p>This is BIG TEXT        This is BIG TEXT        This is BIG TEXT     </p>   </div>    <div><p>This is Paragraph</p></div>

Внутри элемента html размещается весь документ, всё содержимое, всё что вы видите и не видите, открывая HTML документ в браузере.

За html следует элемент head (с англ. голова). head имеет открывающий <head> и закрывающий теги </head>. В нём располагается общая информация о документе, подключаемые модули (такие как стили CSS), HTTP-заголовки и много других вкусняшек, из которых мы будем разсматривать только нужные, а все остальные вы сможете найти в замечательном справочнике нашего с вами портала - Справочник по HTML.

title — имеет открывающий <title> закрывающий </title> теги. Содержит в себе текст заголовка HTML страницы, который вы видите на вкладке.

meta — определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Не имеет закрывающего тега, в XHTML используеться слэш / перед закрывающим знаком >.

В данном случае:

<meta name="Content-Type" content="text/html; charset=utf-8" />

определяются тип и кодировка содержимого документа.

body — с английского переводится как "тело", незря его так назвали, этот элемент выполняет роль тела в документе (этот термин немного отличается от жизненного), всё то что вы видите в браузере (кроме панели навигации браузера) - его работа, именно этот контейнер выводит всю информацию, которую вы хотите донести до пользователя. Имеет открывающий <body> и закрывающий </body> теги.

div — является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора (разберём в следующих уроках). Как и при использовании других блочных элементов, содержимое элемента всегда начинается с новой строки. После него также добавляется перенос строки. Имеет открывающий <div> и закрывающий </div> теги.

h — выделяет фрагмент текста как заголовок. Имеет 6 уровней: h1 - Заголовок первого уровня, h2 - заголовок второго уровня, h3 - заголовок третьего уровня и т.д. до 6-ти. Должен заметить (иначе никак), что заголовки идут от h1 - самый большой до h6 - самый маленький. Имеет открывающий <h1-6> и закрывающий </h1-6> теги.

p — Определяет текстовый абзац, является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента. Имеет открывающий <p> и закрывающий </p> теги.

Ну вот мы подошли к обещаному изображению:

Ну вот здесь наглядно всё показано.

Надеюсь всё нужное касательно этой темы мы разсмотрели и вам будет полезен этот урок.

Если я всё же что то упустил, то обязательно допишу, более опытных пользователей попрошу меня дополнить, буду очень благодарен!!! Что непонятно спрашивайте в комментариях.

Если понравилось, то специально для этого случая разработчик портала придумал специальную кнопочку благодарности :)

С вами был я, BurnSkull, спасибо за внимание, до следующего урока.

Пожаловаться Подписаться
0 ответов
авторизуйтесь чтобы ответить