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

2019-07-03

212

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 4 5 6 Следующая ⇒

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

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

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

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

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

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

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> и применяется для выравнивания текста и подготовки таблиц. В пределах этого тега СОХРАНЯЮТСЯ все пробелы, т.е. пробелами можно «выравнивать» положение текста на строке. Однако необходимо учесть, что после тега <PRE> </PRE> обязательно формируется пустая строка.

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

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

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) Перейти на окно браузера, нажать на кнопку "Обновить".

2019-07-03

212

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 4 5 6 Следующая ⇒

Обсуждение в статье: ТЕМА 1: ФОРМИРОВАНИЕ ТЕКСТА WEB -ДОКУМЕНТА

Обсуждений еще не было, будьте первым... ↓↓↓