Основы языка
Тех кто считает что html - сложно для понимания я смею заверить что это только иллюзия. Все элементарно просто и логически понятно. Язык состоит из тегов, которые сообщают браузеру определенную информацию и их параметров. Все теги строго определены языком, и подробно описаны в мануалах и учебниках, поэтому мы рассмотрим только самые основные и повсеместно применяющиеся. Важно знать что теги в первую очередь разделяются на открывающие элементы и закрывающие. А теперь запомните раз и навсегда: теги могут включаться один в другой, но они не должны пересекаться! Правильная запись выглядит так:
<Имя_тега1> - открывающий элемент тега1
Содержимое на которое обрабатывается в соответствии с тегом1
<Имя_тега2> - открывающий элемент тега2
Содержимое на которое обрабатывается в соответствии с ними обоими
</Имя_тега2> - закрывающий закрывающий элемент тега2
Содержимое на которое обрабатывается в соответствии с тегом2
</Имя_тега1> - закрывающий закрывающий элемент тега1
Для некоторых тегов закрывающие теги не обязательны. Имя тега может быть записано в любом реестре, это не имеет значения, т.е <HTML> и <html> и даже <hTmL> абсолютно идентичны.
Основа страницы приведена ниже(комментарии в языке html начинаются с "<!--" И заканчиваются "-->" и не отображаются в браузере):
<HTML><!-- Показывает браузеру что данный документ - HTML-страница -->
<HEAD><!-- "Шапка" страницы(не отображается в браузере) -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><!-- Кодировка документа. Об этом ниже. -->
<TITLE><!-- Заголовок страницы -->
Текст заголовка
</TITLE><!-- Окончание заголовка -->
Здесь также могут размещаться многие другие теги заголовков которые мы в этой статье рассматривать не будем, оставив это вам на самостоятельное изучение.
</HEAD><!-- Окончание "шапки" страницы -->
<BODY><!-- Тело документа. Без комментариев. -->
Здесь содержится основная часть HTML-страницы, а именно ее контент, который представляет собой текст маркированный тегами форматирования, конструирования и вставки элементов.
</BODY><!-- Окончание тела документа -->
</HTML><!-- Закрывающая часть тега HTML -->
Разжевываем:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Кодировка - набор символов, согласно которому система воспринимает текст. Кодировок много, но на первых порах достаточно знать что если вы используете операционную систему windows и в тексте есть русские буквы, то кодировка будет windows-1251, а если пишете из-под Unix-подобной системы, например Linux, то кодировка по умолчанию будет koi8-r
<TITLE>Заголовок</TITLE>
Заголовок страницы отображается в верхней части окна браузера рядом с его называнием, и оформляется как обычный текст в одну строчку.
<BODY></BODY>
Для начала рассмотрим параметры самого тега <BODY>, так как они весьма интересны и полезны. С помощью них можно задать цвет текста, фона и ссылок, шрифт, границу вокруг содержимого страницы, фоновый рисунок, отступы...
<body text="#000000"<!-- Цвет текста - черный(#000000 или black) -->
link="#0000ff"<!-- Цвет ссылки - синий(#0000ff или blue) -->
alink="#ff0000"<!-- Цвет активной ссылки - красный(#ff0000 или red) -->
vlink="#800080"<!-- Цвет посещенной ссылки - пурпурный(#800080 или purple) -->
bgcolor="#c0c0c0"<!-- Цветфона - серебристый(#c0c0c0 или silver) -->
background="image.gif"<!-- Фоновый рисунок с относительным адресом(относительно текущей открытой страницы) image.gif можно также использовать и абсолютный адрес(http://sampe.ru/images/image.gif) -->
leftmargin="15"<!-- Отступ слева - 15пикселей -->
topmargin="15"<!-- Отступ сверху - 15пикселей -->
rightmargin="15"<!-- Отступ справа - 15пикселей -->
bottommargin="15"><!-- Отступ снизу - 15пикселей и закрывающая скобка тега BODY -->
Но так никто не пишет, хотя это и работает. Обычно код одного тега записывают в строчку:
<body text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080" bgcolor="#c0c0c0" background="image.gif" leftmargin="15" topmargin="15" rightmargin="15" bottommargin="15">
Кто-то скажет что параметры тега <BODY> использовать нецелесообразно, что гораздо лучше и удобнее применить CSS(Cascade Style Sheets)... Согласен, я и сам активно пользуюсь CSS, но эта статья об основах HTML, а CSS пока оставляю вам на самостоятельное изучение, яндекс и гугль по этому поводу знают очень много!
Тело документа может представлять собой просто текст, текст различного форматирования, может включать картинки, таблицы, звуки, видео, и другие html(и не только) страницы. Как это осуществляется? Очень просто. Начнем с форматирования текста:
Во-первых вам следует уяснить что обычный текст, не содержащий в себе тегов html отображается без переносов строки(т.е. сплошным текстом) и без повторяющихся пробелов(лишние пробелы ставятся с помощью повторяющегося спецсимвола " "). Для переноса строки существует специальный тег <BR>, который не нуждается в закрывающем элементе. Также строки переносят:
* Тег параграфа - <P>. Его действие заключается в обозначении текста как отдельного параграфа - отступ сверху и снизу. Закрывающий элемент "</P>" необязателен, т.к. вставка следующего тега <P> автоматически закрывает предыдущий.
Для параграфа нам на данный момент полезен и интересен будет параметр align(выравнивание). Принимает значения: "left"(по левому краю), "right"(по правому краю), "center"(по центру), "justify"(выравнивание по ширине). Пимер: <p align="center">.
* Тег заголовка <H#>, где # - число от 1 до 6, т.е порядок заголовка(<H1>Самый большой и толстый заголовок</H1>,...переходные варианты...<H1>Заголовок который даже меньше обычного текста, но выделен жирным шрифтом.</H1>). Закрывающий тег нужен чтобы не сделать заголовком весь текст после открывающего тега.
* Если текст поставить между тегов <PRE></PRE>, то текст будет отображен с переносами строки которые вы сделаете, но тут есть один подводный камень - текст не будет автоматически переноситься по строкам, т.е. если вы поставите теги <PRE></PRE> и при этом впишите в них без переносов строки текст скажем страницы на три то он и будет отображаться одной строкой, а хорошего в этом мало. Вывод: осторожнее пользуйтесь этим тегом, гораздо проще порой в редакторе автоматически заменить все переносы строки на <br>.
Изменение начертания текста. Опять таки, затронем самое простое и востребованное
<B> Жирный текст </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<STRIKE> Перечеркнутый </STRIKE>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>
<Font> - тег для изменения шрифта, имеет такие параметры как "size"(размер), "color"(цвет), "face"(имя шрифта, можно указать несколько значений, текст будет отображен тем шрифтом который будет найден у пользователя на компьютере. Проверка производится слева направо.)
<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3" face="Georgia, Tahoma"> Пример 3 </font>
<font size="4" face="Arial" color="red"> Пример 4 </font>
<font size="5" color="lime"> Пример 5 </font>
<font size="6"> Пример 6 </font>
) 
. 
[/off]
| 
как это исправить ?