- Буданова Анна Владимировна, учитель информатики
Презентация к уроку
Загрузить презентацию (823,3 кБ)
Внимание! Предварительный просмотр слайдов используется исключительно в ознакомительных целях и может не давать представления о всех возможностях презентации. Если вас заинтересовала данная работа, пожалуйста, загрузите полную версию.
Умение работать с языками HTML и CSS, создавать
сайты, наполнять web-страницы контентом в
информационном мире стало актуально за счёт
роста большого количества социальных сетей,
блогов, форумов, сайтов с открытыми редакторами
гипертекста которые активно пользуются языками
разметки гипертекста на уровне простого
обывателя.
Урок разработан по курсу Информатика и ИКТ в 9
классах, относится к главе “Основы языка
гипертекстовой разметки документов”. Тема
“Форматирование web-страницы” — один из
уроков-практикумов, который подводит учащихся к
завершающему этапу главы – творческому заданию
по созданию собственного сайта.
Урок делится на две части – теоретическую и
практическую. На теоретической части учащиеся
вместе с учителем повторяют пройденный ранее
материал; на практической части выполняют
самостоятельную работу.
ЦЕЛИ И ЗАДАЧИ УРОКА:
- Иметь представление о первичных основах языка
HTML. - Научиться создавать, сохранять и открывать HTML-файлы.
- Иметь представление об особенностях оформления
информационных блоков страницы; применять
полученные знания на практике. - Научиться оформлять заголовки, выделять абзацы,
добавлять разные виды списков, применять
различное форматирование к тексту.
ОБОРУДОВАНИЕ:
- персональные компьютеры учащихся;
- компьютер учителя;
- мультимедийный проектор.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ:
- любой текстовый редактор (Блокнот, WordPad, MS Word или
программа с подсветкой синтаксиса, например,
Notepad++); - любой интернет-браузер (например, Google Chrome или
Internet Explorer).
Учебный и раздаточный материал:
- презентация к уроку;
- памятка по HTML.
План урока:
1. Организационный момент
2. Актуализация знаний. Постановка целей урока
3. Практическая работа
4. Подведение итогов урока, выставление оценок
5. Домашнее задание
Ход урока
1. Организационный момент
Проверка готовности учеников к уроку.
2. Актуализация знаний. Постановка целей урока
На данном уроке мы продолжаем изучение раздела
“Основы языка гипертекстовой разметки
документов”.
На прошлых уроках мы узнали, какими тегами
обозначаются заголовки, как выделяются абзацы и
списки на web-страницах.
На сегодняшнем уроке мы будем выполнять
практическую работу, опираясь на полученные
ранее знания.
Тема нашего урока “Форматирование
web-страницы” (слайд 3).
Вопросы классу.
Какие действия обозначает термин
“форматирование”?
Форматирование — изменение внешнего вида,
например, текста (стиля, начертания, добавление
эффектов) (слайд 4).
Что называют Web-страницами?
WEB-страница – это гипертекстовый документ (слайд
4).
Что мы будем делать на уроке?
Изменять внешний вид гипертекстового
документа.
С помощью чего можно изменить внешний вид
гипертекстового документа?
С помощью тегов – управляющих кoдов (слайд 4).
Повторим теги, которые пригодятся на данном
уроке.
Заголовки. В языке HTML существует шесть
уровней заголовков:
– наиболее важный,< H6> – наименее важный (слайд 5).
Заголовок выводится браузером, в отдельной
строке жирным шрифтом. Чем выше уровень
заголовка, тем более крупными буквами он
отображается (слайд 6).
Абзац. В начале и в конце абзаца ставится
тег
(слайд 7).
Горизонтальная линия. Части текста можно
отделять друг от друга горизонтальной линией с
помощью тега
(слайд 8).
Списки. Структура создания списков
однотипна – весь список целиком помещается
внутрь тега-контейнера
- (для нумерованного
- (слайд
9, 10).Форматирование текста. Виды
форматирования текста: полужирный , курсив
, подчеркнутый (слайд 11).3. Практическая работа (слайд 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” —
;
— “Древнее время”, “XVI век”, “XVIII век”, “XIX
век”, “Принципы фон Неймана”, “Типы
транзисторов” —
.
6. Разметить абзацы – тегом
, заголовки в
абзацы не входят.7. Слова: “абака”, “Паскалина”, “калькулятор”
– выделить курсивом – тег .8. Фразу “Около 500 г. н. э.” — выделить полужирным
начертанием – тег .9. Перечень “Принципы фон Неймана” оформить
как нумерованный список — теги- .
10. Перечень “Типы транзисторов” оформить как
маркированный список – теги- .
11. Обновите страницу браузера с результатом
работы, Ваш результат должен совпасть с образцом.4. Подведение итогов урока, выставление оценок
На этом уроке мы выполнили практическую работу
по форматированию гипертекстового документа.
Научились оформлять заголовки разного уровня;
выделять абзацы; создавать разные виды списков:
маркированный и нумерованный; применять
различное форматирование к тексту.Овладели навыками создания и сохранения
HTML-документа.5. Домашнее задание (слайд 13)
Из любой книги (учебника, журнала) выбрать
отрывок текста, и на его основе создать
гипертекстовый документ с элементами
форматирования.
- .
- .
списка) или
- (для маркированного). Начало
каждой строчки списка помечается тэгом