|
HTML(Hyper Text Marking Language)
переводится как "Язык Разметки Гипер
Текста". Гипер текст по идеи и есть, то из чего
состоит HTML документ. Поэтому, любой
объект(картинка, видео, текст, вобщем всё..) можно
представить в виде текста. Это значит что
загружая любую страничку из интернета вы
скачиваете гипер текст, а ваш компьютер
преобразует этот текст в страничку. Как я уже
говорил, любую информацию можно представить в
виде текста, но гипер текст и "текст"
отличаются, тем что гипер текст вы можете читать
и редактировать, а если открыть картинку в
обычном Блокноте(Notepad), то вы увидите "ЗЮКИ",
по другому Машинный Код(прочитать такое под силу
только компьютеру). Теперь, когда вы смотрите HTML
страничку вы видите результат работы компьютера
с гипер текстом, и вы всегда имеете доступ к гипер
тексту загруженной странички(Спрятать исходный
текст веб странички НЕВОЗМОЖНО). Чтобы
просмотреть гипер текст странички кликните на
меню ВИД(VIEW), в верху окна браузера и выбирете
SOURCE(предпоследний пункт). У вас откроется
блокнот(Notepad) c исходным гипер текстом. Итак
умение програмировать на HTML - умение
"писать" веб странички в обычном блокноте.
Вы спросите, почему нальзя "писать"
странички с помощью Генераторов Гипер Текста?
Конечно можно, но я, как и большинство веб
мастеров, считаю, что никогда генераторы гипер
текстов не будут иметь преимущества и
изящества(то что и есть програмирование) над
ручной работой, к тому же мне самому приятно
когда я сделал это своими руками и мозгами, а вам?
Понятие ТЕГ
Итак Язык Гипер Текста
представляет собой набор команд - Тегов. Теги
всегда заключенны в такие скобы < >, вызываются
нажатием shift+< или shift+>. Например:
<P>ТЕКСТ</P>. Этот пример выведет на экран
слово "ТЕКСТ", повторюсь по
"деревенски"
<напечатать>ТЕКСТ</напечатать>. Полный
набор тегов я дам вам позже. Итак Теги это
команды! Сначала нам надо открыть команду, делаем
это так <Название тега> здесь идёт описание
команды, далее нам надо закрыть команду делаем
это так </Название тега>. Обратите внимание
на "/", я выделил его красным, этот слэш
означает закрытие тэга(окончание команды).
Большие или маленькие буквы между тегами
компьютеру безразлично.
Иерархия
документа
Теперь настала самая
важная часть в изучении HTML, надеюсь что у вас не
возникнет проблем с нею. Это Иерархия HTML
документа. ОК, кто не знает, что слово иерархия
значит я попытаюсь дать как можно лучшее
определение:
Порядок подчинения низших (чинов, должностей)
высшим; вообще расположение от низшего к высшему
или от высшего к низшему.
Например: Законная иерархия Феодализма(Король,
Лорд, Воссалы, Крестьяне), вы видите
иерархический список, но (Воссалы, Король,
Крестьяне, Лорды) не является иерархическим
списком. Итак довайте посмотрим на иерархию HTML
документа:
<HTML> |
<HEAD>
...
</HEAD> |
<BODY>
....
....
<BODY> |
</HTML> |
Эта таблица представляет собой(условно) HTML
документ. Каждая ячейка таблицы преставляет
собой часть HTML документа. Любой HTML документ
начинается с тега <HTML>, и заканчивается тегом
</HTML> - эти два тега показывают, что это HTML
документ. Следующая пара тегов это <HEAD> и
</HEAD> между этими тегами вы можете вставить
название страницы(в самом верху браузера),
информацию об авторе, срок действия документа,
стиль(CSS), некоторые скрипты и др.. Эти два тега
всегда должны быть после тега <HTML>. Далее идут
теги <BODY> и </BODY> - эти теги и есть самые
"главные", т.к. в них и содержится иформация о
том, что будет показано на мониторе(всё что вне
этих тегов на мониторе показано не будет). И
последний тег, завершающий HTML документ, есть
</HTML>. Он должен всегда быть последним, т.к. он
означает конец HTML документа и всё что за ним это
не HTML. Если вы не заметили, то иерархия HTML
документа наподобие человека, то есть
последовательность тегов идёт по всем правилам
логики <HTML>; <HEAD>(голова); <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>. |
