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


 

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

69073. Короткий огляд мови C# 568.5 KB
  Весь виконуваний код C# повинен міститися у класі – у даному випадку класі Program. На відміну від мови C та аналогічних, у C# не можна об’явити глобальну функцію чи змінну. Клас Program міститься у просторі імен DemoApp. При створенні програми в Visual C# простір імен створюється автоматично.
69074. Огляд мови програмування С# (частина 2) Клас та структури 185.5 KB
  В рамках оголошення класу та структури описується безліч змінних різних типів набір данихчленів класу правила породження об’єктів-представників структур і класів їх основні властивості і методи застосування яких забезпечує вирішення задачі.
69075. ТЕХНОЛОГІЯ ADO .NET. ВІД’ЄДНАНІ ОБ’ЄКТИ 76.35 KB
  В попередній лекції ми розглядали роботу з даними через приєднані об’єкти, тобто через постійне з’єднання з джерелом даних. Програма відкривала з’єднання з базою даних і не закривала його принаймні до завершення роботи з джерелом даних. В цей час з’єднання з джерелом підтримувалося постійно.
69076. АРХІТЕКТУРА ТА ПРОЕКТУВАННЯ КОМПОНЕНТНИХ СИСТЕМ 153.12 KB
  У попередніх лекціях ми розглядали створення локальних (автономних) Windows-застосунків. В результаті компіляції і збирання застосунку створювався один програмний компонент у формі збірки. У вигляді локальних застосунків розробляють сервісні програми, системні утиліти...
69077. ПРОМІЖНЕ ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ 144.91 KB
  Важливу роль у створенні кросплатформних програмних систем відіграють додаткові загальносистемні програмні засоби, які вирішують завдання взаємодії та інтеграції компонентів. Ці засоби розміщуються між рівнем операційної системи (ОС) і рівнем прикладного програмного забезпечення...
69078. РОЗПОДІЛЕНІ МОДЕЛІ ПРОМІЖНОГО РІВНЯ ДЛЯ WINDOWS 254.25 KB
  Друга рання модель, про яку говорилося в лекції 2, заснована на віддалених викликах процедур (Remote Procedure Calls, RPC). У цій моделі акцент робиться на приховуванні мережевого обміну за рахунок того, що процесу дозволяється викликати процедури, реалізація яких знаходиться на віддаленій машині.
69079. КОМПОНЕНТНА МОДЕЛЬ CORBA 118.86 KB
  CORBA (Common Object Request Broker Architecture) - це набір відкритих специфікацій інтерфейсів, що визначає архітектуру технології міжпроцесної взаємодії і незалежного маніпулювання об'єктами. Розробниками технології інтерфейсів є OMG і X/Open.
69080. Технологія EJB для побудови розподілених систем 66.54 KB
  JavaBeans забезпечують основу для багаторазово використовуваних і модульних компонентів ПЗ. Компоненти JavaBeans можуть приймати різні форми, але найбільш широко вони використовуються в елементах графічного інтерфейсу користувача (на стороні клієнта).
69081. КОМПОНЕНТНА ІДЕОЛОГІЯ 207.5 KB
  Крос-платформними можна назвати більшість сучасних мов програмування високого рівня. Наприклад, C, С++ і Object Pascal — крос-платформні мови на рівні компіляції, тобто для цих мов є компілятори під різні платформи. Java і C# — крос-платформні мови на рівні виконання, тобто їх виконувані файли...