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

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

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. Выполнить форматирование шрифта:

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

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

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

Нас утро встречает прохладой - student2.ru

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

· Оформить строку с подписью (Студент группы 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> Перечеркнутый</S>   <SUP> Верхний индекс </SUP> <SUB> Нижний индекс </SUB>
Курсив <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. Вставка в 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. Предъявить результат преподавателю.

Наши рекомендации