Министерство образования РФ
ОМСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
(ОмГТУ)
Кафедра «Автоматизированные системы обработки информации и управления»
ОТЧЕТ
ПО ЛАБОРАТОРНОЙ РАБОТЕ
Язык разметки гипертекста HTML
по дисциплине:
СЕТИ ЭВМ И СРЕДСТВА ТЕЛЕКОММУНИКАЦИЙ
Преподаватель
Д.П. Борзенков
Студент гр. В-411
А.А. Иваненко
Омск 2004
Реферат
Отчёт по лабораторной работе 26c., 6 рис., 2 источника, 1 приложение.
ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML. ОСНОВНЫЕ ЭЛЕМЕНТЫ ЯЗЫКА. ФРЕЙМЫ. СОЗДАНИЕ СПИСКОВ И ТАБЛИЦ. ИСПОЛЬЗОВАНИЕ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ. ФОН. ОФОРМЛЕНИЕ БЛОЧНЫХ ЭЛЕМЕНТОВ.
Цель работы – изучение основных элементов языка HTML.
В процессе выполнения работы был изучен теоретический материал по основам языка HTMLи основамCSS.
В результате работы были получены практические навыки по созданию страничек с помощью языка HTMLиCSS.
Содержание
Введение………………………………….…………………………………...4
Ход выполнения работы………………………………………………….6
Скриншоты страниц………………………………………………………8
Заключение…………………………………………………………………...11
Список используемых источников…………………………………………12
Приложение (Листинг html-страниц)………………………………………13
Введение
Термин HTML(HyperTextMarkupLanguage) означает "язык разметки гипертекста". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/).
Устройство HTML-документа:
HTML-документ — это просто текстовый файл с расширением *.html или *.htm. Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
</body>
</html>
Дополнительные отступы в HTML совсем не обязательны. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Но их использование делает код удобным для чтения и редактирования.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag>есть закрывающая метка вида</tag>с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>,<BODY>и<Body>будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты— элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
Обязательные метки:
<html> ... </html>
Метка <html>должна открывать HTML-документ. Аналогично, метка</html>должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title>ниже), в этот раздел может включаться множество служебной информации.
<title> ... </title>
Все, что находится между метками <title>и</title>, толкуется браузером как название документа.Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1> ... </H1> — <H7> ... </H7>
Метки вида <Hi>(гдеi— цифра от 1 до 7) описывают заголовки семи различных уровней. Заголовок первого уровня — самый крупный, седьмого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P>и</P>, воспринимается как один абзац.
Метки <Hi>и<P>могут содержать дополнительный атрибутALIGN(читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка
по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю</P>
1. Ход выполнения работы
Для создания Web-страниц использовалась программаMacromediaDreamweaver4.0 иNotepad.
На главной странице были созданы три фрейма с помощью тэгов <FRAMESET></FRAMESET>, <FRAME> и их атрибутов.
<framename="leftFrame"scrolling="NO"noresizesrc="page/page_2.htm"> - этот фрейм содержит ссылку на страницу с меню. Меню было создано как ненумерованный список с помощью тэгов <UL>,<LI>.
Эта страничка содержит ссылку наe-mail:
E-mail:<A href="mailto:jdk@mail.ru">jdk@mail.ru</A>
Ещё на этой страничке расположен баннер:
<a href="www.javaworld.com" target="_blank">
<img src="Images/top.gif" width="182" height="88"></a>
<frame name="topFrame" noresize scrolling="NO" src="page/page_1.htm"> - этот фрейм содержит страницу с логотипом:
<img src="Images/Logo_3D.GIF" width="301" height="80">
<framename="mainFrame"src="page/page_3.htm"> - этот фрейм содержит ссылку на главную страницу, которая содержит заголовок (тэг <H1></H1>) и содержание разделов в виде вложенного списка со ссылками:
<UL>
<LI CLASS="class2"><A href="vvedenie.htm">Введение:</A>
<OL>
<LI><A href="instrument.htm">Инструментарий разработчика</A>
<LI><A href="mobil.htm">Мобильность Java </A>
<LI><A href="td.htm">Базовые типы данных</A>
</OL>
<LI CLASS="class2"><A href="prilojenie.htm">Первое приложение:</A>
<OL>
<LI><A href="jws.htm">Установка Java WorkShop</A>
<LI><A href="hello.htm">Приложение HelloJava</A>
</OL>
</UL>
На остальных страницах содержится текст и картинки.
Картинки и подписи к ним в разделе «Инструментарий разработчика» расположены в невидимых таблицах, для удобства разметки.
<table border="0" cellpadding="2" width="440">
<tr>
<td width="165"><a href="work\ipic01.htm"><img src="work\pic01sm.gif" width="150" height="145"
alt="pic01sm.gif" border="0"></a></td>
<td valign="top">Рис. 1. Главное окно
приложения .<p><small>Для увеличения
рисунка щелкните по нему мышью</small></td>
</tr>
</table>
<table> - создание таблицы;
<tr> - строка в таблице;
<td> - ячейка в таблице;
<alt> - задаёт текст, который будет отображаться на месте картинки, пока она не загрузилась.
Также страницы содержат ссылки:
<a href="file.htm" target=”_blank”>название ссылки</a>
<a></a> - задаёт гиперссылку.
href– задаёт ссылку абсолютную или относительную, куда перекинет того, кто кликнет по обозначенной области.
target=”_blank” – открывает ссылку в новом окне.
Код примеров на языке Javaзаключается в тэги <pre></pre> - сохранение форматирования текста.
Увеличенные картинки вызываются щелчком мыши по маленькой картинке, и расположены они в отдельных html-файлах.
Все страницы с содержанием используют общий файл java.css.
Это файл содержит описание следующих селекторов: BODY,H1,P.
Также файл содержит два класса: .class1, .class2.
2. Скриншоты страниц.
Заключение
В процессе выполнения лабораторной работы я изучил основы языка HTML: основные тэги, создание фреймов, списков и таблиц. Кроме этого я научился использовать каскадные таблицы стилей(CSS).
Список используемых источников:
Холмогоров В. Основы Web-мастерства. – СПб: Питер, 2001. – 352 с.: ил.
Электронные учебники из папки «Дополнительные материалы».
Приложение
Листинг html-страниц
index.htm
<html>
<head>
<title>Java</title>
</head>
<frameset rows="*" cols="202,*" frameborder="YES" border="1" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="page/page_2.htm">
<frameset rows="95,*" frameborder="YES" border="1" framespacing="0" cols="*">
<frame name="topFrame" noresize scrolling="NO" src="page/page_1.htm">
<frame name="mainFrame" src="page/page_3.htm">
</frameset>
</frameset>
<noframes>
<body>
Если вы видите эту надпись значит ваш броузер
не поддерживает фреймы.
</body>
</noframes>
</html>
page_1.htm
<html>
<body background="images/bg_logo.gif">
<center>
<img src="Images/Logo_3D.GIF" width="301" height="80">
</center>
</body>
</html>
page_2.htm
<html>
<body text="#000000" background="images/bg.gif">
<a href="www.javaworld.com" target="_blank">
<img src="Images/top.gif" width="182" height="88"></a>
<br><br>
<UL type="circle">
<LI> <A href="page_3.htm" target="mainFrame"><font size="+2">Главная</font></a>
<LI> <A href="vvedenie.htm" target="mainFrame"><font size="+2">Введение</font></a>
<LI> <A href="prilojenie.htm" target="mainFrame"><font size="+2"> Первое приложение</font></a>
</ul>
E-mail:<A href="mailto:jdk@mail.ru">jdk@mail.ru</A>
</body>
</html>
page_3.htm
<html>
<head>
<link rel="stylesheet" href="java.css" type="text/css">
</head>
<body>
<H1>Добро пожаловать в мирJava!!! </H1>
<PCLASS="class1">
На данной страничке вы познакомитесь с принципами и технологиями, положенными в основу
языка Javaи научитесь создавать своё первое приложение.
</P>
<br><br>
<P CLASS="class1">
Содержание разделов:
</P>
<UL>
<LI CLASS="class2"><A href="vvedenie.htm">Введение:</A>
<OL>
<LI><A href="instrument.htm">Инструментарий разработчика</A>
<LI><A href="mobil.htm">Мобильность Java </A>
<LI><A href="td.htm">Базовые типы данных</A>
</OL>
<LI CLASS="class2"><A href="prilojenie.htm">Первое приложение:</A>
<OL>
<LI><A href="jws.htm">Установка Java WorkShop</A>
<LI><A href="hello.htm">Приложение HelloJava</A>
</OL>
</UL>
</body>
</html>