Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) icon

Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока)



НазваниеКонспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока)
Дата17.10.2016
Размер
ТипКонспект

ПЛАН-КОНСПЕКТ УРОКА

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

__________________________________________

(Тема урока)

1.ФИО(полностью) Кабанова Татьяна Сергеевна.

2.Место работы с. Троицкое Орловской области, МБОУ «Троицкая СОШ».

3.Должность учитель информатики.

4.Предмет информатика.

5.Класс 8.

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


7.Базовый учебник Информатика и ИКТ 8, Н.Д. Угринович , Бином. Лаборатория знаний 2009.

8.Цель урока: познакомить учащихся с понятием web-страница, web-сайт, научится создавать простейшую web-страницу.

9. Задачи:

- обучающие: дать представление учащимся о структуре web-страниц, познакомить с основными тегами.

-развивающие: продолжить развитие элементов логического мышления, внимания и памяти у учащихся.

-воспитательные: продолжить формирование познавательного интереса к предмету;

продолжить формирование информационной культуры учащихся.

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

  2. Формы работы учащихся: индивидуальная, фронтальная.

12.Необходимое техническое оборудование: компьютеры с операционной системой Windows, с установленными на них ОМС Плеер – проигрывателем ресурсов сайта ФЦИОР, предварительно сохраненные модули на урок, проектор, экран, колонки.

13. Структура и ход урока

Таблица 1.

^ СТРУКТУРА И ХОД УРОКА



Этап урока

Название используемых ЭОР

(с указанием порядкового номера из Таблицы 2)

Деятельность учителя

(с указанием действий с ЭОР, например, демонстрация)

Деятельность ученика

Время

(в мин.)


1

2

3

5

6

7

1

^ Организационный момент





Здравствуйте, ребята. Сегодня мы с вами переходим к изучению новой темы «Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице». Открываем тетради, записываем дату и тему урока.


Внимательно слушают учителя, записывают дату и тему урока в тетрадь


2

2

^ Актуализация знаний





Тема «Разработка Web-сайтов» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя интернета.

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




Реклама

Коммерция Образование

Размещение личной информации, статей, материалов

2

3

^ Объяснение нового материала

Технология WWW



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

Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

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

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

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

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


Внимательно слушают учителя, отвечают на его вопросы, делают записи в тетради

18









Презентация «Структура Web-страницы»
^

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


HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.

Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.

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

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

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):


<ТITLE>Компьютер


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





Заготовка Web-страницы "Компьютер"



Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.















Технология создания Web-сайта


^

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


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

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

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

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








4

Физкультминутка




Физкультминутка по методике Базарного.

Выполняют упражнения для глаз

1

5

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

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

Проведение практической работы №3.8 из учебника «Создание начальной страницы сайта».

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

15

6

^ Закрепление пройденного материала


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



А теперь закрепим знания, полученные на уроке (используется ^ ЭОР Создание простейшей Web-страницы)


Учащиеся работают с модулем

5

7

Рефлексия




Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе? Определите и выберите листочки, на каком уровне вы находитесь:

- знаю и объясню другому

- знаю

- сомневаюсь, что знаю

- не знаю


Говорят, что нового узнали на уроке; высказываются о трудностях, возникших по ходу работы.

1

8

Подведение итогов и домашнее задание




Выставление оценок, задание на дом п. 3.7.1-3.7.3, контрольные вопросы в конце каждого пункта.

Слушают учителя, записывают домашнее задание

1



Таблица 2.

^ ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ НА ДАННОМ УРОКЕ ЭОР



Название ресурса

Тип, вид ресурса

^ Форма предъявления информации (иллюстрация, презентация, видеофрагменты, тест, модель и т.д.)

Гиперссылка на ресурс, обеспечивающий доступ к ЭОР

1

Технология WWW

Информационный

Флеш-ролик

http://85.142.23.53/packages/npc1c/0921C260-8C9D-4BD1-AAFA-28614DA7E1FE/1.0.0.2/INFORM_13_1_2_2_2_i_1_1.0.0.2.oms

2

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

информационный

Презентация

http://sunschool.ucoz.ru/dlya_urokov/9_klass/web_straniza_9.ppt

3

Технология создания Web-сайта



Информационный

Флеш-ролик

http://85.142.23.53/packages/npc1c/5625202A-9565-4338-8161-C7AE6AE83EA0/1.0.0.2/INFORM_13_2_1_2_1_i_1_1.0.0.2.oms

4

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

Практический

Флеш-ролик

http://85.142.23.53/packages/rbc/D2B15518-703B-4F00-A5B7-9EB4E104755B/1.0.0.0/912_p_sozdanie_prosteyshey_veb_stranitsy.oms


Приложение.

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

Разработка сайта с использованием языка разметки текста HTML

Аппаратное и программное обеспечение. Компьютер с установленной операционной системой Windows или Linux, подключенный к Интернету.

Цель работы. Научиться создавать Web-сайты с исполь­зованием языка разметки текста HTML в простейшем тек­стовом редакторе Блокнот.

Задание. В операционной системе Windows или Linux создать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт «Компьютер» должен содержать начальную страницу и страницы «Программы», «Словарь» и «Анкета». Сохранить их в файлах с именами index.htm, software.htm, glossary.htm и anketa.htm в папке сайта.

^ Начальная страница сайта. Создадим начальную стра­ницу Web-сайта «Компьютер».

  1. В операционной системе Windows или Linuх запустить простейший текстовый редактор Блокнот.

  2. Ввести тэги, определяющие структуру Web-страницы. Ввести заголовок Web-страницы: «Компьютер». Ввести заголовок текста, отображаемый в браузере: «Всё о компьютере».





<ТIТLЕ> Компьютер





Всё о компьютере




Просмотреть получившуюся Web-страницу в браузере.

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

  1. <Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

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

Пусть начальная страница сайта «Компьютер» будет со­держать центрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному вы­ровненных абзацев.



  1. <Н1 ALIGN="center"> Все о компьютере






<Р ALIGN=" left">На этом сайте...

<Р ALIGN="right">Терминологический словарь _.

На начальной странице сайта «Компьютер» логично разместить изображение компьютера.

Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь» и «Анкета». Сохраним их в файлах с именами SOftware.htm, glossary.htm и anketa.htm в папке сайта. Такие пустые страницы должны иметь заголовки, но могут пока не иметь содержания.





<ТIТLЕ>Заголовок страницы







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

Разместим указатели гиперссылок внизу страницы в но­вом абзаце в одну строку, разделив их пробелами. Такое размещение гиперссылок часто называют панелью навигации.

Созданная начальная страница Web-сайта «Компью­тер» содержит заголовок, изображение компьютера, два аб­заца текста, панель навигации и ссылку на адрес электронной почты.



Похожие:

Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconПлан-конспект Класс: 11 Тема: Создание Web-документа с помощью Microsoft Word. Цели
Дать основные понятия об Web-документ; освоить основные приемы заполнения и редактирования Web-страниц; научиться сохранять, просматривать...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconКаждый может научить создавать web-сайты
Многие думают, что создать web-сайт очень трудно. Это совершенно не так! Каждый может научить создавать web-сайты. Если вы готовы,...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconМетодическая модель урока. Цели обучения и их конкретизация: Знать принципы работы Web-редактора «Сайткрафт»
Использовать Web-редактор «Сайткрафт» для создания простейшего сайта (категория понимание)
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconЛекция Язык разметки гипертекста html
Открывая в браузере любую Web- страницу, мы текст, картинки, кнопки, таблицы и м ногою другое. Для того, чтобы создать Web –страницу,...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) icon1. Создание html-таблиц 1 Средство форматирования Web-страниц – таблицы
Одним из наиболее мощных и широко применяемых в html средств являются таблицы. В html таблицы используются не только традиционно,...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconВставка звуковых файлов в web-страницу
Поэтому, как правило, я работаю в сети с выключенными звуковыми колонками. Но это мои проблемы. А цель этой статьи как раз рассказать,...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconУрок информатики в 10Б классе по теме «Основы языка разметки гипертекста»
Образовательные – познакомить с основами языка разметки гипертекста html, сформировать представление о структуре html-документа,...
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconЛекция 18. Приложения для социальных сетей Понятие " Социальный Веб " ( Social Web )

Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconПринципы создания Web узлов. Глоссарий
Агрегация – это демонстрация одного объекта, который объединяет несколько более мелких
Конспект урока web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. (Тема урока) iconWindchill Web-технология для создания интегрированной информационной среды современного предприятия Климов В. Е., Клишин В. В
Интернет-ориентированной подхода, обеспечивающего полную информационную интеграцию разработчиков, субподрядчиков, поставщиков и
Разместите ссылку на наш сайт:
Уроки, сочинения


База данных защищена авторским правом ©izlov.ru 2000-2014
При копировании материала обязательно указание активной ссылки открытой для индексации.
связаться с нами