Структура html-документа.

АКВТ.2101.ЛР27.0300

ЗНАКОМСТВО С ЯЗЫКОМ HTML. СОЗДАНИЕ HTML-ДОКУМЕНТА.

ЦЕЛЬ РАБОТЫ

1.1. Научиться создавать простейшие Web-страницы.

1.2. Изучить способы форматирования текста.

1.3. Научиться использовать гиперссылки для связи между страницами.

ПРИБОРЫ И ОБОРУДОВАНИЕ

2.1. Текстовый редактор Блокнот.

2.2. MS Internet Explorer.

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

3.1. Изучить основные теоретические сведения.

3.2. Загрузить текстовый процессор «Блокнот» и набрать HTML-код, создающий страницу, приведенную в приложении 1 (страницу, содержащую ссылки на все приложения).

3.3. Сохранить созданный файл с расширением .htm.

[Файл – Сохранить как… Указать имя папки и имя файла с расширением .html

3.4. Загрузить созданную страницу в MS Internet Explorer.

3.5. Создать новые страницы с использованием различных способов маркировки, к которым можно будет перейти из главной страницы по гиперссылкам (см.Приложение2,3).

3.6. Создать новую страницу с использованием списка определений, к которой можно будет перейти из главной страницы по гиперссылке. (см.Приложение 4)

3.7. Оформить созданные страницы с использованием различных тегов форматирования

3.8. Добавить на главную страницу рисунок.

3.9. Создать страницу согласно приложению 6

3.10. Оформить отчет.

КОНТРОЛЬНЫЕ ВОПРОСЫ

6.4.1. Структура HTML-документа.

6.4.2. Основные теги форматирования.

6.4.3. Создание гиперссылок.

Структура html-документа.

Приложение1

Структура html-документа.

Приложение2

Приложение3

Структура html-документа.

Приложение4

Структура html-документа.

Приложение 5

Структура html-документа.

Приложение 7

Структура HTML-документа. Форматирование текста

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

HTML-документ представляет собой обычный текст, испещренный словами в угловых скобках. «» («больше»). Эти слова называются тегами. Теги применяются для форматирования текста и вставки в текст различных нетекстовых элементов: графики, дополнительных объектов, Java-апплетов и пр. Одним словом, теги формируют текст внутри HTML-документа.

Большинство тегов парные, открывающий и закрывающий. Парные теги имеют одинаковые имена, заключенные в угловые скобки (), но у закрывающего тега перед именем ставиться обратный слеш «/» — признак закрывающего тега. Например:

Text

.

Парные теги могут быть вложенными. Рассмотрим пример.

Это полужирный текст, а это еще и курсивный .

Но нужно помнить, что каждому открывающему тегу должен соответствовать парный закрывающий.

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

Бывают и одиночные теги. Такие теги не имеют закрывающего тега.

Структура HTML-документа.

Любой HTML-документ должен соответствовать определенным правилам, чтобы его смог показать любой Web-обозреватель. Эта структура включает в себя три тега, которые рассмотрены ниже.

Пример Web-страницы

Пример Web-страницы

Эта страница создана,только для демонстрации примера

В примере показана пробная страница, в которой видно, что документ как бы разделен на две части двумя парами тегов и находится внутри третьей пары. (Теги о которых идет речь выделены курсивом).

Весь HTML-документ заключен внутри парного тега и . Это первое правило оформления стандартных HTML-документов.

Второе правило заключается в том, что HTML-документ разделяется на две неравные секции.

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

Вторая (и большая) секция — это собственно документ, так называемое тело документа. Именное его содержимое отображается в окне Web-обозревателя. Тело выделяется парными тегами и .

Отсюда следует второе правило оформления стандартных HTML-документов: каждый документ должен содержат секции HTML- заголовка и тела. И обе эти секции должны быть правильно оформлены.

Описание заголовков

Заголовок

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

Если нужно отобразить отдельные символы другим цветом или в другом начертании, HTML предоставляет соответствующие теги. Основные теги форматирования приведены в табл. 1.

Таблица 1

Элементы форматирования текста

Имя тега Описание
BASEFONT Определяет основной шрифт, которым должен отображаться текст документа
FONT Позволяет изменять цвет, размер и тип шрифта текста
I Выделяет текст курсивом
EM Используется для смыслового выделения текста (курсивом)
B Выделяет текст жирным шрифтом
STRONG Усиленное выделение текста (жирным)
U Выделяет текст подчеркнутым
S, STRIKE Выделяет текст перечеркнутым
BIG Отображает текст увеличенным шрифтом (относительно текущего)
SMALL Отображает текст уменьшенным шрифтом (относительно текущего)
SUP Отображает текст со сдвигом вверх (верхний индекс)
SUB Отображает текст со сдвигом вниз (нижний индекс)
CODE, SAMP Оформляют текст как формулу или программный код
TT Отображает текст моноширинным шрифтом
KBD Выделяет текст, который предлагается набрать на клавиатуре
VAR Используется для обозначения в тексте переменных
CITE Оформляет текст как цитату или ссылку на источник

BASEFONT

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

Параметры:

SIZE — обязательный параметр. Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно.

FACE — определяет используемый шрифт (гарнитуру).

FONT

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

Параметры:

SIZE — определяет размер шрифта. Возможные значения:

— целое число от 1 до 7;

— относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.

COLOR

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

FACE

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

I

Текст, заключенный между начальным и конечным тэгами, будет выделен курсивом.

EM

Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тэгами. Результат обычно отображается курсивом. То есть элемент EM практически аналогичен по действию элементу I.

B

Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом.

STRONG

Усиленное выделение. Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B.

U

Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.

S, STRIKE

Элемент STRIKE отображает помещенный между начальным и конечным тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S.

BIG

Текст, заключенный между начальным и конечным тэгами, отображается увеличенным шрифтом (относительно текущего).

SMALL

Текст, заключенный между начальным и конечным тэгами, отображается уменьшенным шрифтом (относительно текущего).

SUP

Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.

SUB

Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу.

CODE, SAMP

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

TT

Данный элемент отображает помещенный между начальным и конечным тэгами текст моноширинным шрифтом.

KBD

Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тэгами, выделяется жирным моноширинным шрифтом.

VAR

Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.

CITE

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

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

Теги и позволяют настроить начертание, размер и цвет шрифта. Они имеют следующий вид:

[COLOR=#{Код цвета}|{Имя цвета}]

Рассмотрим пример использования данного тега:

Большой зеленый текст .

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр и специальных символов (например, +,#,$,@), за исключением следующих 4-х символов, имеющих в HTML специальный смысл: , , “”.

Если необходимо включить в текст какой-либо из четырех зарезирвированных символов, которые как было скзано выше, не может быть помещен в текст непосредственно, следует закодировать его специальной последовательностью символов. Каждая специальная последовательность начинается амперсандом () и заканчивается точкой с запятой (;)

— gt ; — amp ; “” —

— начало параграфа, абзац. Пример

— непарный тег – для перехода на новую строку

пример уравнения

заголовок

  • Номер1
  • номер2

x3+yx+6y

2x-xy

Списки

Рассмотрим форматирование списков в HTML. Список – это набор упорядоченных абзацев текста, выделенных отступами, помеченных специальными значками (маркированных) или нумерованных.

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

UL

Создает маркированный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

OL

Создает нумерованный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Параметры:

START — определяет первое число, с которого начинается нумерация пунктов. (только целые числа)

TYPE — определяет стиль нумерации пунктов. Может иметь значения:

A — заглавные буквы A, B, C …

a — строчные буквы a, b, c …

I — большие римские числа I, II, III …

i — маленькие римские числа i, ii, iii …

1 — арабские числа 1, 2, 3 …

По умолчанию используется TYPE=1.

LI

Создает пункт в списке. Располагается внутри элементов OL или UL.

Параметры:

VALUE — изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Теперь традиционный пример:

Пример Web-страницы со списками

Пример Web-страницы со списками

Простой маркированный список

  • Первая строка.
  • Вторая строка.
  • Список, нумерованный римскими цифрами

    1. Первая строка.
    2. Вторая строка.
    3. Третья строка.
    4. Продолжение – но уже маленькими латинскими буквами

      1. Четвертая строка.
      2. Пятая строка.
      3. Приведем еще одну разновидность списков, предоставляемых HTML. Это списки определений. Они, в частности, прекрасно подходит для создания списков каких-либо терминов и их описаний. Они создаются с помощью следующих тегов:

        DL

        Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью тэгов и .

        Параметры:

        COMPACT — включает режим компактного отображения списка. Удобно использовать, если список определений очень велик. Данный параметр является флагом и не требует присвоения значения.

        DT

        Создает термин в списке определений внутри элемента DL.

        DD

        Создает определение термина внутри элемента DL.

        Урок 1. Структура HTML документа


        Похожие статьи.

        Понравилась статья? Поделиться с друзьями: