Что такое HTML язык и с чем его едят..

Начну, пожалуй, с начала..

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

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
 
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>

смотреть пример

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

Так что же мы написали? и как это читает браузер?

Мысли браузера:

<html> - начало документа.. опять работы привалило.. <head> - смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят? <title> - "название" значит.. это в шапке окна нужно написать его название: Моя первая страничка - опять чайник тренируется.. </title> - все название закончилось.. можно идти дальше.. </head> - ага и в голове кроме названия больше никаких вздорных мыслей не держим.. <body> - "тело" документа всё что написано ниже выставляем на всеобщее обозрение Привет мир!!! - как мило! Достали уже!!! - переносим текст на следующую строчку.. я даже догадываюсь что в ней будет... Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут.. </body> - что всё что ли? Больше ничего не отображать? </html> - ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…>

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

2) Все документы должны иметь вот такой шаблон кода:

<html>- начало документа <head>- начало головы </head>- закрытие головы <body>- начало тела </body>- закрытие тела </html>- конец документа

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

3) О порядке:

Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "ящик маленький" >
</Тег "ящик средний" >
</Тег "большой ящик">

Если писать, например, так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "большой ящик">
</Тег "ящик маленький">
</Тег "ящик средний">

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

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

Полезные советы:

При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!
При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
 
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>

Значительно легче, чем так:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
 
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>

И уж тем более чем вот так:

<html><head><title>Моя первая страничка</title></head><body>Привет мир!!! Меня зовут Карлсон, это моя первая страничка!</body></html>

Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".