Главная | Обратная связь | Поможем написать вашу работу!

Лабораторная работа 1. Основы структуры HTML-документа

Структура Web-страницы

Перед началом работы с документом необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается тегом <HTML> и им же закрывается.

Содержимое страницы находится между тегами <HTML> и </HTML> и делится на две части, которые заключаются в парные теги <HEAD> и <BODY>, в которые следует разместить, соответственно, заголовок и тело документа:

1. Тег <HEAD> (от английского head — голова) заключает в себе теги заголовка:

· <TITLE>…</TITLE> содержит слова, которые появляются в строке заголовка браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.

· <BASE> - Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа.

· <STYLE> - Используется для вставки в документ таблицы стилей CSS.

· <LINK> - Описывает взаимосвязь документа с другими объектами.

· <META> - Используется для вставки метаданных, используемых поисковыми серверами.

2. В рабочую область браузера (тело документа) выводится все, что находится внутри тега <BODY> (от английского body — тело). Именно внутри этого блока надо размещать текст, рисунки, таблицы и т.п.

Классический пример HTML-документа:

это заголовок документа

это тело документа

<HTML>
<HEAD>
<TITLE>Моя первая Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>

А вот как выглядит:

Вот некоторые атрибуты тега BODY (он должен встречаться в документе не более одного раза):

· TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.

· LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

· BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG: <BODY BACKGROUND = “dog.gif”>

· BGCOLOR – определяет цвет фона документа. Цвет задается словом или кодом RGB: <BODY BGCOLOR = “red”> или <BODY BGCOLOR = “#FF0000”>,

· TEXT – определяет цвет текста в документе: <BODY BGCOLOR = “red” TEXT=“blue”>. Например, в следующем примере задан черный цвет текста на желтом фоне для всей страницы:

BODY TEXT="#000000" BGCOLOR="yellow">...</BODY>

· LINK – определяет цвет гиперссылок в документе, по которым пользователь еще «не ходил»

· ALINK – определяет цвет подсветки гиперссылок в момент нажатия.

· VLINK – определяет цвет гиперссылок на просмотренные пользователем документы. Например, следующий тег устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных:

· BGPROPERTIES = “fixed” – фоновый рисунок не прокручивается вместе со страницей.

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

Несмотря на то, что с помощью атрибутов тега BODY можно задать много полезных параметров HTML документа, в настоящий момент целесообразнее использовать CSS – каскадные таблицы стилей (см далее).

Пример1:

<HTML>

<BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020"

TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050"

TOPMARGIN="30" LEFTMARGIN="40">

...

Текст документа.

...

</BODY>

</HTML>

Форматирование текста

В этом разделе описаны элементы для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д. К таким элементам относятся:

● BASEFONT - Определяет основной шрифт, которым должен отображаться текст документа

● FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами. Вне тегов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT. Атрибуты:

o SIZE – определяет размер шрифта. Возможные значения: целое число от 1 до 7 или относительный размер с указанием знака + или -, тогда абсолютный размер вычисляется путем сложения с базовым размером, определенным с помощью атрибута SIZE элемента BASEFONT: size=4 – абсолютный размер, size= +1 – относительный (на 1 больше, чем базовый размер шрифта).

o COLOR – определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

o FACE – определяет используемый шрифт.

● I - Выделяет текст между начальным и конечным тегами курсивом, например, Текст с <I>курсивом</I>

● EM - Используется для смыслового выделения текста между начальным и конечным тегами (курсивом) – логическое ударение. Результат обычно отображается курсивом. То есть элемент EM по действию практически аналогичен элементу I. Например: Порой в России встречаются <EM>действительно талантливые</EM> веб-мастера. Но только не друг с другом.

● B - Выделяет текст жирным шрифтом текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. Например: Текст с <B>выделенным </B> словом.

● STRONG - Усиленное выделение текста (жирным)

● U - Выделяет текст подчеркнутым

● S, STRIKE - Выделяет текст перечеркнутым

● BIG - Отображает текст увеличенным шрифтом (относительно текущего)

● SMALL - Отображает текст уменьшенным шрифтом (относительно текущего)

● SUP - Отображает текст со сдвигом вверх (верхний индекс)

● SUB - Отображает текст со сдвигом вниз (нижний индекс)

● CODE, SAMP - Оформляют текст как формулу или программный код

● TT - Отображает текст моноширинным шрифтом

● KBD - Выделяет текст, который предлагается набрать на клавиатуре

● VAR - Используется для обозначения в тексте переменных

● CITE - Оформляет текст как цитату или ссылку на источник

Пример2:

<FONT SIZE="+2" COLOR="#AA0000">Увеличенный красный шрифт</FONT>

<FONT SIZE="3" FACE="Courier New" COLOR="Magenta">Моноширинный

фиолетовый текст 3 размера</FONT>

Пример3:

<FONT COLOR="yellow" FACE="Courier" SIZE="2">Устанавливает для текста внутри области действия тега шрифт Courier желтого цвета размера 2</FONT>

Текстовые блоки

В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.

Элементы, которые относятся к разбиению текста на блоки:

1) H1,H2,...H6 - используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы. Атрибуты:

· ALIGN – определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center.

Пример4:

<H1 ALIGN="center">Самый большой заголовок посередине</H1>

<H2>Заголовок поменьше</H2>

...

<H6>Малюююсенький такой заголовочек</H6>

Пример5:

<H1 ALIGN=“center”> Заголовок 1 </H1>

<H2 ALIGN=“RIGHT”> Заголовок 2 </H2>

<H3 ALIGN=“LEFT”> Заголовок 3 </H3>

<H4> Заголовок 4 </H4>

<H5> Заголовок 5 </H5>

<H6> Заголовок 6 </H6>

</Body>

2) P - используется для разметки параграфов, указывая на начало нового абзаца и вставляя пустую строку перед абзацем. Атрибуты:

· ALIGN – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left.

Пример6:

<P ALIGN="center">Это центрированный параграф.<BR>

Текст располагается в центре окна браузера</P>

<P ALIGN="right">А это параграф, выровненный по правому краю.</P>

3) DIV - используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты:

· ALIGN – определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center.

Пример7:

...Текст документа...

...Текст, таблицы, изображения. Выравнивание по центру.

</DIV>

...Текст документа...

4) ADDRESS - находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.

Пример8:

Пишите по следующему адресу:

Калининград, Советский пр., 1<BR>

ФГБОУ ВПО «КГТУ»

</ADDRESS>

5) BLOCKQUOTE - оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.

Пример9:

Деканат ФАПУ выражает благодарность студентам, принявшим участие в вечере специальности:

Иванову Ивану, гр. 12-ИЭ,<BR>

Сидорову Петру, гр. 11-ВТ,<BR>

Архипову Александру, гр. 11-ТМ,<BR>

Локтеву Сергею, гр. 13-ПР<BR>

...

</BLOCKQUOTE>

6) BR - данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега. Атрибуты:

· CLEAR – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения: all – завершить обтекание изображения текстом, left – завершить обтекание текстом изображения, выровненного по левому краю, right – завершить обтекание текстом изображения, выровненного по правому краю.

Пример10:

Первое предложение<BR>Второе предложение на следующей строке

7) HR - вставляет в текст горизонтальную разделительную линию. Атрибуты:

· WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.

· SIZE – определяет толщину линии в пикселах.

· ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа, right – выравнивание по правому краю документа, center – выравнивание по центру документа (используется по умолчанию).

· NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.

· COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer.

Пример11:

Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией.

8) <NOBR>… </NOBR> создает область, в которой текст не разбивается на строки.

9) <WBR> используется в сочетании с <NOBR> и указывает браузеру место, где, в случае необходимости, можно разорвать строку.

10) <PRE>… </PRE> выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и т.д.

11) <CENTER>… </CENTER> - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута ALIGN=center

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

Воспользуйтесь поиском по сайту: