ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Практическое занятие №1. Федеральное государственное образовательное бюджетное учреждение высшего
ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ
Федеральное государственное образовательное бюджетное учреждение высшего
профессионального образования
«Поволжский государственный университет телекоммуникаций и информатики»
КОЛЛЕДЖ СВЯЗИ
УТВЕРЖДАЮ:
Зам. директора по УПР
_______________Черненкова Н.В.
«______»______________2014 г.
СБОРНИК
ПРАКТИЧЕСКИХ ЗАНЯТИЙ (1 - 20)
по дисциплине ВЕБ -- ДИЗАЙН
для специальности 09.02.03 (230115) – Программирование в компьютерных системах
сборник рассчитан на 40 часов
составил преподаватель Шомас Е.А.
Рассмотрено на заседании цикловой комиссии:
«Информационных систем и технологий»
Председатель ____________/Шомас Е.А.
Протокол №___от «____»_________2014г.
2014г.
Практическое занятие №1
Наименование: Создание первой веб - страницы
1. Цель: Научится применять основные теги HTML для создания web - страницы
2. Подготовка к занятию: по предложенной литературе повторить тему «Структура HTML- документа» и ответить на следующие вопросы:
2.1 Чем отличается текст от гипертекста?
2.2 Какие особенности HTML – документа вам известны?
2.3 Какое расширение имеют HTML – документы?
3. Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн»
3.2 Шомас Е.А., Программное обеспечение компьютерных сетей, учебно – методическое пособие, гриф УМЦ 2010
3.3 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
5. Задание:
5.1 В строке заголовка должен отражаться номер практической работы
5.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы.
5.3 Далее наберите свою биографию, не менее 10 предложений. Каждое предложение должно начинаться с новой строки. Все остальное оформление выполните согласно своему варианту.
Варианты заданий:
| № варианта | Индивидуальное задание |
| Расположение текста – по левому краю Стиль текста – курсив Цвет фона – красный Цвет текста - желтый | |
| Расположение текста – по правому краю Стиль текста – полужирный курсив Цвет фона – зеленый Цвет текста - желтый | |
| Расположение текста – по центру Стиль текста – полужирный Цвет фона – желтый Цвет текста - зеленый | |
| Расположение текста – по левому Стиль текста – подчеркнутый Цвет фона – синий Цвет текста - белый | |
| Расположение текста – по центру Стиль текста – подчеркнутый курсив Цвет фона – оранжевый Цвет текста - коричневый | |
| Расположение текста – по правому Стиль текста – полужирный Цвет фона – розовый Цвет текста - белый | |
| Расположение текста – по правому краю Стиль текста – полужирный курсив Цвет фона – красный Цвет текста - белый | |
| Расположение текста – по центру Стиль текста – подчеркнутый Цвет фона – голубой Цвет текста - серый |
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 – по ширине;
Не нашли, что искали? Воспользуйтесь поиском: