Создание Web

Отдел образования администрации Юсьвинского района
МОУ «Пожвинская средняя
общеобразовательная школа №2»
Районный конкурс учебноисследовательских работ
Секция: информационные технологии
Создание Web – страниц c помощью языка
гипертекстовой разметки HTML
Работу выполнил
ученик 9 «а» класса
Стариков Дмитрий
Александрович
Руководитель
Старикова И.Э.
учитель информатики
С. Пожва – 2007 год.
Содержание
Содержание ................................................................................................. 2
Введение ...................................................................................................... 3
Часть 1. Web – сайты и Web – страницы ................................................. 5
Часть 2. Основные теги HTML. ................................................................ 6
Часть 3. Подключение графических объектов. ..................................... 10
Часть 4. Гиперссылки на Web – страницах. .......................................... 12
Часть 5. Списки, формы, флажки на Web – страницах ........................ 14
Часть 6. Создание фреймовой структуры. ............................................. 18
Заключение................................................................................................ 21
Список используемой литературы ......................................................... 22
2
Введение
Интернет все активнее входит в нашу жизнь. Возможности,
представленные им, привлекают все больше и больше пользователей. Многие
люди начинают обращаться к глобальной сети для обмена информацией,
общения, размещения рекламы.
Публикации во всемирной паутине реализуется в форме Web – сайтов.
Web – сайт по своей структуре напоминает журнал, который содержит
информацию, посвященную какой либо теме или проблеме. Как журнал
состоит из печатных страниц, так и Web - сайт состоит из Web – страниц.
Умение создавать Web – сайты со временем становится актуальным
навыком простого пользователя. Опубликовать сайт в Интернете настолько
просто и доступно, что эта возможность привлекает все большее число людей.
Однако Web – сайт может привлечь к себе внимание лишь в том случае, если
его содержание вызывает какой-то интерес и если он имеет привлекательное
внешнее оформление. Оформление Web – страниц становится своеобразным
видом прикладного искусства. У него даже появилось свое название – «Webдизайн». И если человек решил опубликоваться в Интернете, то следует
разобраться – как и какими средствами создаются Web – страницы.
Тема нашей работы «Создание Web–страниц c помощью языка
гипертекстовой разметки HTML».
Цель работы – разработать сайт школы с помощью языка HTML.
В процессе работы необходимо было решить следующие задачи:
 Изучить основы языка HTML
 Изучить основные способы создания Web – страниц
 Продумать и спроектировать будующий сайт школы
 Собрать информацию, необходимую для верстки страниц сайта
 Продумать внешний вид сайта
 Создать сайт
Результатом нашей работы является создание сайта школы, который в
ближайшее время мы разместим в Глобальной сети Интернет.
В начале работы мы столкнулись с проблемой – создать сайт – это
настолько ново и не изучено, что помочь нам практически никто не смог.
Но, изучив литературу по этой теме, мы создали свой первый сайт, который
опубликовали в сети Интернет. Для создания сайта мы изучили основы языка
разметки HTML, но воспользовались готовым оформлением внешнего вида
страниц.
Познакомим вас с нашим первым сайтом.
Сайт Школы
В дальнейшем мы вышли на новый качественный уровень – создание сайта
с «чистого листа». Именно этот способ и описан в нашей работе.
Применение автоматизированных средств позволяет создавать Web –
страницы в минимальные сроки и без знания языка разметки HTML. Но
3
профессиональные
разработчики
сайтов
редко
используют
автоматизированные средства для создания Web – страниц, так как такие сайты
занимают много информационного пространства.
Режим теговой разметки требует более глубоких знаний – как минимум,
знания специального языка HTML и принципов предоставления информации в
различных браузерах.
Необходимо научиться создавать первую Web – страницу, и изучить
главные теги и контейнеры страницы:
<HTML></HTML>
<HEAD></HEAD>
<TITLE> </TITLE>
<BODY></BODY>
На этом этапе необходимо запомнить основные правила:
1. Открыть текстовый редактор БЛОКНОТ
2. Внести HTML – код
3. Сохранить файл под именем index.htm в папке сайта
4. Просмотреть данный файл в окне браузера
5.
Просмотреть
HTML
–
код
страницы
{ВИД-Просмотр HTML – кода}
Далее рассматриваются основы форматирования текста, такие как абзац,
полужирный текст, перевод строки, горизонтальная разделительная линия,
заголовки различного уровня, размещение текста по центру, цвет текста и
станиц. Форматирование позволяет сделать страничку привлекательной, яркой,
читаемой. Подключение графических объектов, таких как фотографии, делают
сайт более познавательным, ведь один рисунок может дать больше
информации, чем целая страница текста.
Сайт состоит из нескольких страниц, и связать их помогают гиперссылки,
которые также являются основополагающим атрибутом Интернета. С
помощью гиперссылок связаны не только страницы одного сайта, но и
документы всей сети Интернет.
Фреймовые структуры делают сайт еще более привлекательным и удобным
в просмотре. Это самая сложная часть работы, но, дойдя до этого уровня,
понимаешь, что без фреймов сайт не является сайтом.
Наш старый сайт мы дополнили новыми страницами, оформленными по
правилам гипертекстовой разметки документов HTML.
Новые страницы сайта
Работа носит практический характер, т.к. основная часть работы – создание
сайта. Познакомиться с сайтом нашей школы можно по адресу
http//www.lempiha2.narod.ru
4
Часть 1. Web – сайты и Web – страницы
Информация в Интернете организована в виде системы связанных Web –
страниц. Web–страница – файл в формате HTML (Hyper Text Mark-Up
Language – язык разметки гипертекста). Это текстовый файл, содержащий
воспроизводимый на экране текст, управляющие команды (теги), с помощью
которых форматируется текст, организуются гиперссылки, присоединяются
встроенные объекты, создаются формы для интерактивного контакта с
пользователями. Содержимое HTML -файла можно просмотреть с помощью
простого текстового редактора.
Страницы объединяются в сайты. Сайт – это совокупность
информационных единиц – страниц, объединенных общей целью. Просмотр
Web-страниц осуществляется с помощью специальных программ просмотра –
браузеров. В настоящее время наиболее распространенными браузерами
является Internet Explorer.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на
которой имеются гиперссылки на его основные разделы(Web – страницы).
Гиперссылки
также имеются на других Web – страницах сайта, что
обеспечивает возможность свободно перемещаться по сайту.
Web – сайты являются мультимедийными, так как кроме текста могут
содержать иллюстрации, анимацию, звуковую и видеоинформацию.
Для создания Web – страниц существует целый ряд инструментальных
средств высокого уровня, которые называются HTML - редакторы. Работа с
ними не требует знаний языка HTML. Такие редакторы, как MS FrontPage,
Macromedia Dreamweawer,
позволяют создавать Web – страницы в
минимальные сроки и без знания языка гипертекстовой разметки. Можно
создавать Web – страницы и в текстовом процессоре Word. Но
профессиональные
разработчики
сайтов
редко
используют
автоматизированные средства для создания Web – страниц, так как такие сайты
занимают много информационного пространства.
Другой путь создания Web – страниц – язык гипертекстовой разметки.
Он требует более глубоких знаний – как минимум, знания специального языка
HTML и принципов предоставления информации в различных браузерах.
Основа используемой в HTML технологии состоит в том, что в обычный
текстовый документ вставляются управляющие символы – теги, и в результате
мы получаем текстовый документ, который при просмотре в браузере мы
видим в форме Web-страницы. С помощью тегов можно изменять размер,
начертание и цвет символов, фон, определять положение текста на странице,
вставлять гиперссылки и так далее.
Основными достоинствами HTML – документов являются:
 Малый информационный объём, профессиональные возможности
дизайна.
Рассмотрим возможность создания Web-страниц и сайта с помощью языка
гипертекстовой разметки HTML, в программе Блокнот.
5
Часть 2. Основные теги HTML.
Для создания Web – страниц используются простейшие текстовые
редакторы, которые не включают в создаваемый документ управляющие
символы форматирования текста. В качестве такого редактора в Windows
можно использовать Блокнот.
Рассмотрим, создание Web – сайта на примере тематического сайта
«Партийная жизнь школы». Сначала разработаем проект сайта, то есть,
определим, сколько Web – страниц будет входить в сайт, какова их тематика и
как они будут связаны между собой.
Наш сайт кроме титульной страницы «Партийная жизнь школы» будет
содержать:
 Страницу партии Пионеры
 Страницу партии Детство
 Страницу партии Красоты
 Страницу Информационной партии
Открываем окно текстового редактора Блокнот.
Вид Web – страницы создаётся тегами, которые заключаются угольными
скобками. Теги могут быть одиночными или парными, для которых
обязательно наличие открывающего и закрывающего тегов (такая пара тегов
называется контейнером). Закрывающий тег содержит прямой слэш (/) перед
обозначением. Теги могут записываться как прописными, так и строчными
буквами.
HTML-код страницы помещается внутрь контейнера <HTML> </HTML>.
Без этих тегов браузер не в состоянии определить формат документа и
правильно его интерпретировать. Web - страница разделяется на две
логические части: заголовок и содержание.
Заголовок Web - страницы заключается в контейнер <HEAD> </HEAD> и
содержит название документа и справочную информацию о странице
(например, тип кодировки), которая используется браузером для её
правильного отображения.
Название Web - страницы содержится в контейнере <TITLE> </TITLE> и
отображается в строке заголовка браузера при просмотре страницы. Назовём
нашу Web-страницу «Партии»:
<HEAD>
<TITLE> Партии </TITLE>
</HEAD>
Основное содержание помещается в контейнер <BODY></BODY> и
может включать текст, таблицы, бегущие строки, ссылки на графические
изображения и звуковые файлы и так далее. Поместим для начала на страницу
текст «Партийная жизнь школы»
<BODY>
6
Партийная жизнь школы
</BODY>
Созданную страницу необходимо сохранить в виде файла. Принято
сохранять титульный файл сайта, то есть тот, который первым загружался в
браузер, под именем index.htm.
Рекомендуется создать для размещения сайта специальную папку и
сохранять все файлы разрабатываемого сайта в этой папке.
HTML – код Web – страницы будет иметь вид:
<HTML>
<HEAD>
<TITLE> Партии</TITLE>
</HEAD>
<BODY>
Партийная жизнь школы
</BODY>
</HTML>
На этом этапе необходимо запомнить основные правила:
1. Открыть текстовый редактор БЛОКНОТ
2. Внести HTML – код
3. Сохранить файл под именем index.htm в папке сайта
4. Просмотреть данный файл в окне браузера
5. Просмотреть HTML – код страницы
{ВИД-Просмотр HTML – кода}
Форматирование текста.
Пока наша страница выглядит не слишком привлекательной. Мелкий
шрифт и чёрные буквы на белом фоне почти не обращают на себя внимания.
С помощью HTML - тегов можно задать различные параметры
форматирования текста. Чтобы придать тексту требуемый вид воспользуемся
тегами:
<p> - тег абзаца; используется с закрывающим тегом </p>. Каждый абзац
начинается с новой строки. Между абзацами браузер оставляет небольшой
промежуток.
<b> - полужирный текст; используется с закрывающим тегом </b>. Любой
текст становится полужирным.
<br> - перевод строки.
<hr> - горизонтальная разделительная линия
<h1> - заголовок 1-го уровня используется с закрывающим тегом </h1>.
Чтобы выполнить форматирование имеющегося HTML – документа,
разместим теги в нужных местах текста:
<p><b><h1 align=center> Партия ПИОНЕРЫ.</h1></p></b><hr>
7
Параметры тегов
Некоторые теги имеют атрибуты, которые являются именами свойств и
могут принимать определенные значения. Так, заголовок по умолчанию
выровнен по левому краю страницы, однако принято заголовок размещать по
центру. Задать тип выравнивания заголовка для тега заголовка позволяет
атрибут ALIGN, которому требуется присвоить определённое значение:
Left – левый
Right – правый
Center – центр
Justify – выровненный
Эти инструкции аналогичны переменным и записываются в нутрии тега через
пробел. Например:
<p align=right>Текст</p> - обозначение выравнивания по правому краю.
С помощью тега FONT и его атрибутов можно задать параметры
форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет
задать гарнитуру шрифта (например FACE=”Arial”), атрибут SIZE – размер
шрифта (например SIZE=4), атрибут COLOR – цвет шрифта (например
COLOR=”#00FF00”)
Задать цвет текста можно следующим образом
<FONT COLOR=”#00FF00”>Текст</ FONT>
Чтобы определить цвет фона страницы, нужно в составе тега <BODY>
записать инструкцию bgcolor. Цвет в большинстве случаев задаётся на основе
трёх цветов: красного, зелёного и синего (цветовая схема RGB), где яркость
каждой из этих цветовых составляющих определяется числами от 0 и до 255 в
шестнадцатеричной системе исчисления. Перед числовой записью цвета всегда
ставится знак «#». Например, зеленый цвет задается числом #00FF00,
определяющим максимальную интенсивность зеленой и отсутствие других
составляющих.
Названия цветов и значения RGB
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = #00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = #000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF"
8
Добавим инструкции в теги, имеющиеся в HTML – коде нашей Web –
страницы, а тег <hr> перенесём внутрь блока абзаца для уменьшения отступа.
В результате должен получиться следующий текст:
<html>
<head>
<p><b><h1 align=center> ИНФОРМАЦИОННАЯ
партия.</h1></p></b><hr>
</head>
<body bgcolor="#808080">
<p><h2 align=center> ПРОГРАММА : </h2></p>
<h3> В программу нашей партии входит:<p>
1. Проведение вечеров.<p>
2. Выпуск школьной газеты.<p>
3. Помощь в устроении классных вечеров
и обще школьных праздников.</p></h3>
9
Часть 3. Подключение графических объектов.
Компьютерная графика обладает огромным потенциалом, ведь один
рисунок может дать больше информации, чем целая страница текста.
Для представления графических элементов в Интернете используются три
основных формата растровой графики: GIF, JPEG и PNG.
Поддержка форматов GIF и JPEG осуществляется всеми графическими
браузерами, формат же PNG имеет меньшее распространение. Другие форматы
кодирования изображения могут, поддерживаются некоторыми браузерами, но
в других не отображаться.
Форматы GIF, JPEG и PNG имеют некоторые особенности, которые в
значительной степени определяют их использование в тех или иных случаях.
- Формат GIF поддерживает не более 256 цветов, чего в большинстве случаев
бывает достаточно для кодировки небольших изображений с приемлемым
качеством. Часто количество цветов уменьшают сознательно для снижения
общего объема файла. Особенности этого формата является прогрессивная
развертка, позволяющая начать вывод изображения сразу после загрузки,
постепенно улучшая его качество в процессе загрузки. Другим частым
применением формата GIF анимированная графика, определяемая
возможностью присутствия в графическом файле соответствующих
управляющих команд и хранения нескольких изображений (кадров
анимации). По этому если необходимо разместить на странице небольшой
по объёму рисунок (например, логотип) со средним качеством или с
элементами анимации, то использование этого формата наиболее
проблемно.
- Формат JPEG является в некотором смысле противоположностью формата
GIF. В отличие от него, основное назначение формата JPEG заключается в
кодировании полноцветных изображений (до 16,7 млн. оттенков).
Использование сжатия с потерей качества позволяет добиться серьёзного
уменьшения объёма графического файла с приемлемым уровнем потери
качества изображения. Для хранения фотоизображений это наиболее
подходящий формат.
При создании графики, ориентированной на использование в Web –
страницах, важными являются следующие параметры.
- Размер изображения. Пользовательские дисплеи отличаются размерами по
диагонали и используемым разрешением. Не рекомендуется использовать
изображения, превышающие размеры окна браузера, развёрнутого на
полный экран при типовом разрешении 800х600 точек.
- Разрешение изображения (dpi, «dot per inch» - количество точек на дюйм).
Большое разрешение позволяет передать изображение с высочайшим
качеством, однако это приводит к увеличению размеров файла. Кроме того,
круг пользователей, которые смогут оценить это качество по достоинству,
довольно мал. Стандартным считается разрешение 72 точки на дюйм.
10
- Глубина цвета. Использование большого количества цветов в
изображениях в большинстве случаев не оправдывает себя (если только это
не изображение фотографического качества). Большинство графических
элементов может быть представлено с глубиной цвета в 8 битов (256
цветов).
Теговое включение графики.
В языке HTML
существует отдельный тег для вставки в текст
изображений - <img> он используется без закрывающего тега, а изображение
размещается там, где тег вставлен в текст.
Параметры изображения и имя файла, в котором он находится,
определяется инструкциями тега.
Инструкция src определяет имя графического файла. Пример:
<img src=”logo.gif”>
Среди других инструкций тега <img> существуют следующие:
- Alt – альтернативное текстовое описание рисунка;
- Height – переопределение высоты рисунка;
- Width – переопределение ширины рисунка;
- Border – задание ширины границ.
11
Часть 4. Гиперссылки на Web – страницах.
Первая титульная страница должна посетителю Web – сайта возможность
начать путешествие по сайту. Для этого на титульную страницу должны быть
помещены гиперссылки на другие страницы сайта.
Гиперссылка на web – страницы существует в форме указателя ссылки,
щелчок по которому обеспечивает переход на Web – страницу, указанную в
адресной части ссылки.
Для создания гиперсвязей между титульной страницей и другими
страницами сайта необходимо, прежде всего, создать заголовки Web –
страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не
иметь содержания. Все создаваемые страницы необходимо сохранить в виде
файла в папке сайта.
Каждая страница будет содержать следующий HTML – код:
<HTML>
<HEAD>
<TITLE> Заголовок сайта</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Создадим пустые публикации и сохраним их в файлах с именами pioneer,
detctvo, krasota, inform. в каталоге сайта. Гиперссылка состоит из двух частей:
указателя ссылки и адресной части ссылки. Указатель ссылки – это то, что мы
видим на Web – странице (текст или рисунок), обычно выделенный синим
цветом и подчёркиванием. Активизация гиперссылки вызывает переход на
другую страницу.
Абсолютный адрес документа, находящийся на локальном компьютере,
будет включать в себя путь к файлу и имя файла, например:
С:/Web – сайт/filename.htm
Относительный URL – адрес указывает на местоположение документа
относительно того, в котором находится указатель ссылки. При разработке
сайта рекомендуется входящие в него Web – страницы связываются
относительными ссылками. Это позволит не изменять адресную часть ссылок
при перемещении Web – сайта в другой каталог локального компьютера или
при публикации его в Интернете.
Прежде всего, необходимо разместить на титульной странице тексты
гиперссылок на каждую страницу сайта. Для представления гиперссылок
удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому
разместим их после набранного текста в новом абзаце в одну строку
12
разделенными несколькими пробелами. Такое размещение называют панелью
навигации.
Панель навигации будет представлять собой абзац, выровненный по
центру, в которых указатели гиперссылок разделены пробелами (&nbsp):
<p align= “center”>
[<a href="index.html"> Главная</a>] &nbsp
[<a href="we.html"> О нас </a] &nbsp [<a href="yubiley.html"> Юбилей </a>]
&nbsp [<a href="index_fr.htm">Партии</a>] &nbsp [<a
href="new.html">Новости</a>] &nbsp [<a href="anketa.htm">Анкета</a>]
&nbsp
Теперь для каждой гиперссылки определим адрес перехода. Для этого
используется контейнер гиперссылки <A></A> с атрибутом HREF, значением
которого является URL – адрес на локальном компьютере или в Интернете.
Контейнер должен содержать указатель гиперссылки:
<a href=”url”> указатель гиперссылки </a>
Вставим в титульную страницу код, создающий панель навигации:
[<a href="index.html"]
Панель навигации на титульной странице создана, теперь активизация
указателей гиперссылок будет приводить к переходу на другие страницы сайта.
Полезно на титульной странице сайта создать ссылку на адрес
электронной почты, по которому посетители могут связаться с администрацией
сайта. Для этого необходимо атрибуту ссылки HREF присвоить URL – адреса
электронной почты и вставить её в контейнер <ADDRESS></ADDRESS>,
который задаёт стиль абзаца, принятый для указания адреса.
<address>
<a href=”mailto:school2@yandex.ru>E-mail: school2@yandex.ru</a>
</address>
По щелчку мыши по ссылки на адрес электронной почты будет
открываться почтовая программа Outlook Express (или другая используемая по
умолчанию почтовая программа), где в строчке «Кому» будет заданный в
ссылке адрес.
13
Часть 5. Списки, формы, флажки на Web – страницах
Довольно часто при размещении текста на Web – страницах удобно
использовать списки в различных вариантах:
 Нумерованные списки, когда элементы списка идентифицируются с
помощью чисел.
 Маркированные списки, когда элементы списка идентифицируются с
помощью специальных символов (маркеров)
 Списки определений позволяют составлять перечни определений в так
называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список
может по своему типу отличатся от основного.
Сначала создадим главный нумерованный список основных категорий
программного обеспечения. Список располагается внутри контейнера
<OL></OL>, а каждый элемент списка определяется тегом <LI>. С помощью
атрибута TYPE тега <OL> можно задать тип нумерации: арабские (по
умолчанию), “I” (римские цифры), “a” (строчные буквы) и др.
Откроем в блокноте файл menu_a, введём заголовок «menu» и добавим
следующий HTML – код, задающий список:
<!-- создаем нумерованный список -->
<p align=left>
<ol>
<li> <a href="1.htm#label1">партия "Пионеров"</a><hr>
<li> <a href="2.htm#label2">партия "Детство"</a><hr>
<li> <a href="3.htm#label3">"Информационная партия"</a><hr>
<li> <a href="4.htm#label4">партия "Красоты"</a><hr>
<li> <a href="5.htm#label5">партия "За свободную прессу"</a><hr>
<li>
<a
href="6.htm#label6">партия
"Танцы
во
имя
здоровья"</a><hr>
<li> <a href="7.htm#label7">"Партия юмора"</a>
</ol>
Создадим теперь вложенный не нумерованный список для одного из
элементов основного списка. Список располагается в нутрии контейнера
<UL></UL>, а каждый элемент списка определяется тегом <LI>. помощью
атрибута TYPE тега <OL> можно задать вид маркера списка: “disc” (диск),
“square” (квадрат) или “circle” (окружность).
<UL>
<li> <a href="1.htm#label1">партия "Пионеров"</a><hr>
<li> <a href="2.htm#label2">партия "Детство"</a><hr>
<li> <a href="3.htm#label3">"Информационная партия"</a><hr>
14
<li> <a href="4.htm#label4">партия "Красоты"</a><hr>
<li> <a href="5.htm#label5">партия "За свободную прессу"</a><hr>
<li> <a href="6.htm#label6">партия "Танцы во имя
здоровья"</a><hr>
<li> <a href="7.htm#label7">"Партия юмора"</a>
<!-- ... -->
</UL>
Для того чтобы посетители сайта могли не только просматривать
информацию, но и отправлять сведения администраторам сайта, на его
страницах размещают формы. Формы включают в себя управляющие элементы
различных типов: текстовые поля, раскрывающиеся списки, флажки,
переключатели.
Разместим на странице «Анкета» анкету для посетителей нашего сайта.
Вся форма заключается в контейнере <FORM></FORM>. Сначала выясним
имя посетителя нашего сайта и его электронный адрес, чтобы иметь
возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля. Для получения этих данных разместим на форме два
однострочных текстовых поля для ввода информации. Текстовые поля
создаются с помощью тега <INPUT> со значением атрибута TYPE=”text”.
Атрибут NAME является обязательным и служит для идентификации
полученной информации. Значением атрибута SIZE является число, задающее
длину поля ввода в символах.
<form>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="text" NAME="name" SIZE=30> <BR>
E-mail: <BR>
<input type="text"
NAME="e-mail" SIZE=30>
<BR>
</form>
Переключатели. Создадим группу переключателей «радиокнопок».
Создаётся с помощью тега <INPUT> со значением атрибута TYPE=”radio”. Все
элементы в группе должны иметь одинаковое значение NAME. Например,
NAME=”group”.
VALUE также обязательный атрибут, которому присвоим значения
“schoolboy”, “student” и “teacher”. Значение атрибута VALUE должно быть
уникальным для каждой кнопки, так как при её выборе именно они передаются
серверу.
Атрибут CHECKED, который задаёт выбор кнопки по умолчанию, но в
данном случаи не используется.
Учились ли вы в нашей школе?: <br>
<INPUT TYPE="radio" NAME="group"
VALUE="schoolboy">Учился<BR>
15
<INPUT TYPE="radio" NAME="group" VALUE="student">Нет<BR>
<INPUT TYPE="radio" NAME="group" VALUE="teacher">Учатся мои
дети<BR>
<INPUT TYPE="radio" NAME="group" VALUE="teacher">Учусь
сейчас<BR>
Флажки. Создаются в теге <INPUT> со значением TYPE=”checked”. Все
элементы в группе должны иметь одинаковое значение NAME. Например,
NAME=”group”.
Ещё одним обязательным атрибутом является
VALUE, которому
присваиваются значения “www”, “e-mail” и “ftp”. Должно быть уникальным
для каждой кнопки, так как при её выборе именно они передаются серверу.
Атрибут CHECKED, который задаёт выбор кнопки по умолчанию, но в
данном случаи не используется.
<br>
<INPUT TYPE="checkbox" NAME="group" VALUE="www">*<BR>
<INPUT TYPE="checkbox" NAME="group" VALUE="e-mail">*<BR>
<INPUT TYPE="checkbox" NAME="group" VALUE="ftr">*<BR>
Текстовая область. В заключении поинтересуемся, что ещё посетитель
хочет видеть на нашем сайте. Так как мы заранее не можем знать, какой
обширный ответ даст посетитель, отведём для него текстовую область с
линейкой прокрутки. В такое поле можно ввести достаточно подробный текст.
Создаётся такая область с помощью тега <TEXTAREA> с обязательными
атрибутами: NAME, задающим имя области, ROWS, определяющим число
строк, и COLS – число строк в области.
Какую информацию о школе вы хотели бы видеть на нашем сайте?
<br>
<textarea name="resume" ROWS=4 COLS=30>
</textarea>
<br>
<br>
Отправка и очистка данных из форм. Отправка введенной в форму
информации или очистка уже введенной информации осуществляется с
помощью кнопок. Кнопки создаются с помощью тега <INPUT>. Для создания
кнопки отправления, атрибуту TYPE необходимо присвоить значение “submit”,
а атрибуту VALUE который задаёт надпись на кнопке, - «отправить».
Для создания кнопки удаления, атрибуту TYPE необходимо присвоить
значение “reset”, а атрибуту VALUE который задаёт надпись на кнопке, «очистить».
<INPUT TYPE="submit" VALUE="ОТПРАВИТЬ">
<INPUT TYPE="reset" VALUE="ОЧИСТИТЬ">
<FROM ACTION="URL></FROM>
Заполненная форма отправляется на сервер или автору сайта, для
обработки.
16
Для того чтобы при щелчке по кнопке данные отправлялись на сервер,
необходимо указать, куда их будет отправлять программа. Эти параметры
задаются с помощью атрибута ACTION контейнера <FORM>.
<FORM ACTION=”URL”></FORM>
Атрибутом ACTION определяется URL – адрес программы распложенной
на Web – сервере, которая обрабатывает полученные данные. Пусть этой
программой будет bd.exe. обычно такие программы хранятся в каталоге cgi-bin.
Тогда атрибут ACTION будет выглядеть так:
ACTION=”http:/www.mycompany.ru./ cgi-bin/ bd.exe”
На нашем сайте используются текстовые поля, переключатели и формы на
страничке «Анкета». Посетители нашего сайта могут ответить на вопросы
анкеты и написать свои пожелания.
17
Часть 6. Создание фреймовой структуры.
Использование фреймов подразумевает создание нескольких независимых
информационных документов, загружаемых каждый в свой фрейм, и создании
специального файла, определяющего структуру фрейма. Например, для
создания HTML – документа, содержащего два фрейма, необходимо создать
три файла. Зато у фрейма есть преимущества, которых нет у таблиц. Так,
созданием различных фреймов, могут заниматься различные разработчики.
Каждый фрейм обрабатывается браузером отдельно, что даёт возможность
сделать часть информации постоянно видимой в окне браузера. Существует
возможность также управления одним фреймов из других, что широко
используется для создания меню, заголовки сайтов и других элементов,
которые постоянно присутствовать на странице. Однако следует помнить (хотя
сейчас это требование и не особенно актуально), что не все браузеры
поддерживают фреймы, так что, используя их, вы ограничиваете круг
потенциальных посетителей вашего сайта. Эту проблему можно решить,
предусматривая во фреймовой структуре запасной бесфреймовый вариант.
Рассмотрим процесс создания документа на примере:
В данном случае управляющим является второй фрейм. Определив
элементы меню мы можем менять содержание первого и третьего фреймов, не
затрагивая второй. Тем самым снижается объём загружаемой информации, так
как меню загружено.
Каждый фрейм – это отдельный HTML - документ. Web – страницы,
загружаемые во фреймы представляют собой обыкновенный HTML –
документ. Пусть во фрейм 1 загружается файл header.htm, во фрейм 2
menu.htm, во фрейм 3 info_1.htm. файлу структуры фреймов дадим имя
index_fr.htm.
Текст HTML - документа header.htm при этом может иметь вид:
<frameset rows="100,*">
<!-- первая строка -->
<frame src="images/3343.gif" frameborder=0 scrolling=no
name=header_frame>
Текст HTML - документа menu.htm при этом может иметь вид:
<!-- вторая строка представляет собой группу
вложенных фреймов -->
<frameset cols="*,3*">
<!-- первый столбец второй строки -->
<frame src="menu_A.htm" frameborder=0 scrolling=no
name=menu_frame>
Текст HTML - документа info_1.htm при этом может иметь вид:
<!-- второй столбец второй строки -->
<frame src="info1.htm" frameborder=0 scrolling=auto
name=info_frame>
18
</frameset>
После создания каждого отдельного фрейма их нужно связывать в единую
конструкцию. Для этого используется HTML – документ, в котором тело
документа заменяется описанием фреймовой структуры.
Структура фреймов определяется с помощью тега <frameset> который
является контейнером для тегов, определяющих фреймы - <frame>.
Тег <frameset> имеет два важных атрибута: rows и cols. Первый
определяет количества горизонтальных фреймов (строк), второй – количество
вертикальных (столбцов). Фреймы создаются с лева на право (для столбцов) и
сверху вниз (для строк). Если указаны оба атрибута, фреймы создаются с лева
на право в каждой строке. Размеры фреймов могут определяться тремя
способами: фиксировано, относительно страницы, либо относительно других
фреймов страницы. Фиксированное определение размера длины или высоты в
пикселях, относительное – в процентах от размера окна браузера. Символ «*»
при этом используется для обозначения всего оставшегося пространства окна
браузера и вместе с числами может определять размеры фреймов. Так, если
документ состоит из двух фреймов, кодируемых атрибутом rows=”2*, *” , то
это означает, что окно браузера будет разделено на две строки, причем первая
будет в два раза больше второй. Если размер фрейма не указывается, то он
занимает все доступное пространство.
Какой файл следует изначально загружать в определенный фрейм, также
определяется тегом <frame>. Его атрибут src задает URL HTML – документа,
загружаемого в данный фрейм.
Чтобы определить фреймовую структуру нашего сайта, текст должен
иметь вид:
<html>
<head>
<title>Партийная жизнь</title>
</head>
<frameset rows="100,*">
<!-- первая строка -->
<frame
src="images/3343.gif"
frameborder=0
scrolling=no
name=header_frame>
<!-- вторая строка представляет собой группу
вложенных фреймов -->
<frameset cols="*,3*">
<!-- первый столбец второй строки -->
<frame
src="menu_A.htm"
frameborder=0
scrolling=no
name=menu_frame>
<!-- второй столбец второй строки -->
<frame
src="info1.htm"
frameborder=0
scrolling=auto
name=info_frame>
</frameset>
</frameset>
</html>
19
В результате при загрузке этого файла в браузере должен получиться
документ аналогичный показанному на рисунке.
Границы между фреймами могут быть использованы для изменения их
размера. Атрибут noresize тега <frame> используется, если необходимо
запретить изменение размеров текущего фрейма.
Среди других атрибутов данного тега можно выделить:
 Scrolling – определяет присутствие полос прокрутки и может
принимать три значения: yes – полосы отсутствуют, no – полосы
присутствуют, auto полосы присутствуют, если весь текст не умещается
во фрейм.
 Frameborder – определяет показ страницы фрейма и может принимать
значение 1 (границы показаны) или 0(границы отсутствуют). Если
установлено значение 0, то граница может всё равно появиться, если её
показ задан в других фреймах.
Представленная страница состоит из трех фреймов: заголовка, меню,
информационной части.
Страницы, созданные с помощью фреймов, более сложные, но они имеют
небольшой объем информации и представляют новые возможности для Webдизайна.
20
Заключение
Данная работа будет полезна тем, кто решит попробовать создать свой
сайт и выйти с ним в глобальную сеть Интернет, для того, чтобы рассказать о
себе. Практическая часть работы заинтересует тех, кто захочет узнать о нашей
школе, посещая страницы сайта. Посетителями сайта могут быть и бывшие
ученики, которые сейчас находится вдали от родного поселка, и современные
ученики, и родители. На страницах сайта можно получить информацию о
самой школе и о происходящих в ней событиях. Данные о посещении нашего
сайта и добрые слова можно оставить на страничке «Гость».
Работа может быть использована в качестве учебного курса при изучении
языка гипертекстовой разметки HTML и практического пособия при создании
сайтов. Каждая часть работы представлена в виде презентаций, с помощью
которых можно проводить занятия.
21
Список используемой литературы
1. М. Ю. Монахов, А. А. Воронин. – Создаём школьный сайт в Интернете.
Элективный курс: Учебное пособие. БИНОМ. Лаборатория знаний, 2005.
2. И. Г. Семакин, Е. К. Хеннер. Информатика. 10-й класс. БИНОМ.
Лаборатория знаний, 2005.
3. Н. Д. Угринович. Информатика и информационные технологии. Учебник
для 10-11 классов. БИНОМ. Лаборатория знаний, 2005.
22