<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFCCCC">
<table width="44%" border="0">
<tr valign="top" align="left">
<td colspan="2"><img src="pic/zastavka2 .jpg" width="700" height="100"></td>
</tr>
<tr>
<td valign="top" align="left" width="58%">
<div align="left">
<font face="sans-serif" size=3 color="green">
<i>Да, будут ясны дни твои!<Br>
Как милый взор твой ныне ясен.<Br>
Средь лучших жребиев судьбы,<Br>
Да, будет жребий твой прекрасен!<Br>
</i></font></div>
</td>
<td align="right" width="42%"><img src="pic/3.jpg" width="200" height="200"></td>
</tr>
</table>
</body>
</html>
Сохраним этот документ с расширением htm (с новым именем).
12 занятие
«Бегущая строка»
Используется для привлечения внимания ваших посетителей к новостям о Вашей организации, о новостях сайта (какие-то страницы обновлены и т.д.).
Главный тег <marquee>
Параметры тега:
· align="top" (right, left, middle, bottom) – выравнивание строки:
right – по правому краю
left - по левому краю
top - вверху страницы
middle – в по центру страницы
bottom – внизу страницы
· behavior="slide" – поведение текста (движущийся).
· scrolldelay="value" (value – без задержки, общим потоком, т.е. текст заканчивается и снова идет без интервала задержки) – задержка текста, лучше ставить в pic ≈ 250.
· loop="value" (-1,infinite) (value – одноразовый пробег,
-1,infinite – число проигрываний – неограниченно) – число проигрываний или прохождений текста по строке.
· width="…%" – ширина бегущей строки, можно в pic.
· height=18 (м.б. в %) – высота бегущей строки, лучше указывать в pic.
· direction="left" (right) – направление движения текста.
· bgcolor=”#……” (можно по названию цвета) - цвет фона
Пример:
<marquee behavior="slide" direction="left" bgcolor="green" width="100%" height="15" scrolldelay="240" loop="-1,infinite"><font color="white">Наш сайт участвует в районной олимпиаде по проектной деятельности.</font>
</marquee >
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «бегущую строку», сохранить документ с именем stroca.htm. Должно получиться следующее:
<html>
<head>
<title> my site</title>
</head>
<body>
<marquee><font color="black">Наш сайт участвует в районной олимпиаде по проектной деятельности.</font></ marquee >
</body>
</html>
12 занятие
«Формы»
Формы нужны, когда от посетителя Вашего сайта требуется заполнить определенную информацию для Вас, и отправить на Ваш E-mail (часто используется в «гостевой книге»). Иногда формы используются для удобства навигации (движения) по сайту (раскрывающиеся списки).
Главный тег <form> - парный тег.
Параметры:
1. method="post" - отправка почтой.
2. action="mailto:info@yandex.ru" - указывается адрес E-mail владельца сайта
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Элементы формы, которые будут описаны ниже
</form>
· Текстовые поля (свободный текст) – позволяет пользователю вводить более одной строки текста
<textarea> - парный тег
Параметры:
· name="…." -название текстового поля (англ. буквами).
· rows=5 - высота поля в символах.
· сols=10 - ширина поля ввода в символах.
· wrap="off" (virtual) – строка символов не разбивается (разбивается автоматически).
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
<textarea name="address" rows=10 сols=50 wrap=" virtual ">
г. Москва,
ул. Дегунинская, д. 18
СОШ № 660
Тел. 905-82-55
</textarea>
</form>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form1.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
<textarea name="address" rows=10 сols=50 wrap=" virtual ">
г. Москва,
ул. Дегунинская, д. 18
СОШ № 660
Тел. 905-82-55
</textarea>
</form>
</body>
</html>
13 занятие
Продолжение темы «Формы»
2. Текстовые поля (однострочные)
<input> - не парный тег, имеет несколько типов:
· type="text"
Параметры:
1. size=20 – размер поля отображаемого ввода на экране.
2. maxlenght=15 – максимальная длина вводимого значения в символах.
· type="reset" - кнопка сброса информации (очистка форм)
Параметры:
value="сброс" – название на кнопке.
· type="submit" - кнопка отправки информации
Параметры:
value="отправить" – название на кнопке.
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Введите имя:<input name="имя" type="text" size=40><br>
Введите код: <input name="код" type="text" size=20 maxlengh=10><br>
<input type="submit" value="отправить">
<input type="reset" value="удалить">
</form>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form2.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru"><br>
Введите имя:<input name="имя" type="text" size=40><br>
Введите код: <input name="код" type="text" size=20 maxlengh=10><br>
<input type="submit" value="отправить">
<input type="reset" value="удалить">
</form>
</body>
</html>
14 занятие
Продолжение темы «Формы»
Продолжение описания типов тега:
<input>
· type="radio" - одиночный выбор значения из нескольких.
Параметры:
1. name="predmet" – имя этой формы.
2. checked – выбрано изначально.
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Укажите свой любимый предмет:<input type="radio" name="predmet>математика<br>
<input type="radio" name="predmet>литература<br>
<input type="radio" name="predmet>физика<br>
<input type="radio" name="predmet>информатика
</form>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form3.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
Укажите свой любимый предмет: <br><input type="radio" name="predmet>математика<br>
<input type="radio" name="predmet>литература<br>
<input type="radio" name="predmet>физика<br>
<input type="radio" name="predmet>информатика
</form>
</body>
</html>
· type="checkbox" - множественный выбор.
Параметры:
name="predmet" – имя этой формы.
В HTML-код документа form3.htm вставьте вместо type="radio", type="checkbox" сохраните документ под именем form4.htm
15 занятие
«Разворачивающиеся списки»
<select> - выбор значений из разворачивающегося списка значений, заданных при помощи option.
Параметры:
· name="predmet" – имя этой формы.
· size=1 – начальная высота списка.
Каждое слово из разворачивающегося списка можно сделать ссылкой на другую страница, прописав теги ссылок около каждого слова из списка.
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form5.htm