Автор конспекта:
Автор(ы): — Анисимова Елена Викторовна
Место работы, должность: — МБОУ «Пламенская СОШ» учитель информатики
Регион: — Ленинградская область
Характеристики урока (занятия) Уровень образования: — основное общее образование
Целевая аудитория: — Учащийся (студент)
Целевая аудитория: — Учитель (преподаватель)
Класс(ы): — 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- страницы, основными тегами.
- развивающая- способствование развитию памяти, внимания, мышления;
- воспитательная- создание условий для воспитания аккуратного, бережного отношения к технике.
Тип урока : изучения новых знаний .
Оборудование: компьютеры, проектор, экран,презентация , учебник
Ход урока:
Здравствуйте ребята! Тема урока : «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 байт.