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


 

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

41299. Визначення ізотопічного зсуву в спектрі атомарного водню 357 KB
  Робоча формула : зведена маса або просто маса електрона.001 Обробка результатів Оскільки маса ядра не нескінченна і маса електрона не дорівнює нулю тоді система ядро електрон обертаються навколо спільного центра мас. І в формулі зведена маса примітка маса протона приблизно дорівнює масі нейтрона Ізотоп водню буде причиною появи дуплетів.
41300. Єфект Зеємана 76.5 KB
  Теоретичні відомості Розрізняють два ефекти Зеємана нормальний і аномальний . Якщо спектральні лінії розщеплюються на три крмпоненти тоді це нормальни ефект Зеємана якщо більше ніж на три тоді аномальний . Також розрізняють продольний ефект Зеємана якщо спостерігають у нарямі і поперечний якщо спостерігають у площині що перпенбикулярна додля нормального ефектунаш виподок .
41301. Визначення питомого заряду електрона методом магнетрона 157 KB
  Визначити питомий заряд електрона за допомогою магнетрона. 3 Побудували графіки залежності анодного струму від струму в обмотці магнетрона.5 Апроксимували формулою Fx=f0 wpi 22exp2xxc2 w2 По вісі іксів струм в обмотці електромагніта магнетрона m для напруги120V .
41302. Вивчення структури мультиплетів в атомних спектрах 420.5 KB
  Результати та обробка результатів Калібровка Зелена область Синя область Фіолетова область мм мм мм 545561 05 435155 096 407174 306 544692 109 432576 269 406798 382 543453 195 430932 445 40636 45 Для зеленої області Синя область Фіолетова область Зелена обдасть Синя область Фіолетова область Практично 546311 436221 404407 Таблично 546074 435835 404656 Похибка 0.
41303. Спектир випромінювання атомарного водню 370 KB
  Робоча формула : зведена маса або просто маса електрона. Друга частина Оскільки маса ядра не нескінченна і маса електрона не дорівнює нулю тоді система ядро електрон обертаються навколо спільного центра мас. І в формулі зведена маса примітка маса протона приблизно дорівнює масі нейтрона Ізотоп водню буде причиною появи дуплетів.
41304. Численные методы и компьютерные технологии решения дифференциальных уравнений 1-го порядка 456.91 KB
  Изучение численных методов и компьютерных технологий решения обыкновенных дифференциальных уравнений 1-го порядка, приобретение практических навыков составления алгоритмов, программ и работы на ЭВМ.
41305. Численные методы и компьютерные технологии решения систем дифференциальных уравнений и дифференциальных уравнений n-го порядка 778.94 KB
  Изучение численных методов и компьютерных технологий решения систем дифференциальных уравнений 1-го порядка и дифференциальных уравнений n-го порядка, приобретение практических навыков составления алгоритмов, программ и работы на ЭВМ.
41306. Построение сетевого графика разработки стандарта предприятия; построение, содержание и изложение стандарта предприятия 1.15 MB
  Целью данной работы является: построение сетевого графика разработки стандарта предприятия; построение, содержание и изложение стандарта предприятия; расчёт годового экономического эффекта от внедрения стандарта предприятия; описание функционирования служб стандартизации на предприятии и структурная схема; проведение нормаконтроля сборочного чертежа «привод электромагнита».