53405

Оформлення тексту в HTML – документі

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

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

Хід уроку Перед початком уроку на учнівські комп’ютери та робоче місце вчителя має бути розміщено папки : Організаційний момент Актуалізація опорних знань Учитель пропонує учням виконати завдання “Магічний квадрат. Завдання має бути виведене на інтерактивну дошку а кожен учень повинен отримати картку з наступним текстом : Юний друже Для виконання даного завдання знайди файл що міститься за наступною адресою : C: Documents nd Settings Учень Рабочий стол HTML Урок _3 mgic. Бажаю успіху D O C T I T H B T B D L E H Y G T...

Украинкский

2014-02-26

234 KB

0 чел.

Тема уроку :  Оформлення тексту в HTML – документі

Назва уроку :  Краса врятує світ ?

Мета уроку : сформувати в учнів уявлення про основні засоби мови НТМЛ;  побудувати  засобами мови розмітки гіпертексту просту сторінку; формувати навички форматування тексту в НТМЛ – документі, вносити корективи в НТМЛ- код .

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

Хід уроку

Перед початком уроку  на  учнівські  комп’ютери та робоче місце вчителя має бути розміщено папки :

  1.  Організаційний момент
  2.  Актуалізація опорних знань

Учитель пропонує учням виконати завдання “Магічний квадрат». Завдання  має бути виведене на інтерактивну дошку, а кожен учень повинен  отримати картку з наступним текстом :

«Юний друже!

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

C:\Documents and Settings\Учень\Рабочий стол\HTML\Урок _3\magic. xls

У файлі ти знайдеш магічний квадрат , що містить оператори мови НТМL. Теги, що є на твою думку парними,  зафарбуй червоним кольором, непарні теги – синім, атрибути тегів – зеленим кольором.

Примітка.

Слова можуть читатись як зліва направо , так і справа наліво. У квадраті міститься тег, який складається з невикористаних букв. Зафарбуй його жовтим кольором. Приготуйся пояснити свій вибір. Бажаю успіху!»

D

O

C

T

I

T

H

B

T

B

D

L

E

H

Y

G

T

E

A

T

P

C

E

Y

D

M

E

O

X

T

O

L

!

L

O

R

Перевірка завдання здійснюється наступним чином : на інтерактивну дошку вчитель виводить файл  magic_ vidpovid. xls, який знаходиться на робочому місці викладача; учні разом з вчителем перевіряють виконання завдання, коментують його, визначають повний запис тегів. Після цього вчитель пропонує учням виконати самооцінку знань -  якщо вони виконали завдання без помилок – прикріплюють до монітора стікер червоного кольору, якщо   під час виконання завдання допущено не більше 4 помилок – зеленого кольору, в іншому випадку – жовтого кольору.

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

На інтерактивну дошку вчитель виводить зразок   веб-сторінки з файлу

C:\Documents and Settings\Lara\Рабочий стол\HTML\Урок_3\вчитель\POVTOR.htm.

Учні встановлюють за допомогою яких тегів була створена дана сторінка. Поруч за допомогою заздалегідь приготованого надрукованого набору тегів та слів учні будуть НТМL –код сторінки :

<HTML>

<HEAD>

<TITLE> повторення </TITLE>

</HEAD>

<BODY text= "000000" bgcolor="008000">

ФОРМАТУВАННЯ ТЕКСТУ 

</BODY>

</HTML>

Запитання до класу :

1.  Які спільні риси документів , виконаних у Word Pad, MS Word та на мові   розмітки  гіпертексту HTML  ви можете назвати ?

2. Яка операція називається форматуванням і що вона передбачає?

Учитель просить учнів звернути увагу на  екранну заставку ( файл заставка.bmp)  і наголошує  на запитанні, відповідь на яке учні повинні дати  протягом уроку: «Яким чином  можна  оформлювати текст у НТМL?»

  1.  Вивчення нового матеріалу

В ході бесіди  учні разом з учителем опрацьовують таблицю, що міститься   у файлі   таблиця.doc  на робочому місці вчителя та учнів. Вони повинні порівняти  особливості форматування текстів у Word Pad, MS Word та на мові   розмітки  гіпертексту HTML.

 

Операції

Word Pad

MS Word

HTML

Створення заголовків

?

?

<H1>Заголовок першого рівня</H1>

<H6>Заголовок шостого рівня</H6>

Створення абзаців

?

?

<P>…</P>

?

?

?

<P ALIGN=LEFT> по лівому краю </P>

<P ALIGN=CENTER> По центру </P>

<P ALIGN=RIGHT> По правому краю </P>

<P ALIGN=JUSTIFY>вирівнювання по ширині </P>

Перехід на новий рядок без створення абзаців

?

?

<BR>

Форматування символів тексту:

Напівжирний шрифт

Курсив

Підкреслення

Підрядковий шрифт

Надрядковий шрифт

Перекреслення

Великий шрифт

Малий шрифт

?

?

<B></B> 

<I>…</I>

<U>…</U>

<SUB>…</SUB>

<SUP>…</SUP>

<STRIKE>…</STRIKE>

<BIG>…</BIG>

<SMALL>…</SMALL>

  1.  Закріплення нового матеріалу

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

Завдання 1
Який вигляд матиме веб-сторінка після застосування такого HTML – коду?
Де можна застосувати вказані елементи?

<font size="1"> информатика </font>

<P ALIGN=LEFT> краща </P>

<U>з усіх</U>

<U><B> <I>наук</I></B></U>

<SUB>цікаво</SUB>

<STRIKE>правильно</STRIKE>

<SMALL>хлопчик - мізинчик</SMALL>

Завдання 2


Знайди помилки в НТМ
L-коді.  Розв'яжи задачу.
Спрогнозуйте як виглядатиме виправлена сторінка у броузері?

<!—прекрасна незнайомка-->
<html>
<head>
<<title>задача</title>
</head>
<body>
<font face=Verdana,Sans-serif size="2" color="#000000">
<b>Прекрасна <
u> незнайомка</b><p>
у 1963 році Дуглас Енджельбарт створив програмний діалоговий інтерфейс і<BIG > її. </BIG>У 1983 році <BIG > вона </BIG> коштувала 200$ разом з адаптером та драйвером. Вона може спілкуватись навіть по радіо або через інформаційний канал.  Хто ця прекрасна незнайомка? > !
<center>
</center>
</font>
</body>
</html>

 Вчитель пропонує учням  оцінити  ступінь засвоєння матеріалу прикріпивши до  монітора стікер відповідного кольору : червоний  - « все зрозуміло» , зелений – «зрозуміло практично все», жовтий – «нічого не зрозуміло».

  1.  Виконання самостійної роботи

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

Завдання 1

Друже!

На робочому столі в якості заставки ти бачиш  веб- сторінку. Відкрий Блокнот та набери НТМЛ – код, що дозволить відтворити таку сторінку.

Завдання 2

Додайте  до вмісту сторінки  наступні фрази оформивши за зразком :

Людині властиво помилятися, а ще більшезвалювати  провину за свої помилки на комп'ютер.

Завдання 3

Застосуйте до наступних виразів наступні теги :   <HR>, <EM>…</EM>/ Поясніть їхню дію на фрагмент тексту, до якого вони застосовані.

Комп'ютери полегшують дуже багато чого, однак більшість того, що вони полегшують, взагалі не треба робити ( народна мудрість)

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

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

Учні разом з вчителем виконують перевірку виконаного завдання. якщо перше завдання виконано повністю правильно учні прикріплюють  стікер жовтого кольору, якщо вірно виконано завдання №2 – зеленого кольору, завдання № 3 – стікер червоного кольору.

Учні узагальнюють вивчене  і відповідають на наступні запитання :

  1.  Чому було вибрано саме таку назву уроку?
  2.  Говорять , що існують правила хорошого тону для веб-дизайнерів.  Чи можете ви  їх сформулювати ?

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

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

Домашне завдання міститься на слайдах  у файлі urok_3.htm

Опрацювати  § 5 п. 6

У якості довідкового посібника  можна використати файл C:\Documents and Settings\Lara\Рабочий стол\HTML\Урок _3\учень\webdes.chm

Створрти власну веб-сторінку, розмістивши там відомості про себе. До тексту застосувати наступні ефекти :

ПІБ - Times New Roman, 14 пт,колір – чорний,  

дата народження – курсив,

місце навчання – напівжирний,

місце проживання – підкреслений,

відомості про батьків – шрифтом Arial , розмір 3, колір – зелений,

колір сторінки – жовтий.

Додайте вираз або цитату, що є девізом Вашого життя. Оформіть її належним чином.

Використана література:

  1.  Інформатика 10-11 /Глинський Я.М. –Львів, 2006 – с.264
  2.  НТМЛ в примерах. Как создать  свій Web-сайт/Дрилакин В.В. –Диалектика. Москва,2005, - с.190
  3.  Web – програмування в школа / Рамський Ю.С..- Богдан,2006,-  с.200

PAGE  1

НТML

Учень

Вчитель

magic. xls

таблиця.doc

urok_3. ppt

webdes.chm

magic. xls

magic_vidpovid. xls

таблиця.doc

urok_3. ppt

webdes.chm

заставка.bmp

povtor.htm


 

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

31769. Страховые в организациях АПК 39.5 KB
  В соответствии со статьей 12 Федерального закона О развитии сельского хозяйства предусмотрены субсидии на компенсацию не менее 50 уплаченной страховой премии страхового взноса по договорам страхования урожая сельскохозяйственных культур заключенные ими со страховыми организациями имеющими лицензию на проведения данного вида страхования. Страховые случаи: Посевы сельскохозяйственных культур и урожая многолетних насаждений считаются застрахованными на случай их уничтожения или повреждения в результате воздействия опасных для производства...
31770. Тарифы страховых взносов во внебюджетные фонды в 2012 году 30 KB
  С 1 января 2012 года вступают в силу изменения внесенные в закон о страховых взносах. Напомним что в текущем году совокупная ставка страховых взносов составляет 34. Начиная со следующего года ставка страховых взносов в ПФР уменьшится с 26 до 22.
31771. Субъекты обязательного аудита 32.5 KB
  Постановлением правительства №1355 и №408 установлено что бухгалтерская и финансовая отчетность экономических субъектов подлежит обязательной ежегодной аудиторской проверке по следующим критериям системе показателей: 1. Подлежат обязательной ежегодной аудиторской проверке экономические субъекты имеющие организационноправовую форму открытого акционерного общества независимо от числа его участников и размера уставного капитала. Обязательной аудиторской проверке подлежат: банки и другие кредитные учреждения; страховые организации и общества...
31772. Сущность и принципы нормативного метода учета затрат 35.5 KB
  Сущность и принципы нормативного метода учета затрат. Варианты организации нормативного учета затрат Сущность нормативного метода учета затрат Нормативный метод учета затрат система производственного учета объединяющая оперативный аналитический и калькуляционный виды учета тесно связанная с планированием нормированием и организацией производства. предполагает установление норм потребления ресурсов и учетных цен этих ресурсоворганизацию учета по установленным нормам нормативам затрат; учет отклонений от норм с установлением их размера...
31773. Сущность системы «директ-костинг» 37.5 KB
  Постоянные расходы не включают в расчет себестоимости изделий а как расходы данного периода списывают с полученной прибыли в течение того периода в котором они были произведены. Маржинальным доходом называется сумма постоянных затрат и прибыли или сумма покрытия. В отчете о финансовых результатах видно изменение прибыли вследствие изменения переменных расходов цен реализации и структуры выпускаемой продукции. Хозяйственная деятельность представляет собой процесс инвестирования финансовых ресурсов с целью получения прибыли.
31774. Сущность‚ роль и функции экономического контроля в управлении экономикой 31.5 KB
  Функционально система управления любого уровня состоит из системы прогнозирования экономического анализа планирования организации оперативного регулирования учета и контроля. Одним из основных вопросов контроля является определение его сущности. Важным звеном единой системы финансовохозяйственного контроля является экономический контроль.
31775. Система «Стандарт-кост» 23.5 KB
  Отличие от нормативного учета – система управления производством в которой не стоит проблема учета а решается задача точного исполнения; более жестко отслеживатся технологический процесс недопускается никаких отклонений. Ситандарткост более гибкая система при всей ее жесткости.
31776. Системы управленческого учета, их класиификация 28 KB
  Функции управления: планирование Организация деятельности мотивация контроль Класиификация систем управленческого учета: Широта охвата информации систематический учет финансовый учет затрат на производство и регламентацию по составу затрат способам регистрации идентификации и группировки представления отчетности проблемный учет формируется информация об экономической технологической конструкторской и организационной подготовке производства: о ценах реализации ГП управление производственными запасами рационализации расходов...
31777. Сущность системы «директ-костинг» и оценка операционного левириджа 29 KB
  Основа –деление затрат ресурсов на постоянные и переменные части и исчисление сокращеной себестоимости. Систему запретили в 90 гг в РФ Виды системы: классический себестоимостьосновные прямые производственные затраты система переменных затрат в огранич себестоимость включаются все затраты имеющие перменный характер по отнош. К изменению объемов производства и продажи развитая себестоимость=переменные затратычасть постоянных затрат расчитанных на коэффициент использования производственной мощности Достоинства сисемы: выявление...