Сохраним этот документ с расширением htm (с новым именем)
Занятие
«Бегущая строка»
Используется для привлечения внимания ваших посетителей к новостям о Вашей организации, о новостях сайта (какие-то страницы обновлены и т.д.).
Главный тег <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>
Занятие
«Формы»
Формы нужны, когда от посетителя Вашего сайта требуется заполнить определенную информацию для Вас, и отправить на Ваш 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>
Занятие
Продолжение темы «Формы»
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>
Занятие
Продолжение темы «Формы»
Продолжение описания типов тега:
<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
Занятие
«Разворачивающиеся списки»
<select> -выбор значений из разворачивающегося списка значений, заданных при помощи option.
Параметры:
· name="predmet" – имя этой формы.
· size=1 – начальная высота списка.
Каждое слово из разворачивающегося списка можно сделать ссылкой на другую страница, прописав теги ссылок около каждого слова из списка.
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form5.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
<select name="predmet" size="1">
<option value="математика">математика<br>
<option value="литература"> литература<br>
<option value="физика"> физика<br>
<option value="информатика"> информатика
</form>
</body>
</html>
«Установка звука на страницу»
В предыдущей программе:
1. В голову программы вставить тег
<bgsound src=" blue.kar">
2. после тега <body> вставьте следующий SCRIPT: <SCRIPT language=JavaScript event=EndOfStream(Result) for=MPlyr>
alert("Sound stream ended");
</SCRIPT>
Сохраните изменения в документе form5.htm
Этот документ должен выглядеть так:
<html>
<head>
<title> my site</title>
<bgsound src="blue.kar"></head><body>
<SCRIPT language=JavaScript event=EndOfStream(Result) for=MPlyr>
alert("Sound stream ended");
</SCRIPT>
<form method="post" action="mailto:info@yandex.ru">
<select name="predmet" size="1">
<option value="математика">математика<br>
<option value="литература"> литература<br>
<option value="физика"> физика<br>
<option value="информатика"> информатика
</form>
</body>
</html>
Дата добавления: 2018-04-04; просмотров: 348; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!