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


 

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

42593. П.Сорокин: концепции социальной конвергенции, социальной мобильности 15.39 KB
  Понятие социальной мобильности ввел П. Сорокин, определивший ее как «любой переход индивида, социального объекта или ценности, созданной или модифицированной благодаря деятельности, от одной социальной позиции к другой»
42594. Основи програмування 69.5 KB
  На формі знаходится одна група залежних та одна група незалежних перемикачів. В групі залежних перемикачів знаходяться три значення: іспит, залік, курсовий проект. В іншій групі знаходяться назви дисциплін поточного семестру. При виборі користувачем одного з значень залежних перемикачів (іспит чи залік) встановити прапорці біля відповідних дисциплін.
42595. Метод измерения Рн прибором п-201 40.5 KB
  Цель работы: ознакомится с принципом действия и устройством промышленного Рнметра выполнить проверку ознакомится с устройством имитатора электронной системы. Схема собранная на преобразователе П201 назначение приборов П201 преобразовает сигнал с электродов Rt –замеряет температуру среды И02 иммитаор для проверки преобразователя М325 Рнметр предел измерений от 2 до12 МСР63 блок сопротивлений Соединительная схема протокол поверки: порядок работы проверку проверку производят при нормальных условиях T20C влажность...
42596. Геометрии токарных резцов 175.5 KB
  Наименование резца: А тип резца – проходной Б расположение главной режущей кромки – правый В форма и расположение головки резца – прямой Г способ крепления режущей части – напайной 2 Наименование резца: А тип резца – подрезной Б расположение главной режущей кромки – правый В форма и расположение головки резца – отогнутый Г способ крепления режущей части – напайной Результаты измерений Измеряемые элементы Обозначение Величина ВК81 ВК8 Главный передний угол γ 750 20 Передний угол фаски γ _ _ Главный задний угол α 130 1650 Угол...
42597. Методологія розробки програмних продуктів та великих програмних систем 333.5 KB
  2010 18:00 77 Общий сбор scrum meeting 71.2010 9:00 78 Общий сбор scrum meeting 1 .2010 9:00 79 Общий сбор scrum meeting 2 .2010 9:00 80 Общий сбор scrum meeting 3 .
42598. Метод измерения Рн-прибором п-201с применением измерительных электродов 37 KB
  Березниковский филиал Пермского Государственного Технического Университета лабораторная работа №3 По курсу: методика автоматического анализа Тема: метод измерения Рнприбором п201с применением измерительных электродов Выполнил: студент гр. Цель работы: произвести измерение с помощью электродов сравнить данные с приборов с истинным значением сделать вывод. назначение приборов П201 преобразовывает сигнал с электродов Rt –замеряет температуру среды М325...
42599. Изучение конструкции и геометрических параметров спиральных сверл 517 KB
  Угол наклона винтовой канавки а расчетный б по отпечатку в по угломеру ЛМТ ω1 ω2 ω3 280 270 270 9. Угол при вершине сверла Угол при режущей кромки 1 Угол при режущей кромки 2 2φ φ1 φ2 3440 34020’ 34020’ 11. Угол наклона поперечной режущей кромки: по угломеру ψ 5310 13. Главный задний угол в осевой плоскости: rx=09r rx=04r 108 48 16.
42600. ФИЗИОЛОГИЯ СОСУДИСТОЙ СИСТЕМЫ. КРОВЯНОЕ ДАВЛЕНИЕ И ПУЛЬС 220.37 KB
  Кровяное давление как основной показатель гемодинамики. Факторы, обуславливающие величину артериального и венозного давления. Методы исследования. Артериальный и венный пульс, их происхождение. Анализ сфигмограммы и флебограммы.
42601. Конструктивные элементы и геометрические параметры фрез 150.5 KB
  Фреза — инструмент с несколькими режущими лезвиями (зубьями) для фрезерования. Виды фрез по геометрии(исполнению) бывают — цилиндрические, торцевые, червячные, концевые, конические и др. Виды фрез по обрабатываемому материалу - дерево,сталь, чугун, нержавеющая сталь, закаленная сталь, медь, алюминий, графит. Материал режущей части — быстрорежущая сталь, твёрдый сплав, минералокерамика, металокерамика или алмаз, массив кардной проволоки.