BODY указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза.
Атрибуты:
MARGINHEIGHT – определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape.
TOPMARGIN – определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.
MARGINWIDTH – определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape.
LEFTMARGIN – определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer.
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
LINK – определяет цвет гиперссылок в документе.
ALINK – определяет цвет подсветки гиперссылок в момент нажатия.
VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Страница может состоять из нескольких документов. Один из них главный - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы могут лежать в одной директории (папке), а могут в разных. При помощи ссылок мы связываем эти документы.
Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.
Тег <А></А> делает ссылкой заключенную в него картинку или фразу (текст). Пример:
<A HREF=”1.html”> Весна пришла </A>
В этом примере 1.html – ссылка, Весна пришла – текст при нажатии на который будет работать ссылка.
Для всех ссылок в документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. Пример:
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными.
Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тега <font> и его атрибута color:
Обратите внимание, <font color="…"></font> - прописывается внутри тега <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Ссылка на почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
Как сделать, чтобы при наведении мышки на ссылку была подсказка: в старых спецификациях Html (3.2 и ниже) такое не предусмотрено, стало быть, и старые браузеры не поддерживают (IE ниже 5.0 и NN 4.x и ниже). Зато в спецификации Html 4.0 порывы пользователя задать примечание к тексту учитываются. Итак, за это отвечает атрибут title.
Атрибут title (не путать с тегом <TITLE>) предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его, например, для тега <a>:
Наведите курсор мыши на слова "текст-ссылка", и, если ваш браузер поддерживает спецификацию Html 4.0, то вы увидите свою подсказку.
Как уже упоминалось, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тег <a></a> вставляется не текст, а картинка:
Ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.:), потому же уже известному принципу:
<a href="http://www.melody.ru/music.mp3"> скачать песню </a>
При нажатии на такую ссылку у пользователя появится окно, предлагающее сохранить ему музыкальный файл на его компьютере. Т.е. если файл не является текстовым документом (*.doc, *.txt) или, например, *.html документом, то браузер вашего пользователя обязательно предложит ему скачать такой файл.
Многие уже сталкивались с таким явлением: когда нажимаешь на маленькую картинку, то загружается большая в том же или в новом окне. Делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):
<a href="big.jpg"> <img src="small.jpg"> </a>
В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тега <a></a> есть атрибут target:
Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера.
Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем. Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.
Способ первый - с помощью атрибута name (имя закладки) тега A:
Пример:
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
Пример:
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE>
Заголовки (стих первый, стих второй, стих третий) в примере мы сделали закладками, использовав атрибут тега A - name:
<A name="stih3">Стих третий</A>
Затем сделали на них ссылки:
<A href="#stih3">Ссылка на стих третий</A>
Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>
или
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>
(имя сайта, имя документа + имя закладки)
Способ второй - есть такой атрибут - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title).
Пример:
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE>
Внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому можно использовать любой из этих двух способов (какой больше нравится).
Замечание!!! никогда не делайте так:
<A href="#stih">Ссылка на ...</A><BR>
...
<A name="STIH">Закладка</A>
Если вы, например, напишите имя закладки большими буквами, а, ссылаясь, укажете это имя маленькими, то браузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.
Здесь описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
Элементы:
· H1,H2,...H6 — Используются для создания заголовков текста
· P — Используется для разметки параграфов.
· DIV — Отделяет блок HTML-документа от остальной его части
· ADDRESS — Оформляет текст как почтовый адрес
· BLOCKQUOTE — Оформляет текст как цитату
· BR — Осуществляет перевод строки
· HR — Вставляет в текст горизонтальную разделительную линию.
· PRE — Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста
· LISTING, PLAINTEXT, XMP — Включают в документ (моноширинным шрифтом) блок предварительно отформатированного текста (устаревшие элементы)
H1,H2,...H6 – Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы.
Атрибуты:
ALIGN – определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center.
Пример:
<H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2 ALIGN="center">Заголовок поменьше</H2>
<H6 ALIGN="center">Малюююсенький такой заголовочек</H6>
Итак, H1 – самый важный, H6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Как мы видим, визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающегося </hx> происходит автоматически перенос на другую строку.
Замечание!!! Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тега <font></font>, который устанавливает желаемый размер шрифта:
<font size="+4"> текст </font>
P – Paragraph
Используется для разметки параграфов.
Атрибуты:
ALIGN – определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right, justify. По умолчанию имеет значение left.
Пример:
<body text=”blue”>
<p align="center">
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
</body>
Запомните: никогда нельзя вводить в документ подобную конструкцию:
<p></p>
Пустые элементы <p> без какого-либо содержания (других тегов или текста) могут игнорироваться браузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тег альтернативный <p align="center">:
<center> текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </center>
Конечно, тег <center> хорош, но достался нам он еще с прошлых версий HTML. Пока что этот тег никто не отменял, и его можно использовать, но это не слишком желательно.
DIV – Division
Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Атрибуты:
ALIGN – определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center, justify.
Пример:
...Текст документа...
<DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...
Замечание!!! Параграф не может содержать в себе другие параграфы, и также тег <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя:
<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
и
<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>
Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю:
