МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ РАДИОТЕХНИКИ, ЭЛЕКТРОНИКИ И АВТОМАТИКИ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ) Факультет Кибернетики Кафедра Интеллектуальных технологий и систем Лабораторная работа № 1 Тема: «Язык разметки гипертекста HTML. Изучение структуры Webстраницы, элементов форматирования текста, таблиц, стилей. Использование списков и таблиц» Дисциплина: «Интернет технологии» Выполнил: Губин М.О. Группа:ИИ-1-3 Проверил: Звездочкина М.К. МОСКВА 2007 2 Задание 1. Сделайте резервную копию полученной дискеты и, особенно, содержащихся в ней HTML-файлов, поскольку они в процессе выполнения лабораторной работы будут изменяться. 2. Изучите Методические указания или соответствующие разделы пособий [1,2]. 3. Изучите структуру Web-страницы. (Файл strukt.htm). При нажатии на эту ссылку вы увидите шаблон простейшей Web-страницы. Проделайте следующие действия. 3.1. На вкладке Вид браузера Microsoft Internet Explorer укажите режим в виде HTML. Вы увидите страничку Блокнота, содержащую HTML-код рассматриваемой Webстраницы. 3.2. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера 3.3. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код страницы, изменив ее заголовок (Элемент <TITLE>), назвав её Моя первая Web-страница. Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь, что строка заголовка окна браузера изменилась. 3.4. Укажите в элементе <META> свою фамилию и измените набор ключевых слов. 3.5. Измените цвет фона и содержание комментария. 3.6. Вместо заголовков 1,2,3,4,5,6 запишите соответственно ваши: 1. Фамилия, 2. Имя, 3. Отчество, 4. № учебной группы, 5. Название факультета, 6. Название специальности. 3.7. После Ссылки1 сообщите сведения о вашей работе. 3.8. Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь, что внесенные изменения нашли свое отражение в окне браузера. 3.9. Не пользуясь шаблоном (Файл strukt.htm), создайте самостоятельно подобную Web-страницу (Файл strukt1.htm). 3.10. Измененный файл strukt.htm и файл strukt1.htm включите в отчет по лабораторной работе. 4. Изучите и запомните элементы форматирования текста (Файл Text.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую различные элементы форматирования текста. Проделайте следующие действия. 4.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, запомните основные элементы форматирования текста. 4.2. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код страницы, изменив строку Форматирование текста на Мой первый опыт форматирования текста. В новой строке измените цвета, размеры и расположение букв. Сохраните файл Text.htm, нажмите кнопку Обновить браузера и убедитесь, что строка изменилась. 4.3. Замените тексты первого, второго, центрированного абзацев и, добавив четвертый центрированный абзац , напечатав соответственно свои данные: 1. Мой рост __ 1 м __см 2. Мой вес__кг 3. Цвет волос_____ 4. Цвет глаз_____ Подберите при этом размер, жирность и цвет шрифта соответственно этим данным. 4.4. В первой бегущей строке укажите свои ФИО, домашние адрес и № телефона, а во второй место работы, должность и рабочий № телефона. Измените параметры шрифтов и фонов по своему усмотрению. 4.5. В каждой строке, иллюстрирующей применение элементов форматирования HTML, запишите свои оригинальные тексты. 4.6. Используя элементы форматирования текста, запишите копии первых двух страничек вашей зачетной книжки и студенческого билета. 3 4.7. Измененный файл Text.htm и файлы ZachetnKnizhka.htm, StudBilet.htm включите в отчет по лабораторной работе. 5. Изучите и запомните таблицы стилей (Файл style.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую примеры использования таблиц стилей. Проделайте следующие действия. 5.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, запомните основные приемы использования таблиц стилей, применяемых для форматирования текста. 5.2. В строке Заголовок 2 укажите свои ФИО, домашние адрес и № телефона, а в строке Заголовок 3 - место работы, должность и рабочий № телефона. Измените параметры шрифтов и фонов по своему усмотрению. 5.3. Внесите не менее пяти изменений, улучшающих дизайн страницы. 5.4. Измененный файл style.htm включите в отчет по лабораторной работе. 6. Изучите и запомните использование списков и таблиц (Файл ListTable.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую примеры использования списков и таблиц. Проделайте следующие действия. 6.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, изучите и запомните основные приемы использования списков и таблиц. 6.2. По примеру вложенных списков отобразите сведения о вас и ваших товарищах: Иванов И. И. Рост 170 см. Вес 63 кг. Цвет глаз карие Петров П. И. Рост 160 см. Вес 55 кг. Цвет глаз голубые Сидорова Ф. Ф. Рост 180 см. Вес 55 кг. Цвет глаз голубые Подберите при этом размер, жирность и цвет шрифта соответственно этим данным. 6.3. Аналогично отобразите сведения о вас и ваших товарищах в таблицах 1, 2, 3, скорректировав соответственно содержание заголовков и ячеек таблиц. 6.4. Внесите не менее пяти изменений, улучшающих дизайн таблиц (Цвета шрифтов, фона, границы и т. д.). 6.5. Измененный файл ListTable.htm включите в отчет по лабораторной работе. Содержание отчета Задание к работе Файлы: strukt.html, strukt1.html Text.html ,ZachetnKnizhka.html, StudBilet.html style.html ListTable.html 3. Указанные файлы должны быть представлены в виде распечаток и на дискете с расширениями .html и .txt 4 Цель работы: Ознакомление с принципами, лежащими в основе языка разметки гипертекста HTML. Формирование навыков форматирования текста и использования списков и таблиц. Файл Struct.html Файл Struct.txt <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H1><HTML><HEAD><TITLE>Моя первая страница</TITLE></h1> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD> <BODY bgColor=blue>HTML> <STYLE> H1 {color:yellow; font-style:italic} H2 { COLOR: yellow; FONT-FAMILY: verdana, sans-serif, arbat } H3 {color:yellow} H4 {color:yellow} H5 {color:yellow} H6 {color:yellow} CODE { FONT-FAMILY: Arial } </STYLE> 5 <META content="Губин М.О." name=Author> <H1><META content="HTML,WWW , element, document" name=Keywords>---<<<МОИ ЛИЧНЫЕ ДАННЫЕ>>>--- <A name=top; align=center></A></h1> <HR> Переход в <A href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#botto m">конец</A> документа <HR> Переход к <A href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#S001" >ссылке 1</A> <HR> <H1>Губин</H1> <H2>Михаил</H2> <H3>Олегович</H3> <H4>Группа: ИИ-1-03</H4> <H5>Факультет: Кибернетика</H5> <H6>Специальность: Автоматизированные системы управления</H6> Существует шесть уровней заголовков, которые обозначаются H1...H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Шаблон дает представление об относительных размерах букв в заголов-ках. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо. <HR> Здесь расположена ссылка 1<A name=S001></A> <HR> Валютный дилер в Росевробанке <HR> <A name=bottom></A> Переход в <A href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#top"> начало</A> документа. </BODY></HTML> 6 Файл Struct1.html Файл Struct1.txt <HTML> <HEAD> <TITLE>Здравствуйте! Это моя первая страница</title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> H1 {border-width: 16; border: groove; text-align: center; color: yellow} H2 {color: yellow; font-style: italic} H3 {color: green; font-style: italic} H4 {color: white; font-style: italic} H5 {color: pink; font-style: italic} H6 {color: blue; font-style: italic} CODE {font-family: Arial, Verdana; background: Aqua} P {text-indent: 10; color: Fuchsia; font-size: 14pt} P CODE {font-weight: bold; color: green; font-size: 12pt} </style> </head> <BODY bgcolor=Black> <A href="A:\ЛабРаб1_2.htm">Возврат</a>   <H1>Здравствуйте! Это моя первая страница</h1> <HR> <H2>Губин</h2> 7 <HR> <H3>Михаил</h3> <HR> <H4>Олегович</h4> <HR> <H5>Дата рождения:05.09.1985</h5> <HR> <H6>Место рождения: г.Москва</h6> <HR> <CODE background="red+blue">Здесь я попытался изобразить свою первую страницу</code> <CODE> Привет землянам </code> <HR> </body> </html> Файл Text.html 8 Файл Text.txt <HTML> <HEAD> <TITLE> Элементы форматирования текста </title></head> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <BODY> <A href="A:\ЛабРаб1_2.htm">Возврат</a> <A name="top"></a> <CENTER> Мой первый опыт форматирования те кс та </center> <HR color="Lime"> Мой рост 1м.79см. Мой вес 79 кг. Мой цвет волос черный Мой цвет глаз зелёный Как нужно правильно форматировать текст смотри и учись человек. <HR color="red" SIZE=10 WIDTH=70% ALIGN=left> Зздесь показано правильное использование элемента В <BIG> А тут показано как нужно использовать элемент BIG </big> Здесь соответственно показан элемент SMALL Использование настоящего элемента I <STRIKE> Здесь мы продемонстрируем вам как работает элемент STRIKE </strike> Здесь показан Обычный текст и элемент SUB аналогично только с элемент SUP Действие элемента U <CENTER> Использование элемента CENTER </center> Элемент BR обеспечивает разрыв строки Эта строка, хоть и длинная, не должна разрываться броузером, потому что текст этой строки находится внутри элемента NOBR <HR> <PRE> Использование элемента PRE. Он запрещает форматирование текста броузером и выводит его так, как определил пользователь.</pre> <HR> <PRE> Внутри элемента PRE можно использовать ссылку: <A href="#top">Щелкни (переход в начало документа)</a></pre> <HR> <PRE>Использование символов LF и CR в элементе PRE. &#10&#13 Продолжение строки.</pre> <HR> <BDO dir="RTL">Направление текста можно изменить</BDO> <HR> 9 Бегущая строка (работает в Internet Explorer) <MARQUEE bgcolor= "Gold" height=50 behavior="alternate">Губин Михаил Олегович, 3-я Радиальная, д.14, кв.21,д.т. 326-2983</marquee> <MARQUEE bgcolor= "Black" direction="left">Место работы: РосЕвробанк, Должность: Валютный дилер, р.т.533-45-43</marquee> <HR> <H3>Задание абсолютных размеров шрифтов</h3> 7 размер 6 размер 5 размер 4 размер 3 размер 2 размер 1 размер <HR> Вы что не видите красный цвет текста <HR> <H3>Задание относительных размеров шрифтов</h3> аналогично +4 аналогично +3 аналогично +2 аналогично +1 аналогично +0 аналогично -1 аналогично -2 <HR> Шрифт типа Arial </BODY></HTML> Файл ZachetnKnizhka.html 10 Файл ZachetnKnizhka.txt <HTML> <HEAD> <TITLE>Зачетная книжка</title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> H1 H2 H5 </style> </head> <BODY bgcolor=White> <TABLE border=4 width=4 height="123" cellspacing=4 cellspadding=10 bgcolor="Студень.jpg" align="center"> <TR> <TD bgcolor="White" border=2 width=1 height=123><PRE> <img src="М.jpg" width="68" height="97" align="left" align="left" vspace=74 hspace=5> <BIG> <BIG> <BIG> </pre><PRE> Губин </big> Михаил </big> Олегович </big> Место для печати </pre><PRE> (личная подпись cтудента) </TD> </pre> <TD bgcolor="white" border=3 width=2 valign="top"> <PRE> <BIG> Зачетная книжка №</big> ИИ-1-031315 Фамилия,имя,отчество Губин М.О. 11 Факультет Кибернетика </big> Специальность 220200 Поступил '03 переведен <BIG> </big> на 1 курс дата Приказ № 2166 от 25.07.03 г. Проректор по учебной работе Декан факультета " 01 " г. -1- 10 200 3 </pre> </TD> </TR> </table> </body> </html> Файл StudBilet.html 12 Файл StudBilet.txt <HTML> <HEAD> <TITLE>Студенческий билет</title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> H1 H2 H5 </style> </head> <BODY bgcolor=White> <TABLE border=4 width="1" cellspacing=4 cellspadding=10 bgcolor="Студень.jpg" align="center"> <TR> <TD bgcolor="White" border=2 width=1 cellspasing=3 cellspadding=10><PRE> СТУДЕНЧЕСКИЙ БИЛЕТ №иж-1031315 <img src="М.jpg" width="68" height="97" align="left" align="bottom"></pre><PRE>Фамилия<BIG> Губин </big> Имя<BIG> Михаил </big> Отчество<BIG> Олегович </big> Время поступления 25.07.03 Факультет<BIG> Кибернетика </big> Дата выдачи билета 01.09.03 Директор (Ректор)<BIG> </big> </pre></TD> <TD bgcolor="white" border="4" width="4" valign="top"><IMG src="печать.jpg" vspace=45 hspace=0 align="left"> <PRE> В 2003/04 уч.г. является студентом <BIG>1</big> курса Декан ф-та В 2004/05 уч.г. является студентом <BIG>2</big> курса Декан ф-та В 2005/06 уч.г. является студентом <BIG>3</big> курса Декан ф-та В 2006/07 уч.г. является студентом <BIG>4</big> курса Декан ф-та 13 В 2007/08 уч.г. является студентом <BIG>5</big> курса Декан ф-та В 20 / уч.г. является студентом курса Декан ф-та Д-9787 </pre> </TD> </TR> </table> </body> </html> Файл style.html Файл style.txt <HTML> <HEAD> <TITLE>Система тренингов</title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> H2 {color: maroon; font-style: italic} CODE {font-family: Arial, Verdana; background: Aqua} 14 P {text-indent: 10; color: Fuchsia; font-size: 14pt} P CODE {font-weight: bold; color: green; font-size: 12pt} </style> </head> <BODY bgcolor=Red> <H1><TABLE border=4 cellspacing=3 cellspadding=10 bgcolor="Green" Frame=void align="center"> <TR><TD bgcolor="Yellow"><PRE>Приветсвтует вас ситема тренингов</table></pre></h1> <HR color="Blue"> <H2>Губин Михаил Олегович</h2> <H3>Место работы Росевробанк</h3> <HR> Текст, не отформатированный никаким стилем (т.е. формат по умолчанию). Для этого абзаца использован собственный (inline) стиль. Это стиль, назначенный в элементе STYLE, для абзацев P всей страницы. В частности, выбран отступ первой строки. <CODE background="red"> Свойства элемента CODE можно переопределить, например, задать фон</code> <CODE> А этот стиль действует, если элемент CODE вложен в элемент P </code> <HR> </body> </html> Файл ListTable.html 15 Файл ListTable.txt <HTML> <HEAD> <TITLE> Мои примеры списков </title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <STYLE type="text/css"> OL.c01 {list-style-type: circle} </style> </head> <BODY bgcolor="black"> <HR color="blue"> Мои первые списки <HR color="blue"> <H3></h3> <UL>Пример ненумернованного списка <LI>Губин <LI>Михаил <LI>Олегович </ul> <HR color="red"> <H3><MARQUEE bgcolor="Blue" direction="left"> Пример вложенных списков</marquee></h3> <OL> <LI>Губин М.О. 16 <OL> <LI>Рост179см. <LI>Вес 79кг. <LI>Цвет глаз зеленый </ol> <LI>Губин Ю.С. <OL> <LI>Рост195см. <LI>Вес100кг. <LI>Цвет глаз голубой </ol> <LI>Шаганогачереззабор Л.З. <OL> <LI>Рост279см. <LI>Вес 179кг. <LI>Цвет глаз красный </ol> <HR> <H3>Нумерованный список</h3> <OL type="I"> <LI value = 3>Отсчет начинается с 3 <LI>Отсчет начинается с 4 <LI>Отсчет начинается с 5 <LI>Отсчет начинается с 6 </ol> <HR color="red" SIZE=10 > <CENTER><MARQUEE bgcolor="yellow" direction="right"> Примеры таблиц</marquee></center> <HR color="blue"> <H2>Таблица 1</h2> <TABLE border=4 cellspacing=3> <CAPTION> Таблица расхода семейного бюджета </caption> <TR><TH bgcolor="yellow">На сегодня <TH bgcolor="yellow">НА вчера <TR><TD>179 <TD> 123 <TR><TD> 125 <TD> 323 </table> <HR color="blue"> <H2>Таблица 2</h2> <TABLE border=4 cellspacing=3> <CAPTION> Пример матрицы финансового анализа </caption> <TR><TH bgcolor="yellow">&#160 <TH bgcolor="yellow">A <TH bgcolor="yellow">B <TR><TH bgcolor="yellow">C <TD>15% <TD> 17% <TR><TH bgcolor="yellow">Расходы 17 <TD> 12% <TD> 11% </table> <HR color="blue"> <H2> Таблица 3 </h2> <TABLE border="4" cellspacing=3 background="C:\Documents and Settings\Владелец\Мои Документы\Голубые холмы.gif"> <CAPTION>Таблица с объединенными ячейками и фоновым рисунком </caption> <TR><TH rowspan="2"> <TH colspan="2">Доход <TR><TH>За месяц<TH>За год <TR><TH>За погрузку вагонов<TD>123<TD>2345 <TR><TH>За разгрузку вагонов<TD>1245<TD>567643 </table> <HR color="blue"> <H2> Использование элементов THEAD, TBODY и TFOOT </h2> <TABLE border=2> <THEAD> <TR> <TD>Вход<TD>Выход <TFOOT> <TR> <TD> Работа начало <TD> Работа конец   <TBODY> <TR> <TD>2 <TD>14 <TR> <TD>3 <TD>4 <TBODY> <TR> <TD>4 <TD>16 <TR> <TD>6 <TD>17 <TR> <TD>5 <TD>16 </table> <HR color="blue"> <H2>Объединение ячеек</h2> <TABLE border=4 cellspacing=0 width=70%> <TR><TD bgcolor="yellow">Выбор действия <TD bgcolor="yellow">Возможные варианты <TR><TD rowspan=3 bgcolor="lime">1234 <TD>1234 <TR><TD>134 <TR><TD>123 <TR><TD colspan=2 bgcolor="aqua" align="center">SUM=12345$ </table> <HR color="blue"> <H2>Объединение ячеек</h2> <H3></h3> <TABLE border=4 cellspacing=0 width=70%> <TR><TD bgcolor="yellow">Заголовок 1 <TD bgcolor="yellow">Заголовок 2 <TD bgcolor="yellow">Заголовок 3 <TR><TD rowspan=4 colspan=2 bgcolor="lime">Ячейка 1 <TR><TD>1234 18 <TR><TD>1234 <TR><TD>1234 <TR><TD colspan=3 bgcolor="aqua" align="center">Ячейка 5 </table> <HR color="blue"> <H2>Вложенная таблица</h2> Для Netscape Communicator вложенная таблица должна иметь конечные теги TD!!! <TABLE border=4 cellspacing=2 width=75%> <TR><TD bgcolor="yellow">Таблица 1 <TD bgcolor="yellow"> <TABLE border=2 cellspacing=2> <TR><TD bgcolor="red">Таблица 2 <TD bgcolor="red">Ячейка 2-2 <TR><TD bgcolor="red">Ячейка 3-2 <TD bgcolor="red">Ячейка 4-2 </table> <TR><TD bgcolor="yellow">Ячейка 3-1 <TD bgcolor="yellow">Ячейка 4-1 </table> <HR color="blue"> <H2>Табличка 4</h2> <TABLE border=4 cellspacing=3 cellpadding=10> <TR><TD bgcolor="yellow">Петровым 2 звонка </table> <HR color="blue"> <H2>Название фирмы и логотип рядом</h2> <TABLE border=0 > <TR><TD><H3>ЗАО Обо всем и они очем</h3> <TD><IMG src="C:\Documents and Settings\Владелец\Мои Документы\Фирменный знак.gif"> </table> <HR color="green"> </BODY> </HTML>

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ

Products

Support

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib