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


 

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

39618. Междисциплинарный курсовой проект 406 KB
  65 Автоматизированные системы обработки информации и управления Волгоград 2011 ББК УДК Рецензент Издается по решению редакционноиздательского совета Волгоградского государственного технического университета Междисциплинарный курсовой проект: метод.65 Автоматизированные системы обработки информации и управления всех форм обучения. Выполнение междисциплинарного проекта основано на материале ранее изученных дисциплин: Информационные технологии Сети ЭВМ и телекоммуникации Маркетинг и менеджмент программных систем Технология...
39619. СТРУКТУРА И ОРГАНИЗАЦИЯ РАБОТЫ АКУШЕРСКОГО СТАЦИОНАРА САНИТАРНО - ПРОТИВОЭПИДЕМИЧЕСКИЙ РЕЖИМ В АКУШЕРСКОМ СТАЦИОНАРЕ 64.5 KB
  АС имеет следующие основные подразделения: приемнопропускной блок; физиологическое I акушерское отделение 5055 от общего числа акушерских коек; отделение палаты патологии беременности 2530; отделение палаты новорожденных в I и II акушерских отделениях; обсервационное II акушерское отделение 2025; гинекологическое отделение 2530. ПЕРВОЕ ФИЗИОЛОГИЧЕСКОЕ АКУШЕРСКОЕ ОТДЕЛЕНИЕ Первое физиологическое акушерское отделение включает в себя приемнопропускной блок родовой блок послеродовые палаты отделение...
39620. Модернизация локальной вычислительной сети административного здания ЗАО «ПромСвязь-Инвест» 2.11 MB
  1 Техническое задание Полное наименование проекта Модернизация локальной вычислительной сети административного здания ЗАО ПромСвязьИнвест. Цель создания системы Модернизация локальной вычислительной сети и создание базы данных принятия заявлений от абонентов на подключение или устранение неисправностей. Назначение системы ЛВС обеспечивает связь компьютеров для обмена информацией совместного использования сетевого оборудования информационных ресурсов устройств хранения информации и обеспечения контроля доступа на предприятии обеспечивает...
39621. Основные направления совершенствования налоговой политики государства 1.87 MB
  Cоциальноэкономическая сущность налогов и налоговой политики.3 Зарубежный опыт организации налоговой политики. Методологические принципы налоговой политики.1 Тенденции современной налоговой политики РФ: элементы состав и эволюция в условиях рыночных отношений.
39622. Приемы измерения социальной установки 141.5 KB
  Это наиболее простой вид шкалы измерения установки. При конструировании шкалы самооценки в форме традиционного вопроса её позиции обязательно располагаются симметрично и состоят из равного числа положительных и отрицательных оценок разделённых нейтральной позицией. Наиболее простой приём измерения установок по правилам такой шкалы ранжирование респондентами тех объектов отношение к которым с их стороны интересует исследователя. Более сложный вариант измерения установок при помощи ранговой шкалы метод парных сравнений.
39623. Разработка типового проекта «дублирующего» родильного дома 748.5 KB
  В рамках своего дипломного проекта я рассматриваю актуальные проблемы существующей системы учреждений родовспоможения в г. Цель 1 создать условия при которых здоровые беременные женщины и роженицы могли гарантировано получать медицинскую помощь в учреждениях родовспоможения обслуживающих район их места жительства; 2 улучшить условия получения медицинской помощи беременными женщинами и роженицами с патологиями. Таким образом деятельность перинатального центра не разгружает основной поток рожениц приходящийся на учреждения родовспоможения...
39624. Социальная установка. Определение и классификация 65.5 KB
  Исследования понятия и динамики социальных установок Понятие которое в определенной степени объясняет выбор мотива побуждающего личность к деятельности есть понятие социальной установки. Традиция изучения социальных установок сложилась в западной социальной психологии и социологии. Для обозначения социальных установок используется термин аттитюд. Особенности формирования социальных установок связаны с тем что они обладают некоторой устойчивостью и несут в себе функции облегчения алгоритмизации познания а также инструментальную функцию...
39625. Социальные сети как инструмент развития: виды и возможности 45 KB
  Могут ли сети упростить работу тренингменеджера Какие возможности они открывают для получения сотрудниками необходимых им знаний Trainings. Социальные сети в интернете зародились в 90х годах причем как профессиональное музыкальное сообщество а термин появился только в 2004. Стандартные социальные сети позволяют пользователю присоединять людей к своей сети выходить на других пользователей через своих знакомых посылать сообщения размещать фотографии тексты и любой другой контент.
39626. Сборный связевый железобетонный каркас с диафрагмами жесткости 4.5 MB
  1 Нагрузка с перекрытия передается на ригели с ригелей на колонны с колонн на фундамента а с фундамента на основание. Нагрузки в плоскости рамы Нагрузка от собственного веса ригелей Предварительно принимаем для ригелей длиной от 2. Нагрузка при таком условии будет равна: 1.4 Схема загружения от собственного веса балок Нагрузка от пола перекрытия Свойства слоев пола: 1.