<HTML> для начинающих.
ОГЛАВЛЕНИЕ :
Коротко про HTML
Понятие ТЕГ
Иерархия документа
Комментарии
Заголовок документа
Текстовые Блоки документа
Гиперссылки документа
Таблицы документа
Списки документа
Объекты документа
Формы документа
Скрипты
Фреймы
HTML(Hyper Text Marking Language) переводится как "Язык Разметки Гипер Текста". Гипер текст по идеи и есть, то из чего состоит HTML документ. Поэтому, любой объект(картинка, видео, текст, вобщем всё..) можно представить в виде текста. Это значит что загружая любую страничку из интернета вы скачиваете гипер текст, а ваш компьютер преобразует этот текст в страничку. Как я уже говорил, любую информацию можно представить в виде текста, но гипер текст и "текст" отличаются, тем что гипер текст вы можете читать и редактировать, а если открыть картинку в обычном Блокноте(Notepad), то вы увидите "ЗЮКИ", по другому Машинный Код(прочитать такое под силу только компьютеру). Теперь, когда вы смотрите HTML страничку вы видите результат работы компьютера с гипер текстом, и вы всегда имеете доступ к гипер тексту загруженной странички(Спрятать исходный текст веб странички НЕВОЗМОЖНО). Чтобы просмотреть гипер текст странички кликните на меню ВИД(VIEW), в верху окна браузера и выбирете SOURCE(предпоследний пункт). У вас откроется блокнот(Notepad) c исходным гипер текстом. Итак умение програмировать на HTML - умение "писать" веб странички в обычном блокноте. Вы спросите, почему нальзя "писать" странички с помощью Генераторов Гипер Текста? Конечно можно, но я, как и большинство веб мастеров, считаю, что никогда генераторы гипер текстов не будут иметь преимущества и изящества(то что и есть програмирование) над ручной работой, к тому же мне самому приятно когда я сделал это своими руками и мозгами, а вам?
Итак Язык Гипер Текста представляет собой набор команд - Тегов. Теги всегда заключенны в такие скобы < >, вызываются нажатием shift+< или shift+>. Например: <P>ТЕКСТ</P>. Этот пример выведет на экран слово "ТЕКСТ", повторюсь по "деревенски" <напечатать>ТЕКСТ</напечатать>. Полный набор тегов я дам вам позже. Итак Теги это команды! Сначала нам надо открыть команду, делаем это так <Название тега> здесь идёт описание команды, далее нам надо закрыть команду делаем это так </Название тега>. Обратите внимание на "/", я выделил его красным, этот слэш означает закрытие тэга(окончание команды). Большие или маленькие буквы между тегами компьютеру безразлично.
Теперь настала самая важная часть в изучении HTML, надеюсь что у вас не возникнет проблем с нею. Это Иерархия HTML документа. ОК, кто не знает, что слово
иерархия значит я попытаюсь дать как можно лучшее определение:
Порядок подчинения низших (чинов, должностей) высшим; вообще расположение от низшего к высшему или от высшего к низшему.
Например: Законная иерархия Феодализма(Король, Лорд, Воссалы, Крестьяне), вы видите иерархический список, но (Воссалы, Король, Крестьяне, Лорды) не является иерархическим списком.
Итак довайте посмотрим на иерархию HTML документа:
<HTML> |
<HEAD>
|
|
<BODY> .... .... <BODY> |
|
</HTML> |
Ура! Наконец-то мы добрались до описания базовых HTML тегов. Мы начнём с комментариев. Когда веб мастера делают страничку на заказ, то помимо HTML тегов они расставляют комментарии, что бы не запутаться в HTML коде, и вообще HTML код с комментариями сразу становится понятным. Коментарии расставляются в уже знакомых нам < и > скобках, но чтобы компьютер не пробовал читать их как HTML команды, мы делаем это так: <!--Наши Коментарии-->. Наличие !-- в начале даёт компьютору знать что это коментарии. Комментарии не выводятся на монитор и не обязательно должны быть за <HTML> тегом(распологайте где хотите).
Заголовок документа начинается с тега <HEAD> и заканчивается тегом </HEAD>. Между этими тегами должен находиться заголовок документа. Причём по логике заголовок идёт перед
телом документа(то есть перед тегом <BODY>). Заголовок содержит техническую информацию о HTML документе. Такой информацией является:
1. Тег <TITLE>. Этот тег указывает на
название страницы(если этого тега нет, то вместо названия пишется имя файла), например: ваша страница называется index.html как файл, но когда вы открываете эту страницу вы хотите чтобы
она называлась "Добро пожаловать на мою страничку", чтобы зделать это достаточно поставить тег <TITLE>Добро пожаловать на мою страничку</TITLE>. Название выводится на самый верх
вашего браузера. Никаких параметров этого тега не существует.
2.Тег <BASE>. Этот не имеет закрывающего тега и должен иметь хотя бы один параметр.
Например: <BASE href="ваша ссылка"> это выражение озночает, что браузер думает, что он находится в указанном месте. Зачем это надо? Иногда, при создании сайтов
с большим количеством страниц, ссылки на графику лучше указывать без полного адреса страницы. Например браузер находится на моём сайте: webbuilder.boom.ru, а эта страница находится в папке
"library/HTML/a1.html", но при указании ссылки на эту страницу мне не надо писать webbuilder.boom.ru/library/HTML/a1.html мне достаточно написать library/HTML/a1.html, и это равносильно.
Такие трюки часто используют при большом количестве одинаковой графики. Рассмотрим другой пример: <BASE target="FRAME2"> - часто при использовании
фреймов требуется чтобы ссылка из одного фрейма открывалась в другом, и чтобы не писать после каждой ссылки target="FRAME2", можно поставить после <HEAD>
строку <BASE target="FRAME2"> это будет означать, что если кликнуть на ссылку в окне(в котором эта строка), то ссылка откроется в фрейме имя которого "FRAME2".
3. Мета теги - несут в себе
информацию об авторе, почта автора, другая информация об авторе, кодировке страницы, ключевые слова для "Роботов", указания "Роботам", описание содержания страницы. Этот тег, как и BASE, не имеет конечного
тега. Пишется вот так <META NAME="author" content="Андрей Пустовойт">, это означает, что автор странички - Андрей Пустовойт. Более подробно про мета теги ниже:
А сейчас довайте рассмотрим "живой"
пример заголовка документа:
<HEAD>
<TITLE>Приветствую вас на моей страничке</TITLE>
<BASEFONT size="3">
<META NAME="Author" content="Андрей Пустовойт">
<META NAME="Description" content="Учебник HTML">
<META NAME="Generator" content="Андрей Пустовойт">
<META NAME="Robots" content="All">
<META NAME="Keywords" content="HTML, Учебник по HTML, HTML для начинающих">
</HEAD>
Заголовок начинается с тега <HEAD>,
следующим мы поставили тег <TITLE> после этого тега мы пишем название страницы и заканчиваем тегом </TITLE>, далее вы видете незнакомый вам ещё тег - <BASEFONT> этот тег не имеет конечного тега и
должен иметь хотя бы один параметр, например: <BASEFONT size="3" color="red"> эта запись означает что по умолчанию мы будем писать шрифтом красного цвета и размером "3". И затем мы видим 5 мета тегов:
1. Author(автор) content="Андрей Пустовойт"
2. Description(описание) content="Учебник HTML"
3. Generator(создатель) content="Андрей Пустовойт"
4. Robots(Роботы) content="all" - об этом чуть подробней: Когда вы регестрируете свой сайт в какой-нибудь поисковой системе, то вы оставляете адрес странички и через недельку-другую на этот адрес приходит
"робот" который берёт ключевые слова и заносит их в поисковую машину, при этом он проверяет существование странички.
5. Keywords(ключевые слова) content="HTML, Учебник по HTML, HTML для начинающих" эти слова робот заносит в
поисковую машину и теперь набрав в поиске той поисковой системы, которую вы выбрали, любые из этих слов и разных комбинаций этих слов(их робот создаёт сам), вы увидите в списке свой сайт.
И в завершении заголовка мы ставим тег </HEAD>.