ВВЕДЕНИЕ
HTML (HyperText Markup Language) - язык разметки гипертекста, читается как (ХТМЛ) или (Эйчь Ти Эм Эл). Его можно заслуженно назвать основным языком интернет. Обычный пользователь, бороздя бескрайние просторы интернета, может даже не подозревать о его существовании, но он присутствует везде, проглядываете ли вы курсы валют, делаете покупку в интернет-магазине или может читаете новый анекдот, HTML молча выполняет свою работу. HTML - это язык разметки, который сообщает броузеру пользователя, каким образом должна быть представлена информация на экране. Файл HTML несет в себе информацию о графике, структуре и содержании WEB-страницы. Преимущество файлов формата HTML в том, что их можно просматривать на различных броузерах и на разных платформах, чем не могут похвастаться, например многие текстовые редакторы.
Информация в HTML представляется в виде "слов"- тегов, каждый из которых имеет своё назначение. Теги определяют границы действия элементов и отделяют элементы друг от друга. Например, тег <TITLE>...</TITLE> создаёт заголовок WEB-страницы
<TITLE>ЗАГОЛОВОК</TITLE>
Каждый тег заключён в угловые скобки <>, не надо забывать, что любое слово заключенное в такие скобки броузер воспринимает как тег и пытается его вывести должным образом. В случае, если вы допустите ошибку в написании тега, броузер просто не сможет его интерпретировать и выдаст вам его вам в виде текста или еще как ни будь.
Так же, каждый тег имеет начальный и конечный элемент (правда существуют и исключения). Оба элемента, как я уже сказал выше, заключёны в угловые скобки. Но, конечный элемент обязательно начинается с косой черты..
Пример:
<FONT> - Начальный элемент тега.
</FONT> - Конечный элемент тега.
В свою очередь, каждый тег имеет ряд атрибутов, которые расширяют его возможности, а атрибутам присваиваются значения. Значения могут быть текстовыми или числовыми. Рассмотрим это на примере:
<FONT size="4" face="Arial Black" color="Gray">Пример действия атрибутов</FONT>
На этом примере, мы видим тег <FONT >...</FONT>, который определяет размер, тип, и цвет шрифта. За каждый из этих параметров, отвечает отдельный атрибут.
size- устанавливает размер шрифта равный 4 пикселям.
fase- определяет шрифт, которым броузер выведет текст сообщения на экран.
color- устанавливает серый цвет шрифта.
А вот в каком виде нам представит этот тег броузер.
Пример действия атрибутов
СТРУКТУРА WEB-СТРАНИЦЫ
Мы рассмотрели основные правила обращении с тегами HTML. Сейчас переходим к рассмотрению состава WEB-страницы.
Все теги HTML можно условно разделить на две категории:
тэги, определяющие структуру (тело) документа, его основные разделы.
тэги, определяющие внешний вид документа графику, расцветку, форматирование и т.д.
Так выглядит простая WEB-страница:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Простая WEB-страница.</title>
</head>
<body>
</body>
</html>
Рассмотрим подробно её состав.
<!DOCTYPE> тег, является первым и обязательным в документе HTML. Он определяет, что это действительно HTML документ, а не XML или ещё нечто подобное. Так же, он сообщает версию языка HTML. Данный элемент не имеет конечного тега.
<HTML>...</HTML>- этот тег, сообщает броузеру о начале и конце документа HTML.
<HEAD>...</HEAD>- включает в себя информацию, типа названия, специальных команд, данных для сценариев, метаданных о др. информацию, которая не отображается на экране.
<TITLE>...</TITLE>- присваивает название странице HTML. Информация заключенная в между тегами будет выводится в строке заголовка броузера.
<BODY>...</BODY>- вся информация находящаяся между этими тегами будет отображаться в видимом поле броузера. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна WEB-страницы. Внутри начального тега BODY можно расположить ряд атрибутов, задающих основные данные о дизайне WEB-страницы.
Список некоторых атрибутов тега BODY:
bgcolor="#000000"-Задаёт цвет фона WEB-страницы.
background="путь к файлу фона"- Определяет рисунок фона WEB-страницы.
text="#ffffff"- Задаёт цвет шрифта.
link="#0000ff"- Задаёт цвет шрифта гиперссылок.
vlink="#99ffff"- Задаёт цвет для просмотренных гиперссылок.
alink="#00ff00"- Задаёт цвет для последней выбранной пользователем гиперссылки.
На вышеописанных примерах, я думаю вы поняли основные принципы HTML и теперь уже в состоянии написать простую WEB-страницу. Но каким же редактором воспользоваться, спросите вы. Об этом ниже.
ТЕКСТОВЫЕ РЕДАКТОРЫ
Спросите у профессионального WEB-дизайнера, каким редактором лучше всего воспользоваться для написания WEB-страниц и он вам почти наверняка ответит, что вам нужен простой текстовой редактор, например (Блокнот). Нет, конечно вы можете воспользоваться программой генератором (WYSIWYG) типа FrontPage. Таких программ на сегодняшний день великое множество, но давайте обсудим их недостатки в сравнении с обычным блокнотом.
У чисто текстовой среды есть масса преимуществ. Во-первых (и это самое главное), текстовые редакторы требуют, чтобы вы на самом деле изучали HTML! Уже после написания нескольких станиц вы заметите для себя, что многие теги вы знаете наизусть. Во-вторых, вы никогда не будете зависеть от каких либо программ. В третьих, вы сможете с легкостью находить ошибки в коде вашей странички, не задумываясь, что это за закорючка такая и зачем она здесь находится.
И наконец ваши WEB-странички станут менее громоздкими в сравнении с теми, что созданы с помощью генераторов, а это главное правило в интернете "Чем меньше, тем лучше."
На ряду с выше упомянутыми программами существует ещё и третий вид. HTML-редакторы. Это по сути те же текстовые редакторы, только с расширенными возможностями. Они имеют панели инструментов для редактирования HTML-кода, мастера для автоматического заполнения тегов, мастера для вставки графики с функцией автоматического определения размера изображения, проверяют написанный код на наличие ошибок и мн. др. Самые популярные из этих программ Allare HomeSite, Hot Dog Pro, SiteAids, HTML Assistant Pro. Все эти программы являются условно бесплатными, но существуют и полностью бесплатные версии этих программ, которые отличаются меньшим количеством функций в сравнении с их коммерческими братьями. Все их можно скачать с сайтов производителей. Я лично, выбрал для себя Allare HomeSite 4.5.1. В ближайшем будущем, на моём сайте, вы сможете найти руководство по работе с этой программой.