Нас утро встречает прохладой
Задание на выполнение
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. Вставка в 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. Предъявить результат преподавателю.