ИТ лабы
.pdfМинистерство образования и науки Российской Федерации Государственное образовательное учреждение
высшего профессионального образования žКузбасский государственный технический университет¡
О. Н. Ванеев
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
Рекомендовано учебно-методической комиссией специальности
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.