Умение работать с языками 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 существует шесть уровней заголовков: <H1> – наиболее важный,< H6> – наименее важный (слайд 5).
Заголовок выводится браузером, в отдельной строке жирным шрифтом. Чем выше уровень заголовка, тем более крупными буквами он отображается (слайд 6).
Абзац. В начале и в конце абзаца ставится тег <P> (слайд 7).
Горизонтальная линия. Части текста можно отделять друг от друга горизонтальной линией с помощью тега <HR> (слайд 8).
Списки. Структура создания списков однотипна – весь список целиком помещается внутрь тега-контейнера <OL> (для нумерованного списка) или <UL> (для маркированного). Начало каждой строчки списка помечается тэгом <Li> (слайд 9, 10).
Форматирование текста. Виды форматирования текста: полужирный <B>, курсив <I>, подчеркнутый <U> (слайд 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” - <H1>;
- “Древнее время”, “XVI век”, “XVIII век”, “XIX век”, “Принципы фон Неймана”, “Типы транзисторов” - <H3>.
6. Разметить абзацы – тегом <P>, заголовки в абзацы не входят.
7. Слова: “абака”, “Паскалина”, “калькулятор” – выделить курсивом – тег <I>.
8. Фразу “Около 500 г. н. э.” - выделить полужирным начертанием – тег <B>.
9. Перечень “Принципы фон Неймана” оформить как нумерованный список - теги <UL><Li>.
10. Перечень “Типы транзисторов” оформить как маркированный список – теги <OL><Li>.
11. Обновите страницу браузера с результатом работы, Ваш результат должен совпасть с образцом.
4. Подведение итогов урока, выставление оценок
На этом уроке мы выполнили практическую работу по форматированию гипертекстового документа. Научились оформлять заголовки разного уровня; выделять абзацы; создавать разные виды списков: маркированный и нумерованный; применять различное форматирование к тексту.
Овладели навыками создания и сохранения HTML-документа.
5. Домашнее задание (слайд 13)
Из любой книги (учебника, журнала) выбрать отрывок текста, и на его основе создать гипертекстовый документ с элементами форматирования.