В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.
Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.
Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.
Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.
Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.
В качестве зачетной работы ученики отвечают на вопросы теста на знание тегов HTML и представляют созданный самостоятельно сайт.
Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.
Обучающие:
- сформировать систему знаний по технологии создания Web-сайтов;
- обучить языку разметки гипертекста HTML для создания сайтов;
- познакомить с этапами проектной деятельности.
Развивающие:
- развить творческие способности к самовыражению, посредством создания сайтов;
- сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
- развить навыки работы на компьютере
Воспитательные:
- воспитать добросовестное отношение к работе;
- воспитать чувства товарищества и личной ответственности за созданный сайт;
- воспитать художественный и эстетический вкус;
- воспитать грамотного и корректного пользователя сети Интернет.
1. Общие сведения о Web-сайтах и языке HTML
Публикации во Всемирной паутине (World Wide Web)реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.
HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки … и бывают парные и непарные (одиночные ).
Документ HTML – это текстовый файл с расширением.html или.htm , содержащий набор тегов.
Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.
2. Структура HTML-документа
3. Форматирование символов
Символы, заключенные между следующими тегами отображают:
Параметры шрифта
Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.
Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить - символьный примитив.
Одиночный тег
разрывает текстовый
поток и вставляет пустую строку. Несколько таких
тегов добавляют несколько пустых строк.
Межстрочный интервал – одинарный.
4. Практическое задание №1 .
Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.
Урок №21. Форматирование текста по абзацам
Тег - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.
Выравнивание текста по абзацам:
2. Задание цвета всего текста и фона документа
Описываются в начальном теге тела документа
.
3. Заголовки разных уровней
Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
4. Простые списки
5. Практичекое задание №2
Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.
Урок №31. Вставка графических изображений
Всеми браузерами поддерживаются форматы .gif , .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.
Одиночный тег
вставляет графические
изображения в текстовый поток в любом месте:
>
Необязательные атрибуты тега :
Чтобы рисунок был по центру, можно использовать тег ……./
2. Практическое задание №3
Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.
Урок №4Связь с другими документами организуется тегами ….
< IMG SRC =’имя графического файла’>
2. Практическое задание №4
Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.
Урок №51. Таблицы
Используют не только для того, чтобы располагать данные в ячейках, сколько с целью позицирования фрагментов текста и изображений друг относительно друга.
С помощью таблиц удобно создавать навигацию по сайту.
Пример таблицы из двух строк (рядов), содержащих по две ячейки:
Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел
Основные атрибуты тегов
|
задают параметры таблицы, строки или ячейки:
ALIGN=left, right, center – выравнивание ( BGCOLOR=’цвет’ – фоновый цвет ( HSPACE=значение – свободное пространство слева
и справа от таблицы в пикселах ( VSPACE=значение - свободное пространство сверху
и снизу от таблицы в пикселах ( WIDTH=значение – ширина таблицы (ячейки) – в
пикселах, или в процентах ( HEIGHT=
значение – высоты таблицы (ячейки,
строки) – в пикселах, или в процентах ( BORDER= значение – толщина рамки вокруг таблицы
и ее ячеек, по умолчанию значение=1, если
значение=0, то рамки нет ( BORDECOLOR=’цвет’ – цет рамки () VALIGH=bottom, middle, top – выравнивание содержимого
по вертикали ( 2. Практичекое задание №5 Создание навигации по сайту в форме таблицы из
одной строки 1. Секция заголовка , мета-теги В секции заголовка на каждой странице
указывается информация о документе, которая
используется при его отображении. Текст,
заключенный между тегами
... ,
отображается в заголовке окна браузера. В секции заголовка обычно помещается и ряд
тегов
с различными атрибутами,
предоставляющими дополнительную информацию
(метаинформацию) о Web-сайте: Драматические театры
Санкт-Петербурга
- - (указывается тип кодовой
таблицы (windows-1251
, Koi8-R
и другие),
использованной при подготовке текстовой части
документа.
- информация об |
