- •1. Общие сведения
- •Структура html-документа и элементы разметки заголовка документа
- •Назначение заголовка
- •Отображение содержания элемента title
- •Основные контейнеры заголовка
- •Элемент разметки head
- •Элемент разметки title
- •Элемент разметки base
- •Элемент разметки isindex
- •Применение элемента isindex
- •Применение атрибута prompt
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •Контейнеры тела документа Теги тела документа
- •Тело документа – контейнер body
- •Теги управления разметкой Заголовки
- •Атрибут аlign
- •Теги управления отображением символов
- •Теги, управляющие формой отображения
- •Верхние и нижние индексы
- •Атрибут sizе
- •Атрибут соlоr
- •Создание списков в html
- •Атрибуты маркеров в ненумерованном списке
- •Комментарии в языке html
- •Гипертекстовые ссылки
- •Графика Использование графики в html
- •Атрибуты и их аргументы
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Атрибут usemap
- •Средства описания таблиц в html
- •Создание таблиц в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Применение пустых ячеек
- •Атрибут сеllраdding
- •Атрибуты аlign и valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Использование таблиц в дизайне страницы
- •Создание разноцветных таблиц
- •Html-формы
- •Задание формы — элемент form
- •Атрибут cols
- •Как работают фреймы
- •Создание простой страницы с фреймами
- •Задание фреймовой структуры
- •Подготовка содержимого фрейма
- •Подготовка фрейма main
- •Списки Definition: элементы dl, dt и dd
- •Визуальное представление списков
- •Элементы dir и menu
- •Гиперссылки Гиперссылки и якоря. Введение
- •"Посещение" связанного ресурса
- •Другие соотношения гиперссылок
- •Спецификация якорей и гиперссылок
- •Заголовки гиперссылок
- •Интернационализация и гиперссылки
- •Синтаксис имён якорей
- •Вложение ссылок не допускается
- •Якоря с атрибутом id
- •Недоступные и неидентифицируемые ресурсы
- •Взаимосвязи документов: элемент link
- •Гиперссылки вперёд и назад
- •Гиперссылки и внешние таблицы стилей
- •Гиперссылки и машины поиска
- •Информация пути: элемент base
- •Добавление стиля в html
- •Установка языка по умолчанию для таблиц стилей
- •Инлайн-стиль (внедрённый)
- •Информация о стиле в заголовках: элемент style
- •Типы носителя
- •Внешние таблицы стилей
- •Основные и альтернативные таблицы стилей
- •Спецификация внешней таблицы стилей
- •Каскадные таблицы стилей
- •Media-зависимые каскады
- •Наследование и каскадирование
- •Скрытие данных стиля от пользовательских агентов (па)
- •Ссылки на таблицы стилей в заголовках http
- •Выравнивание, стили шрифта и горизонтальные линии Форматирование Цвет фона
- •Выравнивание
- •Плавающие объекты
- •"Всплывание" объекта
- •Обтекание текста вокруг объекта
- •Элементы стиля шрифта: tt, I, b, big, small, strike, s и u
- •Элементы модификатора шрифта: font и basefont
- •Сценарии (скрипты) Введение
- •Дизайн документов для па, поддерживающих скрипты
- •Элемент script
- •Установка языка скриптов
- •Язык сценариев по умолчанию
- •Локальное объявление языка скриптов
- •Ссылки на элементы html из скрипта
- •Динамическое изменение документов
- •Дизайн документов для па, не поддерживающих сценарии
- •Элемент noscript
- •Скрытие данных скрипта от па
- •Дополнительные возможности html Компоновка документа в html
- •Компоновка html - использование таблиц
- •Использование стилей в html
- •Как использовать стили
- •Внешняя таблица стилей
- •Внутренняя таблица стилей
- •Встроенные стили
- •Раздел заголовка html
- •Элемент head
- •Универсальные указатели ресурсов в html Ссылки в html
- •Универсальные указатели ресурсов
- •Схемы обращения к ресурсу url
- •Сценарии в html
- •Добавление сценария на страницу html
- •Как работать со старыми браузерами
- •Стандартные атрибуты html 4.0
- •Атрибуты событий клавиатуры
- •Атрибуты событий мыши
- •Вы изучили html, что дальше? Краткое заключение
- •Теперь вы знаете html, что дальше?
- •Каскадные таблицы стилей (css)
Дополнительные возможности html Компоновка документа в html
Выше были рассмотрены основные теги HTML. Используя их, уже можно создавать свои страницы. Но создание страницы это не только верстка материалов, но и компоновка всех элементов (меню, заголовок страницы, основное информационное наполнение, баннеры и др.) на странице HTML документа. Если все элементы должны располагаться один за другим, тогда понятно как поступить - размещаем все блоки последовательно друг за другом и получаем результат. А как быть, если два элемента должны размещаться на одном уровне по горизонтали? Например, меню должно находиться слева или справа от текста? Ответ очевиден, использовать свойство HTML тегов, позволяющее вкладывать один тег в другой.
Наиболее распространенным способом компоновки страницы является использование таблиц. Ниже будет рассмотрен этот способ.
Компоновка html - использование таблиц
Как известно тег <table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.
Наберите следующий пример.
<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница. Все, что находится ниже этого текста, располагается в двух
ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p>
<table border="0" width="100%">
<tr><td width="50%" valign="top">Этот текст выводится в левом
столбце.</td><td width="50%" valign="top">А этот текст выводится в
правом столбце.</td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
В этом примере тег HTML <table> используется для деления части Web-страницы на два столбца, причем в данном случае ширина столбцов одинакова. Однако это не является обязательным условием, что показано в следующем примере.
<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница. Все что находится ниже этого текста располагается в двух
ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p>
<table border="0" width="100%">
<tr><td width="20%" valign="top">Этот текст выводится в левом
столбце. Ширина этого столбца 20%</td><td width="80%"
valign="top">А этот текст выводится в правом столбце. Ширина столбца
80%</td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Особенность состоит в использовании таблицы без видимой рамки и возможно небольшого дополнительного отступа внутри ячеек таблицы.
Не имеет значения, сколько текста будет размещено на этой странице, он будет оставаться в пределах своего столбца.
После добавления таблицы для разметки страницы мы получаем несколько независимых областей, с которыми мы можем работать независимо, задавать цвет фона, шрифты, добавлять вложенные таблицы для разбиения ячеек полученной части еще на более мелкие элементы. Однако создавать большую вложенность таблиц не рекомендуется - так увеличивается размер страницы. Гораздо рациональнее использовать объединение ячеек.
<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница, и общего заголовка. Все что находится ниже этого текста
располагается в трех ячейках таблицы, причем для верхней ячейки указан атрибут
colspan="2". Как можно видеть, есть левый столбец и правый столбец, а также
общий заголовок. Для каждой ячейки указан свой цвет фона.</p>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr height="150px"><td width="100%" valign="top" colspan="2" bgcolor="#cccccc">
Этот текст выводится в верхней ячейке таблицы.</td></tr>
<tr height="500px"><td width="20%" valign="top" bgcolor="#dddddd">
Этот текст выводится в левом столбце.
Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">А
этот текст выводится в правом столбце. Ширина столбца 80%</td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Этот же эффект можно получить и применив две таблицы вложенных одна в другую.
<html>
<body>
<p>Часть этой страницы отформатирована с помощью двух столбцов, как
газетная страница, и общего заголовка. Все что находится ниже этого текста
располагается в ячейках таблицы, причем здесь применяется вложенность одной
таблицы в другую. Как можно видеть, есть левый столбец и правый столбец, а
также общий заголовок. Для каждой ячейки указан свой цвет фона.</p>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr height="150px"><td width="100%" valign="top" bgcolor="#cccccc">
Этот текст выводится в верхней ячейке таблицы.</td></tr>
<tr height="500px"><td width="100%">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td width="20%" valign="top" bgcolor="#dddddd">
Этот текст выводится в левом столбце.
Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">
А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table>
</td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Как можно видеть мы получили одинаковый результат, однако в первом случае размер кода получился значительно меньше, и кроме того сам исходный код более понятен.
Использование шрифтов в HTML
Тег <font> в HTML использовать не рекомендуется. Предполагается, что он будет удален в будущей версии HTML.
Даже если его использует множество людей, лучше стараться его избегать и использовать вместо этого стили.
С помощью следующего кода HTML можно определить как размер шрифта, так и тип вывода в браузере:
<html>
<body>
<p>
<font size="2" face="Verdana">
Это параграф.
</font>
</p>
<p>
<font size="5" face="Times">
Это другой параграф.
</font>
</p>
</body>
</html>
Пример выполнения данного HTML-кода
|
Атрибуты шрифта | ||
|
Атрибут |
Пример |
Назначение |
|
size="число" |
size="2" |
Определяет размер шрифта |
|
size="+число" |
size="+1" |
Увеличивает размер шрифта |
|
size="-число" |
size="-1" |
Уменьшает размер шрифта |
|
face="название шрифта" |
face="Times" |
Определяет название шрифта |
|
color="значение цвета" |
color="#eeff00" |
Определяет цвет шрифта |
|
color="название цвета" |
color="red" |
Определяет цвет шрифта |
Тег <font> НЕ должен использоваться.
Тег <font> не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML).
Консорциум World Wide Web (W3C) удалил тег <font> из своих рекомендаций. В будущих версиях HTML, для определения свойств компоновки и вывода элементов HTML будут использоваться таблицы стилей (CSS).
Правильно будет использовать стили - Примеры
Задание шрифта текста
<html>
<body>
<h1 style="font-family:verdana">Заголовок </h1>
<p style="font-family:courier">Параграф</p>
</body>
</html>
Пример выполнения данного HTML-кода
Задание размера шрифта текста
<html>
<body>
<h1 style="font-size:150%">Заголовок</h1>
<p style="font-size:80%">Параграф</p>
</body>
</html>
Пример выполнения данного HTML-кода
Задание цвета шрифта текста
<html>
<body>
<h1 style="color:blue">Заголовок </h1>
<p style="color:red">Параграф</p>
</body>
</html>
Пример выполнения данного HTML-кода
Задание для текста шрифта, его размера и цвета
<html>
<body>
<p style="font-family:verdana;font-size:80%;color:green">
Это параграф, содержащий некоторый текст. Это текст, содержащийся в параграфе.
Это все тот же параграф с текстом.
</p>
</body>
</html>
Пример выполнения данного HTML-кода
Прежде всего: Дочитайте до конца это учебное руководство по HTML!!! В последующих лекциях будет показано, почему некоторые теги, такие как <font>, должны быть удалены из рекомендаций HTML, и как использовать таблицы стилей в документе HTML.
Чтобы больше узнать о таблицах стилей, найдите хороший учебник.
Зачем использовать HTML 4.0?
HTML предназначался для других целей!
Исходный HTML не предполагалось использовать для форматирования документа. Теги HTML должны были определять содержимое документа, например:
<p>Это параграф</p>
<h1>Это заголовок</h1>
Когда в спецификацию HTML 3.2 были добавлены такие теги как <font> и атрибуты цвета, то для разработчиков Web начался просто кошмар. Разработка больших Web-сайтов, где информацию о шрифтах и цвете нужно добавлять на каждую Web-страницу, стала длительным, дорогим и чрезмерно болезненным процессом.
В чем достоинство HTML 4.0 ?
В HTML 4.0 все форматирование можно удалить из документа HTML и хранить в отдельной таблице стилей.
Так как HTML 4.0 отделяет представление от структуры документа, мы получили то, что всегда требовалось: полный контроль за компоновкой представления без потери содержимого документа.
Не используйте атрибуты представления в тегах HTML, если этого можно избежать. Начните использовать стили! Прочтите учебник по CSS, чтобы познакомиться с таблицами стилей.
Не используйте не рекомендованные теги. Просмотрите полный справочник по HTML 4.01, чтобы узнать, какие теги и атрибуты не рекомендовано использовать.
Готовьтесь к использованию XHTML
XHTML является "новым" HTML. Самая важная вещь, которую можно сделать на данном этапе, -- начать писать действительный HTML 4.01 код. Начните также записывать свои теги в нижнем регистре. Всегда закрывайте свои теговые элементы. Никогда не заканчивайте параграф без завершающего </p>.
Примечание: Официальный HTML 4.01 рекомендует использовать теги в нижнем регистре.
Если вы хотите больше узнать о XHTML, почитайте соответствующий учебник.
Проверяйте свои файлы HTML на соответствие HTML 4.01
Документ HTML проверяется согласно Определению типа документа (DTD). Прежде чем файл HTML можно будет проверить, необходимо добавить в качестве первой строки файла правильный DTD.
DTD Strict (строгий) для HTML 4.01 включает элементы и атрибуты, которые рекомендованы к использованию и не появляются в наборах фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DTD Transitional (переходный) для HTML 4.01 включает все из строгого DTD плюс не рекомендованные элементы и атрибуты:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
DTD Frameset (набор фреймов) для HTML 4.01 включает все из переходного DTD плюс также фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Проверьте свой файл HTML с помощью средства проверки W3C
Введите адрес своей страницы в поле формы, показанной ниже:
<html>
<head>
<form method="get" action="http://validator.w3.org/check" target="_blank">
Введите адрес своей страницы в расположенное ниже поле <br />
<br />
<input name="uri" size="50" />
<br /><br />
<input type="submit" value="Validate the page" />
</form>
</body>
</html>
Пример выполнения данного HTML-кода