Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Программирование, заработок, оболочки

HTML с высоты птичьего полета

Источник: linuxcenter.ru

HTML документ — это документ, разделенный на логические части (заголовки, параграфы, списки, цитаты…), которые размечены специальными небольшими «пометками». Эти «пометки» называются тегами. Комбинация тегов и текст внутри них называется элементом HTML.

Большинство структурных элементов HTML документа заключается в два тега: открывающий и закрывающий. Рекомендуется представлять себе элемент как контейнер, например, тег <P> сообщает браузеру о начале параграфа, </P> — о конце параграфа, а сам текст параграфа содержится между этими двумя тегами как в контейнере.

Почему так важна разметка документа?

Размеченный корректно документ будет работать у пользователей самых разных браузеров и компьютеров. Логическая структура документа всегда будет воспроизведена корректно, а отображение (внешний вид) страницы — в зависимости от настроек браузера посетителя или таблицы стилей.

Документы HTML разделены на две основные части: HEAD («шапка» документа) и BODY («тело» документа). Часть HEAD содержит META информацию, т. е. информацию о самом документе. Самая важная составляющая META информации — это заголовок документа, определяющийся элементом TITLE.

Часть BODY хранит основное содержание документа, т. е. информацию, которая и отображается в браузере посетителя.

Весь документ заключается (хранится) в теги HTML: открывающий <HTML> и закрывающий </HTML>.

Блочные и линейные элементы

Все элементы «тела» (body) документа можно разделить на 2 типа: блочные и линейные.

Блочные элементы — обособленные блоки текста, как правило, отделенные сверху и снизу от соседних элементов переводом строки и занимающие всю ширину страницы. Параграфы, заголовки, объемные цитаты являются блочными элементами HTML.

Линейные элементы не формируют блоков, а используются непосредственно внутри строки текста, например элементы STRONG, A, EM, IMG.

Вот краткий пример, показывающий иерархическую природу документов HTML:

<HTML>
 <HEAD>
  <TITLE>
   Здесь должно быть название документа
  </TITLE>
 </HEAD>
 <BODY>
  <DIV class="bodytext">
   <H1>Главный заголовок</H1>
   <P>Параграф текста с <strong>линейным элементом</strong>.</P>
   <H2>Подзаголовок</H2>
   <P>Другой параграф с <em>линейным элементом</em>.</P>
  <DIV>
 </BODY>
</HTML>

Линейные элементы вложены внутрь блочных, блочные — внутрь элемента BODY, а BODY, в свою очередь, вложен внутрь элемента HTML.

Понимание иерархической структуры языка HTML необходимо для создания правильных и доступных веб-страниц, это ключ к пониманию того, что из себя представляют и как работают документы HTML. Необходимо писать правильные документы, четко соответствующие стандарту HTML, чтобы обеспечить должную совместимость с каскадными таблицами стилей (CSS). Если вы используете CSS для визуального форматирования документов, неправильная вложенность элементов или неправильный код HTML могут привести к непредсказуемым результатам.

Некоторые распространенные элементы HTML

Параграфы (абзацы) текста: <P>какой-то текст</P>

Заголовки: <Hn>какой-то текст</Hn>, где n — число от 1 до 6.

Цитаты и выдержки: <BLOCKQUOTE>какой-то текст</BLOCKQUOTE>

Ссылки: <A href=url адрес ссылки>текст ссылки</A>

Неупорядоченные списки:
<UL>
<LI>текст пункта списка</LI>
</UL>

Упорядоченные списки:
<OL>
<LI>текст пункта списка</LI>
</OL>

Некоторые распространенные элементы HTML и их атрибуты

Атрибуты тега BODY:

bgcolor="шестнадцатиричный код цвета или его название"
background="ссылка"
text="шестнадцатиричный код цвета или его название"
link="шестнадцатиричный код цвета или его название"
vlink="шестнадцатиричный код цвета или его название"

Например:

<BODY bgcolor="#FFFFFF" background="background.gif" text="#000000" link="blue" vlink="purple">

Атрибуты тега IMG:

align="left или right"
width="число в пикселях"
height="число в пикселях"
alt="альтернативное текстовое описание картинки"
border="0 для отсутствия рамки или толщина рамки в пикселях"
vspace="число в пикселях"
hspace="число в пикселях"
title="текстовое описание элемента"

Например:

<IMG src="http://www.glasgowwestend.co.uk/images/jill.jpg" height="194" width="147" hspace="15" align="left" title="Jill - коренная американка" alt="Фотография Jill" border="0">

Устаревшие элементы

Некоторые из описанных выше элементов являются устаревшими и не рекомендуются к использованию стандартом HTML 4 от World Wide Web Consortium (W3c). Это значит, что они могут быть исключены из будущих версий HTML. Пользователям не рекомендуется использовать эти элементы, т. к. подобные или даже лучшие результаты могут быть получены при использовании таблиц стилей. Тем не менее эти элементы все еще работают и могут использоваться вместе с таблицами стилей, чтобы страница нормально отображалась в браузерах, не поддерживающих CSS. Полный список устаревших элементов и атрибутов можно найти на сайте W3c.


Рекомендуемые ссылки:



Похожие статьи:
- Интернет-глупости
- Следи за собой, будь осторожен…
- Верстка таблиц
- Arachnophilia — редактор для веб-мастера и программиста
- Веб-хостинг: кто, где, когда и почему
- Стиль Вашего сайта
- Дайте вашим посетителям текст
- Заработок веб-мастера с помощью малобюджетного проекта
- Какие цвета заставят посетителей вашего сайта возненавидеть вас?
- Создание красивого фона в PhotoShop
- Рациональное использование экранного пространства
- История создания и раскрутки одного сайта (часть 1)
- О преимуществах редактора CSS Top Style Lite


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]