71359

Розміщення графіки на Web-сторінці

Лабораторная работа

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

Цей необов’язковий елемент визначає текст, який буде відображений браузером, що не підтримуює відображення графіки або з відключеною підтримкою зображень. Звичайно, це короткий опис зображення, який користувач міг би, чи зможе побачити на екрані.

Украинкский

2014-11-05

228 KB

0 чел.

ЛАБОРАТОРНА РОБОТА № 3

Розміщення графіки на Web-сторінці

1. Теоретичні відомості

Одна з найбільш привабливих рис Web-можливість включення посилань на графічні та інші типи даних в HTML-документ. Робиться це за допомогою тега <IMG>. Його використаняя дозволяє значно поліпшити зовнішній вигляд і функціональність документів.

Існує два способи використання графіки в HTML-документах. Перший – це впровадження графічних образів у документ, що дозволяє користувачу бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш поширена техніка при проектуванні документів, звана іноді "inline image". Синтаксис тегу:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop> 

Елементи синтаксису тега:

URL 

Обов’язковий параметр, який має такий же синтаксис, як і стандартний URL. Цей URL вказує браузеру де знаходиться малюнок. Малюнок повинен зберігатися в графічному форматі, що підтримується браузером. На сьогоднішній день формати GIF, JPG підтримуються більшістю браузерів.

ALT="text" 

Цей необов’язковий елемент визначає текст, який буде відображений браузером, що не підтримуює відображення графіки або з відключеною підтримкою зображень. Звичайно, це короткий опис зображення, який користувач міг би, чи зможе побачити на екрані. Якщо цей параметр відсутній, то на місці малюнка більшість браузерів виводить піктограму (іконку), при активації якої, користувач може побачити зображення. Тег ALT рекомендується, якщо використовується браузер, що не підтримує графічний режим.

HEIGTH=n1 

Цей необов'язковий параметр використовується для визначення висоти зображення в пікселях. Якщо цей параметр не вказаний, то використовується оригінальна висота малюнка. Цей параметр дозволяє стискати або розтягувати зображення по вертикалі, що дозволяє більш чітко визначати зовнішній вигляд документа. Проте, деякі браузери не підтримують цей параметр. З іншого боку, екранне розширення клієнта може відрізнятися від вашого, тому треба уважно задавати абсолютної величини графічного об'єкту.

WIDTH=n2 

Параметр також необов'язковий, як і попередній. Дозволяє задати абсолютну ширину зображення в пікселях.

ALIGN 

Цей параметр використовується, щоб повідомити браузеру, куди помістити наступний блок тексту. Це дозволяє більш точно встановити розташування елементів на екрані. Якщо цей параметр не використовується, то більшість браузерів розташовує зображення в лівій частині екрана, а текст праворуч від нього.

Додаткові параметри тега  <IMG>:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>

Нові параметри:

BORDER 

Цей параметр дає змогу автору визначити ширину рамки навколо малюнка.

VSPACE 

Дозволяє встановити розмір у точках порожнього простору над і під малюнком, щоб текст не наїжджав на малюнок. Особливо це важливо для динамічно формованих зображень, коли не можна заздалегідь побачити документ.

HSPACE 

Те ж саме, що і VSPACE, але тільки по горизонталі.

Фонові зображення 

Більшість браузерів дозволяє включати в документ фоновий малюнок, який буде відображатися на всьому документі. Опис фонового малюнка включається в тег BODY і виглядає наступним чином:

<BODY BACKGROUND="picture.gif"> 

2. Хід роботи

Розміщення графіки на Web-сторінці.

Тег <img> є одиночним, бо закриваючий тег не потрібен.
Графіка в
Web, як правило, поширюється в трьох форматах: GIF, JPG, PNG. Перед виконанням завдання помістіть файл schedule.jpg  у ту ж папку, яка буде використана для зберігання Web-сторінок..

Внесіть зміни в файл schedule.html:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>

<FONT SIZE="6"><I>занятий на вторник</I></FONT><BR><BR>

<IMG SRC="schedule.jpg">

</P>

</BODY>

</HTML>

  1.  Самостійно внесіть зміни в файл schedule.html, для використання таких атрибутів графіки як ALT, BORDER, HEIGHT, WIDTH. Приклад використання атрибутів наведено в таблиці нижче:

Атрибут

Формат

Опис

ALT

<IMG SRC="schedule.jpg" ALT="картина">

Напис "картина" виводиться на екран при підведенні курсору миші до зображення

BORDER

<IMG SRC="schedule.jpg" BORDER="3">

Задає рамку навколо зображення товщиною 3 пікселя.

ALIGN

<IMG SRC="schedule.jpg" ALIGN=TOP">

Вирівнює зображення щодо тексту по верхній границі тексту.

HEIGHT

<IMG SRC="schedule.jpg" HEIGHT=111>

Вертикальний розмір зображення примусово встановлюється в 111 пікселів

WIDTH

<IMG SRC="schedule.jpg" WIDTH=220>

Горизонтальний розмір зображення примусово встановлюється в 220 пікселів.

VSPACE

<IMG SRC="schedule.jpg" VSPACE="8">

Атрибут додає верхні і нижні порожні поля заввишки 8 пікселів

HSPACE

<IMG SRC="schedule.jpg" HSPACE="8">

Додає ліве і праве порожні поля шириною 8 пікселів.

Фонове відображення графіки на Web-сторінці

  1.  Помістіть файл back.jpg в ту ж папку, що й schedule.html.
  2.  Внесіть зміни в файл schedule.html:

<HTML>

<HEAD>

<TITLE> Учбовый файл HTML </TITLE>

</HEAD>

<BODY BACKGROUND="back.jpg" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B>Розклад</B></FONT><BR>

<FONT SIZE="6"> <I>занять на вівторок</I></FONT><BR><BR>

</P>

</BODY>

</HTML>

На екрані ви побачите:

Насправді ж графічний файл back.jpg виглядає так:

Лінійки та буквиці 

Графічні елементи можливо застосовувати в якості різного виду "прикрас". Якщо Ви придумаєте що щось оригінальне, ваша веб-сторінка буде виглядати незвично і запам'ятається відвідувачеві. Ось кілька, що стали вже традиційними варіантами такого застосування графіки:

По-перше, це різні графічні розділювачі, зазвичай горизонтальні, що застосовуються замість горизонтальної лінії (<HR>).

Горизонтальна лінія <HR>:

Хоча тег <HR> і піддається налаштуванню, графічний розділювач замість <HR> часто виглядає краще:

По-друге, можна застосувати графічний елемент як буквиці. Вбудувати буквицю в текст можна наступним чином:
<IMG SRC="r.gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В"> 

сь приклад вбудованої в текст буквиці, вона додана на початок параграфу. На всяк випадок в якості альтернативного тексту дається літера "О", щоб користувачеві з відключеною графікою не доводилося домислювати щодо першої букви. 

Розташуйте в вашому документі schedule.html розділювач anim_hr.gif.

Задайте цьому зображенню висоту 2 пікселя.

  1.  Перемістіть анімований розділювач у центр документа.
  2.  У слові Розклад замініть літеру Р зображенням. Ви можете взяти його в папці з лабораторними роботами (файл r.gif ).
  3.  Змінюючи значення атрибута ALIGN, оберіть найкраще розташування букви на екрані.
  4.  Використовуючи будь-який графічний редактор, створіть свій, альтернативний вид зображення літери Р та інтегруйте його в документ.

Графічні символи. 

Мова HTML дозволяє створювати марковані та нумеровані списки.

Приклад маркованого списку:

  •  елемент списку
    •  елемент списку  
    •  ...
    •  елемент списку

У термінах мови HTML це виглядає так:

<ul>

<li>елемент списку

<li>елемент списку

<li>...

<li>елемент списку

</ul>

Приклад нумерованого списку:

елемент списку

елемент списку

...

елемент списку

У термінах мови HTML це виглядає так:

<ol>

<li>елемент списку

<li>елемент списку

<li>...

<li>елемент списку

</ol>

Маркером може бути все, що завгодно – від просто кольорових і трохи опуклих кружечків та квадратів до витончених мініатюрних художніх робіт. Щоб проілюструвати можливість вставки в список графічних маркерів, замінимо кружечки у маркованому списку на червоні трикутники.

1. Спочатку треба створити такий трикутник в будь-якій програмі або скопіювати вже готовий (файл marker.gif  у папці з лабораторними роботами).

2. Цей файл помістити поряд з уже створеним файлом schedule.html.

3. Тепер введемо в тег <UL> атрибут STYLE= (цей атрибут докладніше розглянемо при вивченні CSSCascading Style Sheets):

<UL STYLE="list-style-image: url('marker.gif');">

Ваш список повинен виглядати так:

елемент списку

елемент списку

...

елемент списку

Зверніть увагу на те, що при вказівці імені файлу ми уклали його не в звичайні подвійні лапки, а в одинарні. Це зроблено тому, що всі значення атрибуту STYLE= укладено в подвійні лапки.

Оформлення кнопок. 

Ще одне часте застосування графічних елементів – оформлення кнопок. Взагалі кажучи, кнопка – це елемент взаємодії з користувачем. Щоб створити кнопку, помістіть у html-документ наступний код:

<BUTTON>ЦЕ KHОПKА</BUTTON>

У браузері вона має виглядати так: ЦЕ КНОПКА

Між тегами <BUTTON>...</BUTTON> можна помістити не лише текст, але й зображення. Якщо помістити туди тег <IMG>, то отримаємо кнопку з графічним зображенням.

  1.  Скопіюйте зображення home-button.gif з папки з лабораторними роботами , помістіть його в ту ж папку, що і файл schedule.html..
  2.  Змініть текст ЦЕ КНОПКА на опис тега <IMG>, що вказує на файл home-button.gif.
  3.  В тег <BUTTON> введіть атрибут onClick – цей атрибут дозволяє описати дії, о необхідно відпрацювати браузеру при клацанні миші по об'єкту. Оновлений тег повинен виглядати так:

<BUTTON onClick="location.href='http://www.mail.ru'"> 

Тепер при натисканні вказівником миші на створену кнопку, браузер перейде на сторінку  www.mail.ru.

3. Зміст звіту

1. Виконати усі операції з графікою, що було описано.

2. Додати  HTML-коди операцій.

3. Навести скрини сформованих HTML-документів.

4. На захист роботи підготувати коди.

4. Завдання і запитання для атестації

1. Вміти показати? як створюються HTML-документи з графікою.

2. Знати принципи використання графічних об’єктів.

3. Знати основні теги та атрибути при роботі с графікою.

Формат

Схема

Опис

GIF

Без втрат

GIF сстискує без втрат деталей. Таким чином, якщо важніще сохранність деталей, ніж швидкість завантаження, то можна обирати GIF

PNG

Без втрат

PNG також стискує без втрат деталей. PNG є доброю альтернативою GIF, за виключенням того, що він підтримується не усьома браузерами WWW

JPEG

З втратами

jpeg веде до втрат деталей при збереженні зображень. Якщо розмір файлу важливіше, збереження деталей, то використовуйте <jpeg>


 

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

31141. Технология проектирования ИС 82.83 KB
  Состав компонентов технологии проектирования Таким образом проектирование ИС задается регламентированной последовательностью технологических операций выполняемых в процессе создания проекта на основе того или иного метода в результате чего стало бы ясно не только что должно быть сделано для создания проекта но и как кому и в какой последовательности это должно быть сделано. Методология проектирования ИС предполагает наличие некоторых концепций принципов проектирования реализуемых набором методов проектирования которые в свою очередь...
31142. Понятия и процессы ЖЦ ПО 43.11 KB
  Он охватывает работы по созданию ПО и его компонентов в соответствии с данными требованиями включая оформление проектной и эксплуатационной документации подготовку материалов необходимых для проверки работоспособности и соответствующего качества программных продуктов материалов необходимых для организации обучения персонала и т. Определение компонентов ее оборудования ПО и операций выполняемых эксплуатирующим систему персоналом. Разработка и документирование программных интерфейсов ПО и БД разработка предварительной версии...
31143. Модель ЖЦ 86.63 KB
  Стадия создания ПО – это часть процесса создания ПО ограниченная некоторыми временными рамками и заканчивающаяся выпуском конкретного продукта модели ПО программных компонентов и документация определяемого заданными для данной стадии требованиями. Состав ЖЦ ПО обычно включает следующие стадии: Формирование требований к ПО. TOBE как должно быть – модель SIS с устраненными недостатками Результат стадии – техникоэкономическое обоснование. Стадии 2 и 3 иногда объединяют в одну и называют технорабочим проектированием или системным...
31144. Структурная парадигма проектирования ИС 61.9 KB
  Основными компонентами диаграмм потоков данных являются: Внешняя сущность – это материальный предмет или физическое лицо являющееся источником или приемником информации например заказчики клиенты бухгалтерия. Хранилище данных – это абстрактное устройство для хранения информации которую можно в любой момент поместить в него и через некоторое время извлечь причем способы помещения и извлечения могут быть любыми. Хранилище данных может быть реализовано физически в виде микрофиши ящика в картотеке таблицы в оперативной памяти файла...
31145. Состав и содержание работ на предпроектной стадии канонического проектирование ИС 127.82 KB
  Стадия формирования требований к автоматизированной системе главное на этой стадии – провести предпроектное обследование и дать техникоэкономическое обоснование целесообразности создания системы. Этап предполагает тесное взаимодействие с основными пользователями системы и бизнесэкспертами. По завершении этой стадии появляется возможность определить вероятные технические подходы к созданию системы и оценить затраты на ее реализацию. Сбор материалов обследования – все методы проведения обследования можно объединить в группы по следующим...
31146. Состав и содержание работ на стадиях технико-рабочего проектирование, внедрение, эксплуатации и сопровождения канонического проектирования ИС 15.66 KB
  Технический проект разрабатывается на основе технического задания и эскизного проекта. Стадия Рабочий проект – ее главное назначение – кодирование или адаптация готовых программных средств составление рабочего проекта. Большую роль для эффективного использования разработанного проекта ИС играет качественная технологическая документация входящая в состав рабочего проекта. При наличии прототипа системы стадии технического проекта и рабочей документации объединяются в одну проектную стадию.
31147. Проектирование пользовательского интерфейса 16.37 KB
  Порядок проектирования меню предусматривает следующую последовательность работ: Проектирование содержания меню; Проектирование форм меню – экранная форма. Проектирование содержания меню требует изучения предметной области и обоснования состава задач образующих функциональную часть системы и их иерархической взаимосвязи. Выбор пункта меню может завершаться: Появление на экране меню нижнего уровня; Выполнение команды; Выполнение процедуры процедура ввода вывода информации; Появление заглушки В главном меню следует предусмотреть...
31148. Проектирование системы документации ИС 16.21 KB
  Унифицированная система документации УСД – рационально организованный комплекс взаимосвязанных документов который отвечает единым правилам и требованиям и содержит информацию необходимую для оптимального управления некоторым экономическим объектам. В процессе проектирования УСД можно выделить 3 этапа работ: построение новых форм документов определение состава результатных показателей – зависит от того какие формы документов проектируются. При этом в первую очередь проектируются формы результатных документов а потом первичных....
31149. Как образуется массовое сознание 21 KB
  Фазы формирования МС: 1Фаза появления МС переживание – реальное или мнимое событие явление кот отражается в сознании индивида и рассматривается им как значимое событие в его жизни; 2фаза действия эмоций –между эмоциями и действиями нет сознательной регуляции; 3фаза рационализации внести логику в прошедшие события объяснить необъяснимое сформировать правила поведения в данной ситуации; 4выражение потребность чека делиться впечатлениями потребность в общении.