Купила мама «Коника»,
а Коник без ноги. К чему бы это? Ах да… HTML [ HyperText Markup Language ] – это, на самом деле не язык программирования. Кстати, произноси HTML [эйч ти эм эль] правильно, а не [хэ тэ мэ лэ]! Разберём по частям: HyperText – это специальный текст, содержащий ссылки на другие документы (страницы), т.е. это и есть содержимое страничек на сайте. Markup Language – язык разметки (перевожу для тех кто не умеет). Всё вместе: «Язык Разметки Гипертекста (Текста)». «Ну и что?» - спросишь ты. HTML –предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). HTML отвечает за то, как будут выглядеть картинки, текст и другие элементы на нашей странице. А если точнее, то за каждый «элемент» на странице отвечает специальная метка – тэг ( tag ).
Вскрытие показало...
Если ты просмотришь HTML-код любой страницы любого сайта, то увидишь, что он весь состоит из таких вот конструкций:
<TR>
<TD WIDTH="362" HEIGHT="200" ALIGN="left" VALIGN="bottom">
<IMG SRC="/images/main/logo_ver1.jpg" WIDTH="362" HEIGHT="200">
</TD>
<TD V ALIGN="top">
<DIV CLASS="content">
<H1 STYLE="color:#A52901; font-size:15; font:Tahoma "> Добро Пожаловать на KroBel! </H1>
<P> Очень скоро тебе станут доступны скромные запасы Бельчонка. Кролик дезертировал в самый ответственный момент так, что грызу орехи в одиночку!<BR>
Знаешь что-нибудь о web? Будем сотрудничать! Всем участникам по ореху... пришлю по почте :) </P>
</DIV>
</TD>
</TR> «Слова» заключённые в значки меньше «<» и больше «>» и есть тэги! Но все тэги, которые приведены в примере – необязательные, т.е. если ты хочешь, можешь их написать, не хочешь – можешь не писать. Существует, как минимум 6 обязательных тэгов, описывающих структуру документа HTML . Обязательно, значит, без них ничего работать не будет! Но о них чуть позже. Опять таки в примере можно заметить, что тэги бывают разные: одиночные и парные. <IMG> - одиночный, а вот <P> … </P> - парный: <P> - открывающий, а </P>- закрывающий. Тэг <P> - тэг абзаца представляет собой некий контейнер, внутри которого могут находиться, как текст, так и другие тэги.
Наука Анатомия
Давай договоримся о структуре документа. HTML – нестрогий язык, мне даже иногда кажется, что он слишком многое позволяет разработчикам. Чуть раньше я успел упомянуть, что существует 6 обязательных тэгов, но слово «обязательный» здесь немного преувеличено. Даже если мы напишем в Блокноте такую строчку:
<font color=”#FF0000”>Привет, Мир!</font>, сохраним документ с расширением *.htm и попытаемся открыть файл, то запустится браузер и отобразит текст красного цвета. Это доказывает, что обязательность этих тэгов условная. НО! Что бы и самому не запутаться, и сделать страницу одинаково отображающейся в современных браузерах, рекомендую строго следовать стандарту!
<HTML> - открываем документ
<HEAD>
Служебная информация
</HEAD>
<BODY>
Содержимое страницы
</BODY>
</HTML> - закрываем документ
Что мы видим? Три больших контейнера. Больших не по размеру, а по значению. Здесь можно проследить особенность использования парных тэгов: если мы используем вложенные тэги, т.е. тэг в тэге, то сначала нужно открыть первый тэг, потом открыть второй. Закрывать нужно по аналогии со скобками в арифметике: закрыли внутренний, потом внешний. Смотрим: сначала отрыли < HTML >, потом открыли < BODY >, закрыли </ BODY > и только потом </ HTML >. К «Служебной Информации» в <HEAD></HEAD> можно отнести:
- Заголовок окна страницы <TITLE>Заголовок</TITLE>
- Информация для поисковиков - meta -тэги
- Информация о кодировке страницы
- Ссылки на иконки, файлы стилей CSS и прочее…
Всегда соблюдай структуру документа HTML . Это поможет избежать глупых ошибок!
Давай договоримся, что тэги и их атрибуты мы будем писать ЗАГЛАВНЫМИ буквами, а свойства атрибутов в кавычках приписными. Например так:
<IMG SRC="/images/main/logo_ver1.jpg" WIDTH="362" HEIGHT="200">.
Пока на этом закончим и перейдём к §1 «Текст на странице»
P.S. Проработай сам все примеры. Меняй значения атрибутов и смотри что получается!