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

Основные контейнеры заголовка

Стр 1 из 4Следующая ⇒

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к лабораторной работе

“Основа языка разметки гипертекстов HTML”

по дисциплине

" Веб-программирование "

Армянск - 2013

СОДЕРЖАНИЕ

2. Основные положения............................................................................................................................................................... 3

2.1. Язык разметки гипертекста HTML............................................................................................................................... 3

2.1.1. Основные понятия..................................................................................................................................................... 4

2.1.2. Структура документа............................................................................................................................................... 5

2.1.2. Основные контейнеры заголовка....................................................................................................................... 5

2.1.3. HTML Комментарии................................................................................................................................................ 7

2.1.4. Escape-последовательности.................................................................................................................................. 8

2.1.5. Теги тела документа................................................................................................................................................. 8

2.1.6. Уровни заголовков <Hx>........................................................................................................................................ 8

2.1.7. Тег абзаца <P>........................................................................................................................................................... 9

2.1.8. Тег преформатирования <PRE>............................................................................................................................ 9

2.1.9. Разрыв строки <BR>.............................................................................................................................................. 10

2.1.10. Неразрывная строка <NOBR>.......................................................................................................................... 10

2.3. Использование каскадных таблиц стилей CSS в HTML...................................................................................... 11

2.3.1. Размещение информации о стилях..................................................................................................................... 11

2.3.2. Использование каскадных таблиц стилей(CSS)............................................................................................. 12

2.4. Гипертекстовые ссылки................................................................................................................................................. 16

2.4.1. URI и URL.................................................................................................................................................................. 16

2.4.2. Структура ссылок в HTML-документе............................................................................................................ 18

2.4.3. Ссылки на разделы внутри документа............................................................................................................ 18

2.5. Списки в HTML................................................................................................................................................................ 19

2.5.1. Нумерованные списки.......................................................................................................................................... 19

2.5.2. Ненумерованные списки...................................................................................................................................... 20

2.5.3. Вложенные списки................................................................................................................................................. 20

2.5.4. Список определений.............................................................................................................................................. 21

2.6. Графика в HTML-документах..................................................................................................................................... 21

2.6.1. Тег <IMG>.................................................................................................................................................................. 21

2.6.2. Фоновые рисунки................................................................................................................................................... 22

2.6.3. Задание стандартных цветов............................................................................................................................. 22

2.6.4. Горизонтальная линия........................................................................................................................................... 23

2.7. Таблицы в HTML........................................................................................................................................................... 23

2.7.1. Основные теги таблиц............................................................................................................................................ 23

2.7.2.Основные атрибуты таблиц.................................................................................................................................. 24

2.8. Верстка HTML документов.......................................................................................................................................... 25

2.9. Стандарт XHTML........................................................................................................................................................... 27

2.10. Валидация HTML-документов................................................................................................................................. 27

3. Порядок выполнения работы.............................................................................................................................................. 28

4. Содержание отчёта................................................................................................................................................................ 30

5. Контрольные вопросы........................................................................................................................................................... 31

БИБЛИОГРАФИЧЕСКИЙ СПИСОК...................................................................................................................................... 32

1. Цель работы

Изучить основные понятия языка разметки гипертекстов HTML, исследовать структуру HTML-документа, приобрести практические навыки реализации Web-страниц c использованием гиперссылок, нумерованных и маркированных списков, графических элементов и таблиц.

Основные положения

Язык разметки гипертекста HTML

Язык разметки гипертекста - HyperText Markup Language (HTML) является языком, предназначенным для создания гипертекстовых документов. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием различных шрифтов, линий и других графических элементов на любой системе, их просматривающей.

В процессе развития HTML Консорциум Всемирной паутины W3C (англ. World Wide Web Consortium,) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины —опубликовала следующие варианты рекомендаций:

· RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;

· HTML 3.2— 14 января 1997 года;

· HTML 4.0— 18 декабря 1997 года;

· HTML 4.01— 24 декабря 1999 года;

· ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.

· HTML 5 — в настоящее время находится в разработке (параллельно ведётся работа по дальнейшему развитию XHTML (Extensible Hypertext Markup Language — «расширяемый язык разметки гипертекста»). XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису.).

Большинство документов в сети Интернет имеют стандартные элементы, такие, как заголовки, параграфы, нумерованные и маркированные списки и тп. Используя специальные теги HTML, возможно обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы «прочитать» HTML-документ - это WEB-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает разработчик.

HTML-теги могут быть условно разделены на две категории:

· теги, определяющие, как будет отображаться WEB-браузером содержимое документа;

· теги, описывающие общие свойства документа, такие как заголовок или автор документа;

Одно из преимуществ HTML заключается в том, что документ может быть просмотрен на WEB-брaузерах различных типов и на различных платформах.

HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров.

Основные понятия

Все теги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тег и завершающий тег. Для примера приведем теги заголовка, определяющие текст, описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тег выглядит так же, как и стартовый, но отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тег <TITLE> говорит WEB-браузеру о начале заголовка, а тег </TITLE> - о завершении текста заголовка.

Некоторые теги, такие, как <P> (тег, определяющий абзац), не требуют завершающего тега, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

HTML не реагирует на регистр символов, описывающих тег, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы только если они помещены внутрь тегов <PRE> и </PRE>. Более подробно о тегах <PRE> будет написано ниже.

Многие из открывающих HTML-тегов могут содержать дополнительные параметры,называемые атрибутами, которые могут иметь значения (стандартные или устанавливаемые авторами или сценариями). Пары атрибут = значение помещаются перед закрывающей скобкой ">" начального тэга элемента. В начальном тэге элемента может быть любое число (допустимых) пар атрибут = значение, разделенных пробелами. Они могут указываться в любом порядке. Например:

< P align=left >

Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом <HTML>(до него может встречаться только определение типа документа и соответствие стандарту(см. п.2.10)). Данный тег сообщает WEB-браузеру, что ваш документ написан с использованием HTML.

Тег заголовочной части документа <HEAD> должен быть использован сразу после тега <HTML> и более нигде в теле документа. Данный тег содержит общее описание документа. Избегайте размещать какой-либо текст внутри тега <HEAD>. Стартовый тег <HEAD> помещается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а завершающий тег </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

< TITLE > Пример HTML документа </ TITLE >

</HEAD>

...

Основные контейнеры заголовка

Основные контейнеры заголовка — это элементы HTML-разметки, которые наиболее часто встречаются в заголовке HTML-документа, т.е. внутри элемента разметки HEAD:

· TITLE (заглавие документа);

· BASE (база URL);

· META (метаинформация);

· LINK (общие ссылки);

· STYLE (описатели стилей);

· SCRIPT (скрипты).

Элемент разметки TITLE

Элемент разметки TITLE служит для именования WEB-страницы. Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

<TITLE>название документа</TITLE>

Элемент разметки BASE

Элемент разметки BASE служит для определения базового URL(см. п 2.4) для гипертекстовых ссылок документа, заданных в неполной (частичной) форме.

Элемент разметки META

META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа, а также информацию используемую поисковыми системами.

Впервые контейнер META был задействован при принудительной перезагрузке документа браузером через заголовок HTTP-сообщения. В заголовке HTTP-сообщения можно указать оператор refresh. Время, заданное как параметр этого оператора, определяет интервал в секундах, после которого браузер загружает документ, определенный атрибутом URL данного оператора. В контейнере META подобный механизм реализуется следующим образом:

<META HTTP-EQUIV="Refresh" CONTENT="1;

URL=refresh.htm">

В данном случае через одну секунду после загрузки документа браузер должен инициировать загрузку страницы refresh.htm.

Для перекодировки на стороне клиента в заголовок документа необходимо включить META-тег следующего вида(документ подготовлен в кодировке cp1251):

<META HTTP-EQUIV="Content-type"

CONTENT="text/html;

CHARSET=windows-1251">

Кроме Content-type, можно указать и другие операторы. Например, запретить кэширование документа. Необходимость в этом возникает при частом обновлении. Для запрета кэширования достаточно вставить в заголовок META-тег вида:

Pragma — это наследие HTTP 1.0. В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же эффекта, как в случае с Pragma, в заголовке HTML-документа достаточно указать:

<META HTTP-EQUIV="Cache-Control"

CONTENT="no-cache">

С появлением роботов поисковых машин на META-тег была возложена еще одна функция — описание поискового образа документа. Собственно, для описания документа используется два META-тега. Один определяет список ключевых слов, а второй – реферат (краткое содержание документа), который отображается в качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе.

<META NAME="description"

http-equiv="description"

content="Описание содержания документа.">

<META NAME="keywords" HTTP-EQUIV="keywords"

CONTENT="список ключевых слов">

Элемент разметки LINK

В общем случае контейнер LINK имеет следующий вид:

<LINK [REL=тип_отношения] [HREF=URL]

[TYPE=тип_содержания]>

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

Элемент разметки STYLE

Элемент разметки STYLE предназначен для размещения описателей стилей(см п. 2.3). В общем виде запись элемента STYLE выглядит так:

описание стиля/стилей

</STYLE>

Элемент разметки SCRIPT

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. В общем виде запись контейнера выглядит следующим образом:

JavaScript/VBScript-код

</SCRIPT>

или

<SCRIPT [TYPE=тип_языка_программирования]

[SRC=URL]>

</SCRIPT>

Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.

HTML Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где угодно и в любом количестве.

2.1.4. Escape-последовательности

Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе:

· левая угловая скобка "<"

· правая угловая скобка ">"

· амперсанд "&"

· двойные кавычки """

Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями:

<	<
>	>
&	&
"	"

Существует большое количество escape-последовательностей для обозначения специальных символов, например "©" для обозначения знака ©, ® для значка ® и тп.

Внимание! Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо <.

Теги тела документа

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа должно находиться между тегами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

2.1.6. Уровни заголовков <Hx>

При написании HTML-документа, текст может быть структурно разделен на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1 (то есть <H1>), следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>,

где x - цифра от 1 до 6, определяющая уровень заголовка.

2.1.7. Тег абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тега <P>. Если вы не разделите абзацы тегом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры(атрибуты) тега <P>:

<P ALIGN=left|center|right| justify >

Примечание: здесь и далее “|” означает «или».

Атрибут ALIGN тега <P> позволяет устанавливать выравнивание абзаца по левому краю, центру, правому краю и по обоим краям соответственно.

2.1.8. Тег преформатирования <PRE>

Тег преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст начинается <PRE> и заканчивается завершающим тегом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

· перевод строки

· символы табуляции (сдвиг на 8 символов вправо)

· непропорциональный шрифт, устанавливаемый браузером

Использование тегов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.

Ниже представлен текст HTML- документа, содержащего рассмотренные выше элементы:

<HTML>

<HEAD>

<title>Web программирование</title>

</HEAD>

z:\CorvDoc\megalektsii1\WEB_HTML\example\first.html

<BODY>

<H1>Лабораторная работа №1</H1>

<H2 align=left>1. Цель работы</H2>

<p align=justify>Изучить основные понятия языка разметки гипертекстов HTML,

исследовать структуру HTML-документа,

приобрести практические навыки реализации Web-страниц

c использованием гиперссылок, нумерованных и маркированных списков,

графических элементов и таблиц.</p>

<pre>

Ход работы:

z:\CorvDoc\megalektsii1\WEB_HTML\example\first.html

Язык разметки гипертекста - HyperText Markup Language (HTML) является языком,

предназначенным для

создания

гипертекстовых

документов.

</pre>

</BODY>

</HTML>

2.1.9. Разрыв строки <BR>

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

< BODY >

исследовать структуру HTML-документа< BR >,

приобрести практические навыки реализации Web-страниц <BR>

</BODY>

Атрибут CLEAR позволяет расширить возможности тега <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера.

2.1.10. Неразрывная строка <NOBR>

Если вы не хотите, чтобы браузер автоматически переносил строку, то вы можете обозначить ее тегами <NOBR> и </NOBR>. В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно.

Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тег <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

12 3 4 Следующая ⇒

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