- •Министерство образования и науки Украины методические указания
- •Армянск - 2013
- •1. Цель работы
- •2. Основные положения
- •2.1. Язык разметки гипертекста html
- •2.1.1. Основные понятия
- •2.1.2. Структура документа
- •2.1.2. Основные контейнеры заголовка
- •2.1.3. Html Комментарии
- •2.1.4. Escape-последовательности
- •2.1.5. Теги тела документа
- •2.3. Использование каскадных таблиц стилей css в html
- •2.3.1. Размещение информации о стилях
- •2.3.2. Использование каскадных таблиц стилей(css)
- •2.4. Гипертекстовые ссылки
- •2.4.2. Структура ссылок в html-документе
- •2.4.3. Ссылки на разделы внутри документа
- •2.5. Списки в html
- •2.5.1. Нумерованные списки
- •2.5.2. Ненумерованные списки
- •2.5.3. Вложенные списки
- •2.5.4. Список определений
- •2.6. Графика в html-документах
- •2.6.2. Фоновые рисунки
- •2.6.3. Задание стандартных цветов
- •2.6.4. Горизонтальная линия
- •2.7. Таблицы в html
- •2.7.1. Основные теги таблиц
- •2.7.2.Основные атрибуты таблиц
- •2.8. Верстка html документов
- •2.9. Стандарт xhtml
- •2.10. Валидация html-документов
- •3. Порядок выполнения работы
- •4. Содержание отчёта
- •4.1. Цель работы.
- •4.2. Порядок выполнения работы.
- •5. Контрольные вопросы
- •Библиографический список
2.1.3. Html Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:
<!-- Это комментарий -->
Комментарии могут встречаться в документе где угодно и в любом количестве.
2.1.4. Escape-последовательности
Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе:
левая угловая скобка "<"
правая угловая скобка ">"
амперсанд "&"
двойные кавычки """
Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями:
-
<
<
>
>
&
&
"
"
Существует большое количество escape-последовательностей для обозначения специальных символов, например "©" для обозначения знака ©, ® для значка ® и тп.
Внимание! Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо <.
2.1.5. Теги тела документа
Теги тела документа идентифицируют отображаемые в окне компоненты 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>
<BODY>
<H1>Лабораторная работа №1</H1>
<H2 align=left>1. Цель работы</H2>
<p align=justify>Изучить основные понятия языка разметки гипертекстов HTML,
исследовать структуру HTML-документа,
приобрести практические навыки реализации Web-страниц
c использованием гиперссылок, нумерованных и маркированных списков,
графических элементов и таблиц.</p>
<pre>
Ход работы:
Язык разметки гипертекста - 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>