Урок первый

Наш первый урок будет очень простым - мы научимся писать и редактировать текст на языке HTML.
Гелан взмахнул волшебной палочкой и в воздухе повисли буквы

H T M L

Гелан подошел и постучал палочкой по буквам. Каждая из них завертелась и разложилась в слово.

H T M L
HyperText Markup Language

Язык разметки гипертекста - так можно перевести это заклинание на русский язык, но обычно этого не делают.
Простой HTML-документ - это обычный текстовый файл, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе, любым пером на любом свитке.
Сейчас я произнесу еще одно магическое слово - браузер. Этим заклинанием вызывают духа (программу), который смотрит веб-страницы. Дух просматривает код HTML, находит специальные слова на своем языке - символы, называемые тегами (на языке духа это означает "команда"), и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др. Если тег написан неправильно, дух начнет ругаться и откажется повиноваться. В некоторых, особо тяжких случаях, дух свяжется с другими и начнет кидаться непонятными ругательствами, вроде "ошибка 404" :) Чтобы понять эти ругательства надо перейти на следующий курс, поэтому мы не будем на них задерживаться.
Т.к. дух, как и всякие простейшие элементалы, достаточно глуп, то слова на его языке выделяются специальным образом - скобочками - вот так: <тег>.
Иногда этого достаточно, но часто духу требуется еще и пояснение, где заканчивается тег. Вот так: </тег>. Между этими значками пишутся нормальный человеческий текст, понятный даже маглам. В силу примитивности духа, ему все равно как вы пишете <тег> или <ТЕГ>.
Тегов может быть несколько подряд, тогда их пишут, соблюдая последовательность, например (это называется вложенность).
Не ошибитесь в последовательности! Сами знаете, к чему приводят ошибки в заклинаниях!
Переходим теперь к заклинанию создания страниц.
В заклинании обязательно в начале звучат два открывающих тега: <html> и <body>, а в конце должны прозвучать их закрывающие части: </body> и </html>, т.е. так:

<html>
<body>

А здесь лежит все, что вы хотите разместить на страничке

</body>
</html>

Кстати, уже можно достать палочку, произнести эти заклинания и посмотреть что получилось. (Для этого или жмите предварительный просмотр на народе - если вы в его редакторе, или используйте любой текстовый редактор, лучше самый простой - "Блокнот" или "Notepad" - и сохраните файл на своем компьютере, обязательно с расширением .htm или .html !), а после этого заклинанием браузер вызывайте духа и укажите ему, что он должен открыть ЭТОТ файл с компьютера - кнопки меню File и Open.)
Должна была получиться пустая белая страница!
Получилось? Поехали дальше.
Обратите внимание, что написано на самом верху окошка вашего браузера? Нравится? Если нет, то меняем. Это заголовок страницы и он вводится тегами <title> </title>

<html>
<body>

<title> Заглавие вашей страницы </title>

</body>
</html>

И что смотрите? Выполняйте!
Бывает, что браузер - например, Google Chrome - настолько примитивен, что не отображает содержимое тега title. Однако помните, что люди, пользующиеся услугами других духов, его все-таки увидят.
После тега title можно писать текст. Можно писать и до, но лучше не приобретать дурных привычек - правильно написанный текст легче правится и просто считается "хорошим стилем программирования" (т.е. произнесения заклинаний, пардон). :)
Попробуйте это сделать.
Теперь давайте разберемся с текстом.
Текст можно писать "просто так", без всяких тегов. Он будет отображаться некоторым способом, дух его знает каким. Каждый дух знает, что делать с текстом, если к нему не стоит никаких указаний, так что вы уже можете начинать писать. Однако иногда хочется что-нибудь сделать. Например, выделить текст цветом, сделать его жирным или наклонным, начать новую строку или написать его справа, как эпиграф (кто не знает, что такое эпиграф, быстренько обращаетесь к информационному полю планеты магической командой "Гугл" или "Яндекс" и узнаете)
Итак, мы хотим сделать текст отличным от того, что норовит предложить вам простой и наивный дух браузера.
Для задания его параметров есть тег и внутри этого тега можно писать множество комнад. Ну, например:
1. ИЗМЕНИТЬ РАЗМЕР.
Для этого существует команда Size, которая задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию (т.е. когда вы ничего такого не поставили) принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового, т.е. тройки.

Пример. Задание размера шрифта

Шрифт размера 1 
Шрифт размера 2 
Шрифт размера 3 
Шрифт размера 4 
Шрифт размера 5 
Шрифт размера 6 
Шрифт размера 7 

Здесь есть примеры как применения абсолютных значений, так и относительных. Вводите их на ваши свитки, сохраняйте изменения и вызывайте духа браузера (перезагрузить страницу). Должно получиться вот что:

Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7

Кстати, одиночный тег (не требующий тега - закрытия)   означает в переводе на человеческий - перейди на следующую строчку.
Размер можно задать иначе, с помощью тега <H1> </H1>.. Проделайте эту процедуру сами и посмотрите что получится (вместо Н1 можно ставить Н2 и т.д до Н6).
И последнее на сегодняшний урок - это цвет шрифта.
2. ЦВЕТ ШРИФТА.
Добавляется внутрь тега font следующем образом через команду color:

Красный цвет 
Сиреневый цвет 
Синий цвет 
Черный цвет 
Желтый цвет 
Зеленый цвет 

Вводите заклинание на ваши свитки, cнова сохраняйте изменения и вызывайте духа браузера. Должно получиться вот что:

Красный цвет
Сиреневый цвет
Синий цвет
Черный цвет
Желтый цвет
Зеленый цвет

Ну, все на сегодня.
Ловите домашку:
1. Завести себе сайт и создать на нем страничку
2. Написать маленький текстик - можно свое имя повторить, например, на разные лады, или сказать мне что нибудь разными шрифтами с помощью команд SIZE и H.
3. В тексте несколько раз сменить цвета.
4. Прислать мне адрес странички с выполненной домашкой.
Хоть в личном деле, хоть совой, можно посылать ТОЛЬКО адрес. Код странички - не надо.

Моя сова:

Наш первый урок будет очень простым - мы научимся писать и редактировать текст на языке HTML. Гелан взмахнул волшебной палочкой и в воздухе повисли буквы

H T M L

H T M LHyperText Markup Language

Наш первый урок будет очень простым - мы научимся писать и редактировать текст на языке HTML.
Гелан взмахнул волшебной палочкой и в воздухе повисли буквы

H T M L
HyperText Markup Language