|
Читайте также: |
Лабораторный практикум
Рыбница, 2011
УДК 338.24
ББК 32.81
М 64
Составитель
В.Н. Черний, преп. каф. прикладной информатики
Рецензенты:
Л.А. Тягульская, канд. экон. наук, доц. кафедры физики математики и информатики филиала ПГУ им. Т.Г. Шевченко в г. Рыбница
И.А. Печерский, программист отдела автоматизации ЗАО «Агропром банк»
М 64 Мировые информационные ресурсы: лабораторный практикум/
Сост. В.Н. Черний. – Рыбница, 2011. – 62 с. (в обл.)
В лабораторном практикуме приведены лабораторные работы по дисциплине "Мировые информационные ресурсы", примеры отдельных заданий, а также даются рекомендации по выполнению лабораторных работ. В практикуме предусматривается выполнение практических и самостоятельных заданий на основе использования стандартного языка разметки документов HTML.
Лабораторный практикум предназначен для студентов дневной формы обучения специальности "Прикладная информатика в экономике" (080801) и соответствует рабочей программе указанной дисциплины.
УДК 338.24
ББК 32.81
Рекомендовано Научно-методическим советом ПГУ им. Т.Г. Шевченко
© Составление:
Черний В.Н., 2011
Содержание
Введение………………………………………………………………………….4
Лабораторная работа №1. Структура HTML–документа……………………5
Лабораторная работа №2. Работа с текстом………………………………...12
Лабораторная работа №3. Работа со списками. Гипертекстовые ссылки..23
Лабораторная работа №4. Объекты HTML–документов…………………..30
Лабораторная работа № 5. Оформление HTML документа. Таблицы…....38
Лабораторная работа № 6. Формы в HTML………………………………...46
Лабораторная работа №7. Работа с фреймами……………………………...54
Заключение……………………………………………………………………..60
Список литературы …………………………………………………………...61
Введение
Основным элементом WWW (World Wide Web) является web-страница– текст, размеченный специальными маркерами-тегами, которые обеспечивают определенный внешний вид материала и его связи с другими страницами. Все web-страницы записываются на специальном языке HTML. Сегодня технология WWW позволяет пользователям создавать web-страницы, которые посредством гиперссылок связаны с другими страницами и прочими размещенными в Интернете ресурсами.
HTML – язык разметки гипертекста (HyperText Markup Language), используемый при создании web-страниц.
Гиперссылка – выделенный фрагмент документа (текст, иллюстрация), с которым ассоциирован адрес другого web-документа.
В дополнение к тексту web-страницы могут содержать графику, звуки, анимацию и другие специальные эффекты. Отдельные страницы могут быть связаны с другими страницами, обеспечивая доступ к дополнительной информации. Вся эта информация передается по физическим носителям Интернета при помощи протоколов Интернета.
Совокупность web-страниц, связанных между собой взаимными гиперссылками, называется web-узлом, или web-сайтом. Web-сайт располагается на web-сервере в определенной папке этого сервера.
Идея HTML - пример чрезвычайно удачного решения проблемы построения гипертекстовой системы при помощи специального средства управления отображением. С момента разработки первой версии языка произошло довольно серьезное его развитие. Почти вдвое увеличилось число элементов разметки, оформление документов все больше приближается к оформлению качественных печатных изданий, развиваются средства описания нетекстовых информационных ресурсов и способы взаимодействия с прикладным программным обеспечением.
Лабораторная работа №1
Тема: Структура HTML–документа
Цель: Ознакомиться со структурой HTML-документа
Для перевода текстового файла в HTML–файл, необходимо поменять расширение с ".txt" на ".html". Также необходимо соблюдать "правило первой строки". Каждый HTML–документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки декларации версии HTML <!DOCTYPE>, которая выглядит так:
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">
Эта строка помогает браузеру определить, как правильно интерпретировать данный документ. В данном случае браузеру передается информация о том, что HTML соответствует международной спецификации версии 3.2, которая является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html–документ может состоять из одной строки.
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">
После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML–документ открывается тэгом <HTML> и им же закрывается.
Далее, между тэгами <HTML> и </HTML> следует разместить заголовок и тело документа. Таким образом должен выглядеть базовый HTML–файл перед началом работы:
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 3.2 Final//RU">
<HTML>
<HEAD>
<TITLE>заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Приведенный выше документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия.
Тело документа – основная часть документа. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, большинство HTML–экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>
Одной из наиболее распространенных ошибок размещение заголовка в теле документа или наоборот, что совершенно недопустимо. Сначала закрываем заголовок </HEAD>, затем открываем тело.
Заголовок HTML–документа
Заголовок HTML–документа создается с помощью элемента HEAD, между тэгами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок располагается до тела документа.
Элементы, относящиеся к заголовку документа:
| HEAD | Определяет начало и конец заголовка документа |
| TITLE | Определяет имя всего документа, которое отображается в заголовке окна браузера |
| BASE | Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа |
| STYLE | Используется для вставки в документ таблицы стилей CSS |
| LINK | Описывает взаимосвязь документа с другими объектами |
HEAD
(HTML 1.0) – Head
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.
<HTML>
<! –Начинаем загодовок…–>
<HEAD>
<TITLE>справочник по HTML</TITLE>
</HEAD>
<! –…кончили. Дальше пошло тело документа –>
<BODY>
Текст документа
</BODY>
</HTML>
TITLE
(HTML 2.0) – Title
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML–документа и может быть указан не более одного раза.
…
<HEAD>
<TITLE>руководство по эксплуатации</TITLE>
</HEAD>
…
BASE
(HTML 3.2) – Base URL
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из параметров.
Параметры:
HREF – определяет базовый адрес (URL) текущего документа.
TARGET – определяет имя фрэйма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрэйме.
<HEAD>
<! – Пусть браузер думает, что находится по адресу: –>
<BASE HREF = “http://www.igf.ru/other/index.html”>
</HEAD>
…
<! – А теперь создадим относительную ссылку на документ – >
<! – http://www.igf.ru/other/list.html –>
<A HREF = “../list.html”> Список </A>
…
STYLE
(HTML 3.2) – Style
Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).
Параметры:
TYPE – обязательный параметр. Определяет MIME–тип вставляемого блока стилей. Как правило, значением этого параметра является "text/css".
TITLE – определяет имя создаваемой таблицы стилей. Может пригодиться, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.
<HEAD>
<TITLE> Пример использования таблицы стилей </TITLE >
<! – Втыкаем табличку стилей –>
<STYLE TYPE = “text/css” TITLE = “Cool table”>
<! –
A {text – decoration: none;}
P {color: blue, font – size: 12pt; font – family: Arial;}
H1{color: red; font – size: 18pt;}
- >
</STYLE >
<! – … кончили втыкать –>
</HEAD>
LINK
(HTML 2.0) – Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тэга. В заголовке может содержаться несколько элементов LINK.
Параметры:
HREF – определяет URL объекта.
REL – определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:
stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css–файл с указанного в параметре HREF адреса и применит его к текущему документу.
home – указывает на заглавную страницу вашего сайта
toc, contents – указывают на файл, содержащий оглавление данного документа.
index – указывает на файл, содержащий информацию для индексного поиска по текущему документу.
glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
previous – указывает на предыдущую страницу в последовательности документов.
last, end – указывает на последнюю страницу в последовательности документов.
first – указывает на первую страницу в последовательности документов.
help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE – определяет MIME–тип для объекта, указанного в параметре HREF.
<HEAD>
<TITLE> Элементы DIV</ TITLE >
<LINK REL = “HOME” TITLE = “HTML – справочник” HREF = “index.html”>
< LINK REL = “UP” TITLE = “Текстовые блоки” HREF = “textblocks.html”>
<LINK REL = “PREVIOUS” TITLE = “Элемент Р” HREF = “р.html”>
<LINK REL = “NEXT” TITLE = “Элемент ADDRESS” HREF = “address.html”>
</HEAD>
<HEAD>
<TITLE> Полдневье </ TITLE >
<LINK REL = “stylesheet” TYPE = “text/css” HREF = “deco1.css”>
Тело HTML-документа
BODY
(HTML 2.0) - Body
Указывает начало и конец тела HTML-документа. Между начальным и конечным тэгами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза.
Параметры:
MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.
TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.
MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.
LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.
BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg.
BGCOLOR - определяет цвет фона документа.
TEXT - определяет цвет текста в документе.
LINK - определяет цвет гиперссылок в документе.
ALINK - определяет цвет подсветки гиперссылок в момент нажатия.
VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе.
<HTML>
<BODY BACKGROUND=”image.jpg” BGCOLOR=“#202020” TEXT=”#FFFFFF” LINK=”#FF0000” VLINK=”#505050” MARGINHEIGHT=”30” TOPMARGIN=”30” LEFTMARGIN=”40” MARGINWIDTH=”40”>
…
Текс документа.
…
</BODY>
</HTML>
Примечание:
При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно параметры MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере.
Всегда указывайте параметры BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих параметров не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows.
Задание:
Дата добавления: 2015-11-14; просмотров: 49 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Робота №8. Визначення показника хлоруємості. | | | Составить базовый HTML-файл, содержащий строку декларации, заголовок и тело документа. |