58026

Мова програмування HTML. Теги для роботи з фоном. Теги для задання кольору

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

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

Мета уроку: Навчальна: закріпити знання учнів про команди мови теги HTMLтехнологію створення HTMLфайлу ознайомити учнів з тегами для роботи з фоном та тегами для задання кольору навчити створювати найпростіші вебсторінки...

Украинкский

2014-04-18

52 KB

2 чел.

Тема уроку:  Мова програмування HTML

Теги для роботи з фоном. Теги для задання кольору.

Мета уроку:

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

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

Обладнання: мультимедійний комплекс(проектор,ноутбук), картки із завданнями.

Хід уроку:

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

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

  •  Мандруючи просторами Інтернету чи задумувалися ви над тим, чому одна сторінка має привабливий вигляд, а інша не дуже?
  •  Чому один текст виділений одним кольором, а другий іншим і якими засобами мови HTML це можна зробити?
  •  Чи можна для оформлення фону(тла) веб сторінки використати графічний об'кт?

На всі ці питання ми сьогодні на уроці знайдемо відповідь.

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

Отже, тема нашого уроку «Мова програмування HTML.

Теги для роботи з фоном.Теги для задання кольору»

  •  Мета уроку; закріпити знання учнів про команди мови (теги) HTML,технологію створення HTML-файлу, ознайомити учнів з тегами для роботи з фоном та тегами для задання кольору, навчити створювати найпростіші веб-сторінки

Після цього уроку учні зможуть:

  •  пояснювати поняття "веб-документ", пояснювати, для чого призначена мова розмітки документа – HTML;
  •  створювати найпростіші веб-сторінки, використовуючи теги для роботи з  кольором  та фоном;
  •  набути навичок роботи в групі.
  1.  Надання необхідної інформації

Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.

Ім’я такого файла звичайно має розширення.htm чи.html

Створення HTML-документа відбувається розташуванням тегів (команд) мови HTML всередині звичайного неформатованого тексту.

Теги HTMLце послідовності символів, які починаються знаком «менше» (<) і закінчуються знаком «більше» (>). Теги можуть мати атрибути, які, в свою чергу, можуть приймати певні значення.

Правила роботи в  мові розмітки документа HTML

Пробіли та інші «невидимі символи» ігноруються.

Теги форматування можуть бути написані великими або малими літерами.

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


Технологія створення
HTML-документа
HTML-документ  можна  створювати  за  допомогою найпростішого текстового процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.

Позначення HTML-документа

<HTML>... < /HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.

<HTML> розташовується у першому рядку документа;

< /HTML> - у останньому рядку.

Заголовок документа

<HEAD>... </HEAD> - містить інформацію про документ.

Назва документа

<TITLE>... </TITLE> - назва документа, яка відображається в рядку заголовка internet Explorer.

Тіло документа

<BODY>,..</BODY> - тіло документа містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.

IV. Інтерактивні вправи

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

(вчитель об’єднує учнів в групи за порами року(осінь, зима весна, роздає картки із завданням (див.додатки 1, 2, 3)

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

Колір фону і тексту може задаватись шістнадцятковими значеннями RRGGBB (Red, Green, Blue) червоного, зеленого і синього кольорів відповідно або позначеннями кольорів англійською мовою.  наприклад:

Червоний  Red            #FFOOOO

Зелений Green         #OOFFOO

Синій   Blue           #OOOOFF

Тег <BODY> містить список додаткових параметрів, які управляють використанням фонових зображень і визначають кольори гіпертекстових посилань і тексту.

Атрибути тегу <BODY>

BGCOLOR                                             Задає колір фону

TEXT Задає колір тексту

BACKGROUND                                    Визначає зображення, яке використовується як фонове.

Для визначення кольору фону документа тег <BODY> записується таким чином:

<BODY BGCOLOR=#FFOOOO> або

<BODY BGCOLOR=RED> - фон документа буде червоного кольору.

<BODY TEXT=RED> - колір тексту в документі буде червоним.

Атрибути можуть бути записані одночасно:

<BODY BGCOLOR=RED TEXT=WHITE> - колір фону червоний, колір тексту - білий.

Завдання (група «Осінь»)

Дайте відповіді на питання(письмово в зошитах)

1.Який атрибут тегу<BODY>  використовується для оформлення кольором фону веб-сторінки?

2.Як може задаватись колір в тегах для оформлення фону,тексту?

Завдання(група «Зима»)

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

1.Який атрибут тегу<BODY>  використовується для оформлення кольором тексту веб-сторінки?

2.Як може задаватись колір в тегах для оформлення фону?

Завдання(група «ВЕСНА»)

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

1.Який атрибут тегу<BODY>  використовується для оформлення кольором фону  і одночасно тексту веб-сторінки?

2.Як може задаватись колір в тегах для оформлення фону, тексту?

Робота за комп`ютером

За даним алгоритмом і шаблоном створити свою першу веб-сторінку задати.Кольори фону та тексту задати за власним бажанням

Структура  HTML-документа має вигляд

<HTML>

   <HEAD>

      <TITLE> Тестова сторінка</TITLE>

   </HEAD>

   <BODY>

         Моя перша веб-сторінка і вона мені дуже подобається!

    </BODY>

</HTML>

Порядок створення Web-документа:

У головному меню WINDOWS вибрати пункт Пуск-Программы -Стандартные -Блокнот.

Ввести структуру документа

3.  Зберегти   створений   документ,   обов'язково надавши йому розширення *.htm

4.  Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної сторінки завантажити Internet Explorer, відкрити меню File,  вибрати команду Open file, завантажити створений файл.

5 Для внесення змін повернутись до програми Блокнот,  внести зміни,  зберегти файл.

6. Активізувати Internet Explorer, натиснути кнопку Обновить.

v.Підбиття підсумків.Оцінювання результатів

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

Вивчити теоретичний матеріал та підготуватись до практичної роботи


 

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

23055. Моделювання цифрових логічних схем 178.5 KB
  Перелічимо деякі логічні ІМС 74ї серії: 74x00 базовий елемент 2ІНЕ 74x10 логічний елемент 3ІНЕ 74x20 логічний елемент 4ІНЕ 74x30 логічний елемент 8ІНЕ 74x02 логічний елемент 2АБОНЕ 74x27 логічний елемент 3АБОНЕ 74x08 логічний елемент 2І 74x32 логічний елемент 2АБО 74x04 інвертор логічний елемент НЕ 74x51 логічний елемент 2І2АБОНЕ 74x86 логічний елемент Виключне АБО на 2 входи Пакет OrCAD дозволяє провести суто цифрове моделювання для даного вузла схеми якщо до цього вузла підєднані лише входи та виходи...
23056. Роль та повноваження Ради національної безпеки України в системі забезпечення національної безпеки 40.5 KB
  Роль та повноваження Ради національної безпеки України в системі забезпечення національної безпеки. Це випливає із Закону України Про Раду національної безпеки.подає пропозиції Президентові України щодо .визначення стратегічних національних інтересів України концептуальних підходів та напрямів забезпечення національної безпеки і оборони у політичній економічній соціальній військовій науковотехнологічній екологічній інформаційній та інших сферах проектів державних програм доктрин .
23057. Стратегія національної безпеки України: основні положення та проблеми формування 38 KB
  Стратегія національної безпеки України: основні положення та проблеми формування. ТЕМА: Стратегія національної безпеки Стратегія чітко вивірений шлях і напрям досягнення мети. Стратегія національної безпеки це система державнополітичних рішень головних напрямків діяльності у сфері безпеки послідовна реалізація яких забезпечує досягнення мети головна лінія що дозволяє забезпечити безпеку на певний період спрямована на досягнення середньострокових та довгострокових інтересів. В НАТО змінено пріоритет безпеки на поширення зони...
23058. Загрози національній безпеці України у політичній сфері та шляхи їх нейтралізації 40 KB
  Загрози національній безпеці України у політичній сфері та шляхи їх нейтралізації. Загрози у внутрішньополітичній сфері: порушення з боку органів державної влади та органів місцевого самоврядування Конституції і законів України прав і свобод людини і громадянина в тому числі при проведенні виборчих кампаній недостатня ефективність контролю за дотриманням вимог Конституції і виконанням законів України; можливість виникнення конфліктів у сфері міжетнічних і міжконфесійних відносин радикалізації та проявів екстремізму в діяльності деяких...
23059. Загрози національній безпеці України в економічній сфері та шляхи їх подолання 38 KB
  Загрози в економічній сфері: істотне скорочення внутрішнього валового продукту зниження інвестиційної та інноваційної активності і науковотехнічного та технологічного потенціалу скорочення досліджень на стратегічно важливих напрямах інноваційного розвитку; ослаблення системи державного регулювання і контролю у сфері економіки; нестабільність у правовому регулюванні відносин у сфері економіки в тому числі фінансової фіскальної політики держави; відсутність ефективної програми запобігання фінансовим кризам; зростання...
23060. Загрози національній безпеці України в соціальній сфері та шляхи їх подолання 22 KB
  Загрози у соціальній та гуманітарній сферах: невідповідність програм реформування економіки країни і результатів їх здійснення визначеним соціальним пріоритетам; неефективність державної політики щодо підвищення трудових доходів громадян подолання бідності та збалансування продуктивної зайнятості працездатного населення; криза системи охорони здоров'я і соціального захисту населення і як наслідок небезпечне погіршення стану здоров'я населення; поширення наркоманії алкоголізму соціальних хвороб; загострення демографічної кризи;...
23061. Загрози національній безпеці України у воєнній сфері та шляхи їх нейтралізації. Воєнна доктрина України 39 KB
  Воєнна доктрина України. Загрози у воєнній сфері та сфері безпеки державного кордону України: поширення зброї масового ураження і засобів її доставки; недостатня ефективність існуючих структур і механізмів забезпечення міжнародної безпеки та глобальної стабільності; нелегальна міграція; можливість втягування України в регіональні збройні конфлікти чи у протистояння з іншими державами; нарощування іншими державами поблизу кордонів України угруповань військ та озброєнь які порушують співвідношення сил що склалося; небезпечне...
23062. Загрози національній безпеці України в екологічній сфері та шляхи їх нейтралізації 24 KB
  Загрози в екологічній сфері: значне антропогенне порушення і техногенна перевантаженість території України зростання ризиків виникнення надзвичайних ситуацій техногенного та природного характерів; нераціональне виснажливе використання мінеральносировинних природних ресурсів як невідновлюваних так і відновлюваних; неподоланність негативних соціальноекологічних наслідків Чорнобильської катастрофи; погіршення екологічного стану водних басейнів загострення проблеми транскордонних забруднень та зниження якості води; загострення...
23063. Чорнобильська катастрофа як загроза екологічній безпеці України 53 KB
  Україну на цій зустрічі представив Міністр з питань надзвичайних ситуацій та у справах захисту населення від наслідків Чорнобильської катастрофи Василь Дурдинець який виступив із промовою. Також він наголосив на основних аспектах Чорнобильської проблематики. Це було сказано Президентом України Леонідом Даниловичем Кучмою у зверненні з нагоди закриття Чорнобильської АЕС 15 грудня 2000 року. За останні десять років коли Україна самостійно фінансує витрати на ліквідацію наслідків Чорнобильської катастрофи питома вага витрат на ці цілі не...