Федеральное агентство связи

Федерального государственного образовательного бюджетного учреждения

высшего профессионального образования

«Поволжский государственный университет телекоммуникаций и информатики»

КОЛЛЕДЖ СВЯЗИ

УТВЕРЖДАЮ: Зам. директора по УПР ____________Черненкова Н.В. «_____»______________2014г.

СБОРНИК ПРАКТИЧЕСКИХ ЗАНЯТИЙ (1 – 15)

по междисциплинарному курсу (МДК.В.02.03)

«РАСПРЕДЕЛЕННЫЕ СИСТЕМЫ ОБРАБОТКИ ИНФОРМАЦИИ»

для студентов специальности:

09.02.04 (230401) – Информационные системы

Разработал преподаватель: Шомас Е.А.

Рассмотрено на заседании ПЦК «Информационных систем и технологий» Председатель ____________ Шомас Е.А. Протокол №____ от ___________2014г.

Самара 2014г.

Практическое занятие №1

Наименование: Создание первой web - страницы

1. Цель: Научится применять основные теги HTML для создания web - страницы

2. Подготовка к занятию: по предложенной литературе повторить тему «Структура HTML- документа» и ответить на следующие вопросы:

2.1 Чем отличается текст от гипертекста?

2.2 Какие особенности HTML – документа вам известны?

2.3 Какое расширение имеют HTML – документы?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.

3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 В строке заголовка должен отражаться номер практической работы

5.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы.

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

Варианты заданий:

№ варианта	Индивидуальное задание
1	Расположение текста – по левому краю Стиль текста – курсив Цвет фона – красный Цвет текста - желтый
2	Расположение текста – по правому краю Стиль текста – полужирный курсив Цвет фона – зеленый Цвет текста - желтый
3	Расположение текста – по центру Стиль текста – полужирный Цвет фона – желтый Цвет текста - зеленый
4	Расположение текста – по левому Стиль текста – подчеркнутый Цвет фона – синий Цвет текста - белый
5	Расположение текста – по центру Стиль текста – подчеркнутый курсив Цвет фона – оранжевый Цвет текста - коричневый
6	Расположение текста – по правому Стиль текста – полужирный Цвет фона – розовый Цвет текста - белый
7	Расположение текста – по правому краю Стиль текста – полужирный курсив Цвет фона – красный Цвет текста - белый
8	Расположение текста – по центру Стиль текста – подчеркнутый Цвет фона – голубой Цвет текста - серый

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

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Что такое web – страница?

8.2 Что такое тег? Правило его написание. Основные виды тегов.

8.3 Перечислите обязательные теги.

ПРИЛОЖЕНИЕ:

В основе технологии работы в Интернет лежит язык HTML. С помощью этого языка можно создать статические веб – страницы. Основой языка HTML является тег, например, <p>. В данном случае это открывающий тег. Иногда необходимо задать парный закрывающий тег - </p>. Тег используется для того, чтобы сказать браузеру, какой блок вы хотите видеть в определенном месте страницы, а также какую информацию этот блок должен содержать.

<p> текст абзаца </p>

Помимо этого браузеру нужно сообщить, как эту отображать эту информацию. Для этого используются атрибуты элементов.

<p align=”right”> выравнивание по левому краю </p>

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

<html>

<head>

<title>

Заголовок окна документа

</title>

</head>

<body>

Тело документа

</body>

</html>

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

• BGCOLOR = “цвет фона страницы”

• TEXT = “цвет текста в документе”

Для определения цвета различных элементов HTML-документа необходимо указать значение соответствующих атрибутов. Указывать значения этих атрибутов можно двумя способами:

Символьная нотация	Формат RGB	Цвет
Black	#000000	Черный
Silver	#C0C0C0	Серебро
Gray	#808080	Серый
White	#FFFFFF	Белый
Maroon	#800000	Темно-бордовый
Red	#FF0000	Красный
Purple	#800080	Фиолетовый
Fuchsia	#FF00FF	Розовый
Green	#008000	Зеленый
Lime	#00FF00	Известь
Olive	#808000	Оливковый
Yellow	#FFFF00	Лимонный
Navy	#000080	Темно-синий
Blue	#0000FF	Синий
Teal	#008080	Темно-бирюзовый
Aqua	#00FFFF	Бирюзовый

Заголовки – важный элемент сайта, они помогают систематизировать текст. В HTML можно создавать заголовки шести уровней, создаются они с помощью элементов h1, h2, h3, h4, h5, h6.

Для заголовка можно задать выравнивание по горизонтали. Это делается с помощью атрибута ALIGN.

Значения атрибута ALIGN:

• LEFT – по левому краю;

• RIGHT – по правому краю;

• CENTER – по центру;

• JUSTIFY – по ширине;