Форматирование web-страницы

Разделы: Информатика, Конкурс «Презентация к уроку»


Презентация к уроку

Загрузить презентацию (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 существует шесть уровней заголовков: <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)

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

3.12.2014