Методические указания предназначены для студентов очной формы обучения по направлениям 080801 «Прикладная информатика (в экономике)», 080800.62 «Прикладная информатика (бакалавры)». В методических указаниях изложены цель и порядок выполнения каждой практической работы, содержание отчета, методические указания по ее выполнению и контрольные вопросы по теме работы.

В методических указаниях приводится список литературы, рекомендуемый для выполнения практических работ. В процессе выполнения практических работ студенты получат первые знания о языке HTML, каскадных таблицах стилей CSS и приобретут практические навыки создания web-страниц.

Редактор Технический редактор

Орловский государственный технический университет Лицензия ИД 00670 от 5.01.2000

Подписано к печати 29.04.2002 г. Формат 60×84 1\16 Печать офсетная Уч.-изд. л. 2,0. Усл. печ. л. . Тираж 50 экз. Заказ №

Отпечатано с готового оригинал-макета на полиграфической базе ОрелГТУ

302030, г. Орел, ул. Московская, 65

© ОрелГТУ, 2008 © Олькина Е.В., 2008

3

5

Введение

Web-страницы создаются с помощью языка HTML – HyperText Markup Language (язык разметки гипертекста). Именно этот язык используют специальные программы при создании документов в Internet, например программы

Macromedia Dreamweaver и Microsoft Frontpage. Браузеры при просмотре web-

страниц также интерпретируют HTML-документы.

Несмотря на существование программ, позволяющих создавать и редактировать web-страницы визуально, знать язык HTML полезно: «ручная» подготовка документа на HTML может обеспечить более эффективный код. Кроме того, программы редактирования HTML-документов могут поддерживать не все возможности последней версии языка HTML. Также иногда быстрее внести изменения в документ, отредактировав его «вручную».

Язык HTML предоставляет простой набор команд, описывающих структуру документа. Данный язык позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. В данных методических указаниях рассматриваются основные элементы языка HTML 4.0.

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

Многие теги HTML являются парными: за открывающим тегом следует закрывающий тег, а между ними содержится текст или другие теги. Закрывающий тег содержит символ слеш /, например, конечным для тега <b> будет </b>. Открывающий и закрывающий теги, а также часть документа, заключенная между ними, образует блок (контейнер), называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными (атомарными), и для них нет закрывающего тега.

Теги могут иметь атрибуты – параметры с дополнительной информацией о том, как браузер должен обрабатывать текущий тег, например, можно указать тип выравнивания текста. Атрибут тега состоит из имени, например, name (имя), знака равенства = и значения, которое задается строкой символов, на-

6

пример, name = “элемент1”. Значение атрибута может записываться как в кавычках, так и без них. Если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки иногда опускают. Атрибуты в теге отделяются друг от друга пробелами, при этом их порядок следования произволен. Атрибуты могут быть обязательными и необязательными.

Язык HTML не различает большие и малые буквы, так что теги <b> и <B> эквивалентны. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если в качестве значений атрибута применяются русские символы, то они должны быть заключены в кавычки. Следует отметить, что неверно записанный тег или его параметр игнорируется браузером.

Данные методические указания содержат подробное описание основ построения HTML-документов и использования каскадных таблиц стилей. Методические указания предназначены для выполнения практических работ по дисциплине «Информационные технологии» по следующим темам:

1 Шрифтовое оформление web-страниц, списки и таблицы в HTMLдокументах.

2Графические изображения. Гипертекстовые ссылки.

3Активные изображения (навигационные карты).

4Фреймы в HTML-документах.

5Использование HTML-форм.

6Таблицы стилей CSS.

7

1 Практическая работа №1. Шрифтовое оформление web-страниц, списки и таблицы в HTML-документах

1.1 Цель работы

1.Изучить правила построения структуры HTML-документа, теги шрифтового оформления символов, организацию и представление списков и таблиц на web-странице.

2.Получить навыки использования всех выше перечисленных элементов гипертекстовой разметки при создании web-страниц. Практическую работу рекомендуется выполнять при помощи текстового редактора Блокнот и Internet Explorer.

1.2 Порядок выполнения работы

1.Ознакомиться с теговой моделью гипертекстовой разметки HTMLдокументов, тегами шрифтового оформления символов, тегами оформления списков и таблиц в HTML-документе (пункт 1.4).

2.Создать web-страницу, на которой будут представлены следующие сведения:

−персональные данные студента (ФИО, адрес, семейное положение, предыдущее учебное заведение, перечень экзаменов, сданных при поступлении

вОрелГТУ и т.д.). При указании этих сведений использовать теги всех возможных шрифтов и тегов оформления тегов, приведенных в данных методических указаниях;

−краткая автобиография, оформленная отдельным параграфом (или несколькими параграфами) и тегом <FONT> с различными параметрами. Данный пункт должен быть отделен в начале и в конце от остального текста горизонтальными линиями;

8

−нумерованный список дисциплин, по которым будет проводиться экзамен в текущем семестре и ненумерованный список дисциплин, по которым будет приниматься зачет в текущем семестре,

−таблицу, в которой перечислить все дисциплины, читаемые в текущем семестре с указанием следующих данных: наименование дисциплины, ФИО преподавателя, количество лекций, практических и/или лабораторных работ, курсовые работы/проекты по данной дисциплине. Выровнять заголовок таблицы и цифры в таблице по центру по горизонтали и вертикали, символы в остальных ячейках по левому краю. Пример таблицы приведен на рисунке 1.

Рисунок 1 – Пример оформления таблицы на web-странице

3. Оформить отчет по практической работе №1 и защитить его у преподавателя. Пример титульный листа отчета по практической работе приведен в приложении А.

1.3 Содержание отчета

1. Титульный лист.