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>


 

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

84137. Проблемы истинного знания в философии. Истина, заблуждение, ложь. Критерии истинного знания. Характеристика практики и ее роль в познании 39.57 KB
  Цель любого философского познания – достижение истины. Истина – это соответствие знания тому, что есть. Следовательно, проблемы истинного знания в философии состоят в том, каким образом то или иное философское течение отвечает на вопрос – что же, в самом деле, есть? Или – что есть истинное бытие?
84138. Эмпирический и теоретический уровень научного познания. Их основные формы и методы 38.65 KB
  ЭМПИРИЧЕСКИЙ УРОВЕНЬ НАУЧНОГО ПОЗНАНИЯ это непосредственное чувственное исследование реально существующих и доступных опыту объектов. Классификация и теоретическое обобщение сведений о полученных научных фактах: введение понятий и обозначений; выявление закономерностей в связях и отношениях объектов познания; выявление общих признаков у объектов познания и сведение их в общие классы по этим признакам; первичное формулирование исходных теоретических положений. Таким образом эмпирический уровень научного познания содержит в своем...
84139. Категории качества, количества, меры и скачка. Закон взаимного перехода количественных и качественных изменений. Эволюция и революция в развитии 32.98 KB
  Изменение качества объекта означает изменение объекта вплоть до превращения его в другой объект а исчезновение качества объекта означает его уничтожение поскольку качество неотделимо от объекта. Но поскольку внешние количественные свойства объекта берутся не откуданибудь а произрастают именно из специфики его качества то изменение внешних свойств объекта всегда говорит о том или ином соответствующем изменении и в его качестве. Следовательно изменение количественных характеристик свидетельствует об определенном изменении качества...
84140. Категории тождества, различия, противоположности и противоречия. Закон единства и борьбы противоположностей 33.64 KB
  Таким образом противоречия это внутренний источник движения изменения развития объекта поскольку возникающие противоречия для своего разрешения порождают необходимые внутренние предпосылки объекта к соответствующему необходимому изменению. Когда объект меняется он превращается в нечто иное себе снимая обострившиеся противоречия и таким образом совершает некое необходимое развитие. Однако после момента снятия противоречий после их разрешения сразу же возникают новые противоречия поскольку у изменившегося объекта сразу же возникает...
84141. Категории отрицания и отрицания отрицания. Метафизическое и диалектическое понимание отрицания. Закон отрицания отрицания 38.35 KB
  Отрицание в логике это акт опровержения некоего несоответствующего действительности высказывания который разворачивается в новое высказывание. В философии же отрицание это возникновение нового отменяющего и замещающего собой старое. Применяться подобным образом в философии термин отрицание стал Гегелем который с его помощью объяснял циклический характер развития действительности: 1. В чем суть этого противоречия которое созревает в Разуме и отменяет отрицает собою нынешнее состояние Разума Рассмотрим это: суть этого внутренне...
84142. Общая характеристика философских категорий. Метафизическое и диалектическое понимание их взаимосвязи 39.51 KB
  Кроме того категории отражают наиболее важные характеристики и явления бытия которые пронизывают бытие насквозь во всём его многообразии и во всей его необъятности время пространство движение причина следствие единичное общее материя дух взаимодействие сила субстанция и т. К основным категориям относятся: бытиенебытие единичноеобщее причинаследствие случайностьнеобходимость сущностьявление возможностьдействительность материядвижение времяпространство качествоколичество сущностьявление содержаниеформа...
84143. Понятие общества. Основные идеи формационного и цивилизационного понимания общественной жизни и истории 38.69 KB
  Народ это всё население как таковое вовлеченное в совместную жизнь в системе какоголибо общества. Особая специфика и особая сложность общества состоит в том что его главным смысловым элементом является человек в результате чего общество в отличие от природных систем взаимодействия обладает высокой степенью непредсказуемости своего развития. Благодаря этому общественное развитие это процесс настолько сложный что его исследовательский анализ и теоретическое описание вызывают огромные трудности и сопровождаются безостановочными...
84144. Трудовая деятельность людей как основной фактор антропосоциогенеза. Общественное бытие и общественное сознание, характер их соотнесенности 32.32 KB
  Общественное бытие и общественное сознание характер их соотнесенности. Решающим для превращения человека в разумное и общественное животное стало пользование огнем и приручение животных. Таким образом благодаря труду бытие отдельного человека включено в общественное бытие. Общественное бытие это совокупность всевозможных форм совместной деятельности людей подчиненной общественной необходимости.
84145. Материальное производство и его структура: производительные силы и производственные отношения. Характер их соотнесенности 34.15 KB
  Теория материального производства разработана марксизмом. Главной особенностью материального производства которая служит его показательным отличием от любого другого вида производства различные виды производства духовных продуктов и нематериальных благ является наличие в процессах материального производства обязательного взаимодействия человека с природой. Таким образом в процессе материального производства человек воздействует на природу с помощью какихлибо средств труда. Сырье природный материал который в процессе производства...