42554

Создание фоновых рисунков, графических изображений, gif-анимаций, звуковых (mid или wav) файлов видеоклипов (avi или mpg), бегущих строк

Лабораторная работа

Информатика, кибернетика и программирование

Вставка рисунка в документ: img src= my. Если рисунок находится в поддиректории то ссылка на него будет выглядеть так: img src= my my.jpg Если рисунок лежит на уровень выше а документ находится в поддиректории то ссылка на неё будет такой: img src= .jpg Если картинка лежит на другом сайте то путь прописывается полностью: img src= http: www.

Русский

2013-10-30

29.5 KB

1 чел.

Лабораторная работа № 2

Вставьте в Web-страницу фоновый рисунок, графическое изображение,  gif-анимацию, звуковой (mid или wav) файл, видеоклип (avi или mpg), бегущую строку и просмотрите в Web-броузере.

 Цель: Приобретение практических навыков создания фоновых рисунков, графических изображений,  gif-анимаций, звуковых (mid или wav) файлов видеоклипов (avi или mpg), бегущих строк.

Задачи лабораторной работы:

  1.  Откройте файл с лабораторная работа № 1.


D:\users\ek-01-1\fio\1.html

2. Вставка рисунка в документ:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любого рисунка (me.gif, main.png). Рисунок должен находится в том же каталоге (директории, папке), в которой находится и файл
1.html. Если рисунок находится в поддиректории то ссылка на него будет выглядеть так:

<img src="my/my.jpg">

Если рисунок лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg"> 

Вставьте строку:

<img src="primtocodephoto.gif">

Перед строкой:

<p align="right">Выполнил:  Ст.гр. ЕК-01-1

3. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <p> - <p align="justify">. Параметр align есть и у картинок:

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

Где:
(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернату с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.
(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.

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

<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">

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

Вставте строку:
<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">

Перед строкой:

<p align="right">Выполнил:  Ст.гр. ЕК-01-1

Сохраним  документ и откроем IE

4.  Ответить на контрольные вопросы по лабораторной работе.

Контрольные вопросы по лабораторной работе № 2

1. Что такое Web-страница и какие существуют способы ее создания?

2. Какова общая структура документа HTML?

3. Какие теги форматирования текстового потока и абзацев Вы знаете?

4. Как задать цвет текста, цвет фона, цвет гиперссылки?

5. Как вставить в документ HTML графическое изображение?

6. Как вставить в документ HTML фоновый рисунок?

7. Как вставить в документ HTML бегущую строку? Как изменить их цвет и размеры?


 

А также другие работы, которые могут Вас заинтересовать

69225. Предмет, метод та завдання статистики 187.5 KB
  Статистика - самостійна суспільна наука, яка має свій предмет и метод дослідження. Виникла вона з практичної необхідності суспільного життя. Уже в давньому світі з’явилась необхідність підраховувати чисельність жителів держави; рахувати людей, пригодних до військової справи...
69226. Графічний метод зображення статистичних даних 334.5 KB
  Вимоги до статистичного графіка та його основні елементи. Слід нагадати що побудова графіка виправдана якщо він дає будьякі переваги порівняно з цифрами які зведені в ряди або таблиці. Основні елементи графіка.
69227. Статистичне зведення та групування 188 KB
  Значення коефіцієнтів наведено в таблиці. Статистичні таблиці їх значення в статистиці види таблиць. Статистичні таблиці призначені для найбільш раціонального наочного та систематизованого викладення результатів зведення і групування статистичних даних.
69228. Індекси. Суть індексів, їх особливості як узагальнюючих показників 143.5 KB
  Термін індекс (іпdех) є синонімом певної узагальнюючої характеристики. Наприклад, індекс реальних доходів населення за рік, індекс курсової вартості цінних паперів за місяць, регіональний індекс злочинності тощо. Кожний індекс є співвідношенням двох значень показника...
69229. Історія формування та розвитку статистики. Статистика у феодальному суспільстві та в епоху відродження. Розповсюдження товарно–грошових відносин та розвиток статистики 74 KB
  Історія вітчизняної соціально-економічної статистики Розвиток державної статистики визначається багатьма умовами і чинниками економічного соціального організаційного характеру. Становлення державної статистики можна віднести до кінця XVII початку XVIII в.
69230. Організація державної статистики в Україні та її структура 128 KB
  Цей Закон регулює правові відносини в галузі статистики і ведення первинного обліку визначає повноваження та функції органів державної статистики і створює основу для ведення державної інформаційної системи України з метою одержання достовірної статистичної інформації...
69231. Організація міжнародної статистики 155.5 KB
  Таким чином послідовна розробка міжнародних рекомендацій в області статистики дозволила МСІ закласти наукові основи міжнародних класифікацій по найважливіших розділах статистики і їх застосуванні але вже опосередковано через діяльність Ліги Націй і через ООН...
69232. Статистика продуктивності праці 120 KB
  Статистика продуктивності праці. Поняття продуктивності праці та завдання її статистичного вивчення. Показники рівня продуктивності праці та методи їх обчислення. Індексний метод у вивченні динаміки продуктивності праці.
69233. Робота з масивами і матрицями 86.72 KB
  При роботі з таблицями часто виникає ситуація, коли необхідно використати одну й ту ж операцію або формулу до деякого діапазону комірок, які утворюють інтервал масиву (масив-інтервал). MS Excel надає різні засоби для розв’язку такого типу задач.