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>


 

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

197. Определение договорной цены и расчет эффективности строительства 620.5 KB
  Расчет сметной стоимости строящегося здания по заданному аналогу. Сводная ведомость стоимости работ выполненных по объекту. Определение сметной стоимости на благоустройство территории (дороги и тротуары).
198. Створення сайту 422.52 KB
  Парні теги, позначають початок і кінець дії команди. Тег, що закриває область дії, має косу риску. Головні параметри тега body, основний текст, до якого застосовуються теги форматування. Написання заголовку сторінки.
199. Разработка конструкции транзисторного радиопередатчика, размещенного в кабине планера 9.15 MB
  Передающий тракт систем радиосвязи, расчет режимов транзистора мощного усилителя. Расчет режима мощного усилителя СВЧ и некоторое значение тока возбуждения. Расчет режима транзистора по схеме ОЭ без учета индуктивности выводов.
200. Разработка базы данных с помощью Microsoft Excel и Microsoft Access 466 KB
  Разработка логической модели базы данных средствами Microsoft Excel. Создание базы данных Microsoft Access, а также SQL-запросов и макросов. Создание таблиц и построение схемы данных, создание форм ввода-вывода информации.
201. Расчет плиты с круглыми пустотами 305.5 KB
  Нормативные и расчетные характеристики тяжелого бетона класса В25. Предварительное напряжение при благоприятном влиянии с учетом натяжения арматуры. Расчет прочности плиты по сечению, нормальному к продольной оси.
202. Исследование многопозиционной фазовой модуляции 306.5 KB
  Освоение основных принципов моделирования в среде MATLAB, знакомство с многопозиционными методами модуляции. Приобретение навыков по исследованию характеристик модулированного сигнала M-PSK.
203. Разработка практичного программного обеспечения для хранения данных компании в С# 522.5 KB
  Среда разработки поддерживает различные языки программировании в том числе С# и позволяет легко реализовать дизайн создаваемого приложения. Обзор основных функций программы Enterprise Management. Возможности настраиваемого интерфейса программного обеспечения.
204. Комплекс водоочистных сооружений для промышленного предприятия с технологической потребностью в воде 466 KB
  Общие сведения о системе водоснабжения и водоотведения промышленного предприятия. Балансовая схема водоснабжения и водоотведения промышленного предприятия. Разработка технологической схемы и расчет сооружений станции водоподготовки технической воды.
205. Конструирование гендерной нормы в современном российском обществе 670.5 KB
  Понятие нормы и патологии в контексте властных практик современного общества. Социологическое объяснение гендерной и сексуальной идентичности. Отношение общества и отдельных социальных групп к гомосексуальности и гомосексуалистам.