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


 

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

42425. Функциональные схемы 435 KB
  Такие схемы встречаются в электронных устройствах используемых в компьютерах калькуляторах телефонных системах и ряде других устройств. Постановка задачи синтеза логических схем По аналогии с тем как из трех элементарных частиц  протонов нейтронов и электронов порождаются различные химические элементы которые соединяясь в молекулы образуют вещества всей живой и неживой природы из трех простейших логических схем  дизъюнктора конъюнктора и инвертора можно образовать сколь угодно сложные функциональные схемы соответствующие...
42426. Нечёткие множества 218 KB
  Стандартное четкое множество строится на основе математической конструкции отсеивающей из универсального множества некоторую часть его элементов. То есть фактически любое множество определяется этим самым свойством или набором свойств S и объединяет некоторое количество не обязательно конечное счетное элементов обладающих свойством S. А теперь давайте попробуем из всей бесконечности всего в нашей Вселенной в которой очевидно есть место и для таких объектов как вода и стаканы сформировать множество на основе вполне понятного...
42427. Фракталы 803.5 KB
  Цель работы: ознакомиться с фрактальными структурами в физических системах и явлениях и научиться их программировать. Как подступиться к моделированию каскадных водопадов или турбулентных процессов определяющих погоду Фракталы и математический хаос подходящие средства для исследования поставленных вопросов. Термин фрактал относится к некоторой статичной геометрической конфигурации такой как мгновенный снимок водопада.
42428. Проектирование RAM 304 KB
  Из-за наличия всего одной шины и для адреса и для данных необходимо ввести дополнительный регистр для чтения в него адреса и следовательно требуется добавить команду записи адреса с шины в регистр. Тогда структурная схема имеет вид: Тогда система команд имеет следующий вид: not RS not CS not WE MO 1 X X M 0 0 0 WR 0 0 1 RD 0 1 X Запись адреса в RG ПРОЕКТИРОВАНИЕ РЕГИСТРА Регистр адреса состоит из 10 одноразрядных регистров-триггеров. Следовательно схема регистра адреса для 1го разряда будет иметь вид: Полный регистр:...
42429. Проектирование FM 364 KB
  Ячейка выбираеться по адресу и записываеться по сигналу WR Синхросигнал для ячейки за адресом 000000 Синхросигнал для ячейки за адресом 011001 Синхросигнал для ячейки за адресом 101111 последней 48 ячейки Проектирование однорозрядного триггера: Проектирование разрешения выдачи сигнала: У нас будет три схемы разрешения управляющего сигнала. Схема iтой ячейки FM Общая схема FM.
42430. Проектирование AU 284.5 KB
  Оценить сложность полученной схемы и её быстродействие.C 0100 X 1 C 0000 0000 0000 5 R2 = R2R3 0100 1 0 X 0001 0010 0001 6 R1 = R1 1 0110 1 0 X 0000 xxxx 0000 7 R4=R41 0110 1 0 X 0011 xxxx 0011 2 R5=R1xorR3 0001 0 0 X 0000 0010 0100 Коды операций из 2 лабораторной: 0 0000 P 0011 P 1 0110 P Q 0100 P Q 0001 CIопределяет арифметическая операция или логическаяучитывание переноса F3F2F1F0 код операции F разрешение левого сдвига D сдвигаемый разряд Схема арифметического...
42431. Проектирование СPU 410 KB
  Сигнал F управляет сдвигом ICTR счетчик команд т. длина команды 24 бит счётчик увеличивается на 3 учитывая адрес RM 10битный и счётчик такой же разрядности. IRG регистр команд состоит из 3 байт COP блок управления операциями формирует управляющие сигналы Сi CCRG регистр признаков: Сперенос О переполнение S знак Z ноль. Кодирование и структура команд CPU O LO 4 бита кода МО LSM 4 бита F0F1F2F3 для LSM 2 4битных адреса операндов FM 23 x 24 x 24 = 211 разновидностей операций FR RF 1 бит для направления...
42432. Проектирование СOP 423.5 KB
  В таком случае, COP должен содержать набор логических элементов И-ИЛИ, DC кодов ОР и CTR тактов. Далее выходы И собираются на ИЛИ в соотвествии с формулами для управляющих сигналов. Предполагается, что произведения T2 JC и T2 JC Cc формируются в 2 этапа: 1) в схеме получают сигнал T2 JC. 2) после опроса СС формируют сигналы T2 JC и T2 JC CС.
42433. Соотношение понятий социализации, воспитания и образования. Особенности социализации различных возрастных групп 15.7 KB
  Процесс воспитания – целенаправленный процесс, его цель – накопление ребенком необходимого для жизни в обществе социального опыта, формирование принимаемой обществом системы ценностей и включение детей в мировую и отечественную культуры.