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


 

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

14976. Қазақстанның географиялық зерттелу тарихы 223.5 KB
  Қазақстанның географиялық зерттелу тарихы Қазақстан Республикасының аумағы батысында Едiл өз. алабынан шығысында Алтай тауы шыңдарына дейiн солтнде Батыс Сiбiр жазығынан Солт. Қазақстан жазығы оңтнде ТяньШань тауына дейiн созылып жатыр. Еуропа мен Азия ел
14977. Қазақстанның ежелгі қалалары 48 KB
  Қазақстанның ежелгі қалалары ҚАЗАҚСТАННЫҢ ЕЖЕЛГI ҚАЛАЛАРЫ жазба деректемелер мен археологиялық материалдар нәтижесiнде анықталған байырғы қоныс орындары қала жұрттары. 6 9 ғларда Оңт. Қазақстан мен Оңт.Батыс Жетiсуда қала мәдениетi жақсы дамыды. Саяси жағынан бұ
14978. Қазақстанның ең ежелгі қаласы 34.5 KB
  Қазақстанның ең ежелгі қаласы Сонымен жылқы жылының күзінде Тараз қаласының 2000 жылдық мерейтойы өткізіледі. Бұл жөнінде дүниежүзілік құзырлы ұйым ЮНЕСКО шешім қабылдаған болатын. Осыдан екі жыл бұрын түркі дүниесінің қазақ мемлекетінің рухани астанасы Түркістанның 15...
14979. Қазақстанның жеті кереметі 55.5 KB
  Тақырыбы: Қазақстанның жеті кереметі. Мақсаты: оқушыларды Қазақстанның тарихи мұраларымен таныстырып мәдениетке дегн қызығушылығын арттырып тәрбиелеу. 1оқушы:Бүгін маған керек емес ертегі Ертегіні өз басымда шертеді. Та...
14980. Разработка Алкотестера (алкометра) 818.16 KB
  Алкометр— средство измерений, предназначенное для измерения концентрации алкоголя в выдыхаемом человеком воздухе или в крови человека по выдыхаемому воздуху. Его погрешность нормирована, он подлежит метрологической поверке.
14981. Қаратау басындағы Қатынқамал үңгірі 93.5 KB
  ҚАРАТАУ БАСЫНДАҒЫ ҚАТЫНҚАМАЛ ҮҢГІРІ А.С. Тасенова Б.Е. Ерескенова №4 С.Сейфуллин атындағы орта мектебі Қызылорда қ. Қоғамның тарихи дамуы кезеңдерінде көптеген елді мекендермен қалалар өзінің бұрынғы маңызын жоғалтып кейде мүлдем құры...
14982. Қасиетті Түркі жері - Түркістан 51 KB
  ҚАСИЕТТІ ТҮРКІ ЖЕРІ ТҮРКІСТАН Қ.А. Шолпанқұлова. А.Р. Жүнісбекова Тараз мемлекеттік педагогикалық институты Тараз қ. ҮІІІ-ХҮІІ ғасырлар аралығында жазылған шығыс жазба деректерінің мәліметтерінде Түркістан атауы бірнеше мәнде қолданылады. Т
14983. ҚОЖА АХМЕТ ЯСАУИ КЕСЕНЕСІ 113.5 KB
  ҚОЖА АХМЕТ ЯСАУИ КЕСЕНЕСІ Сәулеттік ерекшелігі мен әлеуметтік қызметі күрделі Қожа Ахмет Ясауи кесенесіндегі жөндеу және қалпына келтіру жұмыстарының өзіндік сыры мол. Сондықтан да кесенедегі жөндеу және қалпына келтіру жұмыстарына арнайы тоқталудың маңы
14984. Меркі – түркілердің ежелгі мекені 126 KB
  Меркі – түркілердің ежелгі мекені Нұрсұлтан Назарбаев: Тарихы мол Меркі өңірі – еліміздің киелі өлкесі. Сол өңірдің тарихын атақты ұл – қыздарының еңбегі мен ерлігін келер ұрпаққа үлгі етіп көрсету өте бір маңызды еңбек деп санаймын. Меркі тарихы терең табиғ...