53347

Основні принципи будови та функціонування World Wide Web, протокол НТТР, адресація в мережі

Конспект урока

Педагогика и дидактика

Для учнів які мають уявлення про мову HTML: розшукати історичні відомості про мову НТМL. Але для того щоб створити Webсторінку необхідно знати мову гіпертекстової розмітки тобто HTML. Отже тема уроку: â€Створення структури HTML документа. На попередньому уроці учням було завдання відшукати історичну довідку про створення мови HTML.

Украинкский

2014-02-25

395.5 KB

0 чел.

Тема: Основні принципи будови та функціонування World Wide Web, протокол НТТР, адресація в мережі.

Мета: познайомити учнів з основними принципами будови та функціонування World Wide Web, протоколом НТTP, адресацією в мережі, розміщення інформації у WWW.

        Розвивати інтелект учнів, розширюючи їх знання про комп’ютерні технології;

        Виховувати культуру спілкування в колективі, вміння висловитись та вислухати.

Використане обладнання:

комп’ютери;

електронні приклади веб-документів;

таблиці з висновками;

плани-опори;

рейтингові бланки.

Хід уроку.

1.Актуалізація опорних знань.

Пригадаємо основні загальні питання технології Internet.

Мозкова атака:

Опираючись на свій досвід скажіть, які питання доцільно повторити по темі Інтернет.

Допомогти учням, направити їх в необхідне русло за допомогою схеми.

Схемою клієнт – провайдер -сервер-мережа, але назви цих об’єктів скриті. По мірі повторення  заповнити порожні комірки..

За яким принципом передаються дані в мережі Internet? (за протоколами) Пояснити за що відповідає кожний протокол.

Чому в мережі інформація потрапляє саме туди куди необхідно?

(Тому що вказується адреса за  всіма правилами).

Які програми спрощують наше спілкування  в Internet?   (Броузери)

2.Мотивація навчальної діяльності.

Для чого ви використовуєте Internet?

(Послухати відповіді)

Якщо серед відповідей виникне думка „розповісти світу про себе” наголосити на ній. Інакше підвести учнів до такої думки, звернувши увагу на те, що люди, які розташовують свою інформацію в Internet хочуть бути почутими, хочуть поділитися своїми думками, ідеями.

А ми зможемо це зробити? Звичайно зможемо, якщо отримаємо необхідний об’єм знань. І перш за все ми повинні познайомитися з принципами роботи служби World Wide Web, яка відповідає за представлення інформації в Internet.

Отже тема уроку: „Основні принципи будови та функціонування World Wide Web, протокол НЕЕР, адресація в мережі.”

 Сьогодні на уроці ми повинні дати відповіді на такі запитання:

  •  Що називають простором WEB?
  •  Що є основою існування логічного простору WWW?
  •  Як виникло світове павутиння WWW?
  •  Адреса гіпертекстового документа, який стандарт її підтримує?
  •  Що допомагає відобразити 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 і підключається до сервера;
  •  броузер звертається із запитом до сервера про надання необхідного документа;
  •  сервер визначає за запитом ім’я файла та шлях до нього;
  •  сервер відсилає знайдений файл документа на комп’ютер користувача;
  •  сервер розриває встановлене з’єднання;
  •  броузер інтерпретує наявні у прийнятому документі вказівки НТМL і згідно з ним відображає Web- сторінку у своєму вікні.

Висновок3: броузери допомагають відобразити інформацію.

Розглянемо  приклад: відкрийте    Web- сторінку нашої школи, що розташована на Робочому столі кожного комп’ютера. Передивіться її. Проаналізуйте вікно броузера так, як ми це робили з додатками Word, Excel.  Давайте обговоримо складові меню та панелей інструментів спираючись на ваш, уже достатній, досвід.

Висновок4: вікно броузера зручне для роботи, та має багато спільного з вікнами вже відомих додатків

4.Підсумки уроку

     Що ви запам’ятали із сьогоднішнього уроку?

     Передивіться план-опору і, спочатку кожний для себе, дайте відповіді на запитання в кінці плану опори, а потім обговоріть їх із сусідом. Підніміть руки у  кого в парі виникли суперечки що до відповідей на запитання. Давайте обговоримо це разом. Виставте один одному бали за засвоєння матеріалу в рейтинговому бланку.  Вартість правильної відповіді на одне запитання -„5”. Бал за засвоєння теми –це середнє арифметичне всіх виставлених балів.

    На наступному уроці вчитель проводить бліц-тест, після чого підтверджує або коректує виставлені рейтинги, мотивуючи зміни.

5 Домашнє завдання

    Вивчити основні поняття та принципи організації WWW.

   Підібрати цікаву інформацію про WWW.

  Для учнів, які мають уявлення про мову HTML: розшукати історичні відомості про мову НТМL.

Для підготовки використайте таку літературу:

  •  «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с13-18;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 338-346.


План –опора до теми

„Основні принципи будови та функціонування World Wide Web, протоколи TCP/IP, адресація в мережі.

Я повинен засвоїти:

Що називають простором WEB?

  •  Що є основою існування логічного простору WWW?
  •  Як виникло світове павутиння WWW?
  •  Адреса гіпертекстового документа, який стандарт її підтримує?
  •  Що допомагає відобразити  Web- сторінку
  •  

Простором Web називають обширну сукупність Web- документів, між якими існують гіпертекстові зв’язки.

Web- сторінками називають окремі документи, які складають простір Web.

 Web- сервер  –це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web- сторінок; це програмне забезпечення також називають Web – сервером.

     Поняття ”гіпертекст” з’явилося у середині ХХ ст..Теоретичною основи гіпертексту сформульовані В.Бушем(1945р.) в у роботі „ Як ми  могли б мислити” У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали „гіпертекст”.

Адреса будь-якого ресурсу в WWW записується відповідно до стандарту URL( Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат: Протокол: //доменне ім’я / каталог/файл

Web- броузери взаємодіють із  Web- серверами за протоколом прикладного рівня НТТР (протокол передавання гіпертексту).

Для відкриття документа у вікні броузера виконуються наступні дії:

  •  броузер декодує заданий URL і підключається до сервера;
  •  броузер звертається із запитом до сервера про надання необхідного документа;
  •  сервер визначає за запитом ім’я файла та шлях до нього;
  •  сервер відсилає знайдений файл документа на комп’ютер користувача;
  •  сервер розриває встановлене з’єднання;
  •  броузер інтерпретує наявні у прийнятому документі вказівки НТМL і згідно з ним відображає Web- сторінку у своєму вікні.

Підсумкові питання:

Яку мережу називаютьInternet?

Для чого використовуються протоколи ТСР/ІР?

Що називається веб-сторінкою?

Що називається веб-сайтом?

За якими правилами записується URL- документ?

Для чого призначений броузер?


Тема:  Вступ у НТМl. Створення структури НТМl документа. Знайомство з Web-редактором.

Мета: знайомити учнів з основними поняттями та конструкціями мови НТМl,  почати

          формувати вміння та навички створення НТМl-документа.

           Розвивати пізнавальний інтерес, учнів творче ставлення до роботи.

           Виховувати культуру спілкування в колективі учнів.

Використане обладнання:

комп’ютер;

тестова оболонка з тестом;

дошка;

таблиці з  основними поняттями;

таблиця із структурою НТМl-документу;

план-опора;

бланк рейтингу.

                                   Хід уроку

1.Актуалізація опорних знань. Перевірка вивченого матеріалу.

        Для підтвердження балів, які ви поставили один одному за засвоєння попереднього матеріалу проведемо бліц-тест . Відкривши тестову оболонку Super Test запустіть тест під назвою WWW1і дайте відповіді на питання. ( Як користуватися даним тестом учні знають бо не вже раз його використовували).

   Питання тесту (їх кількість невелика, розглянуті основні загальні питання).

1.Броузери (наприклад, Microsoft Internet Explorer) є:

  1.  серверами Інтернету
  2.  антивірусними програмами;
  3.  

трансляторами мови програмування:

  1.  засобами перегляду веб-сторінок.

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.Поняття гіпертекст  вперше виникло:

  1.  60-х роках 18ст.;
  2.  60-х роках 20-го ст..;
  3.  у 45-му році 20-го ст..

5.WЕВ-сервери цце:

  1.   спеціалізовані комп’ютери з відповідним програмним забезпеченням;
  2.  сукупність WЕВ- сторінок;
  3.  організація-постачальник відповідних послуг.

6.Протокол передавання гіпертекстових документів це:

  1.  FTR;
  2.  HTTP;
  3.  Mailto.

Тест виводить оцінку за знання матеріалу. Учитель порівнює попередній бал ( з минулого уроку) і підтверджує  його або  змінює, пояснюючи учню причини зміни балу.

 Пояснення: рейтингові бали вчитель сам виставляє учню за кожний етап  протягом уроку.

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.  Запустити текстовий редактор Блокнот.
  2.  Ввести текст HTML- документа.
  3.  Зберегти під деяким іменем з розширенням *. Html. При збереженні. У вікні „Сохранение документа» слід поміняти тип файла з „Текстовые документи» на «все файлы» інакше редактор у кінець назви файла автоматично додасть розширення.txt
  4.  Запустити програму Internet Explorer.
  5.  За допомогою меню „Файл –Открыть” відкрити створений файл.

Практичне завдання № 1

  1.  Створити на диску С в каталозі (папці) Інформатика власну папку під назвою з вашим прізвищем записаним Англійськими буквами.
  2.  

Виконайте всі пункти створення заготовки веб-сторінки. В тілі сторінки наберіть інформацію про себе за зразком: „Привіт!  Я Іванова Катерина. Проживаю  у місті Ніжині. Навчаюся в ЗОШ І-ІІІ ст. № 15. „

  1.  Збережіть документ під іменем „Index.html за правилами створення HTML- документу.

Відкрийте збережений документ через „Мій комп’ютер” із вашої папки.

Ви побачите відображення вашої веб-сторінки броузером.

    Для того,щоб потрапити до редакційного вікна HTML- документу необхідно в меню вибрати команду „ Вид- Источник”.

   Для того щоб розташування тексту в документі було таким. Як ви бажаєте  необхідно познайомитись ще з деякими тегами.

  Практичне завдання № 2.

Розділимо текст на параграфи.

Як розбити текст на параграфи?. Поставте тегу <p> перед початком параграфа. Коли програма перегляду знайде цю тегу, вона сама виставить перед початком параграфа порожній рядок. Перегляньте приклад.

      Розташуємо фразу” Привіт!  Я Іванова Катерина” по центру. Для цього застосуйте  тегу вирівнювання < P ALIGN=CENTER> для вирівнювання  праворуч -< P ALIGN=RIGHT>, ліворуч - < P ALIGN=LEFT>.

Якщо вас не задовольняє відстань тексту від лівого краю і ви бажаєте зробити „червоний рядок”, то після тега <p> вставте символи. &nbsp, що позначають пробіл. Приклад:

<p>&nbsp; &nbsp; &nbsp;

      Покажіть зроблену роботу вчителю.

Для виділення логічних частин тексту використовують заголовки (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> Мої друзі навчаються зі мною в одному класі.</р>

<br>

<hr>

</BODY>

</HTML>

    Збережіть зміни в документі. Поновіть інформацію у вікні броузера. Вам подобається те, що ви одержали? Якщо ні, то проекспериментуйте із вирівнюванням та заголовками і виберіть найбільш естетичний варіант. Обов’язково покажіть свої досягнення вчителю.

5.Підведення підсумків

Передивитися утворені сторінки. Визначити найбільш вдалі.

Виставити бали до рейтингової картки.

Ще раз повторити деякі моменти:

Які поняття мови розмітки гіпертексту ви запам’ятали?

Які програми допомогли нам в роботі по створенню HTML- документу?

Що ви навчилися робити на сьогоднішньому уроці?

6. Домашнє завдання

Вивчити основні поняття і теги.

Записати вивчені теги до НТМL- словника (завести невеличкий блокнот ).

Продумати інформацію, яку ви бажаєте розташувати на своїй сторінці.

Учням, які мають досвід в роботі з мовою розмітки гіпертексту підготувати               „ пам’ятки”  в допомогу учням - „новачкам” з теми „ТЕГИ .

Для підготовки використайте таку літературу:

  •  «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с18-22;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 376-381.

Урок №3. Тема Введення, елементи форматування тексту, поділ тексту на логічні частини.

Мета познайомити учнів з елементами форматування тексту веб-документу;   

        продовжувати формувати вміння та навички створення веб-сторінок.;

        розвивати дизайнерські здібності учнів, вміння планувати свою роботу;

        виховувати культуру представлення інформації.

Використане обладнання:

комп’ютер;

дошка;пам’ятки з теми підготовлені учнями;

таблиці з  основними поняттями, термінами;

таблиця із структурою НТМl-документу;

план-опора;

бланк рейтингу.

                                   

                            Хід уроку.

1 Актуалізація опорних знань.

Гра „ Знайомі поняття WWW”:

Гра полягає у виборі понять, які стосуються безпосередньо WWW.

     Учні отримують картки трьох кольорів: червоного, жовтого та зеленого. Почувши термін, що стосується WWW, учні повинні підняти картку зеленого кольору, термін, що не стосується заданої теми, але має відношення до теми Інтернету відмічається жовтим кольором, поняття, що взагалі не мають відношення до мережних понять відмічаються червоним кольором.

Набір термінів і понять записаний на картках великого розміру (щоб учні сприймали інформацію не тільки на слух але й зором) може бути таким:

Сервер

Провайдер

Тега

Атрибут

веб-сервер

протокол НТТР

Program

ТІТLЕ

BODY

Microsoft

WWW

Word

Програма Блокнот (пояснити,як саме  і де використовується ця програма)

Case of

Left

протокол ТСР/ІР

Right

Center

Excel

Align

Begin

Дескриптор

Access

Гіпертекст

Internet Explorer

H5

P

record

BR


   У класі є учні, що мають певний досвід в роботі з HTML двох з них запрошую до лічильної групи, яка виставляє кількість правильних відповідей кожному учню, та повідомляють результати гри ( учитель заздалегідь домовився, що повідомлення результатів буде емоційним, де інтонація передасть настрій відповідний до результатів.)

2.Мотивація навчальної діяльності

  Погодьтеся, що  повідомлення результатів було достатньо емоційним, і ми всі зрозуміли наскільки вдалими, або навпаки, були відповіді кожного з вас. Емоції лічильної групи передавалися за допомогою інтонації.  У повсякденному житті, коли ви з ким–не будь розмовляєте, то обов’язково виділяєте інтонацією ті чи інші слова. Таким чином ви показуєте співрозмовнику, на що необхідно звернути увагу. Письмова мова позбавлена інтонаційного забарвлення, але є можливість використовувати різні способи виділення слів, то б то форматувати текст. Сьогодні ми навчимося це робити засобами мови  HTML.

3.Повідомлення теми та завдань уроку.

Тож тема уроку звучить так: „ Форматування тексту. Поділ тексту на логічні частини”.

Завдання уроку:

  •  Познайомитися з деякими засобами мови  HTML форматування тексту;
  •  Навчитися використовувати відповідні тегі для зміни вигляду тексту за допомогою окремих вправ;
  •  Доповнити та відформатувати  власну веб-сторінку.

3. Виклад нового матеріалу, виконання практичних вправ.

Перед викладенням нового матеріалу деяким учням роздати підготовлені іншими учнями „пам’ятки”. В кінці уроку проаналізувати, наскільки ці пам’ятки допомогли у роботі.

Фрагмент тексту можна виділити напівжирним шрифтом (Bold).для цього необхідно використати теги <B> текст </B>.

Окремі слова можна підкреслити за допомогою теги <u> текст </u>.

Часто використовують курсив за допомогою тег <i> текст </i>.

Не забувайте закривати дані дескриптори, інакше ви виділите весь текст, а не окремі його частини, як ви планували.

 Можна примусити текст „мигать”, але таким виділенням треба користуватися дуже обережно, бо навряд ви станете читати довге послання, якщо всі його слова мигатимуть. Якщо ви хочете одночасно задати текст напівжирним шрифтом і курсивом, надрукуйте наступне: <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=”redface=”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;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 381-384.


План опора з теми

Введення, елементи форматування тексту, поділ тексту на логічні частини.

Завдання уроку:

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=”redface=”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

Застосуйте теги кольору фону і тексту до своєї сторінки

Перегляньте результат,  проаналізуйте його. Спитайте думку вашого сусіда, що до кольору фона, та загального вигляду сторінки. Змініть те, що вас не влаштовує.

Якщо ви справились із завданням, перегляньте план – опору,  вирішіть для себе чи все ви засвоїли.

Тема:  Створення списків засобами мови HTML.

 Мета: познайомити учнів із засобами створення списків, продовжувати формувати уміння та навички  створення веб - документів.

Розвивати вміння планувати роботу, творчий підхід створенні веб- сторінки.

Виховувати  культуру мислення.

Використане обладнання:

комп’ютер;

дошка;

картки з тегами;;

картки із структурними тегами НТМl-документу;

картки з тегами для створення списків;

план-опора;

бланк рейтингу.

Хід уроку

  1.  Мотивація навчальної діяльності.

Над чим ви працювали, готуючись до сьогоднішнього уроку?

Вчили і повторювали теги. Доповнювали словники вивченими тегами.

Крім того, ви повинні були підібрати матеріал, який би  хотіли бачити у вигляді списків на своїй веб-сторінці. Списки дозволяють подати інформацію у впорядкованому вигляді. Для реалізації наших задумів необхідно познайомитись з тегами утворення списків.  Це те чим ми займемося сьогодні на уроці.

  1.  Повідомлення теми і  мети уроку.

Отже тема уроку: „Створення списків засобами мови HTML”. На уроці ви повинні:

  •  Розглянути різні види списків;
    •  навчитися використовувати теги утворення списків
    •  створити нову веб-сторінку, з використанням списків.
  1.   Актуалізація опорних знань.

Для виконання поставлених завдань необхідно повторити:

  •  Як створити веб-документ.
    •  Яку структуру має веб-документ.
    •  Теги форматування веб- сторінок.

Відповідь на перше питання дає один учень, клас слухає і виправляє або доповнює  його відповідь в разі необхідності. ( краще викликати більш сильного учня, який вміє чітко висловити думку і зауважити головне)

Наступна робота дає можливість проявити себе більш слабких учнів.

Під час такої роботи другий учень готується відповісти на питання: „Структура веб-документу”, його завдання полягає в тому, щоб на дошці, в правильному порядку розташувати картки, на яких записані основні структурні теги.

Третій учень – з набору карток із записаними на них різними тегами вибирає ті, що стосуються форматування, та розташовує їх на іншій частині дошці.

Після обговорення відповіді першого учня клас переходить до перевірки результатів роботи, спочатку, другого, потім третього учнів. Таким чином всі питання повторені.

  1.  Вивчення нового матеріалу, виконання практичної роботи.

Питання до учнів, що мають досвід  роботи по створенню веб- документів:  

„Яким чином можна передати без змін  на веб-сторінці текст, відформотований в McWord?

Для вирішення даної проблеми в мові HTML  існує засіб – контейнерні теги <pre>…</pre>. Цей контейнер дозволяє зберегти розбиття тексту на рядки, пропуски в середині,  створені списки, то що.

Спробуємо використати ці тегі для створення списків, за допомогою текстового редактора Блокнот.

Практичне завдання № 1

За всіма правилами створіть новий HTML- документ  (зразок структури на дошці і в плані - опорі ). Введіть підготовлену вами  вдома інформацію у вигляді списків нумерованого та маркірованого, але не забувайте розташувати їх в межа контейнера <pre>…</pre>.

Необхідно зауважити, що такий підхід має свої недоліки:

  1.  Втрата гнучкості.
  2.  Броузери зазвичай виділяють заздалегідь відформотований текст із допомогою моноширинного шрифту, що приводить до того, що довгі фрагменти тексту зливаються.

Отже необхідність вивчення засобів створення списків  залишається.

Основні типи списків, які використовуються у 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;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 384-386.


План –опора по темі

Створення списків засобами мови HTML.

  Завдання уроку:

  •  Розглянути різні види списків;
    •  навчитися використовувати теги утворення списків
    •  створити нову веб-сторінку, з використанням списків

Практичне завдання № 1

За всіма правилами створіть новий HTML- документ  (зразок структури на дошці і в плані - опорі ). Введіть підготовлену вами  вдома інформацію у вигляді списків нумерованого та маркірованого, але не забувайте розташувати їх в межа контейнера <pre>…</pre>.

Простий впорядкований список задається таким кодом:

    <ol>

    <li> перший елемент списку

    <li>другий елемент списку

    <li>третій елемент списку

    </ol>

< ol type=1>

Стандартний спосіб нумерації за допомогою арабських цифр

< ol type=a>

Нумерація за допомогою малих букв алфавіту

< ol type=A>

Нумерація за допомогою великих букв алфавіту

< ol type=I>

Нумерація за допомогою римських цифр

Практичне завдання №2

У документі завдання№1 організувати списки за допомогою тег нумерації двох видів.

  Коди маркірованих    <ul></ul>.

Практичне завдання №3 

Організувати маркірований список в поточному веб-документі, переглянути відображення броузера.

 Вкладені списки поєднують в собі елементи обох списків.

Практичне завдання №4

Наберіть в поточному документі задане сполучення тег:

…………………………

   <H3> Типи зображень </H3>

<ol>

      <li>Вбудовані

       <li>Плаваючі:

                 <ul>

                           <li>  Вздовж лівого поля

                             <li>Вздовж правого поля

                  </ul>

      <li>Зображення-гіперпосилання

      <li>Зображення-мініатюри

       <li>Фонові зображення

<ol>

Проаналізуйте вигляд списків у вікні броузера.

Практичне завдання № 5

Створіть новий веб-документ, який буде містити вкладений список ваших захоплень. Віднесіться до даної роботи серйозно, тому, що цей документ ми в майбутньому використаємо для створення гіперпосилань. Не забудьте про колір фону та тексту, про засоби форматування.

Тема:  Створення списків засобами мови HTML.

 Мета: познайомити учнів із засобами створення списків, продовжувати формувати уміння та навички  створення веб - документів.

Розвивати вміння планувати роботу, творчий підхід створенні веб- сторінки.

Виховувати  культуру мислення.

Використане обладнання:

комп’ютер;

дошка;

картки з тегами;;

картки із структурними тегами НТМl-документу;

картки з тегами для створення списків;

план-опора;

бланк рейтингу.

Хід уроку

  1.  Мотивація навчальної діяльності.

Над чим ви працювали, готуючись до сьогоднішнього уроку?

Вчили і повторювали теги. Доповнювали словники вивченими тегами.

Крім того, ви повинні були підібрати матеріал, який би  хотіли бачити у вигляді списків на своїй веб-сторінці. Списки дозволяють подати інформацію у впорядкованому вигляді. Для реалізації наших задумів необхідно познайомитись з тегами утворення списків.  Це те чим ми займемося сьогодні на уроці.

  1.  Повідомлення теми і  мети уроку.

Отже тема уроку: „Створення списків засобами мови HTML”. На уроці ви повинні:

  •  Розглянути різні види списків;
    •  навчитися використовувати теги утворення списків
    •  створити нову веб-сторінку, з використанням списків.
  1.   Актуалізація опорних знань.

Для виконання поставлених завдань необхідно повторити:

  •  Як створити веб-документ.
    •  Яку структуру має веб-документ.
    •  Теги форматування веб- сторінок.

Відповідь на перше питання дає один учень, клас слухає і виправляє або доповнює  його відповідь в разі необхідності. ( краще викликати більш сильного учня, який вміє чітко висловити думку і зауважити головне)

Наступна робота дає можливість проявити себе більш слабких учнів.

Під час такої роботи другий учень готується відповісти на питання: „Структура веб-документу”, його завдання полягає в тому, щоб на дошці, в правильному порядку розташувати картки, на яких записані основні структурні теги.

Третій учень – з набору карток із записаними на них різними тегами вибирає ті, що стосуються форматування, та розташовує їх на іншій частині дошці.

Після обговорення відповіді першого учня клас переходить до перевірки результатів роботи, спочатку, другого, потім третього учнів. Таким чином всі питання повторені.

  1.  Вивчення нового матеріалу, виконання практичної роботи.

Питання до учнів, що мають досвід  роботи по створенню веб- документів:  

„Яким чином можна передати без змін  на веб-сторінці текст, відформотований в McWord?

Для вирішення даної проблеми в мові HTML  існує засіб – контейнерні теги <pre>…</pre>. Цей контейнер дозволяє зберегти розбиття тексту на рядки, пропуски в середині,  створені списки, то що.

Спробуємо використати ці тегі для створення списків, за допомогою текстового редактора Блокнот.

Практичне завдання № 1

За всіма правилами створіть новий HTML- документ  (зразок структури на дошці і в плані - опорі ). Введіть підготовлену вами  вдома інформацію у вигляді списків нумерованого та маркірованого, але не забувайте розташувати їх в межа контейнера <pre>…</pre>.

Необхідно зауважити, що такий підхід має свої недоліки:

  1.  Втрата гнучкості.
  2.  Броузери зазвичай виділяють заздалегідь відформотований текст із допомогою моноширинного шрифту, що приводить до того, що довгі фрагменти тексту зливаються.

Отже необхідність вивчення засобів створення списків  залишається.

Основні типи списків, які використовуються у 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;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 384-386.


План –опора по темі

Створення списків засобами мови HTML.

  Завдання уроку:

  •  Розглянути різні види списків;
    •  навчитися використовувати теги утворення списків
    •  створити нову веб-сторінку, з використанням списків

Практичне завдання № 1

За всіма правилами створіть новий HTML- документ  (зразок структури на дошці і в плані - опорі ). Введіть підготовлену вами  вдома інформацію у вигляді списків нумерованого та маркірованого, але не забувайте розташувати їх в межа контейнера <pre>…</pre>.

Простий впорядкований список задається таким кодом:

    <ol>

    <li> перший елемент списку

    <li>другий елемент списку

    <li>третій елемент списку

    </ol>

< ol type=1>

Стандартний спосіб нумерації за допомогою арабських цифр

< ol type=a>

Нумерація за допомогою малих букв алфавіту

< ol type=A>

Нумерація за допомогою великих букв алфавіту

< ol type=I>

Нумерація за допомогою римських цифр

Практичне завдання №2

У документі завдання№1 організувати списки за допомогою тег нумерації двох видів.

  Коди маркірованих    <ul></ul>.

Практичне завдання №3 

Організувати маркірований список в поточному веб-документі, переглянути відображення броузера.

 Вкладені списки поєднують в собі елементи обох списків.

Практичне завдання №4

Наберіть в поточному документі задане сполучення тег:

…………………………

   <H3> Типи зображень </H3>

<ol>

      <li>Вбудовані

       <li>Плаваючі:

                 <ul>

                           <li>  Вздовж лівого поля

                             <li>Вздовж правого поля

                  </ul>

      <li>Зображення-гіперпосилання

      <li>Зображення-мініатюри

       <li>Фонові зображення

<ol>

Проаналізуйте вигляд списків у вікні броузера.

Практичне завдання № 5

Створіть новий веб-документ, який буде містити вкладений список ваших захоплень. Віднесіться до даної роботи серйозно, тому, що цей документ ми в майбутньому використаємо для створення гіперпосилань. Не забудьте про колір фону та тексту, про засоби форматування.

Тема: Таблиці в HTML.

Мета познайомити учнів з тегами створення таблиць у  веб-документі;   продовжувати  формувати вміння та навички створення НТМl-документа.

           Розвивати пізнавальний інтерес. дизайнерські здібності учнів, вміння планувати  свою роботу.         

           Виховувати культуру подання інформації.

Використане обладнання:

комп’ютер;

дошка;

картки з назвами тег та атрибутів для інформаційного диктанту;

таблиця із структурою  НТМl-документу;

картки з тегами для створення списків;

дискети; маркери для дошки чорний і синій;

план-опора;

бланк рейтингу.

Хід уроку.

  1.  Актуалізація опорних знань.

Інформаційний диктант: „ Повторення призначення відомих тег”. Учитель демонструє і називає тег або атрибут, учні записують їхнє призначення

Завдання: записати призначення тег:

  1.  Html
  2.  Br
  3.  Hr
  4.  Title
  5.  Color
  6.  Head
  7.  Body
  8.  Ol, li
  9.  Bgcolor
  10.  Font
  11.  

Align=”right”

  1.  H5

Відповіді на поставлені запитання учні записують у вікні текстового редактора і зберігають на дискетах. Після цього обмінюються дискетами та перевіряють один одного. Наступний крок  - обговорюємо правильні відповіді і виставляємо оцінки. Учитель фіксує оцінки кожного учня на спеціальних бланках( бланки з оцінками будуть використані в подальшій роботі на уроці).

  Завдання: представте результати перевірки інформаційного диктанту у вигляді таблиці створену засобами мови HTML.

Учні, що не мають досвіду  роботи з мовою HTML обов’язково заявлять про те,що вони не вміють цього робити. Таким чином виникає до необхідність вивчення теми: „ Створення таблиць мовою HTML

  1.  Мотивація навчальної діяльності.

Часто виникає необхідність подати дані на веб-сторінці у вигляді таблиці. У HTML-таблицях можуть міститися елементи будь-якого типу. З їх допомогою можна ефективніше розмістити на сторінці текст і графіку, а також створити чітку структуру веб-сторінки.  Тому виникає необхідність вивчення засобів створення таблиць на мові HTML.

  1.  Повідомлення теми і постановка завдань уроку.

Отже тема уроку: „Таблиці в HTML”.

На уроці ми повинні розглянути таблиці різних видів та вивчити теги створення таблиць. По мірі вивчення тег учитель записує їх на дошці виділяючи кольором теги - чорним, атрибути – синім.

  1.  Вивчення нової теми, виконання практичних завдань.

Перед створенням таблиці необхідно визначити максимальну кількість рядків та стовпців. Код таблиці міститься у контейнері <TABLE>...</TABLE>.кожна пара дескрипторів <TR>…</TR> визначає один рядок таблиці. Дані окремих комірок поміщуються у контейнер <TD>…</TD> (закриваючий дескриптор не </TD> є обов’язковим.

Однією з характеристик таблиці є рамка. Для побудови таблиці з рамкою треба задати товщину рамки за допомогою атрибута BORDER дескриптора <TABLE>. Формат атрибута: BORDER=n, де n – товщина рамки у пікселях.

Практичне завдання №1.

Створити документ під назвою REZULTAT.html, що містить таблицю з результатами проведення інформаційного диктанту за шаблоном:

<TABLE border>

<TR><TH> Прізвище, ім’я < /TH> <TH> Результат в балах</TH></TR>

<TR><TD> Батюк Олександр < /TD> <TD> 8 </TD></TR>

<TR><TD> Будзинський Олексій < /TD> <TD> 9 </TD></TR>

<TR><TD> Берднікова Олена < /TD> <TD> 12</TD></TR>

і т.д.. 

</TABLE>

Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега <TH>.

Крім того ширина стовпців таблиці дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна броузера, а її вміст відображається гарнітурою Times New Roman. Текст у комірках заголовка вирівнюється по центру, а в інших комірках – по лівій межі. Щоб змінити ці установки за умовчанням, використовують різні атрибути.

 Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках. Приклад:<TABLE Width =”40%”>

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці. <TABLE border= 5> - задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше 1 пікселю.

Практичне завдання №2

Змініть вигляд таблиці у файлі REZULTAT.html, використовуючи розглянуті атрибути. Збережіть зміни.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах <TR><TD>.

Align – вирівнюють вміст у комірках і вводиться в теги<TR> або<TD>. Як ви вважаєте, яки значень може набувати цей атрибут. Учні назвуть: left, center, right. Крім того існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Valign – вирівнювання вмісту по вертикалі. Цей атрибут застосовується з такими значеннями: top( вирівнювання по верхньому краю комірки), bottom  (по нижньому краю), middle (центрування по вертикалі). Приклад застосування: <TR Valign =” middle”>.

Практичне завдання№3

Застосуйте розглянуті атрибути у файлі REZULTAT.html та  змініть вигляд таблиці, Збережіть зміни. Проаналізуйте свою роботу.

Вигляд таблиці був би привабливіше, якщо ви застосуєте колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується  <TR>,<TH>,<TD>,<TABLE>

Bordercolor – колір рамок таблиці. Якщо  цей атрибут вставити у тег  <TABLE>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута Border. Якщо  ж потрібно задати колір лише визначених комірок, атрибут Bordercolor  розташовуємо  в тегах <TR>,<TH>,<TD>. Наприклад, тег г<TR Bordercolor=”FF0000” > задає червоні межі всіх комірок рядка.

Практичне завдання № 4.

Застосуйте розглянуті атрибути у файлі REZULTAT.html та  змініть вигляд таблиці, Збережіть зміни. Проаналізуйте свою роботу.

У мові HTML передбачена можливість об’єднання суміжних комірок. Для цього в початкових тегах <TH> або <TD> застосовуються такі атрибути.

Об’єднання комірок у таблицях

Rowspan –об’єднує комірки суміжних рядків. Значення атрибута задає кількість об’єднаних комірок. Наприклад, початковий тег комірки <TD Rowspan=2 > встановлює об’єднання двох комірок суміжних стовпців.

Colspan – об’єднує комірки суміжних стовпців. Наприклад, <TD Colspan =3 > формує одну комірку даних із трьох комірок суміжних стовпців.

Якщо застосувати водночас обидва атрибути Rowspan і Colspan отримаємо об’єднану комірку із суміжних рядків і стовпців. Наприклад тег <TD Rowspan=2 Colspan =4 > задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

Практичне завдання №5.

Створіть документ під назвою zahoplennia moey rodunu.html. Захоплення родини представте у вигляді таблиці з об’єднаними комірками за  зразком ( продумайте  і виберіть гармонійні кольори ): <html>

<head>

<title>  Захоплення моєї сім’ї</title>

</head>

<body bgcolor=”cococo” text=”800080” >

   <h2> Захоплення  моєї родини </h2>

<TABLE border=5 Bordercolor=”ff00000”  Bgcolor=”00ffff…” >

<TR><TH> Член сім’ї </TH> <TH> Захоплення</TH></TR>

<TR><TD Rowspan=3 > батько </TD> <TD> риболовля </TD></TR>

<TR><TD> шахи </TD> </TR>

<TR><TD> волейбол </TD> </TR>

<TR><TD Rowspan=3 > мати </TD> <TD> готувати </TD></TR>

<TR><TD> вишивати </TD> </TR>

<TR><TD> ходити по магазинах </TD> </TR>

<TR><TD Rowspan=4 > я-їхній син </TD> <TD> читати </TD></TR>

<TR><TD> футбол </TD> </TR>

<TR><TD> комп’ютерні ігри </TD> </TR>

<TR><TD> риболовля </TD> </TR>

<TR><TD Colspan =2> <i>  Ми цікаво проводимо час разом </I ></TD> </TR>

</TABLE>

</body>

</html>

Проаналізуйте результати роботи.

  1.  Підведення підсумків уроків.

 

Чи ми займалися сьогодні на уроці?

Які теги ви запам’ятали?

Які параметри таблиці задані по умовчанню ( пригадайте виконання першого завдання).

Як задати ширину таблиці?

Якими атрибутами задаються товщина і колір рамок таблиці?

Чи важливо, щоб  кольори гармоніювали один з одним? Чому?

  1.  Домашнє завдання.

Створіть пам’ятку для роботи з таблицями.

Запишіть нові теги до словника та повторіть попередні.

Учням, що мають комп’ютери вдома підібрати і принести в електронному вигляді цікаві малюнки для  сторінок ( про сім’ю, спорт, улюблених тварин тощо)               

Для підготовки використайте таку літературу:

  •  «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с.46-49;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 394-397.


План – опора по темі:
Таблиці в HTML.

Завдання уроку:

  1.  розглянути таблиці різних видів
    1.  вивчити тегі створення таблиць.
    2.  Навчитися застосовувати їх  на практиці

Код таблиці міститься у контейнері <TABLE>...</TABLE>.

<TR>…</TR> визначає один рядок таблиці.

Дані окремих комірок поміщуються у контейнер <TD>…</TD> (закриваючий дескриптор не </TD> є обов’язковим).

Практичне завдання №1

Створити документ під назвою REZULTAT.html, що містить таблицю з результатами проведення інформаційного диктанту за шаблоном:

<TABLE border>

<TR><TH> Прізвище, ім’я < /TH> <TH> Результат в балах</TH></TR>

<TR><TD> Батюк Олександр < /TD> <TD> 8 </TD></TR>

<TR><TD> Будзинський Олексій < /TD> <TD> 9 </TD></TR>

<TR><TD> Берднікова Олена < /TD> <TD> 12</TD></TR>

і т.д.. 

</TABLE>

Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега <TH>.

 Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках. Приклад:<TABLE Width =”40%”>

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці. <TABLE border= 5> - задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше 1 пікселю.

Практичне завдання №2

Змініть вигляд таблиці у файлі REZULTAT.html, використовуючи розглянуті атрибути. Збережіть зміни.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах <TR><TD>.

Align – вирівнюють вміст у комірках і вводиться в теги<TR> або<TD>.  Існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Valign – вирівнювання вмісту по вертикалі.

 top( вирівнювання по верхньому краю комірки)

 bottom  (по нижньому краю)

 middle (центрування по вертикалі).

Приклад застосування: <TR Valign =” middle”>.

Практичне завдання№3

Застосуйте розглянуті атрибути у файлі REZULTAT.html та  змініть вигляд таблиці, Збережіть зміни. Проаналізуйте свою роботу.

Вигляд таблиці був би привабливіше, якщо ви застосуєте колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується  <TR>,<TH>,<TD>,<TABLE>

Bordercolor – колір рамок таблиці. Наприклад, тег г<TR Bordercolor=”FF0000” > задає червоні межі всіх комірок рядка.

Практичне завдання № 4.

Застосуйте розглянуті атрибути у файлі REZULTAT.html та  змініть вигляд таблиці, Збережіть зміни. Проаналізуйте свою роботу.

Об’єднання комірок у таблицях

Rowspan –об’єднує комірки суміжних рядків.. Наприклад, початковий тег комірки <TD Rowspan=2 > встановлює об’єднання двох комірок суміжних стовпців.

Colspan – об’єднує комірки суміжних стовпців. Наприклад, <TD Colspan =3 > формує одну комірку даних із трьох комірок суміжних стовпців.

Якщо застосувати водночас обидва атрибути Rowspan і Colspan отримаємо об’єднану комірку із суміжних рядків і стовпців. Наприклад тег <TD Rowspan=2 Colspan =4 > задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

Практичне завдання №5.

Створіть документ під назвою zahoplennia moey rodunu.html. Захоплення родини представте у вигляді таблиці з об’єднаними комірками за  зразком ( продумайте  і виберіть гармонійні кольори ): <html>

<head>

<title>  Захоплення моєї сім’ї</title>

</head>

<body bgcolor=”cococo” text=”800080” >

   <h2> Захоплення  моєї родини </h2>

<TABLE border=5 Bordercolor=”ff00000”  Bgcolor=”00ffff…” >

<TR><TH> Член сім’ї </TH> <TH> Захоплення</TH></TR>

<TR><TD Rowspan=3 > батько </TD> <TD> риболовля </TD></TR>

<TR><TD> шахи </TD> </TR>

<TR><TD> волейбол </TD> </TR>

<TR><TD Rowspan=3 > мати </TD> <TD> готувати </TD></TR>

<TR><TD> вишивати </TD> </TR>

<TR><TD> ходити по магазинах </TD> </TR>

<TR><TD Rowspan=4 > я-їхній син </TD> <TD> читати </TD></TR>

<TR><TD> футбол </TD> </TR>

<TR><TD> комп’ютерні ігри </TD> </TR>

<TR><TD> риболовля </TD> </TR>

<TR><TD Colspan =2> <i>  Ми цікаво проводимо час разом </I ></TD> </TR>

</TABLE>

</body>

</html>

Тема: Вставка графічних зображень в HTML- документ.

Мета: познайомити учнів із тегами вставки графіки до веб-сторінок; вчити учнів                                                                                                                                                                                                                                               використовувати графічні зображення для оформлення HTML- документів.

         Розвивати творчий підхід до роботи з мовою HTML, логічне мислення,  здібності оригінального представлення інформації.

Виховувати естетичність та культуру представлення інформації.

Використане обладнання:

Комп’ютери;

план-опора;

таблиця атрибутів;

картки з тегами;

дискети;

таблиця з критеріями оцінювання.

Хід уроку

  1.  Перевірка домашнього завдання. Актуалізація опорних знань.

Робота в групах.

І- ша група    „Знавців” знайомиться та аналізує підготовлені іншими учнями пам’ятки для роботи з таблицями за відповідними критеріями. Максимальна кількість балів – 5.

№п/п

Прізвище учня

Навчальний об’єм

Послідовність

Викладення

інформації

Чіткість

Викладення

інформації

Оригінальність оформлення

Загальна кількість балів

.

ІІ-га група „Естетів” переглядає підготовлені малюнки.  Сортує їх за тематикою, відкидає неестетичні малюнки. Відібрані - записує на дискети для розповсюдження на комп’ютери класу.

ІІІ-а група „Техніків” відповідає за встановлення відібраних малюнків на вся комп’ютери комп’ютерного класу.

Роботу кожної групи контролює вчитель. Оцінює роботу груп. Знайомить клас із результатами робот груп. Звертає увагу на вдалість підібраних малюнків, цікавість їх тематики пропонує учням переглянути малюнки.

Запитую: Чи хотіли б ви прикрасити свою веб-сторінку цікавими малюнками?

Звичайно, відповідь буде „Так”.

  1.  Мотивація навчальної діяльності.

Дійсно графічні зображення відіграють важливу роль в оформленні у веб-документах. Включення їх у  HTML- документи дозволяє надати сторінці „ настрою”(ліричного, гумористичного, ділового), подати інформацію, яку неможливо отримати з тексту, розбити сторінку на теми, що дозволить користувачеві краще орієнтуватися в матеріалі. Для того, щоб сторінка подобалась відвідувачам, необхідно добитись оптимального співвідношення форми (дизайну) і змісту. Тому ви повинні навчитися  працювати з графікою при створенні веб-документа.

  1.  Повідомлення теми та мети уроку.

Отже  тема сьогоднішнього уроку: „Вставка графічних зображень в HTML- документ”

На уроці ви повинні засвоїти та навчитися використовувати:

  •  теги вставки графічних об’єктів;
  •  атрибути  вставки „обоїв”- графічного фону.

  1.  Вивчення нового матеріалу та виконання практичних завдань.

Перш ніж перейти до знайомства з тегами вставки графічних зображень необхідно знати декілька важливих моментів.

Питання до учнів з досвідом роботи в мові HTML:

   Про що необхідно пам’ятати використовуючи графічні зображення на веб-сторінці?

 Вислухати, доповнити та узагальнити відповіді.

 Швидкість появи зображення на екрані залежить ві розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт.

На HTML-сторінках графіку можна розміщувати різними способами.

Вбудовані зображення – це графічні зображення, які завжди залишаються в одному і тому самому місці сторінкиі не обрамляються текстом. Для того, щоб помістити на веб-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_зображення>. Дескриптор <IMG> є одиночним. В атрибуті SRC (від слова source) необхідно вказати повну або відносну URL- адресу файла –зображення. Наприклад:

<IMG SRC=malunoc.jpg”>.

Файл, що містить дане зображення знаходиться у тому самому каталозі, що і сам HTML-файл.

За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN.

Перегляньте на дошці таблицю з атрибутами:

Атрибут

Вирівнювання

TOP

Вирівнює текст по верхньому краю зображення

MIDDLE

Вирівнює текст по середній частині зображення

BOTTOM

Вирівнює текст по нижньому краю зображення

Перед переглядом таблиці стовпчик вирівнювання закритий. Учням пропоную пригадати, де і коли ми використовували такі атрибути. По мірі пригадування відповідні комірки стовпчика „вирівнювання „ відкриватимуться.

( Дані атрибути використовуються при вирівнювання табличних даних.)

Наприклад: <IMG SRC=”malunoc.jpgALIGN =MIDDLE>

Практичне завдання №1

  1.  Виберіть графічні зображення, запропоновані групою „естетів” і встановлені на вашому комп’ютері. Тематику зображень підбирайте виходячи із змісту відповідних сторінок: Домашня сторінка – про себе”, „Захоплення моєї родини”, „ Мої плани на майбутнє”.
  2.  Перевірте: чи задовольняють вибрані зображення вимогам ( перевірити чи запам’ятали учні вимоги до графічного зображення. Розширення, обсяг).
  3.  Розмістіть його в папку з вашими html-файлами.
  4.  Вставити відповідні зображення до перерахованих у п. 1 сторінок, використовуючи різні атрибути вирівнювання.
  5.  Проаналізувати отримані результати враховуючи естетичність, доцільність та оптимальність вибраних зображень.

Чи все вас задовольняє в одержаних результатах? чи бажаєте  ви, щоб  зображення не стояло окремо від тексту, а обрамлялося їм так, як це ми робили у Word?

Якщо так, то є необхідність знайомства з плаваючими зображеннями.

Плаваючі зображення – це зображення, що не прив’язуються до одного рядка тексту, а ніби „плавають” вздовж одного з полів і обрамляються текстом.

Для створення плаваючих зображень використовується дескриптор IMG з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути:

(показуючи картки з назвою атрибутів, добитися від учнів роз’яснень дії кожного)

LEFT

CENTER

RIGHT

Наприклад: <IMG SRC=”malunoc.jpgALIGN = RIGHT>

У дескрипторі <IMG > можна використовувати атрибути HEIGHT (висота) і WIDTH (ширина) для завдання висоти та ширини зображення в пікселях. За допомогою цих атрибутів ”повідомляється” розмір зображення. Це дозволяє броузеру підготувати макет сторінки на розмістити текст до  того, як будуть завантажені всі зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHTі WIDTH  вказати більші величини, ніж реальні розміри зображення. Зауважимо, що зменшувати розмір зображення таким методом недоцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюється.

Наприклад: <IMG SRC=” ” ALIGN = ”LEFT”  WIDTH=”300” HEIGHT=”400” >

Практичне завдання №2

  1.  Виберіть графічні зображення, запропоновані групою „естетів” і встановлені на вашому комп’ютері. Тематику зображень підбирайте виходячи із змісту відповідної сторінки: „Домашня сторінка – про себе”.
  2.  Розмістіть його в папку з вашими html-файлами.
  3.  Вставити вибрані зображення до своєї домашньої сторінки, використовуючи різні атрибути вирівнювання <IMG SRC=” ” ALIGN = RIGHT>( LEFT,CENTER) та WIDTH, HEIGHT
  4.  Проаналізуйте виконану роботу.

Повідомлення окремих блоків інформації можна доручати учням з досвідом роботи по цій темі.

  Мова HTML надає можливість використання графічного фону. Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>  у цьому атрибуті потрібно вказати ім’я файла графічного зображення.

Наприклад: <BODY BACKGROUND =”fon.gif”>.

 Зауваження: використовуючи атрибут background будьте дуже обережними.  Графічний фон не повинен заважати сприймати інформацію розташовану на сторінці, втомлювати та дратувати зір.

Практична робота№3

  1.  Виберіть файл з графічним фоном, що відповідає  зауваженим вимогам.
  2.  Розмістіть його в папку з вашими html-файлами.
  3.  Використайте графічний фон на домашній сторінці.
  4.  Доповніть  дану сторінку відомостями про ваших однокласників, друзів.
  5.  Проаналізуйте роботу.

  1.  Підведення підсумків уроку.

Перегляд робіт учнів. Виставлення оцінок.

Обговорення основних моментів уроку. Як ви вважаєте, ваші сторінки стали цікавішими після застосування графіки?

   Де ви зберігали файли з графікою?

   Про що ви б зауважили, розповідаючи друзям про використання графіки на веб-сторінках.?

  1.  Домашнє завдання.

На наступному уроці ви навчитесь зв’язувати елементи однієї, або кількох сторінок за допомогою створення гіперпосилань.  Було б цікаво, якщо ви використаєте сторінки своїх однокласників, як документи на які посилаються. Тому ваше завдання поцікавитись роботою один одного.

Вивчити та записати у словник нові теги та атрибути.

Для підготовки використайте таку літературу:

  •  «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с.36-43;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 390--393.


План опора по темі:

„Вставка графічних зображень в HTML- документ.

Завдання уроку:

  •  теги вставки графічних об’єктів;
  •   теги вставки „обоїв”

Допустимі  розширення графічних файлів JPEG або GIF.

Допустимими  розміри –не більше 40-50 Кбайт.

Вбудовані зображення – це графічні зображення, які завжди залишаються в одному і тому самому місці сторінкиі не обрамляються текстом. Для того, щоб помістити на веб-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_зображення. Наприклад: <IMG SRC=”malunoc.jpg”>.

Файл, що містить дане зображення знаходиться у тому самому каталозі, що і сам HTML-файл.

Атрибути вирівнювання: TOP, MIDDLE, BOTTOM

Наприклад: <IMG SRC=”malunoc.jpgALIGN =MIDDLE>

Практичне завдання №1

1.Виберіть графічні зображення, запропоновані групою „естетів” і встановлені на вашому комп’ютері. Тематику зображень підбирайте виходячи із змісту відповідних сторінок: Домашня сторінка – про себе”, „Захоплення моєї родини”, „ Мої плани на майбутнє”.

2.Перевірте: чи задовольняють вибрані зображення вимогам ( перевірити чи запам’ятали учні вимоги до графічного зображення. Розширення, обсяг).

3.Розмістіть його в папку з вашими html-файлами.

4.Вставити відповідні зображення до перерахованих у п. 1 сторінок, використовуючи різні атрибути вирівнювання.

5.Проаналізувати отримані результати враховуючи естетичність, доцільність та оптимальність вибраних зображень.

Плаваючі зображення – це зображення, що не прив’язуються до одного рядка тексту, а ніби „плавають” вздовж одного з полів і обрамляються текстом.

Наприклад: <IMG SRC=”malunoc.jpgALIGN = RIGHT>

LEFT

CENTER

У дескрипторі <IMG > можна використовувати атрибути HEIGHT (висота) і WIDTH (ширина) для завдання висоти та ширини зображення в пікселях.

Наприклад: <IMG SRC=” ” ALIGN = ”LEFT”  WIDTH=”300” HEIGHT=”400” >

Практичне завдання №2

1.Виберіть графічні зображення, запропоновані групою „естетів” і встановлені на вашому комп’ютері. Тематику зображень підбирайте виходячи із змісту відповідної сторінки: „Домашня сторінка – про себе”.

2.Розмістіть його в папку з вашими html-файлами.

3.Вставити вибрані зображення до своєї домашньої сторінки, використовуючи різні атрибути вирівнювання <IMG SRC=” ” ALIGN = RIGHT>( LEFT,CENTER) та WIDTH, HEIGHT

4.Проаналізуйте виконану роботу.

  Мова HTML надає можливість використання графічного фону. Наприклад: <BODY BACKGROUND =”fon.gif”>.

Практична робота№3

1.Виберіть файл з графічним фоном, що відповідає  зауваженим вимогам.

2.Розмістіть його в папку з вашими html-файлами.

3.Використайте графічний фон на домашній сторінці.

4.Доповніть  дану сторінку відомостями про ваших однокласників, друзів.

5.Проаналізуйте роботу.

Тема: Гіперпосилання. Створення гіперпосилань.

Мета  познайомити учнів з видами гіперпосилань;формувати навички створення гіперпосилань між HTML-документами та в межах одного HTML-документа.

Розвивати логічне мислення, творчий підхід до роботи.

Виховувати культуру спілкування, культуру представлення інформації.

Використане обладнання та матеріали:

Комп’ютери;

план-опора;

таблиця атрибутів;

картки з тегами;

дискети.

Хід уроку.

1.Актуалізація опорних знань.

Фронтальне опитування:

З яких тег складається загальна структура документа?

Як створити html-документ?

Що ви пам’ятаєте з історії розвитку мови HTML.

Які HTML-документи вами в же створені?

Які теги ви використовували для форматування тексту?

Під час фронтального опитування  один учень готує відповідь на питання              „ Використання графічних зображень в HTML-документі” ( вибираючи з запропонованих карток з тегами необхідні).

2. Мотивація навчальної діяльності.

Пригадайте, що ми називали логічною основою HTML-документа?

Вірна відповідь: „ Гіпертекст ”.

Чим відрізняється HTML- документ від звичайних текстових документів?

Можлива відповідь: „Існуванням в ньому зв’язків з іншими файлами”.

Гіперпосилання або просто посилання є найпопулярнішим елементом веб-сторінок. З їх допомогою користувач може переходити до різних частин поточної сторінки, звертатися до інших сторінок або веб-вузлів. Тому ваша сторінка стане дійсно повною, якщо ви з моєю допомогою організуєте в ній використання гіперпосилань.

3. Повідомлення теми і завдань уроку. 

Здогадайтеся як звучить тема сьогоднішнього уроку. Логічно, що учні дадуть відповідь: ”Гіперпосилання „  або „Створення гіперпосилань”. Учитель чітко проголошує тему уроку: „Гіперпосилання. Створення гіперпосилань”.

На уроці ви повинні:

  •  Познайомитись з видами посилань на веб-сторінках;
  •  Вивчити теги створення посилань;
  •  Навчитися застосовувати теги створення посилань;
  •  Зв’язати свої та HTML- документи заготовлені вашими однокласниками  із вашою домашньою сторінкою.

4. Виклад навчального матеріалу, виконання практичних завдань.

Посилання організуються у такий спосіб. На вихідній веб-сторінці визначається відправна точка посилання, наприклад підкреслене слово або малюнок. На цільовій веб-сторінці задається точка призначення посилання, що відповідає як конкретному HTML – елементу (тексту, малюнку, ауді- або відео кліпу), так і документу в цілому.

Відправна точка посилання задається тегом <A>. Ім’я цього тегу походить від першої літери слова anchor – якір. Сам елемент А називається елементом прив’язки або якірним елементом. На початку документа, який буде використовувати посилання необхідно задати колір якоря. За це відповідає атрибут    тега <BODY>.

LINK – це колір гіпертекстового зв’язку.

VLINK- колір гіпертекстового зв’язку, на який ви вже заходили. Наприклад:

<BODY BACKGROUND=”fon.jpgfTEXT=”#000000” LINK=”BLUE” VLINK=”GREEN”>

 Усередині тегу <A> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами  <A> і </A> розміщується текст посилання або елемент малюнка. Тек найпростіше посилання може виглядати як

<A href=” ind1.html”> друзі</A>.

На веб-сторінці це посилання відображатиметься у вигляді тексту „друзі”. При клацанні мишею по цьому посиланню буде завантажуватися HTML- файл ind1.html.

Зверніть увагу, що в атрибуті href зазначене лише ім’я, що відповідає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у WWW, то в атрибуті  href  указується URL цього ресурсу, наприклад:

<A href=”http://www.samsung.com”> телефони фірми  Samsung </A>.

Як атрибут href  можна вказати ресурс mailto (виклик протоколу електронної пошти SMPT). Наприклад, посилання вигляду

<A href=mailto://garry@myserver.net.ua> лист Гаріку<A/>

дозволить відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення повідомлення за адресою: garry@myserver.net.ua.

Висновок: Якщо ви створюєте посилання в межах свого комп’ютера краще за все розмістити файли, на які ви посилаєтесь, в каталозі зх вихідним документом.

Мова HTML підтримує внутрішні і зовнішні Гіперпосилання. Якщо посилання здійснює перехід у межах того самого документа, то його називають внутрішнім. Такі посилання звичайно застосовують  у великих документах для переміщення  по розділах. Якщо посилання забезпечує перехід до іншого документа, розташованого на іншому веб-вузлі, то це зовнішнє посилання.

Локатор URL ресурсу, на який вказує посилання, може бути абсолютним і відносним. Абсолютний URL містить всі компоненти, необхідні для того, щоб броузер зміг знайти веб-сторінку в неосяжній мережіWWW. Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ, зручніше використовувати скорочений запис URL, у якому вказується тільки папка і файл. Такий запис адреси називається відносним URL. Прикладом відносного URL є значення атрибута href=” ind1.html

Висновок: посилання бувають внутрішніми, зовнішніми, абсолютними та відносними.

Практичне завдання №1. 

1.Відкрийте домашню сторінку тобто файл index.html.

2.Проаналізуйте ще раз інформацію на ній.

3 Використайте для створення зовнішнього посилання файли „My plan.html”, “zahoplennia moey rodunu.html”та  головну сторінку вашого приятеля -однокласника.

4. Перенесіть сторінку приятеля з дискети до вашої папки, якщо ви ще цього не зробили. Так як ви всі створювали домашні сторінки під одним іменем, то перейменуйте сторінку друга, наприклад в index2.html.

5.  Виберіть якірні слова і створіть зовнішні посилання ці документи.

6. Проаналізуйте роботу.   

Створення внутрішнього посилання.

Отже для переходів з однієї частини документа до іншої служать внутрішні посилання. Цей вид посилань доцільно використовувати, коли всі частини великого документа не відображаються цілком у вікні броузера. Внутрішнє посилання, як і зовнішнє, задається за допомогою елемента якірного тегу <A> з атрибутом href. Але на відміну від зовнішнього посилання, у зазначені атрибута href указується не URL, а ім’я мітки (мітка позначається знаком#). Наприклад тег<A href=”#глав1”> тема 1. Моє навчання</A> задає посилання на елемент документа, позначеного міткою „глав1”. Саме посилання  має вигляд виділеного тексту „Тема 1. Моє навчання”. Мітка створюється за допомогою якоря <A>, однак у ньому замість атрибута href використовується атрибут name.

Наприклад:

<A name=”глав1”> тема 1. Моє навчання</A>

Практичне завдання №2

На домашній сторінці, яку ви зберегли під іменем index.html  систематизуйте поданий вами текст по темах і утворіть внутрішні посилання за зразком:

<h2>Тематика</h2>

<A href=”#глав1”> тема 1. Про мене</A>

<A href=”#глав2”> тема 2. Моя сім’я</A>

<A href=”#глав1”> тема 3. Моє навчання</A>

<A href=”#глав1”> тема 4. Мої друзі</A>

<h2><A name=”глав1”> тема 1. Про мене </A></h2>

( розташуй те інформацію  про те скільки вам років, коли і де ви народилися, про місто в якому ви живете)

<h2><A name=”глав1”> тема 2. Моя сім’я </A></h2>

( інформація про сім’ю)

<h2><A name=”глав1”> тема 3. Моє навчання</A></h2>

( інформація про навчання)

<h2><A name=”глав1”> тема 4. Мої друзі</A></h2>

( все про друзів)

Практичне завдання№3

1. перегляньте виконану роботу.

2. Перевірте роботу посилань.

3. Доповніть головну і додаткові сторінки інформацією.

4. Підготуйте свій сайт для захисту.

5. Підведення підсумків.

Ми завершили роботу по створенню найпростішого веб-сайту.

Чи сподобалося вам працювати  в цій темі?

Які моменти здалися вам складними, а які не викликали труднощів?

Чи відчуваєте ви себе біль досвідченими тепер?

Вам залишилося тільки представити і захистити свою роботу. Показати її  своїм друзям – однокласникам. Але для захисту необхідно підготуватися, домашнє завдання буде таким.

6. Домашнє завдання.

Запишіть вивчені теги до словника

 Підготуйтеся до захисту своєї роботи. Продумайте план захисту, слова, якими ви розкажете про свою сторінку. Пригадайте теги і атрибути, які ви використовували на сторінці, звідки добували допоміжну інформацію.  Потурбуйтеся про те, щоб слухати вас було цікаво.

Для підготовки використайте таку літературу:

  •  «Вивчення WEB-програмування в школі», Рамський Ю.С.,Іваськів І.С., Ніколаєнко О.Ю.,«Навчальна книга - Богдан», Тернопіль, 2004,с.30-36;
  •  „Інформатика 7-11 класи”, Гаєвський О.Ю., „Видавництво А.С.К.”, Київ, 2003, с. 387-390.


План –опора з теми„Гіперпосилання. Створення гіперпосилань”

Завдання уроку:

  •  Познайомитись з видами посилань на веб-сторінках;
  •  Вивчити теги створення посилань;
  •  Навчитися застосовувати теги створення посилань;
  •  Зв’язати свої та HTML- документи заготовлені вашими однокласниками  із вашою домашньою сторінкою.

LINK – це колір гіпертекстового зв’язку. VLINK- колір гіпертекстового зв’язку, на який ви вже заходили. Наприклад: <BODY BACKGROUND=”fon.jpgfTEXT=”#000000” LINK=”BLUE” VLINK=”GREEN”>

 Усередині тегу <A> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами  <A> і </A> розміщується текст посилання або елемент малюнка. Тек найпростіше посилання може виглядати як<A href=” ind1.html”> друзі</A>.

файл ind1.html,  розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у WWW, то в атрибуті  href  указується URL цього ресурсу, наприклад: <A href=”http://www.samsung.com”> телефони фірми  Samsung </A>.

Як атрибут href  можна вказати ресурс mailto (виклик протоколу електронної пошти SMPT). Наприклад, посилання вигляду <A href=mailto://garry@myserver.net.ua> лист Гаріку<A/>дозволить відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення повідомлення за адресою: garry@myserver.net.ua.

Висновок: Якщо ви створюєте посилання в межах свого комп’ютера краще за все розмістити файли, на які ви посилаєтесь, в каталозі зх вихідним документом.

Якщо посилання здійснює перехід у межах того самого документа, то його називають внутрішнім.

Якщо посилання забезпечує перехід до іншого документа, розташованого на іншому веб-вузлі, то це зовнішнє посилання.

Абсолютний URL містить всі компоненти, необхідні для того, щоб броузер зміг знайти веб-сторінку в неосяжній мережіWWW.

Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ, зручніше використовувати скорочений запис URL, у якому вказується тільки папка і файл. Такий запис адреси називається відносним 

Висновок: посилання бувають внутрішніми, зовнішніми, абсолютними та відносними.

Практичне завдання №1. 

1.Відкрийте домашню сторінку тобто файл index.html.

2.Проаналізуйте ще раз інформацію на ній.

3 Використайте для створення зовнішнього посилання файли „My plan.html”, “zahoplennia moey rodunu.html”та  головну сторінку вашого приятеля -однокласника.

4. Перенесіть сторінку приятеля з дискети до вашої папки, якщо ви ще цього не зробили. Так як ви всі створювали домашні сторінки під одним іменем, то перейменуйте сторінку друга, наприклад в index2.html.

5.  Виберіть якірні слова і створіть зовнішні посилання ці документи.

6. Проаналізуйте роботу.   

Створення внутрішнього посилання.

Наприклад тег<A href=”#глав1”> тема 1. Моє навчання</A> задає посилання на елемент документа, позначеного міткою „глав1”. Саме посилання  має вигляд виділеного тексту „Тема 1. Моє навчання”. Мітка створюється за допомогою якоря <A>, однак у ньому замість атрибута href використовується атрибут name.Наприклад: <A name=”глав1”> тема 1. Моє навчання</A>

Практичне завдання №2

На домашній сторінці, яку ви зберегли під іменем index.html  систематизуйте поданий вами текст по темах і утворіть внутрішні посилання за зразком:

<h2>Тематика</h2>

<A href=”#глав1”> тема 1. Про мене </A>

<A href=”#глав2”> тема 2. Моя сім’я </A>

<A href=”#глав1”> тема 3. Моє навчання </A>

<A href=”#глав1”> тема 4. Мої друзі </A>

<h2><A name=”глав1”> тема 1. Про мене </A></h2>

( розташуйте інформацію  про те скільки вам років, коли і де ви народилися, про місто в якому ви живете)

<h2><A name=”глав1”> тема 2. Моя сім’я </A></h2>

( інформація про сім’ю)

<h2><A name=”глав1”> тема 3. Моє навчання</A></h2>

( інформація про навчання)

<h2><A name=”глав1”> тема 4. Мої друзі</A></h2>

( все про друзів)

Практичне завдання№3

1. Перегляньте виконану роботу.

2. Перевірте роботу посилань.

3. Доповніть головну і додаткові сторінки інформацією.

4. Підготуйте свій сайт для захисту.

Урок захисту Web-сайту

Мета: вчити учнів представляти  та захищати свої роботи перед колективом

         Розвивати в учнів вміння правильно формувати думки, та красиво висловлювати їх;

Розвивати навички культурного спілкування в колективі.

Виховувати культурне ставлення учнів один до одного, вміння правильно сприймати критику та похвалу.

Використане обладнання:

Комп’ютери;

Таблиці критеріїв оцінювання.

Хід уроку

Урок-захист передбачає участь кожного учня  в представлені своєї роботи та оцінювання роботи інших учнів.

Кожний учень отримує таблицю критеріїв оцінювання  веб-сторінки см. Додаток  це робиться, це дає можливість виставити бал по кожному критерію.  Максимальна кількість балів по кожному пункту „10”. Далі обчислюється середній бал за роботу.

Крім того створюється лічильна група яка  підводить підсумки

Лічильна група зводить всі відомості в зведену таблицю і визначає середній бал за виконання роботи.

Урок захисту сторінок можна розбити на такі етапи:

  1.  Учні розбиваються на 2 групи.
  2.  Встановлення порядку захисту в кожній групі. Це може бути жеребкування. Або учні захищатимуть свої роботи в алфавітному порядку.
  3.  Роздача таблиць з критеріями оцінювання.
  4.  

Створення лічильної групи. Це можуть бути 3 учні, які мають досвід в такій роботі, або методом жеребкування. Метод жеребкування не виділяє окремих учнів з маси, тим самим надає іншим відчувати впевненість.

  1.  Процес захисту та виставлення оцінок. Регламент -3 хв
  2.  Обробка результатів лічильною комісією.
  3.  Повідомлення результатів. Оголошення кращих робіт

Готуючись до даного уроку вчитель, підрахувавши рейтинговий бал кожного учня, додає бал за захист і  повідомляє результати учням.

№ п/п

Прізвище

ім’я

Загальний

вигляд

сторінки

Доцільність

підібраних

кольорів

Доцільність

підібраної

графіки

Чіткість

викладення

інформації

на сторінці

Цікавість

поданої

інформації

Різнома

нітність викорис

таних тег

Культура мовлення при захисті

Середній бал захисту

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  

  1.  


 

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

73477. ДИКТАТУРА ЦЕЗАРЯ 232 KB
  Большой интерес и значение для оценки личности Цезаря представляет его биография, написанная Плутархом. Плутарх – грек из Херонеи, родившийся в середине I века. Он занимал видное положение при Траяне и Адриане и был чрезвычайно образованным и плодовитым писателем.
73478. Проектирование базы данных ортопедического отделения больницы 231.5 KB
  Необходимо создать базу данных, которая включает в себя информацию об ортопедическом отделении больницы. В базу должны входить несколько таблиц: список операционных больных, в котором отображается вся информация о пациентах; список медперсонала, в котором отображается вся информация...
73479. SWOT – анализ OOO Эллис (Homequeen) 230.5 KB
  Чтобы проанализировать предприятие, нужно выбрать верный способ анализа. Так, чтобы при его помощи можно было бы проанализировать и внутреннею, и внешнею среды. Так же нужно оценить возможности выбранного предприятия, чтобы четко понимать, на что оно способно, и какие у него есть перспективы.
73480. ОСОБЕННОСТИ ХИМИЧЕСКИХ СВОЙСТВ АТОМАРНОГО КИСЛОРОДА И ВОДОРОДА 229.5 KB
  В этой работе представлены некоторые особенности химических свойств атомарного водорода и кислорода. Химия этих элементов довольно интересна и разнообразна. Особенности химических свойств объясняются строением этих атомов.
73481. Система применения удобрений в хозяйстве АО «Дружба» 226.5 KB
  Определить потребность севооборота в элементах питания с учетом его продуктивности и разработать наиболее эффективную рациональную систему удобрения в севообороте с учетом агроклиматических ресурсов, плодородия почвы, биологических особенностей культур...
73482. Инвестиционная деятельность предприятий нефтедобывающей отрасли 220 KB
  Целью данной курсовой работы является анализ организации финансов предприятий нефтедобывающей отрасли. Для достижения данной цели были поставлены следующие задачи: раскрыть теоретические аспекты организации финансов предприятий нефтедобывающей отрасли...
73483. Форма сделок 212.5 KB
  Актуальность темы данной курсовой работы в том, что среди вопросов, связанных с оформлением гражданско-правовых договоров, важное значение имеют проблемы квалификации различных форм сделок, приобретающих все более широкое распространение в современном гражданском обороте.
73484. Организация бухгалтерского учета на предприятии «Елена» 208 KB
  Целью практики являлось углубить и закрепить теоретические и практические умения и навыки, полученные в университете при изучении учебных дисциплин; продолжить работу по формированию базовых и ключевых компетенций экономиста в сфере создания бухгалтерской службы на предприятии...
73485. Пути развития коммуникативной компетенции подростков в процессе внеучебной деятельности 202 KB
  Цель исследования: изучить и выявить пути развития коммуникативной компетенции подростков в процессе внеучебной деятельности. Дать характеристику внеучебной деятельности и ее роли в развитии коммуникативной компетенции подростков.