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


 

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

33368. Система прерываний ОМК AT90S8515 63 KB
  При возникновении прерывания микроконтроллер сохраняет в стеке содержимое счетчика команд PC и загружает в него адрес соответствующего вектора прерывания. По этому адресу должна находиться команда относительного перехода к подпрограмме обработки прерывания. Кроме того последней командой подпрограммы обработки прерывания должна быть команда RETI которая обеспечивает возврат в основную программу и восстановление предварительно сохранённого счетчика команд. Младшие адреса памяти программ начиная с адреса 001 отведены под таблицу векторов...
33369. Канал SPI (синхронный последовательный порт) 38.5 KB
  Выводы используемые модулем SPI Название сигнала T90S8515 Описание SCK РВ7 Выход mster вход slve тактового сигнала MISO РВ6 Вход mster выход slve данных MOSI РВ5 Выход mster вход slve данных РВ4 Выбор ведомого устройства Спецификация интерфейса SPI предусматривает 4 режима передачи данных. Эти режимы различаются соответствием между фазой момент считывания сигнала тактового сигнала SCK его полярностью и передаваемыми данными. Задание режима передачи данных Разряд Описание CPOL Полярность тактового сигнала 0 генерируются...
33370. Система команд и способы адресации памяти данных 76.5 KB
  При прямой адресации адреса операндов содержатся непосредственно в слове команды.4 5 бит слова команды рис. Прямая адресация одного регистра общего назначения Примером команд использующих этот способ адресации являются команды работы со стеком PUSH Rr POP Rd команды инкремента INC Rd декремента DEC Rd а также некоторые команды арифметических операций.d4 5 бит слова команды рис.
33371. Схема СУ на базе ОМК АТ90S8515. 28.5 KB
  Порт РА микроконтроллером используется как мультиплексированная шина адреса данных. Поэтому для сохранения младшего байта адреса необходимо использовать регистр адреса РА. Запись в регистр осуществляется по спаду сигнала LE формируемого автоматически микроконтроллером при обращении по адресам внешнего ОЗУ.
33372. Выводы ЖКИ. Схема подключения ЖКИ к ОМК, как внешнего устройства 33 KB
  Схема подключения ЖКИ к ОМК как внешнего устройства Соединение ЖКМ например с МК осуществляется через разъём назначение и номера контактов которого приведены в табл. Описание выводов стандартного разъема ЖКМ на базе HD44780 № конт. Схема подключения ЖКМ LCD к микроконтроллеру MCS.
33373. Схема подключения клавиатуры к ОКМ с аппаратным исключением дребезга 29 KB
  Иключение дребезга контактов выполняется на основе RS триггеров. Схема клавиатуры с аппаратным исключением дребезга контактов.
33374. Схема подключения матричной клавиатуры к ОКМ 28 KB
  В подпрограмме обслуживания данного прерывания необходимо предусмотреть программное исключение дребезга контактов которое осуществляется с помощью временных задержек формирование и считывание кода нажатой клавиши Схема подключения матричной клавиатуры к МК.
33375. Состав модульного микроконтроллера SLC500 фирмы Allen Bradley 29.5 KB
  Шасси на 471013 слотов для установки модулей; Блок питания монтируется слева на шасси; Процессорный модуль SLS 5 01SLC 5 04; Входные дискретные модули переменного тока 1746I4816 1746IM4816; Входные дискретные модули постоянного тока 1746IB816 ITB16 IС16 IV816 IG16; Входной дискретный модуль c dc 1746IN16; Выходные дискретные модули переменного тока 1746O816 OP12; Выходные дискретные модули постоянного тока 1746OB816 OBP816 OV816 OVP16 OG16; Выходные релейные модули 1746OW4816 OX8;...
33376. Классификация СУ по степени совершенства 30.5 KB
  По степени совершенства и функциональным возможностям устройства ЧПУ делятся на следующие типы: NC Numericl Control УЧПУ для обработки изделий на станке по программе. все задачи в данных УЧПУ терминальная геометрическая логическая технологическая и диагностическая решаются на аппаратном уровне. В контурных УЧПУ типа NC основным элементом является интерполятор который обеспечивает обработку криволинейных поверхностей. Отличается от УЧПУ типа NC наличием электронного блока памяти.