7


  • Учителю
  • Лабораторная работа 'Создание HTML документа'

Лабораторная работа 'Создание HTML документа'

Автор публикации:
Дата публикации:
Краткое описание:
предварительный просмотр материала

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

Цель работы:

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

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


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

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

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

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

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

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

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

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

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

Фамилия

HEAD>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фамилия

HEAD>

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

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

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

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

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

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

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

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

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

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

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

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

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

Фамилия

HEAD>

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

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

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

<OL>

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

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

<LI> Абзацы LI>

OL>

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

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

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

  1. Шрифты

  • Размер

  • Цвет

  • Гарнитуру

  • Индексы

    1. Заголовки

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

      1. Абзацы

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

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

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


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


Таблица основных тегов 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>


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


Цвет

Color's name

Шестнадцатеричный код цвета

Red

Green

Blue

Черный

black

00

00

00

Темно-синий

navy

00

00

80

Голубой

blue

00

00

FF

Зеленый

green

00

80

00

Темно-зеленый

teal

00

80

80

Салатный

lime

00

FF

00

Бледно-голубой

aqua

00

FF

FF

Вишневый

maroon

80

00

00

Фиолетовый

purple

80

00

80

Оливковый

olive

80

80

00

Серый

gray

80

80

80

Светло-серый

silver

C0

C0

C0

Красный

red

FF

00

00

Лиловый

fushsia

FF

00

FF

Желтый

yellow

FF

FF

00

Белый

white

FF

FF

FF


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

Цель работы:

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

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

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

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

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

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

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

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

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

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

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

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

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

  • В документе 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».

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

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

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

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

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


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

Вставка изображений

Вставка графического файла

<IMG SRC="файл" WIDTH="ширина" HEIGHT="высота" >

Пример:

<IMG SRC="grafica.gif"

WIDTH="550"

HEIGHT="240"

ALIGN=" right"

>


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

файл" ALIGN="left|right|top|bottom">

Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок

<IMG SRC="файл">

Вставка ссылок

Ссылки на другую страницу

<A HREF=" страница">

текст A>

Ссылка1

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

<A HREF=" страница # имя закладки"> текстA>

<A HREF=" index.htm #met1"> На главную страницу A>"

Ссылка на закладку в том же документе

<A HREF="#имя закладки "> текст A>

Ссылка2


Определить закладку

<A NAME="имя закладки">текстA>

Цвет фона, текста и ссылок

Фоновая картинка

файл рисунка">

TEXT="black" (черный)

LINK="#FF0000" (красный)

VLINK="#FFFF00" (желтый)

ALINK="#FFFFFF" (белый)

BODY>

Цвет фона

<BODY BGCOLOR="#$$$$$$">

Цвет текста

Цвет ссылки

<BODY LINK="#$$$$$$">

Цвет пройденной ссылки

<BODY VLINK="#$$$$$$">

Цвет активной ссылки

<BODY ALINK="#$$$$$$">


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

Цель работы:

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

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

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

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

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

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

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

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

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

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


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


  1. Создать новый 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

    ...

    ...

    ...

    ...

    ...

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

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

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


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

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

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

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

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

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

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

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

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

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

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




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

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

<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> красный цвет

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

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


15




 
 
X

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

После этого кнопка ЗАГРУЗКИ станет активной!

Кнопки рекомендации:

загрузить материал