План-конспект уроку на тему Використання графіки у Web-документахТема: Використання графіки у Web-документах. Мета: Ознайомити учнів із базовими тегами, які використовуються для роботи з графікою у Web-документах, навчити учнів використовувати ці теги на практиці, розвинути увагу та логічне мислення, акуратність, наполегливість, виховати повагу до оточуючих. Тип уроку: вивчення нового матеріалу. План. 1. Організаційна частина. 2. Актуалізація опорних знань. 3. Пояснення нового матеріалу. 4. Закріплення вивченого матеріалу. 5. Підсумки уроку. Л-ра: 1. Глинський „Інформатика”. 2. Симонович „Общая информатика”. 3. Зарецька „Інформатика”. Хід уроку. І. Організаційна частина. ІІ. Актуалізація опорних знань: > Що таке мова HTML? (Мова HTML - це мова розмітки гіпертексту".) > Що таке HTML-файл? (HTML-файл - текстовий файл, який має розширення .htm ".) > Що таке тег і які бувають теги? (Тег - інструкція браузеру, яка вказує спосіб відображення тексту. Тег завжди починається знаком (<), а закінчується знаком (>). Існує два типи тегів: парні та непарні.) > Які теги використовують для опису структури HTML-файлу. (Для опису структури HTML-файлу використовують слідуючи 4 парних теги: <HTML></HTML>, <HEAD></HEAD>, <TITLE> </TITLE>, <BODYx/BODY>; > За допомогою яких тегів створюють нумеровані та маркеровані списки? (<LI>, <OL>, <UL>) > За допомогою яких тегів виділяють символи курсивом, жирним, підкресленням? > Які теги дозволяють вирівнювати текст по центру екрана, по лівому та по правому краю екрана? (<CENTER> </CENTER>, <LEFT> </LEFT>, <RIGHT> </RIGHT>) ІІІ. Пояснення нового матеріалу: Графіка у середині HTML-документа Одна з найбільш привабливих рис Web - можливість включення посилань на графічні та інші типи даних у HTML-документ. Робиться це за допомогою тега <IJVfG...ISMAP>. Використання даного тега дозволяє значно поліпшити зовнішній вигляд і функціональність документів. Існує два способи використання графіки в HTML-документах. Перший - це впровадження графічних образів у документ, що дозволяє користувачу бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш використовувана техніка при проектуванні документів "inline image". Синтаксис тега: <1MG src="URL" ALT="text" HElGHT=nl WIDTH=n2 ALIGN=top|middIe|bottom|texttopISMAP> Опишемо елементи синтаксису тега: URL - обов'язковий параметр, що має такий же синтаксис, як і стандартний URL. Даний URL указує браузеру де знаходиться малюнок. Малюнок повинний зберігатися в графічному форматі, підтримуваному браузером. На сьогоднішній день формати GIF і JPG підтримуються більшістю браузерів. ALT="texttf - даний необов'язковий елемент задає текст, що буде відображений браузером. Звичайно, це короткий опис зображення, що користувач міг би чи зможе побачити на екрані. Якщо даний параметр відсутній, то на місці малюнка більшість браузерів виводить піктограму (іконку), активізувавши яку, користувач може побачити зображення. Тег ALT рекомендується, якщо ваші користувачі використовують браузер, не підтримуючий графічний режим. HEIGTH=nl - даний необов'язковий параметр використовується для указівки висоти малюнка в пікселах. Якщо даний параметр не зазначений, то використовується оригінальна висота малюнка. Це параметр дозволяє стискати чи розтягувати зображення по вертикалі, що дозволяє більш чітко визначати зовнішній вигляд документа. Однак, деякі браузери не підтримують даний параметр. З іншого боку, екранне розширення у вашого клієнта може відрізнятися від вашого, тому будьте уважні при заданні абсолютної величини графічного об'єкта. WIDTH=n2 - параметр також необов'язковий, як і попередній. Дозволяє задати абсолютну ширину малюнка в пікселах. ALIGN - даний параметр використовується, щоб повідомити браузеру, куди помістити наступний блок тексту. Це дозволяє більш строго задати розташування елементів на екрані. Якщо даний параметр не використовується, то більшість браузерів розташовує зображення в лівій частині екрана, а текст праворуч від нього. ISMAP - цей параметр повідомляє браузеру, що дане зображення дозволяє користувачу виконувати які-небудь дії. клацаючи мишею на визначеному місці зображення. Дана можливість є розширенням HTML і буде обговорена нами пізніше. Приведемо приклад використання даного тега: <L\1G src="http://www.schooI.nnov.ua/gss/image.jpg” ALT=”Лoгo" ALIGN="top" ISMAP> З версії HTML 2.0 у тега <IMG> з'явилися додаткові параметри: <IMG src="URLfr ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop(absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP> Нові параметри: BORDER - даний параметр дозволяє автору визначити ширину рамки навколо малюнка. VSPACE - дозволяє установити розмір у пікселах порожнього простору нал і під малюнком, щоб текст не наїжджав на малюнок. Особливо це важливо для динамічно формованих зображень, коли не можна заздалегідь побачити документ. НSPACE - те ж саме, що і VSPACE, але тільки по горизонталі. Фонові малюнки Більшість браузерів дозволяє включати в документ фоновий малюнок, що буде моделюватися і відображатися на тілі всього документа. Деякі користувачі люблять фонову графіку, деякі ні. Ненав'язливий напівпрозорий малюнок (шпалера) звичайно добре виглядає як тіло для більшості документів. Опис фонового малюнка включається в тег BODY і виглядає так: <BODY BACKGROUND="picture.gif > Завдання стандартних кольорів Багато HTML-авторів люблять використовувати заздалегідь визначені кольори тіла документа, звичайного тексту і посилань. Щоб задати ці кольори, необхідно включити в тег <BODY> додаткові параметри: <BODY BGCOLOR=”#XXXXXX” ТЕХТ=”#ХХХХХХ” LINK=”#XXXXXX”>, де кожний з параметрів визначає колір того чи іншого елемента. Опишемо ці параметри: BGCOLOR - колір тіла документа TEXT - колір простого тексту документа LINK - колір посилання. Колір задається шестизначним числом у шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Колір #000000 відповідає чорному, а колір &FFFFFF - білому. Наприклад: <BODY BGCOLOR=”#000000” TEXT=”#FFFFFF” LINK=”#9690CC”> Даний рядок визначає білий колір тіла документа, чорний текст і сріблисті посилання. Горизонтальна лінія Використовуючи тег <HR> ви можете розділити текст горизонтальною Формат тега: <lffi SIZE=number WIDTH=number|percent ALIGN=left|right|center \OSHADE> Параметри тега: SIZE - товщина лінії в пікселах. WIDTH - ширина лінії в пікселах чи відсотках віл браузера. ALIGN - розташування на екрані (ліворуч | по центру | праворуч). NOSHADE - за замовчуванням лінія представлена в 3D вигляді з NOSHADE дозволяє представити лінію просто однотонною смужкою. ІV. Закріплення нового матеріалу: > За допомогою якого тега можна вставити малюнок у Web-документ? > Як розділити текст горизонтальною лінією? >> Як задати колір тексту та посилання? > Як вставити фоновий малюнок? V. Підсумок уроку: На сьогоднішньому уроці ми з вами навчилися оформляти Web-документи за допомогою графіки, вставляти рисунки та встановлювати їх розміри.
