Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Практическая работа 2.
Создание Web-сайта «Компьютер»
Заполним содержимым макет сайта maket и создадим учебный Web-сайт «Компьютер».
Задание 1. Создание папки
1. Создать новую папку comp.
2. Скопировать в папку comp все файлы, содержащиеся в папке maket.
3. Переименовать файлы 1.htm, 2.htm, 3.htm в файлы software. htm, glossary. htm и anketa. htm соответственно.
Задание 2. Форматирование текста. Списки
В этом задании необходимо заполнить содержанием страницу сайта «Программы».
1. Открыть из папки comp документ software. htm.
2. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите меню Вид→Просмотр HTML-кода.
3. Ввести имя страницы «Программы» (изменения в файле выделены полужирным шрифтом):
<HTML>
<HEAD>
<TITLE> Программы </TITLE>
</HEAD>
<BODY >
</BODY>
</HTML>
4. Сохраните изменения в файле software. htm и просмотрите страницу в Internet Explorer.
5. Ввести заголовок страницы — «Программное обеспечение» и отформатировать его следующим образом:
· размер шрифта самый крупный (<H1>);
· выравнивание по центру (тэг <ALIGN>);
· цвет заголовка — синий (тэг <FONT COLOR>);
· отделить от основного текста горизонтальной линией (одиночный тэг <HR>).
Внимание! Кавычки внутри тэга вводить только на английской
раскладке клавиатуры!
<HTML>
<HEAD>
<FONT COLOR=”blue”>
<H1 ALIGN="center">
Программное обеспечение</H1>
</FONT>
<HR>
<TITLE> Программы </TITLE>
</HEAD>
<BODY >
</BODY>
</HTML>
6. Сохраните изменения в файле software. htm и просмотрите страницу в Internet Explorer.
7. Добавить HTML-код, задающий нумерованный список:
<HTML>
<HEAD>
<FONT COLOR=”blue”>
<H1 ALIGN="center">
Программное обеспечение</H1>
</FONT>
<HR>
<TITLE>Программы</TITLE>
</HEAD>
<BODY >
<OL> начало кода нумерованного списка
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>конец кода нумерованного списка
</BODY>
</HTML>
8. Добавить HTML-код, задающий вложенный список для элемента <LI>Прикладные программы:
…
<OL>
<LI>Системные программы
<LI>Прикладные программы
<UL>начало кода маркированного списка
<LI >текстовые редакторы;
<LI>графические редакторы;
<LI>электронные таблицы;
<LI>системы управления базами данных.
</UL>конец кода маркированного списка
<LI>Системы программирования
</OL>
</BODY>
</HTML>
9. Сохраните изменения в файле software. htm и просмотрите страницу в Internet Explorer.
Задание 3. Форматирование текста. Список определений
В этом задании необходимо заполнить содержанием страницу сайта «Словарь».
1. Открыть из папки comp документ glossary. htm.
2. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите меню Вид→Просмотр HTML-кода.
3. Ввести имя страницы «Программы» (изменения в файле выделены полужирным шрифтом):
<HTML>
<HEAD>
<TITLE> Словарь </TITLE>
</HEAD>
<BODY >
</BODY>
</HTML>
4. Сохраните изменения в файле glossary. htm и просмотрите страницу в Internet Explorer.
5. Ввести заголовок «Компьютерные термины» и добавить НTML-код, задающий список определений:
<HTML>
<HEAD>
<FONT COLOR=”blue”>
<H1 ALIGN =”center”>
Компьютерные термины</H1>
</FONT>
<HR>
<TITLE>Словарь</TITLE>
</HEAD>
<BODY >
<DL>начало контейнера списка определений
<DT>непарный тэг термина
Процессор
<DD>непарный тэг определения
Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT>Оперативная память
<DD>Устройство, в котором хранятся программы и данные.
` </DL>конец контейнера списка определений
</BODY>
</HTML>
6. Сохраните изменения в файле glossary. htm и просмотрите страницу в Internet Explorer.
Задание 4. Формы на Web-страницах
Разместим на странице «Анкета» анкету для посетителей для того, чтобы они могли не только просматривать информацию, но и отправлять сведения администраторам сайта. Для создания анкеты используют форму, которая включает в себя управляющие элементы: текстовые поля, раскрывающиеся списки, флажки, переключатели и т. д. Вся форма заключается в контейнер <FORM></FORM>.
1. Открыть из папки comp документ anketa. htm.
2. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите меню Вид→Просмотр HTML-кода.
3. Ввести имя страницы «Анкета» и заголовок страницы «Анкета»:
<HTML>
<HEAD>
<FONT COLOR="blue">
<H1 ALIGN ="center">
Анкета </H1>
</FONT>
<TITLE> Анкета </TITLE>
</HEAD>
<BODY >
</BODY>
</HTML>
4. Сохраните изменения в файле anketa. htm и просмотрите страницу в Internet Explorer.
5. Добавить код, создающий текстовые поля для ввода данных. Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE=”text”. Атрибут   задает пробелы между текстовыми полями
…
<BODY >
<FORM>начало контейнера формы
<P ALIGN=”center”>
Фамилия <INPUT TYPE="text" NAME="soname" VALUE="">   Имя <INPUT TYPE ="text" NAME ="name" VALUE ="">  Отчество <INPUT TYPE ="text" NAME ="otcestvo" VALUE ="">
<BR><BR>разделитель строк
</P>
</FORM>конец контейнера формы
</BODY>
6. Сохраните изменения в файле anketa. htm и просмотрите страницу в Internet Explorer.
7. Добавить код, создающий группу переключателей для выбора одного варианта.
…
<BR><BR>
Образование: <INPUT TYPE ="radio" NAME ="study" VALUE ="hight checked"> Высшее    
<INPUT TYPE ="radio" NAME ="study" VALUE "middlehight"> Неоконченное высшее    
<INPUT TYPE ="radio" NAME ="study" VALUE ="middle"> Среднее    
<BR><BR>
</P>
</BODY>
</FORM>
</HTML>
8. Сохраните изменения в файле anketa. htm и просмотрите страницу в Internet Explorer.
9. Добавить код, создающий флажки для выбора нескольких вариантов. Флажки создаются в тэге <INPUT> со значением атрибута TYPE=”checkbox”.
…
<BR><BR>
Какие из сервисов Интернета вы используете наиболее часто?<BR><INPUT TYPE ="checkbox" NAME ="group" VALUE ="www">WWW     <INPUT TYPE ="checkbox" NAME ="group" VALUE ="e-mail">e-mail    
<INPUT TYPE ="checkbox" NAME ="group" VALUE ="ftp">FTP
<BR><BR>
</P>
</BODY>
</FORM>
</HTML>
10. Просмотреть страницу в браузере.
11. Добавить код, создающий раскрывающийся список для выбора одного варианта. Для реализации такого списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <OPTION>.
…
<BR><BR>
Какой из браузеров вы предпочитаете? <BR>
<SELECT NAME=”brousers”>
<OPTION SELECTED> Internet Explorer
<OPTION>Netscape Navigator
<OPTION>Opera
<OPTION>Neo Planet
</SELECT>
<BR><BR>
</P>
</BODY>
</FORM>
</HTML>
12. Просмотреть страницу в браузере.
13. Добавить код, создающий текстовую область для ввода комментариев. Такая область создается с помощью тэга <TEXTAREA>с обязательными атрибутами: NAME, задающим имя области, ROWS определяющим число строк, и COLS — число столбцов области.
…
<BR><BR>
Какую еще информацию вы хотели бы видеть на нашем сайте?
<BR>
<TEXTAREA NAME=”resume” ROWS=4 COLS=30>
</TEXTAREA>
<BR><BR>
</P>
</BODY>
</FORM>
</HTML>
14. Просмотреть страницу в браузере.
15. Добавить код, создающий кнопки «Отправить» и «Очистить».
…
<BR><BR>
<INPUT TYPE=”submit” VALUE=”Отправить”>
<INPUT TYPE=”reset” VALUE=”Очистить”>
</P>
</BODY>
</FORM>
</HTML>
16. Для того чтобы при щелчке по кнопке «Отправить» данные из формы передавались на сервер и там обрабатывались, необходимо указать, куда их отправить и какая программа будет их обрабатывать. Эти параметры задаются с помощью атрибута ACTION контейнера <FORM> , например:
<HTML>
<HEAD>
<FONT COLOR="blue">
<H1 ALIGN ="center">Анкета </H1>
</FONT>
<TITLE> Анкета </TITLE>
</HEAD>
<BODY >
<FORM ACTION=”http:/www. *****/cgi-bin/bd. exe”>
…
</BODY>
</FORM>
</HTML>
17. Сохранить изменения в файле anketa. htm и просмотреть в браузере Internet Explorer.
Задание 5. Создание титульной страницы сайта
Отформатируйте содержание титульной страницы сайта.
1. Открыть документ из папки comp документ index. htm.
2. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите меню Вид→Просмотр HTML-кода.
3. Введите имя Web-страницы Компьютер и имя заголовок страницы Все о компьютере. Изменения в файле выделены полужирным шрифтом:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=1 WIDTH=”100%” HEIGHT=100>
<TR>
<TD>
<FONT COLOR=”blue”>
<H1 ALIGN=”center”> Все о компьютере</H1>
</FONT>
</TD>
</TR>
</TABLE>
…
</BODY >
</HTML>
4. Сохраните изменения в файле index. htm и просмотрите страницу в Internet Explorer.
5. Поместите на титульную страницу текст, кратко описывающий содержание слайда и разбитый на абзацы (тэг <P>… </P>) с различным выравниванием. Текст поместите во вторую ячейку второй таблицы:
…
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD WIDTH="30%" HEIGHT=40 >
<A HREF="1.htm"> Ссылка 1 </A>
</TD>
<TD ROWSPAN=3>
<P ALIGN=”left”>На этом сайте вы сможете получить различную информацию о компьютере и его программном обеспечении.</P>
<P ALIGN=”right”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>
</TD>
</TR>
…
6. Сохраните изменения в файле index. htm и просмотрите страницу в Internet Explorer.
7. Создайте панель навигации по сайту, внеся необходимые изменения в ячейки второй таблицы
…
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD WIDTH="30%" HEIGHT=40 >
<A HREF="software. htm"> Программы </A>
</TD>
</TD>
<TD ROWSPAN=3>
<P ALIGN="left">На этом сайте вы сможете получить различную информацию о компьютере и его программном обеспечении.</P><P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>
</TD>
</TR>
<TR>
<TD HEIGHT=40 >
<A HREF=”glossary. htm”>Словарь</A>
</TD>
</TR>
<TR>
<TD HEIGHT=40 >
<A HREF=”anketa. htm”>Анкета </A>
</TD>
</TR>
</TABLE>
…
8. Внесите свой электронный адрес в последнюю таблицу, например:
…
<TABLE BORDER=1 WIDTH="100%"HEIGHT=100>
<TR>
<TD>
<H4 ALIGN="center"> <A HREF="Mailto: *****@***ru"> *****@***ru</A></H4>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
9. Сохраните изменения в файле index. htm и просмотрите страницу в Internet Explorer.
Задание 6. Вставка изображения
Вставьте изображение компьютера на титульную страницу сайта «Компьютер».
1. Найдите изображение компьютера в папке Рисунки каталога Web–сайты.
2. Скопируйте изображение в папку comp.
3. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG, и PNG. Если изображение сохранено в другом формате, преобразуйте его в одно из вышеуказанных форматов с помощью графического редактора, например PhotoEditor.
4. Сохраните графический файл под именем computer с соответствующим расширением в папке comp.
5. Вставьте изображение компьютера на главную страницу, используя следующие тэги и атрибуты:
· <IMG> — тэг, используемый для вставки изображений (обязательно указать расширение файла, соответствующее действительности);
· SRC — атрибут, указывающий место хранения изображения;
· ALT — атрибут, значением которого является текст, поясняющий, что увидит пользователь на рисунке после загрузки Web-страницы;
· ALIGN — выравнивание изображения относительно текста.
…
<TD ROWSPAN=3>
<IMG SRC=”computer. jpg” ALT=”Компьютер” ALIGN=”right”>
<P ALIGN="left">На этом сайте вы сможете получить различную информацию о компьютере и его программном обеспечении.</P><P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>
</TD>
6. Сохраните изменения в файле index. htm и просмотрите страницу в Internet Explorer.
Внимание! Размеры изображения изменять не на титульной странице файла, а в файле, хранящем само изображение с помощью графического редактора!
