Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Теги списков 5 страница

Читайте также:
  1. Castle of Indolence. 1 страница
  2. Castle of Indolence. 2 страница
  3. Castle of Indolence. 3 страница
  4. Castle of Indolence. 4 страница
  5. Castle of Indolence. 5 страница
  6. Castle of Indolence. 6 страница
  7. Castle of Indolence. 7 страница
Особенность состоит в использовании таблицы без видимой рамки и возможно небольшого дополнительного отступа внутри ячеек таблицы. Не имеет значения, сколько текста будет размещено на этой странице, он будет оставаться в пределах своего столбца. После добавления таблицы для разметки страницы мы получаем несколько независимых областей, с которыми мы можем работать независимо, задавать цвет фона, шрифты, добавлять вложенные таблицы для разбиения ячеек полученной части еще на более мелкие элементы. Однако создавать большую вложенность таблиц не рекомендуется - так увеличивается размер страницы. Гораздо рациональнее использовать объединение ячеек. <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-кода


Дата добавления: 2015-07-24; просмотров: 105 | Нарушение авторских прав


Читайте в этой же книге: Неразрывный пробел | Изображение в качестве ссылки | Рамка таблицы | Атрибут frame | Теги списков 1 страница | Теги списков 2 страница | Теги списков 3 страница | Атрибуты событий клавиатуры | JavaScript и VBscript | Другие элементы |
<== предыдущая страница | следующая страница ==>
Теги списков 4 страница| Встроенные стили

mybiblioteka.su - 2015-2024 год. (0.009 сек.)