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>


 

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

79681. Технологии управления персоналом 207 KB
  Способы организации досуга персонала с. Возможные методы поощрения сотрудников со стороны организации. В этом качестве – персонала организации – они нуждаются в управлении. В современных условиях научно-технического прогресса когда технологии а вместе с ними и профессиональные навыки устаревают в течение нескольких лет способность сотрудников к постоянному совершенствованию и развитию представляет собой наиболее важный и долговременный источник повышения эффективности деятельности любой организации.
79682. Проблемы и препятствия на пути воздействия на трудовую мотивацию персонала. Пути совершенствования мотивации труда 324.5 KB
  Государственное управление заключает в себе огромный материальный и человеческий риск. Это прежде всего высокие затраты, опасность ущемления общественного благосостояния, и, вызванная последним, низкая репутация чиновничества и государства в целом в глазах общественности.
79683. Факторы формирования чувства преданности организации 153.5 KB
  Определение понятия преданность организации. Психологические механизмы лежащие в основе чувства преданности организации. Приверженность организации и самочувствие.
79684. Формирование кадровой политики предприятия связи ОАО Липеком 739.5 KB
  Практика управления предприятием связи Липеком. Кадры управления менеджеры и их роль в процессе деятельности предприятия. Общая характеристика управления кадрами. Статья приложения структуры управления Липекома и статья приложения аудиторской проверки сканированы и отпечатаны с оригинала.
79685. Создание тренинга. Разработка программы тренинга 122 KB
  Разработка программы тренинга. С Заказчиком обсуждаются следующие вопросы: цели и задачи предстоящего тренинга Цели должны представлять направление на долгосрочную перспективу. Но можно по крайней мере оценить достаточно ли было упражнений на отработку навыков помогал ли тренер в процессе этих упражнений изучал ли тренер компанию и группу до тренинга и есть ли посттренинговое сопровождение.
79686. ПРИЧИНЫ ВОЗНИКНОВЕНИЯ БЕЗРАБОТИЦЫ. ВЛИЯНИЕ ЭКОНОМИКИ НА БЕЗРАБОТИЦУ 135 KB
  Закона о занятости населения в Российской Федерации Безработными признаются трудоспособные граждане которые не имеют работы и заработка зарегистрированы в органах службы занятости в целях поиска подходящей работы ищут работу и готовы приступить к ней. В Законе РФ О занятости населения в РФ определена политика государства в области занятости населения права граждан в области занятости а также вопросы регулирования организации занятости и создания государственной службы занятости населения. Международная Организация Труда...
79687. Деятельность кадрового подразделения организации 246.5 KB
  Любая организация существует только тогда, когда есть работающие в ней люди. Открытие какой угодно фирмы, предприятия, учреждения, организации начинается с подбора и оформления работников. Поэтому наличие службы кадров или специально выделенного сотрудника, занимающегося оформлением кадров, обязательно для организации не только любого масштаба, но и любой организационно-правовой формы.
79688. Обучение персонала как фактор повышения эффективности работы организации 785.5 KB
  Исследовать пути создания конкурентных преимуществ организации в рыночных условиях хозяйствования; обосновать важность человеческого ресурса как главного ресурса в организации; рассмотреть понятие кадрового потенциала и пути его повышения; рассмотреть порядок организации работы по обучению персонала и систематизировать методы обучения...
79689. Планирование кадров предприятия и их подбор 233.5 KB
  Любая организация создается для выполнения каких-либо целей и нуждается в управлении, а от того насколько эффективно ею управляют, и зависит достижение поставленных задач. Найти правильные методы налаживания связей между целями организации и людьми, которые их выполняют должен руководитель