Html это Как я могу поместить мой div в нижней части контейнера? HTML контейнеры: верстка и форматирование Как сделать контейнер див с изменяемой высотой.
Читайте также
В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
- иерархических контейнеров и заставок;
- заголовков (от Н1 до Н6);
- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
- горизонтальных отчеркиваний и адресов;
- текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
- математических описаний, графики и гипертекстовых ссылок.
Тело документа – контейнер ВОDY
Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
Название | Код | Название | Код |
aqua | #00FFFF | navy | #000080 |
black | #000000 | olive | #808000 |
blue | #0000FF | purple | #800080 |
fuchsia | #FF00FF | red | #FF0000 |
gray | #808080 | silver | #C0C0C0 |
green | #008000 | teal | #008080 |
lime | #00FF00 | white | #FFFFFF |
maroon | #800000 | yellow | #FFFF00 |
Так, значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать
<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>,
то цвет фона будет белым, текст будет синим, ссылки - зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN =»40″> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.
Теги управления разметкой
Заголовки
Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1>Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ>НЗ> еще меньше и так далее до <Н6>Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.
Ниже на рисунке показан результат использования следующих заголовков:
Заголовок 1
Заголовок 2
Тег
Тег
Применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.
Атрибут АLIGN
Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.
АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.
АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы - на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.
АLIGN=right выравнивание по правому краю. Текст, выравненный по правому краю и не выравненный по левому - концы строк находятся на одном уровне, а начало на разных, - часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.
АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN=сеntеr>. Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выравненный по левому краю.
Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст «обтекать» графический объект. Для этого следует поместить тег туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не «обтекал» графику, а прерывался, необходимо применить тег
c атрибутом СLEAR.
Использование тега <ВR>
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:
Текст будет продолжен, начиная
с ближайшего пустого левого поля.
Текст будет продолжен, начиная
с ближайшего пустого правого поля.
Текст будет продолжен, как
только и левое, и правое поля окажутся пустыми.
Элемент разметки
Тег
Теги управления отображением символов
Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.
Теги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.
Теги <ВIG> и - изменение размеров шрифта
Текст, расположенный между тегами <ВIG>ВIG> или , будет, соответственно, больше или меньше стандартного.
Верхние и нижние индексы
С помощью тегов
Атрибут SIZЕ
Атрибут SIZЕ тега
Атрибут СОLОR
Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.
Теги, управляющие формой отображения, приведены в таблице.
Тег | Значение |
… | Курсив (Italic) |
… | Усиление (Вold) |
… | Телетайп |
… | Подчеркивание |
Перечеркнутый текст | |
… | Увеличенный размер шрифта |
… | Уменьшенный размер шрифта |
… | Подстрочные символы |
… | Надстрочные символы |
<ЕМ>…ЕМ> | Типографское усиление |
<СIТЕ>…СIТЕ> | Цитирование |
… | Усиление |
<СODE>…СODE> | Отображает примеры кода (например, "коды программ") |
Последовательность литералов | |
<КВD>…КВD> | Пример ввода символов с клавиатуры |
… | Переменная |
… | Определение |
… |
Текст, заключенный в двойные кавычки |
Эти теги допускают вложенность, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста.
Создание списков в HTML
Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists
- ), нумерованный список (упорядоченный) (Ordered Lists
- ), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.
Неупорядоченные списки - тег
Ненумерованный список. Ненумерованный список предназначен для создания текста типа:
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
Записывается данный список в виде последовательности:
- первый элемент списка
- второй элемент списка
- третий элемент списка
Теги - это теги начала и конца ненумерованного списка, тег
- (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки -
(List Header). Атрибуты маркеров в ненумерованном списке
Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:
- Тег создает сплошные маркеры
такого типа, как в списках первого уровня по
умолчанию.
- ,
- ) используют для создания списка терминов и их определений. Схема использования тега следующая.
- Термин
- Определение
Определяемый термин записывается на одной строке, а его определение - на следующей, с небольшим отступом вправо. Тег
- позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов
Чем отличаются абзацы от заголовков?
Какие бывают списки?
Какие теги используются для изменения шрифта?Что такое «информация»?
- размером элемента (с учётом того, заданы они явно или нет);
- типом элемента (строчный или блочный);
- схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
- отношениями между элементами в DOM (родительский — дочерний элемент);
- внутренними размерами содержащихся изображений;
- внешней информацией (например, размеры окна браузера).
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок .
- Для элементов с position: relative или position: static содержащий блок формируется краем области содержимого ближайшего родительского блока-контейнера.
- Для элемент с position: fixed содержащий блок определяется областью просмотра.
- Для элемента с position: absolute содержащий блок устанавливается ближайшим предком с заданным position: absolute/relative/fixed
- , то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег
Горизонтальные линейки - тег <НR>
Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.
Преформатированный вывод - тег <РRЕ>
Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.
Применение тега
Текст, помещенный между тегами , мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.
Контейнером называют элемент html-страницы, который предназначен для выделения определенного ее фрагмента. Это может быть абзац, заголовок, цитата, текстовый фрагмент и проч. Браузер никак не выделяет контейнер на html-странице.
При помощи контейнера веб-мастер может "привязать" к определенному элементу html-страницы нужный стиль. Кроме этого, контейнер обеспечивает "привязку" поведения к элементу html-страницы.
Контейнеры бывают двух видов: блочные контейнеры и встроенные контейнеры.
Встроенный контейнер является частью блочного элемента html-страницы. Например, блочным контейнером может быть фрагмент текста абзаца, графическое изображение, которое помещено в абзац и проч.
Для создания встроенного контейнера предназначен парный тег SPAN . Нужный фрагмент блочного элемента помещается внутрь тега SPAN , а в CSS создается нужный стиль, который затем "привязывается" к тегу SPAN .
ПРИМЕР: Block {font-color: red} ...
Ягоды у рябины красного цвета.
Блочные контейнеры
Блочный контейнер формируется при помощи парного тега DIV и используется достаточно часто. В блочный контейнер помещают различные блочные элементы: абзацы, заголовки, таблицы и проч.
Иногда бывает необходимо произвести выравнивание большого блока документа, содержащего не только текст, но и рисунки, таблицы и т.п. Для этих целей используется элемент-контейнер DIV . Спецификация элемента DIV:
ALIGN="выравнивание">
Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.
Отступы
Иногда требуется отобразить блок текста с отступом. Для этого блок текста помещают в элемент-контейнер BLOCKQUOTE . Тогда содержимое этого элемента будет отображаться с небольшими отступами слева и справа, а также отделяться от остального текста пустыми строками.
Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Они используются не только традиционно как метод представления данных, но и как средство форматирования Web-страниц. Документ HTML может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Каждая таблица начинается тегом <TABLE > и заканчивается тегом TABLE >. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом <TR > и заканчивается тегом TR >. Отдельная ячейка в строке обрамляется парой тегов <TD > и TD > или <TH > и TH >. Тег
используется для ячеек заголовка таблицы, а – для ячеек данных. Отличие этих тегов в том, что в заголовке по умолчанию используется полужирный шрифт, а для данных – обычный. Теги
и не могут появляться вне описания строки таблицы . Пример таблицы:
Пример таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Этот пример отобразится в броузере так:
Спецификация тега
:
ALIGN="выравнивание"
BORDER="толщина рамки"
CELLPADDING="расстояние"
CELLSPACING="расстояние"
HEIGHT="высота"
WIDTH="ширина"
Атрибут ALIGN определяет выравнивание таблицы в окне просмотра броузера. Он может иметь одно из двух значений: LEFT (по левому краю) и RIGHT (по правому краю). По умолчанию – LEFT.
Атрибут BORDER управляет толщиной рамки. Значением этого атрибута является число. Это число определяет толщину рамки таблицы в пикселях. По умолчанию толщина рамки – 1.
Атрибут CELLPADDING определяет расстояние в пикселях между рамкой и содержимым ячейки. По умолчанию – 1.
Атрибут CELLSPACING определяет расстояние в пикселях между ячейками таблицы. По умолчанию – 2.
Атрибут HEIGHT определяет высоту таблицы в пикселях.
Атрибут VALIGN определяет вертикальное выравнивание содержимого таблицы. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.
Атрибут WIDTH определяет ширину таблицы в пикселях или процентах от ширины окна броузера.
Спецификация тега
ALIGN="выравнивание"
BGCOLOR="цвет фона"
VALIGN="вертикальное выравнивание"
Атрибут ALIGN определяет выравнивание содержимого всех ячеек строки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.
Атрибут BGCOLOR определяет цвет фона для всех ячеек строки. Его значение можно указывать в символьной нотации или в формате RGB.
Атрибут VALIGN определяет вертикальное выравнивание содержимого всех ячеек строки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.
Спецификация тега
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 тега .
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы . С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Модель визуального форматирования CSS в деталях
1. Модель визуального форматирования
Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных блоков в соответствии с блочной моделью CSS. Положение этих блоков на странице определяется следующими факторами:
2. Определение термина «содержащий блок»
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). Содержащий блок элемента определяется следующим образом:
3. Блочные элементы и блочные контейнеры
Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
,,
- Тег создает маркеры в виде
окружностей.
- Тег создает сплошные квадратные
маркеры.
Упорядоченные списки - тег
Нумерованные списки. Тег
- вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:
<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д. <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С., D. и т.д.
- Тег создает список с нумерацией
в формате а., b., с., d. и т.д.
<ОL ТYРЕ=I> Тег создает список с нумерацией
в формате I., II., III., IV. и т.д.
Список определений - тег
Теги списка (Definition List:
- ,
- ) и список определений. Теги для ненумерованных и нумерованных списков - это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item