| Головна » Інформатика |
Мета: познайомити учнів з основними принципами будови та функціонування World Wide Web, протоколом НТTP, адресацією в мережі, розміщення інформації у WWW. Розвивати інтелект учнів, розширюючи їх знання про комп’ютерні технології; Виховувати культуру спілкування в колективі, вміння висловитись та вислухати. Використане обладнання: комп’ютери; електронні приклади веб-документів; таблиці з висновками; плани-опори; рейтингові бланки. Хід уроку.
1.Актуалізація опорних знань. [Подпись: Інтерактивне навчання : режим діалогу Метод моделювання та ілюстрацій] Пригадаємо основні загальні питання технології Internet. Мозкова атака: Опираючись на свій досвід скажіть, які питання доцільно повторити по темі Інтернет. Допомогти учням, направити їх в необхідне русло за допомогою схеми. Схемою клієнт – провайдер -сервер-мережа, але назви цих об’єктів скриті. По мірі повторення заповнити порожні комірки.. За яким принципом передаються дані в мережі Internet? (за протоколами) Пояснити за що відповідає кожний протокол. Чому в мережі інформація потрапляє саме туди куди необхідно? (Тому що вказується адреса за всіма правилами). Які програми спрощують наше спілкування в Internet? (Броузери)
2.Мотивація навчальної діяльності.
[Подпись: Інтерактивне навчання : режим бесіди] Для чого ви використовуєте Internet? (Послухати відповіді) Якщо серед відповідей виникне думка „розповісти світу про себе” наголосити на ній. Інакше підвести учнів до такої думки, звернувши увагу на те, що люди, які розташовують свою інформацію в Internet хочуть бути почутими, хочуть поділитися своїми думками, ідеями. А ми зможемо це зробити? Звичайно зможемо, якщо отримаємо необхідний об’єм знань. І перш за все ми повинні познайомитися з принципами роботи служби World Wide Web, яка відповідає за представлення інформації в Internet. Отже тема уроку: „Основні принципи будови та функціонування World Wide Web, протокол НЕЕР, адресація в мережі.”
Сьогодні на уроці ми повинні дати відповіді на такі запитання:
Що називають простором WEB?
3.Виклад нової теми
Internet має кілька служб, зокрема, електрону пошту, телеконференції, передавання файлів тощо. Більшість документів із різноманітною інформацією з різних галузей знань мають гіпертекстовий формат. Службу Internet яка управляє передаванням таких документів, називають World Wide Web. Цим терміном або простором Web називають обширну сукупність Web- документів, між якими існують гіпертекстові зв’язки. Окремі документи, які складають простір Web, називають Web- сторінками. Вони зберігаються на жорстких дисках Web – серверів. Web- сервер –це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до; це програмне забезпечення також називають Web – сервером. Групу сторінок, присвячену певній темі та розміщену в певному каталозі Web – сервера, називають Web– вузлом або Web- сайтом. Один фізичний Web – сервер може містити кілька Web- сайтів. Web - сторінки мають вигляд звичайних текстових документів, в які введено вказівки форматування.
А що ви знаєте про WWW?. [Подпись: Інтерактивне навчання : методика „учень – учню”] Наперед було задано відшукати інформацію про створення WWW. Учні діляться матеріалом, який відшукали. Довідка: Автори WWW – дослідники Європейської лабораторії фізики елементарних частин в Женеви, фізики Тим Бер-нерс-Ли і Роберт Кайо. Вчені вирішили створити таку систему, яка б дозволила всім фізикам в Європі обмінюватись через Інтернет результатами досліджень у вигляді ілюстрованого тексту, який би містив посилання на інші публікації. А поняття” гіпертекст” виникло на стику філософії та комп’ютерних технологій у середині ХХ ст..Теоретичною основою гіпертексту стали сформульовані В.Бушем(1945р.) принципи нелінійного письма, які він докладно висвітлив у роботі „ Як ми могли б мислити” У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали „гіпертекст”
Учитель узагальнює обговорену інформацію.
Висновок1: логічною основою WWW – є гіпертекст
Гіпертекстовий зв’язок між сотнями мільйонів документів, які зберігаються на серверах Internetу, є основою існування логічного простору WWW. Проте такий зв’язок не міг би існувати, якщо кожен документ у цьому просторі не мав своєї унікальної адреси. Адреса будь-якого ресурсу в мережі повинна записуватись відповідно до певного стандарту. Саме таким стандартом є URL( Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат: Протокол: //доменне ім’я / каталог/файл Протокол - найважливіша частина URL. Web- броузери взаємодіють із Web- серверами за протоколом прикладного рівня НТТР (протокол передавання гіпертексту).
В адресі URL не повинно бути пропусків. Наприклад: http://www.microsoft/com/index.htm - вказує на файл index.htm, розміщений у кореневому каталозі Web- сервера фірми Microsoft. Висновок2: WWW використовує протокол НТТР
Броузери взаємодіють із серверами, використовуючи протокол НТТР. Відомі такі броузери. Netscape, Opera, Internet Explorer. У школі ми користуємося броузером Internet Explorer Для відкриття документа у вікні броузера виконуються наступні дії: броузер декодує заданий URL і підключається до сервера;
Висновок3: броузери допомагають відобразити інформацію.
Розглянемо приклад: відкрийте Web- сторінку нашої школи, що розташована на Робочому столі кожного комп’ютера. Передивіться її. Проаналізуйте вікно броузера так, як ми це робили з додатками Word, Excel. Давайте обговоримо складові меню та панелей інструментів спираючись на ваш, уже достатній, досвід.
Висновок4: вікно броузера зручне для роботи, та має багато спільного з вікнами вже відомих додатків
4.Підсумки уроку
Що ви запам’ятали із сьогоднішнього уроку? Передивіться план-опору і, спочатку кожний для себе, дайте відповіді на запитання в кінці плану опори, а потім обговоріть їх із сусідом. Підніміть руки у кого в парі виникли суперечки що до відповідей на запитання. Давайте обговоримо це разом. Виставте один одному бали за засвоєння матеріалу в рейтинговому бланку. Вартість правильної відповіді на одне запитання -„5”. Бал за засвоєння теми –це середнє арифметичне всіх виставлених балів. На наступному уроці вчитель проводить бліц-тест, після чого підтверджує або коректує виставлені рейтинги, мотивуючи зміни.
5 Домашнє завдання [Подпись: Диференціація д.з.]
Вивчити основні поняття та принципи організації WWW. Підібрати цікаву інформацію про WWW. Для учнів, які мають уявлення про мову HTML: розшукати історичні відомості про мову НТМL.
Для підготовки використайте таку літературу: «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с13-18;
План –опора до теми „Основні принципи будови та функціонування World Wide Web, протоколи TCP/IP, адресація в мережі. Я повинен засвоїти: Що називають простором WEB? Що є основою існування логічного простору WWW? Що допомагає відобразити Web- сторінку Простором Web називають обширну сукупність Web- документів, між якими існують гіпертекстові зв’язки. Web- сторінками називають окремі документи, які складають простір Web. Web- сервер –це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web- сторінок; це програмне забезпечення також називають Web – сервером.
Поняття ”гіпертекст” з’явилося у середині ХХ ст..Теоретичною основи гіпертексту сформульовані В.Бушем(1945р.) в у роботі „ Як ми могли б мислити” У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали „гіпертекст”. Адреса будь-якого ресурсу в WWW записується відповідно до стандарту URL( Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат: Протокол: //доменне ім’я / каталог/файл Web- броузери взаємодіють із Web- серверами за протоколом прикладного рівня НТТР (протокол передавання гіпертексту). Для відкриття документа у вікні броузера виконуються наступні дії: броузер декодує заданий URL і підключається до сервера;
Підсумкові питання: Яку мережу називаютьInternet? Для чого використовуються протоколи ТСР/ІР? Що називається веб-сторінкою? Що називається веб-сайтом? За якими правилами записується URL- документ? Для чого призначений броузер?
Рейтинговий бланк Учня(ці) ....... класу ................................ (прізвище, ім’я) Засвоєння нового матеріалу Кожне питання оцінюється за10-ти бальною системою
Принцип будови Internet....................................... Структура WWW................................................... Для чого використання протоколів...................... Для чого використання броузерів........................ Принцип роботи броузера для WWW................. Запам’ятовування історичних відомостей.......... Запис адреси web- сторінки.................................
Тема: Вступ у НТМl. Створення структури НТМl документа. Знайомство з Web-редактором. Мета: знайомити учнів з основними поняттями та конструкціями мови НТМl, почати формувати вміння та навички створення НТМl-документа. Розвивати пізнавальний інтерес, учнів творче ставлення до роботи. Виховувати культуру спілкування в колективі учнів. Використане обладнання: комп’ютер; тестова оболонка з тестом; дошка; таблиці з основними поняттями; таблиця із структурою НТМl-документу; план-опора; бланк рейтингу. Хід уроку 1.Актуалізація опорних знань. Перевірка вивченого матеріалу. Для підтвердження балів, які ви поставили один одному за засвоєння попереднього матеріалу проведемо бліц-тест . Відкривши тестову оболонку Super Test запустіть тест під назвою WWW1і дайте відповіді на питання. ( Як користуватися даним тестом учні знають бо не вже раз його використовували). Питання тесту (їх кількість невелика, розглянуті основні загальні питання).
1.Броузери (наприклад, Microsoft Internet Explorer) є: серверами Інтернету 2.В записі адреси веб-сторінки http://www.npu.kiev.ua /ABITUR /abit-beg.htm назвою данної веб-сторінки є: 1) www.npu.kiev.ua; 2) abit-beg.htm; 3) ABITUR; 3.У середовищі WWW працюють за стандартом: 1) HTTP; 2) URL; 3)FTP;
4.Поняття гіпертекст вперше виникло: 60-х роках 18ст.;
5.WЕВ-сервери цце: спеціалізовані комп’ютери з відповідним програмним забезпеченням;
6.Протокол передавання гіпертекстових документів це: FTR; Тест виводить оцінку за знання матеріалу. Учитель порівнює попередній бал ( з минулого уроку) і підтверджує його або змінює, пояснюючи учню причини зміни балу.
Пояснення: рейтингові бали вчитель сам виставляє учню за кожний етап протягом уроку.
2. Мотивація навчальної діяльності. Яку мету ми з вами ставили на попередньому уроці? Серед відповідей учнів вибрати:-„Одержати засіб для представлення власної інформації в Інтернеті.” Дійсно так, створивши власну Web-сторінку ви отримаєте практично необмежені можливості реклами своєї продукції, ідей. Ви зможете розповсюджувати інформацію та знаходить близьких по духу людей. Але для того щоб створити Web-сторінку необхідно знати мову гіпертекстової розмітки, тобто HTML. Сьогодні ми розпочинаємо вивчення цієї мови. 3. Повідомлення теми і мети уроку.
[Подпись: Постановка завдань] Отже тема уроку: ”Створення структури HTML документа. Знайомство з Web редактором.” На уроці ви повинні: 1.Познайомитись з історією мови НТМl 2.Познайомитись та запам’ятати основні поняття мови. 3. Навчитися створювати простіший НТМl документ. 4. Створити документ, використовуючи тегі вирівнювання та заголовків. 5. Виявити творчий підхід в роботі. 4. Виклад нового матеріалу та виконання практичних вправ. [Подпись: Діалог: учень - учню] На попередньому уроці учням було завдання відшукати історичну довідку про створення мови HTML. Дати можливість де кому з учнів поділитися знайденою інформацією. Учитель може під коректувати відомості, навести свою історичну довідку. На початку мова розмітки була простою мовою. У 1994 році Міжнародна комісія зі стандартів Інтернет розробила стандарт HTML2.0. невдовзі розробників Web-сторінок почали турбувати його обмеження. Фірми Netscape i Microsoft ввели власні коди, які надали ширші можливості в порівнянні з версією HTML2.0. У жовтні 1994 року засновано Консорціум WWW Consortium – некомерційну організацію, ціллю якої є розробка і реалізація стандартів HTML та WWW. До неї належить 165 комерційних та академічних організацій, у тому числі такі гіганти, як Netscape і Microsoft. Очолює консорціум – Тім Бернерс Лі. Консорціум розробив стандарт HTML3.0. це було зроблено без участі фірм Netscape і Microsoft, тому цей стандарт так і не був прийнятий. Тоді у травні 1996року був розроблений стандарт HTML3.2, я який уже було включено більшість додаткових кодів, введених фірмами Netscape і Microsoft. Сьогодні розробниками використовується версія HTML4.0, робочий варіант якої було прийнято 8 червня 1997 року. Мова HTML має певні переваги: ---документ, створений за допомогою деякої програми часто важко, а іноді неможливо використати в іншій програмі; HTML у цьому відношенні є універсальною; --- HTML- це відкритий стандарт; --- HTML не є власністю якої-небудь фірми; ----можливість використання гіпертексту; ----HTML підтримує мультимедіа.
Документи написані мовою розмітки гіпертексту називаються HTML-документи. Вони мають розширення *. Html. Використовуючи дану версію мови HTML ми повинні засвоїти основні поняття: (поняття записані на великих аркушах паперу і по мірі знайомства з ними розвішуються на дошці) Дескриптор (тега) – основний елемент кодування. Дескриптори можна задавати як строчними та і прописними буквами. Теги обмежуються знаками “<”,”>’. Контейнер- це дескрипторна пара, яка складається з початкового і кінцевого дескрипторів (тегів) / Атрибути – це додаткові ключові слова, які відокремлюються від ключового слова, що визначає дескриптор, пропуском і розміщуються до символу “ >”. ( На дошці розвішуються таблички з основними поняттями по мірі ознайомлення з ними.)
Всі HTML- документи мають однакову загальну структуру: <HTML> <HEAD> <TITLE> назва веб-сторінки</TITLE> </HEAD> <BODY "> “ Тіло “- вміст веб-сторінки: текст, графіка, гіперпосилання. </BODY> </HTML> ( зразок сторінки є в плані-опорі у кожного учня) крім того учні записують структурні теги в зошит. Контейнера <HTML>...</HTML> - ознака HTML- документа <HEAD>... </HEAD> - заголовок документу <TITLE>...</TITLE> - служить для задання назви документу і відображається на верхній рамці вікна броузера. <BODY >...</BODY> -„тіло”, задає основну частину документа. Створити цю просту сторінку можна, наприклад, таким способом: Запустити текстовий редактор Блокнот. Практичне завдання № 1 Створити на диску С в каталозі (папці) Інформатика власну папку під назвою з вашим прізвищем записаним Англійськими буквами. Відкрийте збережений документ через „Мій комп’ютер” із вашої папки. Ви побачите відображення вашої веб-сторінки броузером. Для того,щоб потрапити до редакційного вікна HTML- документу необхідно в меню вибрати команду „ Вид- Источник”. Для того щоб розташування тексту в документі було таким. Як ви бажаєте необхідно познайомитись ще з деякими тегами. Практичне завдання № 2. Розділимо текст на параграфи. Як розбити текст на параграфи?. Поставте тегу <p> перед початком параграфа. Коли програма перегляду знайде цю тегу, вона сама виставить перед початком параграфа порожній рядок. Перегляньте приклад. Розташуємо фразу” Привіт! Я Іванова Катерина” по центру. Для цього застосуйте тегу вирівнювання < P ALIGN=CENTER> для вирівнювання праворуч -< P ALIGN=RIGHT>, ліворуч - < P ALIGN=LEFT>. Якщо вас не задовольняє відстань тексту від лівого краю і ви бажаєте зробити „червоний рядок”, то після тега <p> вставте символи.  , що позначають пробіл. Приклад: <p> Покажіть зроблену роботу вчителю. Для виділення логічних частин тексту використовують заголовки (headings). Вони позначаються буквою Н. Цифра після букви вказує на рівень заголовка. Заголовки можна вирівнювати так як і абзаци. Розгляньте приклади використання заголовків на плані –опорі. <h1 align=cetnter>Проекти нашої школи</h1> < h2 align=left>Наші роботи</h2> < h3 align=right> Фотогалерея</h3> <h4 align=cetnter> Музичний калейдоскоп</h4>
< h5 align=left>Театральна студія</h5> < h6 align=right> Підсумки роботи</h6> Давайте удосконалимо наші сторінки, використовуючи заголовки та параграфи. Практичне завдання №3 Відкрий свій HTML- документ і відредагуйте його за зразком №3 в плані –опорі. <HTML> <HEAD> <TITLE> Моя сторінка</TITLE> </HEAD> <BODY "> <h2 align=cetnter>Привіт! Ти завітав на мою домашню сторінку! </h2> <br> <h3> Моє місто</h3> <p> Я живу в місті Ніжині</p> < h3 align=left>Моя школа №15</h3> < р align=left>Я навчаюся в 11-Г класі ЗОШ І-ІІІ ст.. №15</р> <h4 align=cetnter>Мої захоплення </h4> <р align=cetnter>Мої захоплення-музика, спорт. </р> < h5 align=right> Мої друзі</h5> < р align=right> Мої друзі навчаються зі мною в одному класі.</р> Збережіть зміни в документі. Поновіть інформацію у вікні броузера. Вам подобається те, що ви одержали? Якщо ні, то проекспериментуйте із вирівнюванням та заголовками і виберіть найбільш естетичний варіант. Обов’язково покажіть свої досягнення вчителю.
5.Підведення підсумків Передивитися утворені сторінки. Визначити найбільш вдалі. Виставити бали до рейтингової картки. Ще раз повторити деякі моменти: Які поняття мови розмітки гіпертексту ви запам’ятали? Які програми допомогли нам в роботі по створенню HTML- документу? Що ви навчилися робити на сьогоднішньому уроці?
6. Домашнє завдання [Подпись: Диференціація д.з.] Вивчити основні поняття і теги. Записати вивчені теги до НТМL- словника (завести невеличкий блокнот ). Продумати інформацію, яку ви бажаєте розташувати на своїй сторінці. Учням, які мають досвід в роботі з мовою розмітки гіпертексту підготувати „ пам’ятки” в допомогу учням - „новачкам” з теми „ТЕГИ .
Для підготовки використайте таку літературу: «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с18-22;
Урок №3. Тема Введення, елементи форматування тексту, поділ тексту на логічні частини. Мета познайомити учнів з елементами форматування тексту веб-документу; продовжувати формувати вміння та навички створення веб-сторінок.; розвивати дизайнерські здібності учнів, вміння планувати свою роботу; виховувати культуру представлення інформації. Використане обладнання: комп’ютер; дошка;пам’ятки з теми підготовлені учнями; таблиці з основними поняттями, термінами; таблиця із структурою НТМl-документу; план-опора; бланк рейтингу.
Хід уроку. 1 Актуалізація опорних знань. Гра „ Знайомі поняття WWW”: Гра полягає у виборі понять, які стосуються безпосередньо WWW. Учні отримують картки трьох кольорів: червоного, жовтого та зеленого. Почувши термін, що стосується WWW, учні повинні підняти картку зеленого кольору, термін, що не стосується заданої теми, але має відношення до теми Інтернету відмічається жовтим кольором, поняття, що взагалі не мають відношення до мережних понять відмічаються червоним кольором. [Подпись: Ігрові елементи] Набір термінів і понять записаний на картках великого розміру (щоб учні сприймали інформацію не тільки на слух але й зором) може бути таким:
У класі є учні, що мають певний досвід в роботі з HTML двох з них запрошую до лічильної групи, яка виставляє кількість правильних відповідей кожному учню, та повідомляють результати гри ( учитель заздалегідь домовився, що повідомлення результатів буде емоційним, де інтонація передасть настрій відповідний до результатів.) 2.Мотивація навчальної діяльності Погодьтеся, що повідомлення результатів було достатньо емоційним, і ми всі зрозуміли наскільки вдалими, або навпаки, були відповіді кожного з вас. Емоції лічильної групи передавалися за допомогою інтонації. У повсякденному житті, коли ви з ким–не будь розмовляєте, то обов’язково виділяєте інтонацією ті чи інші слова. Таким чином ви показуєте співрозмовнику, на що необхідно звернути увагу. Письмова мова позбавлена інтонаційного забарвлення, але є можливість використовувати різні способи виділення слів, то б то форматувати текст. Сьогодні ми навчимося це робити засобами мови HTML.
3.Повідомлення теми та завдань уроку.
Тож тема уроку звучить так: „ Форматування тексту. Поділ тексту на логічні частини”. Завдання уроку: Познайомитися з деякими засобами мови HTML форматування тексту;
3. Виклад нового матеріалу, виконання практичних вправ. Перед викладенням нового матеріалу деяким учням роздати підготовлені іншими учнями „пам’ятки”. В кінці уроку проаналізувати, наскільки ці пам’ятки допомогли у роботі. Фрагмент тексту можна виділити напівжирним шрифтом (Bold).для цього необхідно використати теги <B> текст </B>. Окремі слова можна підкреслити за допомогою теги <u> текст </u>. Часто використовують курсив за допомогою тег <i> текст </i>. Не забувайте закривати дані дескриптори, інакше ви виділите весь текст, а не окремі його частини, як ви планували. [Подпись: Питання розраховані для учнів, що знайомі з мовою HTML. Диференційований підхід.] Можна примусити текст „мигать”, але таким виділенням треба користуватися дуже обережно, бо навряд ви станете читати довге послання, якщо всі його слова мигатимуть. Якщо ви хочете одночасно задати текст напівжирним шрифтом і курсивом, надрукуйте наступне: <i> <B> текст </B></i>, <B><i> текст </i></B>. В даному прикладі відображена одна з головний ідей мови HTML: тег, який відкрився першим, закривається останнім, тобто ви вкладаєте теги один до одного. Практичне завдання №1. Відкрийте свою веб-сторінку. Як зайти в редактор веб –сторінки? Як змусити броузер відобразити зміни? Покажіть на власному прикладі дію головного правила мови HTML.
Теги, що керують шрифтами, також мають свої атрибути. Розгляньмо їх. Ви можете збільшити або зменшити розмір шрифту, який вимірюється в пунктах. Питання: Хто знає чому дорівнює один пункт? Один пункт дорівнює 1/72 дюйма або 0,353мм. Він задається відносно розміру, встановленого в програмі перегляду по умовчанню: <font size=+n>і </font>, <font size=-n> і</font>, де число пунктів, на яке ви хочете збільшити або зменшити розмір шрифту. Шрифт тексту, розташованого між тегами <font size=+n>і </font>, <font size=-n> і</font>, буде збільшений або зменшений. Практичне завдання №2. Застосуйте теги <font size=+2> і </font>, до тексту у вашій веб-сторінці до фрази „ я навчаюсь у ЗОШ І-ІІІ ст.№15”, виділивши при цьому текст ” ЗОШ І-ІІІ ст.№15”. Атрибут face означає назву шрифту. На жаль, не всі програми перегляду можуть відображати заданий шрифт, як у нас, тому, не слід застосовувати рідкісні шрифти та часто використовувати цю функцію. Практичне завдання №3. Використайте для окремого фрагменту тексту і перегляньте роботу тег <font size=”+7” color=”red” face=”Arial”> текст </font>. Зверніть увагу на те, як змінився колір тексту. Цю зміну викликав атрибут color. Необхідний колір ви можете задати або написавши його назву на англійській мові, або задавши відповідний код, який можна знайти у файлі „Цвета в сети.html”, що знаходиться на кожному комп’ютері в папці HTML. Питання: які ще елементи можна використовувати для виділення логічних частин тексту? Проаналізувавши відповіді учитель узагальнює матеріал. Дуже зручний спосіб – горизонтальна лінія (Horizontal Rule). Вона позначається тегом <hr>, закриваючий тег в даному випадку не потрібен. Перед даним тегом немає необхідності ставити теги нового абзацу тому, що він сам утворює новий рядок. Але якщо вас не задовольняє відстань лінії від тексту поставте декілька тегів <br>один за одним. Наприклад: Заголовок <hr> <br> <br><br><br>. Крім того ви можете задати розташування горизонтальної лінії, її колір та товщину, якщо задасте атрибути: <hr align=”center” color=”blue” noshade size=”n” width=”n”>, де <hr align=”center”- вирівнювання по центру, що розміщує лінію по центру Питання: „Які теги задають вирівнювання по правому та по лівому краю? „ Right, left. color=” назва кольору” noshade size=”n” – об’ємна лінія товщиною n у пікселях width=”n”- ширина у пікселях. Практичне завдання №4 Відокремте різними лініями інформацію про місто, школу та захоплення на власній веб – сторінці. Поповніть свою сторінку новою інформацією, яку ви продумали вдома, використовуючи відомі теги. Не забувайте: крім виразного та яскравого оформлення текст повинен виділятися красою висловлення думки.
Питання: Вам подобається вигляд вашої сторінки? Учні, скоріш за все дадуть відповідь „ні „ тому, що фон сторінки сірий – не привабливий? Що ви хочете змінити? „Колір фону, колір шрифту всього документа” – як правило відповідають учні. Щоб вирішити цю проблему необхідно познайомитись із тегми <bgcolor>- даний тег використовується для оформлення фону сторінки і text – для задання кольору шрифту. Записується вони так: <body bgcolor= “ код кольору” text=” код кольору”>. Запам’ятайте: фон документа не повинен дратувати, втомлювати очі, текст повинен спокійного кольору, чітко виділятись і гармоніювати з фоном. Практичне завдання №5 Застосуйте теги кольору фону і тексту до своєї сторінки Перегляньте результат, проаналізуйте його. Спитайте думку вашого сусіда, що до кольору фона, та загального вигляду сторінки. Змініть те, що вас не влаштовує. Якщо ви справились із завданням, перегляньте план – опору, вирішіть для себе чи все ви засвоїли. 5.Підведення підсумків Передивитися створені сторінки. Визначити найбільш вдалі кольорові вирішення. Виставити бали до рейтингової картки. Ще раз повторити деякі моменти: Що ви навчилися робити на сьогоднішньому уроці? Які теги вам допомогли у роботі? Які пропозиції є що до організації нашої роботи? Вислухати про результати роботи з „пам’ятками”, з’ясувати який варіант найкращий. Оцінити дану роботу.
6. Домашнє завдання [Подпись: Диференціація д.з.] Вивчити нові і повторити відомі теги. Записати вивчені теги до НТМL- словника. На наступному уроці ми познайомимось із списками тому, продумати інформацію, яку можна розташувати на своїй сторінці у вигляді списків різних видів. Опрацюйте матеріал ” Мої плани на майбутнє” Учням, яким важко дається засвоєння матеріалу записати зразок веб -сторінки в зошитах ( для кращого запам’ятовування тег - підписати призначення кожної теги).
Для підготовки використайте таку літературу: «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с. 23-30;
План опора з теми Введення, елементи форматування тексту, поділ тексту на логічні частини.
Завдання уроку: 1.Познайомитися з деякими засобами мови HTML форматування тексту; 2.Навчитися використовувати відповідні тегі для зміни вигляду тексту за допомогою окремих вправ; 3.Доповнити та відформатувати власну веб-сторінку.
Напівжирний шрифт (Bold).для цього необхідно використати теги <B> текст </B>. Підкреслити <u> текст </u>. Часто використовують курсив за допомогою тег <i> текст </i>.
Якщо ви хочете одночасно задати текст напівжирним шрифтом і курсивом, надрукуйте наступне: <i> <B> текст </B></i>, <B><i> текст </i></B>. В даному прикладі відображена одна з головний ідей мови HTML: тег, який відкрився першим, закривається останнім, тобто ви вкладаєте теги один до одного.
Практичне завдання №1. Відкрийте свою веб-сторінку. Як зайти в редактор веб –сторінки? Покажіть на власному прикладі дію головного правила мови. Практичне завдання №2. Застосуйте теги <font size=+2> і </font>, до тексту у вашій веб-сторінці до фрази „ я навчаюсь у ЗОШ І-ІІІ ст.№15”, виділивши при цьому текст ” ЗОШ І-ІІІ ст.№15”. Атрибут face означає назву шрифту. Практичне завдання №3. Використайте для окремого фрагменту тексту і перегляньте роботу тег <font size=”+7” color=”red” face=”Arial”> текст </font>. Горизонтальна лінія (Horizontal Rule). Вона позначається тегом <hr>. відстань лінії від тексту можна збільшити, поставивши декілька тегів <br>один за одним. Наприклад: Заголовок <hr> <br> <br><br><br>. Крім того ви можете задати розташування горизонтальної лінії, її колір та товщину, якщо задасте атрибути: <hr align=”center” color=”blue” noshade size=”n” width=”n”>, де <hr align=”center”- вирівнювання по центру, що розміщує лінію по центру Right, left. color=” назва кольору” noshade size=”n” – об’ємна лінія товщиною n у пікселях width=”n”- ширина у пікселях. Практичне завдання №4 Відокремте різними лініями інформацію про місто, школу та захоплення на власній веб – сторінці. Поповніть свою сторінку новою інформацією, яку ви продумали вдома, використовуючи відомі теги. Не забувайте: крім виразного та яскравого оформлення текст повинен виділятися красою висловлення думки. Практичне завдання №5 Застосуйте теги кольору фону і тексту до своєї сторінки Перегляньте результат, проаналізуйте його. Спитайте думку вашого сусіда, що до кольору фона, та загального вигляду сторінки. Змініть те, що вас не влаштовує. Якщо ви справились із завданням, перегляньте план – опору, вирішіть для себе чи все ви засвоїли. Рейтинговий бланк Учня(ці) ....... класу ................................ (прізвище, ім’я) Засвоєння нового матеріалу Кожне пункт оцінюється за 10-ти бальною системою
Результати гри................................................................ Активність на уроці........................................................ Виконання практичного завдання №1............................. Виконання практичного завдання №2.......................... Виконання практичного завдання №3........................... Виконання практичного завдання №4.......................... Виконання практичного завдання №5........................... Активність при підведенні підсумків............................. Додаткові бали за створення „пам’ятки”......................
Тема: Створення списків засобами мови HTML. Мета: познайомити учнів із засобами створення списків, продовжувати формувати уміння та навички створення веб - документів. Розвивати вміння планувати роботу, творчий підхід створенні веб- сторінки. Виховувати культуру мислення. Використане обладнання: комп’ютер; дошка; картки з тегами;; картки із структурними тегами НТМl-документу; картки з тегами для створення списків; план-опора; бланк рейтингу.
Хід уроку Мотивація навчальної діяльності. Над чим ви працювали, готуючись до сьогоднішнього уроку? Вчили і повторювали теги. Доповнювали словники вивченими тегами. Крім того, ви повинні були підібрати матеріал, який би хотіли бачити у вигляді списків на своїй веб-сторінці. Списки дозволяють подати інформацію у впорядкованому вигляді. Для реалізації наших задумів необхідно познайомитись з тегами утворення списків. Це те чим ми займемося сьогодні на уроці. Повідомлення теми і мети уроку. Отже тема уроку: „Створення списків засобами мови HTML”. На уроці ви повинні: Розглянути різні види списків; Актуалізація опорних знань. Для виконання поставлених завдань необхідно повторити: Як створити веб-документ. [Подпись: Диференціація] Відповідь на перше питання дає один учень, клас слухає і виправляє або доповнює його відповідь в разі необхідності. ( краще викликати більш сильного учня, який вміє чітко висловити думку і зауважити головне) Наступна робота дає можливість проявити себе більш слабких учнів. Під час такої роботи другий учень готується відповісти на питання: „Структура веб-документу”, його завдання полягає в тому, щоб на дошці, в правильному порядку розташувати картки, на яких записані основні структурні теги. Третій учень – з набору карток із записаними на них різними тегами вибирає ті, що стосуються форматування, та розташовує їх на іншій частині дошці. Після обговорення відповіді першого учня клас переходить до перевірки результатів роботи, спочатку, другого, потім третього учнів. Таким чином всі питання повторені. Вивчення нового матеріалу, виконання практичної роботи. Питання до учнів, що мають досвід роботи по створенню веб- документів: [Подпись: Інтерактивне навчання: учень - учню] „Яким чином можна передати без змін на веб-сторінці текст, відформотований в McWord? Для вирішення даної проблеми в мові HTML існує засіб – контейнерні теги <pre>…</pre>. Цей контейнер дозволяє зберегти розбиття тексту на рядки, пропуски в середині, створені списки, то що. Спробуємо використати ці тегі для створення списків, за допомогою текстового редактора Блокнот. Практичне завдання № 1 За всіма правилами створіть новий HTML- документ (зразок структури на дошці і в плані - опорі ). Введіть підготовлену вами вдома інформацію у вигляді списків нумерованого та маркірованого, але не забувайте розташувати їх в межа контейнера <pre>…</pre>. Необхідно зауважити, що такий підхід має свої недоліки: Втрата гнучкості. Отже необхідність вивчення засобів створення списків залишається. Основні типи списків, які використовуються у Web: впорядкований (нумерований) і невпорядкований (маркірований). Впорядкований список створюється за допомогою контейнера <ol></ol>, у середині якого кожен елемент списку визначається за допомогою дескриптора<li> (від слів list item –елемент списку) Простий впорядкований список задається таким кодом: <li> перший елемент списку <li>другий елемент списку <li>третій елемент списку
</ol> У цьому випадку елементами списку є просто текстові рядки, але взагалі ними можуть бути будь-які елементи Веб-сторінки: текст. Зображення, гіперпосилання тощо. У впорядкованих списках за допомогою атрибута TYPE дескриптора <ol> можна вказати тип нумерації.: [Подпись: Використання наочності] < ol type=1> Стандартний спосіб нумерації за допомогою арабських цифр < ol type=a> Нумерація за допомогою малих букв алфавіту < ol type=A> Нумерація за допомогою великих букв алфавіту < ol type=I> Нумерація за допомогою римських цифр
Практичне завдання №2 У документі завдання№1 організувати списки за допомогою тег нумерації двох видів. Найбільш розповсюдженим типом списку, який використовується у Web, є невпорядкований або маркірований список. Коди маркірованих і нумерованих списків виглядають однаково, за виключенням того, що контейнер<ol></ol> для нумерованого списку замінюється на <ul></ul> для маркованого. Практичне завдання №3 Організувати маркірований список в поточному веб-документі, переглянути відображення броузера. Вкладені списки поєднують в собі елементи обох списків. Практичне завдання №4 1.Наберіть в поточному документі задане сполучення тег: ………………………… <H3> Типи зображень </H3> <ol> <li>Вбудовані <li>Плаваючі: <ul> <li> Вздовж лівого поля <li>Вздовж правого поля </ul> <li>Зображення-гіперпосилання <li>Зображення-мініатюри <li>Фонові зображення <ol> 2.Проаналізуйте вигляд списків у вікні броузера. Практичне завдання № 5 1.Створіть новий веб-документ під назвою „my plan.html”, який буде містити вкладений список ваших планів на майбутнє. Віднесіться до даної роботи серйозно, тому, що цей документ ми в майбутньому використаємо для створення гіперпосилань. Не забудьте про колір фону та тексту, про засоби форматування.
2.Перегляньте та проаналізуйте власну роботу. 5.Підведення підсумків. Перегляд робіт, виставлення балів за роботу на уроці. Обговорення проблем та їх вирішення, що виникли під час виконання практичних завдань. 6 Домашнє завдання. [Подпись: Диференціація] Вивчені теги занести до словника. Продумати матеріал, який вимагає організації таблиць, для роботи на наступному уроці. Учням, які мають досвід в роботі з мовою розмітки гіпертексту підготувати поради по створенню таблиць в допомогу учням - „новачкам” (найкращу використаємо на уроці ).
Для підготовки використайте таку літературу: «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с.44-45;
Схожі навчальні матеріали: | ||||||
| Всього коментарів: 0 | |