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>


 

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

4272. Создание объектов с помощью модуля классов 231.5 KB
  Создание объектов с помощью модуля классов. Создание объектов — один из самых эффективных способов программирования и управления приложениями. Перед рассмотрением преимуществ использования объектов необходимо разобраться с определениями. Объект...
4273. Отладка приложений Access 178 KB
  Отладка приложений Access. Использование средств отладки MicrosoftAccess и методик отладки, описанных в данной статье, позволяет сэкономить очень много времени, требующегося для разработки. Время, затраченное на изучение этих средств и методик...
4274. Access. Программирование на VBA. Профессиональная обработка ошибок 450 KB
  Access. Программирование на VBA. Профессиональная обработка ошибок. Признаком профессионального приложения является наличие возможности обработки ошибок. Если приложение не особенно элегантно обрабатывает ошибки, пользователи будут разочарованы вне ...
4275. Программирование на VBA. Оптимизация приложений 279 KB
  Программирование на VBA. Оптимизация приложений. Оптимизация приложения представляет собой тему для бесконечного обсуждения и споров между разработчиками. Всем нужны оптимальные решения, но что же точно означает термин оптимальный? Одни полагают, ...
4276. Знакомство со средой разработки Visual C# 209.5 KB
  Знакомство со средой разработки VisualC# Цели работы: Получение навыков работы со средой разработки Visual Studio 2008. Создание первой программы на языке C# в VisualStudio 2008. Указания к работе: Запустите Visual...
4277. Вычисление арифметических выражений 327 KB
  Цель работы Освоить ввод/вывод чисел в С# Освоить правила записи и вычисления сложных арифметических выражений с использованием стандартных математических функций научиться пользоваться встроенной справочной системой С# на примере математически...
4278. Обработка одномерных массивов на примере алгоритма сортировки и поиска 312.5 KB
  Работа с одномерными массивами. Указание к работе А) Разработать и отладить программу, в которой реализовать алгоритмы сортировки и поиска в соответствии с заданием. Определить время работы програ...
4279. Обработка матриц. Методические указания к лабораторной работе 98 KB
  Приобретение и закрепление навыков работы с двумерными массивами (матрицами). Теоретический материал Большинство вариантов индивидуальных заданий требует реализации типовых алгоритмов, выполняющих обработку прямоугольной матрицы по...
4280. Уровни языков программирования. Язык C# 344 KB
  Уровни языков программирования Языки программирования могут быть подразделены на три общих типа: Машинные языки – понимаются компьютером Ассемблерные языки (языки низкого уровня) Языки высокого уровня – удобны для програм...