Форматирование текста (шрифт, абзац) в HTML.

Раздел долгосрочного плана: 10.3А                         Школа: осш №83

Дата:                                                                              ФИО учителя:  Хайруллаева Марал Алишеровна

Класс: 10                                                                       Участвовали:                  Отсутствовали:

Тема урока

 Форматирование текста (шрифт, абзац).

Цели обучения, которые достигаются на данном уроке:

10.​4.​2.​1 использовать HTML (ашти эм эл)-теги при разработке web (веб)-страниц

Цели урока:

Все учащиеся смогут: научить применять тэги форматирования текста;

Большая часть учащихся будут уметь: научить применять тэг создания абзаца на  веб-странице;

Некоторые учащиеся смогут: применять тэги для создания списков.

Все учащиеся смогут: научить писать код с использованием тегов форматирования;

Многие: применяют различный цвет шрифта и шрифт;

Некоторые:  используют разделительную черту и разделяют абзац на две части.

Критерии оценивания:

Форматируют текст и создают абзацы на своей  веб- странице.

Уровень мыслительных навыков

Вносят  теги для обозначения заголовка, как выделяются абзацы и списки на web-страницах.

Вносят изменения в созданную Web-страницу.

Языковые цели:

Учащиеся могут:

перечислять письменно и устно основные шаги создания веб сайтов.

Словарь специфических терминов и терминология:

Набор полезных фраз для общения/письма:

Первый шаг –использовать текстовый редактор…

Во-вторых, …

Выполнив это, сохранить в формате…

После этого, вы должны решить, какие изображения….

После этого, вам необходимо подумать о ссылках.

Наконец, используя HTML…

Привитие ценностей:

Коммуникабельность

Необходимость совместной работы и планирования деятельности в командной работе обеспечивает дружелюбные отношения учащихся и развивает их коммуникабельные качества для работы в коллаборативной среде обучения: развитие умений социально, культурно, этично и приемлемо взаимодействовать с другими учащимися в командной работе.

Общенациональная идея «Мәңгілік ел»

Формирование интереса детей к академическим знаниям, обучению на протяжении всей жизни для блага родины. Элементы урока также направленны на самообучение, самообразование, развитие критического мышления у учащихся и реализации трехъязычной политики в образовании.

Нравственный аспект урока предполагает: формирование чувства ответственности за свое обучение; уважительное отношение к окружающим, развитие межкультурной осведомленности.

Уровень мышления

Знание, понимание, применение

Межпредметные связи:

Математика, английский язык.

Предварительные знания:

Знают понятия: интернет, текстового редактора Блокнот, браузер, основу языка и структуру документа  HTML, а также его теги.

Раздел 10.3А  являются важным для изучения данного раздела, так как он обеспечивает учащихся необходимыми знаниями и навыками, касающихся программирования и основ баз данных, изучаемых в данном разделе. Предпочтителен опыт разработки сайтов, наличие опыта программирования в HTML будет идеальным.

Запланированные этапы урока

Запланированная деятельность на уроке

Ресурсы

Начало урока:

2 мин

10 мин

І.Организационный момент: приветствие

Создание позитивного настроя для работы на уроке: Прием «комплимент» учащиеся в группе говорят друг другу комплименты

Постановка  темы и цели урока, с использованием ключевых терминов записанных на доске  (прием «Чистая доска» на доске написаны ключевые термины, которые будут изучаться на данном уроке)- HTML, тэги,  форматирование, шрифт, абзац, список, фон.

ІІ.Актуализация знаний

На данном уроке мы продолжаем изучение раздела “Веб-проектирование”.

На прошлых уроках мы узнали, какими тегами обозначаются заголовки, как выделяются абзацы и списки на web-страницах.

На сегодняшнем уроке мы будем выполнять практическую работу, опираясь на полученные ранее знания.

Тема нашего урока “Форматирование  текста (шрифт, абзац) ).

Общегрупповая работа.

Задание№1:

Связь с прошлым уроком

Повторение пройденного материала - вопрос-ответ в презентации

Пояснение нового материала - видео.

Вопросы классу. из видео из учебника

Какие действия обозначает термин “форматирование”?

Форматирование - изменение внешнего вида, например, текста (стиля, начертания, добавление эффектов) (слайд 4).

Что называют Web-страницами?

WEB-страница – это гипертекстовый документ (слайд 4).

Что мы будем делать на уроке?

Изменять внешний вид гипертекстового документа.

С помощью чего можно изменить внешний вид гипертекстового документа?

С помощью тегов – управляющих кoдов (слайд 4).

Повторим теги, которые пригодятся на данном уроке.

Заголовки. В языке HTML существует шесть уровней заголовков: <H1> – наиболее важный,< H6> – наименее важный (слайд 5).

Заголовок выводится браузером, в отдельной строке жирным шрифтом. Чем выше уровень заголовка, тем более крупными буквами он отображается (слайд 6).

Абзац. В начале и в конце абзаца ставится тег <P> (слайд 7).

Горизонтальная линия. Части текста можно отделять друг от друга горизонтальной линией с помощью тега <HR> (слайд 8).

Списки. Структура создания списков однотипна – весь список целиком помещается внутрь тега-контейнера <OL> (для нумерованного списка) или <UL> (для маркированного). Начало каждой строчки списка помечается тэгом <Li> (слайд 9, 10).

Форматирование текста. Виды форматирования текста: полужирный <B>, курсив <I>, подчеркнутый <U> (слайд 11).

ФО: устная похвала

Напишите алгоритм изменения цвета текста из ВИДЕО

Дескриптор

- правильно пишет алгоритм изменения цвета текста

Критерии оценивания: Учащийся

- знает виды форматирования языка разметки HTML

-может самостоятельно создавать  простой документ в  HTML

- внедряет  тэги для форматирования  заголовка, абзац, списки, шрифта.

Обратная связь: Другие учащиеся  дополняют, исправляют, оценивают ответ товарищей.   Учитель подводит итог и дает обратную связь.   (за точный, развернутый ответ на вопрос смайлик)       

А теперь давайте рассмотрим каждый пункт более детально. Итак, как понять, какой тип сайта Вам нужен? Тип или комбинация типов, которую вы выберете, будет зависеть от целей, которых вы хотите достичь с помощью вашего сайта и от его функциональности.

Набор полезных фраз для общения/письма:

•       Первый шаг – использовать текстовый редактор…

•       Во-вторых, …

•       Выполнив это, сохранить в формате…

•        

ФО «Ракета» За правильный ответ учащиеся получают «жетон».

Классный журнал

Журнал ТБ

Презентация

Билим ленд

Упражнение: Работа с текстами в программе редактирования веб-страниц.

https://bilimland.kz/ru/courses/informatika-ru/9-klass/lesson/rabota-s-tekstami-v-programme-redaktirovaniya-veb-stranicz

Памятка по HTML.

Середина урока

28мин

 Задание№2. Класс выполняет практическую работу.

 Практическая работа №1 (слайд 12) Индивидуальная работа

Цель практической работы: создать отформатированную web-страницу по предложенному образцу.

Ход работы

1. Открыть папку “istoriya” на своём компьютере (Приложение1). В папке два файла – “index.txt” и “образец.doc”. Также в папке есть файл “Памятка.doc” - подсказка для работы с тегами.

2. Открыть текстовый файл “index.txt” из папки “istoriya”.

Перед нами рассказ “Страницы истории: от абака до Pentium”. Весь текст идет единым сплошным массивом – читать его неудобно. Чтобы рассказ приобрел внешний вид как на образце, следует расставить нужные теги. Для этого надо сохранить текстовый файл в виде интернет-файла.

3. Сохранение файла: Открыть текстовый файл “index.txt”, далее Файл – Сохранить как… - Рабочий стол –> Имя файла – не изменять, Тип файла – html или htm.

Если нет доступа к типам файла, то в строке Имя файла исправить txt на html. Все дальнейшие действия будут происходить с файлом “index.html”.

4. Нажать правой кнопкой мыши по файлу – Открыть с помощью – Блокнот, перед Вами откроется текстовый файл. Далее нажать правой кнопкой мыши по файлу – Открыть с помощью – Google Chrome, перед Вами откроется окно браузера с текстом.

В Блокноте нужно расставить теги, а в окне браузера просматривать готовый результат. Для обновления страницы браузера надо нажать кнопку на клавиатуре “F5”.

5. Расставить теги заголовка – название статьи:

- “Страницы истории: от абака до Pentium” - <H1>;

- “Древнее время”, “XVI век”, “XVIII век”, “XIX век”, “Принципы фон Неймана”, “Типы транзисторов” - <H3>.

6. Разметить абзацы – тегом <P>, заголовки в абзацы не входят.

7. Слова: “абака”, “Паскалина”, “калькулятор” – выделить курсивом – тег <I>.

8. Фразу “Около 500 г. н. э.” - выделить полужирным начертанием – тег <B>.

9. Перечень “Принципы фон Неймана” оформить как нумерованный список - теги <UL><Li>.

10. Перечень “Типы транзисторов” оформить как маркированный список – теги <OL><Li>.

11. Обновите страницу браузера с результатом работы, Ваш результат должен совпасть с образцом.

Дескриптор:  Обучающийся

- различает виды форматирования

-прописывает тэги форматирования  

ФО – взаимооценивание по образцу. Прием «Светофор» учитель просит учащихся показывать карточками сигналы,, обозначающие их понимание или непонимание материала.

Дескриптор

•      демонстрирует навык использования тегов при работе с текстом <h1>, <h2>,<p>, </cite>, <i>,<q>,<abbr>, <em>при создании собственной веб-странички;

•      выполняет форматирование гипертекстового документа;

•      оформляет заголовки разного уровня;

•      выделяет абзацы;

•      создает разного вида списки; демонстрирует навык использования тегов при работе со списком <ul>, <li>,<ol>при создании собственной веб-странички

•      применяет различное форматирование к тексту;

•      овладел навыками создания и сохранения HTML-документа.

Демонстрация работ учащимися. Каждый показывает свою страницу по работе с текстом, шрифтом , абзацем, списком, ссылкой

Самооценивание по критериям

Задание для закрепления темы:.

Компьютер

HTML

Блокнот

Презентация

Ссылка на видео

https://

Интерактивная доска

Конец урока

7 минут

Домашнее задание (слайд 13) Комментарии к домашнему заданию:

Из любой книги (учебника, журнала) выбрать отрывок текста, и на его основе создать гипертекстовый документ с элементами форматирования.

Рефлексия

Стратегия «Не законченное предложение»:

Сегодня на уроке

·         Я узнал…..

·         Я научился ….

·         Нужно продолжать …

·         Мне надо обратить внимание ….

Карты для рефлексии

Дифференциация – каким образом Вы планируете оказать больше поддержки? Какие задачи Вы планируете поставить перед более способными учащимися?

Оценивание – как Вы планируете проверить уровень усвоения материала учащимися?

Здоровье и соблюдение техники безопасности

Дифференциация может быть выражена в подборе заданий, в ожидаемом результате от конкретного ученика, в оказании индивидуальной поддержки учащемуся, в подборе учебного материала и ресурсов с учетом индивидуальных способностей учащихся (Теория множественного интеллекта по Гарднеру).

Дифференциация может быть использована на любом этапе урока с учетом рационального использования времени.

Используйте данный раздел для записи методов, которые Вы будете использовать для оценивания того, чему учащиеся научились во время урока.

Здоровье сберегающие технологии.

Используемые физминутки и активные виды деятельности.

Пункты, применяемые из Правил техники безопасности на данном уроке.  

Рефлексия по уроку

Были ли цели урока/цели обучения реалистичными?

Все ли учащиеся достигли ЦО?

Если нет, то почему?

Правильно ли проведена дифференциация на уроке?

Выдержаны ли были временные этапы урока?

Какие отступления были от плана урока и почему?

Используйте данный раздел для размышлений об уроке. Ответьте на самые важные вопросы о Вашем уроке из левой колонки. 

Общая оценка

Какие два аспекта урока прошли хорошо (подумайте как о преподавании, так и об обучении)?

1:

2:

Что могло бы способствовать улучшению урока (подумайте как о преподавании, так и об обучении)?

1:

2:

Что я выявил(а) за время урока о классе или достижениях/трудностях отдельных учеников, на что необходимо обратить внимание на последующих уроках?