Методические указания к практической работе № 4

Методические указания к практической работе № 4

Тема: Язык гипертекстовой разметки HTML. Разработка статических Web-страниц.

Цель работы:

Формирование умений:

· работы с приложением NotePad для написания HTML-кода;

· разработки Web-страниц, содержащих графические элементы, таблицы, списки, гипертекстовые ссылки и др. элементы;

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

1. Изучение основ языка HTML

l Использовать презентации Лекция_3_4.ppt и HTML_1.ppt для выборки нужных тегов.

l Познакомиться с таблицей кодов цветов.

 

Задание 1. Используя теги, постройте документ, изображенный на рис.1.

В этом документе:

• В элементе Заголовок укажите свою фамилию, номер группы;
• Заголовки выровняйте по центру, запишите рубленым шрифтом красного цвета;
• Основные цвета: черный текст на светло-зеленом фоне;
• Абзацы выровняйте по левому краю;
• Термины, выделяемые курсивом, запишите зеленым цветом;
• Типы услуг оформите списком;
• Добавьте графический объект, совместив его с текстом.

 

Создание сайтов

Уже не первый год дизайн студия ZetaLine работает над созданием web сайтов любой сложности. В портфолио компании можно увидеть как web сайты-визитки, так и крупные Интернет-магазины.

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

К услугам наших клиентов предоставляются на выбор предложения по:

· созданию web сайтов

· размещению

· поддержке

· рекламе web сайтов

 

 

Задание 2. Доработайте документ из задания 1согласно следующим требованиям:

• Добавьте в сайт следующий текст, оформленный с помощью таблицы:

 

Сайт-Визитка Сайт-визитка – это несложный конечный продукт процесса программирования (1-5 страниц). Ему присущи простая для пользователя навигационная система, гармоничный дизайн и основная информационная часть, содержащая в себе сведенья о деятельности фирмы и ее продукции.

Сайт-Стандарт Сайт-стандарт – это улучшенный вариант сайта-визитки. Web-дизайн сайта эксклюзивный, он подходит небольшой компании (5-10 страниц). На сайте-стандарт содержится полная информация о предоставляемых услугах и товарах.

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

Интернет-Магазин Результатом нашей с вами взаимовыгодной совместной работы становится интернет-магазин, приносящий прибыль. Нашей задачей является выполнение всех услуг, связанных с организацией простого и удобного управления ценами и ассортиментом (дополнение и изменение ассортимента товаров и услуг и их цены). Предоставить возможность принимать звонки от клиентов и отвечать на их вопросы, связанные с покупкой вашей продукции.

 

 

 

• Заголовки оформите зеленым цветом.

· В конце документа добавьте гиперссылку по фразе «Подробнее о деятельности фирмы смотрите на сайте» на ресурс http://www.qdg.ru/index.php?m=1

 

Гиперссылку выровняйте по правому краю

 

 

Документ должен выглядеть

следующим

образом:

 

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

l Использовать презентации Лекция_3_4.ppt и HTML_1.ppt для выборки нужных табличных тегов.

 

Задание 1.

С использованием тегов для создания таблиц создать сайт с расписанием занятий своей группы на неделю (пример оформления расписания – рисунок ниже или файл Расписание.doc)

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

1. Выполнить самостоятельную работу по вариантам (Приложение 1)

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

 

l Использовать презентацию Фильтры.ppt для выборки нужных тегов.

Задание 1

1. Создать с помощью фильтра (Shadow) эффект отбрасывающей на страницу тень буквы Ж (как на образце):

 

Сохраните полученную букву как изображение с расширением.gif

2. Встройте изображение буквы Ж из файла формата.gif как буквицу в текст сказки (см рис.).

 

 

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

 

 

4. Представьте на странице различные представления графического изображения (как на образце) (используя различные фильтры):

• Обычное изображение
• Создание эффекта освещения источником света
• Симметрично-повернутое вокруг вертикальной оси
• Инвертированное изображение
• Изображение с удаленной цветовой гаммой в серых тонах
• Прозрачное изображение
• Рентгеновский эффект

 

 

Задание 2

1. Оформите первую букву того же текста как псевдоэлемент (см. рис.)

 

 

1. Определите стили для написания старой и новой цены товара. Старая цена – серого цвета, перечеркнутая. Новая цена – красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список товаров со старыми и новыми ценами.

 

 

1. Определите два стиля.

В первом стиле:

• Буквы коричневые по светло-серому фону;
• Расстояние между содержимым и рамкой элемента – 0,5см
• Текст выравнивается по левому и правому краям

Во втором стиле:

• Фон бирюзовый
• Расстояние между содержимым и рамкой -0,5 см
• Поля слева и справа – 1см
• Рубленый шрифт

Подготовьте документ с двумя разделами (текст любой). Первый раздел определяется первым стилем, второй – вторым. Второй раздел должен быть вложен в первый, чтобы было видно наследование. Какие стилевые указания наследуются во втором разделе, а какие нет?

1. Подготовьте стиль абзаца «подложка»(.ground) и стиль «надпись» (.poster). Используя созданные стили, создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло-серого цвета. Надпись – коричневыми буквами обычного размера.
2. Создайте страницу в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже предыдущей (как на схеме).
3. Используя позиционирование, создайте объемную надпись (свою фамилию) из обычного текста (без картинок) (См. образец).

 

1. Используя стили, сделайте страницу, в которой текст выводится в две колонки (как в газете). Таблицы при этом не используются.
2. Создайте внешний файл с описанием стиля и используйте его для оформления страницы.

 

Приложение 1

Вариант 1

 

 

СПИСОК ПК

Наименование компьютера	Количество	Цена	Стоимость (руб.)
В рублях	В долларах
– Vectra – Vist 1000A – K6-2-300 – Athlon 650 – P3-667E		10 000	322,58	40 000
	11 000	354,84	33 000
	10 214	329,48	40 856
	13 558	437,35	40 674
	15 411	497,13	92 466
Итого		60 183	1941,38	246 996

 

 

 

Вариант 2

 

 

Подписка (фирма Печкин и К^о)
– Условия подписки – Порядок оформления – Будьте внимательны – Продолжение подписки – Отказы партнера	Партнер бесплатно доставит каждый выпуск в ваш офис
Заполните бланк заказа. Передайте его партнеру нашей фирмы
Подписка оформляется только через партнеров нашей фирмы. Не отсылайте бланк заказа в другую фирму!
По окончанию срока подписки, Вы можете оформить с партнером нашей фирмы договор на поставку нашей продукции
Об отказе партнера делать бесплатную доставку сообщите в нашу фирму по телефону 22-33-44 или по E-mail [e-mail]

 

 

 

 

Вариант 3

Вариант 4

 

 

M&E^2	Господа! Давайте вместе создадим прочный мост между теорией и практикой, давайте вместе пользоваться знаниями, накопленными тысячелетиями.	M&E^2
АНАЛИТИКА ДЛЯ:
¨ Управления ¨ Прогнозирования ¨ Принятия решений ¨ Анализа	¨ Менеджмента ¨ Выявления общественного мнения ¨ Маркетинга

 

F 115230, Москва, Варшавское шоссе, 42, офис 608

( тел. [phone], факс [phone]

 

 

 

 

Вариант 5

 

 

AБиК	Иванов Иван Иванович Студент 2 курса группы 1У2
644099, Россия, г. Омск ул. Чехова д.1^а, кв.13	Телефоны: 22-22-22 48-48-48 8913-609-55-44

 

 

 

Вариант 6

ШКОЛЬНЫЙ ТЕАТР

 

A КОЛОКОЛ ²

 

Н.В. ГОГОЛЬ

ИГРОКИ

 

Действующие лица и исполнители:
Аделаида Ивановна	- Татьяна Логинова
Светлана Яшина
Гаврюша	- Игорь Урусов
Ихарев Андрей Иванович	- Андрей Смирнов
Дмитрий Чекомазов
Кругель, полковник	- Леонид Дикарёв
Швохнев Петр Петрович	- Дмитрий Юрлин
Утешительный	- Сергей Юрлин
Дергунов	- Сергей Афанасьев

 

 

 

 

Вариант 7

 

ОМСКИЙ АКАДЕМИЧЕСКИЙ ТЕАТР ДРАМЫ

 

Н.В. ГОГОЛЬ

ИГРОКИ

 

· Режиссер – Нина Чусова

· Постановка – Ольга Пономарева

· Музыкальное оформление – Инна Кхатри

· Техническое оформление – Иван Самоделкин

 

	Наш адрес:
г. Омск, ул. Розовой Мечты, д. 50^а	тел. 10-10-10

 

 

 

 

 

Вариант 8

ТУРИСТИЧЕСКОЕ АГЕНСТВО

«ЛЕТУР»

Вариант 9

 

Фирма «КОЛЛЕКТОР⁵²⁵»

сообщает о новом поступлении книг и учебной литературы

Уважаемые студенты!

Методические указания к практической работе № 4

Тема: Язык гипертекстовой разметки HTML. Разработка статических Web-страниц.

Цель работы:

Формирование умений:

· работы с приложением NotePad для написания HTML-кода;

· разработки Web-страниц, содержащих графические элементы, таблицы, списки, гипертекстовые ссылки и др. элементы;

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

1. Изучение основ языка HTML

l Использовать презентации Лекция_3_4.ppt и HTML_1.ppt для выборки нужных тегов.

l Познакомиться с таблицей кодов цветов.

 

Задание 1. Используя теги, постройте документ, изображенный на рис.1.

В этом документе:

• В элементе Заголовок укажите свою фамилию, номер группы;
• Заголовки выровняйте по центру, запишите рубленым шрифтом красного цвета;
• Основные цвета: черный текст на светло-зеленом фоне;
• Абзацы выровняйте по левому краю;
• Термины, выделяемые курсивом, запишите зеленым цветом;
• Типы услуг оформите списком;
• Добавьте графический объект, совместив его с текстом.

 

Создание сайтов

Уже не первый год дизайн студия ZetaLine работает над созданием web сайтов любой сложности. В портфолио компании можно увидеть как web сайты-визитки, так и крупные Интернет-магазины.

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

К услугам наших клиентов предоставляются на выбор предложения по:

· созданию web сайтов

· размещению

· поддержке

· рекламе web сайтов

 

 

Задание 2. Доработайте документ из задания 1согласно следующим требованиям:

• Добавьте в сайт следующий текст, оформленный с помощью таблицы:

 

Сайт-Визитка Сайт-визитка – это несложный конечный продукт процесса программирования (1-5 страниц). Ему присущи простая для пользователя навигационная система, гармоничный дизайн и основная информационная часть, содержащая в себе сведенья о деятельности фирмы и ее продукции.

Сайт-Стандарт Сайт-стандарт – это улучшенный вариант сайта-визитки. Web-дизайн сайта эксклюзивный, он подходит небольшой компании (5-10 страниц). На сайте-стандарт содержится полная информация о предоставляемых услугах и товарах.

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

Интернет-Магазин Результатом нашей с вами взаимовыгодной совместной работы становится интернет-магазин, приносящий прибыль. Нашей задачей является выполнение всех услуг, связанных с организацией простого и удобного управления ценами и ассортиментом (дополнение и изменение ассортимента товаров и услуг и их цены). Предоставить возможность принимать звонки от клиентов и отвечать на их вопросы, связанные с покупкой вашей продукции.

 

 

 

• Заголовки оформите зеленым цветом.

· В конце документа добавьте гиперссылку по фразе «Подробнее о деятельности фирмы смотрите на сайте» на ресурс http://www.qdg.ru/index.php?m=1

 

Гиперссылку выровняйте по правому краю

 

 

Документ должен выглядеть

следующим

образом: