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


 

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

18688. Эталонные (базисные) стратегии развития 14.19 KB
  Эталонные базисные стратегии развития. Эталонными базисными стратегиями развития бизнеса обычно называют наиболее распространенные выверенные практикой и широко освещенные в литературе стратегии. Они отражают 4 различных подхода к росту фирмы и связаны с изменени
18689. Информация для инвестора в интернете 14.32 KB
  Информация для инвестора в интернете. Связи с инвесторами или IR акроним от англ. Investor Relations сфера деятельности организации находящаяся на пересечении финансов коммуникационной политики маркетинга и права имеющая целью построение максимально эффективной двусторо...
18690. Иерархические модели данных 15.32 KB
  Иерархические модели данных. Иерархическая структура представляет совокупность элементов связанных между собой по определенным правилам. Объекты связанные иерархическими отношениями образуют ориентированный граф. основным понятиям: уровень элемент узел связь. У...
18691. Автоматизированное рабочее место 15.32 KB
  Автоматизированное рабочее место. Для реализации идеи распределенного управления потребовалось создание для каждого уровня управления и каждой предметной области автоматизированных рабочих мест на базе профессиональных персональных компьютеров. Например в с...
18692. Механистические организационные структуры 26.63 KB
  Механистические организационные структуры. Способность организации быстро реагировать на внешние угрозы и сохранять положительный баланс между входом и выходом зависит от ее структуры. Структура организации это совокупность предписанных ролей и взаимоотноше
18693. Схематичная конструкция жесткого диска (понятия цилиндр, дорожка, поверхность, сектор) 67.39 KB
  Схематичная конструкция жесткого диска понятия цилиндр дорожка поверхность сектор Говоря о магнитных дисках и жестких и гибких нельзя не сказать об их внутренней структуре. Ее составляют дорожки цилиндры и сектора. Дорожки tracks это концентрические окружности п
18694. Учет труда и заработной платы, регистры учета, среднемесячная заработная плата 16.41 KB
  Учет труда и заработной платы регистры учета среднемесячная заработная плата. Заработная плата это вознаграждение за труд в зависимости от квалификации работника сложности количества качества и условий выполняемой работы а также выплаты компенсационного и сти...
18695. Применение CASE-технологий при создании информационной системы 13.87 KB
  Применение CASEтехнологий при создании информационной системы. CASEтехнология представляет собой совокупность методологий анализа проектирования разработки и сопровождения сложных систем и поддерживается комплексом взаимоувязанных средств автоматизации. CASEтехноло...
18696. Анализ средств управления пакетом 16.36 KB
  Анализ средств управления пакетом. Система управления пакетами набор программного обеспечения позволяющего управлять процессом установки удаления настройки и обновления различных компонентов программного обеспечения. Системы управления пакетами активно исполь...