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 бегущую строку? Как изменить их цвет и размеры?


 

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

55152. Категорійно-понятійний апарат з БЖД, таксономія небезпек 949 KB
  Мета: Усвідомити концепцію допустимого ризику та визначити небезпечні й шкідливі чинники для життя людини що найчастіше трапляються шляхом соціального опитування студентів.
55153. План рахунків бухгалтерського обліку. Структура та основи побудови балансу 127 KB
  Принцип повного висвітлення передбачає: а) фінансова звітність повинна містити всю інформацію потенційні наслідки госп-ських операцій; б) фінансова звітність повинна містити всю інформацію про фактичні та потенційні наслідки господарських операцій...
55154. Українська товарна номенклатура ЗЕД: поняття, структура, особливості застосування 122.5 KB
  Законом України Про Митний тариф України що використовується для цілей тарифного та інших видів регулювання зовнішньоекономічної діяльності ведення статистики зовнішньої торгівлі та здійснення митного оформлення товарів. УКТ ЗЕД складається на основі Гармонізованої системи...
55155. Форми колективного обговорення професійних проблем 34 KB
  Які існують підходи до перемовин Як класифікують перемовини Які розрізняють стратегії ведення перемовин З яких стадій складаються перемовини Що таке збори Які є види зборів З яких етапів складаються збори Як треба виступати на зборах аби привернути увагу присутніх до змісту виступу та переконати їх...
55156. Поняття господарського обліку. Мета, завдання, та види обліку. Користувачі облікової інформації. Об’єкти обліку 118.5 KB
  Закон визначає право на його ведення, однак не визначає жодних правил його організації. Інформація є доступною для зовнішніх користувачів
55157. Основи роботи з Windows 1.01 MB
  Постановка загальної проблеми: Як знайти потрібну інформацію по роботі з операційною системою Windows використовуючи довідкову систему І. Знайти та ознайомитись з можливістю пошуку...
55158. Педагогічне спілкування як провідна складова професійно-педагогічної комунікації 57.5 KB
  МЕТА: Схарактеризувати педагогічне спілкування за функціями; зясувати що є запорукою продуктивного педагогічного спілкування; визначити барєри спілкування та оптимальні способи їх подолання.