ТЕМА 3: ФОРМИРОВАНИЕ ТЕКСТА WEB-ДОКУМЕНТА

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

Задание для самостоятельной работы

Подготовка HTML-документа.

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

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

1.1.Вызвать на поле экрана стандартный текстовый редактор Блокнот.

a) Сохранить текущий документ в рабочей папке под именем 3_1_ФИО (Первые буквы фамилии имени и отчества обучаемого) с расширением. html, используя. опцию " Сохранить как...".

b) Разместить рабочее поле текстового редактора на левой половине экрана,

c) Вызвать браузер Internet Explorer и установить его на левой половине экрана,

d) Вызвать на рабочее поле браузера HTML-документ из своей рабочей папки для этого в меню " Файл" найти опцию " Из файла", включить кнопку " Обзор" и найти ранее подготовленный файл в рабочей папке.

1.2.Записать заголовок. Для его написания следует придерживаться следующих правил:

Тэг < HTML> открывает документ, тэг < /HTML> закрывает документ,

HTML-документ состоит из двух областей: области заголовка и области содержания.

Тэг < HEAD> открывает область заголовка < /HEAD> закрывает область заголовка,

Установить тэги заголовка внутри пары тэгов < HTML>.

В области заголовка определяется название документа, связь с другими документами, кодировка текста, размер, тип и цвет шрифта, используемого в тексте по умолчанию и др.

Тэг < TITLE> определяет название документа, тэг < BASE> указывает полный базовый URL-адрес документа с помощью обязательного параметра HREF=" URL".

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

a) В поле заголовка установить пару тэгов < TITLE> и записать между ними строку " Самостоятельная работа №3_ФИО".

b) Сохранить измененный текст в текстовом редакторе, обращая внимание на расширение.html.

c) Активизировать браузер, щелкнув по кнопке " Обновить". Обратить внимание на содержание верхней строки окна браузера. Она должна отобразить название документа. Запомнить URL-адрес документа, размещенный в поле адресной строки.

1.3.Оформить содержательную часть документа:

a) Перейти на поле текстового редактора и установить пару тэгов < BODY> после тэга < /HEAD>.

b) Установить курсор между парой < BODY> и несколько раз нажать на клавишу " Ввод", чтобы расширить поле для строк разметки текста документа.

Запись текста.

Текст документа может состоять из заголовка, отдельных строк, абзацев. Рассмотрим правила их разметки.

2.1.Установка заголовка на поле документа:

Для выделения заголовка используются 6 стилей, обозначаемых как H1, H2, H3,..., H6.

Формат записи < Hi> Заголовок< /Hi>, заголовок выделен полужирным шрифтом и размещен по центру.

Выполнить следующие операции:

a) Записать в начале содержательной части 4-е строки заголовка, увеличивая шрифт заголовка каждой следующей строки: Наименование университета, наименование факультета, наименование специальности, фамилия имя отчество студента.

b) Перейти на окно браузера, нажать на кнопку " Обновить".

2.2.Запись отдельных строк текста.

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

Формат записи: Текст строки .

Если на экране строка не умещается, то браузером автоматически устанавливается перенос.

Тэг запрещает перевод строк. Если строка превысит размер экрана, то в рабочем окне браузера появится линейка прокрутки.

В качестве упражнения разделить следующий текст на пять строк, используя тэг : Нам не дано предугадать, Как слово наше отзовется, ‑ И нам сочувствие дается, Как нам дается благодать... Ф. И. Тютчев.

Перейти на окно браузера, нажать на кнопку " Обновить" и проверить результат разметки текста.

2.3.Запись текста по абзацам.

Запись абзаца определяется парой тэгов . Между абзацами автоматически устанавливается пропуск строки.
Для размещения текста внутри абзаца используется атрибут: ALIGN=LEFT½ CENTER½ RIGHT½ JUSTIFY (слева, по центру, справа, по ширине), например ....

Выполнить следующее задание:

a) На четырех строках разместить фразу " Форматирование абзаца", размещая ее по правому краю, по левому краю, по центру и по ширине соответственно. В последнем случае, чтобы понять работу атрибута, следует повторить фразу 10 раз.

b) Перейти на окно браузера, нажать на кнопку " Обновить" и проверить результат.

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

полужирный,

курсив,

подчеркивание,

< TT> < /TT> машинопись (фиксированная ширина знаков и пробелов).

< BIG> < /BIG> шрифт текста большего размера

шрифт текста меньшего размера

сдвигает текст ниже уровня строки и уменьшает его размер,

сдвигает текст выше уровня строки и уменьшает его размер,

< BLINK> < /BLINK> отображает мигающий текст, [1]

указывает параметры шрифта. Тэг содержит параметры FACE, SIZE, COLOR - соответственно: название шрифта (ARIAL и т.п.), размер в условных единицах от 1 до 7 (по умолчанию 3), цвет шрифта #RRGGBB (или название цвета - green, red и т.п.) или #RGB, используя числовые значения насыщения, которые можно взять в соответствующих опциях графических редакторов..

< BASEFONT> параметры шрифта, используемые в тексте по умолчанию (переопределяются в тексте с помощью тэга FONT). В конструкции НЕТ закрывающего тэга.

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

b) Начать новый абзац и перенести копию текста (п. 2.2) представить его с помощью шрифта большего размера.

c) Перенести строку автора текста (п. 2.2.) и представить ее с помощью шрифта меньшего размера.

d) В новом абзаце записать математическую формулу: (X+Y)*Z^X^-^Y.

e) На новой строке записать химическую формулу C₆H₁₂O₅.

f) Перейти на окно браузера, нажать на кнопку " Обновить" и проконтролировать результат разметки.

g) Установить параметры шрифта по умолчанию в заголовке программы и оценить результат.

h) Убрать строку с установкой параметров шрифта по умолчанию.

2.5.Применение логических стилей для организации фрагментов текста.

Фрагменты с логическим форматированием браузеры отображают определенным образом по умолчанию, (логическое форматирование предпочтительнее физическому). Логические стили поддерживаются следующими тэговыми конструкциями:
ADDRESS> < /ADDRESS> - выделение курсивом адреса корреспондента,

< BLOCKQUOTE> < /BLOCKQUOTE> - цитируемый абзац, отступы справа в тексте фрагмента и др.

Выполнить следующие задания:

a) В режиме текстового редактора на первой строке содержательной части HTML-документа записать сведения об авторе документа (Фамилия, инициалы, время записи документа), используя логический стиль. Перейти на окно браузера, нажать на кнопку " Обновить" и просмотреть результат.

b) Найти Web-страницу кафедры и скопировать фрагмент сопроводительного текста. Перенести этот фрагмент на поле формируемого HTML-документа и оформить этот фрагмент как цитируемый абзац. Перейти на окно браузера, нажать на кнопку " Обновить".

2.6.Выделение с помощью преформатированного текста (текст с фиксированной шириной знаков и пробелов) осуществляется с помощью теговой конструкции

< PRE> < /PRE> и применяется для выравнивания текста и подготовки таблиц.

Вид издания	Получено	Списано
Учебники
Монографии
Справочники		-

Выполнить следующее задание:

a) Используя машинописный текст сформировать таблицу, изображенную на рисунке.

b) Перейти на окно браузера, нажать на кнопку " Обновить" и проверить результат.

2.7. При использовать в тексте символов, которые используются для разметки текста[2] применяют следующие подстановки:

Зарезервированные символы:

знак " < " заменяется на " & lt"

знак " > " заменяется на " & gt"

знак " & " заменяется на " & amp"

знак " заменяется на " & quot"

Знаки вне клавиатуры записываются: & знак

Символы ASCII-кода устанавливаются: & #код

Неразрывный пробел: & nbsp

Комментарий в тексте HTML-кода: <! --текст комментария> (в этом случае текст документа не выводится на экран).

Выполнить следующие упражнения:

a) По центру строки записать: " Тэг определяет обрыв строки (Line Break)".

b) На последней строке документа записать: Ó ФИО, год (ASCII-код знака " Ó " соответствует числу 169, можно также использовать комбинацию " & copy" ). Перейти на окно браузера, нажать на кнопку " Обновить" и проверить результат.

Установить курсор на начало строки об авторских правах и несколько раз нажать клавишу " Ввод". Далее упражнения записывать в образовавшемся разрыве текста так, чтобы строка с упоминанием об авторских правах всегда оставалась последней в содержательной части документа.

2.8.Выделение произвольного фрагмента текста с помощью изменнения его параметров можно осуществить с помощью следующей пары тэгов:

< DIV> < /DIV> - тег-контейнер, управляющий фрагментом текста с помощью назначения стилей. Например: < DIV STYLE=" color=blue" > (в качестве кода цвета можно указать #0000FF)

Выполнить следующее задание:

a) Выделить цветом ранее подготовленную таблицу с преформатированным текстом.

b) Перейти на окно браузера, нажать на кнопку " Обновить".

123	Поделиться: