Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

ИТ лабы

.pdf
Скачиваний:
5
Добавлен:
10.05.2015
Размер:
578.88 Кб
Скачать

Министерство образования и науки Российской Федерации Государственное образовательное учреждение

высшего профессионального образования žКузбасский государственный технический университет¡

О. Н. Ванеев

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

Рекомендовано учебно-методической комиссией специальности

230201žИнформационные системы и технологии¡

Кемерово 2011

1

Рецензенты:

А. В. Протодьяконов – доцент кафедры ИиАПС В. А. Полетаев – проф., д.т.н., председатель УМК специальности 230201žИнформационные системы и технологии¡

Ванеев О. Н. Информационные технологии: методические указания к лабораторным работам по дисциплине žИнформационные технологии¡ [Электронный ресурс]: для студентов очной формы обучения специальности 230201 žИнформационные системы и технологии¡ / О. Н. Ванеев. – Электрон. дан. – Кемерово: ГУ КузГТУ, 2011 – 1 электрон. опт. диск (CD-ROM); зв.; цв.; 12 см. – Систем. требования: Pentium IV; ОЗУ 8 Мб; Windows 95; (CD-ROM-дисковод); мышь. – Загл. с экрана.

В данных методических указаниях изложено содержание 9 лабораторных работ, порядок их выполнения и контрольные вопросы к ним.

ГУ КузГТУВанеев О. Н.

2

Лабораторная работа № 1

Создание документа HTML. Основные элементы. Использование списков, таблиц. Изображений

1. ЦЕЛЬ РАБОТЫ

Изучение элементов документа HTML и основных элементов оформления.

Задачами работы является:

изучение структуры документа HTML;

получение практических навыков разработки документа

HTML.

2. ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ

Документ html состоит из:

строки декларации документа;

и самого документа.

Декларация документа является рекомендуемой частью, и может отсутствовать. В ней обычно указывается тип документа, то есть стандарт, по которому он разработан. Кроме того, указывается ссылка на разработчика стандарта. Например,

<!DOSTYPE HTML PUBLIC– “//W3C//DTD HTML 40//EN” http://www.w3.org./>

Сам документ ограничен тегами (<html> и </html>) и состоит из

заголовка (<head> и </head>);

тела документа (<body> и </body>).

Заголовок (<head> и </head>).

Заголовок может включать:

элемент <title></title> – задает титул элемента, отображенный в заголовке браузера;

элемент <link></link> – ссылки на другие документы;

элемент <style></style> – задает внутреннюю таблицу стилей, то есть параметры отображения различных стилей;

и другие элементы.

3

Тело документа (<body> и </body>):

Тело документа содержит всё содержимое документа, является основной содержательной частью.

В качестве атрибутов могут использоваться базовые, локальные атрибуты и события (onload, onunload).

Используется два типа элементов:

Блочные элементы могут содержать как другие текстовые элементы, так и другие блочные элементы. Отображаются в виде отдельного абзаца.

Текстовые элементы (только текстовые, при отображении они выводятся в текущей строке). Состав элементов и их применение приведёт в приложении к лабораторной работе.

При разработке документов обычно используется принцип разделения содержания документа и его формы отображения. Содержание определяется содержимым элемента, форма параметрами отображения, задаваемыми в таблицах стилей и значениями атрибутов тегов. Таблицы стилей будут изучены позднее.

Существуют элементы, которые предусматривают задание некоторой формы отображения по умолчанию, определяемой смысловым содержимым тега.

Например, заголовки, задаваемые тегами H1, H2, .. H<N>.., H6 включается текст, являющийся заголовком. Текст, заключенный в данные элементы выводится заголовочным шрифтом, величина которого определятся номером <N>. Другие типы аналогичных тегов приведены в приложении.

Чтобы включить в страницу рисунок, надо описать ссылку на него:

<img src="СсылкаНаРисунок">

где src="СсылкаНаРисунок – ссылка на файл в формате gif, jpg или png , содержащий рисунок.

Взаимное расположение рисунка и текста задается атрибутом align.

Возможны следующие типы выравнивания: align = "middle" – относительно центра строки; align = "left" – текст обтекает картинку справа; align = "right"- то же слева.

4

Язык HTML предлагает несколько механизмов создания списков информации. В каждом списке должен быть один или несколько элементов списков. Элементы списка задаются тегом <LI> </LI>.

Не упорядоченные списки создаются с помощью элемента <UL></UL>. Упорядоченный список создается с помощью элемента <OL></OL>,

Существуют особые типы списков – списки определений. Данные списки в качестве элементов содержат определение некоторого термина (элемент – <DT> </DT>) и расшифровку, пояснение этого термина (элемент <DD> </DD>). Сам список задается с помощью тегов <DL></DL>.

Пример списка определений <DL>

<DT>Математика </DT> <DD> Наука о числах</DD> <DT>Философия </DT> <DD> Сложная наука</DD> </DL>.

Таблицы в HTML позволяют упорядочивать данные – текст, форматированный текст, изображения, ссылки, формы, поля форм, другие таблицы и т.д. – в строки и столбцы ячеек.

Таблица размещается между тегами <table>...</table> . <TR> – новая строка для неограниченного числа ячеек таб-

лицы. <TH> – ячейка для заголовков. <TD> – ячейка для обычного текста.

Таблица может содержать заголовок тег <head> </head> . в случае, если таблица должна содержать заголовок, рекомендуется использовать данный тег, а не дополнительный текстовый элемент.

ROWSPAN – задает количество ячеек объединенных в колонку

COLSPAN – задает количество ячеек объединенных в строчку

BORDER – рамка вокруг таблицы.

Перед началом работы создайте на компьютере отдельную папку для будущей страницы

С:\мои документы\ИТ092_Сидоров.

5

Для создания страниц используйте блокнот, или другой не специализированный редактор.

Создаваемым документам необходимо задавать расширение *.html. Имя документу необходимо задавать в соответствии с выполняемой работой, например lab1.html.

Не нужно использовать для создаваемых документов сложные имена, то есть имена, с пробелами внутри. Желательно использовать для имён документов латинский шрифт.

Просматривать созданные документы необходимо с помощью браузера.

3.ПОРЯДОК ВЫПОЛНЕНИЯ

1.Уточнить задание у преподавателя.

2.Создать с помощью текстового редактора документ HTML, в соответствии с заданием.

3.Просмотреть документ в браузере.

4.ЗАДАНИЕ

1.Создать HTML-документ,

2.отобразить в документе информацию:

а) о наименовании лабораторной работы; б) о ее исполнителе (Фамилия Имя Отчество).

данные об исполнителе:

место проживания;

интересы.

описание факультета.

специальности.

учебного заведения с приведением его аббревиатуры.

включить в свой html-документ рисунок.

составить упорядоченный, неупорядоченный и список определений изучаемых предметов.

создать таблицу. Таблица может отображать:

оценки по предметам;

места отдыха на каникулах во время обучения.

6

5.КОНТРОЛЬНЫЕ ВОПРОСЫ

1.Состав HTML документа. Зачем нужна декларация?

2.Содержимое элемента HEAD. Каким образом можно задать информацию, отображаемую в заголовке документа?

3.Чем задается форма отображения элементов?

4.Какие типы списков используются в документе HTML? Какими элементами задается их содержимое и сами списки?

5.Каким образом в документ можно включить рисунок?

6.Какими элементами задается таблица?

Лабораторная работа № 2 Использование ссылок. Клиентская карта ссылок

1. ЦЕЛЬ РАБОТЫ

Изучение основных принципов работы ссылок в гипертекстовых документах и элементов, используемых для их создания.

Задачами работы является:

изучение ссылок используемых в HTML-документе;

изучение и создание карты ссылок, используемой в составе гипертекстового документа.

2. ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ

Ссылки в гипертекстовом документе позволяют переходить с некоторого места в документе к некоторому заданному элементу этого же или другого документа.

Ссылки могут быть созданы:

с помощью элемента žАнкер¡ – <a>…</a>

с помощью карт ссылок, клиентской или серверной карты ссылок.

Использование элемента ¡Анкер£ – <a>…</a>

В общем случае для создания гиперссылки необходимо задать 2 элемента анкера: один в месте, откуда идет ссылка (источник ссылки), другой в месте, куда направлена ссылка (цель ссылки):

7

Анкер-источника имеет вид:

<a href="адресПерехода"> содержимое элемента</a>.

Вкачестве параметра адресПерехода может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML документа, к которому нужно перейти. При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого и используется Анкер-цель ссылки.

Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать ан- кер-цели ссылки в файле 2.html:

<a name="aaa"> Переход закончен</a>.

Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.html (или в любом другом) необходимо задать анкер-источник ссылки, то есть место, с которого будет выполняться переход. Анкер-источник выделяется обусловленными для него параметрами отображения.

Врассматриваемом примере анкер-источник ссылки имеет

вид:

<a href="2.html#aaa"> Переход к анкеру aaa</a>.

Переход к этому анкеру можно определить и внутри самого документа 2.html – достаточно только включить в него вот такой фрагмент:

<a href="#aaa"> Переход к анкеру aaa</a>.

Использование карты ссылок для организации ссылок

Карты ссылок задаются элементом <map></map>.

Элемент <map> включает себя тэг(и) <area>, которые определяют геометрические области внутри карты и ссылки, связанные с каждой областью (то есть места в документах, куда происходит переход, при нажатии на какую-либо карты ссылок).

Характерные атрибуты элемента <area> – shape и coords. shape – определяет форму области:

она может быть прямоугольником (shape="rect")

кругом (shape="circle")

многоугольником (shape="poly").

8

Атрибут coords – определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной формы. Отсчет ведется от левого верхнего угла картинки, координаты этой точки (0;0).

Порядок записи координат для атрибута coords следующий: <area shape="rect" href=”цельСсылки” wcoords="x1,y1,x2,y2 ">

Атрибут href используется, чтобы прописать, куда ссылается выделенная область.

У тэга <map> есть атрибут name – имя карты, он используется для связи графического образа с картой ссылок.

Для того чтобы связать графический образ с картой ссылок, у него используется атрибут usemap="#имяКарты":

<img src="bluerects.gif" usemap="#karta1"> <map name="karta1">

<area href="drugoy_document.html" shape="rect" coords= "x1,y1,x2,y2 "> </map>

То есть не карта связывается с картинкой, а картинка с обра-

зом.

3.ПОРЯДОК ВЫПОЛНЕНИЯ

1.Ознакомиться с теоретическими положениями, приведенными в п. 2. Подтвердить знание материала ответить на контрольные вопросы п. 5.

2.Создать документ HTML содержащий ссылки на основе анкеров и клиентской карты ссылок.

3.Подготовить отчёт по лабораторной работе.

4.Сдать отчёт и созданный документ на проверку препода-

вателю.

4.ЗАДАНИЕ

1.Сделать ссылку, при нажатии на которую вы попадаете в начало html-документа из прошлой лабораторной работы.

2.Сделать ссылку, при нажатии на которую вы попадаете в начало списка изучаемых вами предметов (используйте htmlстраницу из прошлой лабораторной работы).

3.Создать карту ссылок, выделив в ней не менее двух областей переходов. Связать области перехода с элементами, находящимися в начале и конце документа, созданного на лабораторной работе № 1.

9

5.КОНТРОЛЬНЫЕ ВОПРОСЫ

1.Что такое ссылка ссылки? Какими элементами реализуется ссылка в документе HTML?

2.Основные атрибуты элемента žанкер¡.

3.Что подразумевается под понятием анкер цели и анкер источник ссылки?

4.Как выполнить ссылку на определенную часть доку-

мента?

5.Что такое клиентская карта ссылок? Элементы карт ссылок, их атрибуты.

6.Каким образом карта ссылок связывается с графическим

образом?

Лабораторная работа № 3 Создание форм HTML

1. ЦЕЛЬ РАБОТЫ

Освоение принципов разработки диалоговых форм документов HTML.

Задачами работы является:

Изучение принципов работы диалоговых форм гипертекстовых документов;

Изучение элементов используемых для построения формы;

Получение практических навыков разработки диалоговых форм гипертекстовых документов.

2. ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ

Форма – это объект, с помощью которого обеспечивается взаимодействие пользователя с HTML-документом. Форма HTML-документа позволяет пользователю вводить данные, отправлять данные на WEB сервер для обработки и отображать полученные данные с сервера.

Форма ограничивается тегами: <FORM>

</FORM>.

Тег <form> может содержать три характерных для него атрибута, ACTION , METHOD, ENCTYPE.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]