/>/>/>/>/>/>/>/>Введение
В настоящее время вРоссии реализуется национальный проект «Образование». В соответствие с этимпроектом в школу пришли современные компьютеры. В учебный план школы вводятсяновые предметы и элективные курсы. Одним из таких курсов является курс «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.
Чтобы уменьшить её объёми размер фотографии нужно:
1. Загрузить нужнуюфотографию в редактор.
2. Нажать кнопку Изображениев главном меню, выбрать пункт Размер изображения.
3. В открывшемсяокне Размер рисунка найти пункт разрешение и изменить его на меньшее. Размерфотографии уменьшится.
4. Выберите команду Файл-Сохранитьдля Web.
5. Из предлагаемыхформатов нужно выбрать формат JPEG.Далее, соглашаясь с тем, что предложит вам компьютер при конвертировании, можноуменьшить объём фотографии в несколько раз.
Обзор программы ACDSee
Для того, чтобы создать HTML-альбом в программе ACDSee. Мы должныоткрыть программу. Выбрать папку, содержащую нужные файлы. Выделить их. Выбираем в меню кнопку Создать. Создать HTML-альбом.
В появившемся диалоговомокне нажимаем кнопку Далее. Затем в строке Title пишем название альбома. Затем выбираем формат иразмер длины и ширины файла. Далее выбираем папку, в которую создастся HTML-альбом.
Язык HTML и егоназначение
HTML — это специальный язык, на котором описывается как должен быть показандокумент на экране компьютера. Самым важным элементом HTML-программы(HTML-документа) является ссылка. Ссылка позволяет передавать управление изодного HTML-документа в другой по контексту, то есть непосредственно в тойточке документа, где в этом есть необходимость по смыслу. Таким образомHTML-документы читают не как беллетристику, от первой страницы до последнейпо-порядку, а как справочники, от одной нужной темы до другой.
Итак, программирование ссылок — это самоеглавное свойство HTML-документа. Документы со ссылками, которые передаютуправление другим документам, называются гипертекстами. Можно сказать, что языкHTML — это язык для программирования гипертекста. Именно так и расшифровываетсяаббревиатура HyperText MarkupLanguage (язык разметки гипертекста).
Второй, важной особенностьюHTML-документа, является его независимость от компьютерных платформ (DOS,Windows, UNIX, MacOS,...), а также от типа видеовывода конкретного компьютера(CGA, EGA, VGA, SVGA,...).
Чем обеспечивается такая универсальность?
HTML-текст — это программа, которая задаетинформацию и правила показа этой информации на экране компьютера. Для каждойплатформы создается специальная программа-интерпретатор («браузер» втерминологии Интернета), которая должна интерпретировать (выполнять)HTML-программу по единым стандартным правилам. Браузер учитывает особенностикомпьютера для максимального соблюдения стандарта, HTML-программа ничего окомпьютере не знает.
Отмеченные выше два самыхважных свойства HTML-текстов позволяют использовать HTML-программирование дляконструирования страничек Интернета.
Любая Интернет-страницапредставляет собой текстовый файл в формате «Текст Windows». Расширение имени файла, содержащего текстИнтернет-страницы, должен быть htm. Файл главной страницы должен называться index.htmили welcome.htm. остальные страницы сайта могут иметь произвольныеимена, а пользователь будет попадать на них по ссылкам с основной страницы.
Всё содержимоеИнтернет-страницы заключается между тегами…, указывающий браузеру, что данный текст представляет собой HTML – документ и, возможно, содержит всебе теги, которые браузер должен выявить, распознать и правильноинтерпретировать.
ТипичнаяИнтернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).
Вот пример текстапростейшей HTML-программы:
HTML> началоHTML-документа
HEAD> начало заголовка
METAhttp-equiv=«Content-Type»
content=«text/html;charset=windows-1251»> информация о документе
TITLE>Упражнение 1TITLE> название документа
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> — заголовок
HR> — горизонтальнаялиния
P>...P> — абзац
Заголовки являются важнойчастью документа. Они разделяют информацию на отдельные логические части ипоэтому существенно улучшают ее восприятие.
Заголовки бывают разныепо значению, или как говорят, по уровню. Учебник, например, имеет название —это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав —это заголовки второго уровня. Главы содержат параграфы с заголовками третьегоуровня. Параграфы — пункты, обозначенные заголовками четвертого уровня.
В HTML-документеподдерживаются заголовки шести уровней при помощи конструкции
Hn>текстзаголовкаHn>
Здесь в качестве nследует использовать одну из цифр 1-6, обозначающую уровень заголовка.
Линия — простейшийграфический элемент, который умеет строить браузер. Горизонтальная линия задаетсятегом HR>, и этот тег не имеет парного закрывающего.Браузер, выполняя эту команду, выведет на экран горизонтальную линию:
Горизонтальные линииудобно использовать для дополнительного выделения (или разделения) элементовдокумента на экране.
Как правило браузериспользует не красную, а пустую строку для отделения одного абзаца от другогоили абзаца от других элементов документа. Задается абзац тегами P>и P>, между которыми помещается текст. Фактическиработа тега P> сводится к выводу перед текстовымфрагментом пустой строки. А вот парный тег P> простоигнорируется браузером, поэтому его можно и не писать.
· Абзацвыравнивается по левому краю.
· Между словамивсегда помещается ровно по одному пробелу независимо от того, сколько пробеловвы поместите в HTML-программе.
· Перенос текста нановую строку происходит тогда, когда очередное слово не помещается в экраннойстроке, а не тогда, когда вы перешли на новую строку в HTML-программе. «Физическое» и «логическое» форматирование текста
Все уже рассмотренныеспособы форматирования реализуют так называемые «физические» стили текста,когда теги явным образом указывают его вид. Однако в
HTML предусмотрено также и «логическое»форматирование текста, когда тот или иной тег указывает «название» стиля, аконкретные характеристики отображения для него заранее предопределены вбраузере. Вот пример нескольких названий стилей:
...Шрифтовое выделение
...Особое шрифтовое выделение
...Цитата
...Ввод с клавиатурыАвторское редактирование текста HTML. Самый простой способ, который позволяетсэкономить время при размещении на странице сколько угодно длинного фрагментауже отформатированного текста: заключите его между тегами ..., и браузер сохранитвсе пробелы и разбивки на строки, а используемый при отображении такого текстамоноширинный шрифт семейства 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 WideWeb, всемирным гипертекстом: URL и HTTP.
В учебнике информатики 10- 11 [2] есть особый раздел Основы языка гипертекстовой разметки документа. Вэтом разделе рассматриваются такие вопросы, как Web — сайты и Web — страницы,форматирование текста и размещение графики, гиперссылки на Web — страницах,списки на Web — страницах, формы на Web — страницах, инструментальные средствасоздания Web — страниц, тестирование и публикация Web — сайта. Имеется краткийсловарик тегов.
В учебнике информатики 10- 11 [1] есть раздел Компьютерные коммуникации, в котором рассматриваются темы,как компьютерные сети, Интернет, гипертекст, способы получения информации,поиск в сети Интернет, этику Интернета, опасности Интернета, а также проводятсялабораторные работы по изготовлению первой HTML — страницы. Имеется краткийсловарик тегов.
Заключение
Компьютеры, поступившие вшколы, в соответствии с национальным проектом «Образование» имеют в своёмсоставе модем. Он позволяет подключиться к Интернету. У школ появляетсявозможность создать свой Web-сайти опубликовать его в Интернете. Наша работа показывает, как это можно сделатьсредствами языка гипертекста.
Я изучиланаучно-методическую литературу по данной теме, проанализировал этапы построениякомпьютерных приложений. Было рассмотрено:
· основы языка HTML;
· размещение текстана странице проекта;
· обработка графикидля Интернет-страницы;
· применениетаблиц;
· изучение языка HTML в школе.
Затем приступил ксозданию своего проекта – Web-сайта.
Были подготовлены файлы112 преподавателей, построенных на языке HTML. На центральной странице размещён структурированныйсписок сотрудников педколледжа. Все сотрудники разбиты по должностям и поотношению к определённой цикловой комиссии: музыкальных дисциплин, общественныхдисциплин, психолого-педагогических дисциплин и т.д. Каждая фамилия в спискеявляется гиперссылкой, т.е. щёлкая по ней мышкой мы можем перейти на страницупосвящённую этому преподавателю. Здесь можно узнать сведения об образовании,наградах, местах работы методической работе и др.
Созданный проект можноприменить для любой школы.
/>/>Список используемойлитературы
1. Байков В.Д.,Сафронов И.К. «Уроки Интернета для школьников» – СПб.: БХВ – Петербург, 2003.
2. Гейн А. Г.,Сенокосов А. И., Юнерман Н. А. «Информатика: Учеб. Для 10 – 11 кл.общеобразовательных. Учреждений» – 4-е изд. – М.: Просвещение, 2003 г.
3. Дуванов А. А.Интернет для начинающих. //Газета «Информатика». 1998г. №36
4. Дуванов А. А.Интернет для начинающих. //Газета «Информатика». 1998г. №40
5. Дуванов А. А.Интернет для начинающих. //Газета «Информатика».1999г. №21
6. Лапчик М.П.,Семакина И.Г., Хеннер Е.К. «Методика преподавания информатики: Учебное пособиедля студентов педвузов»; Под общей редакцией М.П. Лапчика. – М.: Издательскийцентр «Академия», 2003.
7. Левин А.Ш.«Самоучитель работы на компьютере, 7-е издание» — СПб.: Питер, 2003
8. Леонтьев В. П.«Новейшая энциклопедия персонального компьютера 2002» — М.: ОЛМА-ПРЕСС, 2002.
9. Н. В. МакароваИнформатика. 10 –11 класс – СПб.: Питер, 2002.ОЛМА-ПРЕСС, 2002.
10. Семакин И.Г.,Хеннер Е.К. «Информатика. 10-й класс»– М.: БИНОМ. Лаборатория знаний, 2002.
11. Семенов А. Л.«Роль информационных технологий в общем среднем образовании. //Информатика и образование»2001.№2.
12. Симоновича С. В.Информатика. «Учебник для ВУЗОВ» Под ред. Санкт-Петербург: Питер, 2001.
13. Уваров А. Ю.«Интернет в школе: смена парадигмы//Информатика и образование» 2001. №3.
14. Угринович Н. Д.«Информатика и информационные технологии». Учебное пособие для 10-11 классов. – М.: Лаборатория Базовых Знаний, АО «Московские учебники», 2001.
15. Угринович Н.Д.,Босова Л.Л., Михайлова Н.И., «Практикум по информатике и информационнымтехнологиям. Учебное пособие для общеобразовательных учреждений» – М:Лаборатория Базовых Знаний, 2001.
16. Усенков Д. «УрокиWeb-мастера» — М.: Лаборатория БазовыхЗнаний, 2001.
17. Холмогоров В.«Компьютерная сеть своими руками. Самоучитель» – СПб Питер, 2003.
18. Шафрин Ю.,Горячев А. «Практикум по информационным технологиям» М.: Лаборатория базовыхзнаний, 1999.
19. Шафрин Ю.А«Учебник IBM PC» – М.: Бином. Лаборатория знаний, 2002.
20. Якушина Е. В.«Изучаем Интернет, создаем веб – страничку» 2 – е издание, серия «КомпАс» — СПБ.: Питер, 2003.
21. Проект«Поколение.RU» и Федерация Интернет образования.//Информатика и образование. 2001.,.№5