yrok IVT

Тема урока: Форматирование Web – страниц с помощью HTML
Класс: 11 класс
Цель урока: создание web-страницы с текстовым и графическим
содержанием, где применены теги для форматирования текста и графики
Задачи:
образовательные: познакомиться с тегами, которые используют для
форматирования текста и графики; развивать культуру написания гипертекстовых
документов; научиться создавать Web-страницы на основе HTML с элементами Web
- дизайна;
воспитательные: совершенствовать личностные качества: аккуратность,
внимательность, бережное отношение к своему здоровью
развивающие: развивать логику, умение анализировать, сравнивать, делать
выводы, высказывать свою мысль.
Оборудование к уроку: проектор, экран, интерактивная доска
Программное и методическое обеспечение:
Прилагаемые медиаматериалы: презентация, файлы-задания для инт. доски
Проект урока:
1. Организационный момент - (3 мин)
2. Актуализация знаний - (5 мин)
3. Изучение нового материала - (10 мин)
4. Практическая работа (приобретение и совершенствование навыков) - (15
мин)
5. Рефлексия (закрепление материала) – (3 мин)
6. Задание на дом - (1 мин)
7. Итог урока - (1 мин)
ХОД УРОКА
ОРГАНИЗАЦИОННЫЙ МОМЕНТ (3 мин)
Формулирование обучающимися темы, учебных задач
Здравствуйте! Сегодня на уроке нам предстоит спланировать совместную
деятельность, чтобы поставленные цели соответствовали достигнутым результатам,
для этого мы должны совершить ряд действий.
Вопросы ученикам:
Что мы понимаем под изменение внешнего вида текста, но не содержания
Что мы понимаем под процессом оформления текста. – ответ:
ФОРМАТИРОВАНИЕ
Из каких структурных элементов состоит web – сайт – ответ: WEB –
СТРАНИЦ
С помощью какого языка мы с вами создавали страницы на прошлом уроке – с
помощью HTML)
Тема урока - Форматирование Web – страниц с помощью HTML
Определение цели и результата урока Какие цели и задачи мы с вами должны сегодня реализовать на уроке
познакомиться с тегами, которые используют для форматирования текста и
графики и научить создавать Web-страницы на основе HTML с элементами
Web - дизайна
1
ПОВТОРЕНИЕ (5 мин) – Тест - ПРОВЕРЬ СЕБЯ – 8 вопросов –
(фронтальный опрос с применением интерактивной доски) – эстафета «ТЫ – МНЕ
– Я – ТЕБЕ» (вопрос – ответ)
1. Информация во Всемирной паутине реализуется
Тегов
Языка HTML
Веб-сайтов
2. Пара тэгов, заключенная в угловые скобки
Браузер
Гиперссылка
Контейнер
3. Веб-сайты создаются с помощью языка
Visual Basic
Turbo Pascal
HTML
4. Программа для просмотра Web-страниц
Web-редактор
Turbo Pascal
Браузер
5. Web-страницы объединяются между собой с помощью
Сервера
Браузера
Гиперссылок
6. Все файлы и приложения сайта (если их очень много) должны размещаться
Внутри одной папки
В разных папках
Внутри одной папки, в которой созданы вложенные папки
7. Для каждой страницы вашего сайта должен быть создан
Отдельная папка
Отдельный файл
Один файл для всех страниц
8. Web-редактор - это программа для
Просмотра Web-страниц
Создания Web-страниц
Создания гиперссылок
ИТОГИ ПРОВЕРКИ
ИЗУЧЕНИЕ НОВОГО МАТЕРИАЛА (10 мин)
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт
черного цвета на белом фоне. С помощью тэгов можно задать различные параметры
форматирования текста. Примеры
Что значит отформатировать текст на web-странице? Под
форматированием текста в HTML понимается придание текстовому содержимому и
графическим элементам web-страницы красивого и опрятного вида. Это может
быть:
 придание фону страницы определенного цвета
 добавление горизонтальной разметки (линии)
 выравнивание элементов текста и графики (по
левому, правому краю, середине или центру).
 придание тексту определённого цвета, размера
шрифта, начертания.
 добавление графики
ТЕОРИЯ – СТРУКТУРА HTMLДОКУМЕНТА – конспект ученику
Тэг BODY – общие свойства страницы
Фон
страницы
2
<hr
align="center"> Выровнять по центру
<hr align="right"> Выровнять по правому краю
<hr align="justify"> Выровнять по ширине
<hr align="left"> Выровнять по левому краю
<hr size="3"> Толщина разделительной линии
<hr noshade> Разделительная линия без тени
<hr align="right" width="450"> Ширина в
пикселях
<hr size="3" width="50%" align="center">
Заголовки: H1 … H6
Тег FONT – свойства блока текста
Цвета:
Стили оформления
жирный (bold)
курсив (italic)
подчеркивание (underline)
<B>Вася</B>
<I>Вася</I>
<U>Вася</U>
Вася
Вася
Вася
3
зачеркивание (strike out)
<S>Вася</S>
Вася
верхний индекс (superscript)
Вася<SUP>2</SUP>
Вася2
нижний индекс (subscript)
Вася<SUB>2</SUB>
Вася2
Форматы рисунков
GIF (Graphic Interchange Format)
• сжатие без потерь
• анимация
• прозрачные области
• только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPG (JPEG - Joint Photographer Expert Group)
• сжатие с потерями
• только True Color (16,7 млн. цветов)
• нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
• сжатие без потерь
• с палитрой (PNG-8) и True Color (PNG-24)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки
Рисунки в документе
Внимание! Файл картинки УЖЕ должен быть размещен в ВАШЕМ
каталоге
из той же папки: <IMG SRC="flag.jpg">
из другой папки: <IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
с другого сервера: <IMG SRC="http://www.vasya.ru/img/flag.jpg">
Выравнивание
<IMG SRC="flag.jpg"
ALIGN="left">
Другие атрибуты
ПРАКТИЧЕСКАЯ РАБОТА - (15 мин)
Итак, приступаем к форматированию текста. Мы с вами познакомились с
тегами для форматирования элементов веб – страницы и теперь добавим текст в код
программы.
4
Как мы с Вами уже определились ранее результатом нашего урока – будет веб
– страница, посвященная Женеве, (городу на юго-западе, второй столице
Швейцарии (столица - Берн), столице одноимённого франкоязычного КАНТОНА в Швейцарии наименование территориальных федеральных единиц, где имеются
собственная конституция, органы законодательной и исполнительной власти.). Это
не реклама какого-то города, просто в данный момент мне в руки попался
интересный познавательный материал. Меня заинтересовало то, что в этом городе
расположены штаб-квартиры многочисленных международных организаций, в том
числе Европейского отделения ООН, Красного Креста, ВТО, ВОЗ, ЦЕРН, до 1946
года — Лиги Наций.
Создадим код нашей веб - страницы с элемента форматирования и дизайна в
программе БЛОКНОТ, учитывая те требования, которые представлены в задании и
продемонстрируем полученные результаты в виде файла – с помощью БРАУЗЕРА
Не забывайте о правилам и гигиенических нормах при работе на ПК
Задание - Практикум
В папке 11 класс/ Задание / на Рабочем столе находится текстовый файл
«Женева», в котором дается небольшая информация об этом городе и файл
картинки «Женева», с изображением самого города.
1. Создайте в Блокноте WEB-страницу, содержащую этот текст под
названием ЖЕНЕВА
2. Расположите информацию на желтом фоне.
3. Добавьте горизонтальный разделитель (линию) после названия страницы.
4. Вставьте картинку города, размером 150 * 200 пикселей, расположив её
посередине перед текстом.
5. Добавьте в текст абзац: выравнивание по центру, цвет шрифта - красный,
размер шрифта = 5
(разделите его на 3 части)
5
РЕФЛЕКСИЯ – ЗАКРЕПЛЕНИЕ МАТЕРИАЛА (3 мин)
ПРОВЕРКА ЗНАНИЯ ТЕГОВ – применение интерактивной доски
Задание. Установить соответствие между строками в таблице:
Какой тэг соответствует, какой строке в таблице.
ДОМАШНЕЕ ЗАДАНИЕ (1 мин)– повторить теги - будет проверочная
работа, индивидуальное задание
ИТОГ УРОКА (1 мин)
6
Сегодня познакомились с тегами для форматирования текста. Научились их
применять. На уроке очень хорошо работали … (Ф И учеников).
СПАСИБО ЗА УРОК! ДО СВИДАНИЯ!
7