Форматирование текста на Web - странице

Конспект урока  по информатике в 8 классе.

Учитель: Медведева Светлана Александровна

Тема урока: «Форматирование текста на Web - странице».

Тип урока: Урок – изучение и первичное закрепление нового материала.

Оборудование: Компьютеры, мультимедиа проектор, интерактивная доска.

Цели урока:

- Образовательная: Освоение новых приемов по редактированию Web – страниц в текстовом редакторе блокнот.

- Развивающая: Способствовать  развитию памяти, внимания, логического мышления.

- Воспитательная: Создание условий для воспитания бережного отношения к технике, привитие интереса к изучаемому предмету.

Ожидаемые результаты: Дети должны усвоить приемы редактирования документа с помощью тегов форматирования. Воспитываем бережное отношение к технике, трудолюбие.

Ход урока:

1.                 Организационная часть.(3 минуты)

·Приветствие

·Проверка отсутствующих

2.                 Актуализация знаний по изучаемой теме (8 минут)

Учитель: Итак, ребята, мы с вами рассматриваем тему «Коммуникационные технологии» вот уже в течение нескольких уроков. На прошлом уроке мы познакомились с созданием собственных web – страничек. Я предлагаю вашему вниманию тест, состоящий из 5 вопросов. Включаем компьютеры и загружаем программу MyTestPro и получаем тест по сети «Структура Web-страницы».

Ученики: Делают тест, обмениваются.

Учитель: Итак, давайте вспомним, что же мы знаем о языке HTML?(слайд 2)

1)                Что такое HTML?

2)                Что такое тег?

3)                Что такое гипертекст?

4)                В какой программе создаются HTML  - страницы?

Ученики  отвечают на вопросы.

Учитель: Вспомним как выглядит структура HTML документа. (слайд 3)

Какое расширение должны иметь HTML документы?

То есть готовый HTML документ представляет из себя web -  страницу.

Перед вами две страницы, с одним и тем же текстом. Однако, они отличаются. Чем они отличны? (слайд 4)

Ученики отвечают.

3.                 Объяснение нового материала (14 минут)

Учитель: Определите тему урока «Форматирование текста на web странице» (слайд 5)

Записываем тему урока. Рассмотрим основные теги:

1.                 Тэг заголовка (слайд 6)

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

3.                 Так, например, используется следующий тэг - Font и его атрибуты (слайд 8)

4.                 Атрибут выравнивания текста (слайд 9)

5.                 Тэг абзацы (слайд 10).

6.                 Тэги изменения текста (слайд 11-12)

Ученики  записывают в тетрадь.

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

Перед нами код этой страницы (слайд 13).

Добавляем теги и получаем отформатированную страницу.

А сейчас мы запишем домашнее задание и приступим к практическому применению изученного материала.

Ученики записывают домашнее задание. (прочитать п. 3.7.3. продолжить разрабатывать свой проект)

Учитель объясняет практическое задание.

7.     Практическое закрепление изученной темы. (15 минут)

8.     Для тех, кто быстро изменил свою страницу, раздается дополнительное задание.

Ученики присаживаются за компьютеры и выполняют практическую работу.

9.     Зарядка для глаз, подведение итогов урока, заполнение карточек рефлексии.

Дополнительное задание.

Задание 1. Вставьте после фразы «Привет! Это моя первая страничка!» два заголовка:

Заголовок первого уровня: Меня зовут (впишите свое имя).

Заголовок второго уровня: Я учусь в классе (впишите 11 класс).

Заголовок третьего уровня: Это моя любимая песенка.

Задание 2. Выровняйте заголовки следующим образом:

Заголовок первого уровня по левому краю,

Заголовок второго уровня по центру,

Заголовок третьего уровня по правому краю.

Задание 3. Отформатируйте текст:

1. Подчеркните фразу «Зимой и летом стройная».
2. Выделите все «елочки» жирным курсивом.
3. Измените, размер шрифта на 4 единиц для фразы «Смотри, не замерзай!».
4. Измените, для первого абзаца гарнитуру шрифта на Comic Sans MS.
5. Измените, для второго абзаца гарнитуру шрифта на Courier New
6. Измените, для третьего абзаца гарнитуру шрифта на Monotype Corsiva

Дополнительное задание.

Заголовок первого уровня: Меня зовут (впишите свое имя).

Заголовок второго уровня: Я учусь в классе (впишите 11 класс).

Заголовок третьего уровня: Это моя любимая песенка.

Задание 2. Выровняйте заголовки следующим образом:

Заголовок первого уровня по левому краю,

Заголовок второго уровня по центру,

Заголовок третьего уровня по правому краю.

Задание 3. Отформатируйте текст:

1. Подчеркните фразу «Зимой и летом стройная».
2. Выделите все «елочки» жирным курсивом.
3. Измените, размер шрифта на 4 единиц для фразы «Смотри, не замерзай!».
4. Измените, для первого абзаца гарнитуру шрифта на Comic Sans MS.
5. Измените, для второго абзаца гарнитуру шрифта на Courier New
6. Измените, для третьего абзаца гарнитуру шрифта на Monotype Corsiva

Дополнительное задание.

Заголовок первого уровня: Меня зовут (впишите свое имя).

Заголовок второго уровня: Я учусь в классе (впишите 11 класс).

Заголовок третьего уровня: Это моя любимая песенка.

Задание 2. Выровняйте заголовки следующим образом:

Заголовок первого уровня по левому краю,

Заголовок второго уровня по центру,

Заголовок третьего уровня по правому краю.

Задание 3. Отформатируйте текст:

1. Подчеркните фразу «Зимой и летом стройная».
2. Выделите все «елочки» жирным курсивом.
3. Измените, размер шрифта на 4 единиц для фразы «Смотри, не замерзай!».
4. Измените, для первого абзаца гарнитуру шрифта на Comic Sans MS.
5. Измените, для второго абзаца гарнитуру шрифта на Courier New
6. Измените, для третьего абзаца гарнитуру шрифта на Monotype Corsiva

html>

<head>

<title> первые стихи </title>

</head>

<body>

<_____________________> <__________________________________________> Привет! Это моя первая страничка! <_________>

<_____________________> <______________________________________________>  <_____>В лесу родилась елочка. <____> В лесу она росла.  <_____>

<_____________________> <_______________________________________________> Зимой и летом стройная, <____> зеленая была.  <_____>

<_____________________> <_______________________________________________> Метель ей пела песенку: <____> «Спи, елочка, бай-бай».  <_____>

<_____________________> <_______________________________________________> Мороз снежком укутывал: <____> «Смотри, не замерзай!» <_____><_____>

</body>

</html>

html>

<head>

<title> первые стихи </title>

</head>

<body>

<_____________________> <__________________________________________> Привет! Это моя первая страничка! <_________>

<_____________________> <______________________________________________>  <_____>В лесу родилась елочка. <____> В лесу она росла.  <_____>

<_____________________> <_______________________________________________> Зимой и летом стройная, <____> зеленая была.  <_____>

<_____________________> <_______________________________________________> Метель ей пела песенку: <____> «Спи, елочка, бай-бай».  <_____>

<_____________________> <_______________________________________________> Мороз снежком укутывал: <____> «Смотри, не замерзай!» <_____><_____>

</body>

</html>

Форматирование шрифта

Назначение	Формат	Значение аргументов (вместо звездочки *)
Жирный	<B> текст </B>
Подчеркнутый	<u>  текст </u>
Курсив	<I> текст </I>
Размер шрифта (от 0 до 7)	<FONT SIZE=*> текст </FONT>	0, 1, 2 , 3, 4, 5 ,6 ,7
Цвет шрифта (задается названием цвета или его кодом )	<FONT COLOR=”*”> текст </FONT>	См. ниже значения
Гарнитура шрифта (задается название шрифта)	<FONT FACE=”*”> текст </FONT>	Arial, Arial Black, Comic Sans MS, Monotype Corsiva, Courier New, Times New Roman и др.

Таблица значений цветов

Название	Код	Имя	Название	Код	Имя
черный	#000000	black	серебряный	#C0C0C0	silver
темно-бордовый	#800000	maroon	красный	#FF0000	red
зеленый	#008000	green	известь	#00FF00	lime
оливковый	#808000	olive	желтый	#FFFF00	yellow
темно-синий	#000080	navy	голубой	#0000FF	blue
фиолетовый	#800080	purple	фуксия	#FF00FF	fuchsia
чирок	#008080	teal	аква	#00FFFF	aqva
серый	#808080	gray	белый	#FFFFFF	white

Форматирование шрифта

Назначение	Формат	Значение аргументов (вместо звездочки *)
Жирный	<B> текст </B>
Подчеркнутый	<u>  текст </u>
Курсив	<I> текст </I>
Размер шрифта (от 0 до 7)	<FONT SIZE=*> текст </FONT>	0, 1, 2 , 3, 4, 5 ,6 ,7
Цвет шрифта (задается названием цвета или его кодом )	<FONT COLOR=”*”> текст </FONT>	См. ниже значения
Гарнитура шрифта (задается название шрифта)	<FONT FACE=”*”> текст </FONT>	Arial, Arial Black, Comic Sans MS, Monotype Corsiva, Courier New, Times New Roman и др.

Таблица значений цветов

Название	Код	Имя	Название	Код	Имя
черный	#000000	black	серебряный	#C0C0C0	silver
темно-бордовый	#800000	maroon	красный	#FF0000	red
зеленый	#008000	green	известь	#00FF00	lime
оливковый	#808000	olive	желтый	#FFFF00	yellow
темно-синий	#000080	navy	голубой	#0000FF	blue
фиолетовый	#800080	purple	фуксия	#FF00FF	fuchsia
чирок	#008080	teal	аква	#00FFFF	aqva
серый	#808080	gray	белый	#FFFFFF	white

• 1 слайд

  Коммуникационные технологии
  Информатика 8 класс
  

• 2 слайд

  Что мы знаем о языке HTML ?
  HTML - язык разметки гипертекста
  ТЕГ - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>
  ГИПЕРТЕКСТ – текст, содержащий ссылки на другие Web –страницы
  БЛОКНОТ – программа для создания Web – страниц
  
  

• 3 слайд

  Структура HTML- документа
  <HTML>
  <Head>
  <title>текст</title>
  </Head>
  Заголовок
  документа
  <body>
  
  
  </body>
  Тело
  документа
  </HTML>
  Название
  документа
  Код
  документа
  

• 4 слайд

• 5 слайд

  Форматирование текста на
  Web-странице
  

• 6 слайд

  Форматирование текста на Web-странице
  Заголовки. Размер шрифтов заголовков задается парами тэгов:
  <H1> текст</H1>
  <H2> текст</H2>
  <H3> текст</H3>
  <H4> текст</H4>
  <H5> текст</H5>
  <H6> текст </H6>
  
  <H1> текст</H1> …<H6> текст</H6> - Заголовки
  
  
  

• 7 слайд

  Атрибут
  Синтаксис тэга с атрибутом:
  <тэг атрибут="значение">
  
  Атрибут – это компонент тега, содержащий
  указания о том, как браузер должен
  воспринять и обработать тэг.
  
  

• 8 слайд

  Шрифт. Параметры форматирования шрифта задаются с помощью тэга <FONT> </FONT> и его атрибутов:
  SIZE – определяет размер шрифта;
  FACE – определяет гарнитуру шрифта;
  COLOR – определяет цвет шрифта.
  Пример:
  <font size=7 color=green face=“aril”> Привет! </font>
  
  Форматирование текста на Web-странице
  <FONT> </FONT> - Форматирование шрифта
  и его атрибуты:
  SIZE – определяет размер шрифта;
  FACE – определяет гарнитуру шрифта;
  COLOR – определяет цвет шрифта.
  
  

• 9 слайд

  Выравнивание текста. Задается с помощью атрибута ALIGN.
  ALIGN = left- выравнивание по левому краю:
  ALIGN = right - выравнивание по правому краю:
  ALIGN = center Выравнивание по центру
  Пример: <H1 ALIGN = “center”>текст</H1>
  Форматирование текста на Web-странице
  ALIGN выравнивание текста.
  ALIGN = left- по левому краю:
  ALIGN = right - по правому краю:
  ALIGN = center -по центру
  
  

• 10 слайд

  Форматирование текста на Web-странице
  Абзацы. Разделение текста на абзацы происходит с помощью контейнера <p> </p>. Для каждого абзаца можно задать тип выравнивания и параметры форматирования шрифта.
  <P> </P> - Разделение текста на абзацы .
  

• 11 слайд

  Тэг
  - Используется для перехода на новую строку.
  Форматирование текста на Web-странице
  <BR> - Переход на новую строку.
  
  

• 12 слайд

  Тэг <b></b> - создает жирный текст.
  Тэг <i></i> - создает наклонный текст (курсив).
  
  Форматирование текста на Web-странице
  <i> Заголовок 3 Ещё меньше </i>
  <b> Заголовок 4 Маленький </b>
  Пример:
  

• 13 слайд

  <p align=center> <font face = "Arial Black" size=6 color = purple> Привет! Это моя первая страничка! </font>
  <p align=left> <font face = "Arial" size=5 color = blue> <i>В лесу родилась елочка.
  В лесу она росла. </font>
  <p align=right> <font face = "Arial" size=5 color = green> Зимой и летом стройная,
  зеленая была. </font>
  <p align=left> <font face = "Arial" size=5 color = olive> Метель ей пела песенку:
  «Спи, елочка, бай-бай». </font>
  <p align=center> <font face = "Arial" size=5 color = red> Мороз снежком укутывал:
  «Смотри, не замерзай!» </i></font>