Блочная верстка div — основы. Блочные элементы Элементы контейнеры html

В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.

Итак HTML документ заключается в контейнер , заголовок в контейнер , а содержание документа в контейнере

. Контейнер , расположенный в заголовке (контейнере ) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования jаvascript, VBScript и т.д.

Пример простейшей HTML странички, содержащей только основные тэги:

Название странички

Содержание простейшей странички

Результат работы указанного кода изображен на рисунке.

Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.

Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:

Форматируемтекст

Для выделения абзаца в тексте используется тэг

В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги

,

,

,

,

,
.

Для формирования списков в теле документа используются контейнеры , и . Причем тэг

    формирует нурмерованный список, тэг
      - маркированный список, а в тэгах
    • помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.

      Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.

      Пример использования гиперссылок представлен на рисунке.

      При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.

      Для вставки изображения на web-страницу используется тэг с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:

      Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга

      «bgcolor» или «background-image». Пример вставки фонового цвета:

      Пример вставки фонового изображения:

      Указанные атрибуты могут быть использованы не только для тэга

      , но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.

      Онлайн учебники на сайт

      Учебник по HTML 4

      Тег-контейнер

      Тег-контейнер

      является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример:

      (Фрагмент документа)

      В этом примере фрагмент HTML-документа обрамляется тегами

      и
      для задания некоторых его свойств. В данном случае все       текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тега
      уровня текста является элемент .

      Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.

      Тег

      Тег-контейнер

      предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением

      ALIGN=CENTER тега

      .

      По существу тег

      является краткой формой следующей записи:
      . Дальнейшее использование тега
      по причинам, отмеченным в предыдущем разделе, также нежелательно.

      Займемся контейнерным Web-дизайном - изучим элементы интернет-страниц - блочные контейнеры.

      Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).

      А в завершение получим от CSS средства управления переполнением.

      В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.

      Для создания блочного контейнера применяется парный тег

      , с помещенным внутри html-кодом - содержимым контейнера. (листинги 10.1-10.3).

      В этом блочном контейнере размещен заголовок и два абзаца.

      Здесь - таблица.

      В этом - видеоролик и абзац. А еще добавили встроенный стиль, выравнивающий текст по центру. Видеоролик так же будет размещен по центру.

      Блочные контейнеры используются чаще, чем встроенные.

      Web-дизайн прошедшего времени и его недостатки

      Не так давно Web-программисты пользовались тремя основными направлениями контейнерного Web-дизайна : текстовым, фреймовым и табличным. Каждый по своему был хорош, но и имел недоработки. С появлением нового вида Web-дизайна - контейнерного, остальные уходят на второй план.

      Текстовый контейнерный Web-дизайн - обычный текстовый документ: абзацы, заголовки, большие цитаты, текст фиксированного формата и таблицы. Основное его преимущество - простой html-код. Недостатки: нудный вид web-страницы, отсутствие средств размещения элементов на Web-странице - только следуют друг за другом.

      Web-страница делится на четыре части: заголовок, полоса навигации, основной контент, сведения об авторе. Во всех страницах сайта все одинаково за исключением основного контента, которое должно быть уникальным.

      Получается, что HTML-код каждой web-страницы почти одинаков (кроме основного содержимого), и при загрузке каждой страницы идет загрузка одной и той же части кода. А чем больше объем файла, тем дольше он загружается (тем дольше ожидание пользователя). Вот бы загружать не весь html-код, а лишь часть - основной контент.

      Вот эту проблему текстовый Web-дизайн и не решает.

      Фреймовый контейнерный Web-дизайн - выход из создавшейся ситуации. Фрейм - выводит в отдельном месте страницы содержимое произвольной Web-страницы, адрес которой прописывается в его параметрах.

      Страница сайта - набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна - повысилась скорость загрузки страницы. Но есть и минусы: фреймы не стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна - табличный.

      Табличный контейнерный Web-дизайн . При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.

      Преимущества:

      Возможность одинакового отображения web-страниц во всех web-браузерах.

      Форматирование таблиц и их ячеек стилями CSS.

      - сложные Web-страницы - размещение различных фрагментов содержимого, увеличение числа колонок текста.

      Недостатки:

      Все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.

      Большой и сложный html-код.

      Так давайте же перейдем к изучению новой разновидности web-дизайна.

      Сущность контейнерного Web-дизайна

      Для размещения отдельных фрагментов содержимого Web-страниц использует блочные контейнеры, с которыми мы познакомились в начале этой главы. Отдельные контейнеры создаются для заголовка Web-сайта, полосы навигации, основного содержимого и сведений об авторских правах. Если основное содержимое имеет сложную структуру и состоит из множества независимых частей, для каждой из них создают отдельный контейнер.

      Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11).

      И что, контейнерный Web-дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web-дизайна и выясним, сможет ли он их решить.

      Непритязательный вид и линейное представление Web-страниц - у текстового Web-дизайна. Мы можем расположить контейнеры на Web-странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.

      - "Монолитность" Web-страниц - у текстового и табличного Web-дизайна. Современные Web-обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18.

      - "Нестандартность" фреймов - у фреймового Web-дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web-обозревателями одинаково.

      Громоздкость HTML-кода - у табличного Web-дизайна. HTML-код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом

      .

      Медленная загрузка Web-страниц - у табличного Web-дизайна. Все Web-обозреватели отображают содержимое контейнеров прямо в процессе загрузки, так что Web-страницы визуально загружаются очень быстро.

      И что, контейнерный Web-дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет...

      Проигрывает табличному в возможности реализации сложного дизайна Web-страниц. Таблица позволяет создать на Web-странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web-страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web-дизайна.

      Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна - "легкого", простого, современного.

      Представление для нашего Web-сайта

      Сначала разработаем схему расположения на Web-страницах соответствующих контейнеров. Лучше всего нарисовать ее на бумаге или в программе графического редактора.

      Классическая схема контейнерного Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.

      Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, ос новное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры .

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

      Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:

      Cheader - стиль для контейнера с заголовком Web-сайта;

      Cnav - стиль для контейнера с полосой навигации;

      Cmain - стиль для контейнера с основным содержимым;

      Ccopyright - стиль для контейнера со сведениями об авторских правах.

      Здесь буква "c" обозначает "container" - контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.

      Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.

      В листинге 10.4 приведен фрагмент HTML-кода Web-страницы index.htm со всеми нужными исправлениями.

      Сохраним Web-страницу index.htm и откроем ее в Web-обозревателе. Что-то изменилось по сравнению с тем, что было ранее? Ничего.

      HTML (Hyper Text Markup Language) : язык гипертекстовой разметки, используется для создания интернет-страниц. Страница, написанная таким образом, представляет собой обычный текстовыи документ, в котором при помощи тегов определяются расположение и оформление текста, графики и др. Все теги пишутся в угловых скобках (< , >)

      Все теги делятся на 2 группы:

      - требующие закрывающего тега (контейнеры );
      - не имеющие закрывающего тега (одиночные).

      Теги-контейнеры записываются так:
      <тег> подопытный объект . Косая черта (символ /) говорит о том, что тег закрывающий.

      Одиночные теги записывают так:
      одна хрень<тег> другая хрень

      Тег может иметь параметры. Параметры тега записываются после него, внутри его угловых скобок через пробел. Например,

      Ниже приведены основные html-теги и их применение.

      Обязательные теги


      - тег-контейнер, открывающий тег пишется в самом начале документа; закрывающий- в самом конце. Заключает в себе всё содержимое документа и сообщает компьютеру, что это действительно html-документ.


      - контейнер, заключает в себе голову html-документа, где пишутся специальные теги. Начинается сразу после , заканчивается между и

      .
      Простой текст, написанный внутри этого контейнера, в браузере никак не отобразится.


      - контейнер внутри контейнера .
      Предназначен для написания в нём заголовка страницы.


      - тело документа, где находится основное содержание. Контейнер должен распологаться между и .
      Имеет много параметров:

      text
      -цвет текста на странице,

      bgcolor
      -цвет фона страницы,

      link
      -цвет ссылок на странице,

      На этом список обязательных тегов заканчивается. Идём дальше...

      Теги - контейнеры


      -необязательный, но необходимый тег. Имеет ценнейший параметр

      href , без использования которого не обходится ни один сайт. Оно и понятно, ведь сочетанием a href образуется ссылка , а какой же сайт без ссылок?!
      Пример: текст, который увидит посетитель


      -устаревший, но надёжный тег для текста. Вот его параметры:

      color
      -цвет шрифта,

      size
      -размер шрифта (в относительных единицах, от 1 до 7)
      и др.


      -используется для выравнивания текста и других объектов по горизонтальному центру страницы


      -предназначен для написания заголовка внутри страницы. Текст внутри тега отображается большим жирным шрифтом и устанавливается по центру. Вообще-то на месте цифры 2 в моём примере может стоять цифра от 1 до 6 - получаются заголовки от самого большого до самого маленького.


      -устанавливает жирное начертание текста.


      -курсивный текст


      -подчёркнутый текст


      -перечёркнутый текст


      -используется для отделения параграфа. Позволяет установить для текста различные отступы.

      Одиночные теги
      -переброс на другую строку


      -горизонтальная черта.


      -размещение картинки на странице.
      У него несколько параметров:

      src , указывает путь к картинке (абсолютный или относительный);

      align , устанавливает расположение картинки. Этот параметр может принимать значения \"center\", \"left\", \"right\".

      alt , подпись к картинке, которая появляется при наведении на неё мышкой.

      border , устанавливает толщину рамки вокруг картинки. Принимает значение от 0 до сколько хочешь.


      HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

      Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

      Все HTML-элементы делятся на пять типов:

      • пустые элементы — , ,
        , , ,
        , , ,
        Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне.