Основные теги вставки рисунков, закладок и гиперссылок
Лабораторная работа №1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца
Цель работы:
· Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.
· Научиться использовать теги форматирования шрифта и абзаца.
Задание на выполнение
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-го уровня с помощью парного тега < H 1> …</ H 1>. Вторую строку оформить как Заголовок 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>
<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 | 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 также находятся в вашей папке на жёстком диске.
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 перед фразой «Нас утро встречает прохладой». Дать ей имя «M orning».
· Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «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=”файл” HEIGHT=”высота” > | Пример: <IMG SRC=”grafica.gif” ProductID="550”" w:st="on">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=”#$$$$$$”> | |||||||
|
| ||||||||
Лабораторная работа № 3. Создание и форматирование таблиц
Цель работы:
· Научиться использовать таблицы для оформления WEB-страниц
1. Создать таблицу по приведенному образцу, сохранить документ под именем tab l_ 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_raspisan ie для размещения файлов расписания.
· Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu . htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisan ie.
· Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.
· В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.
· Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.
12. Предъявить результат преподавателю.
Теги оформления таблиц
| Определить таблицу | <TABLE></TABLE> | Пример <TABLE border=”1” align =«CENTER» > <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> | Текст в ячейке выравнивается по центру, устанавливается жирный шрифт |
Дата добавления: 2021-03-18; просмотров: 91; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!