Концепция HTML
4 Концепция HTML
4.1 Структура HTML страницы
По современным представлениям электронный документ – это некоторая информационная сущность, у которой можно выделить четыре аспекта: содержание, структуру, стиль, поведение. Содержание определяет информационное наполнение документа, его ценность как источника информации. Структура определяет элементы содержания (абзац, список, таблица, раздел, картинка, объект) и связи между ними (предок - потомок, целое - часть). Стиль задаёт внешнее оформление документа (цвет, гарнитуру и размер шрифта, графические эффекты, выравнивание абзацев). Поведение определяет реакцию документа на события, инициируемые пользователем (нажатие клавиш клавиатуры и мыши, наведение мыши, перемещение фокуса ввода) и программой просмотра (начало или окончание загрузки документа, переход к другому документу).
Так, структура и содержание документа описываются средствами HTML. Стиль документа описывается средствами языка CSS, а поведение – средствами скриптов, фрагментов кода (например JavaScript). Использование CSS позволяет облегчить сопровождение документа, сделав его менее громоздким и более структурированным.
Структура HTML-документа описывается с помощью тегов, имеющих имя, которыми они идентифицируется. Тег (tag) – это элемент разметки, который представляет собой текст, заключенный в угловые скобки < >. Теги управляют отображением информации но при этом сами не выводятся на экран. Теги бывают одиночными, открывающими и закрывающими:
<имя_элемента> отображаемое содержимое </имя_элемента>
Пара из открывающего и закрывающего тега называется контейнером.
Тег может описывать сложный фрагмент структуры, и для определения его параметров используются атрибуты, имеющие имя и значение, в виде строки в кавычках:
<имя_элемента имя_атрибута = "значение атрибута">
Рекомендуемые материалы
У некоторых атрибутов значение отсутствует.
Корневым элементом любого HTML-документа является контйнер HTML, в котором размещается всё содержимое документа. Оно включает две обязательные частей: Head (заголовк) и Body (тело), следующих в указанном порядке.
<HTML>
<Head>
</Head>
<Body>
</Body> </HTML>
Элементы HTML делятся на три группы: заголовочные, блоковые и текстовые. Заголовочные располагаются в разделе заголовка, блоковые описывают структуру документа и содержат текст или другие блоковые либо текстовые элементы. Текстовые элементы содержат непосредственно текст документа и другие текстовые элементы. Текстовые элементы не могут содержать блоковые элементы.
4.2 Раздел заголовка
Из элементов, которые могут употребляться в разделе заголовка документа, рассмотрим теги Base, BaseFont, Meta и Title.
Base. Указывает базовый URL, относительно которого будут разрешаться все относительные URL, встречающиеся в этом документе. URL указывается атрибутом Href (hyper reference – гиперссылка), а имя целевого фрейма, в который будут загружаться соответствующие документы, – атрибутом Target (необязательный атрибут).
<HTML>
<Head>
<Base Href = "http://msdn.microsoft.com/library/index.html">
</Head>
<Body>
<A Href = "../others/toc.html">Click me</A>
</Body> </HTML>
Basefont. Указывает параметры отображения текста в случае, если они не заданы явно. Имеет следующие атрибуты: Size (размер) обязательный атрибут, Color (цвет), Face (гарнитура).
<BaseFont color = "black" Font = "Arial, Tahoma, Verdana" Size = "4">
Meta. Предназначен для внедрения в документ информации о нем самом (метаинформации), которая может быть использована службами поиска документов в Internet.
<Meta http-equiv = "Content-Type" Content = "text/html; CharSet = Windows-1251">
Этот элемент указывает, что тип документа – text/html, а его содержимое представлено в кодировке windows-1251, принятой в русскоязычных версиях ОС Windows. В результате документ после загрузки будет отображен правильно даже в нерусифицированных браузерах (если, конечно, в системе установлены соответствующие шрифты).
Title. Указывает строку, выводимую в заголовке окна браузера.
<Title>An introduction to HTML</Title>
Link. Определяет соотношение между текущим документом и другими документами. Используется для связывания документов со списками стилей:
<link Rel="stylesheet" Type="text/css" Href="acad.css">
4.3 Раздел тела документа
Тело оформляется элементом Body, который является контейнером. Для него определены следующие необязательные атрибуты: ALink (цвет гиперссылок при выборе их пользователем), BgColor (фоновый цвет), BackGround (фоновый рисунок), Text (цвет текста по умолчанию), TopMargin (верхнее поле документа в пикселях), BottomMargin (нижнее поле документа в пикселях), LeftMargin (левое поле документа в пикселях), RightMargin (правое поле документа в пикселях), link (цвет ссылок, не посещенных пользователем), Vlink (цвет ссылок, посещенных пользователем), Scroll (значение "yes" или "no" указывает отображать полосы прокрутки или нет).
<Body Alink = "#FF0000" BgColor = "#FFFFFF" Link = "#0000FF" Text = "#000000" Vlink = "#800080">
4.4 Управление отображением текста
В HTML предусмотрено 6 встроенных стилей для текстовых заголовков, они оформляются элементами H1, H2, ..., H6 (сокр. от heading – заголовок, по аналогии с уровнями заголовков Word). Заголовки верхнего уровня по умолчанию форматируются более крупным шрифтом. Заголовок является контейнером.
Абзацы оформляются элементом P (сокр. от paragraph). По умолчанию абзацы выравниваются влево, для выравнивания по обоим краям можно использовать значение "justify". Закрывающий тег – необязательный, абзац завершается, когда внутри него встречается первый блоковый элемент.
<H1 Align = "Center">Введение в HTML</H1>
<P Align = "Justify">HTML (Hypertext Markup Language)
Текст внутри заголовка или абзаца можно форматировать с помощью текстовых элементов логического и физического стиля.
К элементам логического стиля относятся такие, как address (оформление контактной информации), cite (оформление цитат), code (оформление фрагмента кода, вставленного в текст абзаца) и др.
К элементам физического стиля относятся: Font (определяет параметры шрифта: цвет, гарнитуру и размер, и др.), B (полужирный), I (курсив), U (подчеркнутый), s (перечеркнутый), Sub (нижний индекс), Sup (верхний индекс).
<P>Текст можно выделять <I>курсивом</I>, <B>полужирным</B></P>
<P>Вот формула полной энергии тела: E = mc<Sup>2</Sup>.</P>
Указанных тегов часто недостаточно для полноценного форматирования текста, поэтому многие элементы физического стиля формируются только с использованием таблицы стилей.
Необходимо отметить, что в тексте нельзя употреблять некоторые символы, которые используются для оформления элементов HTML. Например, символы < и >. Их следует заменять соответствующими esc-последовательностями. Также esc-последовательностями обозначаются символы copyright и registered trade mark, специальные символы некоторых европейских алфавитов и др.
4.5 Таблицы
Таблица – наиболее важный элемент, который используется не столько для представления табличной информации, сколько для управления размещением фрагментов документа на экране. Таблица оформляется контейнером Table и содержит группы строк трёх видов: заголовка (THead), тела (TBody) и подвала (TFoot). Первая и последняя – необязательны, тело – обязательно. Строки оформляются элементом Tr и содержат ячейки двух видов: заголовка (Th), и ячейки данных (Td). Например, таблица с заголовком, подвалом и подписью имеет следующий вид:
<Table Align = "Center" Border=1>
<Caption>Сведения о продажах на 08.11.2006</caption>
<THead>
<Tr>
<Th>Наименование продукции</Th>
<Th>Количество</Th>
<Th>Стоимость</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Процессор Intel Pentium IV 1500</Td>
<Td>1,000</Td>
<Td>80,000.00</Td>
</Tr>
<Tr>
<Td>Процессор AMD Athlon 1400</Td>
<Td>1,300</Td>
<Td>84,500.00</Td>
</Tr>
<TFoot>
<Tr>
<Th>Итого</Th>
<Th></Th>
<Th>164,500.00</Th>
</Tr>
</TFoot>
</TBody>
</Table>
Для контейнера Table определены следующие необязательные атрибуты: Align (позволяет управлять горизонтальным выравниванием – "Left", "Center", "Right"), Border (толщина внешней границы таблицы в пикселях), CellSpacing (промежуток между ячейками, заполняемое цветом фона), CellPadding (отступы от всех четырех границ содержимого ячеек от границ ячеек), Height и Width (высота и ширина таблицы, размеры можно в пискелях и в процентах от высоты и ширины окна), BgColor (цвет фона), BackGround (картинка фона таблицы), BorderColor (цвет границы таблицы).
Теги THead, TBody, TFoot и Tr имеют следующие необязательные атрибуты: Align (выравнивание по горизонтали всех ячеек всех строк группы), Valign (выравниванием по вертикали – "Top", "Middle", "Bottom", "BaseLine") и др.
4.6 Гиперссылки
Существует три основных типа гиперссылок: внутренние, внешние и относительные.
Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице между ее разделами.
Внешние (external links), или удаленные (distant links) ссылки – это ссылки на другие Web-серверы.
Относительные (relative links), или локальные (local links), ссылки – это ссылки на другие Web-страницы (или службы Internet), расположенные на одном сервере со страницей, содержащей ссылки.
В каждой ссылке содержится URL (Uniform Resource Locator), или унифицированный локатор ресурсов, являющийся адресом Web-страницы, который отображается в адресном поле. Гиперссылка оформляется контейнером A с атрибутами Href (адрес гиперссылки), Target (имя окна или фрейма, в который будет загружен ресурс). Внутри контейнера можно указать объект (текст или картинку), по которому необходимо щелкнуть мышью для перехода по ссылке.
<A Href = "http://www.microsoft.com" target = "article> Домашняя страница Microsoft </A>
4.7 Списки стилей
Каскадные таблицы стилей (CSS) были реализованы в 1997 году. В качестве применяемой HTML-разметки они стали доступны с версии Internet Explorer 4.0. Стили основаны на разметке, существующей в языке HTML и не являются заменой HTML. Назначение списка стилей – определить оформление того или иного элемента или набора элементов.
Существует три способа добавления информации о стиле в HTML-документ. Первый – использование внешнего списка стилей, который либо импортируется, либо связывается с текущим документом. Второй – включение информации о стилях, действующих в данном документе, в элемент <Head>. И третий – вставка информации о стиле непосредственно в том месте, где этот стиль должен действовать.
Внешний список стилей представляет собой простой текстовый файл, в котором записаны определения стилей для HTML-тегов или классов. Как правило, для обозначения, что данный файл является списком стилей, используется расширение .css (для стилей CSS1) либо .jss (для стилей JSS – JavaScript style sheet, не часто поддерживается браузерами).
Описание стилей или список стилей является набором правил, состоящих из HTML-элемента, класса, или идентификатора. HTML-элемент называется селектором. Ему присваивается определенное свойство, например Font-Family, после которого через двоеточие записывается значение этого свойства. В описании стиля могут использоваться несколько правил, которые отделяются друг от друга точкой с запятой:
{ font-size: 28px}
С появлением таблиц стилей в языке появилось три новых контейнера: Style, Link, Span. Контейнер Style (<Style Type="...">......</Style>) служит для определения таблицы описания стилей, и применяется внутри контейнера Head:
<HTML>
<Head>
<Style>
St1{ }
St2{ }
</Style> </Head>
<Body>
<St1>Sample text 1.</St1><Br>
<St2>Sample text 2.</St2>
</Body> </HTML>
Контейнер Link в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Ниже представлен пример включения внешнего файл в документ.
Внешний файл имеет название StyleSheet.CSS и включает следующее описание стилей:
P {color:blue; font-size: 12px;}
H1 {color:black; font-size: 12px; Font-Style: Arial;
Text-Align: Center;}
Для применения этого описателя стилей, в заголовок документа необходимо включить тег <Link>:
<HTML>
<Head>
<Link Rel=StyleSheet Type="text/css" Hr ef=css.htm>
</Head>
<Body>
<P> Sample text 1.</P>
<H1> Sample text 2.</H1>
</Body> </HTML>
Контейнер Span применяется для переопределения стиля отображения текущего фрагмента текста. Часто Span применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:
<HTML>
<head>
<Style Type="text/css">
H1 {Color:navy; Text-transform: UpperCase; font-size: 18px;
Font-Weight: Bold; }
P {Color:navy; font-size: 12px; Text-
Align: Justify}
</Style> </Head>
<Body>
<Center> <H1>Информационные Ресурсы Internet</h1> </Center>
<P><Span>О</Span>Сети Internet исполнилось 25 лет.</P>
</Body> </HTML>
В данном примере, контейнер Span применен сразу после тега начала параграфа <P>, что позволяет выделить первую букву в отображаемом абзаце. Можно также определить класс стилей и использовать его при помощи атрибута Class:
<Style Type="text/css">
H3.Class1 {font-size: 12px; Color= Blue}
</Style>
.....
<H3 Class="class1">This is a blue text</H3>
В данном примере определен класс заголовков третьего уровня, но можно определить класс, который можно будет применять к любым контейнерам, а не только к заголовкам:
<Style Type="text/css">
all.class1 {font-size: 12px; Color= Blue}
</Style>
Кроме определения классов существует возможность создания поименованных стилей, которые создается как уточнение какого-либо класса:
<Style Type="text/css">
all.class1 {font-size: 12px; Color= Blue}
Если Вам понравилась эта лекция, то понравится и эта - 9. Изучение рынка периодических изданий.
#C1 {Font-Size: 20}
</Style>
....
<H3 Class="class1">This is a blue text</H3>
<H3 Class="class1" Id="C1">This is a blue text</H3>
Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием контейнеров и управлять формой отображаемой информации.