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


 

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

30201. Общая классификация вторжений и характеристика угроз 136.5 KB
  3] Правовая защита Защита информации Возросший интерес к проблеме защиты информации основан на объективных процессах создания и сбора информации и информационного обмена. Угроза искажения информации существует в любой точке сети начиная от места ввода в сеть сообщения и до места его получения. Проблемы защиты информации затрагивают различные аспекты ее представления хранения и обработки а также вопросы выбора и реализации средств защиты.
30202. Налоги и налогообложение. Методические указания по выполнению аналитической части дипломной работы 60.5 KB
  Содержание и оформление разделов основной части ВКР По структуре дипломная работа должна состоять из следующих разделов: Введение; Теоретическая часть работы; Практическая часть работы; Заключение. В общем виде ВКР включает пояснительную записку и иллюстрационные плакаты. II раздел баланса стр. 220 стр.
30203. Анализ пожарной опасности медицинских учреждений 623 KB
  Анализ зарегистрированных крупных пожаров в медицинских учреждениях показал что при пожарах в этих зданиях создается сложная обстановка для пожаротушения поэтому требуется разработка комплекса мероприятий по противопожарной защите. В профилактической работе ГПС важно не только предупреждение пожаров но и создание условий для их локализации. Знание условий распространения пожара позволяет заранее предусмотреть эффективные решения пожарной безопасности для предупреждения крупных пожаров.
30204. Состояние и пути совершенствования технологии производства молока в ООО «Бебелево» Ферзиковского района Калужской области 44.5 KB
  Выпускная квалификационная работа бакалаврская работа изложена на 77 страницах компьютерного набора состоит из введения пяти разделов характеристика хозяйства и организационноэкономический анализ хозяйственной деятельности; современное состояние и зоотехническая оценка отраслей животноводства; мероприятия по охране труда животноводов и охране природы; работа в условиях радиоактивного загрязнения местности; экспериментальное исследование по теме выводов и предложений списка использованной литературы; содержит 28 таблиц. Состояние...
30205. РАЗРАБОТКА СИСТЕМЫ КОМПЬЮТЕРНОГО ТЕСТИРОВАНИЯ 1.67 MB
  Обследование объекта и обоснование необходимости систем компьютерного тестирования. Очень актуальным становится использование школами различных систем компьютерного тестирования. Объектом исследования является системы компьютерного тестирования используемые для контроля знаний.
30206. Изучение туристских ресурсов на территории Аргентины 923.5 KB
  Эта латиноамериканская страна становилась чемпионом Кубка мира дважды в 1978 а также в 1986 годах и такая знаменитая личность конечно после Че Гевары как Диего Марадонна обеспечивает загруженность поклонникам футбола и журналистам уже последние 10 лет. Временный поверенный в делах Аргентины в России Маркос Беднарски недавно сообщал журналистам что в 2007 году число российских туристов посетивших Аргентину выросло на 10. Лист № докум. Подпись Дата Лист 2 МОГКТЭП 100401 ПЗ ДР 15781 зачеткак1212номзачеткизачетки ...
30209. ТЕХНОЛОГИЧЕСКАЯ КАРТА НА УСТРОЙСТВО КРОВЛИ ИЗ ЦЕМЕНТНО-ПЕСЧАНОЙ ЧЕРЕПИЦЫ. РАЗВИТИЕ СИСТЕМЫ МЕНЕДЖМЕНТА КАЧЕСТВА В СТРОИТЕЛЬНОЙ ОТРАСЛИ 1.77 MB
  ТЕОРЕТИЧЕСКИЕ ОСНОВЫ МЕНЕДЖМЕНТА КАЧЕСТВА В СТРОИТЕЛЬСТВЕ. Анализ состояния качества строительной продукции на современном этапе. Развитие менеджмента качества. ТЕХНОЛОГИЧЕСКАЯ КАРТА НА УСТРОЙСТВО КРОВЛИ ИЗ ЦЕМЕНТНО-ПЕСЧАНОЙ ЧЕРЕПИЦЫ