Введение
В настоящее время в России реализуется национальный проект «Образование». В соответствие с этим проектом в школу пришли современные компьютеры. В учебный план школы вводятся новые предметы и элективные курсы. Одним из таких курсов является курс «Web-конструирование». Каждая школа уже подключена к Интернету. Возникает необходимость создавать школьные Интернет-страницы, на которых будут размещены материалы о сегодняшним дне школы и её истории.
В современном мире разразился настоящий «бум» сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, различные компании, школы. Вы тоже можете построить свой собственный виртуальный дом.
Существуют множество программ, специально предназначенных для создания новых Web-сайтов. Например, MS Front Page или Macromedia Dream Weaver. Все они предоставляют широкие возможности для визуального создания сайтов. Это и хорошо и плохо.
Хорошо потому, что мы сможем создать наш сайт за считанные минуты. Оснастим его картинками, красиво оформленным текстом и гиперссылками. Однако при этом мы никогда не узнаем, как «устроена» наша страница, из чего она состоит и как взаимодействуют все ее компоненты. Кроме того, любая программа для создания сайтов предъявляет определенные требования к компьютеру, на котором будет работать, и не исключена вероятность того, что Вы не сможете использовать понравившийся продукт по причине недостаточной мощности своего ПК.
Поэтому воспользуемся другим более простым способом. Мы станем составлять наши странички из простейших элементарных команд языка HTML, который специально предназначен для разметки гипертекстовых документов, коими и являются сайты.
Для этой работы нам не нужно сверхмощного компьютера, поскольку работа будет происходить в обычной программе «Блокнот», которая входит в базовый комплект MS Windows.
Кроме этого нам потребуется любой браузер, например MS Internet Explorer, а так же – любой графический редактор – в нашем случае программа ACDSee и Adobe Photoshop.
В самом конце работы, когда придет время опубликовать наш готовый сайт в сети Internet, нам потребуется специальная программа FTP-клиент, в качестве которого выступит программа FAR, очень похожая на Norton Commander.
Объект исследования: методика изучения курса информатики.
Предмет исследования: методика изучения элективного курса «Web-конструирования».
Цели исследования:
Изучить научно-методическую литературу по данной теме.
Проанализировать этапы построения Web-сайтов.
Научить, используя средства HTML, строить полезные компьютерные приложения, которые можно было бы использовать на локальном компьютере у себя дома, в школе или на базе полученных знаний построить собственную страничку в Интернете.
Публикация редактированного сайта «Лукояновский педагогический колледж» в сети Интернет
Рабочая гипотеза: изучение данной темы направлено на формирование знаний, умений и навыков по созданию собственной Web-страницы на основе языка HTML и дальнейшее размещение её в Internet.
Структура сайта
Создавая сайт, нужно продумать его структуру. Хорошо структурированный сайт позволяет быстро находить нужную страницу сайта. Структура сайта отражает логическую связь страниц сайта.
Чтобы открыть главную Интернет – страницу, нужно запустить файл, который называется Index. Это стандартное обозначение первой (главной) страницы сайта. Так называются и все первые страницы отдельных Интернет – проектов, которые здесь содержатся.
Рассмотрим структуру сайта. На главной странице есть ссылки на второстепенные страницы. Такая структура называется иерархической. Если посмотреть файловую структуру, то она такая же: в корневой папке находится запускной файл (Index) и папки отдельных Интернет – проектов (cult, flash, history …), а в этих папках находятся уже файлы отельных Интернет - страниц и другие вспомогательные папки (например – папка Pic, содержащая картинки для Интернет – страниц, или папка с Flash – проектами).
Разрабатывая сайт, нужно подумать о навигации или по – другому о системе ссылок, чтобы было удобно и быстро перемещаться по всему сайту. Очень важно, чтобы система работы ссылок была единой, то есть везде одинаковой (Например, на каждой главной странице отдельного проекта есть ссылка на главную страницу всего сайта. Она выполнена виде кнопки. Важно чтобы на каждой главной странице другого проекта была такая же кнопка и чтобы она также действовала, а не отправляла на другую страницу). Если щелкнуть по любой ссылке с главной страницы, то мы попадем на страницу отдельного Интернет проекта, например на Интернет – проекты. На этой странице также есть ссылки на вложенные страницы Интернет – проектов. На каждой главной странице есть ссылка на главную страницу всего сайта (она выполнена виде кнопки, на которой нарисован домик) и ссылка на главную страницу следующего (предыдущего) Интернет – проекта (это стрелка вправо или влево, в зависимости от положения в сайте данного Интернет – проекта).
Но это были элементы навигации, присутствующие на каждой главной странице отдельного Интернет – проекта, они находятся в строго определенном месте – слева внизу. А основное место страницы занимают ссылки на вложенные страницы, то есть на содержание Интернет проекта. На воженных станицах есть стандартные для всех страниц элементы: кнопки «Домой», «Влево», «Вверх», «Вправо». Кнопка «Домой» в данном случае будет отправлять нас не на главную страницу всего сайта, а на главную страницу этого проекта. Кнопки «Влево», «Вправо» необязательно будут присутствовать на каждой вложенной странице, только на тех, которые находятся на одном уровне иерархии с другими вложенными страницами проекта. А кнопка «Вверх» отправляет на уровень вверх. Если следующий уровень – это главная страница, то это будет кнопка «Домой». Это тоже обязательный элемент любой страницы сайта и находятся они только слева внизу.
На вложенных страницах могут быть текстовые ссылки на другие страницы, которые вожены дальше по смыслу. Например: в предложении «В вычислениях Вы можете потренироваться здесь». Слово «здесь» нас отправит на страницу с тренажером.
В любом Интернет – проекте есть страница с картой данного Интернет – проекта. На главной странице есть ссылка на карту всего сайта. С помощью такой карты можно сразу попасть на нужную страницу и можно проследить структуру сайта, логическую связь страниц.
Подготовка фотографий для сайта
Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Браузеры “понимают” два графических формата GIF и JPG. JPG — для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами. Фотография в JPG-формате.
GIF — для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые границы. Такое расширение имеют изображение А.М. Горькова и Орден Трудового Красного Знамени в верхней части страниц.
GIF-формат имеет три приятные дополнительные возможности:
Мультипликация
Прозрачная графика
Чересстрочная развертка
Обработка графики для Интернет-страниц Adobe Photoshop
В настоящее время Интернет-страницы невозможно представить себе без графики. Графика позволяет сделать их более интересными, содержательными, понятными и приятными для глаз пользователей Интернета. Но не каждую картинку можно вставить в HTML-документ. Основным требованием к ним является малый объём при достаточно высоком качестве изображения. Добиться этого можно несколькими способами. Но в основе каждого лежит работа с графическим редактором Adobe Photoshop.
Чтобы уменьшить её объём и размер фотографии нужно:
Загрузить нужную фотографию в редактор.
Нажать кнопку Изображение в главном меню, выбрать пункт Размер изображения.
В открывшемся окне Размер рисунка найти пункт разрешение и изменить его на меньшее. Размер фотографии уменьшится.
Выберите команду Файл-Сохранить для Web.
Из предлагаемых форматов нужно выбрать формат JPEG. Далее, соглашаясь с тем, что предложит вам компьютер при конвертировании, можно уменьшить объём фотографии в несколько раз.
Обзор программы ACDSee
Для того, чтобы создать HTML-альбом в программе ACDSee. Мы должны открыть программу. Выбрать папку, содержащую нужные файлы. Выделить их. Выбираем в меню кнопку Создать. Создать HTML-альбом.
В появившемся диалоговом окне нажимаем кнопку Далее. Затем в строке Title пишем название альбома. Затем выбираем формат и размер длины и ширины файла. Далее выбираем папку, в которую создастся HTML-альбом.
Язык HTML и его назначение
HTML — это специальный язык, на котором описывается как должен быть показан документ на экране компьютера. Самым важным элементом HTML-программы (HTML-документа) является ссылка. Ссылка позволяет передавать управление из одного HTML-документа в другой по контексту, то есть непосредственно в той точке документа, где в этом есть необходимость по смыслу. Таким образом HTML-документы читают не как беллетристику, от первой страницы до последней по-порядку, а как справочники, от одной нужной темы до другой.
Итак, программирование ссылок - это самое главное свойство HTML-документа. Документы со ссылками, которые передают управление другим документам, называются гипертекстами. Можно сказать, что язык HTML — это язык для программирования гипертекста. Именно так и расшифровывается аббревиатура HyperText Markup Language (язык разметки гипертекста).
Второй, важной особенностью HTML-документа, является его независимость от компьютерных платформ (DOS, Windows, UNIX, MacOS,...), а также от типа видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA,...).
Чем обеспечивается такая универсальность?
HTML-текст — это программа, которая задает информацию и правила показа этой информации на экране компьютера. Для каждой платформы создается специальная программа-интерпретатор ("браузер" в терминологии Интернета), которая должна интерпретировать (выполнять) HTML-программу по единым стандартным правилам. Браузер учитывает особенности компьютера для максимального соблюдения стандарта, HTML-программа ничего о компьютере не знает.
Отмеченные выше два самых важных свойства HTML-текстов позволяют использовать HTML-программирование для конструирования страничек Интернета.
Любая Интернет-страница представляет собой текстовый файл в формате «Текст Windows». Расширение имени файла, содержащего текст Интернет-страницы, должен быть htm. Файл главной страницы должен называться index.htm или welcome.htm. остальные страницы сайта могут иметь произвольные имена, а пользователь будет попадать на них по ссылкам с основной страницы.
Всё содержимое Интернет-страницы заключается между тегами<HTML>…</HTML>, указывающий браузеру, что данный текст представляет собой HTML – документ и, возможно, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.
Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).
Вот пример текста простейшей HTML-программы:
<HTML> начало HTML-документа
<HEAD> начало заголовка
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251"> информация о документе
<TITLE>Упражнение 1</TITLE> название документа
</HEAD> конец заголовка
<BODY> начало тела
<H1>Первый HTML-документ</H1> заголовок
<HR> горизонтальная линия
<P> начало абзаца
Корова не похожа на лошадь. абзац
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
</P> конец абзаца
</BODY> конец тела
</HTML>конец HTML-документа
Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты "/" перед ключевым словом (именем тега), закрывает его. Тег <HTML> должен открывать программу, а тег </HTML> — закрывать ее.
Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело.
<HTML>
заголовок программы
тело программы
</HTML>
Заголовок HTML-документа
В этом блоке (<HEAD>... </HEAD>) описываются общие правила интерпретации HTML-документа в целом и содержится вспомогательная информация о документе.
Команда:
META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
задает браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows.
Название HTML-страницы
Между парой тегов <TITLE> и </TITLE> располагается имя HTML-документа. Это имя браузер использует в заголовке окна Windows, в котором показывает документ.
Тело программы
Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа, например:
<H1>...</H1> -- заголовок
<HR> -- горизонтальная линия
<P>...</P> -- абзац
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.
Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы — пункты, обозначенные заголовками четвертого уровня.
В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции
<Hn>текст заголовка</Hn>
Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка.
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом <HR>, и этот тег не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран горизонтальную линию:
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране.
Как правило браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами <P> и </P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег </P> просто игнорируется браузером, поэтому его можно и не писать.
Абзац выравнивается по левому краю.
Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов вы поместите в HTML-программе.
Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда вы перешли на новую строку в HTML-программе.
«Физическое» и «логическое» форматирование текста
Все уже рассмотренные способы форматирования реализуют так называемые «физические» стили текста, когда теги явным образом указывают его вид. Однако в
HTML предусмотрено также и «логическое» форматирование текста, когда тот или иной тег указывает «название» стиля, а конкретные характеристики отображения для него заранее предопределены в браузере. Вот пример нескольких названий стилей:
<EM>...</EM>Шрифтовое выделение
<STRONG>...</STRONG>Особое шрифтовое выделение
<CITE>...</CITE>Цитата
<KBD>...</KBD>Ввод с клавиатуры
Авторское редактирование текста HTML. Самый простой способ, который позволяет сэкономить время при размещении на странице сколько угодно длинного фрагмента уже отформатированного текста: заключите его между тегами <PRE>...</PRE>, и браузер сохранит все пробелы и разбивки на строки, а используемый при отображении такого текста моноширинный шрифт семейства Courier обеспечит сохранение выравнивания.
Основные теги HTML
HR тег горизонтальной линии
Форматирование текста
FONT тег задания параметров шрифта.
I тег выделения текста курсивом
EM тег логического ударения
B тег выделения текста жирным шрифтом
STRONG тег усиленного выделения
BIG тег увеличения шрифта
SMALL тег уменьшения шрифта
Списки
UL тег ненумерованного списка
OL тег нумерованного списка
LI тег пункта списка
DL, DT, DD теги для задания списка определений(термин и его описание)
Объекты
IMG тег вставки изображения
EMBED тег вставки различных объектов: не-HTML документов и media-файлов...
APPLET тег вставки Java апплетов
Таблицы
TABLE тег создания таблицы
TR тег строки таблицы
TD тег столбца таблицы
Формы
FORM тег создания формы
TEXTAREA тег текстовой области
SELECT тег выпадающего меню
OPTION тег пункта выпадающего меню
INPUT тег поля формы
Размещение информации на Интернет-сайте
Сайт Лукояновского педагогического колледжа расположен по адресу http:\\lukped.narod.ru. Зайти на него для дополнения материала удобно через поисковую систему Яндекс. Заходим на Яндекс.
Выбираем ссылку Народ в левой части Народа выбираем ссылку Создать свой сайт. Пишем логин и пароль.
Попадаем в мастерскую. Отдельные файлы можно загрузить. На этой странице несколько разделов: Мой дом, Мой бизнес, Общение, Кирпичики, Редактирование и управление, Мои данные.
В мастерской можно управлять файлами сайта. Для этого щелкаем на ссылку «Управление файлами и HTML редактор». Мы заходим в мастерскую управления файлами. Здесь можно выполнять стандартные операции над файлами, а именно:
Копировать;
Переместить;
Удалить.
Нам необходимо добавить материал, который мы подготовили, т.е графические файлы, HTML-документы на сайт учебного заведения.
Можно также просмотреть содержимое какой-либо папки. Для этого щелкаем на имя какой-либо папки и мы непосредственно заходим в эту папку, где могут располагаться вложенные папки, страницы, текстовые файлы и рисунки. Мы добавляем информацию в папку 2008-2009. Заходим в нее.
С помощью мастерской можно также загружать на сайт файлы созданные и отредактированные непосредственно на своем компьютере. Рассмотрим подробнее как это делается.
В мастерской щелкаем по ссылке «Загрузка файлов на сайт». Перед нами открывается окно загрузки в котором можно набрать адрес загружаемого файла, либо, нажав кнопку обзор, выбрать нужный файл для загрузки, в нашем случае файл News Выделяем его и нажимаем открыть добавляем обновленный файл News.
Возвращаемся назад в раздел Управление файлами, теперь видим, что News есть мы можем посмотреть. Текстовая часть есть, а рисунки отсутствуют.
Наша задача вставить вместо пустых ячеек фотографии. Их поместим в папку pic и выполняем те же действия и поочередно, загружаем файлы.
Максимальное количество файлов, которые можно загружать, равно десяти, но следует обратить внимание на то, что объем каждого файла не должен превышать 5 Мб! После проделанных действий нажимаем кнопку загрузить файлы.
Файлы на сайт можно также загружать с помощью FTP-протокола (File Transfer Protokol – протокол передачи файлов), который позволяет передавать файлы с одного компьютера на другой. Компьютеры, на которых находится информация для передачи по FTP–серверу называются FTP–серверами. Нужный нам FTP–сервер – это компьютер провайдера, который будет публиковать сайт. В данном случае провайдер предоставляет FTP – вход с собственным паролем. Чтобы перекачать файлы, нужны специальные программы: CuteFTP, Windows Commander, Far Manager. Чтобы работать с сервером провайдера, нужно настроить одну из этих программ. Для этого нужны три основные вещи: адрес FTP – сервера провайдера, имя и пароль. Далее загружаем одну из этих программ и настраиваем FTP – соединение. После настройки соединения, можно перекачивать файлы.
В дальнейшем можно таким же образом дополнять или изменять файлы, тем самым внося изменения в наш сайт. Предлагают копировать ссылку.
Обзор школьных учебников
В учебниках по информатике различных классов есть темы по изучению HTML.
В учебнике информатики 7 -9 [3] даётся понятие, что такое гипертекст. HTML (HyperText Markup Language) (§37). Знакомятся с основными элементами обработки текста ЭВМ, в том числе и HTML (§3). В §36 дети знакомятся с понятиями информационные сети, знакомятся с историей Интернета. В §37 дети знакомятся с информационными возможностями Интернета, возникновение World Wide Web, всемирным гипертекстом: URL и HTTP.
В учебнике информатики 10 - 11 [2] есть особый раздел Основы языка гипертекстовой разметки документа. В этом разделе рассматриваются такие вопросы, как Web - сайты и Web - страницы, форматирование текста и размещение графики, гиперссылки на Web - страницах, списки на Web - страницах, формы на Web - страницах, инструментальные средства создания Web - страниц, тестирование и публикация Web - сайта. Имеется краткий словарик тегов.
В учебнике информатики 10 - 11 [1] есть раздел Компьютерные коммуникации, в котором рассматриваются темы, как компьютерные сети, Интернет, гипертекст, способы получения информации, поиск в сети Интернет, этику Интернета, опасности Интернета, а также проводятся лабораторные работы по изготовлению первой HTML - страницы. Имеется краткий словарик тегов.
Заключение
Компьютеры, поступившие в школы, в соответствии с национальным проектом «Образование» имеют в своём составе модем. Он позволяет подключиться к Интернету. У школ появляется возможность создать свой Web-сайт и опубликовать его в Интернете. Наша работа показывает, как это можно сделать средствами языка гипертекста.
Я изучила научно-методическую литературу по данной теме, проанализировал этапы построения компьютерных приложений. Было рассмотрено:
основы языка HTML;
размещение текста на странице проекта;
обработка графики для Интернет-страницы;
применение таблиц;
изучение языка HTML в школе.
Затем приступил к созданию своего проекта – Web-сайта.
Были подготовлены файлы 112 преподавателей, построенных на языке HTML. На центральной странице размещён структурированный список сотрудников педколледжа. Все сотрудники разбиты по должностям и по отношению к определённой цикловой комиссии: музыкальных дисциплин, общественных дисциплин, психолого-педагогических дисциплин и т.д. Каждая фамилия в списке является гиперссылкой, т.е. щёлкая по ней мышкой мы можем перейти на страницу посвящённую этому преподавателю. Здесь можно узнать сведения об образовании, наградах, местах работы методической работе и др.
Созданный проект можно применить для любой школы.
Список используемой литературы
Байков В.Д., Сафронов И.К. «Уроки Интернета для школьников» – СПб.: БХВ – Петербург, 2003.
Гейн А. Г., Сенокосов А. И., Юнерман Н. А. «Информатика: Учеб. Для 10 – 11 кл. общеобразовательных. Учреждений» – 4-е изд. – М.: Просвещение, 2003 г.
Дуванов А. А. Интернет для начинающих. //Газета «Информатика». 1998г. №36
Дуванов А. А. Интернет для начинающих. //Газета «Информатика». 1998г. №40
Дуванов А. А. Интернет для начинающих. //Газета «Информатика».1999г. №21
Лапчик М.П., Семакина И.Г., Хеннер Е.К. «Методика преподавания информатики: Учебное пособие для студентов педвузов»; Под общей редакцией М.П. Лапчика. – М.: Издательский центр «Академия», 2003.
Левин А.Ш. «Самоучитель работы на компьютере, 7-е издание» - СПб.: Питер, 2003
Леонтьев В. П. «Новейшая энциклопедия персонального компьютера 2002» - М.: ОЛМА-ПРЕСС, 2002.
Н. В. Макарова Информатика. 10 –11 класс – СПб.: Питер, 2002.ОЛМА-ПРЕСС, 2002.
Семакин И.Г., Хеннер Е.К. «Информатика. 10-й класс»– М.: БИНОМ. Лаборатория знаний, 2002.
Семенов А. Л. «Роль информационных технологий в общем среднем образовании. //Информатика и образование» 2001.№2.
Симоновича С. В. Информатика. «Учебник для ВУЗОВ» Под ред. Санкт-Петербург: Питер, 2001.
Уваров А. Ю. «Интернет в школе: смена парадигмы//Информатика и образование» 2001. №3.
Угринович Н. Д. «Информатика и информационные технологии». Учебное пособие для 10-11 классов. – М.: Лаборатория Базовых Знаний, АО «Московские учебники», 2001.
Угринович Н.Д., Босова Л.Л., Михайлова Н.И., «Практикум по информатике и информационным технологиям. Учебное пособие для общеобразовательных учреждений» – М: Лаборатория Базовых Знаний, 2001.
Усенков Д. «Уроки Web-мастера» - М.: Лаборатория Базовых Знаний, 2001.
Холмогоров В. «Компьютерная сеть своими руками. Самоучитель» – СПб Питер, 2003.
Шафрин Ю., Горячев А. «Практикум по информационным технологиям» М.: Лаборатория базовых знаний, 1999.
Шафрин Ю.А «Учебник IBM PC» – М.: Бином. Лаборатория знаний, 2002.
Якушина Е. В. «Изучаем Интернет, создаем веб – страничку» 2 – е издание, серия «КомпАс» - СПБ.: Питер, 2003.
Проект «Поколение.RU» и Федерация Интернет образования.// Информатика и образование. 2001.,.№5