Официальный сайт медиатэк 24/7/365

Вы не зарегистрированы

Авторизация



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

Фото пользователя Елена Викторовна Анисимова
Submitted by Елена Викторовна Анисимова on пн, 16/04/2012 - 10:35
Данные об авторе
Автор(ы): 
Анисимова Елена Викторовна
Место работы, должность: 
МБОУ "Пламенская СОШ" учитель информатики
Регион: 
Ленинградская область
Характеристики урока (занятия)
Уровень образования: 
основное общее образование
Целевая аудитория: 
Учащийся (студент)
Целевая аудитория: 
Учитель (преподаватель)
Класс(ы): 
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- страницы, основными тегами.
  • развивающая- способствование развитию  памяти, внимания, мышления;
  • воспитательная- создание  условий для воспитания аккуратного, бережного отношения  к технике.

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

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

 

Ход урока:

  1. Организационный  момент. Постановка  целей  и задач  урока. (2 мин)

 Здравствуйте ребята! Тема урока : «Web-страницы и web-сайты.Структура web-страницы.»Записываем  тему.

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

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

  1. Какие способы поиска информации в Интернете вам известны?
  2. Каким образом производится поиск документов по ключевым словам?
  3. Какие поисковые системы вам известны?
  4. Какие формы электронной коммерции существуют в Интернете?
  5. Что такое хостинг?
  6. Чем отличается реклама в Интернете от рекламы обычной?
  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>             внутрь этого контейнера помещается HTML-код страницы

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

<TITLE>.....</title>  Название страницы

</head>

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

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

</body>

</html>

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

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

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

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

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

<HTML>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>

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

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

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

Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга 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".

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

<FONT COLOR="blue">
<Н1 ALIGN="center">Компьютер и ПО</Н1>
</FONT>

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

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

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

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

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

Тэги шрифта _____________________

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

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

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

Пример: <FONT   FACE=Arial   SIZE=6   COLOR=red> … </FONT>

 

черный

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-код страницы

<HEAD>

<TITLE>Компьютер и ПО</TITLE>

</HEAD>

<BODY>

<FONT COLOR=”blue”>

<H1 ALIGN=”center”>Компьютер и ПО</H1>

</FONT>

<HR>

<PALIGN=”left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>

<PALIGN=”right”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>

</BODY>

</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 мин)

Рефлексия

 

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

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

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

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

Прикрепленный файл Size
Web-страницы и web-сайты.ppt 1.37 MB

»  Размещено в сообществах:   
Сообщество учителей Гатчинского муниципального района

Смотреть русские видео онлайн


Смотреть русское с разговорами видео

Online video HD

Видео скачать на телефон

Русские фильмы бесплатно

Full HD video online

Смотреть видео онлайн

Смотреть HD видео бесплатно

School смотреть онлайн