Вводный урок по гипертекстовому языку разметки HTML

1) Что такое HTML, и с чем его едят?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») - гипертекстовой язык разметки, который используется в построении веб-страниц. Многие заблуждаются, утверждая, что HTML - язык программирования.

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

2) Что такое тег?

Так как HTML является гипертекстовым языком, то он имеет основную структурную единицу, называемую основным элементом HTML или тегом. Каждый тег осуществляет свою функцию. Чтобы на веб-странице разместить изображение, используют тег IMG, чтобы изменить цвет текста - тег FONT, то есть каждый тег отвечает за свои возможности. Теги пишутся в угловых скобках. Существуют теги парные и одиночные (Например, тег font - парный, а br - одиночный).

Пример:

<!--Парный-->
<font>Цветовая палитра</font>
<!--Одиночный-->
Цветовая <br/> палитра

Замечаем, что парный тег font состоят из двух частей:
Первая - открывающаяся, вторая - закрывающаяся. А вот br не имеет закрывающуюся часть, так как не является парным тегом.

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

Пример:

<font color="red">Цветовая палитра</font>

В данном случае color - атрибут, а red - параметр, который прописывается в двойных кавычках после знака равенства. Подробнее о тегах и их функциях поговорим в следующем уроке.

3) Структуризация HTML-документов.

Многие часто замечали в адресной строке (URL) расширение html. Наличие данного расширения свидетельствует о том, что разметка данной страницы была осуществлена с помощью языка HTML. В разметке HTML-документов, как и в других языках, стоит строго придерживаться правилам разметки или структуризации HTML-документов.

Структура HTML-документов Её принцип состоит в иерархии документа и валидности (правильности) HTML-кода. Иными словами, Вы должны придерживаться последовательности написания тегов.

Первым следует писать DOCTYPE, который способствует определению кодировки и лучшей интерпретации кода браузерами.

Следом используем связку <html><head> - открывающие части тегов html и head. Как Вы понимаете, открытие тега html - вступительная часть, которая является характеризующей чертой HTML-синтаксиса.

В теге head (между <head> и </head>) указывается заголовок страницы, а также происходит подключение каскадных таблиц, скриптов и тд.

Тег body - непосредственно, "тело" документа, где Вы осуществляете разметку страницы.

И закрывающая часть тега html, которая говорит нам о том, что HTML-синтаксис закончен. Ничего сложно.

Практически структура будет выглядить следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Название страницы</title>
</head>
<body>
Здесь кодируем
</body>
</html>

Параметр windows-1251 в строке:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>

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

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

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

Итак, подведём итог нашей с Вами беседы:

HTML - это не язык программирования, а язык гипертекстовой разметки, который используется в веб-страницах. Структурная единица HTML - тег, каждый из которых обладает своей функцией. Чтобы не допусткать ошибок при разметке, следует соблюдать принцип структуризации HTML-документов. На данный момент ведётся разработка 5 версии HTML.