Последовательность создания веб-проекта.

Практическая работа

Разработка сайта с использованием языка разметки текста HTML

Аппаратное и программное обеспечение. Компьютер с установленной операционной системой Windows или Linux, подключённый к Интернету.

Цель работы. Научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.

Краткие теоретические сведения.

Веб-узел - это специальная папка, в которой размещены файлы, содержащие текстовую информацию по какой-либо теме, а также информацию в виде рисунков, графиков, фотографий, анимационных изображений и звуковых эффектов. В этих файлах содержатся описания веб-страниц на одном из языков разметки гипертекста - HTML (HyperText Markup Language) или XML (Extensible Markup Language). Они имеют одно из следующих расширений: html, htm, xml. Все, что содержит веб-узел, далее будем называть веб-проектом. Существуют три типа веб-узлов: создаваемые на веб-сервере поставщика услуг Интернета; создаваемые в интрасети как веб-узлы группы; виртуальный веб-узел, создаваемый на жестком диске автономного компьютера, не подключенного к какой-либо сети.

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

 

Рис.1 Связь информационных страниц в веб-узле

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

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

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

https://www.fa.ru, то на самом деле будет сформирован URL-адрес

HTTP://www.fa.ru/index.htm

и будет выполнена попытка найти и загрузить веб-страницу именно с таким URL-адресом.

Поэтому файл, в котором хранится первая веб-страница, и с которой посетитель начнет движение по страницам узла, используя гиперссылки, должен иметь имя «index.htm».

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

Последовательность создания веб-проекта.

Процесс создания проекта состоит из нескольких этапов.

1. На первом этапе, прежде чем приступать к созданию проекта, следует определиться с его функциональным назначением и тематической направленностью информационного материала.

2. На втором этапе обычно проводится декомпозиция общей темы на тематические подразделы и отдельные статьи с определением связей между ними. Результатом такой декомпозиции является создание структуры проекта.

 

Задание. Cоздать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт "Компьютер" должен содержать начальную страницу и страницы "Программы", "Словарь" и "Анкета". Сохранить их в файлах с именами index.html, software.html, glossary.html и anketa.html в папке сайта.

Начальная страница сайта. Создадим начальную страницу Web-сайта "Компьютер".

1. Запустить простейший текстовой редактор Блокнот.

2. Ввести тэги, определяющие структуру Web-страницы.

Ввести заголовок Web-страницы: "Компьютер".

Ввести заголовок текста, отображаемый в браузере: "Всё о компьютере"

<HTML>

<HEAD>

<TITLE>Компьютер</TITLE>

</HEAD>

<BODY>

Всё о компьютере

</BODY>

</HTML>

Просмотреть получившуюся Web-страницу в браузере.

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

<P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>

<P ALIGN="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>

4. Пусть начальная страница сайта "Компьютер" будет содержать центрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев.

<FONT COLOR="blue">

<H1 ALIGN="center">

Всё о компьютере

</H1>

</FONT>

<HR>

<P ALIGN="left">На этом сайте...</P>

<P ALIGN="right">Терминологический словарь...</P>

На начальной странице сайта "Компьютер" логично разместить изображение компьютера.

5. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:

<IMG SRC="computer.jpg" ALIGN="right">

Рисунок для практики:

6. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь" и "Анкета". Сохраним их в файлах с именами software.html, glossary.html и anketa.html в папке сайта. Такие пустые страницы должны иметь заголовки, но могут пока не иметь содержания.

<HTML>

<HEAD>

<TITLE>Заголовок страницы</TITLE>

</HEAD>

<BODY>

 

</BODY>

</HTML>

Создадим панель навигации по сайту "Компьютер". На начальной странице сайта разместим указатели гиперссылок на страницы сайта. В качестве указателей гиперссылок удобнее всего выбрать названием страниц, на которые осуществляется переход.

Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами (&nbsp). Такое размещение гиперссылок часто называют панелью навигации.

7. Созданная начальная страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты.

<P ALIGN="center">

[<A HREF="software.htm">Программы</A>] &nbsp[<A HREF="glossary.htm">Словарь</A>] &nbsp[<A HREF="anketa.htm">Анкета</A>]

</P>

<ADRESS>

<A HREF="mailto:username@server.ru">E-mail: username@server.ru</A>

</ADRESS>

8. Web-страницы "Программы". Web-страницу "Программы" мы представим в виде нумерованных и маркированных списков.

<html>

<head>

<title>Программы</title>

</head>

<body>

<H1 ALIGN="center">

<FONT COLOR="blue">

Программное обеспечение

</FONT>

</H1>

<HR>

<OL>

<LI> Системные программы

<LI> Прикладные программы

<UL TYPE="square">

<LI> текстовые редакторы;

<LI> графические редакторы;

<LI> электронные таблицы;

<LI> системы управления базами данных.

</UL>

<LI> Системы программирования

</OL>

</body>

</html>

9. Web-страница "Словарь". Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов.

<DL>

<DT>Процессор

<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.

<DT>Оперативная память

<DD>Устройство, в котором хранятся программы и данные.

</DL>

10. Интерактивная Web-страница "Анкета". Интерактивная Web-страница "Анкета" содержит форму, которая заключается в контейнере <FORM></FORM>. В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.

<FORM>

Пожалуйста, введите ваше имя:

<BR>

<INPUT TYPE="text" NAME="ФИО" SIZE=30>

<BR>

E-mail:

<BR>

<INPUT TYPE="text" NAME="e-mail" SIZE=30>

<BR>

</FORM>

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

Укажите, к какой группе пользователей вы себя относите:

<BR>

<INPUT TYPE="radio" NAME="group" VALUE="учащийся"> учащийся

<BR>

<INPUT TYPE="radio" NAME="group" VALUE="студент"> студент

<BR>

<INPUT TYPE="radio" NAME="group" VALUE="учитель"> учитель

<BR>

12. Вставим в HTML-код группу флажков, которые выявляют наиболее популярные сервисы Интернета.

Какие из сервисов Интернета вы используете наиболее часто:

<BR>

<INPUT TYPE="checkbox" NAME="box1" VALUE="WWW"> WWW

<BR>

<INPUT TYPE="checkbox" NAME="box2" VALUE="e-mail"> e-mail

<BR>

<INPUT TYPE="checkbox" NAME="box3" VALUE="FTP"> FTP

<BR>

13. Вставим в HTML-код раскрывающийся список, содержащий наиболее популярные браузеры.

Какой браузер вы используете наиболее часто:

<BR>

<SELECT NAME="Браузер">

<OPTION SELECTED>Internet Explorer

<OPTION SELECTED>Google Chrome

<OPTION SELECTED>Opera

<OPTION SELECTED>Mozilla

</SELECT>

<BR>

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

Какую ещё информацию вы хотели бы видеть на сайте?

<BR>

<TEXTAREA NAME="Ваши предложения" ROWS=4 COLS=30>

</TEXTAREA>

<BR>

15. Чтобы данные из интерактивной формы были отправлены по указанному адресу электронной почты или на сервер, необходимо указать этот адрес и создать кнопку Отправить.

<FORM ACTION="mailto:v.s.kashina@yandex.ru" METHOD="POST" ENCTYPE="text/plain">

<INPUT TYPE="submit" VALUE="Отправить">

16. После открытия в браузере Web-страницы "Анкета" и внесения данных в поля формы необходимо щёлкнуть на кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.

Через несколько секунд по электронной почте придёт сообщение, в котором будут указаны имена полей формы и введённые пользователем значения.