Урок по информатике "Создание веб -страничке в HTML "

Дело не в том чтобы знать много,

а в том, чтобы знать из всего того, что можно знать, самое нужное. 

ЛЕВ ТОЛСТОЙ

Введение

Интернета

празднуется

Международный День  ИНТЕРНЕТА  пытались ввести несколько раз в разные даты, но ни одна из них так и не стала традиционной.

Введение

До этого дня существовала 

ЭЛЕКТРОННАЯ ПОЧТА , новостные рассылки и перекачка файлов.

А  17 МАЯ 1991 Г  был утвержден стандарт для страниц 

WWW

  ( англ. .  

World Wide Web ).

Введение

В России «прижилась».

дата

30 сентября

Узбекистан

29 апреля

Украина

14 декабря

Введение

27 января

мировое сообщество

отмечает

« Международный день

БЕЗ ИНТЕРНЕТА ».

Создание

веб –странички

В HTML

Дата : апрель 2014

Класс : 12 (реальный )

Дисциплина : информатика

Длительность – 45 минут

Преподаватель : Быстрова В.Л

Цели урока

• Познакомиться с языком HTML
• Закрепить навыки по созданию простейшей web-стране
• Познакомиться с тэгами:

Для форматирования шрифта;

Для изменения имени веб –страницы

Для форматирования цвета веб -страницы

• Для форматирования шрифта; Для изменения имени веб –страницы Для форматирования цвета веб -страницы
• Для форматирования шрифта; Для изменения имени веб –страницы Для форматирования цвета веб -страницы
• Для форматирования шрифта; Для изменения имени веб –страницы Для форматирования цвета веб -страницы

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

«Создание простейшей Web – страницы»

План работы урока

Введение

• Знакомство с HTML (справка )
• Просмотр образца веб -странички
• Общая структура документа ( работа с учебником)

4.Практика , работа за компьютером :

Создание новой веб-стр с расширением .HTML

- создание папки

- создание пустой веб –странички

- изменение фона веб –странички

- смена имени веб –странички

- текст ,форматирование текста

6.Подведение итогов

7.Оценивание

8.Д.З

Знакомство с HTML

Самым распространенным веб –документом являются

ДОКУМЕНТЫ HTML .

HTML был изобретён в 1989 году учёным, Тимом Бёрнсом-Ли в стенах Европейского Центра ядерных исследований в Женеве (Швейцария)и предназначался для облегчения обмена документами между учёными различных университетов .

Проект имел больший успех. Этим изобретением HTML он заложил основы современной сети Internet .

Знакомство с HTML

HTML это язык, который позволяет представлять

информацию в Internet.

То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста . 

HTML (от англ.  HyperText Markup Language  —

« язык гипертекстовой разметки ») —

стандартный язык разметки

  документов во Всемирной паутине.

В настоящее время  Консорциум Всемирной Паутины  разработал  HTML версии 5 .  

Просмотр веб –странички

Просмотр веб –странички

Просмотр веб –странички

Просмотр веб –странички

Быстрова Виорика Леонидовна учитель физики и информатики Комрат лицей им.Н.Третьякова физика в гимназическом звене : 7,8,9 физика в лицейском звене :10,11,12 информатика в лицейском звене :10,11,12 учителя математики :Орлова,Кальчишкова ,Домущу чителя физики : Быстрова ,Кичук чителя информатики: Быстрова ,Кальчишкова ,Домущу Мои любимые фото Программа на языке HTML для указанной странички" width="640"

TEXT=YELLOW

Быстрова Виорика Леонидовна

учитель

физики и информатики

Комрат лицей им.Н.Третьякова

физика в гимназическом звене : 7,8,9

физика в лицейском звене :10,11,12

информатика в лицейском звене :10,11,12

• учителя математики :Орлова,Кальчишкова ,Домущу

• чителя физики : Быстрова ,Кичук

• чителя информатики: Быстрова ,Кальчишкова ,Домущу

Мои любимые фото

Программа

на языке HTML

для указанной странички

Структура HTML-документа

HTML  — теговый язык разметки документов.

Любой документ на языке HTML представляет собой набор элементов. Начало и конец каждого элемента обозначается специальными пометками —  тегами .

" . Элементы могут быть пустыми , то есть не содержащими никакого текста и других данных . Кроме того, элементы могут иметь  атрибуты , определяющие какие-либо их свойства .." width="640"

Структура HTML-документа

Тэг - это метки , которую вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все тэги имеют одинаковый формат:

они начинаются знаком " и заканчиваются знаком "" .

Элементы могут быть пустыми , то есть не содержащими никакого текста и других данных .

Кроме того, элементы могут иметь  атрибуты , определяющие какие-либо их свойства ..

Структура HTML-документа

Пример

первая строка любой веб –странички в блокноте начинается (открывается) словами

Последняя строка любой веб –странички в блокноте заканчивается (закрывается ) словами

Пример :

Структура HTML-документа- работа

с учебником работа с учебником

Учебник : Информатика 12класс , стр 124

название веб-странички

информация веб-сайта – раздел текста документа

Главное правило

при создании веб –странички

• Создание папки на рабочем столе
• Программа пишется в блокноте
• Программа сохраняется в блокнот t с расширением .HTML и типом «Все файлы»
• Результат работы тоже можно посмотреть в папке

На рабочем столе

создать папку

под именем

« 12 – б класс »

• Создание папки

• Открыть блокнот
• Набираем программу
• Сохраняем в папке « 12б» на рабочем столе

2.Создание новой

веб- стр

с расширением .HTML

название веб-странички

информация веб-сайта – раздел текста документа

• Открыть папку
• Что видим…
• 2 лкм по пиктограмке
• Что видим …
• Есть вопросы …

• Открыть программу в блокноте
• В строке «Заголовок документа » написать

информатика +физика

название веб-странички

3.Сохранить изменения и посмотреть результат

Немного теории

Браузер читает HTML так, как читаете его вы:

сверху вниз и слева направо .

Таким образом, HTML-документ

начинается и заканчивается тем,

чем должен

начинаться и заканчиваться текст.

Главное правило :

При изменении содержимого веб – стр

не забывать у имени веб –стр

ставить расширение .HTML

• Открыть документ в блокноте
• Добавить

физика+ информатика

BGCOLOR= coral

BODY

HTML

aqua – голубой,

blue – синий,

chartreuse – салатовый ,

blueviolet – фиолетовый

darkgreen –темнозеленый

darkorange –оранжевый

gold –желтый

lavender –серый

sienna –коричневый

Coral - цвет коралловый

BGCOLOR – смена фона веб-странички

6.Заполнение информацией

веб –странички

Работа с учебником

Стр 126-127

ПРИМЕР :

Я – ученик 12 класса .

Живу в г.Комрат.

Мне 18 лет

Живу в г.Комрат. I I Мне 18 лет I " width="640"

Пояснения :

-жирный шрифт

- курсив (наклонный) шрифт

-пропустить одну строчку

- абзац

gold - цвет странички - желтый

Программа :

gold

Я – ученик 12 класса .

I Живу в г.Комрат. I

I Мне 18 лет I

Отформатируем текст : размер и цвет

:10 ,8,6 - размер шрифта

RED , BLUE, BLUEVIOLET– цвет букв

Пояснения :

gold

Я – ученик 12 класса .

Живу в г.Комрат.

Мне 18 лет

Программа :

• Что изучали
• Чему научились
• Что получилось
• Что еще хотели бы знать

Создать веб –страничку по следующим критериям :

• «Чудо» -название странички
• Содержимое :

* 5 предложений ,

*каждое предложение на новой строке со своим

форматом и цветом

* интервал между строками – 2 строки