Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Форматирование текста на Web - странице
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

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

Выбранный для просмотра документ Конспект урока по информатике.docx

библиотека
материалов

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

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

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

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

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

Цели урока:

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

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

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

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

Ход урока:

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

  • Приветствие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбранный для просмотра документ Приложение Дополнительное задание.docx

библиотека
материалов

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

Задание 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


Выбранный для просмотра документ Приложение Форматирование шрифта.docx

библиотека
материалов

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

Формат

Значение аргументов (вместо звездочки *)

Жирный

<B> текст B>


Подчеркнутый

текст


Курсив

<I> текст I>


Размер шрифта (от 0 до 7)

*> текст

0, 1, 2 , 3, 4, 5 ,6 ,7

Цвет шрифта (задается названием цвета или его кодом )

*”> текст

См. ниже значения

Гарнитура шрифта (задается название шрифта)

текст

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>


Подчеркнутый

текст


Курсив

<I> текст I>


Размер шрифта (от 0 до 7)

*> текст

0, 1, 2 , 3, 4, 5 ,6 ,7

Цвет шрифта (задается названием цвета или его кодом )

*”> текст

См. ниже значения

Гарнитура шрифта (задается название шрифта)

текст

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



Выбранный для просмотра документ Приложение заполнить пропуски.docx

библиотека
материалов

html>

первые стихи

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

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

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

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

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



html>

первые стихи

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

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

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

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

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

Выбранный для просмотра документ Форматирование Web-страницы.ppt

библиотека
материалов
Коммуникационные технологии Информатика 8 класс
Что мы знаем о языке HTML ? HTML - язык разметки гипертекста ТЕГ - элемент HT...
Структура HTML- документа   текст  Заголовок документа   Тело документа  Назв...
Форматирование текста на Web-странице
Форматирование текста на Web-странице Заголовки. Размер шрифтов заголовков за...
Атрибут Синтаксис тэга с атрибутом:  Атрибут – это компонент тега, содержащий...
Шрифт. Параметры форматирования шрифта задаются с помощью тэга   и его атрибу...
Выравнивание текста. Задается с помощью атрибута ALIGN. ALIGN = left- выравни...
Форматирование текста на Web-странице Абзацы. Разделение текста на абзацы про...
Тэг  - Используется для перехода на новую строку. Форматирование текста на We...
Тэг  - создает жирный текст. Тэг  - создает наклонный текст (курсив). Формати...
Привет! Это моя первая страничка!    В лесу родилась елочка.  В лесу она ро...
13 1

Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Описание презентации по отдельным слайдам:

№ слайда 1 Коммуникационные технологии Информатика 8 класс
Описание слайда:

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

№ слайда 2 Что мы знаем о языке HTML ? HTML - язык разметки гипертекста ТЕГ - элемент HT
Описание слайда:

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

№ слайда 3 Структура HTML- документа   текст  Заголовок документа   Тело документа  Назв
Описание слайда:

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

№ слайда 4
Описание слайда:

№ слайда 5 Форматирование текста на Web-странице
Описание слайда:

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

№ слайда 6 Форматирование текста на Web-странице Заголовки. Размер шрифтов заголовков за
Описание слайда:

Форматирование текста на 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. ALIGN = left- выравнивание по левому краю: ALIGN = right - выравнивание по правому краю: ALIGN = center Выравнивание по центру Пример: <H1 ALIGN = “center”>текст</H1> Форматирование текста на Web-странице ALIGN выравнивание текста. ALIGN = left- по левому краю: ALIGN = right - по правому краю: ALIGN = center -по центру

№ слайда 10 Форматирование текста на Web-странице Абзацы. Разделение текста на абзацы про
Описание слайда:

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

№ слайда 11 Тэг  - Используется для перехода на новую строку. Форматирование текста на We
Описание слайда:

Тэг <br> - Используется для перехода на новую строку. Форматирование текста на 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>В лесу родилась елочка. <br> В лесу она росла. </font> <p align=right> <font face = "Arial" size=5 color = green> Зимой и летом стройная, <br> зеленая была. </font> <p align=left> <font face = "Arial" size=5 color = olive> Метель ей пела песенку: <br> «Спи, елочка, бай-бай». </font> <p align=center> <font face = "Arial" size=5 color = red> Мороз снежком укутывал: <br> «Смотри, не замерзай!» </i></font>


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 14.04.2016
Раздел Информатика
Подраздел Конспекты
Просмотров374
Номер материала ДБ-030567
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх