Лабораторные работы
Таблицы каскадных стилей.
Стиль - это набор правил оформления и форматирования, который можно применить к различным элементам веб-документа.
Таблицы каскадных стилей - это прежде наборы параметров, изменяющих свойства тегов HTML.
Пример1. Подключение внешней таблицы стилей.
Формат/Создать стиль
Значение выбора: Р
Определить в новой таблице стилей
Категория шрифт: задать font-family, font-size, color .
Получим такой код программы для таблицы каскадных стилей.
p {font-family:"Arial Black";font-size: xx-large;font-weight: 200;color: #00FF00;}
Затем зайти Файл/Сохранить как… mystyle.css
Формат/Стили CSS/Присоединить таблицу стилей
Код основной программы:
<HTML>
<HEAD>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "mystyle.css">
</HEAD >
<BODY>
<P> этот текст оформлен в соответствии с таблицей стилей, которая содержится в файле mystyle.css </P>
</BODY>
</HTML>
Пример2. Внутренняя таблица стилей.
Формат/Создать стиль
Значение выбора: h1
Определить в текущей странице
Категория шрифт: задать font-family, font-size, color .
Значение выбора: h2
Определить в текущей странице
Категория шрифт: задать font-family, font-size, color .
Код основной программы:
<HTML>
<HEAD>
<STYLE>
h1 {font-family: Arial;font-size: large;font-weight: 200; font-style: oblique;
font-variant: small-caps; color: #FF0000;}
h2 {font-family: "Lucida Calligraphy"; font-size: small; color: #00FF00;}
</STYLE>
</HEAD>
<BODY>
<h1> Для заголовка первого уровня определен цвет текста - красный </h1>
<h2> Для заголовка второго уровня определен цвет текста - зеленый </h2>
<p> Для этого абзаца стиль не применен, для оформления текста использованы атрибуты по умолчанию.</p>
</BODY>
</HTML>
Создание формы.
Создать форму, используя компоненты редактора SharePoint Designer.
Код программы:
<HTML>
<BODY>
<H4>Заполни форму для сдачи экзаменов</H4>
<FORM METHOD="post" ACTION="mailto:bnv@mail.zp.ua" ENCTYPE="text/plain">
Фамилия: <INPUT TYPE="text" NAME="family" size=25
TITLE="Введи фамилию"><BR><BR>
Выбери район проживания: <BR>
<SELECT>
<OPTION NAME="len">Ленинский
<OPTION NAME="hor">Хортицкий
<OPTION NAME="zav">Заводский
</SELECT>
<BR><BR>
На каком языке сдавать экзамен: <br>
<INPUT TYPE="radio" NAME="lang" VALUE="украинский">Украинский <BR>
<INPUT TYPE="radio" NAME="lang" VALUE="русский">Русский <br>
<INPUT TYPE="radio" NAME="lang" VALUE="английский">Английский <BR><BR>
Выбери экзамены:<BR>
<INPUT TYPE="checkbox" NAME="subj" VALUE="украинский">Украинский <BR>
<INPUT TYPE="checkbox" NAME="subj" VALUE="физика">Физика <BR>
<INPUT TYPE="checkbox" NAME="subj" VALUE="математика">Математика <BR>
<INPUT TYPE="submit" VALUE="Отправить">
<INPUT TYPE="reset" VALUE="Обновить форму">
</FORM>
</BODY>
</HTML>
Использование веб-скриптов.
Создать форму, используя компоненты редактора SharePoint Designer.
Код программы:
<HTML>
<HEAD>
<H4>Тестирование </H4>
<SCRIPT>
function proverka(tests) {
var i=0;
if (tests.one[1].checked) {i++;}
if (tests.two[0].checked) {i++;}
if (tests.three[2].checked) {i++;}
document.tests.pechat.value = i;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="post" NAME="tests"> 2+2=? <BR><BR>
<INPUT TYPE="radio" NAME="one" VALUE="1">5 <BR>
<INPUT TYPE="radio" NAME="one" VALUE="2">4 <BR>
<INPUT TYPE="radio" NAME="one" VALUE="3">3<BR><BR> 3+3=? <BR><BR>
<INPUT TYPE="radio" NAME="two" VALUE="1">6<BR>
<INPUT TYPE="radio" NAME="two" VALUE="2">5<BR>
<INPUT TYPE="radio" NAME="two" VALUE="3">7<BR><BR> 4+4=? <BR><BR>
<INPUT TYPE="radio" NAME="three" VALUE="1">7<BR>
<INPUT TYPE="radio" NAME="three" VALUE="2">9<BR>
<INPUT TYPE="radio" NAME="three" VALUE="3">8<BR><BR>
<INPUT NAME="check" onclick="proverka (this.form)" TYPE="button" VALUE="Количество правильных ответов">
<TEXTAREA cols="2" NAME="pechat" ROWS="1"></TEXTAREA>
</FORM>
<p> <INPUT TYPE="reset" VALUE="ОБНОВИТЬ форму"></p>
</BODY>
</HTML>
Немає коментарів:
Дописати коментар