Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
|
УРОК |
|
|
ТЕМА. |
Гіпертекстові технології. Складові мови розмітки тексту HTML |
|
Мета: |
Дати поняття про мову написання гіпертексту, використання графіки, заміни фону в html-документах. |
Тип уроку: комбінований
Структура уроку
|
І. |
Організаційний момент |
2 хв |
|
II. |
Актуалізація опорних знань і вмінь учнів |
5 хв |
|
III. |
Вивчення нового матеріалу |
10 хв |
|
IV. |
Закріплення нових знань і вмінь учнів |
25 хв |
|
V. |
Підсумки уроку |
2 хв |
|
VI. |
Домашнє завдання |
1 хв |
Хід уроку
I. ОРГАНІЗАЦІЙНИЙ МОМЕНТ
II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ І ВМІНЬ УЧНІВ
Запитання до класу:
Баннер (англ. banner — флаг, транспарант) — графічне зображення рекламного характеру.
Растрова графіка представляє собою сітку (растр), осередки якої називаються пікселами.
Векторні зображення формуються на основі математично описаних фігур, які називаються векторами, а вигляд зображення визначається параметрами векторів.
Растрова – Paint, Photoshop, Gimp, PhotoPaint.
Векторна – Adobe Illustrator, CorelDraw.
1. НTML
HTML — це мова розмітки гіпертексту. Він визначає правила, згідно з якими звичайний текст подається у вигляді Web-сторінок.
Сучасний етап розвитку Інтернету почався на початку 90-х років з появою нового протоколу обміну інформацією. Цей протокол називається HTTP (HyperText Transfer Protocol — протокол передачі гіпертексту). Разом з цим протоколом з’явилася і служба World Wide Web, яка є мережею серверів HTTP, що передають файли через Інтернет.
Основною частиною цих файлів є Web-сторінки — спеціальні файли, написані на мові HTML (HyperText Markup Language — мова розмітки гіпертексту). Web-сторінки публікуються в Інтернеті шляхом розміщення таких файлів на серверах HTTP (Web-вузлах). Зміст Web-сторінок може бути різним і присвяченим абсолютно довільним темам, проте всі вони використовують одну і ту саму основу — мову HTML. Документи HTML звичайно мають розширення .НТМ або .HTML.
Мова HTML з’явилася одночасно із службою World Wide Web і розвивалася разом з нею, поступово вбираючи в себе нові риси, які дозволяли створювати все більш і більш уражаючі Web-сторінки. Вона є основою World Wide Web і одночасно причиною її широкої популярності. Значення і призначення мови HTML можна зрозуміти, виходячи з її назви.
Першим тегом у документах HTML має бути тег-контейнер <HTML>, а останнім — тег </HTML>. Наявність цих тегів говорить про те, що рядки між ними утворюють єдиний HTML-документ. Сам файл складається з двох розділів: розділу заголовка, що обмежений тегом-контейнером <HEAD>, та розділу, що становить тіло документа та обмежений тегом-контейнером <BODY>. У заголовку можна вказати назву документа за допомогою тега-контейнера <TITLE>.
2. Гіпертекскт
Гіпертекст — це текст, в який вбудовані спеціальні коди, що управляють додатковими елементами, такими, як форматування, ілюстрації, мультимедійні вставки і гіперпосилання на інші документи. Під розміткою розуміється вставка в текст цих кодів, що визначають те, як гіпертекстовий документ має відображатися в спеціальній програмі-броузері. Розмітка може бути простою або складною, проте в будь-якому випадку початковий текст зберігається в документі в незмінному вигляді.
Але найважливіше слово в цьому описі — мова HTML є комп'ютерною мовою, в деякому розумінні споріднена мовам програмування. Вона має досить суворі правила, яких необхідно дотримуватися, щоб одержати правильні результати.
3. Посилання на інші документи та файли.
Одне з найважливіших понять для HTML-документів — це посилання. Сама назва HTML — мова розмітки гіпертексту — вказує на принцип організації таких документів. Значення посилань у світі Інтернету важко переоцінити. Працюючи у веб-просторі, ми часто не знаємо, де знаходиться потрібна сторінка. Посилання — це єдина можливість швидко перейти від одного документа до іншого.
Посилання складається з двох частин. Перша з них — це те, що бачимо на веб-сторінці (покажчик посилання). Друга частина, яка дає інструкцію браузерові, має назву власної адреси, заданої у вигляді URL. Покажчиком посилання може бути слово, група слів або зображення. Для організації посилання необхідно повідомити браузеру, що є покажчиком посилання, а також вказати адресу документа, на який посилаємося. Обидві дії виконуються за допомогою тега <А>. Це тег-контейнер, який має єдиний параметр HREF, значенням якого є URL-адреса. Вказівник може бути як відносним, так і абсолютним.
4. Використання графіки
На веб-сторінках у більшості випадків використовують растрову графіку у двох форматах: .gif та .jpg. Розробники веб-сторінок можуть керувати як кольором тла документа, так і вказувати зображення, що можна використовувати як тло. Для задання кольору тла використовують параметр BGCOLOR тега <BODY>, а фонове зображення можна отримати, використавши параметр BACKGROUND.
За допомогою необов’язкових параметрів WIDTH та HEIGHT можна задавати розміри зображення, яке розташовуємо в HTML-документі. Для вбудованих зображень у HTML-документі потрібно використовувати тег <IMG>, який має єдиний обов’язковий параметр SRC, що визначає URL-адресу файла із зображенням.
|
Приклад найпростішого html-документу. |
<HTML> <HEAD> <TITLE> Моя веб-сторінка </TITLE> </HEAD> <BODY> Довільний текст </BODY> </HTML> |
|
Приклад практичної частини посилання на інші документи та файли. |
<A HREF=pogoda.html> Погода </A> <p><A HREF="http://www.ya.ru"> Яндекс </A></p> |
|
Приклад використання графіки. |
<BODY BACKGROUND=baner.JPG > … </BODY> |
|
За допомогою параметрів WIDTH та HEIGHT змінимо розміри зображення. |
… <IMG SRC= baner.JPG WIDTH=400 HEIGHT=100> <IMG SRC= baner.JPG WIDTH=200> <IMG SRC= baner.JPG WIDTH=100> … |
|
Замінимо параметр тега <BODY> BGCOLOR та вкажемо колір. |
<BODY BGCOLOR=gray> |
IV. ЗАКРІПЛЕННЯ НОВИХ ЗНАНЬ І ВМІНЬ УЧНІВ
Завдання:
gipertekst.html, Graphika_1.html, Graphika_2.html, Graphika_3.html.
V. ПІДСУМКИ УРОКУ
VI. ДОМАШНЄ ЗАВДАННЯ