Урок1. Что такое HTML.
Что такое HTML.
HTML (HyperText Markup Language ) - язык управления программой, предназначенной для просмотра web-документов (браузером).
Основным элементом языка HTML является тэг - последовательность символов, заключенная между уговыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем "/" после первой угловой скобки, например:
<p> - тэг, открывающий абзац
</p> - тэг, закрывающий абзац
Некоторые тэги не имеют закрывающих тэгов, например тэг <br>, который сообщает браузеру о разрыве строки, или тэг <hr> - рисующий горизонтальную линию.
Для некоторых тэгов закрывающие тэги не обязательны, например для тэга абзаца <p>, закрывающий тэг не обязателен, но наличие его улучшает читабельность документа и придает ему структуру.
Тэги могут вкладываться друг в друга, например:<b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:
<тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>
HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.
HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так-<TABLE>, или так-<table>, или скажем так-<tAbLe>. Лишние пробелы и переносы тоже не учитываются.
Можно написать
<P> Красная строка.
Следующая строка</P>
и все равно браузер выведет это так:
Красная строка.Следующая строка.
(Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).
Создание документа.
Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов. Лучше воспользуйтесь для этого специализированным редактором для работы с HTML (см. раздел HTML редактор).
Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией
<!DOCTYPE>. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.
Например, строка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
Затем идут следующие строки:
<HTML> - необязательный элемент
<HEAD>-начало заголовка документа.
В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию. Более подробно о метаданных читайте в разделе META-тэги.
Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - utf-8.
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
Следующие две строки нужны для индексации вашей страницы поисковыми системами.
<META NAME="Description" content="краткое описание страницы">
<META NAME="Keywords" content=" ключевые слова через запятую ">
Следующая строка укажет язык таблицы стилей CSS.
<META http-equiv="Content-Style-Type" content="text/css">
Затем следуют описание стилей:
<STYLE type="text/css">
Зададим красный цвет ссылок.
A:link {COLOR: red; TEXT-DECORATION: none}
Зададим цвет посещенных ссылок.
A:visited {COLOR: maroon; TEXT-DECORATION: none}
Зададим цвет ссылки, при клике на ней мышью
A:active {COLOR: fuschia TEXT-DECORATION: none}
Зададим цвет ссылки, при наведении на нее мышью
A:hover {COLOR: black; TEXT-DECORATION: underline}
Зададим цвет фона документа, и параметры шрифта по умолчанию
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
</STYLE> -завершаем таблицу стилей.
Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.
<TITLE>Моя первая страничка</TITLE>
</HEAD>- завершаем заголовок.
После заголовка открываем тело документа
<BODY>
Здесь будет содержание нашего документа.
И наконец, завершаем тело документа и сам документ.
</BODY>
</HTML>
Ваш шаблон будет выглядить так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<META NAME="Description" content="краткое описание страницы">
<META NAME="Keywords" content=" ключевые слова через запятую ">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: maroon; TEXT-DECORATION: none}
A:active {COLOR: fuschia; TEXT-DECORATION: none}
A:hover {COLOR: black; TEXT-DECORATION: underline}
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
</STYLE>
<TITLE>Моя первая страничка</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>
Например:
<P>Мой первый HTML-документ
<A HREF="">ссылка</A></P>
Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на ней курсором.
