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


 

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

29237. Первобытность и цивилизация 48 KB
  Кочевой образ жизни оказывался на периферии культуры. Новый хозяйственный и административный уклад принципиально меняет содержание духовной культуры: нравственная нейтральность этическая невменяемость Г. Все восточные культуры единообразны не однообразны пластичны жизнестойки. Восточные культуры способны создавать величайшие культурные ценности при сравнительно низком развитии индивидуального я и вообще самодеятельнотворческого начала.
29238. Индо-буддистский тип культуры 30.5 KB
  это учение было изложено в четырех сборниках: Ригведа Книга гимнов Яджурведа Книга жертв Самаведа Книга песен Артхарваведа Книга жрецов .
29239. Теория модернизации 36 KB
  Термин модернизация относится не ко всему периоду социального прогресса а только к одному его этапу современному. Органическая модернизация является моментом собственного развития страны и подготовлена всем ходом предшествующей эволюции. Такая модернизация начинается не с экономики а с культуры и изменения общественного сознания. Неорганическая модернизация являет собой ответ на внешний вызов со стороны более развитых стран.
29240. Эпоха модерна в европейской культуре 50 KB
  Необходимо отметить две важные черты культуры 19 в. Совершенствование институционных форм культуры т. объединение разрозненных прежде академических учреждений культуры: музеев библиотек театров художественных выставок. Важнейшим достижением культуры 19 в.
29241. Место и роль науки в культурном процессе 28.5 KB
  Для науки характерен системный подход к исследованию объекта. По характеру и методу исследования она делится на: естественные науки общественные науки: технические науки. В структуре науки выделяются два уровня организации знания.
29242. Ницше (Nietzsche) Фридрих 35.5 KB
  Центральное место в философскокультурологической концепции Ницше занимает понятие жизнь основу которой образует воля. Однако взгляды Ницше на протяжении творческой деятельности претерпевали определенную эволюцию. По Ницше понять импульсы воли выразить ее характер невозможно с помощью разума и науки. Искусство представляется Ницше как дополнения и завершение бытия.
29243. Культурологическое образование в России 32 KB
  Главная сложность введения культурологии в систему высшего образования заключалась в том что отечественная культурологическая наука представляла и до сих пор представляет собой полностью эклектическую конструкцию. Первые шаги в организации специального культурологического образования были предприняты в одном из первых негосударственных вузов страны Российском открытом университете где в 1990 началось формирование факультета и кафедры искусствознания и культурологии. В 1995 на базе этого факультета была создана Высшая школа...
29244. Культура 41.5 KB
  Это совпадение имени симптоматично оно лишний раз подчеркивает единство культуры народов включенных в орбиту европейского мира является знаком своеобразной культурной общности всех разноплеменных носителей европейских языков. Понятие цивилизация воспринимается как синоним слова культура В немецкой традиции впервые было сформулировано и стало весьма популярным представление о различии культуры и цивилизации. Со второй половины Х1Х века идея противопоставления культуры и цивилизации приобрела особое значение и...
29245. Религия как культурный феномен 30.5 KB
  Именно религия дает ответ на главный вопрос всех ценностнонормативных систем. Религия формирует у человека чувство независимости и уверенности в себе.Дюркгейм сравнивал религию в качестве интегратора социокультурных систем с клеем поскольку именно религия помогает людям осознавать себя как духовную общность скрепленную общими ценностями и общими целями.