Восстановить исходные установки браузера,

Закрыть все приложения.

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

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

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

1.Подготовка документа для ввода текста.

1.1.Установить режим записи Web-документа в текстовом редакторе Word в режиме HTML-документа:

a) В меню "Пуск" щелкнуть по строке "Создание документа". На вкладке выбрать лист Web-cтраницы" и щелкнуть по значку "Новая Web-страница".

b) Сохранить новый документ в личной папке под именем 13_1_ФИО в рабочей папке: меню "Файл", опция "Сохранить как...".

1.2.Записать заголовок документа:

a) В меню "Вид" текстового редактора выбрать опцию "источник HTML". На рабочем окне появится текст заголовка документа. Для его написания следует придерживаться следующих правил:

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

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

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

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

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

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

a) Перейти с помощью панели программ Windows на поле текстового редактора. Найти пару тэгов <BODY>.

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

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

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

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

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

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

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

2.2.Записать текст построчно:

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

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

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

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

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

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

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

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

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

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

2.4.Выделить текст, используя физические стили (полужирный, курсив, подчеркивание, машинопись):

полужирный,

курсив,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

g) В центре следующей строки установить мигающую строку "Мигающий текст".

h) Изменить цвет текста мигающей строки на красный, увеличить его размер на 2 пункта,

i) Установить параметры шрифта по умочанию.

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

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

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

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

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

2.6.Использовать преформатированный текст (текст с фиксированной шириной знаков и пробелов):

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

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

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

2.7.Использовать в тексте специальные символы:

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

3.Организация гипертекстовых ссылок.

3.1.Организовать в тексте идентификации ссылки на другие Web-страницы:

Тэг <A> </A> указатель ссылки - текст, рисунок, группа слов, Web-страницы и т.д.

Например: <A HREF="URL">текст указателя</A>. (HREF - Hypertext REFerence),

a) Записать фразу: Студент ФИО учится в университете ..... на факультете......на кафедре.... Вместо точек указать реальный текст, оформив его в виде гиперссылок на соответствующие Web-страницы.

b) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперсвязей.

3.2.Организовать оглавление документа с помощью внутренних ссылок:

Для разделения документа на части следует использовать указатель, который следует установить в начале каждой части (раздела) текста: <A NAME=имя_части> </A>. (в качестве "имя_части" можно записать "Label_1" и т.д.)

Для создания ссылки на соответсвующий указатель, размещенный в тукущем документе, следует в параметре HREF указать имя ссылки с префиксом #, например <A HREF="#имя_части">Подготовка документа</A>.

a) Установить ссылки в начале текстов, выполненных по следующим пунктам: 1, 2.1., 2.4., 2.7., 3., присвоив им соответствующие имена (имя_части).

b) Записать построчно заголовки частей, используя ссылки на соответствующие указатели.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперссылок.

4.Копировать текст текущего задания в рабочую папку, присвоив ему имя 13_2_ФИО. Организовать текст задания с подробным оглавлением в форме HTML-документа.

5.Сохранить HTML-коды документов, проверить их на вирус и записать на дискету.

6.Закрыть все приложения на рабочем столе.

ТЕМА 14: СПИСКИ И ТАБЛИЦЫ WEB-ДОКУМЕНТОВ

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

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

1.Подготовка документа для ввода текста.

1.1.Установить режим записи Web-документа в текстовом редакторе Word в режиме HTML-документа:

a) В меню "Пуск" щелкнуть по строке "Создание документа". На вкладке выбрать лист "Web-cтраницы" и щелкнуть по значку "Новая Web-страница".

b) Сохранить новый документ в личной папке под именем 14_1_ФИО в рабочей папке: меню "Файл", опция "Сохранить как...", указать в списке "Тип файла" документ HTML.

c) Записать заголовок HTML-документа: HTML-cписки и таблицы: ФИО.

1.2.Вызвать браузер и перейти на поле Web-документа:

a) В меню "Файл" активизировать опцию "Открыть страницу". На новой вкладке щелкнуть по кнопке "Обзор".

b) Выбрать в рабочей папке необходимый файл. Вернувшись на вкладку щелкнуть по кнопке "Открыть".

Разметка простого списка.

2.1.Организовать маркированный (неупорядоченный) список:

<UL> </UL> - тэг-контейнер, внутри которого располагаются все строки списка,

<LI> - тэг, определяющий каждую строку списка (закрывать этот тэг необязательно),

TYPE - атрибут тэга <UL>, определяющий тип маркера: диск, окружность, квадрат - DISK, CIRCLE, SQUARE. Например, <UL TYPE=CIRCLE>. (По умолчанию - диск).

a) Создать список учебных дисциплин текущего семестра, используя один из дополнительных маркеров.

b) Записать вложенный маркированный список, используя в качестве первого уровня предыдущий список, а в качестве второго - две дополнительные подстроки: Лекции и Семинары, с использованием другого маркера.

c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.

2.2.Сформировать список с использованием рисунка в качестве маркера:

a) Подготовить самостоятельно рисунок маркера (например шарик) или найти на Web-страницах подходящий маркер, скопировать его и запомнить в формате .gif.

b) Открыть маркированный список и записать выделенный заголовок списка учебных занятий на текущий день.

c) Записать строки списка, начиная каждую из них с установки URL-адреса рисунка маркера:
<IMG SRC='URL">строка списка .

d) Закрыть список. Проверить результат.

2.3.Организовать нумерованный (упорядоченный) список:

<OL> </OL> - тэг-контейнер, внутри которого располагаются элементы списка,

<LI> - тэг строки списка,

TYPE - параметр вида нумерации списка: A - прописные латинские буквы, a - строчные латинские буквы, I - большие римские цифры, i - маленькие римские цифры, 1 - арабские цифры (используется по умолчанию). Пример, <OL TYPE=A>,

START - параметр, определяющий начальное значение нумерации (по умолчанию равен 1). В качестве параметра можно использовать только натуральное число, например <OL START=2>,

COMPACT - указывает на вывод списка в компактном виде: уменьшенные шрифт и расстояние между строчками.

a) Привести нумерованный список сотрудников фирмы из 5-и строк.

b) Записать список, пример организации которого показан на рисунке.

c) Разработать упорядоченный список - оглавление учебного курса, состоящий из частей, тем, глав, параграфов, разделов.

d) Составить нумерованный список Ваших основных задач, начиная нумерацию с буквы "C".

e) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.

2.4.Сформировать список описаний (определений):

<DL> </DL> - тэг списка описаний, который состоит из строк немаркированного списка, и определений к этим строкам, которые записываются после соответствующей строки в виде текста (описание строки списка),

<DT> </DT> - тэг строки списка,

<DD> </DD> - тэг описания строки списка.

a) Повторить список товаров фирмы с описанием их свойств, используя формат списка описаний,

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

Дата добавления: 2019-03-09; просмотров: 121; Мы поможем в написании вашей работы!

Поделиться с друзьями:

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

Мы поможем в написании ваших работ!