Автор конспекта:
Автор(ы): — Анисимова Елена Викторовна

Место работы, должность: — МБОУ «Пламенская СОШ» учитель информатики

Регион: — Ленинградская область

Характеристики урока (занятия) Уровень образования: — основное общее образование

Целевая аудитория: — Учащийся (студент)
Целевая аудитория: — Учитель (преподаватель)

Класс(ы): — 8 класс

Предмет(ы): — Информатика и ИКТ

Цель урока: —

Цели:

  • познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице
  • начать разработку Web-страницы «Компьютер и ПО»

Тип урока: — Урок изучения и первичного закрепления новых знаний

Используемые учебники и учебные пособия: —

Н.Д. Угринович "Информатии ИКТ" 8 класс

Используемое оборудование: —

Компьютеры, проектор, экран,презентация , учебник для 8 класса, раздаточный материал

Используемые ЦОР: —

ttp://internika.org/node/8052

teacherjournal.ru ›…261…урока 8…информатика.doc

legionersimbr.ucoz.ru ›web-stranmca.doc

marklv.narod.ru/html/pr2

ttp://inf777.narod.ru/lessons/frontpage_lessons/errors/errors.htm

Краткое описание: — Урок проводится в 8 классе. 1 урок в теме "Основы языка гипертекстовой разметки документов", по программе Н.Д. Угриновича.

Тема: Web-страницы и Web-сайты. Структура Web-страниц. Форматирование текста на Web-страницах

Цель:

  • познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице
  • начать разработку Web-страницы «Компьютер и ПО»

Задачи урока :

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

Тип урока : изучения новых знаний .

Оборудование: компьютеры, проектор, экран,презентация , учебник

Ход урока:

  • Организационный момент. Постановка целей и задач урока. (2 мин)
  • Здравствуйте ребята! Тема урока : «Web-страницы и web-сайты.Структура web-страницы.»Записываем тему.

    Сегодня на уроке вы узнаете, что понимают под сайтами, какие бывают виды сайтов и что собой представляет язык разметки гипертектовых документов — HTML.

    2. Проверка домашнего задания (7 мин)

  • Какие способы поиска информации в Интернете вам известны?
  • Каким образом производится поиск документов по ключевым словам?
  • Какие поисковые системы вам известны?
  • Какие формы электронной коммерции существуют в Интернете?
  • Что такое хостинг?
  • Чем отличается реклама в Интернете от рекламы обычной?
  • Что такое интернет-аукционы? Интернет-магазины? Цифровые деньги?
  • 3.Объяснение нового материала (22мин)

    Мы сегодня с вами будем говорить о web-сайтах и web-страницах. Итак, что же такое Web-сайт и Web-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая информация может содержаться на Web-сайте? Конечно, практически любая. Сайт может содержать информацию о компьютерных играх, автомобилях, городах и странах мира и т.д.. На сайте даже можно разместить уроки, произведения писателей, поэтов, композиторов. Получается, что сайт это книга, но только не простая, а электронная? Да, Web-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что вас на данный момент совсем не интересует.

    Web – страницы создаются с использование гипертекстовых документов HTML. В обычный документ вставляются управляющие символы – HTML-тэги, которые определяют вид Web-страниц при ее просмотре.

    Достоинства Web-страниц:

    • Малый информационный объем;
    • Возможность просмотра в различных операционных системах

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

    • Простейшие текстовые редакторы :

    в ОС Windows – Блокнот

    в ОС Linux – Kate

    • Web – редакторы :

    в ОС Windows – Microsoft FrontPage

    в ОС Linux – Quanta Plus

    Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Web-сайты – совокупность тематических Web-страниц. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.

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

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

    Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой".

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

    Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.

    Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

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

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

    Структура Web-страницы

    внутрь этого контейнера помещается HTML-код страницы

    - Заголовок страницы

    ….. Название страницы

    Помещается содержимое страницы

    Тело документа

    Сохранение страницы: в виде файла index.htm

    Теперь давайте на сайте marklv.narod.ru/html/pr1 посмотрим простейший пример HTML-документа. А затем сами попробуем создать нашу первую страничку.

    Практическая работа № 3.8 страница учебника 165. Выполняем задания 1-2 со стр. 166

    Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере

  • Создать папку Мой сайт на рабочем столе
  • Запустить приложение Блокнот
  • Компьютер

    Компьютер и ПО

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

    Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.

    Заголовки.Размеры шрифтов заголовков задаются парами тэгов от (самый крупный) до (самый мелкий).

    Шрифт.Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4).

    Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.

    Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Например, синий цвет задается значением "#0000FF".

    Выравнивание текста.Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".

    Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:


    Компьютер и ПО

    Горизонтальная линия.Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга .

    Абзацы.Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

    Во время объяснения учителем материала, учащиеся заполняют раздаточный материал «Форматирование текстового документа

    «Форматирование Web-документа»

    Тэги заголовка ________________________________________________

    Тэги шрифта _____________________

    Атрибуты шрифта:

    ____________ — гарнитура шрифта ____________ — размер шрифта

    ____________ — цвет шрифта

    Пример:

    черный

    black

    000000

    фиолетовый

    purple

    FF00FF

    белый

    white

    FFFFFF

    желтый

    yellow

    FFFF00

    красный

    red

    FF0000

    коричневый

    brown

    996633

    зеленый

    green

    00FF00

    оранжевый

    orange

    FF8000

    бирюзовый

    azure

    00FFFF

    лиловый

    violet

    8000FF

    синий

    blue

    0000FF

    серый

    gray

    A0A0A0

    ________ — тэг перевода строки ____________ — тэг абзаца

    Выравнивание абзаца:

    ALIGN=________ Выравнивание по центру

    ALIGN=________ Выравнивание по правому краю

    ALIGN=________ Выравнивание по левому краю

    ________ — тэг задания горизонтальной лини

    Практическая работас.166 задания 3,4

    Создать HTML-код страницы

    Компьютер и ПО


    Компьютер и ПО

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

    Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

    На сайте marklv.narod.ru/html/pr2 смотрим пример форматирования текста.

    Знакомство с ошибками, допускаемыми при разработке Web-страниц.

    Создать сайт или даже отдельную Web-страницу, дело совсем не из простых. Очень часто создатели допускают ряд типичных ошибок, с которыми я предлагаю вам познакомиться на сайте Евгения Мухутдинова.

    Адрес ресурса: ttp://inf777.narod.ru/lessons/frontpage_lessons/errors/errors.htm

    4.Закрепление знаний. (10 мин)

    Совместно проходим тест (демонстрируется на экране) Слайды презентации 22-28

    5. Домашнее задание (2 мин)

    п. 3.7.1-3.7.3, разработать Web-страницу «Знакомьтесь: это я!»с использованием только изученных тегов.

    6. Итоги урока (2 мин)

    Рефлексия

    На уроке мне понравилось…………..

    Я сегодня научился (лась)…………

    Самым трудным для меня на уроке было ……

    На уроке я не понял про………

    Файлы: Web-страницы и web-сайты.ppt
    Размер файла: 1431552 байт.

    ( план – конспект урока 1 класс 5 класс. 6 класс 7 класс 8 класс 9 класс 10 класс Английский язык Литературное чтение Математика Музыка ОБЖ Окружающий мир Оренбургская область Физика ЦОР алгебра биология викторина внеклассное мероприятие география геометрия здоровье игра информатика история классный час конкурс конспект урока краеведение кроссворд литература начальная школа обществознание презентация программа проект рабочая программа русский язык тест технология урок химия экология