Упражнения для самостоятельной подготовки «Язык разметки гипертекста html»

НЕФТЕЮГАНСКИЙ ИНДУСТРИАЛЬНЫЙ КОЛЛЕДЖ

(филиал) федерального государственного бюджетного образовательного учреждения высшего образования

«Югорский государственный университет»

УПРАЖНЕНИЯ ДЛЯ САМОСТОЯТЕЛЬНОЙ ПОДГОТОВКИ

ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML

для специальностей 1 курса

08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий»,

15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)»,

21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений»,

21.02.02 «Бурение нефтяных и газовых скважин»

Нефтеюганск

2019

Упражнения для самостоятельной подготовки разработаны на основании тем рабочей программы учебной дисциплины для студентов 1 курса по специальностям: 08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий», 15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)», 21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений», 21.02.02 «Бурение нефтяных и газовых скважин»

Организация-разработчик: Нефтеюганский индустриальный колледж (филиал) федерального государственного бюджетного образовательного учреждения высшего образования «Югорский государственный университет»

Разработчик: Игнатенко Екатерина Сергеевна - преподаватель НИК (филиал) ФГБОУ ВО «ЮГУ»

СОДЕРЖАНИЕ

Пояснительная записка

Упражнения для самостоятельной подготовки для студентов 1 курса специальностей 08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий», 15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)», 21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений», 21.02.02 «Бурение нефтяных и газовых скважин» включают в себя требования, рекомендации и упражнения по созданию визуально-грамотного веб-сайта с точки зрения дизайна и программирования.

Сайт (веб-сайт англ. website, от web — паутина, и site — «место») - это место во всемирной сети (интернете), которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц, которые мы видим, как одно целое.

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

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами.

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

Задачами раздела «Язык разметки гипертекста HTML» являются:

знание основных определений, тегов, и других основных элементов, способствующих созданию удобного в использовании веб-сайта;

умение правильно сформулировать свои творческие идеи и применять их на практике;

развитие самостоятельного творческого подхода к веб-дизайну

В результате изучения раздела «Язык разметки гипертекста HTML» обучающийся должен знать:

правила построения простейших веб-страниц, и объединение их в веб-сайт;

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

В результате изучения раздела «Язык разметки гипертекста HTML» обучающийся должен уметь:

выполнять расчеты с использованием прикладных компьютерных программ;

использовать технологии сбора, размещения, хранения, накопления, преобразования и передачи данных в профессионально ориентированных информационных системах;

обрабатывать и анализировать информацию с применением программных средств и вычислительной техники;

усовершенствовать собственно разработанный сайт, добавляя новые приемы форматирования, изученные в последующих разделах дисциплины «Интернет и веб-дизайн»;

осуществлять выбор средств и методов для решения поставленных профессиональных задач.

Порядок выполнения работы

записать название работы, ее цель в тетрадь;

выполнить основные задания в соответствии с ходом работы;

выполнить дополнительные задания (при наличии).

Критерии оценки работ

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

Этапы выполнения упражнений по HTML

В своей папке создать отдельную папку для файлов сайта.

Открыть программу Блокнот (Пуск – Все приложения – Стандартные Windows – Блокнот)

Написать в нем текст (код) программы

Сохранить код программы в своей папке (пример:p1z1.html и т.п.)

Перейти в эту папку содержащую код программы.

Документ должен иметь значок формата браузераInternetExplorer или в формат любого другого браузера.

Открыть этот документ. (Откроется программа-браузер с готовым видом вашей программы).

Если нужно внести изменения в документ, то выполнить:

Перейти в папку содержащую код программы

Правой кнопкой мыши щелкнуть по странице, в которой вы планируете что-то изменить (Открыть с помощью – Блокнот)

Внести необходимые изменения и сохранить файл. Проверить результат

Упражнение № 1. Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования

Цель: научить применять теги логического и физического форматирования при создании Веб-страниц.

На оценку 3 необходимо выполнить задания с 1 по 8

На оценку 4 необходимо выполнить задания с 1 по 12

На оценку 5 необходимо выполнить задания с 1 по 14

Задание № 1. Создание простейшего HTML-документа

<HTML>

<HEAD>

<TITLE>Moйпервый HTML-документ</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TOPMARGIN="30" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">

Это мой первый HTML-документ!

</BODY>

</HTML>

Задание № 2. Использование тега <ACRONYM>

<HTML>

<HEAD> <TITLE>Расшифровка аббревиатур с помощью тега ACRONYM </TITLE> </HEAD>

<BODY BGCOLOR="FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<ACRONYM TITLE=" HyperText Markup Language"> HTML </ACRONYM> один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Веб-сайтов.

</BODY>

</HTML>

Задание № 3. Выделение текста курсивом

<HTML>

<HEAD> <TITLE>Выделение текста курсивом </TITLE> </HEAD>

<BODY> Тег используется для <ЕМ> интонационного выделения определённого текстового фрагмента </ЕМ>. Браузерами отображается курсивом.

</BODY>

</HTML>

Задание № 4. Использование тегов <H1> <Н6>

<HTML>

<HEAD> <TITLE>Заголовки H1Н6 </TITLE> </HEAD>

<BODY>

<H1> Заголовок 1 </H1>

<H2> Заголовок 2 </H2>

<H3> Заголовок 3 </H3>

<H4> Заголовок 4 </H4>

<H5> Заголовок 5 </H5>

<H6> Заголовок 6 </H6>

</BODY>

</HTML>

Задание № 5. Использование тега <STRONG>

<HTML>

<HEAD> <TITLE>Выделениетекстажирным</TITLE> </HEAD>

<BODY>

Для выделения фрагментов текста, на которых <STRONG> необходимо акцентировать внимание пользователя</STRONG>, используется тег STRONG.

</BODY>

</HTML>

Задание № 6. Использование параметра FACE тега <FONT>

<HTML>

<HEAD> <TITLE> Использованиепараметра FACE</TITLE> </HEAD>

<BODY>

<H3>

<FONT FACE="Tahoma", "Arial", "Verdana">Этоттекстбудетпоказаншрифтомпоумолчанию.</FONT>

</H3>

</BODY>

</HTML>

Задание № 7. Использование всех параметров тега <FONT>

<HTML>

<HEAD> <TITLE> Использованиепараметра FONT </TITLE> </HEAD>

<BODY>

<FONT FACE="Tahoma", "Helvetica" COLOR="#OOOOOO" SIZE="2"> ЭтоттекстбудетпоказанОДНИМиз 3-хуказанныхшрифтов,чернымцветомиразмером "2"</FONT>

</BODY>

</HTML>

Задание № 8. Одновременное использование нескольких тегов физического форматирования

<HTML>

<HEAD> <TITLE> Одновременное использование нескольких тегов физического форматирования </TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<FONTFACE="Verdana", "Arial"COLOR="black"SIZE="3"> В этом тексте использовано <U> три различных тега </U> <B> физического форматирования. </B> </FONT>

</BODY>

</HTML>

Задание № 9. Использование различных типов выравнивания

<HTML>

<HEAD> <TITLE>Использование различных типов выравнивания </TITLE> </HEAD>

<BODY>

<Р>При создании HTML-документа для обозначения абзаца используется специальный тег <CODE>P</CODE>, который разделяет фрагменты текста вертикальным отступом. </Р>

<Р ALIGN="CENTER"> Такой тип выравнивания подходит для заголовков документов. </Р>

<Р ALIGN="RIGHT"> Двойной перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет двойной отступ как команду создания абзаца. </Р>

<Р ALIGN="JUSTIFY"> Значение JUSTIFY стало поддер­живаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с тестом. </Р>

</BODY>

</HTML>

Задание № 10. Использование тегов форматирования текста внутри тега <Р>

<HTML>

<HEAD> <TITLE>Использование тегов форматирования текста внутри тега P</TITLE>

</HEAD>

<BODY>

<РALIGN="JUSTIFY"> <FONTFACE="Verdana"SIZE="3"> При наборе текста в каком-нибудь текстовом редакторе (<TT>Microsoft Word </TТ>, <TT>WordPerfect</TT> и др.) для обозначения абзаца мы <STRONG>используем</STRON> клавишу <EM>&lt;Enter&gt;</EM>. Такое действие даёт программе команду обособить <U>один фрагмент текста от другого, задав <FONTCOLOR="red"> <BIG> "красную строку" </BIG> </FONT>

</FONT> </P>

</BODY>

</HTML>

Задание № 11. Создание отступов

<HTML>

<HEAD> <TITLE>Создание отступов</TITLE> </HEAD>

<BODY >

<Р ALIGN="JUSTIFY"> <FONT FACE="Verdana" SIZE="3">

&nbsp;&nbsp;&nbsp;&nbsp;Принаборетекставкакого-нибудьтекстовомредакторе (Microsoft Word, WordPerfect др.) для обозначения абзаца мы используем клавишу &lt;Enter&gt;

</FONT> </P>

<Р ALIGN="JUSTIFY"> <FONT FACE="Verdana" SIZE="3">

&nbsp;&nbsp;&nbsp; &nbsp; Taкoe действие дает программе команду обособить один фрагмент текста от другого, задав "красную строку".

</FONT> </P>

</BODY>

</HTML>

Задание № 12. Использование тега принудительного переноса строки <BR>

<HTML> <HEAD>

<TITLE> Использование тега принудительного переноса строки <BR></TITLE>

</HEAD> <BODY >

<Р> <FONT FACE="Arial" SIZE="4">

Белеет парус одинокий <BR>

В тумане моря голубом <BR>

Что ищет он в стране далёкой? <BR>

Что кинул он в краю родном?

</FONT> </P> </BODY> </HTML>

Задание №13. Повторите страницу по образцу

Задание №14. Повторите страницу по образцу

Упражнение№ 2. Создание HTML-списков

Цель: научить создавать списки посредством применения основных тегов.

На оценку 3 необходимо выполнить задания с 1 по 7

На оценку 4 необходимо выполнить задания с 1 по 8

На оценку 5 необходимо выполнить задания с 1 по 9

Задание № 1. Пример нумерованного списка

<HTML>

<HEAD> <TITLE>Пример нумерованного списка </TITLE> </HEAD>

<BODY>

<НЗ>Пример нумерованного списка</НЗ>

<HR ALIGN="CENTER" NOSHADE WIDTH="98%">

<OL>

<FONTFACE="Tahoma"> <B> Классификация прикладных программных средств</B> </FONT>

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

<LI> текстовые процессоры

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

</OL>

</BODY>

</HTML>

Задание № 2. Пример нумерованного списка с разрывом последовательности

<HTML>

<HEAD> <TITLE> Пример нумерованного списка с разрывом по­следовательности </TITLE>

</HEAD>

<BODY>

<НЗ>Пример нумерованного списка</НЗ>

<HR ALIGN="CENTER" NOSHADE WIDTH="98%">

<FONT FACE="Таhoma"> <В>Классификация прикладных программных средств:</В> </FONT>

<OL>

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

<LI> текстовые процессоры

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

<BR>…

<LIVALUE="8"> бухгалтерские системы

</OL>

</BODY>

</HTML>

Задание № 3. Примеры использования разных типов нумерованного списка

<HTML>

<HEAD> <TITLE>Примеры использования разных типов нумеро­ванного списка </TITLE>

</HEAD>

<BODY>

<OL TYPE="1">

<FONT SIZE="4"> <В>Арабскиецифры</В> <FONT>

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

<LI>текстовые процессоры

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

</OL>

<OL TYPE="I">

<FONT SIZE="4"> <В>Большие римские цифры</В> </FONT>

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

<LI>текстовые процессоры

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

</OL>

<OL TYPE="A">

<FONT SIZE="4"> <B> Прописные латинские буквы</В> </FONT>

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

<LI>текстовые процессоры

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

</OL>

</BODY>

</HTML>

Задание № 4. Пример маркированного списка

<HTML>

<HEAD> <TITLE>Пример маркированного списка</TITLE> </HEAD>

<BODY>

<НЗ>Пример маркированного списка</НЗ>

<HR ALIGN="CENTER" NOSHADE WIDTH="98%">

<FONTFАСЕ="Tahoma"> <В>Популярные редакторы век­торной графики:</В> </FONT>

<UL>

<LI>CorelDRAW

<LI>Adobe Illustrator

<LI>Macromedia FreeHand

</UI>

</BODY>

</HTML>

Задание № 5. Примеры различных типов маркированного списка

<HTML>

<HEAD> <TITLE>Примеры различных типов маркированного спи­ска </TITLE> </HEAD>

<BODY>

<UL>

<FONTSIZЕ="4"> <В>Редакторы векторной графики: </B> </FONT>

<LI>CorelDRAW

<LI>Adobe Illustrator

<LI>Macromedia FreeHand

</UL>

<UL TYPE="CIRCLE">

<FONTSIZЕ="4"> <В>Редакторы растровой графики: </B></FONT>

<LI>Adobe Photoshop

<LI>Ulead Photoimpact

<LI>Macromedia Fireworks

</UL>

<UL TYPE="SQUARE">

<FONTSIZE="4"> <В>Редакторы 3D-графики: </B> </FONT>

<LI>3D Studio MAX

<LI>Corel Bryce

<LI>Maya

</UL>

</BODY>

</HTML>

Задание № 6. Пример использования графических маркеров

<НТМL>

<HEAD> <TITLE>Пример использования графических маркеров </TITLE> </HEAD>

<BODY>

<UL>

<FONT SIZE="4"> <В>Редакторы компьютерной графики: </B> </FONT>

<IMG SRC="marker.gif">CorelDRAW<BR>

<IMG SRC="marker.gif">Adobe Illustrator <BR>

<IMG SRC="marker.gif">Macromedia FreeHand <BR>

<IMG SRC="marker.gif">Adobe Photoshop <BR>

<IMG SRC="marker.gif">Macromedia Fireworks <BR>

<IMG SRC="marker.gif">3D Studio MAX <BR>

<IMG SRC="marker.gif">Corel Bryce </UL>

</BODY>

</HTML>

Задание № 7. Пример использования вложенных списков

<HTML>

<HEAD> <TITLE>Пример использования вложенных списков </TITLE> </HEAD>

<BODY>

<ULTYPE="SQUARE">

<FONT SIZE="4"> <В>Редакторы компьютерной графики: </B> </FONT>

<LI>Векторные редакторы

<UL TYPE="DISC">

<LI>CorelDRAW

<OL> <LI>CorelDRAW

<LI>Corel PhotoPaint

<LI>Corel R.A.V.E. </OL>

</UL>

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

<UL TYPE="DISC">

<LI>Adobe Photoshop

<OL>

<LI>Adobe Photoshop

<LI>Adobe ImageReady

</OL>

</UL>

</UL> </BODY> </HTML>

Задание № 8. Списки определений

<HTML>

<HEAD> <TITLE>Пример использования списков определений </TITLE> </HEAD>

<BODY >

<DL>

<H3ALIGN="CENTER">РедакторыHTML-документов </H3>

<DT> <В>Визуальные Веб-редакторы (WYSIWYG-редакторы) </В>

<DD><SMALL>Редакторы, которые позволяют создавать HTML-документы без знания языка HTML. В том виде, как страница будет смотреться в рабочем окне программы, в ко­нечном итоге его и будет отображать браузер. </SMALL> <BR>

<DT> <В>НТМL-редакторы</В>

<DD> <SMALL> Программы, предназначенные для лю­дей, разбирающихся в конструкциях языка HTML и позво­ляющие нажатием конкретных кнопок вставлять в текущий документ определенные теги или целые конструкции. </SMALL> <BR>

<DT> <В>Текстовые редакторы</В>

<DD> <SMALL>Обычные редакторы для работы с тек­стом. В них также иногда присутствует подсветка синтаксиса и автоматизация некоторых функций. Основное отличие от HTML-редакторов заключается в отсутствии возможности вставки тегов и пр. </SMALL> <BR>

</DL>

</BODY>

</HTML>

Задание №9. Повторите страницу по образцу

Упражнение№ 3. Создание таблиц средствами html

Цель: научить создавать таблицы посредством применения основных тегов.

На оценку 3 необходимо выполнить задания с 1 по 6

На оценку 4 необходимо выполнить задания с 1 по 8

На оценку 5 необходимо выполнить задания с 1 по 9

Задание № 1. Пример простейшей таблицы

<HTML>

<HEAD> <TITLE>Примерпростейшейтаблицы</TITLE> </HEAD>

<BODY>

<TABLE BORDER>

<САРТION> Пример простейшей таблицы</САРТION>

<TR>

<ТН> Ячейка с заголовком</ТН>

<ТD> Ячейка с обычным текстом</ТD>

</TR>

</TABLE>

</BODY>

</HTML>

Задание № 2. Пример выравнивания таблицы по центру

<HTML>

<HEAD> <TITLE>Пример выравнивания таблицы по центру </TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue" LEFTMARGIN="40" RIGHTMARGIN="40" MARGINWIDTH="40">

<TABLE ALIGN="CENTER" BORDER="2" CELLSPACING="2" CELLPADDING="7">

<TR>

<ТН>Состав персонального компьютера</TН>

<TD>

<FONT FACE="Tahoma"> B состав персонального компью­тера входят следующие компоненты: </FONT>

<UL TYPE="DISC">

<LI>Системный блок

<LI>Монитор

<LI>Клавиатура

<LI>Мышь

</UL> </TD> </TR> </TABLE>

</BODY>

</HTML>

Задание № 3. Разные типы выравнивания ячеек таблицы

<HTML>

<HEAD> <TITLE>Разные типы выравнивания ячеек таблицы </TITLE> </HEAD>

<BODYLEFTMARGIN="40"RIGHTMARGIN="40" MARGINWIDTH="40">

<TABLE ALIGN="CENTER" BORDER="2" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" HEIGHT="200">

<TR ALIGN="CENTER">

<TD VALIGN="BOTTOM">Ячeйкa 1 </TD>

<ТD>Ячейка 2</TD>

<TD VALIGN="TOP">Ячeйкa 3</TD>

</TR>

<TR>

<TD ALIGN="RIGHT">Ячейка 4</TD>

<TD ALIGN="CENTER">Ячeйкa 5</TD>

<ТD>Ячейка 6</TD>

</TR>

<TABLE>

</BODY>

</HTML>

Задание № 4. Пример объединения ячеек с помощью COL­SPAN и ROWSPAN

<HTML>

<HEAD><TITLE>Пример объединения ячеек с помощью COLSPANиROWSPAN</TITLE>

</HEAD>

<BODY>

<TABLE ALIGN="CENTER" BORDER="2" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" HEIGHT="200">

<TR ALIGN="CENTER" BGCOLOR="#CECECE">

<TH COLSPAN="2">Ячейка 1</TH>

</TR>

<TR>

<TD ALIGN="CENTER" ROWSPAN="3">Ячейка2</TD>

<TD ALIGN="CENTER">Ячейка3</TD>

</TR>

<TR>

<TD ALIGN="CENTER">Ячeйкa 4</TD>

</TR>

<TR>

<TD ALIGN="CENTER">Ячeйкa 5</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Задание № 5. Группировка данных таблицы

<HTML>

<HEAD> <TITLE>Группировка данных таблицы</TITLE> </HEAD>

<BODY>

<TABLE ALIGN="CENTER" BORDER="2" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" HEIGHT="200">

<COLGROUP ALIGN="CENTER" SPAN="2">

<COLGROUP ALIGN="RIGHT" SPAN="2">

<TR>

<TD>Ячейка 1 </TD>

<TD>Ячейка 2</TD>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

<TR>

<TD>Ячейка 5</TD>

<TD>Ячейка 6</TD>

<TD>Ячейка 7</TD>

<TD>Ячейка 8</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Задание № 6. Нестандартные возможности прорисовки структуры таблицы

<HTML>

<HEAD> <TITLE>Нестандартные возможности прорисовки струк­туры таблицы</TITLE>

</HEAD>

<BODY>

<TABLE ALIGN="CENTER" BORDER="1" CELLSPACING="0" CELLPADDING="4" WIDTH="100%" FRAME="HSIDES" RULES="ROWS">

<CAPTION> <В>Таблица 1 </B> </CAPTION>

<TR>

<ТD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD>

</TR>

<TR>

<TD>Ячейка 5</TD> <TD>Ячейка 6</TD> <TD>Ячейка 7</TD> <TD>Ячейка 8</TD>

</TR>

</TABLE>

<TABLE ALIGN="CENTER" BORDER="1" CELLSPACING="0" CELLPADDING="4"

WIDTH="100%" FRAME="box" RULES="GROUPS">

<CAPTION> <В>Таблица 2</B></CAPTION>

<TR>

<TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD>

</TR>

<TR>

<ТD>Ячейка 5</TD> <ТD>Ячейка 6</TD> <TD>Ячейка 7</ТD> <TD>Ячейка 8</TD>

</TR>

</TABLE>

<TABLE ALIGN="CENTER" BORDER="1" CELLSPACING="0" CELLPADDING="4" WIDTH="100%" FRAME="ABOVE" RULES="ALL">

<CAPTION> <В>Таблица 3</B> </CAPTION>

<TR>

<TD>Ячейка 1 </TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD>

</TR>

<TR>

<TD>Ячейка 5</TD> <TD>Ячейка 6</TD> <TD>Ячейка 7</TD> <TD>Ячейка 8</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Задание №7 Повторите страницу по образцу

 Задание №8 Повторите страницу по образцу

 Задание №9 Повторите страницу по образцу

Упражнение№ 4. Создание гиперссылок. Встраивание изображений в html-документы

Цель: научить осуществлять связь между страницами HTML.

На оценку 3 необходимо выполнить задания с 1 по 4

На оценку 4 необходимо выполнить задания с 1 по 5

На оценку 5 необходимо выполнить задания с 1 по 7

Задание № 1. Простейшей гиперссылки

<HTML>

<HEAD> <TITLE>Пример простейшей гиперссылки</TITLE> </HEAD>

<BODY BGCOLOR="WFFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#FFOOOO" VLINK="blue">

<FONT COLOR="gray" SIZE="6"> Adobe Photoshop </FONT>

<HR COLOR="#003366" WIDTH="90%" ALIGN="left">

<P> <FONT FACE="Tahoma", "Verdana" SIZE="4"> Одним из наиболее популярных и распространенных графических редакторов считается программа для работы с растровой графикой Adobe Photoshop, разработанная корпо­рацией <AHREF="http://www.adobe.com"><B>Adobe Systems </В></А>. На сегодняшний день доступна версия программы 7.0 </FONT> </Р>

</BODY>

</HTML>

Задание № 2. Гиперссылки с использованием гра­фики в качестве указателя

<HTML>

<HEAD> <TITLE>Пример гиперссылки с использованием графики в качестве указателя</TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#FFOOOO" VLINK="blue">

<P ALIGN="CENTER">

<A HREF="http://www.adobe.com/">

<IMG SRC="http://www.adobe.com/images/adobe.gif" WIDTH="24" HEIGHT="31" ALT="Adobe Systems" BORDER="0"> </A>

</P>

</BODY>

</HTML>

Задание № 3. Гиперссылки с использованием в качестве указателя и текста, и графики

<HTML>

<HEAD> <TITLE>Пример гиперссылки с использованием в качест­ве указателя и текста, и графики </TITLE> </HEAD>

<BODY BGCOLOR="WFFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#FFOOOO” VLINK=''blue">

<FONT COLOR="gray" SIZE="6"> Adobe Photoshop </FONT>

<HR COLOR="#003366" WIDTH="90%" ALIGN="left">

<P>

<FONT FACE="Tahoma", "Verdana" SIZE="4"> Одним из наиболее популярных и распространенных графических редакторов считается программа для работы с растровой графикой Adobe Photoshop, разработанная кор­порацией

<А HREF="http://www.adobe.com/">

<IMG SRC="http://www.adobe.com/images/adobe.gif" WIDTH="24" HEIGHT="31" ALT="Adobe Systems" BORDER="0"> <B>Adobe Systems</B> </A>.

</FONT>

</P>

</BODY>

</HTML>

Задание № 4. Составление внутренних гиперссылок

<HTML>

<HEAD> <TITLE>Пример составления внутренних гиперссылок</TITLE> </HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#FFOOOO" VLINK="blue''>

<FONT COLOR="gray" SIZE="6">Tern HTML </FONT>

<HR CQLOR="#003366" WIDTH="90%" ALIGN="left">

<P> <A HREF="#font">FONT</A> </P>

<P> <A HREF="#span">SPAN</A> </P>

<P> <A HREF="#table">TABLE</A> </P>

<HR ALIGN="center" WIDTH="95%" NOSHADE>

<P ALIGN="JUSTIFY">

<A NAME="font"> </A>

FONT – один из основных тегов физического форматирования текста, отображающий свойства шрифтов.

</BODY>

</HTML>

Задание №5. Создайте главную страницу и шаблоны для следующих страниц по образцу

Создайте главную страницу. Сохраните страницу подименем «index».

Скопируйте полученный файл «index» и измените его название на «information».

Скопируйте полученный файл «index» и измените его название на «measure».

Скопируйте полученный файл «index» и измените его название на «architect».

Задание №6. Создайте страницы по образцу (измените ранее созданные шаблоны)

Откройте страницу «information» и заполните ее по образцу

Заголовок «Информатика» поменяйте на «Информация».

Меню сайта не меняйте, а в качестве основного текста вставьте:

Слово «Информация» было заимствовано в Петровскую эпоху из польского языка, а в нем оно произошло от латинского…

Informatio — представление о чем-либо.

В латинском это слово производно от…

Informare — изображать, представлять.

Общий корень у этих слов:

Form — Форма (трактуется, как вид, образ).

Результат:

Проделайте подобные действия с остальными страницами, которые будут на нашем сайте:

Страница «measure»:

Заголовок – «Измерение информации»

Основной текст:

1 бит – это количество информации, которое можно передать с помощью одного знака в двоичном коде («0» или «1»).

1 байт = 8 бит

1 Кбайт = 1024 байт

1 Мбайт = 1024 Кбайт

1 Гбайт = 1024 Мбайт

Страница «architect»:

Заголовок – «Открытая архитектура»

Основной текст:

Стандартизируются и публикуются принципы действия компьютера способы подключения новых устройств есть разъемы (слоты) для подключения устройств.

Компьютер собирается из отдельных частей, как конструктор.

Много сторонних производителей дополнительных устройств.

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

Задание №7 Создание гиперссылок

Свяжите все ранее созданные страницы между собой гиперссылками

Упражнение№ 5. Обработка графических объектов

Цель: научить встраивать в HTML-документы графические изображения.

На оценку 3 необходимо выполнить задания с 1 по 7

На оценку 4 необходимо выполнить задания с 1 по 8

На оценку 5 необходимо выполнить задания с 1 по 9

Задание № 1. Выравнивание изображений

<HTML>

<TITLE> Выравнивание изображений </TITLE>

<BODY> Выравнивание <IMCSRC=букет.gifALIGN=top> по верхнему краю

<Р> Выравнивание по <IMGSRC= букет.gifALIGN=BASELINE> базовой линии

</BODY>

</HTML>

Задание № 2. Выравнивание изображений

<HTML>

<TITLE>Выравнивание изображений</TITLE>

<BODY>

<IMG SRC=верблюд.png ALIGN=RIGHT>

<P ALIGN=JUSTIFY>

Верблюд – корабльпустыни.Это название закрепилось за ним с давних пор, когда караваны верблюдов ходили с грузами через пустыни в условиях безводья и недостатка пищи. Верблюды могут проходить через безводные прос­транства. На них навьючивают груз до 250 кг, с которым они могут делать переходы по 300 км в день со средней скоростью передвижения 10 км/час.

<IMG SRC=олень.png ALIGN=LEFT>

<Р ALIGN=JUSTIFY>

Кроме домашних северных оленей, разводимых чело­веком, в тундре сохранилось много диких северных оленей, которые ведут кочевой образ жизни в поисках ягеля. Се­верные олени хорошо приспособлены к жизни в суровых условиях. Широкие копыта позволяют оленям не провалиться в снегу, передвигаться по болотам и топям. Шерсть у се­верных оленей тоже особенная. Толстая сердцевина каждого волоса наполнена воздухом, а воздух хорошо сохраняет тепло тела. Поэтому мех даже во время сильного ветра надежно защищает оленя от холода.

</BODY>

</HTML>

Задание № 3. Различие параметров выравнивания

<HTML>

<TITLE>Различие параметров выравнивания</TITLE>

<BODY>

<IMG SRC=дом1.gif>

<IMG SRC=дом2.gif ALIGN=top width=160>

Выравнивание ALIGN=TOP

<p>

<IMG SRC=дом1.gif>

<IMG SRC=дом2.gif ALIGN=texttop WIDTH=160>

Выравнивание ALIGN=TEXTTOP

</BODY>

</HTML>

Задание № 4. Задание размеров изображений

<HTML>

<TITLE>Задание размеров изображений</TITLE>

<BODY>

<IMG SRC=букет.gif WIDTH=300>

<IMG SRC=букет.gif>

<IMG SRC=букет.gif WIDTH=75>

</BODY>

</HTML>

Задание № 5. Использование параметров HSPACE и VSPACE

<HTML>

<TITLE>Использование параметров HSPACE и VSPACE</TITLE>

<BODY>

<IMG SRC=лиса.gif ALIGN=left HSPACE=20 VSPACE=20>

Лисица – одна из популярных героинь детских сказок. Она стройна, изящна, у нее удлиненное туловище на невысоких ногах. Из всей ее общей длины примерно 40% приходится на пушистый хвост. Удивительно хорошо приспособилась она к самым разным уровням, но больше других любит открытые места с небольшим лесом, оврагами, холмами, избегает лишь глухой тайги и пустынь. Лисица очень проворна, обычная манера ее передвижения – неторопливая рысца Лисица – великолепный охотник: Помимо наблюдательности и сообразительности, у нее отличная зрительная память, хорошее обоняние и острый слух

</BODY>

</HTML>

Задание № 6. Использование параметров HSPACE и VSPACE

<HTML>

<TITLE>Помещение изображения в рамку</TITLE>

<BODY>

<IMG SRC=лиса.gif>

<IMG SRC=лиса.gif BORDER=1>

<IMG SRC=лиса.gif BORDER =5>

<IMG SRC=лиса.gif BORDER=10>

</BODY>

</HTML>

Задание № 7. Использование альтернативного текста

<HTML>

<TITLE>Использование альтернативного текста </TITLE>

<BODY>

<IMG SRC=лиса.gif ALT="листа">

</BODY>

</HTML>

Задание 8. Использование атрибутов Left,Right

Изображение «прижимается» к правому полю окна. Текст обтекает изображение с левой стороны.

Изображение «прижимается» к левому полю окна. Текст обтекает изображение с правой стороны.

Задание 9. Изображение используется как элемент строки.

Выравнивание изображений относительно текста.

Выравнивание по верхнему краю.

Выравнивание середины изображения по базовой линии.

Выравнивание нижней границы изображения по базовой линии текущей строки.

Упражнение№ 6. Создание Веб-страниц с фреймами и формами

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

На оценку 3 необходимо выполнить задания с 1 по 7

На оценку 4 необходимо выполнить задания с 1 по 8

На оценку 5 необходимо выполнить задания с 1 по 9

Задание № 1. Разветвлённая фреймовая структура

<HTML>

<HEAD>

<TITLE>Пример разветвленной фреймовой структуры </TITLE>

</HEAD>

<FRAMESET COLS="30%, 70%" FRAMEBORDER="1" FRAMESPACING="1" BORDER="1">

<FRAME NAME="left" SRC="left.html" SCROLLING="yes" MARGINWIDTH="10" MARGINHEIGHT="10">

<FRAMESET ROWS="*, 2*" FRAMEBORDER="1" FRAMESPACING="1" BORDER="1">

<FRAME NAME="top" SRC="top.html"> <FRAME NAME="bottom" SRC="bottom.html">

</FRAMESET>

</HTML>

Задание № 2. Файлверхнегофрейма "menu.html"

<HTML>

<BODY BGCOLOR="red" TEXT="black" LINK="blue" LINK="blue" VLINK="blue">

<H3> Ссылки верхнего фрейма</H3>

<HR>

<FONT FACE="Tahoma" SIZE="2">

<UL TYPE="square">

<LI> <A HREF="text.html" TARGET="left"> Файлстекстомвлевомнижнемфрейме</А>

<LI> <A HREF="text.html" TARGET="right"> Файл с текстом в правом нижнем фрейме</А>

<LI> <A HREF="text.html" TARGET="menu"> Файл с текстом в верхнем фрейме</А>

<LI> <A HREF="text.html" TARGET="top"> Файл с текстом в полном окне</А>

<LI> <A HREF="text.html" TARGET="blank:"> Файл с текстом в новом окне</А>

<LI> <A HREF="text.html" TARGET="self"> Файл с текстом в текущем фрейме</А>

</OL>

</FONT>

</BODY>

</HTML>

Задание № 3. Варианты использования элемента текстовой

<HEAD>

<ТIТLЕ> Варианты использования элемента текстовой строки</ТIТLЕ>

</HEAD>

BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<H3> Пожалуйста, сообщите свои данные:</НЗ>

<FORM NAME="mail" ACTION="/cgi-bin/mail.cgi" METHOD="post"> Вашеимя:<ВR>

<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" NAME="name"> <BR><BR>

Ваш E-mail:<BR>

<INPUT TYPE-text" SIZE="30" MAXLENGTH="35" NAME="email"> <BR><BR>

Вашсайт:<ВR>

<INPUTTYPE="text" SIZE="40" MAXLENGTH="60" NAME=="www" > <BR><BR>

Комментарий:<ВR>

<INPUT TYPE="text" SIZE="50" MAXLENGTH="100" NAME="comment" VALUE="Краткийкомментарий (неболее 100 символов)">

</FORM>

</BODY>

</HTML>

Задание № 4. Использование элемента опции выбора

<HTML>

<HEAD>

<TITLE>Использование элемента опции выбора </TITLE>

</HEAD>

<BODY>

<H3>Укажите свои увлечения:</НЗ>

<FORM NAME="select_hobby" METHOD="get">

<INPUTTYPE="checkbox" NAME="hobby" VALUE="computers" CHECKED>КомпьютерыиИнтернет <BR><BR>

<INPUTTYPE="checkbox NAME="hobby" VALUE="art">Литератураиискусство <BR> <BR>

<INPUTTYPE="checkbox NAME="hobby" VALUE="music">Музыкаитанцы <BR><BR>

<INPUTTYPE="checkbox NAME="hobby" VALUE="auto"> Автомобили <BR><BR>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="sport"> Cпopтиактивныйотдых </FORM>

</BODY>

</HTML>

Задание № 5. Использование элемента опции переключения

<HTML>

<HEAD>

<TITLE>Использование элемента опции переключения </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<НЗ>Укажите свою возрастную группу:</НЗ>

<FORM NAME="select_age" ACTION="/cgi-bin/age.cgi" METHOD="get">

<INPUT TYPE="radio" NAME="age" VALUE="baby" CHECKED>0-5 лет

<BR> <BR>

<INPUT TYPE="radio" NAME="age" VALUE="child">5-12лет <BR> <BR>

<INPUT TYPE="radio" NAME="age" VALUE="junior">12-20лег <BR> <BR>

<INPUT TYPE="radio" NAME="age" VALUE="adult">Oт 20 лет

</FORM>

</BODY>

</HTML>

Задание № 6. Использование кнопок отправления и сброса данных

<HTML>

<HEAD>

<TITLE>Использование кнопок отправления и сброса данных </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<FORM NAME="user_data" ACTION="/cgi-bin/anketa.cgi" METHOD="post">

<H2> Анкета пользователя:</Н2>

<P><B> Контактные данные:</В> </P>

<BR>

Вашеимя:<BR>

<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" NAME="name"> <BR>

Ваш E-mail:<BR>

<INPUT TYPE-text' SIZE="30" MAXLENGTH="35" NAME="email"> <BR>

Вашсайг <BR>

<INPUT TYPE="text" SIZE="40" MAXLENGTH="60" NAME="www">

<P> <B>Возраст:</В> </P>

<INPUT TYPE="radio" NAME="age" VALUE="baby" CHECKED>5-0 лет &nbsp; &nbsp;

<INPUTTYPE="radio" NAME="age" VALUE="child">5-12 лет &nbsp;&nbsp;&nbsp;&nbsp;

<INPUT="radio" NAME="age" VALUE="junior">12-20 лет &nbsp;&nbsp;

<INPUT TYPE="radio" NAME="age" VALUE="adult"> Oт 20 лет

<P><B> Увлечения: </B> </P>

<INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" CHECKED> КомпьютерыиИнтернет &nbsp;&nbsp;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="art">Литератураиискусство &nbsp;&nbsp;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="music">Музыкаитанцы &nbsp;&nbsp;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="auto">Автомобили &nbsp;&nbsp;

<INPUT TYPE="checkbox" NAME="hobby" VALUE="sport">Спортиактивныйотдых

<P ALIGN="center">

<INPUT TYPE="submit" VALUE="Отравитьданные">&nbsp;

<INPUT TYPE="reset" VALUE="Очиститьполяформы">

</FORM>

</BODY>

<HTML>

Задание № 7. Применениетега <TEXTAREA>

<HTML>

<HEAD>

<TITLE>Использование текстового поля</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<h3>Пожалуйста, сообщите свои данные:</НЗ>

<FORM NAME="mail" ACTION="cgi-bin/mail.cgi" METHOD="get"> Вашеимя:<br>

<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="name"> <BR> Ваш E-mail:<BR>

<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="email"> <BR> Комментарий:<br>

<TEXTAREA COLS="25" ROWS="5" NAME="comment">Baшкомментарий…</TEXTAREA>

<BR> <BR>

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

<INPUT TYPE="reset" VALUE="Очистить">

</FORM>

</BODY>

</HTML>

Задание № 8. Использование ниспадающего меню и списка наименований

<HTML> <HEAD>

<TITLE>Использование ниспадающего меню и списка наименований</TITLE> <HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<FORMNAME="anketa" ACTION="/cgi-bin/anke1a.cgi" METHOD="get">

<H2> B каком городе вы живете? </Н2>

<SELECT NAME="city" SIZE="5">

<OPTION VALUE="Moscow”>Москва

<OPTION VALUE="Sankt-peterburg”>Санкт-Петербург

<OPTION VALUE="Samara">Caмара

<OPTION VALUE="Ryazan">Рязань

<OPTION VALUE="Krasnoyarsk">Красноярск

<OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре

<OPTION VALUE="Vladivostok">Владивосток

</SELECT>

<h2>Вашапрофессия? </Н2>

<SELECT NAME="profession">

<OPTION VALUE="Teacher">учитель

<OPTION VALUE="Technik">слесарь

<OPTION VALUE="Designer">дизайнер

<OPTION VALUE="Driver" SELECTED>водитель

<OPTION VALUE="Fireman">пoжарный

<OPTION VALUE="Actor">актёр

</SELECT>

<BR><BR>

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

<INPUT' TYPE="reset" VALUE ="Очистить">

</FORM>

</BODY>

</HTML>

Задание № 9. Итоговый пример по организации пользовательских форм

<HTML> <HEAD>

<TITLE>Итоговый пример по организации пользовательских форм</TITLE>

<HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00DFF00" ALINK="#00FF00" VLINK="blue">

<H2 ALIGN="center"> ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА</H2>

<FORM NAME="user_anketa" ACTION="/сgi-bin/anketa.cgi" METHOD="posf ENCTYPE="multiparf/form-data">

<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="3" ALIGN="center" WIDTH="98%">

<TR>

<th BGCOLOR="#999999" WIDTH="50%">Личныеданные</ТН>

<TH BGCOLOR="#999999" WIDTH ="50%">Увлечения</TH>

</TR>

<TR>

<TD VALIGN="top" BGCOLOR="#EEEEEE" WIDTH="50%">

Вашеимя:<BR>

<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="name"> <BR>

Вашпароль:<br>

<INPUT TYPE="password" SIZE="30" MAXLENGTH="35" NAME="password">

<BR>

Вашафотография:<BR>

<INPUT TYPE="file" SIZE="18" NAME="photo">

</TD>

<TD VALIGN="top" BGCOLOR="#EEEEEE" WIDTH="50%">

<INPUT TYPE="checkbox" NAME="hobby" VALUE="computers"СНЕСКЕD>КомпьютерыиИнтернет

<BR> <INPUT TYPE="checkbox" NAME="hobby" VALUE="art">Литератураиискусство

<BR> <INPUT TYPE="checkbox" NAME="hobby" VALUE ="music">Музыкаитанцы

<BR> <INPUT TYPE="checkbox" NAME="hobby" VALUE ="auto">Автомобили

<BR> <INPUT TYPE="checkbox" NAME="hobby" VALUE="sport">Cпopтиактивныйотдых

</TD> </TR>

<TR>

<TH BGCOLOR="#999999" WIDTH="50%">Mecтoжительства</TН>

<TH BGCOLOR="#999999'' WIDTH="50%"> Комментарии</TН>

</TR>

<TR> <TD VALIGN="top" BGCOLOR="#EEEEEE"WIDTH="50%">

<SELECT NAME="city" SIZE="5">

<OPTION VALUE="Moscow”>Mocква

<OPTION VALUE="Spb”>Санкт-Петербург

<OPTION VALUE="Samara">Caмapa

<OPTION VALUE="Ryazan">Рязань

<OPTION VALUE="Krasnoyarsk">Красноярск

<OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре

<OPTION VALUE="Vladivostok">Владивосток

</SELECT>

<BR><BR>

<SELECT NAME="country">

<OPTION VALUE="Russia">Россия

<OPTION VALUE="England">Англия

<OPTION VALUE="USA">США

<OPTION VALUE="Germany">Германия

<OPTION VALUE="France"> Франция

</SELECT>

</TD>

<TD VALIGN="top" BGCOLOR="EEEEEE" WIDTH="50%">

<TEXTAREA COLS="25" ROWS="5" NAME="comments">

</TEXTAREA>

<BR> <INPUT TYPE="radio" NAME="site" VALUE="first" CHECKED> Явпервыенаэтомсайте

<BR> <INPUT TYPE="radio" NAME="site" VALUE="not first" Ятутневпервыйраз

</ТD> </TR> <TR>

<TD COLSPAN="2" ALIGN="center" BGCOLOR="#999900">

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

<INPUT TYPE="resef VALUE="Очистить">

</TD> </TR> . </TABLE> </FORM> </BODY> </HTML>

Упражнение №7. Работа со свойствами графических и анимационных объектов

Цель: изучить возможности работы с графическими элементами

На оценку 3 необходимо выполнить задания с 1 по 3

На оценку 4 необходимо выполнить задания с 1 по 4

На оценку 5 необходимо выполнить задания с 1 по 5

Задание №1. Исследование свойств изображений.

<html>

<head>

<title>Исследование свойств изображений. </title>

<script language="JavaScript">

function chipct(obj)

{

var w=obj.wd.value;

var h=obj.hg.value;

if(w!=0)document.mypict.width=w;

if(w!=0)document.mypict.height=h;

document.mypict.border=obj.br.value;

document.mypict.alt=obj.al.value;

}

</script>

</head>

<body bgcolor="F8F8FF">

<center>

<h3>Встраиваемыеизображения </h3>

<img src="/имя_файла" name=mypict>

<formname="form_name"

Для изменения параметров изображения введите значения одного или двух параметров и нажмите кнопку

<b>Просмотр</b><br>

Ширина(width):<input type="text" name="wd" size=8><br>

Высота(height):<input type="text" name="hg" size=8><br>

Для задания рамки введите число, определяющее толщину рамки в пикселах, и нажмите кнопку <b>Просмотр </b><br>

Толщинарамки(border):<input type="text" name="br" size=8 value=0><br>

Альтернативныйтекст(alt):<input type="text" name="al" size=40 value=0><br>

<input type="button" value="Просмотр" onClick="chipct(form_name)">

<input type="reset" value="Отменить">

</form>

</center>

</body>

</html>

Задание №2. Перестановкаизображений.

<html>

<head>

<title>Перестановкаизображений.</title>

<script language="JavaScript">

function chan(obj)

{

var r1=Number(obj.a1.value);

var r2=Number(obj.a2.value);

if((r1<1)||(r1>4)||(r2<1)||(r2>4))

alert("Неверно заданы номера рисунков!");

var z=document.images[r1-1].src;

document.images[r1-1].src=document.images[r2-1].src;

document.images[r2-1].src=z;

}

</script>

</head>

<body bgcolor="F8F8FF">

<center>

<h4>Галереярисунков </h4><br>

<img src="/имя_файла1" width="90" name="pic1">

<img src="/имя_файла2" width="90" name="pic2">

<img src="/имя_файла3" width="90" name="pic3">

<img src="/имя_файла4" width="90" name="pic4">

<form name="form_name">

Рисункисномерами <br>

<input type="text" name="a1" size=1>

<input type="text" name="a2" size=1>

<input type="button" value="Поменятьместами" size=1 onClick="chan(form_name)">

<input type="reset" value="Отменить">

</form>

</center>

</body>

</html>

Задание №3. Вертикальное графическое меню.

<html>

<head>

<title>Простое горизонтальное меню</title>

<script language="JavaScript">

function img(n, action)

{

if (action)

document.images[n-1].src="/wpch"+n+".gif"

else

document.images[n-1].src="/pch"+n+".gif"

}

</script>

</head>

<body bgcolor=yellow>

<h2><font color="#0000FF">Содержание</font></h2>

<a href="/ch1.html" onmouseover="img(1,1)" onmouseout="img(1,0)">

<img src="/pch1.gif" alt="форматированиетекста" border="0" width="103" height="35"></a><br>

<a href="/ch2.html" onmouseover="img(2,1)" onmouseout="img(2,0)">

<img src="/pch2.gif" alt="созданиесписков" border="0" width="103" height="35"></a><br>

<a href="/ch3.html" onmouseover="img(3,1)" onmouseout="img(3,0)">

<img src="/pch3.gif" alt="построениетаблиц" border="0" width="103" height="35"></a><br>

<a href="/ch4.html" onmouseover="img(4,1)" onmouseout="img(4,0)">

<img src="/pch4.gif" alt="использованиеграфиков" border="0" width="103" height="35"></a><br>

<a href="/ch5.html" onmouseover="img(5,1)" onmouseout="img(5,0)">

<img src="/pch5.gif" alt="использованиеграфиков" border="0" width="103" height="35"></a><br>

</body>

</html>

Задание №4. Анкета «Нагрузка преподавателя»

<html>

<head>

<title>Нагрузкапреподователя.</title>

<script language="JavaScript">

function graph(obj)

{

var k1=0;

var l=obj.lec.value

var p=obj.pract.value

var s=obj.stud.value

var tableHeight=150

var knTime=0 //consult

var eTame=0 //exam

var krTime=0 //kontr

var zTime=0 //zachet

d=document

if (s=="") alert("Укажите количество студентов")

if (l!="" && l!="0")

knTime=Math.round(l*10/100); eTime=Math.round(s*30/60)

if (p!="" && p!="0")

krTime=Math.round(s*15/60); zTime=Math.round(s*20/60)

sTime=knTime+eTime+zTime+krTime //vsego

k1=tableHeight/sTime

d.images[0].height=Math.round(krTime*k1)

d.images[0].alt=krTime+"часов"

d.images[1].height=Math.round(zTime*k1)

d.images[1].alt=zTime+"часов"

d.images[2].height=Math.round(knTime*k1)

d.images[2].alt=knTime+"часов"

d.images[3].height=Math.round(eTime*k1)

d.images[3].alt=eTime+"часов"

d.images[4].height=Math.round(sTime*k1)

d.images[4].alt=sTime+"часов"

}

function CheckValHours(hourse)

{

if (hourse<0) alert("Недопустимо")

}

function

CheckValNum(num)

{

if (num<0) alert("Недопустимо")

}

</script>

</head>

<body bgcolor="F8F8FF">

<center>

<h4>Нагрузка преподавателя</h4><br>

<form name="data">

<table bgcolor=#cccccc width=300 cellspacing=2 cellpadding=2 border=1>

<tr><td>Лекции</td><td><input type="text" name="lec" size=5 value="" onchange="CheckValHours(this.value)"></td></tr>

<tr><td>Практика</td><td><input type="text" name="pract" size=5 value="" onchange="CheckValHours(this.value)"></td></tr>

<tr><td>Числостудентов</td><td><input type="text" name="stud" size=5 value="" onchange="CheckValNum(this.value)"></td></tr>

<tr align=center><td colspan=2 bgcolor=#cccccc>

<input type="button" value="Вычислить" onclick=graph(data)> </td></tr>

</table>

</form>

<h4>Диаграмма</h4><br>

<table width=212 height=190 cellspacing=1 cellpadding=0 border=0>

<tr valign=bottom width=100 align=center>

<td bgcolor=#aaaaaa height=150>

<img src="/flake.gif" width=75 height=0 border=0 ></td>

<td bgcolor=#aaaaaa height=150>

<img src="/flake.gif" width=75 height=0 border=0 ></td>

<td bgcolor=#aaaaaa height=150>

<img src="/flake.gif" width=75 height=0 border=0 ></td>

<td bgcolor=#aaaaaa height=150>

<img src="/flake.gif" width=75 height=0 border=0 ></td>

<td bgcolor=#aaaaaa height=150>

<img src="/flake.gif" width=75 height=0 border=0 ></td>

</tr>

<tr valign=top width=100 align=center>

<td height=40><small>Контрольная</small></td>

<td height=40><small>Зачет</small></td>

<td height=40><small>Консультации</small></td>

<td height=40><small>Экзамен</small></td>

<td height=40><small>Всего</small></td>

</tr></table>

</body>

</html>

Задание №5. Прямые

<HTML>

<HEAD>

<TITLE>Прямыелинии</TITLE>

<script>

line(100,100,400,400,3)

line(100,400,400,100,10)

function line(x1,y1,x2,y2,n)

{ var xstr=""

var xstr0=

'<IMG SRC="Tochka.bmp" WIDTH='+n+' HEIGHT='+n+

' STYLE="position:absolute;'

var k=(y2-y1)/(x2-x1)

x=x1

while (x<=x2)

{ xstr+=xstr0+'top:'+(k*(x-x1)+y1)+';left:'+x+'">';

x++}

document.write(xstr)}

</script>

</HEAD>

<BODY>

</div>

<div style="font-size:20pt;padding-left:50">

<B>Рисование прямых линий</b></div>

<DIV id="dd" STYLE="position:absolute;top:250;left:100;

width:300;height:1;"><hr noshade></div>

<div ID="kv" STYLE="position:absolute;top:100;left:250;

width:1;HEIGHT:300;background-color:#ff0099"></div>

</BODY> </HTML>

Упражнение№ 8. Создание анимационных объектов и интерактивных форм

Цель: изучить методы создания сценариев для автоматического движения объектов по заданной траектории и для перетаскивания объектов мышкой.

На оценку 3 необходимо выполнить задания с 1 по 4

На оценку 4 необходимо выполнить задания с 1 по 5

На оценку 5 необходимо выполнить задания с 1 по 6

Задание № 1. Создать автоматическое движения картинки по заданной траектории

<HTML>

<HEAD><TITLE>Движение фотографии</TITLE>

</HEAD>

<BODY >

<BUTTON ID="B1" onclick=Start_stop()

STYLE="position:absolute; left:300;top:5">

Запустить</button>

<IMG ID="lv" src="/LV.jpg"

STYLE="position:absolute;top:0;left:20">

</BODY>

<SCRIPT>

dx=8;

dy=3

st=false //остановить процесс

function Start_stop()

{ if(st)

{window.clearInterval(proc) //остановиться

st=false //заменить надпись на кнопке с именем В1

document.all.B1.innerHTML="Запустить"

}

else //двигаться (запустить процесс с именемproc)

{ proc=window.setInterval("move()",100)

st=true

//заменить надпись на кнопке с именем В1

document.all.B1.innerHTML="Стоп"

}

}

functionmove()

{ //ордината верхнего края фотографии (переведено

//в тип INTEGER)

var y=parseInt(document.all.lv.style.top)

//абсцисса левого края фотографии

var x=parseInt(document.all.lv.style.left)

document.all.lv.style.top=y+dy //Перемещение по OY

document.all.lv.style.left=x+dx //Перемещение по OX

}

</script>

</HTML>

Задание №2. Написать сценарий перемещения красного квадрата, путем удержания его мышкой

<html>

<head><title>Перетаскивание</title></head>

<body onload= "init()">

<h2 align = "center" style="color:#ff00ff">

Перетаскивание квадрата мышкой</h2> <h3align="center">

Установите курсор внутри красного квадрата, нажмите левую кнопку

мышки и тащите квадрат.<BR>

Для освобождения квадрата от захвата отпустите кнопку мышки </h3>

<Palign=right> Примечание. Страница правильно

отображается в браузерах <i>Mozilla Firefox 2.0</i> и <i>Internet Explorer 6.0 </i> </p>

<DIV id= 'kv' style=

"position:absolute;left:10;top:10;width:50;height:50;background-color:red">

</div>

</body>

<SCRIPT>

flag=false; //Связывание событий с функциями

functioninit()

{ //Если мышка двигается то выполняется ф-ция dragIt

document.all.kv.onmousemove=dragIt

//Если кнопка мышки отпускается, то - ф-цияosvobodi

document.all.kv.onmouseup=osvobodi

document.all.kv.onmousedown=zachvat

}

function dragIt(evt)

{ Параметр evt создаётся самим браузером

sobytie=(evt) ? evt :(window.event) ?window.event : "";

if(flag)

{ document.all.kv.style.top=sobytie.clientY-25;

document.all.kv.style.left=sobytie.clientX-25; <

}

}

functionosvobodi()

{ flag=false;//устанавливается запрет на перетаскивание

}

functionzachvat()

{flag=true;//Перетаскивание разрешается

}

</SCRIPT>

</html>

Задание №3.Создать две анимации: бегущая (а точнее прыгающая) строка и скачущая лошадь

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Пример</title>

<style>

.one {

width:350px;

height:80px;

border-bottom: 8px double #000;

text-shadow: #000 0px 1px 1px;

color: #D9470B;

font-size: 45px;

font-weight: bolder;

margin-left:30px;

padding-left:25px;

}

</style>

</head>

<body>

<marquee class = "one" behavior ="alternate" direction=up scrollamount=12>

Попрыгунчики</marquee>

<marquee direction="right" scrollamount=15">

<img src="http://www.playcast.ru/uploads/2013/11/21/6622284.gif" /></marquee>

</body>

</html>

Задание №4. Создать простой слайдер

<html>

<head>

<title>Простойслайдер</title>

<style>

#wrapper, #test {

text-align: center;

}

</style>

<script>

//Запускает таймер

function go(){

window.timerId = window.setInterval(timer, 1000);

}

function timer(){

if(window.number == undefined || window.number == 3) {

window.number = 1;

} else window.number = window.number + 1;

var img = document.getElementById('img');

img.src = 'smiles/'+window.number+'.png'

}

</script>

</head>

<body onload="go()">

<div id="wrapper">

<img src="/smiles/1.png" id="img">

</div>

</body>

</html>

Задание №5. Создайте карусель из слайдеров

<!DOCTYPE html>

<html>

<head>

<title>Карусель </title>

<style>

input {

width: 200px;

}

#wrapper, #test {

text-align: center;

}

#test {

font-size: 24px;

}

</style>

<script>

//Запускаеттаймер

function go(){

window.timerId = window.setInterval(timer, 1000);

document.getElementById('go').disabled = true;

}

function timer(){

var img1 = document.getElementById('img1');

var img2 = document.getElementById('img2');

var img3 = document.getElementById('img3');

var tmp = img1.src;

img1.src = img2.src;

img2.src = img3.src;

img3.src = tmp;

}

</script>

</head>

<body>

<div id="wrapper">

<img src="/ smiles/1.png " id="img1">

<img src="/ smiles/2.png " id="img2">

<img src="/ smiles/3.png " id="img3">

<p>

<input type="submit" value=" Zanysk!" onclick="go()" id="go">

</p>

</div>

</body>

</html>

Задание №6. Создайте карусель из слайдеров с возможностью остановки

<html>

<head>

<title>Карусель</title>

<style>

#wrapper, #test {

text-align: center;

}

</style>

<script>

//Запускаеттаймер

function go(){

window.timerId = window.setInterval(timer, 1000);

document.getElementById('go').disabled = true;

}

//Запускаеттаймер

function go(){

window.timerId = window.setInterval(timer, 1000);

document.getElementById('go').disabled = true;

document.getElementById('stop').disabled = false;

}

//Останавливаеттаймер

function stop(){

window.clearInterval(window.timerId);

document.getElementById('go').disabled = false;

document.getElementById('stop').disabled = true;

}

function timer(){

var img1 = document.getElementById('img1');

var img2 = document.getElementById('img2');

var img3 = document.getElementById('img3');

var img4 = document.getElementById('img4');

var img5 = document.getElementById('img5');

var img6 = document.getElementById('img6');

var tmp = img1.src;

img1.src = img2.src;

img2.src = img3.src;

img3.src = img4.src;

img4.src = img5.src;

img5.src = img6.src;

img6.src = tmp;

}

</script> </head>

<body> <div id="wrapper">

<img src="/smiles/1.png" id="img1">

<img src="/smiles/2.png" id="img2">

<img src="/smiles/3.png" id="img3">

<img src="/smiles/4.png" id="img4">

<img src="/smiles/5.png" id="img5">

<img src="/smiles/6.png" id="img6">

<p>

<input type="submit" value="Zanysk!" onclick="go()" id="go">

<input type="submit" value="Stop!" onclick="stop()" id="stop" disabled>

</p>

</div>

</body>

</html>

Упражнение№ 9. Создание тестов

Цель: создание форм с возможностью обработки результатов.

На оценку 3 необходимо выполнить задания с 1 по 2

На оценку 4 необходимо выполнить задание с 1 по 2 (добавить 5 вопросов)

На оценку 5 необходимо выполнить задания с 1 по 3

Задание № 1. Создать опрос с выводом результата

<html>

<head>

<title>Тест</title>

<script language="JavaScript">

<!—

function see()

{

var k=0

for (var i=0;i<30;i++)

{

if(document.test.elements[i].checked)

{

k=k+Number(document.test.elements[i].value)

}

}

if(k<=5)document.test.rez.value="Вы никогда не пуститесь в рискованные авантюры с деньгами, даже если они сулят прибыль. Скорее Вы 'консервативный вкладчик', тихо хранящий свои сбережения. Попробуйте иногда рискнуть и выбрать форму активных действий с капиталом, скорее всего Вы от этого только выиграете. "

if(k>5&&k<=12)document.test.rez.value="Вы неплохо ориентируетесь на рынке капиталов. Но порой Вам не помешает немного охладиться и, обуздав любовь к риску, обратиться к более консервативным способам вложения капитала. В остальном все отлично."

if(k>12)document.test.rez.value="Природа подарила Вам отличный нюх на деньги! Но будьте осторожны и время от времени старайтесь остановиться и задать себе вопрос, не слишком ли Вас заносит? Даже самый способный человек не застрахован от ошибок. Если быть слишком самонадеянным, можно пропустить момент опасности."

}

//-->

</script>

</head>

<body >

<font color=broun>

<fontsize=4>

<i>

<h1><center> Умеете ли Вы обращаться с деньгами?</center> </h1>

<formname="test">

1.<u>Можно ли разбогатеть честным трудом? </u><br>

<input type="radio" name="a" value=2>Да<br>

<input type="radio" name="a" value=1>Не знаете<br>

<input type="radio" name="a" value=0>Нет<br><br>

2. <u>Регулярно ли Вы читаете материалы на экономические темы?</u><br>

<input type="radio" name="b" value=2>Да<br>

<input type="radio" name="b" value=1>Иногда<br>

<input type="radio" name="b" value=0>Нет <br><br>

3. <u>Готовы ли Вы пойти на крупный риск ради получения прибыли?</u><br>

<input type="radio" name="c" value=1>Да<br>

<input type="radio" name="c" value=2>Возможно<br>

<input type="radio" name="c" value=0>Нет<br><br>

4. <u>Согласны ли Вы с высказыванием "не в деньгах счастье"?</u><br>

<input type="radio" name="d" value=0>Да<br>

<input type="radio" name="d" value=0>Не знаете<br>

<input type="radio" name="d" value=2>Нет<br><br>

5. <u>Финансовым магнатом было ли выгодно объединение Германии? </u><br>

<input type="radio" name="e" value=1>Да<br>

<input type="radio" name="e" value=2>Не известно<br>

<input type="radio" name="e" value=0>Нет<br><br>

6. <u>Можно ли у Вас занять деньги после совместного распития спиртного?</u><br>

<input type="radio" name="f" value=0>Да<br>

<input type="radio" name="f" value=1>Вряд ли<br>

<input type="radio" name="f" value=0>Нет<br><br>

7. <u>Остаются ли у Вас деньги перед зарплатой?</u><br>

<input type="radio" name="g" value=2>Да<br>

<input type="radio" name="g" value=1>Редко<br>

<input type="radio" name="g" value=0>Нет<br><br>

8. <u>Можно ли разбогатеть перепродажей товара?</u><br>

<input type="radio" name="h" value=0>Да<br>

<input type="radio" name="h" value=1>Не знаете<br>

<input type="radio" name="h" value=2>Нет<br><br>

9.<u> Прилично ли давать часовые мелочью?</u><br>

<input type="radio" name="i" value=0>Да<br>

<input type="radio" name="i" value=1>Возможно<br>

<input type="radio" name="i" value=2>Нет<br><br>

10. <u>Портят ли деньги характер человека?</u><br>

<input type="radio" name="j" value=2>Да<br>

<input type="radio" name="j" value=1>Не всегда<br>

<input type="radio" name="j" value=0>Нет<br><br>

<input type="reset" value="Очистить">

<input type="button" value="Результат" OnClick="see(test)">

<textarea name="rez" cols=35 rows=7></textarea><br>

</form>

</font>

</body>

</html>

Задание 2. Создание простого теста с использованием форм для ввода результатов. Добавьте в тест еще 5 вопросов

<html>

<head><title>Тест из нескольких задач по математике</title>

<style>

p {

font-size:24px;

}

input {

font-size:24px;

}

</style>

</head>

<body style="background-color:#d9ffd6;">

<table border="1">

<tr>

<td colspan="2" align="center">

<p><b>Решите примеры</b></p>

</td>

</tr>

<tr>

</td>

<tr>

<td>

<p>Перевести число 175 из десятичной системы счисления в доичную = <input type="text" id="z_1"></p>

<p>Перевести число 10011110 из двоичной системы счисления в десятичную= <input type="text" id="z_2"></p>

<p>Перевести число 456 из десятичной системы счисления в шестнадцатеричную = <input type="text" id="z_3"></p>

<p>Перевести число 12AD из шестнадцатеричной системы счисления в десятичную = <input type="text" id="z_4"></p>

<p>Перевести число 235 из десятичной системы счисления в восьмеричную = <input type="text" id="z_5"></p>

</td>

<td>

<table border="1">

<tr>

<td colspan="3" align="center">Позиционные системы счисления</td>

</tr>

<tr>

<td align="center">Система счисления</td>

<td align="center">Основание</td>

<td align="center">Алфавитцифр</td>

</tr>

<tr>

<td>Десятичная</td>

<td>10</td>

<td>0, 1, 2, 3, 4, 5, 6, 7, 8, 9</td>

</tr>

<tr>

<td>Двоичная</td>

<td>2</td>

<td>0, 1</td>

</tr>

<tr>

<td>Восьмеричная</td>

<td>8</td>

<td>0, 1, 2, 3, 4, 5, 6, 7</td>

</tr>

<tr>

<td>Шестнадцатеричная</td>

<td>16</td>

<td>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А(10), В(11), С(12), D(13), Е(14), F(15)</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="3" align="center">

<button onClick="proverit();">Проверить</button>

</td>

</tr>

<div id="rezultat"></div>

<script>

function proverit(){

pr_otv_zadachi_1 = 10101111;

pr_otv_zadachi_2 = 158;

pr_otv_zadachi_3 = 1C8;

pr_otv_zadachi_4 = 4781;

pr_otv_zadachi_5 = 353;

otv_uch_1 = document.getElementById('z_1').value;

otv_uch_2 = document.getElementById('z_2').value;

otv_uch_3 = document.getElementById('z_3').value;

otv_uch_3 = document.getElementById('z_4').value;

otv_uch_3 = document.getElementById('z_5').value;

ball = 0;

if(otv_uch_1 == pr_otv_zadachi_1){

ball +=1;

}

if(otv_uch_2 == pr_otv_zadachi_2){

ball +=1;

}

if(otv_uch_3 == pr_otv_zadachi_3){

ball +=1;

}

if(otv_uch_4 == pr_otv_zadachi_4){

ball +=1;

}

if(otv_uch_5 == pr_otv_zadachi_5){

ball +=1;

}

vsego_zadach = 5;

procent_vip = ball/vsego_zadach * 100;

document.getElementById('rezultat').innerHTML = "Заданиявыполненывернона "+procent_vip+"%.";

}

</script>

</body>

</html>

Задание 3. Создание теста с использованием форм и таблиц

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Тест</title>

</head>

<body>

<h1> Тест по информатике </h1>

<!--списоквопросов -->

<form charset="windows-1251" name="Q" action="" method="post">

<tr>

<td>... - технологии накопления, обработки и передачи информации с использование определенных технических средств.</td>

<br> <input type="radio" name="rb1" value="0">Информационные процессы

<br> <input type="radio" name="rb1" value="1">Информационные технологии

<br> <input type="radio" name="rb1" value="0">Информационные ресурсы

<br> <input type="radio" name="rb1" value="0">Информатика

</td>

</tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>

<br>... - наука о методах и процессах сбора, хранения, обработки, передачи,

анализа и оценки информации с применением компьютерных технологий,

обеспечивающих возможность ее использования для принятия решений</td>

<br>Ответ: <td> <input type="text" name="rb2" size="30"></td></tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>... - это идеи человечества и указания по их реализации, накопленные в форме,

позволяющей воспроизводить их (книги, статьи, патенты, диссертации, научно-исследовательская

и опытно-конструкторская документация, технические переводы, данные о передовом производственном опыте и др). </td>

<br> <input type="radio" name="rb3" value="0">Информационные процессы

<br> <input type="radio" name="rb3" value="0">Информационные технологии

<br> <input type="radio" name="rb3" value="1">Информационные ресурсы

<br> <input type="radio" name="rb3" value="0">Информатика

</td>

</tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>... - это степень соответствия реальному объективному состоянию дела. </td>

<br> <input type="radio" name="rb4" value="0">Полнотаинформации

<br> <input type="radio" name="rb4" value="0">Достоверностьинформации

<br> <input type="radio" name="rb4" value="1">Адекватностьинформации

<br> <input type="radio" name="rb4" value="0">Актуальностьинформации

</td>

</tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>... - это степень соответствия информации текущему моменту времени. </td>

<br> <input type="radio" name="rb5" value="0">Полнотаинформации

<br> <input type="radio" name="rb5" value="0">Достоверностьинформации

<br> <input type="radio" name="rb5" value="0">Адекватностьинформации

<br> <input type="radio" name="rb5" value="1">Актуальностьинформации

</td>

</tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>

<br>... - свойство, определяющее способ представления информации на носителе (в сигнале)</td>

<br>Ответ: <td> <input type="text" name="rb6" size="30"></td></tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

<tr>

<td>

<br>... - свойство, определяющее смысл информации как соответствие сигнала реальному миру</td>

<br>Ответ: <td> <input type="text" name="rb7" size="30"></td></tr>

<tr>

<td colspan="2"><hr width="100%" size="1"></td></tr>

</table>

</form>

<!--невидимыеформы -->

<form charset="windows-1251" name="L">

<input type="hidden" name="l1" value="0">

<input type="hidden" name="l2" value="2">

<input type="hidden" name="l3" value="4">

<input type="hidden" name="l4" value="6">

</form>

<form charset="windows-1251" name="H" action="" method="post">

<input type="hidden" name="h1" value="4">

<input type="hidden" name="h2" value="5">

<input type="hidden" name="h3" value="6">

<input type="hidden" name="h4" value="7">

</form>

<form charset="windows-1251" name="D" action="" method="post">

<input type="hidden" name="tDtxt1" value="Вашаоценка 2">

<input type="hidden" name="tDtxt2" value="Вашаоценка 3">

<input type="hidden" name="tDtxt3" value="Вашаоценка 4">

<input type="hidden" name="tDtxt4" value="Вашаоценка 5">

</form>

<!-- /невидимые формы -->

<!-- скрипт расчета результатов тестирования -->

<script>

<!--

function makeDiagnosis() {

tQcnt = 7;

tDcnt = 4;

summa = 0;

for( j=0; j<document.Q.rb1.length; j++ ) { if( document.Q.rb1[j].checked ) { summa += eval(document.Q.rb1[j].value); } }

if(document.Q.rb2.value=="информатика"){summa++;}

for( j=0; j<document.Q.rb3.length; j++ ) { if( document.Q.rb3[j].checked ) { summa += eval(document.Q.rb3[j].value); } }

for( j=0; j<document.Q.rb4.length; j++ ) { if( document.Q.rb4[j].checked ) { summa += eval(document.Q.rb4[j].value); } }

for( j=0; j<document.Q.rb5.length; j++ ) { if( document.Q.rb5[j].checked ) { summa += eval(document.Q.rb5[j].value); } }

if(document.Q.rb6.value=="синтаксис"){summa++;}

if(document.Q.rb7.value=="семантика"){summa++;}

dx = -1;

for( i=0; i<tDcnt; i++ ) {

if(summa >= eval(document.L.elements[i].value) && summa <= eval(document.H.elements[i].value)) { dx = i; break; }

}

document.C.tDiagnosis.value = "Вынабрали "+summa+" балловиз "+tQcnt+" возможных "+document.D.elements[dx].value;

}

// -->

</script>

<!-- /скрипт расчета результатов тестирования -->

<!-- форма вывода результатов тестирования -->

<form charset="windows-1251" name="C">

<center>

<input type="button" name="pbSubmit" value="Результаты" onclick="makeDiagnosis()">

<input type="reset" value="Сбросить" name="res">

<br><br>

<textarea name="tDiagnosis" rows="6" cols="80" wrap="">

</textarea>

<hr width="100%" size="1">

</center>

</form>

</body>

</html>

Список литературы

Основные источники:

Синаторов, С.В. Информационные технологии [Электронный ресурс]: учебное пособие / С.В. Синаторов.- Москва: ФЛИНТА, 2016.- 448с. https://e.lanbook.com/reader/book/83798/#2

Дополнительные источники:

Плотникова, Н.Г. Информатика и информационно-коммуникационные технологии (ИКТ) [Электронный ресурс]: учеб. пособие. — М.: РИОР: ИНФРА-М, 2017. — 124 с., http://znanium.com/bookread2.php?book=760298

Интернет-ресурсы:

www.klyaksa.net (Информационно-образовательный портал)

https://www.microsoft.com/ru-ru (Официальный сайт Microsoft)

http://htmlbook.ru/webserver (Стать по html)

https://htmlacademy.ru/ (Интерактивные онлайн – курсы)

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/364100-uprazhnenija-dlja-samostojatelnoj-podgotovki-