 |
|
Нас утро встречает прохладой
Задание на выполнение
1. Создать файл с гипертекстовым документом:
· Запустить редактор Блокнот, ввести текст:
Приветствую Вас на моей первой web-страничке!
· Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .htm, например 1_name.htm(где name – ваше имя)
· Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
· Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.
2. Ввести теги, определяющие структуру html-документа:
· С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами <TITLE></TITLE>)указать свою фамилию.
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей первой web-страничке!
</BODY>
</HTML>
· Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновитьили нажать кнопкуОбновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.
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):
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей второй web-страничке! <BR> Монолог Гамлета
</BODY>
</HTML>
· Выровнять текст по центру.
· Ввести текст:
Быть иль не быть - вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы - иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...
· Оформить выравнивание абзаца по ширине.
· Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>.
· Скопировать монолог и разбить его на абзацы. Выровнять по центру.
Быть иль не быть - вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы - иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом...
· Сохранить документ.
· Просмотреть документ в окне броузера, изменяя размер окна.
7. Выполнить оформление списков:
· Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.
· Ввести текст:
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей третьей web-страничке!
</BODY>
</HTML>
· Дополнить текст документа (между тегами <BODY>…</BODY>) следующим текстом:
Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы
· Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:
<OL>
<LI> Шрифты, </LI>
<LI> Заголовки, </LI>
<LI> Абзацы </LI>
</OL>
· Поменять оформление списка на список маркированный. Использовать теги <UL>, </UL>
· Создать «смешанный» список:
Я знаю как оформлять:
Шрифты
· Размер
· Цвет
· Гарнитуру
· Индексы
Заголовки
· От 1-го до 6-го уровня
Абзацы
· Выравнивание
· Разрыв строк внутри абзаца
· С использованием переформатирования.
8. Предъявить результаты работы преподавателю.
·
Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца
| Назначение | Вид тегов | Примечание |
| Общая структура документа HTML | ||
| Тип документа | <HTML></HTML> | Начало и конец документа |
| Имя документа | <HEAD></HEAD> | Не отображается броузером |
| Заголовок | <TITLE></TITLE> | Содержимое строки заголовка окна броузера |
| Тело документа | <BODY></BODY> | Содержимое WEB-страницы |
| Структура содержания документа | ||
| Внутренние заголовки различного уровня | <H№> текст </H№> | Где № – номер уровня заголовка (от 1 до 6). Например, <H1>…</H1> - заголовок 1-го уровня. |
| Заголовок с выравниванием | <H№ ALIGN=”LEFT| CENTER| RIGHT”> текст </H№> | LEFT - по левому краю, CENTER - по центру, RIGHT - по правому краю. |
| Форматирование абзацев | ||
| Создание абзаца (параграфа) | <P> текст </P> | Абзацы отделяются двойным межстрочным интервалом |
| Перевод строки внутри абзаца | <BR> | Одиночный тег |
| Выравнивание абзаца | <P ALIGN=”LEFT”>текст </P> <P ALIGN= ”CENTER”>текст </P> <P ALIGN=”RIGHT”> текст</P> <P ALIGN=”JUSTIFY”> текст </P> | LEFT - по левому краю CENTER - по центру RIGHT - по правому краю JUSTIFY – по ширине |
| Разделительная горизонтальная линия между абзацами | <HR SIZE=«?»> | Одиночный тег. «?» - толщина линии в пикселях. Толщину линии можно не указывать. |
| Форматирование шрифта | ||
| Жирный | <B> текст </B> | <B>Жирный</B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<S> |
| Курсив | <I> текст </I> | |
| Подчеркнутый | <U> текст </U> | |
| Перечеркнутый | <S> текст </S> | |
| Увеличенный размер | <BIG> текст </BIG > | |
| Уменьшенный размер | <SMALL> текст </SMALL> | |
| Верхний индекс | <SUP> текст </SUP> | |
| Нижний индекс | <SUB> текст </SUB> | |
| Размер шрифта | <FONT SIZE=«?»> текст </FONT> | ?- значения от 1 до 7 или относительное изменение (например, +2) |
| Базовый размер шрифта | <BASEFONT SIZE=«?»> | Одиночный тег ? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом |
| Гарнитура шрифта | · <FONT FASE=«название1, название2, …»> текст </FONT> | Текст оформляется первым, установленным на компьютере шрифтом из списка названий |
| Цвет шрифта | · <FONT COLOR=”$$$$$$”> текст </FONT> | Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом # RED –красный, #FF0000 – шестнадцатеричный код – красного цвета |
| Создание списков | ||
| Нумерованный | <OL>элементы списка</OL> | <OL> <LI>Элемент списка 1 </LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL> |
| Маркированный | <UL> элементы списка </UL> | |
| Элемент списка | <LI> элементы списка </LI> |
Таблица основных цветов
| Цвет | Color's name | Шестнадцатеричный код цвета | ||
| Red | Green | Blue | ||
| Черный | black | |||
| Темно-синий | navy | |||
| Голубой | blue | FF | ||
| Зеленый | green | |||
| Темно-зеленый | teal | |||
| Салатный | lime | FF | ||
| Бледно-голубой | aqua | FF | FF | |
| Вишневый | maroon | |||
| Фиолетовый | purple | |||
| Оливковый | olive | |||
| Серый | gray | |||
| Светло-серый | silver | C0 | C0 | C0 |
| Красный | red | FF | ||
| Лиловый | fushsia | FF | FF | |
| Желтый | yellow | FF | FF | |
| Белый | white | FF | FF | FF |
7. 2. Вставка в 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. Предъявить результат преподавателю.
· Основные теги вставки рисунков, закладок и гиперссылок
| Вставка изображений | |||||
| Вставка графического файла | <IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” > | Пример: <IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл”> | |||
| Выравнивание картинки относительно текста | <IMG SRC=”файл” ALIGN=”left|right|top|bottom”> | ||||
| Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок | <IMG SRC=”файл” ALT=”текст”> | ||||
| Вставка ссылок | |||||
| Ссылки на другую страницу | <A HREF=” страница”> текст </A> | <A HREF=”str2.htm”> Ссылка1</A> | |||
| Ссылка на закладку в другом документе | <A HREF=” страница # имя закладки”> текст</A> | <A HREF=” index.htm #met1”> На главную страницу </A>” | |||
| Ссылка на закладку в том же документе | <A HREF=”#имя закладки ”> текст </A> | <A HREF=” #metka1”> Ссылка2</A> | |||
| Определить закладку | <A NAME=”имя закладки”>текст</A> | <A NAME=”metka1”></A> | |||
| Цвет фона, текста и ссылок | |||||
| Фоновая картинка | <BODY BACKGROUND=”файл рисунка”> | <BODY BACKGROUND =”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) </BODY> | |||
| Цвет фона | <BODY BGCOLOR=”#$$$$$$”> | ||||
| Цвет текста | <BODY TEXT=”#$$$$$$”> | ||||
| Цвет ссылки | <BODY LINK=”#$$$$$$”> | ||||
| Цвет пройденной ссылки | <BODY VLINK=”#$$$$$$”> | ||||
| Цвет активной ссылки | <BODY ALINK=”#$$$$$$”> | ||||
7. 3. Создание и форматирование таблиц
1. Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1
При отображении таблицы в броузере должны удовлетворяться следующие условия:
· таблица должна быть выравнена по центру и быть правильной (симметричной) формы;
· в центральной ячейке поместить символ * (звездочка), остальные ячейки должны быть пустыми.
Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела
2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:
· В центральной ячейке разместить рисунок Arrows3.wmf
· «Раскрасить» все остальные ячейки в различные цвета.
3. Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.
Примечание.Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan= и rowspan=
4. Создать новый HTML-документ - rasp_name.htmс расписанием занятий.
· Документ должен начинаться заголовком
Расписание занятий гр. NNN на весенний семестр 2005 г.
· Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).
· Таблица по ширине должна занимать полный размер окна. Ширину отдельных столбцов задать в относительных единицах (в %), с тем, чтобы при изменении ширины окна пропорции таблицы сохранялись.
| День недели | Время | Предмет | Преподаватель | Аудитория |
| Понедельник | 8:30-10:05 | Математика (лек) | доц. Иванов А.А. | |
| 10:15-11:50 | Математика (пр) | преп. Петрова И.А. | ||
| 12:30-14:05 | Физика (лаб) | доц. Сидоров О.И. | ||
| Вторник | 8:30-10:05 | История (лек) | проф. Громова О.А. | |
| 10:15-11:50 | История (сем) | преп. Попов М.А. | ||
| 12:30-14:05 | Физика (лаб) | доц. Сидоров О.И. | ||
| ... | ... | ... | ... | ... |
· Просмотреть созданный документ в броузере при различных размерах окна и различных настройках размера шрифта.
5. Сохранить файл с расписанием под именем rasp_menu_name.htmи модифицировать его.
6. После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.
7. В таблице с расписанием установить закладки на названия дней недели.
8. В таблице меню создать гиперссылки на соответствующие дни недели.
9. Выполнить цветовое оформление каждой ячейки меню.
10. Проверить правильность выполнения переходов по гиперссылкам.
11. Создать группу web-страниц, объединенных меню:
· На рабочем диске создать папку My_raspisanie для размещения файлов расписания.
· Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов:menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.
· Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.
· В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.
· Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.
12. Предъявить результат преподавателю.
·
·
·
· Теги оформления таблиц
| Определить таблицу | <TABLE></TABLE> | Пример
<TABLE border=”1” align =«CENTER» width=«50%» >
<TR>
<TH >Товар</TH>
<TH>Цена</TH>
</TR>
<TR>
<TD>Радиотелефон</TD>
<TD>2000 </TD>
</TR>
</TABLE>
| ||||
| Окантовка таблицы | <TABLE BORDER =”?” </TABLE> | |||||
| Строка таблицы | <TR> </TR> | |||||
| Выравнивание | <TR ALIGN=left | right | center | middle | bottom > | |||||
| Ячейка таблицы | <TD></TD> | |||||
| · Выравнивание по горизонтали | <TD ALIGN=LEFT | RIGHT | CENTER> | |||||
| Выравнивание по вертикали | <TD VALIGN = TOP|MIDDLE| BOTTOM> | |||||
| Установка ширины ячейки (в пикселях или %) | <TD WIDTH=«?»> | |||||
| Заливка цветом ячейки | <TD BGCOLOR = «# цвет»> </TD> | <TD BGCOLOR = «#FF0000»> </TD> красный цвет | ||||
| Заголовок столбца или строки | <TH>текст </TH> | Текст в ячейке выравнивается по центру, устанавливается жирный шрифт |