Ход практической работы

ПРАКТИЧЕСКИЕ РАБОТЫ №15-18

«РАЗРАБОТКА САЙТА С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА
РАЗМЕТКИ ТЕКСТА HTML»

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

Задание. В операционной системе Windows создать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт "Компьютер" должен содержать начальную страницу и страницы "Программы", "Словарь" и "Анкета".

ИНСТРУКЦИЯ К РАБОТЕ

1. Посмотрите видеоуроки сайта http://htmlboss.ru/ Урок 5-8

2. Создайте на рабочем столе папку Сайт_ФамилияИ (например, Сайт_СтебаковаО). В этой папке создайте 4 файла в текстовом редакторе Блокнот и сохраните их с именами index.htm (Начальная страница ), software.htm ( страница Программы), glossary.htm ( страница Словарь) и anketa.htm ( страница Анкета).

3. Создайте свой сайт. (Инструкция ниже).

4. Папку с файлами отправьте до 20 апреля на электронную почту urok_fsoh1@mail.ru

5. Обратите внимание в журнал будет выставлено 4 оценки. Критерии оценивания:

	Структура сайта	Цветовое оформление	Контент (наполняемость сайта информацией,форматирование шрифта)	Навигация по сайту.
Оценка «3» есть не существенные ошибки.
Оценка «4» сайт полностью соответствует содержанию практической работы
Оценка «5» в работе отсутствуют ошибки, сайт дополнен своими элементами

6. В помощь по созданию сайта на языке разметки текста HTML посмотрите видео по ссылке https://youtu.be/ORLSP0wkCFw

ХОД ПРАКТИЧЕСКОЙ РАБОТЫ

Создадим начальную страницу Web-сайта "Компьютер".
1. В через текстовой редактор Блокнот откройте файл index.htm (Щелкните правой кнопкой мышки по файлу и выберите Открыть с помощью - Блокнот)
2. Ввести тэги, определяющие структуру Web-страницы.
Ввести заголовок Web-страницы: "Компьютер".
Ввести заголовок текста, отображаемый в браузере: "Всё о компьютере"

<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Всё о компьютере
</BODY>
</HTML>

Просмотреть получившуюся Web-страницу в браузере. Откройте файл (двойной щелчок) index.htm, который находится в папке Сайт
На начальной страницу сайта обычно размещается текст, кратко описывающий его содержание. Поместим на начальную страницу текст, разбитый на абзацы с различным выравниванием.

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. На начальной странице сайта "Компьютер" логично разместить изображение компьютера. Для этого Сохраните рисунок компьютера в папке Сайт под именем computer.gif. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
<IMG SRC="computer.gif" ALIGN="right">

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

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

7. <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>

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

8. <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>

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

9. <DL>
<DT>Процессор
<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT>Оперативная память
<DD>Устройство, в котором хранятся программы и данные.
</DL>

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

10. <FORM>
    Пожалуйста, введите ваше имя:
    <BR>
    <INPUT TYPE="text" NAME="ФИО" SIZE=30>
    <BR>
    E-mail:
    <BR>
    <INPUT TYPE="text" NAME="e-mail" SIZE=30>
    <BR>
    </FORM>

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

11. Укажите, к какой группе пользователей вы себя относите:
   <BR>
   <INPUT TYPE="radio" NAME="group" VALUE="учащийся"> учащийся
   <BR>
   <INPUT TYPE="radio" NAME="group" VALUE="студент"> студент
   <BR>
   <INPUT TYPE="radio" NAME="group" VALUE="учитель"> учитель
   <BR>

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

12. Какие из сервисов Интернета вы используете наиболее часто:
   <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>

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

13. Какой браузер вы используете наиболее часто:
   <BR>
   <SELECT NAME="Браузер">
   <OPTION SELECTED>Internet Explorer
   <OPTION SELECTED>Google Chrome
   <OPTION SELECTED>Opera
   <OPTION SELECTED>Mozilla
   </SELECT>
   <BR>

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

14. Какую ещё информацию вы хотели бы видеть на сайте?
   <BR>
   <TEXTAREA NAME="Ваши предложения" ROWS=4 COLS=30>
   </TEXTAREA>
   <BR>

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

15. <FORM ACTION="mailto:ugrinovich@metodist.ru" METHOD="POST" ENCTYPE="text/plain">
<INPUT TYPE="submit" VALUE="Отправить">