Лабораторная работа №1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца

Цель работы:

• Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.

• Научиться использовать теги форматирования шрифта и абзаца.

Задание на выполнение

1. Создать файл с гипертекстовым документом:

• Запустить редактор Блокнот, ввести текст:

Приветствую Вас на моей первой web-страничке!

• Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .htm, например 1_name.htm (где name - ваше имя)

• Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.

• Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

2. Ввести теги, определяющие структуру html-документа:

• С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами <TITLE> TITLE>) указать свою фамилию.

Фамилия

HEAD>

Приветствую Вас на моей первой web-страничке!

• Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновить или нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ:

• Вызвать меню браузера Вид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!» текст подписи:

Студент группы NNN Фамилия Имя

Сохранить документ (но не закрывать) и обновить его просмотр в браузере.

• Используя одиночный тег <BR>, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя - в следующей строке. Просмотреть в браузере новый вариант.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.

4. Оформить фрагменты текста с помощью стилей Заголовков:

• Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега <H1> …H1>. Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.

• Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).

• Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки - на Заголовок 5 уровня, последней строки - на Заголовок 3-го уровня.

5. Выполнить форматирование шрифта:

• После строки Фамилия Имя добавить еще одну строку текста

Нас утро встречает прохладой

• Оформить фразу по приведенному ниже образцу.

В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО - красным цветом, ОЙ - синим.

• Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги <FONT SIZE=«+2»> и <I>

• Просмотреть полученный документ в браузере.

6. Выполнить форматирование абзацев:

• Создать новый документ 2_name.htm, сохранить его в той же рабочей папке.

• Ввести текст (использовать копирование текста из документа 1_name.htm):

Фамилия

HEAD>

Приветствую Вас на моей второй web-страничке! <BR> Монолог Гамлета

• Выровнять текст по центру.

• Ввести текст:

Быть иль не быть - вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы - иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...

• Оформить выравнивание абзаца по ширине.

• Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>.

• Скопировать монолог и разбить его на абзацы. Выровнять по центру.

Быть иль не быть - вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы - иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом...

• Сохранить документ.

• Просмотреть документ в окне броузера, изменяя размер окна.

7. Выполнить оформление списков:

• Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.

• Ввести текст:

Фамилия

HEAD>

Приветствую Вас на моей третьей web-страничке!

• Дополнить текст документа (между тегами …) следующим текстом:
  Я знаю как оформлять:
  Шрифты,
  Заголовки,
  Абзацы

• Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:

<OL>

<LI> Шрифты, LI>

<LI> Заголовки, LI>

<LI> Абзацы LI>

OL>

• Поменять оформление списка на список маркированный. Использовать теги <UL>, UL>

• Создать «смешанный» список:

Я знаю как оформлять:

1. Шрифты

• Размер

• Цвет

• Гарнитуру

• Индексы

  1. Заголовки

• От 1-го до 6-го уровня

1. 1. 1. Абзацы

• Выравнивание

• Разрыв строк внутри абзаца

• С использованием переформатирования.

8. Предъявить результаты работы преподавателю.

Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца

Назначение

Вид тегов

Примечание

Общая структура документа HTML

Тип документа

<HTML>HTML>

Начало и конец документа

Имя документа

<HEAD>HEAD>

Не отображается броузером

Заголовок

Содержимое строки заголовка окна броузера

Тело документа

Содержимое WEB-страницы

Структура содержания документа

Внутренние заголовки различного уровня

<H№> текст H№>

Где № - номер уровня заголовка (от 1 до 6). Например, <H1>…H1> - заголовок 1-го уровня.

Заголовок с выравниванием

текст №>

LEFT - по левому краю,

CENTER - по центру,

RIGHT - по правому краю.

Форматирование абзацев

Создание абзаца (параграфа)

<P> текст P>

Абзацы отделяются двойным межстрочным интервалом

Перевод строки внутри абзаца

<BR>

Одиночный тег

Выравнивание абзацатекст текст текст текст

LEFT - по левому краю

CENTER - по центру

RIGHT - по правому краю

JUSTIFY - по ширине

Разделительная горизонтальная линия между абзацами

Одиночный тег. «?» - толщина линии в пикселях. Толщину линии можно не указывать.

Форматирование шрифта

Жирный

<B> текст B>

Жирный

Курсив

<U> Подчеркнутый U>

<S> ПеречеркнутыйS>

<SUP> ^{Верхний индекс}SUP>

<SUB> _{Нижний индекс}SUB>

Курсив

текст

Подчеркнутый

<U> текст U>

Перечеркнутый

текст

Увеличенный размер

текст

Уменьшенный размер

текст

Верхний индекс

<SUP> текст SUP>

Нижний индекс

<SUB> текст SUB>

Размер шрифта

текст

?- значения от 1 до 7 или относительное изменение (например, +2)

Базовый размер шрифта

<BASEFONT SIZE=«?»>

Одиночный тег

? - размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом

Гарнитура шрифта

<FONT FASE=«название1, название2, …»> текст FONT>

Текст оформляется первым, установленным на компьютере шрифтом из списка названий

Цвет шрифта

текст

Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом #

RED -красный, #FF0000 - шестнадцатеричный код - красного цвета

Создание списков

Нумерованный

<OL>элементы спискаOL>

<OL>

<LI>Элемент списка 1 LI>

<LI>Элемент списка 2LI>

<LI>Элемент списка 3LI>

OL>

Маркированный

<UL> элементы списка UL>

Элемент списка

<LI> элементы списка LI>

Таблица основных цветов

Лабораторная работа №2. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок

Цель работы:

• Научиться выполнять вставку рисунков в HTML-документ

• Научиться создавать закладки и гиперссылки

1. Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).

Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.

2. Вставка рисунков в документ.

• Открыть в Блокноте документ 2_name.htm.

• Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.

• Сохранить документ под именем 4_name.htm.

• Просмотреть в броузере полученный результат.

• Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в броузере.

• Вставить рисунок Arrows2.wmf в конец документа 4_name.htm перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.

• Просмотреть в броузере полученный результат.

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

• В документе 3_name.htm закрепить гиперрсылки за следующими элементами списка:

За словом Шрифт - гиперссылка на документ 1_name.htm.

За словом Заголовки - на документ 1_name.htm.

За словом Абзацы - на документ 2_name.htm.

• Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».

• Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning» в документе 1_name.htm.

• Создать закладку в начале текущего документа 3_name.htm.. Присвоить ей имя «Hello».

• Изменить вторую гиперссылку (на слове Заголовки), определив для неё переход в начало текущего документа на установленную закладку «Hello».

• Создать закладку в документе 2_name.htm перед фрагментом монолога. Присвоить ей имя «Mono».

• Установить на слово переформатирования гиперссылку на закладку «Mono».

• Проверить правильность переходов по всем гиперссылкам.

4. Закрепить гиперссылки за графическими файлами:

• Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.

• Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.

5. Предъявить результат преподавателю.

Основные теги вставки рисунков, закладок и гиперссылок

Лабораторная работа № 3. Создание и форматирование таблиц

Цель работы:

• Научиться использовать таблицы для оформления WEB-страниц

1. Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1

При отображении таблицы в броузере должны удовлетворяться следующие условия:

• таблица должна быть выравнена по центру и быть правильной (симметричной) формы;

• в центральной ячейке поместить символ * (звездочка), остальные ячейки должны быть пустыми.

Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела &nbsp;

2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:

• В центральной ячейке разместить рисунок Arrows3.wmf

• «Раскрасить» все остальные ячейки в различные цвета.

3. Создать еще одну копию таблицы - Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.

Примечание. Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan= и rowspan=

4. Создать новый HTML-документ - rasp_name.htm с расписанием занятий.

• Документ должен начинаться заголовком
  Расписание занятий гр. NNN на весенний семестр 2005 г.

• Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).

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

  День недели

  Время

  Предмет

  Преподаватель

  Аудитория

  Понедельник

  8:30-10:05

  Математика (лек)

  доц. Иванов А.А.

  320

  10:15-11:50

  Математика (пр)

  преп. Петрова И.А.

  302

  12:30-14:05

  Физика (лаб)

  доц. Сидоров О.И.

  307

  Вторник

  8:30-10:05

  История (лек)

  проф. Громова О.А.

  310

  10:15-11:50

  История (сем)

  преп. Попов М.А.

  302

  12:30-14:05

  Физика (лаб)

  доц. Сидоров О.И.

  307

  ...

  ...

  ...

  ...

  ...

• Просмотреть созданный документ в броузере при различных размерах окна и различных настройках размера шрифта.

5. Сохранить файл с расписанием под именем rasp_menu_name.htm и модифицировать его.

6. После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.

7. В таблице с расписанием установить закладки на названия дней недели.

8. В таблице меню создать гиперссылки на соответствующие дни недели.

9. Выполнить цветовое оформление каждой ячейки меню.

10. Проверить правильность выполнения переходов по гиперссылкам.

11. Создать группу web-страниц, объединенных меню:

• На рабочем диске создать папку My_raspisanie для размещения файлов расписания.

• Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm - для главной страницы, названия дней недели - для остальных. Все документы разместить в папке My_raspisanie.

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

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

• Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.

12. Предъявить результат преподавателю.

Теги оформления таблиц

Определить таблицу

<TABLE>TABLE>

ПримерТовар Цена

TR>

<TR>

<TD>РадиотелефонTD>

<TD>2000 TD>

TR>

TABLE>

Товар

Цена

Радиотелефон

2000

Окантовка таблицы

<TABLE BORDER ="?" TABLE>

Строка таблицы

<TR> TR>

Выравнивание

Ячейка таблицы

<TD>TD>

Выравнивание по горизонтали

Выравнивание по вертикали

Установка ширины ячейки (в пикселях или %)

<TD WIDTH=«?»>

Заливка цветом ячейкицвет»>

<TD BGCOLOR = «#FF0000»> TD> красный цвет

Заголовок столбца или строкитекст

Текст в ячейке выравнивается по центру, устанавливается жирный шрифт