Конспект занятия

Тема занятия: «Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML».

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

Учащиеся должны знать:

• определение следующих понятий: «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;
• основные характеристики Web-ресурса;
• структуру Web-документа;
• назначение и атрибуты основных тегов.

Учащиеся должны уметь:

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

Аппаратное и программное обеспечение: Компьютеры, мультимедийный проектор с экраном, текстовый редактор, программа браузер, мультимедийная презентация «Создание Web-сайта. Язык разметки гипертекстовых документов HTML», раздаточный материал для выполнения практических работ (приложение 1, приложение 2) и таблицы цветов по количеству учащихся.

ХОД УРОКА

1. Организационный момент:

Приветствие. Проверка готовности учащихся к уроку.

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

Беседа по ранее изученной теме «Знакомство с Интернетом» и  «Сервисы сети Интернет». Для обсуждения предлагаются три вопроса:

1. Что такое сеть Интернет?
2. Основные возможности Интернет?
3. Службы Интернета.

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

Ожидаемый ответ: Научиться создавать собственные Web-сайты.

- А может ли умение создавать сайты, пригодиться вам в будущем, если да то как?

Ожидаемый ответ: Создать сайт своей фирмы, рассказать о своих успехах, увлечениях и т.д., зарабатывать, создавая сайты по заказу.

Какую цель мы перед собой поставим?

Ожидаемый ответ: Научиться создавать Web-сайты.

- Какие задачи, на ваш взгляд, необходимо решить, чтобы достичь этой цель? (Что конкретно мы должны узнать?)

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

Возможный план:

1. Создание простых текстовых страниц;
2. Оформление Web-страниц (графикой, фотографиями, таблицами списками и т. д.);
3. Создание гиперссылок.

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

3. Введение. Историческая справка. Основные характеристики Web-ресурса.

Слайд(2-3) «Историческая справка»

В 1989 году сотрудник Европейского центра ядерных исследований  в Женеве (CERN) Тим Бернес-Ли начал работу по созданию информационной системы, которая должна была объединить все информационные ресурсы центра: базы данных научных отчетов; результаты экспериментов; компьютерные программы обработки данных; списки почтовых адресов и т.д. Предложенная Бернесом гипертекстовая технология, позволяла легко переходить от одного документа к другому.

В основе технологии WWW лежат три составные части:

• Язык гипертекстовой разметки - разработчики WWW выбрали систему SGML в качестве основы языка гипертекстовых документов. Этот язык был назван Hyper Text  Markup Language (HTML);
• Универсальный способ адресации ресурсов в сети URL – Uniform Resource Locator;
• Протокол обмена гипертекстовой информацией HTTP -  Hyper Text Transfer Protocol;

В декабре 1991 года американский физик Пол Кунз из Стенфордского университета создал первый сайт на основе WWW-технологии. В январе 1992 года Тим Бернес-Ли на конференции во Франции, где присутствовало более 200 физиков из разных стран рассказал о системе WWW, затем продемонстрировал как с ее помощью можно связаться с заокеанским сайтом Кунза в США.

Слайд(4) «Основные понятия»

Информация в системе WWW организована в виде страниц. Каждый желающий может разместить информацию о себе на так называемой «домашней страничке» (от англ. home page), поместив ее сервере своего провайдера или на серверах бесплатно предоставляющих место под такую страничку.

Несколько страниц, находящихся на одном сервере и объединенных по смыслу, образуют сайт (от англ. site – место, участок). В настоящее время большинство компаний, государственных и частных учреждений и предприятий, общественных организаций и просто частных пользователей имеют свои представительские сайты в Интернете.

Слайд(5) «Критерии оценки»

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

Содержание включает информационные блоки, представленные на сайте. Материал должен представлять интерес не только для автора, но и для широкой общественности, для кого разработан этот материал. Материал должен быть четко и привлекательно изложен. С первого взгляда пользователь должен определить назначение ресурса, какие интересные материалы на нем располагаются, чтобы решить для себя, стоит ли вновь возвращаться к этому ресурсу. Уже в самом начале необходимо продумать и о возможном развитии сайта. Какие разделы, какие информационные блоки могут быть добавлены впоследствии. Интересное содержание еще предполагает изложение информации хорошим, грамотным языком. Другим фактором, на что стоит обратить внимание, является умение излагать сложные вещи простым и легким для чтения языком.

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

4. Выполнение практической работы №1

Цель работы:

• Научиться оценивать качество Web-ресурсов;
• Сформировать представление о том, каким должен быть «хороший» сайт.

Задание:

1. Проанализируйте 5-7 сайтов на ваш выбор по предложенным критериям и заполните таблицу (см. Приложение 1).
2. Попробуйте сформулировать требования к созданию учебных сайтов.

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

5. Объяснение новой темы с использованием учебной презентации «Создание Web-сайта. Язык разметки гипертекстовых документов HTML»

Слайд(6) «Теги»

Гипертекст, создаваемый с помощью языка HTML, представляет собой обычный текст, включающий в себя элементы, управляющие внешним видом этого текста (цветом, стилем, размером и т.д.). Эти элементы состоят из особых текстовых фраз, называемых тегами. Внешне теги выделены в тексте треугольными скобками. По своему значению теги близки скобкам «begin – end» (начало – конец) в языках программирования, которые задают области действия определенной группы команд.

Слайд(7) «Структура Web-документа»

Весь гипертекстовый документ можно представить как один большой элемент с именем «HTML». По структуре он состоит из двух частей: заголовка документа и тела документа, где содержится отображаемый на экране текст.

Парные теги  являются внешними для всех остальных. Без этих тегов браузер не может определить формат документа и правильно его отобразить.

Заголовок документа включает парные теги:  и . Теги  являются внешними по отношению к тегам . Между тегами  обычно располагается название страницы, отображаемое в строке заголовка при просмотре документа в браузере.

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

Итак, структура Web-документа:

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

Слайд(8) «Параметры тега BODY»

Тег  имеет несколько параметров:

• Цвет фона документа        bgcolor=#RRGGBB
• Текстура фона        background=file_name
• Цвет текста        text=# RRGGBB
• Цвет текста ссылки        link=# RRGGBB
• Цвет текста активной ссылки        alink=# RRGGBB
• Цвет текста просмотренной ссылки        vlink=# RRGGBB

Слайд(9) «Кодирование цвета»

Значение цвета указывается либо его буквенным обозначением, либо 6-ти разрядным шестнадцатеричным числовым кодом RRGGBB, где RR – интенсивность красного цвета, GG – интенсивность зеленого цвета, BB – интенсивность синего. Интенсивность может изменяться от значения 00 до FF.

Основные цвета

Слайд(10) «Заголовки»

Парный тег  служит для выделения заголовков (Headings). Цифра после буквы показывает уровень заголовка (всего их может быть шесть). Вместе с заголовком можно задать и  выравнивание текста, задав значение параметру align:

• по центру – CENTER;
• по левому краю – LEFT;
• по правому краю – RIGHT.  

Слайд(11) «Свойства блока текста»

Тег  указывает параметры шрифта. Для него могут задаваться следующие параметры:

• FACE – устанавливает тип шрифта для отображения текста;

Пример:  текст .

• SIZE – устанавливает размер шрифта, относительно установленного в браузере по умолчанию;

Пример:  текст или текст , где n - число пунктов (от 1 до 7), на которое увеличивается или уменьшается размер шрифта (1пункт=дюйма или 0,353 мм). Принято считать, что размер «нормального» шрифта соответствует значению 3.

• COLOR – устанавливает цвет шрифта, задаваемый с помощью стандартных имен или в формате RRGGBB (см. выше);

Слайд(12) «Стили оформления»

Специальная группа тегов служит для изменения начертания шрифта.

… - выделение полужирным

… - выделение курсивом

… - выделение подчёркиванием

… - вычеркивание текста.

Слайд(13-14) «Абзацы»

Для обозначения обычных абзацев в языке HTML используют тег

…

Атрибут:

ALIGN="значение"

LEFT (по левому краю), RIGHT (по правому краю), CENTER (по центру), JUSTIFY (по ширине).

Если надо осуществить переход на новую строку без создания абзаца, можно использовать тег
 

Слайд(15) «Горизонтальная линейка»

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