Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок icon

Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок




Скачати 212.89 Kb.
НазваРудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок
вчитель інформатики
Дата конвертації06.03.2013
Розмір212.89 Kb.
ТипУрок
1. /Уроки.docРудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок

Міністерство освіти і науки України

Славутицький ліцей Славутицької міської ради Київської області


ЦИКЛ УРОКІВ

з основ інформатики


Тема «Створення web-документів мовою HTML»


Автор: вчитель інформатики

І категорії

Славутицького ліцею

Рудик Олександр Григорович


Славутич

2008

Уроки № 1 – 2


Тема уроку: „Поняття мови розмітки гіпертексту. Структура HTML документу.”

Мета:

  • ознайомити учнів з поняттям мови розмітки гіпертексту, структурою HTML документу;

  • актуалізувати особистісний інтерес учнів до вивчення нової теми;

  • створити умови для розвитку в школярів критичного мислення;

  • виховувати в учнів відповідальність за справу, яку вони виконують.


Тип уроку: урок засвоєння нових знань


Хід уроку


1. Організаційний момент.

2. Актуалізація досвіду й опорних знань учнів

  1. Що таке World Wide Web?

(глобальна система поширення гіпертекстової інформації, яка використовує для транспортування канали мережі Internet)

  1. Що таке гіпертекст?

(спосіб організації тексту, графіки та інших даних, у якому елементи пов’язані між собою)

  1. Що таке web-документ?

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

  1. Броузер це - …

(програма, яка призначена для перегляду web-документів)

  1. Web-сайт це -…

(декілька web-документів на одну тему, пов’язані гіпертекстом)

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

Основою всесвітньої павутини є мова гіпертекстової розмітки HTML (Hyper Text Markup Language). Вона була створена вченими Європейського центру ядерних досліджень (CERN, м.Женева). Наприкінці 80 років у CERN зайнялися проблемою збереження даних, які отримували від колег-фізиків. Складність полягала у тому, що кожен фахівець, який приїздив до центру, застосовував власні методи відображення інформації, і потрібно було терміново створити універсальну систему, яка б не залежала від використовуваної комп’ютерної платформи і була б досить простою. Згодом мова HTML стала основною при створенні документів, що розміщуються у WWW.

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

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

Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад у «Блокнот». Крім того створювати web-документи можна за допомогою візуальних HTML-редакторів, в яких користувач має справу з графічними образами елементів HTML, а не з кодом. При створенні сайта користувач звичайно сам визначає, працювати йому у візуальному редакторі, чи вручну. Але при цьому потрібно враховувати , що ефективно керувати HTML документами і вирішувати питання web-дизайну можна тільки використовуючи мову розмітки.

1



Яким же чином відбувається розмітка за допомогою HTML?

Для кожного елементу web-документу задається команда HTML, яка називається тегом. Розглянемо структуру найпростішого web-документу.

- початок HTML документу

- заголовна частина документу

</b> Заголовок <b> - власне заголовок

- початок уведення змісту сторінки

Приклад HTML-документу





Необхідно звернути увагу на те, що кожен з тегів має закриваючий тег. Такі теги називають парні. В противному випадку - одинарні.

Щоб преглянути створений документ у броузері, необхідно його зберегти з розширенням *.html, або *.htm.


2



Часто теги містять додаткові елементи, які називаються атрибутами (параметрами). Наприклад, тег має наступні атрибути:

text=”green”>, де bgcolor – колір фону сторінки, background – фонове зображення, text – колір тексту.

Зауваження. Якщо графічний файл та web-документ знаходяться у різних каталогах то слід писати повну адресу до графічного файлу (D:\Foto\picture.jpg). В противному випадку – тільки назву та розширення файлу (picture.jpg).

3



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

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


Текст
- з пропуском рядка


Текст
- без пропуску рядка


Текст - між абзацами буде проведена горизонтальна лінія


4



За замовчуванням абзаци будуть вирівняні по лівому краю. Щоб змінити вирівнювання необхідно для тегів установки абзаців використати атрибут Аlign.




5



Щоб задати певне зображення шрифту використовують наступні теги:

Текст - напівжирний текст

<І>Текст - курсивний текст

Текст - підкреслений текст

Текст - верхній індекс

Текст - нижній індекс

Дані теги можна вкладати один в одного для отримання наприклад напівжирного та курсивного тексту (Текст)


6



Параметри шрифту можна задати тегом

<FONT Face=”Arial” Size=3 Сolor=”red”> Текст , де Face – тип шрифта, Size – розмір шрифта, Color – колір шрифта.



5. Застосування набутих знань, формування практичних навичок.

Відкрийте програму «Блокнот» та уведіть теги і текст.





</b>My first web-page<b>





Це сторінка Олександра.

Привіт! Мене звати Олександр.

Я навчаюся в 42 групі Славутицького ліцею. Мені 16 років. Мої улюблені предмети: інформатика, англійська мова, математика. Я люблю слухати класичну музику, читати пригодницькі романи, подорожувати, кататися на гірських лижах, ходити на дискотеку.

Я навчаюся на відмінно. Мрію вступити на навчання до Київського політехнічного університету.

Колись тут буде моя фотографія.

Моя адреса: 07100, Київська область, м.Славутич, Московський квартал 2, квартира 125.





Збережіть даний файл з розширенням my.html та перегляньте його у броузері.

Відформатуйте дану web-сторінку, щоб вона мала такий вигляд:



6. Підбиття підсумків уроку

Дайте відповіді на такі запитання:

  • Для чого потрібна мова HTML?

  • Яке розширення файлів web-сторінок?

  • Як називаються команди мови HTML?

  • Якими тегам задається заголовок web-сторінки?

  • Між якими тегами розміщується інформація , яка буде відображена у робочій області браузера?

  • Назвіть теги для створення абзаців. Яка між ними різниця?

  • Назвіть теги для встановлення зображення шрифту?

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

    1. Створити web-сторінку, на якій була б розміщена ваша біографія. Відформатуйте її використовуючи відповідні теги.

    2. Знайдіть в мережі Internet декілька курсів по вивченню мови HTML. (Рекомендовані курси: http://mylearn.ru/kurs/26, www.htmlbook.ru)

Уроки № 3 - 4

Тема: „Створення списків та таблиць”

Мета: Ознайомити учнів з тегами для створення списків та таблиць. Продовжувати формувати вміння учнів створювати web-документи з використанням списків та таблиць.


Хід уроку

1. Організаційний момент.

2. Активізація опорних знань.

  1. Як називаються команди мови HTML?

  2. Між якими тегами розміщується інформація , яка буде відображена у робочій області броузера?

  3. Яке розширення файлів web-сторінок?

  4. Які види списків вам відомі, зокрема при вивченні текстового редактора MS Word?

  5. Яка можлива нумерація нумерованого списку?

  6. Що таке список тлумачень?

  7. Яке можливе зображення маркерів у ненумерованих списках?

  8. Вкажіть призначення таблиць.

  9. До яких частин таблиці можна застосовувати форматування?


3. Оголошення теми заняння. Мотивація навчальної діяльності


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

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


4. Формування нових знань і умінь.
визначає один рядок таблиці. Дані окремих комірок розміщуються у контейнері . Причому закриваючий тег не є обов’язковим.




  • 1



    Є три види списків: нумерований, ненумерований, список тлумачень.

    Всі ці списки можуть мати заголовок, який охоплюється тегами Заголовок

    Нумерований список утворюється за допомогою парного тега
    і одинарних тегів
  • .

  • 2



    Наприклад, необхідно створити такий список:

    Екзамени:

    1. Українська мова

    2. Математика

    3. Хімія

    4. Біологія

    Тоді HTML-код такого списку матиме наступний вигляд:

    Екзамени



    1. Українська мова

    2. Математика

    3. Хімія

    4. Біологія



    Щоб отримати список з римською нумерацією, або нумерацію літерами, необхідно в тезі
      записати атрибут Type=”I” або Type=”А” відповідно.


    3



    Ненумерований список створюють за допомогою парного тега
    та одинарних тегів
  • .

  • 4



    Щоб отримати такий список

    Екзамени:

    • Українська мова

    • Математика

    • Хімія

    • Біологія

    необхідно увести такий HTML-код:

    Екзамени



    • Українська мова

    • Математика

    • Хімія

    • Біологія



    Атрибут Type для тега
      має такі значення – disc - •, circle - ○, square - ▪

    5



    Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега
    і двох одинарних тегів
    i
    так:

    Заголовок



    термін

    тлумачення 1

    тлумачення 2 …



    6



    Наприклад,

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



    Текстові редактори

    WordPad

    MS Word

    Електронні таблиці

    MS Excel

    Бази даних

    MS Access



    Переглянувши даний фрагмент у броузері побачимо наступне:

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

    Текстові редактори

    WordPad

    MS Word

    Електронні таблиці

    MS Excel

    Бази даних

    MS Access

    7



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

    Код таблиці міститься в контейнері
    . Даний тег може містити такі атрибути –


    Атрибут

    Значення

    Приклад

    Border

    Задає товщину рамки у піклесях. 0- невидима рамка

    Border=3

    Bgcolor

    Задає колір фону таблиці

    Bgcolor=”yellow”

    Bordercolor

    Задає колір рамки

    Bordercolor=”green”

    Align

    Вирівнювання в таблиці

    Align=”left, center, right”

    Height

    Висота таблиці в пікселях

    Height=”300”

    Width

    Ширина таблиці в пікселях

    Width=”500”

    Width=”100%” – по ширині екрану






    8



    Кожна пара тегів

    9




    Створимо досить просту таблицю:







    </b></span> Створення таблиць <span><b>















    Мишка

    8$

    Клавіатура

    15$







    10



    Щоб об’єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному тезі
    записують параметр Rowspan=2.

    А щоб об’єднати у стовпці дві клітинки, використовують параметр Colspan=2.

    За замовчуванням більшість елементів на сторінці, наприклад текст, таблиці, списки, текст у клітинках таблиці, броузер вирівнює до лівого краю екрану чи клітинки. Часто тип вирівнювання потрібно змінити. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього у відповідних тегах ,
    використовують параметри Align зі значеннями: Left – зліва, Right – праворуч, Сenter – по центру, та Valign зі значеннями: Top – угорі, Middle – посередині, Bottom – унизу.



    5. Застосування набутих знань, формування практичних навичок.



    6. Підбиття підсумків уроку.

    Оформлюючи текст у вигляді списків можна використовувати 3 типи списків (нумерований, ненумерований та список тлумачень) з різними типами зображень, які задаються параметром type.

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

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

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

    Розширити свої знання з даної теми за допомогою обраних вами Internet курсів та записати нові теги та їх параметри у зошит.

    Уроки № 5 - 6

    Тема: „Вставка об’єктів та гіперпосилань”

    Мета: Продовжувати знайомити ліцеїстів з тегами для вставки зображень, відео, звуку та гіперпосилань.


    Хід уроку

    1. Організаційний момент

    2. Активізація опорних знань.

    • Що таке гіпертекст?

    • Які об’єкти можуть бути гіперпосиланням на інші ресурси?

    • Які об’єкти зазвичай відображаються на web-сторінках?

    • Вкажіть розширення графічних, звукових та відео файлів.

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

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

    4. Формування нових знань і умінь учнів.

    4.1 Вставка зображень

    Графічні зображення (фотографії, малюнки, піктограми) зберігаються з розширенням *.bmp, *.jpg, *.gif, і т.д. і відображаються на web-сторінці за допомогою тега з параметрами:

    =”Адреса до графічного файлу” Alt=”Альтернативний текст” Align =”left, right, center” Width=240 Height=200 (Width=25%)>

    4.2 Вставка відео

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

    =”Адреса до відео файлу”>

    4.3 Вставка звуку

    • Щоб звук пролунав у момент запуску відповідної сторінки (фоновий звук) слід використати тег:

    =”Адреса до звукового файлу”>

    • Щоб отримати крім звуку ще й магнітофонну панель для регулювання тривалості та сили звуку, його припинення або продовження можна скористатися тегом:

    =”Адреса до звукового файлу”>

    4.4 Вставка гіперпосилань

    Існує два види гіперпосилань :

    • На файл

    • На деяке місце в документі:

      • Початок сторінки

      • Кінець сторінки

      • Позначений текст

    У цих двох випадках гіперпосилання створюється за допомогою парного тега .

    =”Адреса файлу”> Текст або зображення яке буде гіперпосиланням

    Замість адреси файлу може бути Top, Bottom чи текст що є позначкою.

    Розглянемо випадок, коли гіперпосиланням є текст.

    Нехай у реченні «Мене звати Олександр» слово «Олександр» потрібно зробити гіперпосиланням на файл my1.html, що містить додаткові відомості про Олександра. Це робиться так:

    Мене звати Олександр

    Тег містить такі параметри:

    Link=”колір” – колір гіперпосилання

    Vlink=”колір” – колір гіперпосилання після першого його використання

    Alink=”колір” – змінює колір активізованого гіперпосилання

    Інший тип гіперпосилання – посилання в межах сторінки. Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає точці посилання, вводять тег, який називається якорем.



    Якір можна кинути в будь-якому місці тексту так:



    Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так:

    Текст гіперпосилання

    (Демонстрація створення гіперпосилань)

    1. Застосування набутих знань, формування практичних навичок.

    Створити 4 web-сторінки за наведеним зразком та відповідні гіперпосилання.

    Малюнки та необхідний текст знаходяться в кожному комп’ютері.



















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

    6. Підсумок уроку

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

    Розробити власний сайт за інтересами - улюблена музична група, виконавець, актор, вид спорту, мистецтво… При створенні сайту необхідно використовувати різні способи форматування тексту, списки, таблиці, об’єкти, гіперпосилання.

    Підготуватися до тестування з даної теми.

    Продовжувати поглиблено опановувати дану тему.


    Уроки № 7 - 8

    Тема: „Тематичне оцінювання. «Cтворення web-документів мовою HTML»”

    Мета: Перевірка якості та міцності засвоєного матеріалу, сформованості умінь і навичок, внесення коректив.


    Хід уроку

    1. Організаційний момент

    2. Використання знань у стандартних умовах.

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

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




    12-10

    9-7

    6-4

    3-1

    Зміст


    Дуже інформативний, ви дійсно описуєте те, що знаєте та розумієте добре

    Якість прийнятна, ви презентуєте небагато цікавої інформації

    Дуже стисла інформація, зміст міг би бути кращим

    Дуже мало інформації, неінформаційний зміст

    Навігація

    Зрозуміла організація матеріалу, продовження сторінок сприймається дуже природно

    Зрозуміла організація, легко переходити від сторінки до сторінки

    Навігація по сторінці в принципі зрозуміла, але дещо заплутана

    Дуже заплутана, важко зорієнтуватись, на якому місці сторінки ви знаходитесь

    Використання технологій

    Ви знайшли декілька нових прийомів!

    Ви яскраво показали, що створення веб-сторінки – це для вас легко і цікаво

    Хороший початок, але багато над чим треба ще попрацювати

    Ви все ще боретесь зі своєю веб-сторінкою

    Графіка

    Графіка виглядає професійно, доповнює зміст сторінки

    Графіка представлена на сторінці, але не додає змісту

    Небагато графіки, часто псує вигляд сторінки

    Графіка? А де вона?

    Творчість

    Ого! Як ви це зробили?

    У вас непоганий творчий потенціал

    Потенціал є, але треба попрацювати

    Творчість? Та що ви?

    Грамотність

    Спробуй знайти помилку!

    Дві-три несерйозні помилки, але сторінка виглядає добре.

    Ой, декілька серйозних помилок!

    Ваші помилки зовсім зіпсували сторінку...






    Прізвище

    Зміст

    Навігація

    Використання технологій

    Графіка

    Творчість

    Грамотність

    1






















    2






















    3






















    4






















    5























    3. Внесення коректив та побажань щодо створених сайтів

    4. Перевірка знань фактичного матеріалу та основних понять

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


    Тест з теми «Створення web-сторінок мовою HTML»


    1. Що означає HTML?

      1. Hyperlinks and Text Markup Language;

      2. Home Tool Markup Language;

      3. Hyper Text Markup Language.

    2. Виберіть правильний варіант який задає колір фону сторінки:







      1. yellow

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

      1. Colspan

      2. Columns

      3. Span

      4. Width

    4. Виберіть тег для виділення тексту курсивом:









    5. Як задати фонове зображення на web-сторінці?









    6. Виберіть тег для переведення рядка:










    7. Які з наступних тегів призначені для створення таблиць?







  • Виберіть тег для виділення тексту напівжирним:









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









    1. Який параметр тега <img> є обов’язковим?

      1. Name

      2. Src

      3. Type

      4. Image

    2. Виберіть тег для створення e-mail адреси:



      1. xxx@yyy





    3. Виберіть правильний варіант для створення гіперпосилання:

      1. http://www.ya.ru

      2. mail.ru

      3. mail.ru

      4. mail.ru

    4. Тег для створення списку виду 1,2,3…:









        • Вкажіть тег для вирівнювання по лівому краю змісту комірки:









  • Виберіть тег для найбільшого розміру заголовку:









  • Яким буде текст заключений в теги ТЕКСТ

    1. Напівжирний, підкреслений

    2. Підкреслений, курсивний

    3. Курсивний, напівжирний

  • Щоб вставити відео Film.avi у web-сторінку необхідно записати такий html-код:







  • Як задати фоновий звук?



    1. < bgsound img="background.mp3">





  • Щоб створити нумерований список виду І, ІІ, ІІІ, … необхідно:







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

      1. Alink

      2. Vlink

      3. Plink

      4. Link


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

    Повторити основні поняття, автоматизація навичок.

    Продовжувати удосконалення даної теми.



  • Схожі:

    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconПрізвище Рудик ім’я, по батькові Олександр Григорович
    Звання, нагороди (дата) Почесна грамота головного управління освіти і науки 2009 р. (від 30. 06. 2009 р наказ №85) Диплом Департаменту...
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconМетодичні рекомендації вчителю щодо створення та підготовки до проведення нетрадиційного уроку
    «суди», уроки пошуку істини, уроки-концерти, уроки-діалоги, уроки-ролеві ігри, уроки-екскурсії, інтегральні уроки тощо
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconТема уроку
    Яке місце даного уроку в темі? Як цей урок пов'язаний з попереднім, як цей урок працює на подальші уроки?
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconТесленко Олександр Віталійович Лохвиця 2012 урок №1 Тема: «З історії Об'єднаного Королівства Великобританія та Північна Ірландія» Підтема: «географічне поло­ження великобританії» Задачі урок
    Великобританії; на­вчити учнів вимовляти геогра­фічні назви та вживати їх на рівні речень
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconОргкомітет конференції
    Корченко Олександр Григорович, д т н., професор, завідувач кафедри безпеки інформаційних технологій нау
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconДокументи
    1. /Уроки/25.doc
    2. /Уроки/26.doc
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconНаталя Уварова Вірші – Ілля Рибалко фізкультура для баби яги
    Лісова галявина. На галявині тато рудик, рудя рудик та зоя біляк займаються ранковою гімнастикою
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconУрок пов'язаний з попереднім, як цей урок працює на подальші уроки?
    Коротка психолого-педагогічна характеристика класу (к-ть слабоуспіваючих, сильних учнів )
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconУрок № Тема : Григір Тютюнник. Повість "Климко". Воєнне дитинство у творі. Морально-етичні уроки доброти, чуйності, турботи про рідних. Образ Климка
    Тема: Григір Тютюнник. Повість "Климко". Воєнне дитинство у творі. Морально-етичні уроки доброти, чуйності, турботи про рідних. Образ...
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconДокументи
    1. /уроки/Обобщающий урок.doc
    2. /уроки/Урок1.doc
    Рудик Олександр Григорович Славутич 2008 уроки №1 2 Тема урок iconВідділ освіти, молоді та спорту віньковецької райдержадміністрації «затверджую»
    Рудницький Олександр Григорович, начальник відділу освіти, молоді та спорту райдержадміністрації
    Додайте кнопку на своєму сайті:
    Документи


    База даних захищена авторським правом ©te.zavantag.com 2000-2017
    При копіюванні матеріалу обов'язкове зазначення активного посилання відкритою для індексації.
    звернутися до адміністрації
    Документи