- •Федеральное агентство связи
- •Практическое занятие №2
- •Практическое занятие №3
- •Практическое занятие №4
- •Практическое занятие №5
- •Практическое занятие №6
- •Практическое занятие №7
- •Практическое занятие №8
- •Практическое занятие №9
- •Практическое занятие №10
- •8. Контрольные вопросы:
- •Практическое занятие №11
- •8. Контрольные вопросы:
- •Практическое занятие №12
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №13
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №14
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
- •Практическое занятие №15
- •6. Порядок выполнения работы:
- •8. Контрольные вопросы:
Практическое занятие №3
Наименование: Добавление изображений и мультимедиа на web - страницах
Цель: Научится вставлять рисунки, звуки и анимации на web - страницы
Подготовка к занятию: по предложенной литературе повторить тему «Вставка объектов на HTML – страницу» и ответить на следующие вопросы:
2.1 Какие форматы графических изображений применяются в HTML – документах?
2.2 Перечислите основные атрибуты элемента img?
2.3 Какие объекты кроме изображений можно внедрить в HTML – документ?
Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с
Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
Задание:
5.1 В строке заголовка должен отражаться номер практической работы
5.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы. Сделайте цель работы в виде бегущей строки.
5.3 Поместите в свою папку рисунки с расширениями, *.gif, *.jpeg, или *.png. В код программы необходимо поместить рисунки и прокомментировать их пояснительным текстом. Все рисунки разместить попеременно. Сделать все рисунки одинакового размера.
5.4 Вставить видеоизображение и звук.
5.5 Оформление страницы продумать самостоятельно.
Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
Содержание отчета:
7.1 Наименование и цель работы
7.2 Код программы
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
Контрольные вопросы:
8.1 С помощью какого тега производится вставка изображений на web – страницу? Какие форматы могут иметь файлы с изображением?
8.2 Как задать изображение в виде фона web – страницы?
ПРИЛОЖЕНИЕ:
При создании сайта невозможно обойтись без использования активных объектов вроде flash – анимации, видео или картинок.
Для встраивания изображений в HTML – документ применяется тег IMG. Он имеет обязательный атрибут SRC, значением которого должен быть адрес встраиваемого изображения. Простейший вариант для включения картинки: <IMG SRC=”1.JPG”>. при такой записи размер картинки на экране будет соответствовать ее реальному размеру. Чтобы редактировать размер картинки, используют атрибуты WIDTH и HEIGHT. Их значения можно указывать в пикселях или процентах от размера окна. Картинку можно поставить в рамку, с помощью атрибута border, значение которого указывает ширину рамки в пикселях.
Практическое занятие №4
Наименование: Использование ссылок на web - страницах
Цель: Научится вставлять различные виды ссылок на web - страницы
Подготовка к занятию: по предложенной литературе повторить тему «Ссылки на web – страницах» и ответить на следующие вопросы:
Какие ссылки применяются на веб – страницах?
С помощью какого тега происходит вставка гиперссылки на веб – страницы?
Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с
Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
Задание:
5.1 В строке заголовка должен отражаться номер практической работы
5.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы.
5.3 Далее создайте четыре ссылки на все свои практические работы.
5.4 В ссылке на практическую работу №4 должен осуществляться переход на документ содержащий много текста (текст скопировать любой). В этом тексте необходимо организовать внутреннюю ссылку, например, из конца текста вернуться на начало.
5.5 Создать ссылку – рисунок (ссылка – рисунок имеет небольшой размер, при нажатии на него, рисунок становится большего размера).
Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
Содержание отчета:
7.1 Наименование и цель работы
7.2 Код программы
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
Контрольные вопросы:
8.1 Что такое гиперссылка? Для чего они применяются на веб – сайтах?
8.2 Какие атрибуты тега <BODY> влияют на изменение цвета ссылки?
ПРИЛОЖЕНИЕ:
Ссылки связывают документы, разбросанные по всему Интернету, в одну сеть. Можно выделить два типа ссылок: внешние и внутренние. Внешние связывают страницы в один сайт и помогают передвигаться по нему. Внутренние – помогают передвигаться в рамках одной страницы.
Основой внешних ссылок являются URL- адрес объекта, на который вы собираетесь сослаться. Для создания гиперссылок в HTML служит элемент <А>, который требует наличие закрывающего тега. Внутри элемента располагается текст, который будет выделен как ссылка. Адрес документа для перехода записывается в элементе <A> в качестве значения аргумента HREF.
Внутренние ссылки организуют переход внутри одного HTML – документа. Они применяются, когда на одной странице много текста. Для простоты навигации можно создать ссылки, при щелчке кнопкой мыши на которых пользователь автоматически перейдет к нужной части документа. Чтобы создать такую ссылку, сначала нужно определить место, к которому ссылка приводит. Это делается с помощью атрибута name элемента <A>. Необходимый кусок текста заключается в элемент <A>. Затем нужно создать ссылку на эту метку. Ссылка на внутреннюю метку создается так же, как и ссылка на внешний документ, только вместо URL – адреса желаемой страницы надо ввести адрес метки в виде #MET1. При этом MET1 – имя вашей метки.
Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <A> и </A>.