Создание анимированных gif-файлов на примере Corel Photo-Paint.

ЛАБОРАТОРНЫХ РАБОТы ПО дисциплине

«ИНФОРМАтика»

Часть 2

Герасимова О.Ю.

Содержание

Лабораторная работа №1 «Структура HTML-документа». 3

Лабораторная работа №2 «Работа с отступами и шрифтами». 6

Лабораторная работа №3 «Работа со списками». 9

Лабораторная работа №4 «Работа со ссылками». 11

Лабораторная работа №5 «Графика и мультимедиа». 13

Лабораторная работа №1
«Структура HTML-документа»

Цели:

1. ознакомиться с основными понятиями: элемент, атрибут;

2. ознакомиться со структурой HTML-документа;

3. создать простейшую HTML-страничку;

4. научиться использовать комментарии.

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

Название элемента появляется в начальном теге (<название-элемента>) и в конечном теге (</название-элемента>). Некоторые элементы HTML допускают отсутствие конечного тега. Некоторые типы элементов HTML не имеют содержимого. Такие пустые элементы никогда не имеют конечного тега. Названия элементов всегда нечувствительны к регистру. Элементы могут иметь ассоциированные свойства, называемые атрибутами, которые могут иметь значения (по умолчанию или устанавливаемые автором). Пары атрибут/значение появляются перед конечным символом ">" начального тега элемента. Любое количество (допустимое) пар значений атрибута, разделённых пробелами, может появляться в начальном теге элемента. Они могут появляться в любом порядке. По умолчанию требуется, чтобы все значения атрибутов были ограничены с использованием двойных или одинарных кавычек, однако в некоторых случаях можно устанавливать значение атрибута без использования кавычек, но рекомендуется использовать знак кавычек даже тогда, когда можно обойтись без него. Названия атрибутов всегда нечувствительны к регистру.

Комментарии HTML имеют следующий синтаксис:

Основные теги.

Элемент HTML

Описание: определяет начало и конец HTML-документ.

Начальный тег: не обязателен

Конечный тег: не обязателен

Пример:

Элемент HEAD

Описание: содержит информацию о текущем документе, такую как название, ключевые слова и другие данные, не являющиеся содержимым документа.

Начальный тег: не обязателен

Конечный тег: не обязателен

Элемент TITLE

Описание: определяет заголовок страницы или название окна. Каждый документ HTML обязан содержатьэлемент TITLE в разделе HEAD. Авторы должны использовать элемент TITLE для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Заголовок не может содержать разметку (в том числе и комментарии).

Начальный тег: необходим

Конечный тег: необходим

Пример:

Метаданные.

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

Элемент META

Описание: Элемент МЕТА можно использовать для идентификации свойств документа (напр., автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств. Каждый элемент МЕТА определяется в разделе HEAD и определяет пару свойство-значение. Атрибут name идентифицирует свойство, а атрибут content определяет значение свойства. Например, следующее объявление устанавливает значение для свойства Author(автор): <META name="Author" content="Студент группы …">. Обычно META специфицирует ключевые слова, которые используются поисковыми машинами для повышения качества и скорости поиска. Например, следующее объявление устанавливает значения для свойства keywords (ключевые слова): <META name="keywords" content="Chelaybinsk, КПиЭ">

Начальный тег: требуется

Конечный тег: запрещён

Определения атрибутов:

name = строка – устанавливает имя свойства

content = строка – определяет значение свойства

Пример:

Элемент BODY

Описание: тело документа. В теле документа находится содержимое документа.

Начальный тег: не обязателен

Конечный тег: не обязателен

Определения атрибутов:

background = "url" (url – это строка, задающая путь в структуре каталогов до файла) – установка фоновой картинки

text = color (значение цвета может быть или 16-ричным числом (предваряемым знаком # в следующем формате #RRGGBB, где RR – градация красного цвета, GG – зеленого, BB – синего), или одним из следующих 16 названий цвета) - устанавливает цвет текста (для визуальных браузеров).

bgcolor = color – установка цвета фона документа

Пример:

Задания:

1. На жестком диске создать папку с именем HTML.

2. Открыть текстовый редактор "Блокнот".

3. В окне блокнота создать документ, печатающий в качестве заголовка документа название Вашей специальности.

4. Сохранить документ под именем index.html, обязательно с расширением html (или htm) в папке HTML.

5. Запустить любой из браузеров, установленный в системе, например, Internet Explorer (Пуск – Программы - Internet Explorer).

6. Используя меню Файл – Открыть, открыть в окне браузера свой файл и убедиться, что в строке заголовка напечатано название Вашей специальности.

7. Перейти в окно редактора Блокнот и добавить вывод в окне браузера « НЧФ КНИТУ-КАИ им. Туполева ».

8. Сохраните изменения.

9. Перейти в окно браузера. Сейчас, что бы просмотреть внесенные изменения, необходимо нажать кнопку "Обновить".

10. Используя метаданные, определить автора документа и ключевые слова: название Вашей специальности и название университета.

11. Установить цвет фона документа на свой вкус.

12. Установить фоновую картинку, для этого:

12.1. на жестком диске найти файл с расширением jpg или gif;

12.2. скопировать найденный файл в свою папку;

12.3. установить фоновую картинку;

13. Изменить цвет текста документа на свой вкус.

14. Сохранить результаты, так как следующие задания опираются на результаты предыдущих.

Лабораторная работа №2
«Работа с отступами и шрифтами»

Цели:

1. научиться использовать заголовки различных уровней;

2. научиться использовать абзацы, горизонтальные линии, «бегущие» строки;

3. научиться работать со шрифтами.

Заголовки: элементы H1, H2, H3, H4, H5, H6

Описание: описывают шесть уровней заголовков: от H1 (самый верхний) до H6 (самый нижний).

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

align = left|center|right|justify – выравнивание текста: left – выравнивание по левому краю, center – по центру (по умолчанию), right – по правому краю, justify – выравнивание по правому и левому краям.

Примеры:

Параграфы: элемент P

Описание: представляет параграф

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

align = left|center|right|justify – выравнивание текста

Примеры:

Форсирование обрыва строки: элемент BR

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

Начальный тег: необходим

Конечный тег: запрещён

Пример:

Изменение шрифта текста: элемент FONT

Описание: определяет вид, размер и цвет шрифта для текста.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

size = number – у станавливает размер шрифта. Возможные значения:

· Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от браузера пользователя.

· Относительное увеличение размера шрифта. "+1" означает: на один размер больше. "-3" означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7

color = color – устанавливает цвет текста

face = string – задает имя шрифта

Пример:

Элементы стиля шрифта: TT, I, B, BIG, SMALL, STRIKE, S и U

Описание:

TT: моноширинный текст, телетайп.

I: курсив.

B: полужирный.

BIG: "большой" шрифт.

SMALL: "малый" шрифт.

STRIKE и S: зачёркнутый текст.

U: подчёркнутый.

Начальный тег: необходим

Конечный тег: необходим

Примеры:

Подиндекс и надиндекс: элементы SUB и SUP

Описание: переводит текст в нижний и верхний регистр

Начальный тег: необходим

Конечный тег: необходим

Примеры:

Бегущая строка: элемент MARQUEE

Описание: создания бегущей строки

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

bgcolor = color –цвет фона бегущей строки

loop = number – число повторов анимации бегущей строки (значение может быть целым или infinite – текст будет продолжать бегать пока читатель не перейдет на новую страницу)

direction = left|right|up|down – определяет направление: left (по умолчанию) – справа налево, right – слева направо, up – снизу вверх, down – сверху вниз.

scrollamount = number – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается).

scrolldelay = number – задаёт временной интервал между шагами бегущей строки.

width = number – ширина бегущей строки в пикселях.

height = number – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

Примеры:

Горизонтальные линии: элемент HR

Описание: описывает горизонтальную линию

Начальный тег: необходим

Конечный тег: запрещён

Определения атрибутов:

align = left|center|right – определяет горизонтальное выравнивание линии.

size = number – определяет высоту линии.

width = number – определяет ширину линии. Значение может быть числовым и в процентах от ширины окна браузера.

color = color – устанавливает цвет линии.

Примеры:

Задания.

1. Запустить программу Блокнот и открыть документ index.html.

2. Изменить документ так, чтобы надпись «Набережночелнинский филиал» была заголовком первого уровня и выровнена по центру «КНИТУ-КАИ им. Туполева – заголовком второго уровня, также выровнена по центру.

3. Добавить в документ параграф: Привет, меня зовут …. Сейчас мы изучаем язык HTML (Hypertext Markup Language).

4. Добавить в документ параграф: Мой адрес …, выровненный по правому краю.

5. Установить для слова Привет размер 5, цвет – желтый.

6. Для всего оставшегося параграфа: размер 4, цвет – maroon.

7. После слова привет вставить принудительный обрыв строки

8. Для последнего абзаца установить шрифт: размер 2, цвет – зеленый.

9. Для слова Привет установить шрифт Impact.

10. Для своей фамилии, имен, отчества установить шрифт Arial Black.

11. Подчеркнуть фамилию, имя, отчество.

12. Слово Привет написать курсивом.

13. Большим шрифтом выделить специальность.

14. Слово HTML зачеркнуть.

15. После слова HTML добавить предложение: Еще мы знаем немного математики, например, разность кубов вычисляется по формуле: a³-b³=(a-b)*(a²+ab+b²), а сумма членов арифметической прогрессии равна: S_n=(a₁+a_n)/2.

16. Сделать строку Фамилия, имя, отчество бегущей, установив цвет фона gray, направление слева направо.

17. Нарисовать линию на всю ширину экрана под надписью НЧФ КНИТУ-КАИ им. Туполева

Лабораторная работа №3
«Работа со списками»

Цели:

1. научиться работать со списками;

2. научиться структурировать документ.

Организация текста внутри документа. HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.

Ненумерованные списки: <UL>... </UL>.

Описание: описывают ненумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = disc|circle|square – задает стиль меток для данного списка: circle (кружок), disc (закрашенный кружок, по умолчанию) или square (квадрат).

Нумерованные списки: <OL>... </OL>.

Описание: описывают нумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = 1|a|A|i|I – задает стиль меток для данного списка: 1(арабские цифры, по умолчанию), a (латинский алфавит, нижний регистр) или A (латинский алфавит, верхний регистр), i (римский алфавит, нижний регистр), I (римский алфавит, верхний регистр).

start = number – устанавливает номер первого элемента упорядоченного списка. По умолчанию это "1". Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми.
Так, если стиль элемента списка это латинские буквы в верхнем регистре (A, B, C,...), start=3 означает "C". Если стиль – это римские цифры в нижнем регистре, start=3 означает "iii" и т.д.

Каждый элемент обоих списков должен быть определен тэгом <LI>.

Элемент нумерованного и ненумерованного списков: <LI>.

Описание: описывают элемент списка.

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

value = число – устанавливает номер текущего элемента списка. Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми (см. атрибут start).

Примеры:

Задания.

1. Запустить программу Блокнот.

2. В новом документе оформить документ следующим образом (картинку можно вставить любую. Замечание: 1) найдите на винчестере нужную Вам картинку и скопируйте ее в свою папку, 2) файл назовите obomne.html и сохраните его в своей папке):

Кратко о себе:

1. Фамилия

2. Имя

3. Отчество

4. Дата рождения.

5. Место рождения.

6. Факультет.

7. Группа.

8. Хобби:

· Первый интерес

· Второй интерес

· Третий интерес

9. Знание компьютера:

o первая программа

o вторая программа

o третья программа

3. Для своей странички установить фон.

4. Строка «Кратко о себе» должна быть написана 7 шрифтом, цвет установить по своему усмотрению, шрифт – полужирный курсив и оформить ее в виде бегущей строки.

5. Строки, обозначенные цифрами, должны быть написаны 5 размером шрифта, цвет выбрать по своему усмотрению.

6. Хобби и название известных Вам компьютерных программ должны быть написаны 4 размером шрифта, цвет выбрать по своему усмотрению.

7. Под строкой Отчество провести линию синего цвета, ширина которой равна 3, во всю страницу.

8. Внизу страницы провести линию, под которой написать справа адрес своей электронной почты.

Лабораторная работа №4
«Работа со ссылками»

Цели:

1. научиться работать со ссылками;

2. научиться структурировать документ.

1. Основные сведения. Существует три типа ссылок: внутристраничные – они задают переходы в пределах одной страницы; внутрисистемные – ссылки между страницами в пределах одного и того же сервера; и межсистемные – ссылки на страницы, расположенные на удаленных узлах Web. Для определения ссылок предназначен специальный тег, который называется Anchor (якорь).

Элемент А.

Описание: определяет ссылку или якорь.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

name = “строка” – именует текущий якорь, который может стать якорем назначения для другой гиперссылки. Значением этого атрибута должно быть уникальное имя якоря. Областью видимости этого имени является текущий документ.

href = “строка” – определяет размещение ресурса Web, определяя таким образом ссылку с текущего элемента на якорь назначения, определённый этим атрибутом.

Примеры:

Цвет ссылки можно задать при помощи атрибутов тэга BODY:

link = “color” – устанавливает цвет непосещённых гиперссылок.

vlink = “color” – устанавливает цвет посещённых гиперссылок.

alink = “color” – устанавливает цвет гиперссылок при выборе пользователем.

Пример:

Для указания ссылки на электронный ящик в значение атрибута href должно быть “mailto:имя_электронного_ящика”.

Пример:

1.1. Внутристраничные ссылки:

1.1.1. Создать имя (метку) для точки назначения, в которую должен осуществляться переход. Метка создается с помощью тега якоря, используя его атрибут NAME (например, <A NAME=”info”> Дополнительная информация </A>). Фраза "Дополнительная информация" при этом никак не будут выделены в тексте документа.

1.1.2. Для создания гиперссылки на эту точку документа используется тег <A> с атрибутом HREF=, при этом к имени якоря присоединяется знак #: <A HREF=”#info”> Просмотр дополнительной информации </A>. Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента (в нашем случае фразы Просмотр дополнительной информации), при нажатии на который произойдет переход к строчке Дополнительна информация.

1.2. Внутрисистемные ссылки:

1.2.1. В файле, в который мы хотим перейти необходимо создать метку аналогично п. 1.1.1.

1.2.2. Создать гиперссылку аналогично п. 1.1.2, только имя якоря присоединяется к имени файла через знак # (Кратко о моих увлечениях и хобби можно посмотреть <A HREF=”obomne.html#info”> здесь </A>). При нажатии на выделенный фрагмент произойдет переход строчке #info в файле с именем obomne.html.

1.2.3. Задание: В файл index.html добавить абзац «Кратко о моих увлечениях и хобби можно посмотреть здесь» после абзаца со словами «Еще мы изучаем математику …».

1.2.4. В начале файла obomne.html фразу «Кратко о себе» заключить в теги <A NAME=”info”> и <A>.

1.2.5. В документе main.html слово «здесь» оформить гиперссылкой на документ obomne.html на якорь «info»

1.2.6. Изменить цвет непосещенных гиперссылок на красный, а посещенных на черный.

1.2.7. Опробовать действие гиперссылки.

1.2.8. В файл obomne.html внизу страницы поместить абзац, состоящий из одного слова «Назад», выровненного по центру.

1.2.9. Организовать обратный переход.

1.3. Межсистемные ссылки. Используя эти ссылки можно установить связь с любой страницей на любом узле Web.

1.3.1. В этом случае необходимо создать только гиперссылку, например, ссылка на сервер фирмы Microsoft выглядит следующем образом: <A HREF="http://www.microsoft.com"> Переход на сервер компании Microsoft </A>. При нажатии на выделенный фрагмент произойдет переход на сервер фирмы Microsoft.

1.3.2. Задание: в документ main.html добавить абзац «Здесь вы можете посмотреть сервер НЧФ КНИТУ-КАИ им. Туполева».

1.3.3. Оформить абзац по своему усмотрению.

1.3.4. Оформить абзац как гиперссылку на адрес http://www.preco.ru.

1.3.5. Адрес e-mail внизу страницы сделать ссылкой. Теперь пользователь сможет отправлять электронные письма по этому адресу.

1.3.6. В документе obomne.html добавить гиперссылку на сервер Челябинского государственного педагогического университета и отправку электронной почты.

Лабораторная работа №5
«Графика и мультимедиа»

Цели:

1. научиться работать с рисунками;

2. научиться структурировать документ с элементами мультимедиа.

1. Изображения в HTML-документе.

Вставка изображения в HTML-страницу осуществляется с помощью тэга <IMG>.

Тэг <IMG>.

Описание: внедряет изображение в текущий документ в месте определения элемента.

Начальный тег: необходим.

Конечный тег: запрещен.

Определения атрибутов:

src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG);

alt = “строка” – определяет альтернативный текст (который появляется при наведении курсора мыши на изображение);

width = “число” – определяет ширину объекта (изображения);

height = “число” – определяет высоту объекта. Для уменьшения времени загрузки страницы с графикой полезно указывать размер изображения. Если он известен еще до загрузки страницы, то браузер может отвести рамку для картинки, а затем загружать текст на страницу. Пока загружается графика, посетитель страницы может начать читать текст.

border = “число” – определяет ширину рамки вокруг объекта;

align = “bottom|middle|top|left|right” – определяет позицию объекта по отношению к окружающему тексту (bottom – низ объекта должен быть выровнен вертикально по текущей базовой линии (по умолчанию), middle – центр объекта должен быть выровнен вертикально по текущей базовой линии, top - верх объекта должен быть выровнен вертикально по верхней границе текущей строки, left – прижимает объект к левому краю, right – прижимает объект к правому краю).

Примеры:

1.1. Задание:

1.1.1. В графическом редакторе нарисовать эмблему Вашей специальности или университета и сохранить его под именем emblem.jpg в Вашей папке.

1.1.2. В файл index.html вверху страницы по середине вставить картинку emblem.jpg и ее подписать «Эмблема университета (или специальности) …», ширина рамки – 5 пикселов.

1.1.3. Внизу страницы расположить фотографию университета (файл College.jpg). Установить соответствующую высоту, ширину и толщину рамки, выравнивание по левому краю и рядом по середине фотографию, сделать подпись «НЧФ КНИТУ-КАИ им. Туполева».

1.1.4. В браузере отключить отображение графики (используя систему помощи браузера) и заново просмотреть созданный документ.

1.1.5. Нарисовать в графическом редакторе рисунок, в котором красиво написать «Назад».

1.1.6. Создать новый документ, назвав который photos.html, где разместите свою фотографию и сделать подпись к ней. Внизу страницы по середине сделать надпись «Назад», которую оформить в виде гиперссылки на документ index.html.

1.1.7. В документе index.html сделать гиперссылку на файл photos.html, добавив абзац «Здесь вы можете посмотреть мою фотографию».

1.1.8. В документе photos.html внизу страницы рядом с надписью «Назад» расположить картинку, которую оформить в виде гиперссылки на главную страницу.

Создание анимированных gif-файлов на примере Corel Photo-Paint.

2.1. Создать ролик, в котором буква за буквой появляется надпись «Группа …» (название Вашей группы), для этого:

2.1.1. Запустите графический редактор Corel Photo-Paint.

2.1.2. Выберите пункт меню Файл|Новый.

2.1.3. Установите размеры изображения 400x50 пикселов, режим – 8-ми битная палитра, цвет фона установите по своему усмотрению, поставьте флажок «Создать фильм», количество кадров оставьте равным 1.

2.1.4. Выбрать инструмент текст и в левом нижнем углу написать заглавную букву «Ф». Установить цвет и размер буквы.

2.1.5. Выделить букву и выполнить команду меню Объект|Комбинировать->Склеить объекты с фоном.

2.1.6. Выполнить команду меню Фильм|Вставить кадр. Отметить опцию «Копировать текущий кадр» и нажать ОК. Таким образом появится второй кадр точно такой же как первый.

2.1.7. На новый кадр добавить следующую букву другого цвета (можно ее расположить по дуге, относительно других букв). Перейти к п. 2.1.5.

2.1.8. Аналогично выполнить действия для каждой буквы.

2.1.9. После создания последнего кадра. Сохранить документ как GIF.

2.2. Добавьте изображение на все страницы вверху.

3. Звук и видео. Вы можете добавить на свою страничку звуки или видеоклипы. Они могут запускаться автоматически при загрузке странички. Для этого используется тег <EMBED>, который предназначен для встраивания объектов в документ.

Описание: внедряет объект текущий документ в месте определения элемента.

Начальный тег: необходим.

Конечный тег: необходим.

Определения атрибутов:

src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG);

autostart = “true|false” – определяет автозапуск звука или видеоклипа;

repeat = “true|false” – определяет после проигрывания записи начинать ли заново;

width = “число” – определяет ширину объекта (изображения);

height = “число” – определяет высоту объекта.

border = “число” – определяет ширину рамки вокруг объекта;

align = “center|left|right” – расположение пульта управления.

Примеры:

Задание:

· На жестком диске найти файлы с разрешением avi и скопировать один из них в свою папку.

· Поместить на страничку выбранное видео.

Не нашли, что искали? Воспользуйтесь поиском: