Похожие статьи

Стиль Вашего сайта (38,3%)
Самое важное для проекта — его уникальность, узнаваемость. Это касается, как содержания, так и дизайна, т. е. того, как Вы преподносите материал. В статье описываются те тонкости дизайна, которые позволят посетителям Ваших проектов сразу же узнавать их автора или, по крайней мере, видеть «руку профессионала»…

Политический плакат в Сети (36,36%)
Обзор посвящен сайтам, коллекционирующим плакаты «разных времен и народов». Попадаются достаточно интересные плакаты, заставляющие задуматься о духе эпохи, государстве, обществе, цивилизации и прочих высоких материях. Очень познавательно!…

Всегда в курсе последних новостей (35,48%)
Сегодняшнюю статью я решил посвятить обзору нескольких новостных сайтов сети. Почему? Исходя из целей экономии. «Это как?», — наверное, спросите вы. Очень просто. Вы же платите за интернет и, скорее всего, немалые деньги, значит пора начать экономить на газетах :)…

Автор: Jim Byrne
www.mcu.org.uk
Оригинал статьи

Перевод: Земсков Юрий
www.ComputerLibrary.info

Дата публикации 09-09-2003 18:30
Статья просмотрена 6417 раз

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.


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

Похожие статьи

Perl и сокеты. Часть 1 (35,29%)
В этой статье рассматривается один из способов взаимодействия с сокетами языка Perl с помощью стандартного модуля Socket. Предполагается, что читатель знаком с базовым синтаксисом Perl и стеком протоколов TCP/IP. Возможности Perl-модуля Socket рассматриваются на примере клиента службы времени, который выдает текущую дату и время…

Perl и сокеты. Часть 2 (35,29%)
В статье рассматривается работа с сокетами на Perl с помощью стандартного модуля Socket на примере клиента, получающего данные о погоде с weather.yandex.ru. А также работа с сокетами через модуль IO::Socket на примере клиента службы времени…

Квартира для вашего сайта (33,33%)
Статья содержит описание услуг, которые предоставляют хостинг провайдеры на российском рынке. Объясняются такие понятия, как виртуальный сервер, выделенный сервер, парковка, co-location… Также вкратце рассказывается о стандартных сервисах, предоставляемых хостинг провайдерами…

Не заставляйте ваших посетителей ждать (32,84%)
В статье объясняется почему так важен размер страницы, даются практические рекомендации по оптимизации веб-страниц и графики сайта, определяется максимально рекомендуемый размер страницы. Большое внимание уделено вопросу о необходимости использования графических элементов в дизайне сайта…

Практика развития ресурса от лидеров поискового продвижения (31,82%)
Академия народного хозяйства при Правительстве РФ совместно с компанией NetPromoter проводят 19–20 мая 2005 практическую конференцию «Кибермаркетинг. Стратегия и тактика продвижения ресурса». Вниманию слушателей будут предложены доклады и мастер-классы, раскрывающие практические аспекты поискового продвижения…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (1) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…