Ликбез (начнем с NotePad...) / Дизайнеру / Студия брендинга «Свой стиль»

	HTML Tutorial
	Ликбез (начнем с NotePad...)

Некоторые из нас вспоминают о Нем, когда руки чешутся исправить что-нибудь в Config.sys или Msdos.sys, некоторые заглядывают в Него, когда хочется поглядеть код свежескачанной веб-странички, но есть и те, кто использует Его для создания этих самых веб-страничек. Притом "с нуля"! Да, это высший пилотаж. КТО ОН!? - с нетерпением спросите Вы. Ответим - NotePad.

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

Итак, предположим, что не все знают о существовании такой простой и удобной вещи, как NotePad, а по простому - БЛОКНОТ.

Как извлечь NotePad?

Как говорится: Лучше один раз увидеть...

С легкой руки Денниса Ричи, автора языка С, "хорошим тоном" считается начинать изучение нового языка с вывода на экран компьютера фразы "Hello, World!". Не будем и мы изменять сложившейся традиции. Поэтому начнём с создания файла hello.htm . Расширение .htm указывает Windows на то, что этот файл содержит текст на языке HTML (Hyper Text Markup Language - язык разметки гипертекста). А это значит, что при двойном щелчке мышью на этом файле, будет вызываться приложение под названием Internet Explorer (IE), которая относится к разряду браузеров (программам, позволяющим получать и просматривать информацию, размещённую на Web-узлах).

Начнем с того, что рассмотрим структуру программы Вашей первой веб-странички.

Теперь давайте напечатаем текст программы Вашей веб-странички и подробно его разберем.

А сейчас позвольте сделать небольшое отступление:
1. Для того, чтоб научиться чему-небудь, нужно практиковаться и как можно больше (чтобы играть на рояле - нужно играть на рояле). Это касается и программирования. Поэтому тексты программ Вам не удастся скопировать, мы специально сделали так, чтобы Вы немного поработали ручками. Не делайте наших ошибок!
2. Сразу же советуем Вам создавать код программы с отступами и коментариями. Это очень, поверьте, очень!, поможет Вам при правке программы в несколько сотен (а то и тысяч!) строк. Проверенно временем.
Так же отметим, что HTML совершенно равнодушен к регистру. То, что в примерах теги написанны строчными буквами - это только для удобства при работе и отладке.

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

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

Перейдем к разбору программы:
<HTML> </HTML> - это теги начала и конца HTML-документа, они сообщают браузеру, что перед ним тело веб-страницы.
<HEAD> </HEAD> - в этих тегах заключается "шапка" вашей страницы. В ней может размещаеться информация о содержании документа, его авторе, заголовок страницы и т.п.
<TITLE> </TITLE> - а текст, расположенный между этими тегами, будет отображаться, как заголовок Вашей страницы.

- в таких стилизированных скобках распологаются коментарии. Текст между этими тегами не воспринимается браузером.

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

Второе правило, которое Вам нужно запомнить, это то, что IE - не компилятор! Это означает, что при совершении ошибки в коде, Вы не сможете лицезреть столь ожидаемого сообщения Error. Вы просто ничего не увидете, ну а если и увидете, то совсем не то, что ожидали. Можно проверить:

Не стоит забывать, что NotePad - это текстовый редактор, упрощенный, но редактор. С помощью его меню или "горячих клавиш" можно осуществлять копирование (Ctrl+C), вставку (Ctrl+V), поиск по тексту программы, отменять последнее действие (Ctrl+Z) и т.д.

Сохраняем файл hello.htm

Мы весело начали рассказывать про прелести HTML, но не рассказали самого главного: как, после набора текста в NotePad, получить веб-страницу и просмотреть ее в браузере? Исправляемся.
После набора текста программы в NotePad нужно его сохранить, но не просто. Заходим в меню Файл > Сохранить как...

В окне Сохранение устанавливаем Тип файла: на Все файлы(*.*)
И в строке Имя файла: пишем hello.htm, после выбераем нужный путь к Вашей директории и нажимаем "Сохранить".

Дело в том, что если не выбрать Все файлы(*.*), а оставить Текстовые документы, то в итоге получем hello.htm.txt - не HTML-файл, а обычный текстовый документ.
Что касается расширения *.htm, то оно может быть и *.html, большой разницы для воспроизведения в браузере нет. Но фактически, если файлы имеют разные расширения, они имеют разные имена, что очень опасно в работе с гиперссылками. По-этому советуем в Вашем веб-проекте использовать какое-нибудь одно расширение

Смотрим файл hello.htm в браузере

Для того, чтоб теперь открыть наш файл, нужно дважды щелкнуть левой кнопкой мыши на нем, либо в браузере выбрать Файл > Открыть(Ctrl+O), и указать путь к нужному файлу

Правило первой строки,
HTML-документ, отвечающий спецификации, должен начинаться с объявления типа документа HTML и его версии, которое обычно выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.0.
Чтобы сосредоточить основное внимание на изучении языка HTML, мы не будем в каждом примере определять тип документа. Но вы должны помнить, что при публикации в Интернете данная строка крайне желательна!

Редактируем файл hello.htm

Ну вот мы налюбовались нашим творением и нам сразу захотелось добавить еще пару слов. Как это сделать? Вариантов несколько:
1.Открыть наш родной NotePad и в меню Файл > Открыть указать путь к нашему файлу.
2.Во время просмотра в браузере щелкнуть правой кнопкой мыши по полю страницы и из появившегося меню выбрать Просмотр в виде HTML.
3.Во время просмотра в браузере в выпадающем меню Вид выбрать В виде HTML. Наша страница опять появится в NotePad.
После того, как мы отредактируем все, что хотели, нужно сохранить программу. Теперь нам не понадобится повторять длинную процедуру добавления расширения. Поскольку мы редактируем уже готовый HTML-файл, достаточно из меню Файл выбрать Сохранить (Ctrl+S).

Теперь главное не пугаться, что в браузере все осталось по прежнему. Просматриваемую страницу просто нужно обновить с помощью Вид > Обновить(F5) или нажать на соответствующую кнопку панели браузера.

Что ж, мы вооружены (Блокнотом) и, поверьте, очень опасны! Теперь мы можем смело переходить ко всем нюансам и прелестям HTML-языка, поскольку Вы ознакомлены с необходимым минимумом веб-программирования!

Для того, чтобы не засорять Вам голову на первом же занятии мы не использовали в примере 3 довольно важных тега: <META>, <LINK>, <BASE>. Дело в том, что в нашей работе они не очень понадобятся, но когда Вы будете делать сайт для интернета, эти теги смогут Вам очень помочь.

Теги <META>, предназначена в основном для описания и индексирования документа поисковыми машинами. Все тэги META не видны при просмотре документа. Теги <META> вносятся в "шапку" гипертекстового документа - внутри блока <HEAD>...</HEAD>. Тег <META> не имеет закрывающего тега </META>.

Например:

- <META NAME="author" CONTENT="Vasya Pupkin"> - используется для указания имени автора.
- <META NAME="keywords" CONTENT="HTML, WWW, Web, обучение, уроки, ..."> - используется для указания списка терминов и ключевых слов, которые используются при обращении к Вашему сайту поисковой машиной. Длина содержимого поля "content" не должна превышать 1000 символов.
- <META NAME="description" CONTENT="HTML Tutorial web-site."> - используется для указания краткого описания Вашего сайта, которое используется при выводе информации о Вашем сайте на странице поиска. Длина содержимого поля "CONTENT" не должна превышать 200 символов.
- <META HTTP-EQUIV="Refresh" CONTENT="600"> - используется для обновления страницы в циклах времени. Значение 600 означает, что страница будет автоматически обновляться каждые 10 минут (600 секунд).
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251"> - инструкция, которая указывает кодировку страницы, для корректного отображения текста. Для русского языка параметру CHARSET присваивается Windows-1251. Если Вы видете в окне браузера, что-то подобное нижеследующему, то имеют место проблемы с кодировкой!

Тег <LINK> определяет ссылку на файл. Тег LINK может располагаться только в части заголовка HEAD документа. Как правило его используют, чтобы подключить к странице файл стилей .css. Тег <LINK> не имеет закрывающего тега </LINK>.

Например:

- <LINK REL="Stylesheet" HREF="my_style.css" TYPE="text/css">

Существуют и другие инструкции для <META> и <LINK> тегов, но на данном этапе они не имеют практического смысла.

Тег <BASE> определяет базовый URL для всех относительных URL'ов в документе. Тег BASE может располагаться только в части заголовка HEAD документа. Тег <BASE> не имеет закрывающего тега </BASE>.

Например:

- <BASE HREF="http://www.site.com/">

ПОДВОДИМ ИТОГИ.
Справочник тегов.

<HTML> • Структурный тег. Определяет начало и конец HTML документа.
• Синтаксис
<HTML>...</HTML>
• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;

<HEAD> • Структурный тег. Определяет главную часть документа, называемую заголовком. Содержит информацию о данном документе.
• Синтаксис
<HEAD>...</HEAD>
• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;

<META> • Структурный тег. Определяет дополнительную информацию о данном документе.
• Синтаксис
<META>
• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;
• Атрибуты
content = <текст> — устанавливает значение meta-тега.
http-equiv = <текст> — устанавливает информацию, которая будет включена в HTTP заголовок.
name = <текст> — устанавливает имя для meta-информации.

<LINK> • Структурный тег. определяет определяет отношения между текущим и другими документами.
• Синтаксис
<LINK>
• Совместимость
NN 4.0+ • MSIE 2.0+; • Opera 6.0+; • HTML 4.0;
• Атрибуты
href = <url> — определяет целевой документ.
rel = <отношение> — параметр stylesheet определяет связи с внешней таблицей стилей.
title = <отношение> — определяет заголовок для целевого документа.
type = <MIME-type> — определяет тип внешней ссылки. Значение text/css указывает, что внешний документ является каскадной таблицей стилей

<TITLE> • Структурный тег. Определяет название документа.
• Синтаксис
<TITLE>
• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;

<BODY> • Структурный тег. Определяет начало и конец тела документа.
• Синтаксис
<BODY>...</BODY>
• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;
• Атрибуты
alink = <цвет> — устанавливает цвет активных ссылок.
link = <цвет> — устанавливает цвет ссылок по умолчанию.
vlink = <цвет> — устанавливает цвет посещенных ссылок.
text = <цвет> — устанавливает цвет текста.
bgcolor = <цвет> — устанавливает цвет фона.
background = <url> — устанавливает фоновое изображение.


• Совместимость
NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0;