Иногда бывает необходимо произвести выравнивание большого блока документа, содержащего не только текст, но и рисунки, таблицы и т.п. Для этих целей используется элемент-контейнер DIV . Спецификация элемента DIV:
ALIGN="выравнивание">
Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.
Отступы
Иногда требуется отобразить блок текста с отступом. Для этого блок текста помещают в элемент-контейнер BLOCKQUOTE . Тогда содержимое этого элемента будет отображаться с небольшими отступами слева и справа, а также отделяться от остального текста пустыми строками.
Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Они используются не только традиционно как метод представления данных, но и как средство форматирования Web-страниц. Документ HTML может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Каждая таблица начинается тегом <TABLE > и заканчивается тегом TABLE >. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом <TR > и заканчивается тегом TR >. Отдельная ячейка в строке обрамляется парой тегов <TD > и TD > или <TH > и TH >. Тег
Теги
Пример таблицы:
Этот пример отобразится в броузере так:
Спецификация тега
ALIGN="выравнивание" BGCOLOR="цвет фона" COLSPAN="количество ячеек" HEIGHT="высота ячейки" ROWSPAN=" количество ячеек " VALIGN="вертикальное выравнивание" WIDTH="ширина ячейки" Атрибут ALIGN определяет выравнивание содержимого ячейки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER. Атрибут BGCOLOR определяет цвет фона для ячейки. Его значение можно указывать в символьной нотации или в формате RGB. Атрибут COLSPAN позволяет объединить несколько соседних ячеек по горизонтали. Значение этого атрибута – количество объединяемых ячеек. Атрибут HEIGHT определяет высоту ячейки в пикселях. Атрибут ROWSPAN позволяет объединить несколько соседних ячеек по вертикали. Значение этого атрибута – количество объединяемых ячеек. Атрибут VALIGN определяет вертикальное выравнивание содержимого ячейки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE. Атрибут WIDTH определяет ширину ячейки в пикселях.
Вопросы для закрепления. 4. Домашние задание: 1. Создайте таблицу, которая в первой строке содержит одну ячейку, во второй – две, в третьей – три ячейки. 2. На практике
понаблюдайте эффект использования
различных значений атрибута ALIGN
тега 7 ответов HTML изначально был создан, чтобы помещать содержимое документов в какую-то структуру, понятную для компьютеров. Имея это в виду, тег p должен содержать все, что было бы структурировано как абзац, если содержимое страницы должно было быть превращено в печатный документ. Элементы div и span зарезервированы как контейнеры общего назначения для облегчения формирования и группировки связанных элементов, чтобы обеспечить дополнительные уровни структуры, возможно, коррелируя со страницами в текстовом документе. В некоторых случаях теги p должны содержать другие элементы, такие как anchor (a), изображение (img) и другие встроенные элементы, потому что они напрямую связаны с содержимым остальной части и имеет смысл группировать их таким образом, или текст остальной части параграфа содержит более подробное описание. Однако, если нет дополнительного описания этих элементов, нет смысла размещать их в абзаце просто как удобный контейнер; a div было бы более уместным. В общем, абзац должен содержать один абзац текста и любые непосредственно связанные или описанные элементы. В абзаце ничего другого не имеет смысла. UPDATE : HTML5 также добавляет ряд других семантических "контейнерных" элементов, включая article , nav , header , section и aside .
Разница между этими тремя (и многими другими) тегами - это их смысловое значение. Стандарт HTML включает в себя оба тега со специфическими смысловыми значениями ( Для абзацев, для выделенного текста и т.д.) И теги без смыслового значения. Последние являются и , которые используются для идентификации содержимого блока или встроенного уровня, которое необходимо идентифицировать (используя атрибут class= или id=), но для которого семантически-специфичный тег не существует. Например, можно написать Hi, my name is John Doe. - указывая на то, что это абзац (который браузер уже имеет представление о том, как обращаться), а часть его содержимого - это имя (что означает абсолютно ничего ). браузер, если CSS или JavaScript не использует его).Таким образом, эти теги невероятно полезны как при добавлении дополнительной информации в HTML-документ, который не вписывается в семантические теги, поставляемые стандартом (см. hCard спецификации для отличного примера) и для применения визуальной (CSS) или функциональной (JavaScript) структуры к документу без изменения его семантики.
Это элемент блочного уровня, который должен содержать абзац, состоящий из текста, встроенных элементов, которые изменяют этот текст ( - это элемент уровня блока, используемый для разделения страницы, почти всегда в сочетании со стилями CSS.
Ну, я честно не использую этот тег, который часто. Это встроенный элемент, и я использую его обычно, когда я хотел бы применять стили к части текста, которая не принесет пользы от использования чего-то большего смысла, например тегов и .
Я думаю, что создатели страниц должны использовать семантическую разметку, что означает, что создаваемая ими разметка должна передавать значение (а не презентацию). и Имеют разные значения. Первый используется для определения раздела (или раздела) HTML-страницы, а второй - для определения абзаца текста.
Мне было трудно смотреть и (X) HTML-теги определяют, какой текст они окружают. Это и адрес, это ссылка, это абзац и т.д.... Это то, на что они способны, на мой взгляд. Мне было бы интересно услышать больше или даже исправления по тому, что я здесь написал.
Элемент p представляет абзац. Займемся
контейнерным
Web-дизайном
- изучим элементы интернет-страниц - блочные контейнеры. Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).
А в завершение получим от CSS средства управления переполнением. В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.
Для создания блочного контейнера
В этом блочном контейнере размещен заголовок и два абзаца.
Здесь - таблица.
В этом - видеоролик и абзац. А еще добавили встроенный стиль, выравнивающий текст по центру. Видеоролик так же будет размещен по центру. Блочные контейнеры используются чаще, чем встроенные. Не так давно Web-программисты
Текстовый контейнерный Web-дизайн
- обычный текстовый документ: абзацы, заголовки, большие цитаты, текст фиксированного формата и таблицы. Основное его преимущество - простой html-код. Недостатки: нудный вид web-страницы, отсутствие средств размещения элементов
Web-страница делится на четыре части: заголовок, полоса навигации, основной контент, сведения об авторе. Во всех страницах сайта все одинаково
Получается, что HTML-код каждой web-страницы почти одинаков (кроме основного содержимого), и при загрузке каждой страницы идет загрузка одной и той же части кода. А чем больше объем файла, тем дольше он загружается (тем дольше ожидание пользователя). Вот бы загружать не весь html-код, а лишь часть - основной контент. Вот эту проблему
Фреймовый контейнерный Web-дизайн
Страница сайта
-
набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна
- повысилась скорость загрузки страницы. Но есть и минусы: фреймы не
стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна
- табличный.
Табличный контейнерный Web-дизайн
. При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.
Преимущества:
Возможность одинакового отображения web-страниц во всех web-браузерах.
Форматирование таблиц и их ячеек стилями CSS.
-
сложные Web-страницы - размещение различных фрагментов содержимого, увеличение числа колонок текста.
Недостатки:
Все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.
Большой и сложный html-код.
Так давайте же перейдем к изучению новой разновидности 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-дизайна
(и не только контейнерного) показана на рис. 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-теги и их применение.
text
bgcolor
link
На этом список обязательных тегов заканчивается. Идём дальше...
href
, без использования которого не обходится ни один сайт. Оно и понятно, ведь сочетанием a href
образуется ссылка
, а какой же сайт без ссылок?!
color
size
src
, указывает путь к картинке (абсолютный или относительный);
align
, устанавливает расположение картинки. Этот параметр может принимать значения \"center\", \"left\", \"right\".
alt
, подпись к картинке, которая появляется при наведении на неё мышкой.
border
, устанавливает толщину рамки вокруг картинки. Принимает значение от 0 до сколько хочешь.
Влад Мержевич Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
Такой элемент занимает всю доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки. К блочным элементам относятся
контейнеры И др. Допускается вкладывать один блочный элемент внутрь другого, а также размещать
внутри них встроенные элементы (, например).
Запрещено добавлять внутрь встроенных элементов блочные (пример 1). Пример 1. Использование блочных элементов
Lorem ipsum dolor sit amet... В данном примере абзац (тег
) вставляется
внутрь контейнера Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для
новичков, которые еще не понимают разницы между ними. К тому же браузеры научились
отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее,
рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу
без ошибок. По умолчанию ширина блока вычисляется автоматически и занимает все доступное
пространство. Здесь следует оговорить, что под этим подразумевается. Например,
если тег Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации
CSS четко указано, что ширина складывается из суммы следующих параметров: ширины
самого блока (width
), отступов (margin
),
полей (padding
) и границ (border
).
В примере 2 показано создание слоя, в котором присутствуют все эти компоненты. Пример 2. Ширина слоя
В результате данного примера получим слой шириной 342 пиксела. На рис. 1
показано, из чего складывается ширина слоя. Рис 1. Ширина блочного элемента В том случае когда
в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width
. Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается
как auto
, это позволяет вписывать слой в окно браузера,
не принимая в расчет значения установленных полей. Если изменить ширину на 100%,
то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки. Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано
создание трех слоев, ширина которых определяется в процентах. Пример 3. Ширина слоя в процентах
Lorem ipsum dolor sit amet... Результат примера показан на рис. 2. Рис. 2. Отображение ширины слоев в браузере Ширина первого слоя в данном примере (layer1
)
установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя
(layer2
) ширина также задана 100%, но поля определяются
для внутреннего абзаца (тег
). За счет
этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3
)
вообще не применяется свойство width
, поэтому оно
определяется по умолчанию — auto
. В таком
случае слой будет занимать всю ширину окна браузера без всяких горизонтальных
полос. Способ установки ширины зависит от применяемого макета и выбора разработчика,
но в любом случае нужно учитывать особенности блочных элементов и создавать
универсальный код. С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height
и добавляет к нему еще значение margin
,
padding
и border
.
Если высота слоя не установлена явно, то она вычисляется автоматически исходя
из объема содержимого. Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно
превышает указанную высоту (пример 4). Пример 4. Высота слоя
Результат данного примера продемонстрирован на рис. 3. Рис. 3. Высота блока в разных браузерах Видно, что браузер оставляет высоту неизменной,
за счет чего текст не помещается в блоке и накладывается поверх слоя. Цвет фона элемента проще всего устанавливать через универсальное свойство background
.
Фоном при этом заливается область, которая определяется значениями
width
, height
и padding
(рис. 4). Рис. 4. Область слоя, которая заполняется фоновым цветом Таким образом, margin
не принимает участия в формировании
цветной области. Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается
и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку
внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку,
то увидим совершенно противоположную картину (рис. 5). А все потому, что
Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet
Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox. а. Internet Explorer 7 б. Firefox, Internet Explorer 8+ Рис. 5. Отображение рамки в браузерах В примере 5 показано, как создать код для получения подобной границы. Пример 5. Пунктирная рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном
фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически
одинаковым. Блочные элементы выступают в качестве основного строительного материала при
верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с
новой строки и занимают всю доступную ширину области, в которой располагаются. Спецификация CSS определяет, что высота и ширина элемента определяется не только
значениями height
и width
,
но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане
делятся на две части: одни поддерживают в этом вопросе спецификацию, другие
же ее игнорируют и поступают по-своему. Это создает трудности разработчикам,
которые желают делать универсальные веб-страницы. Можно только посоветовать
ограниченно использовать свойства width
и height
,
поскольку по умолчанию браузер применяет аргумент auto
,
который заставляет настраивать размеры элемента автоматически. |
