FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Язык гипертекстовой разметки HTML5 — структура и основы работы

Категории: Вебмастеру

html 5Продолжаем цикл статей об основах веб-языков и разработках в этой области. Ранее мы ознакомились с основами гипертекстового языка  HTML, его особенностями и методами разметки текста (тегами).

Также нам стало известно, что язык HTML иесно взаимодействует с такими программными разработками, как стили CSS и Javascript и для чего необходимо такое сотрудничество языков. Сегодня мы в подробностях будем рассматривать структуру построения документов на HTML5. Блочное построение документа, его структура – тема сегодняшней статьи. Но вначале нужно понять, что такое HTML5.

Язык программирования HTML5 (от английского HyperText Markup Language) – это пятая версия языка. Как и все предыдущие версии, предназначен для выстраивания структуры документов и представления их в сети. На данный момент версия HTML5 находится в стадии разработки. Цель, преследуемая созданием пятой версии HTML – улучшение языка в области его работы с документами мультимедиа (аудио- и видеоприложениями).

Добавление некоторых синтаксических новшеств, таких, как <audio>, <video> и <canvas>, позволит минимизировать логические и синтаксические ошибки при работе HTML5 с мультимедийными файлами. Также для обогащения семантического содержимого документа (семантика – изучение значения языковых единиц) вводятся и новые значение, такие, как <article>, <section>, <nav> и <header>. Некоторые из атрибутов будут удалены или изменены. Вводятся новые возможности для обработки недопустимых документов, так что все браузеры будут способны работать с такого рода документами.

Что такое DOCTYPE?

Любой документ на HTML-языке всегда начинается именно с этого слова. Все предыдущие версии HTML публиковали это объявление приблизительно следующим образом:

html5

где PUBLIC обозначало доступность документа к прочтению, а DTD обозначает тип публикующихся документов (Document Type Definition). Определение DOCTYPE в HTML5 намного упрощено — < !DOCTYPE HTML>. Это все – разметка готова.

Так за какие действия отвечает объявление DOCTYPE? Этот тег предназначен для сообщения браузерам о том, какой стандарт языка использовать – от определения версии HTML будет зависеть визуализация страницы в целом, её рендеринг. Стандарты разработки HTML строго регламентированы и следуют определенным правилам, поэтому работа с чужими кодами, их чтение и отображение в браузере за счет использования стандартов заметно упрощается.

Первоначально объявление DOCTYPE переключало браузер в стандартный режим, и это позволяло пользоваться более новыми стандартами. Для тех документов, которые были написаны с применением старого стандарта, возможно использование режима совместимости, что позволяет добиться нормальной работы браузера. Новое объявление DOCTYPE на сегодняшний день поддерживается почти всеми существующими браузерами, одновременно переключая их в режим работы со стандартами. То есть, каждый вновь создаваемый документ должен содержать атрибут DOCTYPE и соответствовать разработанным стандартам. При этом проверяется весь код документа на его соответствие стандартам.

Условно можно разделить всю страницу, написанную на HTML, на несколько подразделов. Корень основного кода всей страницы – тег  <html>. То есть,  между тегами <html> и <html> можно расположить практически все, что угодно. Схематично страница на языке  HTML представлена так:

html5

Например:

1
< !DOCTYPE HTML><html lang="ru" xml:lang="ru">< !—Любой текст, изображения, таблицы и т.д. --></html>

В нашем случае тег <html> </html> вмещает в себя атрибут, определяющий  язык документа – русский. Для облегчения работы с документом необходимо указывать язык документа. Все содержимое страницы находится именно между тегами <html> …. </html>, кроме объявления DOCTYPE.

Тег <head> так называемая голова документа. Все необходимые данные о странице (как для работы браузера, так и информативные данные для разработчика) располагаются между <head> и </head>. Заголовок страницы, её код – например, UTF-8, meta-данные, такие, как ключевые слова, описание страницы, имя автора и т.д. – все подобные данные находятся именно между тегами <head> и </head>. Здесь же можно подключить внешние файлы, скрипты и библиотеки.

Что такое meta-теги?

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

1.    Тип кодировки страницы – Charset. В большинстве случаев используется UTF8, но можно задействовать и другие кодировки, например – windows-1251, KOI-8, ISO и т.д. Такой атрибут, как Charset, определяет, какую кодировку использовать для чтения страницы. В HTML5 этот атрибут выглядит следующим образом:

1
<meta charset="utf-8" />

Ранее же эта строка выглядела вот так:

1
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

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

Мета-тег Description, то есть – краткое содержание страницы. Например:

1
<meta name="description" content="Язык HTML, версия №5, её возможности и описание основных принципов работы " />

Мета-тег Author указывает на то, что страница составлена конкретно каким-либо автором. Например:

1
<meta name="author" content="Сергей Колычев" />

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

Мета-тег, обозначающий заголовок страницы или записи на странице – title. Выглядит тег таким образом:

1
<title>Определение HTML и структура языка. | vashsite.com</title>

Отображается заголовок в названии открывающегося окна или вверху страницы.

Мета-теги link и script используются для подключения к исполнению файлы стилей, внешние файлы и библиотеки. Например, таблицы стилей CSS и JavaScript, а также библиотека jQuery. Выглядят строки подключения этих файлов так:

1
<link rel="stylesheet" href="style.css" /><script src="js/jquery.js"></script>

То есть, для понимания сути этих строк можно представить себе такую ситуацию – файлы CSS и JavaScript на сервере лежат, но без этих строк в документе они просто не будут работать. Небольшой нюанс для использования этих тегов – файлы могут быть как на локальном сервере, так и на удаленном. В последнем случае в мета-тегах необходимо указать полный путь к файлам. В нашем примере мета-тег link используется для подключения файла CSS и использует ссылочные отношения (link relation). Эта подпись дает знать браузеру, что данный файл является файлом стилей. Тег rel  имеет также множество других значений.

Альтернативой первому варианту подключения файла стилей может быть такая строка:

1
2
3
4
<style type="text/css">
    a { text-decoration: underline; }
    p { color: #000000; }
</style>

Такой способ напрямую подключает стиль к странице, без подключения файла стилей.




Самый значимый тег в HTML документе – тег <body>. Он также имеет закрывающее окончание </body>. Все данные, которые содержатся внутри этого тега, определяют содержимое страницы – её контент, изображения на странице, всю ссылочную массу, содержащуюся в тексте и т.д. Таким образом, вся информация, которая располагается до тега <body>, можно заключить в своего рода неизменяемый шаблон. Содержимое же тела — <body> </body> может редактироваться, заменяться, улучшаться.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !DOCTYPE HTML>
<html lang="en" xml:lang="en">
 
<head>
    <meta charset="utf-8" />
    <title>Design Shack</title>
    <meta name="description" content="A Very Basic HTML5 Anatomy" />
        <link rel="stylesheet" href="style.css" />
    <script src="js/jquery.js"></script>
</head>
 
<body>
  <!-- Page Content Goes Here -->
</body>
</html>

Если схематично представить структуру HTML страницы, то она будет выглядеть так:

html5

Это так называемая объектная модель документа HTML (DOM).

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





Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail