14115

ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ

Конспект урока

Информатика, кибернетика и программирование

УРОК 6 ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ Наличие изображений делает Webстраницу более привлекательной и информативной для посетителей. Сами рисунки хранятся в отдельных файлах вне документа HTML но отображаются браузером внутри Webстраницы. Для вставки рисунка нужн

Русский

2013-05-21

383.5 KB

2 чел.

УРОК 6

ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ

Наличие изображений делает Web-страницу более привлекательной и информативной для посетителей. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются браузером внутри Web-страницы.

Для вставки рисунка нужно воспользоваться тегом <IMG>.

Атрибут src

Обязательным атрибутом этой команды является атрибут src, с его помощью задается имя файла, в котором хранится рисунок. Обычно графические файлы помещают в отдельный каталог pic (или image), который является подкаталогом для каталога с HTML-текстами.

Пример команды вывода графики: <IMG src=pic/picture.jpg>

Вставляемые изображения должны быть представлены в виде файлов формата GIF или JPEG (более подробно графические форматы будут рассмотрены на следующем уроке).

Другие атрибуты тега <IMG>

Атрибуты

Описание

alt

Альтернативный текст. Задает текст, который при необходимости отображается вместо графического клипа. Такие ситуации возникают при отключении отображения рисунков в окне браузера или неверном указании адреса картинки.

Пример записи: <IMG src=logo.gif alt="Логотип">

width, height

Ширина и высота картинки (в пикселях).

Например: <IMG src=logo.gif width=300 height=150>

Задание размеров картинки помогает браузеру отображать ее с большей скоростью. Кроме того, явное указание размеров изображений гарантирует, что при отключении отображения графики в окне браузера размещение элементов страницы останется неизменным.

border

Рамка вокруг картинки. Значением атрибута является толщина рамки (в пикселях).

Например: <IMG src=logo.gif border=1>

Чтобы удалить рамку, нужно задать нулевое значение атрибута.

align

Задает правила размещения на Web-странице текста и графических изображений относительно друг друга. Значения top, bottom и middle задают вертикальное положение фрагмента текста относительно картинки.

Пример1<IMG src="images\analisator.gif" alt="Анализатор" width="150" height="138" border="1" align="top">

Значения left и right задают способ обтекания графики текстом.

Пример2

hspace, vspace

Задает ширину пустой области (в пикселях) вокруг изображения, отделяющей его от остальных элементов страницы (hspace  слева и справа, vspace  сверху и снизу). Это позволит избавиться от эффекта прилипания текста к картинке.

Пример3


Вставка картинки средствами редактора HomeSite

  1.  На панели инструментов Common нажмите кнопку (Image).
  1.  В появившемся диалоговом окне ввести значения полей:
  •  Sourse адрес картинки (можно воспользоваться кнопкой (Обзор));
  •  Alt.Text альтернативный текст;
  •  Width, Heigt ширина и высота картинки (автоматически вставляются реальные размеры выбранного изображения);
  •  Hspace, Vspace ширина пустой каймы вокруг картинки;
  •  Border ширина рамки;
  •  Align выравнивание;
  1.  Нажать кнопку ОК

В результате выполненных действий в тексте программы появится строка HTML-кода:

<IMG src="pic\11.jpg" alt="Закат" width="200" height="133" hspace="8" vspace="5" border="1" align="left">.

Картинки ссылки

Если команду IMG вложить внутрь дискриптора <A>…</A>, то она будет работать как ссылка. При этом изображение обрамляется рамкой того же цвета, что объявлен для ссылок. Если рамка нежелательна, неоходимо указать нулевое значение атрибута border.


Задание

Небольшие графические изображения могут играть роль маркеров списка. При этом элементы маркированного списка не объявляются тегом <LI>. Каждый элемент начинается переходом на новую строку и картинкой. Рекомендуется использовать для картинок-маркеров атрибуты align и hspase. Атрибут align позволит выровнять строку текста относительно маркера, а hspace поможет задать одинаковые отступы текста от маркера.

Создайте документ по образцу:

Примечания:

  1.  Фон документа находится в файле 06_fon.jpg.
  2.  Цвет линии имеет код #660033
  3.  Заголовок страницы объявлен заголовком второго уровня, размер последнего слова увеличен.
  4.  Используются вложенные списки. Каждый уровень вложенности отличается отступом текста вправо.
  5.  Картинки для маркеров лежат в папке images/

06_sm1.gif

06_sm2.gif

06_sm3.gif

06_sm4.gif

06_sm5.gif

06_sm6.gif

PAGE  2


 

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

21033. Контур «Логистика» 1.62 MB
  При начальном знакомстве с работой модуля используются главным образом первые два пункта Документы рис. 1 и Операции рис. Рис. Рис.
21034. СЕРЕДОВИЩЕ ТА ОСОБЛИВОСТІ СУЧАСНОГО ЕТАПУ РОЗВИТКУ МІЖНАРОДНИХ ЕКОНОМІЧНИХ ВІДНОСИН 29.74 KB
  Середовище міжнародних економічних відносин – це система умов і факторів існування міжнародних економічних зв’язків. Середовище МЕВ поділяється на внутрішнє і зовнішнє.
21035. ИССЛЕДОВАНИЕ МАГНИТНЫХ ПУСКАТЕЛЕЙ 71.5 KB
  В общим случае МП состоит из трехполюсного контактора переменного тока электротеплового реле ЭТР и кнопок управления. Время токовая или защитная характеристика ЭТР зависимость времени срабатывания tср от тока I МП должна согласовываться с перегрузочной характеристикой электродвигателя зависимость допустимого времени протекания тока tдоп от тока I. К клеммам Х1 и Х2 подключается настольный амперметр для измерения тока в обмотке МП. Промежуточное реле KL1 и трансформатор тока ТА1 расположены за стендом.
21036. Электромагнитные воздушные контакты 56 KB
  Для катушек постоянного тока неблагоприятным условием при срабатывании является подача пониженного напряжения 085Uн на катушку нагретую до установившейся температуры Θдоп максимальным напряжением 105Uн. Иногда испытание на втягивание заключается в определении напряжения Uчс чёткого срабатывания т. напряжения при котором якорь переходит из одного крайнего положения в другое без заметного торможении в промежуточном положении. Поскольку чёткость срабатывания обычно определяется на слух то значение напряжения чёткого срабатывания...
21037. Исследование электрической дуги постоянного тока 134.5 KB
  Целью работы является исследование неподвижной дуги постоянного тока определение вольтамперной характеристики дуги между электродами выполненными из различных материалов исследование влияния длины дуги и шунтирующего сопротивления на характеристики дуги. Одной из основных характеристик дуги является ее вольтамперная характеристика зависимость напряжения на дуге от тока дуги. С ростом тока дуги вследствие разогрева дугового столба ее сопротивление уменьшается быстрее нежели растет ток.
21038. Исследование герконовых реле 552 KB
  Общие положения Отечественной промышленностью выпускаются одно и многоконтактные реле на замыкание размыкание и переключение преимущественно расположением герконов внутри катушки управления и с внешним магнитопроводом [12]. Для реле с одним замыкающим герконом рис.2 описывается выражением 1 и 2 и их соотношением определяются процессы срабатывания и возврата геркона где С приведенная жесткость контактных сердечников КС геркона; δн и δ начальное и текущее значения немагнитного зазора между КС; F магнитодвижущая сила МДС...
21039. ИССЛЕДОВАНИЕ АВТОМАТОВ 76 KB
  Краткие сведения об автоматах Автоматы это аппараты предназначенные для нечастых включений и отключений электрических цепей по команде оператора и автоматического отключения цепей при ненормальных режимах в них. Автоматы изготовляются на номинальные токи до 6000 А а отдельные серии до 2030 кА на номинальные напряжения до 660 В переменного тока и до 440 В постоянного тока. В зависимости от требовании к времени срабатывания и от назначения автоматы подразделяются на: 1 Небыстродействующие постоянного и переменного тока время...
21040. Исследование электромагнитных контакторов 67 KB
  Электромагнитный контактор представляет собой электромагнит постоянного или переменного тока по обмотке которого протекает ток. В качестве приводных электромагнитов постоянного тока обычно применяются клапанные Побразные электромагниты с внешним качающимся якорем рис. Кроме того необходимо иметь гибкое соединение для подвода тока к подвижному контакту. Исполнение дугогасительных систем контакторов зависит от рода и уровня тока коммутируемой цепи.
21041. Исследование герконовых реле 178.5 KB
  Ульянова Электротехнический факультет Кафедра электрических и электронных аппаратов ЛАБОРАТОРНАЯ РАБОТА №64 Исследование герконовых реле Выполнили студенты группы ЭТ2103: Кузнецов А. Лабораторная работа №64 Исследование герконовых реле Цель работы: изучение конструкций герконов и реле на их основе исследование параметров реле и геркона. Отечественной промышленностью выпускаются одно и многоконтактные реле на замыкание размыкание и переключение преимущественно с расположением герконов внутри катушки управления и с внешним...