Задания к лабораторной работе

Все предложенные ниже упражнения необходимо набирать в текстовом редакторе Блокнот. Сохранять их следует как HTML-документы. Для этого при сохранении необходимо выбрать меню Файл-Сохранить как; в поле Тип файла выбрать Все файлы и затем назвать файл определенным именем с расширением html.

Упражнение 1.

<HTML>

<HEAD>

<TITLE>

Пример 1

</TITLE>

</HEAD>

<BODY>

<H1>

Привет!

</H1>

<P>

Это простейший пример HTML-документа

</P>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем простой.html в своей папке. Для просмотра страницы в проводнике дважды щелкните по созданному файлу или запустите браузер и выберите Файл-открыть и найдите файл простой.html. Обратите внимание на то, где отображается заголовок страницы, каким образом отображены слова, определенные стилем первого заголовка (<H1> </H1>). Используя атрибут тэга <BODY>, измените цвет фона страницы.

Упражнение 2.

<HTML>

<HEAD>

<TITLE>

Пример 2

</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> Привет! </H1>

<H2> Это чуть более сложный пример HTML-документа </H2>

<P> Теперь мы знаем, что абзац можно выравнивать не только по левому краю </P>

<P ALIGN=CENTER> но и по центру </P>

<P ALIGN=RIGHT> или по правому краю </P>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Абзац.html. Обратите внимание на то, как отображаются абзацы, выровненные по-разному.

Упражнение 3.

<HTML>

<HEAD>

<TITLE>

Пример 3

</TITLE>

</HEAD>

<BODY>

<H1> Охотники за удачей </H1>

<H2> А. Макаревич </H2>

<P> Мы в такие шагали дали, <BR>

что не очень-то и дойдешь. <BR>

Мы в засаде годами ждали, <BR>

Не взирая на снег и дождь. </P>

<P> Мы в воде ледяной не плачем,

И в огне почти не горим.

Мы — охотники за удачей –

птицей цвета ультрамарин </P>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Стихи.html. Откройте файл в Блокноте и расставьте в нужных местах тэг <BR> чтобы стихи приняли общепринятый вид. Сохраните изменения и просмотрите изменения в браузере. Обратите внимание на то, что расстояние между абзацами больше, чем расстояние между строками.

Упражнение 4.

<HTML>

<HEAD>

<TITLE>

Пример 4

</TITLE>

</HEAD>

<BODY>

<H1> Коллекция линий </H1> <CENTER>

<BR>

<BR>

<BR>

<marquee behavior=alternate bgcolor=#ff55ff> бегущая строка </marquee>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Линии.html. Обратите внимание на то, как отображаются линии разной ширины и разной толщины. Вернитесь в программу Блокнот и измените, используя атрибут тэга <marquee>, стиль прокрутки и направление движения строки, сохраните файл под тем же именем и обновите страницу в программе Internet Explorer.

Упражнение 5.

<HTML>

<HEAD>

<TITLE>

Пример 5

</TITLE>

</HEAD>

<BODY>

<H1> Шрифтовое выделение фрагментов текста </H1>

<P> Теперь мы знаем, что форматировать текст можно <B> жирным шрифтом </B> или <I> наклонным шрифтом </I>. Кроме того, можно включать в текст фрагменты с фиксированной шириной символа, <TT> имитирующие печатную машинку </TT>

</P>

<P> Кроме того, существует ряд логических стилей </P>

<EM> EM от английского emphasis, что значит акцент </EM>

<STRONG> STRONG </STRONG> </P>

<P> <FONT FACE= “Courier” SIZE= “6” COLOR= “NAVY”> Шрифт типа Courier большого размера темно-синего цвета</P>

<P> <FONT SIZE= “-5” FACE= “Century” COLOR= “Fuchsia”> Фрагмент текста, выполненный шрифтом типа Century маленького размера светло-сиреневого цвета

</P>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Шрифт.html. Обратите внимание на то, как отображаются фрагменты текста, определенные разными шрифтами, разными стилями.

Упражнение 6.

<HTML>

<HEAD>

<TITLE>

Пример 6

</TITLE>

</HEAD>

<BODY>

<H1> Создание списков </H1>

<P> Теперь мы знаем, что в HTML можно создавать

<B> <I> Нумерованные списки: </B> </I>

<li>Антонов

<li>Москвин

<li>Сергеев

<li>Степанов

</OL>

<B> <I> Маркированные списки: </B> </I>

<li>Антонов

<li>Москвин

<li>Сергеев

<li>Степанов

</UL>

<B> <I> Списки определений: </B> </I>

<DL>

<DT>память

<DD>психический познавательный процесс запоминания, сохранения, воспроизведения и забывания информации

<DT>мышление

<DD>психический познавательный процесс обобщенного и опосредованного отражения действительности в ее существенных связях и закономерностях

</DL>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Списки.html. Обратите внимание на то, как отображаются различные списки, как задана нумерация и маркеры. Вернитесь в программу Блокнот, измените тип нумерации и маркировки, сохраните файл под тем же именем. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Упражнение 7.

<HTML>

<HEAD>

<TITLE>

Пример 7

</TITLE>

</HEAD>

<BODY>

<H1> Вложенные списки </H1>

<P> Мы знаем, что в HTML можно создавать

<B> <I> вложенные списки для создания оглавлений: </B> </I>

<li>Теории сознания

<li> Понятие сознания

<li> Развитие представлений о сознании

<li> Свойства сознания

</UL>

<li> Теории бессознательного

<li> Развитие представлений о бессознательном

<li> Вклад психоанализа в разработку теории бессознательного

<li> Классификация неосознаваемых процессов

</UL>

<li> Влияние сознания и бессознательного на деятельность человека

</OL>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем list.html. Обратите внимание на то, как отображаются вложенные списки.

Упражнение 8.

<HTML>

<HEAD>

<TITLE>

Пример 8

</TITLE>

</HEAD>

<BODY>

<H1> Связывание </H1>

<P> С помощью ссылок можно переходить к другим файлам, например, <BR>

<A HREF= “list.html”> Вложенные списки </A><BR>

<A HREF="http:\\www.ostu.ru" >Сайт ОрелГТУ</A>

</P>

<P> или исполнять файл на компьютере пользователя:

<BR>

<A HREF= "C:\winnt\notepad.exe"> блокнот </A>

<P> Можно дать возможность отправить письмо автору по электронной почте:

<BR>

<A HREF= “mailto:[email protected]”> отправить письмо </A>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем Ссылки.html. Обратите внимание на разные виды ссылок. Изменяется ли цвет уже посещенных вами ссылок при возвращении на главную страницу.

Упражнение 9.

<HTML>

<HEAD>

<TITLE>

Пример 9

</TITLE>

</HEAD>

<BODY>

<H1> Импорт объектов в HTML-документ </H1>

<P> Вставить изображение очень просто </P>

<P> Кроме того, изображение можно сделать горячим, то есть осуществлять переход при нажатии на изображение </P>

</BODY>

</HTML>

Для того, чтобы вставить изображение в свою страницу, вам нужно найти или создать самим любые рисунки и скопировать или сохранить их туда же, где находится ваша основная страница. При выполнении этого упражнения в тэг <IMG> вместо названий файлов “picture.jpg” и “1.jpg” вам нужно будет вставить названия скопированных или созданных вами рисунков. Сохраните этот документ в виде HTML-файла под именем рисунки.html.

Упражнение 10.

<HTML>

<HEAD>

<TITLE>

Пример 10

</TITLE>

</HEAD>

<marquee bgcolor= "lime"> Таблицы </marquee>

<H1 ALIGN=CENTER> Таблица </H1>

<CAPTION> Название таблицы </CAPTION>

<TH> Первая строка первая заглавная ячейка

<TH> Первая строка вторая заглавная ячейка

<TH> Первая строка третья заглавная ячейка

<TR>

<TD> Вторая строка первая колонка

<TD> Вторая строка вторая колонка

<TD> Вторая строка третья колонка

<TR>

<TD> Третья строка первая колонка

<TR>

<TD ALIGN=CENTER COLSPAN=2> Четвертая строка объединенная ячейка

<TD> Четвертая строка третья колонка

</TABLE>

</BODY>

</HTML>

Сохраните этот документ в виде HTML-файла под именем table.html. Обратите внимание на то, как отображается название таблицы, заглавные ячейки. Обратите также внимание на цветовую гамму документа. Вернитесь в программу Блокнот, измените цвета по своему вкусу, сохраните документ под тем же именем. Вернитесь в программу Internet Explorer и обновите свою страницу. Посмотрите, как изменилось изображение.

Упражнение 11.

<html>

<head>

<title>Пример11</title>

</head>

</frameset >

</html>

Сохраните этот документ в виде HTML-файла под именем фрейм.html и просмотрите.

Упражнение 12

<html>

<title> пример 12</title>

<body>

<H2 > Анкета студента </H2>

<P>Имя

<BR>

<P>Выберете пол

<BR><INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="0" CHECKED>женский

<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="1">мужской

<P>Место учебы

<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX >ОрелГТУ

<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX >ФакультетЛП

<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX >ФакультетТиС

<P>Курс

<OPTION VALUE=dfd> 1 курс

<OPTION> 2 курс

<OPTION> 3 курс

<OPTION> 4 курс

<OPTION> 5 курс

</SELECT>

<P>

<P><TEXTAREA NAME=hhh ROWS=5 COLS=60> мои увлечения </TEXTAREA>

</body>

<html>

Сохраните этот документ в виде HTML-файла под именем форма.html и просмотрите, заполните.