Гиперссылки
Формат тэга, создающего ссылку на другой документ (HTML-документ или файл с изображением, звуком, видео):
<A HREF= имя файла. расширение >активный текст или изображение</A>
Если файл находится в другой папке, то нужно указывать путь к нему.
Например:
<A HREF= "web/sprav.pps"> активный текст или изображение</A>
Если создается ссылка на ресурс Интернета, то нужно указать его URL:
<A HREF= URL -адрес >активный текст или изображение</A>
Например:
<A HREF = http:// upm.ipschool.spb.ru>активный текст или изображение</A>
Можно организовать сообщение по электронной почте:
<A HREF= mailto:адрес электронной почты >активный текст или изображение</A>
Например:
<A HREF=mailto:solf55@mail.ru >активный текст или изображение</A>
Атрибуты тэга <BODY> для задания цвета ссылок
LINK= цвет или код цвета
Задает цвет ссылки
ALINK= цвет или код цвета
Задает цвет выбранной ссылки
VLINK= цвет или код цвета
Задает цвет просмотренной ссылки
Ссылки на метки
Можно организовать ссылку на другую часть этого же документа, если предварительно расставить в начале таких частей метки.
<A HREF= #имя метки >активный текст или изображение </A>
Создает ссылку на метку в текущем HTML-документе
<A NAME= имя метки >начало текстового фрагмента </A>
Можно также создать ссылку на метку в другом документе, если в нем имеется метка:
<A HREF= имя файла#имя метки >активный текст или изображение </A>
Создание и использование графических объектов для гиперссылок в ЭУ.
Кнопка с помощью HTML тега form
Этот вариант также является одним из методов создания кнопки в виде ссылки. Элементарный пример кнопки созданной с помощью тега form и input:
<form>
<input type="button" value="Просто кнопка" onclick="javascript:window.location='URL1'"/>
<input type="button" value="Ещё одна кнопка" onclick="javascript:window.location='URL2'"/>
</form>
Вот как это примерно будет выглядеть на странице:
Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход.
Кнопка в виде изображения
Простой подход к созданию кнопки в виде ссылки на сайте.
Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg. Тогда, для создания ссылки код должен быть следующим:
<a href="адрес страницы"><img src="button.jpg"></a>
Сделать красивую кнопкусейчас можно различными способами и множеством сторонних программ. Распространённый и часто используемый способ — это создать кнопку в Photoshop или Gimp. Но самый простой способ создания кнопки для HTML бесплатный сервис—dabuttonfactory.com. Там можно выбрать разные дизайны кнопок и сделать на них нужные надписи. Удобно то, что в процессе создания кнопки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.
Формат готового варианта тоже выбирается. Вам нужна картинка Image(jpeg).
Создание теста на html
Шаблон интерактивного теста в виде Интернет страницы.
Шаблон содержит 6 вопросов к каждому из которых предлагается 4 варианта ответов.
Подготовительный этап
1. Создайте шаблон(написан ниже) в блокноте и сохраните. 2. Подготовьте тест который будете превращать в электронный, например в MS Word. 3. Создайте в папку и назовите ее итоговый тест. 4. Скопируйте в эту папку шаблон теста и при необходимости рисунки к тесту. (формулы в MS Word являются рисунками). 5. Имена рисунков лучше задавать латинскими буквами и короткими именами например ris2-1.gif 6. Проверьте работоспособность шаблона, запустив его в браузере. На все вопросы поставьте первый ответ. Вы получите оценку отлично.
Получаем тест из шести вопросов без рисунков.
1. Откройте текст кода в программе Блокнот. 3. Измените текст этого кода (непосредственно Блокноте) в соответствии с образцом приведенном ниже. В образце, выделенный зеленым цветом текст показывает где именно необходимо изменять, (смысл надписей говорит сам за себя) 4. Найдите выделенный зеленым цветом текст «111111» он идет после команды var res=, и поставьте последовательность правильных ответов. 5. Коричневым цветом выделены комментарии к коду, они не влияют на работу и не отображаются на экране. 6. Сохраните в блокноте файл под новым именем. 7. Проверьте на работоспособность ваш тест.
Шаблон:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0038)http://www.junior.ru/wwwexam/t_gig.htm --><HTML><HEAD><TITLE>Текст в заголовке браузера</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <META content="Автор" name=Author> <SCRIPT language=JavaScript> <!-- hide var scrtxt = "Бегущая строка" ; var length = scrtxt.length; var width = 100; var pos = -(width + 2);
function scroll() { pos++; var scroller = ""; if (pos == length) { pos = -(width + 2); } if (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller+" ";} scroller = scroller + scrtxt.substring(0, width - i + 1);
} else { scroller = scroller + scrtxt.substring(pos, width + pos); }
window.status = scroller; setTimeout("scroll()", 100); } // --> </SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD> <BODY bgColor=white onload=scroll()> <SCRIPT language=JavaScript><!--Начало сценария var res="111111" function check_me() <!--вместо "111111" нужно вставить последовательность правильных ответов { var count=0 with(document.test) {if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked) {count+=1}; if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked) {count+=1}; if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked) {count+=1}; if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked) {count+=1}; if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked) {count+=1}; if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked){count+=1};<!--скопируйте эту строку и вставьте ниже необходимое количество раз в зависимости от количества вопросов, изменив Q6 на Q7, Q8 и т.д., если добавляете количество вопросов
{count+=1}; if (count>0) <!-- Вычисление и проверка все ли задания выполнены --> {alert("Вы выполнили не все задания. Проверьте себя.") } else answer() } } function control(k,f1,f2,f3,f4,f5,f6) <!-- добавьте переменные f7, f8,... в зависимости от количества вопросов { if (k==1&&f1.checked) return true; if (k==2&&f2.checked) return true; if (k==3&&f3.checked) return true; if (k==4&&f4.checked) return true; if (k==5&&f5.checked) return true; if (k==6&&f6.checked) return true; <!--скопируйте эту строку и вставьте ниже необходимое количество раз( в зависимости от количества вопросов), изменив 6 на 7, 8 и т.д если добавляете количество вопросов
return false; } function answer() { answ=""; with(document) { answ+=control(res.charAt(0),test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3])?"1":"0" answ+=control(res.charAt(1),test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3])?"1":"0" answ+=control(res.charAt(2),test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3])?"1":"0" answ+=control(res.charAt(3),test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3])?"1":"0" answ+=control(res.charAt(4),test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3])?"1":"0" answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0" <!--скопируйте эту строку и вставьте ниже необходимое количество раз( в зависимости от количества вопросов), изменив 5 на 6, 7 и т.д если добавляете количество вопросов. <!--Анализ результатов --> showResult(); } } function showResult() { var nok=0; var i,s; for (i=0;i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;} if(nok<3) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"'; if(nok==3) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok>3 && nok<4) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok==4) s='"ХОРОШО"'; if(nok>4 && nok<6) s='"ХОРОШО"'; if(nok==6) s='"ОТЛИЧНО"'; document.test.s1. value="Количество правильных ответов "+nok+". Ваша оценка "+s+". Загляните в окно рядом с номером задания. Если ответ правильный, то там (+). Если Вы ошиблись, там (-).";
with(document.test) { if (answ.charAt(0)=="1") {T1.value=" +"} else {T1.value=" -"}; if (answ.charAt(1)=="1") {T2.value=" +"} else {T2.value=" -"}; if (answ.charAt(2)=="1") {T3.value=" +"} else {T3.value=" -"}; if (answ.charAt(3)=="1") {T4.value=" +"} else {T4.value=" -"}; if (answ.charAt(4)=="1") {T5.value=" +"} else {T5.value=" -"}; if (answ.charAt(5)=="1") {T6.value=" +"} else {T6.value=" -"};!--скопируйте эту строку и вставьте ниже необходимое количество раз( в зависимости от количества вопросов), изменив 5 на 6, 7 и т.д если добавляете количество вопросов. } } </SCRIPT>
<FORM name=test> <CENTER><FONT face=Arial,Helvetica,sans-serif color=#000099> <H3>Название теста </H3></CENTER> <OL> <LI> <H4><INPUT size=1 name=T1> Вопрос 1 </H4> <INPUT type=radio name=Q1> ответ 1.1 <BR> <INPUT type=radio name=Q1> ответ 2.1 <BR> <INPUT type=radio name=Q1> ответ 3.1 <BR> <INPUT type=radio name=Q1> ответ 4.1 <BR><BR>
<LI> <H4><INPUT size=1 name=T2> Вопрос 2 </H4> <INPUT type=radio name=Q2> ответ 1.2 <BR> <INPUT type=radio name=Q2> ответ 2.2 <BR> <INPUT type=radio name=Q2> ответ 3.3 <BR> <INPUT type=radio name=Q2> ответ 4.4 <BR><BR>
<LI> <H4><INPUT size=1 name=T3> Вопрос 3 </H4> <INPUT type=radio name=Q3> ответ 1.3 <BR> <INPUT type=radio name=Q3> ответ 2.3 <BR> <INPUT type=radio name=Q3> ответ 3.3 <BR> <INPUT type=radio name=Q3> ответ 4.3 <BR><BR>
<LI> <H4><INPUT size=1 name=T4> Вопрос 4 </H4> <INPUT type=radio name=Q4> ответ 1.4 <BR> <INPUT type=radio name=Q4> ответ 2.4 <BR> <INPUT type=radio name=Q4> ответ 3.4 <BR> <INPUT type=radio name=Q4> ответ 4.4 <BR><BR>
<LI> <H4><INPUT size=1 name=T5> Вопрос 5 </H4> <INPUT type=radio name=Q5> ответ 1.5 <BR> <INPUT type=radio name=Q5> ответ 2.5 <BR> <INPUT type=radio name=Q5> ответ 3.5 <BR> <INPUT type=radio name=Q5> ответ 4.5 <BR><BR>
<LI> <H4><INPUT size=1 name=T6> Вопрос 6 </H4> <INPUT type=radio name=Q6> ответ 1.6 <BR> <INPUT type=radio name=Q6> ответ 2.6 <BR> <INPUT type=radio name=Q6> ответ 3.6 <BR> <INPUT type=radio name=Q6> ответ 4.6 <BR>
</LI></OL><BR> <CENTER> <P><TEXTAREA name=s1 rows=4 cols=70> </TEXTAREA> </P><INPUT onclick=check_me() type=button value="Показать результат"> <INPUT type=reset value="Сбросить ответы"> </CENTER><BR><BR></FORM> <P> <H5> © автор., год</H5> <P></P></FONT></BODY></HTML>
Окончание шаблона.
III Изменение количества вопросов 1. После того, что вы добились работоспособности вашего теста, снова откройте код страницы с тестом. 2. Скопируйте весь блок от вопроса 6: <LI> <H4><INPUT size=1 name=T6> Вопрос 6 </H4> <INPUT type=radio name=Q6> ответ 1.6 <BR> <INPUT type=radio name=Q6> ответ 2.6 <BR> <INPUT type=radio name=Q6> ответ 3.6 <BR> <INPUT type=radio name=Q6> ответ 4.6 <BR> И вставьте его ниже, изменив соответственно T6 на T7, Q6 на Q7 подставив соответствующие вопросы и варианты ответов. Добавьте в конце исходного блока 6, еще один тег <BR> так чтобы у вас получилось: ….INPUT type=radio name=Q6> ответ 4.6 <BR><BR> 3. Проделайте пункт 2 необходимое количество раз. 4. Теперь мы будем изменять саму программу, для того чтобы обработка результатов велась и для добавленных вопросов. Для этого необходимо добавить строки программы и дописать некоторые величины. Строки для изменения выделены в образце красным цветом, комментарии, что нужно делать коричневым. 5. В новых строках необходимо изменить индексы переменных на 1 больше, например кansw+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0"добавилась строкаansw+=control(res.charAt(6),test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3])?"1":"0"в остальных местах аналогично. 6. В команде function control(k,f1,f2,f3,f4,f5,f6) необходимо добавить переменные f7, f8…в зависимости от количества вопросов. Например: function control(k,f1,f2,f3,f4,f5,f6,f8,f9,f10) 7. Теперь изменим анализ результатов. Под переменной nok понимается количество правильных ответов (баллов). Перевод баллов в оценки осуществляется в этом фрагменте программы: if(nok<3) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"'; if(nok==3) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok>3 && nok<4) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok==4) s='"ХОРОШО"'; if(nok>4 && nok<6) s='"ХОРОШО"'; if(nok==6) s='"ОТЛИЧНО"'; Для изменения необходимо проставить соответствующие границы для оценки. Например для 10 вопросов с границами: 4 и меньше «2» ; 5-7 «3»; 8-9 «4»; 10 «5» фрагмент примет вид if(nok<4) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"'; if(nok==4) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok>4 && nok<8) s='"УДОВЛЕТВОРИТЕЛЬНО"'; if(nok==8) s='"ХОРОШО"'; if(nok>8 && nok<10) s='"ХОРОШО"'; if(nok==10) s='"ОТЛИЧНО"';
IV Вставка рисунков. Для вставки рисунков на Интернет страницы служит команда (Тег) <IMG src="имя файла.расширение"/>. Для вставки рисунка вам достаточно вставить этот тег в код страницы и указать имя файла с расширением. Необходимо знать, что рисунок должен быть в той же папке, что и сама страница. Например рисунок к заданию 6 находится в той же папке, что и сама страница, и имеет имя ris1.gif Вставить его нужно после вопроса, но до вариантов ответа. Тогда соответствующий фрагмент будет выглядеть: <LI> <H4><INPUT size=1 name=T6> Вопрос 6 </H4> <IMG src=" ris1.gif "/><BR> <INPUT type=radio name=Q6> ответ 1.6 <BR> <INPUT type=radio name=Q6> ответ 2.6 <BR>…..
Примерные темы для создания электронных учебников:
Модели и моделирование
Представление числовой информации с помощью систем счисления
Кодирование и обработка текстовой информации.
Кодирование и обработка графической информации
Кодирование и обработка звуковой информации
Электронные таблицы
Базы данных. Системы управления базами данных (СУБД)
Средства мультимедиа. Программа MS Power Point
Локальные компьютерные сети
Архитектура персонального компьютера
Операционные системы
DOS Navigator, Windows Commander и другие программные оболочки
Компьютерные вирусы и защита от них
Алгоритмизация и программирование
Основы логики. Логические основы компьютера
Язык программирования