Понедельник, 21.09.2020, 22:36
Ш  К  О  Л  А     П  И  Ф  А  Г  О  Р  А
      Предмет математики настолько серьезен, что нужно
не упускать случая, сделать его немного занимательным".
                                                                           Блез Паскаль
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
ПАМЯТКИ ПО МАТЕМАТИКЕ   ВЕЛИКИЕ МАТЕМАТИКИ   ТЕОРИЯ ЧИСЕЛ   МАТЕМАТИЧЕСКАЯ ЛОГИКА
УРОКИ МАТЕМАТИКИ В ШКОЛЕ


МАТЕМАТИЧЕСКАЯ КЛАДОВАЯ


В МИРЕ ЗАДАЧ
ЕГЭ ПО МАТЕМАТИКЕ
МАТЕМАТИКА В НАЧАЛЬНОЙ ШКОЛЕ
ВАРИ, КОТЕЛОК!
УДИВИТЕЛЬНАЯ МАТЕМАТИКА
ВЫСШАЯ МАТЕМАТИКА
В МИРЕ ИНТЕРЕСНОГО
Категории раздела
КОНСПЕКТЫ УРОКОВ МАТЕМАТИКИ [183]
ВНЕКЛАССНЫЕ МЕРОПРИЯТИЯ ПО МАТЕМАТИКЕ [81]
ЗАДАЧИ НА ВЫРОСТ [141]
НЕСТАНДАРТНЫЕ УРОКИ МАТЕМАТИКИ [26]
ДИДАКТИЧЕСКИЕ ИГРЫ НА УРОКЕ МАТЕМАТИКИ [37]
ИНФОРМАТИКА В ИГРАХ И ЗАДАЧАХ ДЛЯ ПЯТИКЛАССНИКОВ [120]
УЧЕБНЫЕ ПРОГРАММЫ ДЛЯ УЧИТЕЛЯ МАТЕМАТИКИ [5]
МАТЕМАТИКА В НАЧАЛЬНОЙ ШКОЛЕ [28]
КОНСПЕКТЫ УРОКОВ ИНФОРМАТИКИ [81]
ВНЕКЛАССНЫЕ МЕРОПРИЯТИЯ ПО ИНФОРМАТИКЕ [25]
ИЗ ОПЫТА РАБОТЫ УЧИТЕЛЯ ИНФОРМАТИКИ [10]
МУЛЬТИМЕДИА И ВИРТУАЛЬНЫЕ МИРЫ [20]
ПРЕЗЕНТАЦИИ ПО МАТЕМАТИКЕ [24]
ТЕОРИЯ ЧИСЕЛ [36]
СФЕРЛАНДИЯ [32]
ДИДАКТИЧЕСКИЙ МАТЕРИАЛ ПО ИНФОРМАТИКЕ [10]
В МИРЕ ЗАДАЧ [182]
УВЛЕКАТЕЛЬНАЯ ЭКСКУРСИЯ В МИР МАТЕМАТИКИ [30]
МАТЕМАТИКА В 10 КЛАССЕ [34]
ТРЕНИРОВОЧНЫЕ ЗАДАНИЯ ДЛЯ ПОДГОТОВКИ К ЕГЭ [155]
МЕТОДИЧЕСКИЕ НАРАБОТКИ [82]
ПРЕПОДАЕМ АЛГЕБРУ И НАЧАЛА МАТЕМАТИЧЕСКОГО АНАЛИЗА [143]
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКТ К УРОКАМ [27]
МИР МАТЕМАТИКИ [778]
ОНЛАЙН-УЧЕБНИК ИНФОРМАТИКИ. 6 КЛАСС [36]
ПОДГОТОВКА К ГИА [11]
САМОСТОЯТЕЛЬНЫЕ РАБОТЫ ПО АЛГЕБРЕ. 10 КЛАСС [45]
ПРЕЗЕНТАЦИИ ПО ИНФОРМАТИКЕ [26]
МАТЕМАТИКА В 5 КЛАССЕ [43]
МАТЕМАТИКА. 7 КЛАСС [69]
АЛГЕБРА. 8 КЛАСС [25]
МАТЕМАТИКА. 9 КЛАСС [9]
МАТЕМАТИЧЕСКИЕ ДИКТАНТЫ/АЛГЕБРА [29]
МАТЕМАТИЧЕСКИЕ ДИКТАНТЫ/ГЕОМЕТРИЯ [12]
ОЛИМПИАДЫ ПО МАТЕМАТИКЕ [55]
РАБОЧИЕ МАТЕРИАЛЫ К УРОКАМ ИНФОРМАТИКИ [90]
МАТЕМАТИЧЕСКИЕ ЧУДЕСА И ТАЙНЫ [70]
МАТЕМАТИКА 8 КЛАСС [9]
МАТЕМАТИКА. 6 КЛАСС [78]
ОБЪЕКТНО-ОРИЕНТИРОВАННОЕ ПРОГРАММИРОВАНИЕ [12]
ЕГЭ ПО МАТЕМАТИКЕ [0]
ИСТОРИЯ РАЗВИТИЯ МАТЕМАТИЧЕСКОЙ НАУКИ [47]
ГЕОМЕТРИЯ [0]
ГЕОМЕТРИЯ. 8 КЛАСС [36]
ТЕСТЫ ПО ИНФОРМАТИКЕ [31]
ЗАДАЧНИКИ ПО ИНФОРМАТИКЕ [26]
ЗАДАНИЯ ПОВЫШЕННОГО УРОВНЯ СЛОЖНОСТИ [29]
ЗАДАНИЯ ШКОЛЬНОЙ ОЛИМПИАДЫ ПО ИНФОРМАТИКЕ [7]
ПРОГРАММИРОВАНИЕ ДЛЯ ДЕТЕЙ [82]
Статистика

Онлайн всего: 8
Гостей: 8
Пользователей: 0
Форма входа

Главная » Файлы » КОНСПЕКТЫ УРОКОВ ИНФОРМАТИКИ

Урок информатики в 9 классе "Создание титульной страницы сайта"
05.01.2016, 00:01
Цель урока: разработать эскиз и приступить к созданию титульной страницы сайта.
  • Научиться:
    • создавать HTML-файлы;
    • оформлять заголовки;
    • управлять размером, гарнитурой и цветом шрифта;
    • выделять и выравнивать абзацы;
    • размещать графику на web-странице.

ХОД УРОКА

I. Актуализация знаний. Постановка целей урока

Учитель: На прошлом уроке мы приступили к знакомству с языком разметки гипертекстовых документов HTML, ввели понятия: "тег”, "атрибуты тега”, рассмотрели структуру HTML-файла и главные теги: "HTML”, "HEAD”, "TITLE”, "BODY” (учитель обращает внимание учащихся на таблицу "Структура HTML-документа”). Мы разработали проект нашего учебного сайта "Компьютер”. Решили, что наш сайт будет содержать 4 страницы.

Учитель: Перечислите, пожалуйста, названия страниц нашего сайта (диалог с учащимися, учащиеся перечисляют название страниц сайта и поясняют их содержание).

Учитель: Сегодня на уроке мы приступим к созданию первой страницы учебного сайта "Компьютер”.

II. Разработка эскиза титульной страницы

Учитель: Создадим эскиз титульной страницы сайта "Компьютер” (обсуждение с учащимися). В результате обсуждения решили, что титульная страница обязательно должна содержать "заголовок”, "поясняющий текст”, "иллюстрацию”. (Учитель показывает на демонстрационном компьютере предполагаемый внешний вид титульной страницы.)

III. Изучение нового материала

Учитель: Внешний вид страницы задается с помощью управляющих символов языка HTML – тегов. Рассмотрим теги, которые позволят нам реализовать задуманный проект титульной страницы.

Учитель объясняет материал, учащиеся конспектируют.

Заголовки:

HTML поддерживает 6 уровней внутренних заголовков.

<H1>…</H1> самый крупный
<H2>…</H2>
<H3>…</H3>
<H4>…</H4>
<H5>…</H5>
<H6>…</H6> самый мелкий

Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали).

Значения: center (по центру), right (по правому краю), left (по левому краю).

Например, <H1 align="center"> Давайте знакомиться - Компьютер</H1> (заголовок первого уровня, выравнивание по центру).

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

1) Выделение текста:

<B>…</B> - выделение полужирным
<I>…</I>
- выделение курсивом
<U>…</U> - выделение подчёркиванием
Например: <B>Привет</B>

2) Стиль шрифта (гарнитура, размер, цвет):

<FONT>…</FONT>

Тег <FONT> должен иметь хотя бы один из трёх возможных атрибутов:

Размер шрифта size="значение" (значения целые числа от 1 до 7)
Цвет шрифта color="значение"
Значение – название цвета или его 16-й код, например
<FONT color="red"> привет</FONT>
<FONT color=#cc0000> привет</FONT>
Гарнитура (вид шрифта) FACE="значение", например
<FONT FACE="Arial"> привет</FONT>

Пример <FONT size="7" color="red" face="Arial"> привет</FONT> (слово привет имеет размер 7, красного цвета, вид шрифта Arial).

Тег абзаца: <P>…</P>

Атрибут:

  • align="значение"
  • left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).

Перевод строки: <BR>

Вставка графического изображения

В web-страницах могут использоваться три графических формата - GIF, JPG, RNG.
Ваш рисунок должен быть размещён в папке сайта, лучше все рисунки размещать в отдельной папке, например, images.

Тег вставки изображения: <IMG src="имя графического файла">

Например: <IMG src="images\comp.gif" alt="Компьютер" align="right">

Изображение переносится с сохранением размера.

Атрибуты:

  • alt="текст" выводит поясняющий текст в случае, если рисунок не может быть отображен браузером.
  • align="значение" расположение рисунка относительно текста.

Значения: top (вверх), middle (середина), bottom (низ), left (слева), right (справа).

height и width – определяют высоту и ширину изображения соответственно. Если указанные размеры не совпадают с реальным размером изображения, то изображение масштабируется (порой с заметной потерей качества).

IV. Практическая работа

Обсуждение и выполнение практической работы (учащимся раздаётся распечатка c ходом практической работы). Во время практической работы учитель консультирует учащихся.

V. Итог урока

Фронтальная беседа: что сегодня узнали на уроке, чему научились?

VI. Постановка задач на следующий урок

Учитель: На следующем уроке мы продолжим работу по оформлению титульной страницы: "Компьютер". Мы научимся задавать цвет фона, вставлять фоновое изображение, создавать простые таблицы.

VII. Домашнее задание

Разработайте эскиз титульной страницы собственного сайта (начинается работа по выполнению индивидуального итогового проекта).

Практическая работа "Создание титульной страницы – "Компьютер”"

Цель работы:

  • Научиться
    • создавать, просматривать и редактировать HTML-документы;
    • оформлять заголовки;
    • управлять размером, гарнитурой и цветом шрифта;
    • выделять и выравнивать абзацы;
    • размещать графику на web-странице.

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

<HTML>
<HEAD>
<TITLE> Компьютер</TITLE>
</HEAD>
<BODY >
Давайте знакомиться – компьютер
</BODY>
</HTML>

4. Сохраните под именем index.html в папке site. Для этого выполните Файл – Сохранить как… В окне Сохранение документа в списке Тип файла выберите Все файлы (*.*). В поле Имя файла введите index.html и нажмите кнопку Сохранить.

    Рис. 1

    Рис. 1

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

    Рис. 2

    Рис. 2

7. Откройте двойным щелчком файл index.html для просмотра в браузере. Проанализируйте полученный результат.

    Рис. 3

    Рис. 3

8. Оформим фразу "Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы:

  • вызовите контекстное меню и выберите пункт Просмотр HTML-кода;
  • Рис. 4

    Рис. 4

  • внесите изменения:
  • <HTML>
    <HEAD>
    <TITLE> Компьютер </TITLE>
    </HEAD>
    <BODY >
    <H1> Давайте знакомиться – компьютер</H1>
    </BODY>
    </HTML>
  • сохраните файл (Файл – Сохранить);

Замечание. Обратите внимание на панель задач. На ней располагаются папка site, Блокнот с файлом index.html (HTML-код страницы) и браузер с нашей страничкой "Компьютер”.

Рис. 5

Рис. 5

  • воспользуйтесь Панелью задач и перейдите к просмотру страницы в браузере. Нажмите кнопку Обновить или клавишу F5.

9. Зададим выравнивание заголовка "по центру”:

  • вернитесь к HTML-коду нашей страницы (index-Блокнот) и внесите изменения:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> Давайте знакомиться – компьютер</H1>
</BODY>
</HTML>
  • gросмотрите страницу в браузере (нажмите кнопку Обновить).

10. Изменим цвет заголовка на голубой и гарнитуру шрифта на Arial:

<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial” >Давайте знакомиться – компьютер</FONT></H1>
</BODY>
</HTML>
  • просмотрите страницу в браузере (нажмите кнопку Обновить).

11. Добавим на страницу основной текст. Оформим его как абзац, зададим выравнивание текста "по ширине”:

<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial” >Давайте знакомиться – компьютер</FONT></H1>
<P align=”justify”> Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.
Вы получите информацию о ценах на компьютерные комплектующие.
</P>

</BODY>
</HTML>
  • просмотрите страницу в браузере (нажмите кнопку Обновить).

12. Добавим на нашу страницу картинку. Для этого в папке site создайте вложенную папку images. В папку images скопируйте файл comp.gif. Добавьте в HTML-код нашей страницы тег вставки изображения (зададим поясняющий текст к картинке, выравнивание по правому краю):

<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial” >Давайте знакомиться – компьютер</FONT></H1>
<IMG src=”images\comp.gif” alt=”Компьютер”align=”right” >
<P align="justify"> Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.
Вы получите информацию о ценах на компьютерные комплектующие.
</P>
</BODY>
</HTML>
  • просмотрите страницу в браузере (нажмите кнопку Обновить).

Итак, мы реализовали проект сегодняшнего урока. Наша страница:

Рис. 6

Рис. 6

Подведем итоги:

Рис. 7

Рис. 7

Категория: КОНСПЕКТЫ УРОКОВ ИНФОРМАТИКИ | Добавил: admin | Теги: конспект урока информатики, план-клнспект урока информатики, информатика в школе, ИТК в школе, Внеклассное мероприятие по информат
Просмотров: 944 | Загрузок: 0 | Рейтинг: 0.0/0
УЧИТЕЛЮ ИНФОРМАТИКИ
КОНСПЕКТЫ УРОКОВ
ВНЕКЛАССНЫЕ МЕРОПРИЯТИЯ ПО ИНФОРМАТИКЕ
ПОСОБИЯ И МЕТОДИЧКИ ДЛЯ УЧИТЕЛЯ ИНФОРМАТИКИ
ИЗ ОПЫТА РАБОТЫ УЧИТЕЛЯ ИНФОРМАТИКИ
ЗАДАНИЯ ШКОЛЬНОЙ ОЛИМПИАДЫ ПО ИНФОРМАТИКЕ


ИНФОРМАТИКА В ШКОЛЕ


ИНФОРМАТИКА В НАЧАЛЬНЫХ КЛАССАХ
ИНФОРМАТИКА В 3 КЛАССЕ
ИНФОРМАТИКА В 4 КЛАССЕ
КОНТРОЛЬНЫЕ РАБОТЫ ПО ИНФОРМАТИКЕ. 3 КЛАСС
КОНТРОЛЬНЫЕ РАБОТЫ ПО ИНФОРМАТИКЕ. 4 КЛАСС
ПРОГРАММИРОВАНИЕ ДЛЯ ДЕТЕЙ
СКАЗКА "ПРИКЛЮЧЕНИЯ ЭЛЕКТРОШИ"
ИГРОВЫЕ ТЕХНОЛОГИИ НА УРОКАХ ИНФОРМАТИКИ
ВИКТОРИНЫ ПО ИНФОРМАТИКЕ
КОМПЬЮТЕРНЫЕ ЧАСТУШКИ
ОБРАТНАЯ СВЯЗЬ
Поиск


Друзья сайта
  • Создать сайт
  • Все для веб-мастера
  • Программы для всех
  • Мир развлечений
  • Лучшие сайты Рунета
  • Кулинарные рецепты

  • Copyright MyCorp © 2020
    Яндекс.Метрика Рейтинг@Mail.ru