metoda / Kl_ITIn_2014

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Используем type=radio

<form action="/cgi-bin/handler.cgi"> <b>Какое время года Вы больше любите? :-)</b>

<input type=radio name=answer value=a1>Весну <input type=radio name=answer value=a2>Лето <input type=radio name=answer value=a3>Осень <input type=radio name=answer value=a4>Зиму </form>

На страничке можно будет увидеть следующее:

Какое время года Вы больше любите? :-)

Весну

Лето

Осень Зиму

То есть, используя радиокнопки Вы можете выбрать только ОДНО значение. Попробуйте :-)

Поле со списком

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

Поля выбора начинаются тегом <select> и заканчиваются </select> Каждое выбираемое поле заключено в теги <option> и </option >

Пример:

<form action="/cgi-bin/handler.cgi">

<b>Какое время года Вы больше любите? :-)</b> <p align=center>

<select name= время года>

<option>Весну</option> <option>Лето</option> <option>Осень</option> <option>Зиму</option>

</select>

</form>

На страничке видем следующее:

Какое время года Вы больше любите? :-)

Для списков используются следующие параметры:

Кнопка с изображением

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

Используем type=image

<form action="/cgi-bin/handler.cgi"> <table align=center>

<tr><td colspan=2>Введите ваше имя: <tr> <td><input type=text width=25></td>

<td><input type=image src=../school/examples3/ser.gif width=90 height=68 border=0></td>

</tr>

Эта форма имеет следующий код:

<form method="post" action="8.php"> <fieldset>

<b>Зaполните Ваши данные:</b><br><br>

Имя: <input type=text name="name" maxlength=25 size=20 value=" "> <br><br>

</fieldset>

<p>

<fieldset>

<b>Выберите любимый цвет:</b><br>

<p align=center> <input type=radio name=answer value="#F4F090">Желтый<br>

<input type=radio name=answer value="#80ECF3">Голубой<br> <input type=radio name=answer value="#F3ACC5">Розовый<br> <input type=radio name=answer value="#A7F4AB">Зеленый<br> </select>

<br><br>

</fieldset>

<p>

<fieldset>

<b>Напишите здесь что-нибудь хорошее :-)</b><br> <textarea name="basictext" rows=7 cols=45 ></textarea> </fieldset>

<p>

<fieldset>

<input type=reset value="Сбросить данные"> <input type="submit" value="Отправить данные"> </fieldset>

</form>

11.Символьные объекты.

Что такое символьные объекты?

Примеры использования

Упражнение

Что такое символьные объекты?

Пожалуйста, наберите вот такую строчку: ϖ ϒ ϑ ω ψ χ φ π ξ ζ θ δ Ω

Или мелодию

♪ ♫ ♪ ♪ ♫....

Получилось? :-)

Если нет, то познакомимся с так называемыми символьными объектами.

При составлении HTML странички удобно использовать комментарии:

<!- Текст комментария ->

При этом комментарии на экране, во время просмотра документа в браузере, не отображаются.

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью символьных объектов (&- последовательностей).

Вот только некоторые из них:

Помните: точка с запятой - обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа &QUOT; или &AMP; не допускается.

Символьными объектами можно отображать в браузере буквы, математические знаки, знаки денежных единиц и многое другое. Необходимые символьные объекты вы всегда можете найти в справочниках. Например, здесь

http://www.konus.biz/books/DHTML...

http://ascii.org.ua/table.php

http://borisych.fopf.mipt.ru/gr025/book/10/html1019.htm

Примеры использования

1.Знаки "<" и ">" применяются для отображения в браузере html кода. Например, чтобы в браузере получилась такая строчка

<h3>Уроки HTML</h3>

В html страничке нам необходимо написать сдедующее:

< h3 > Уроки HTML < /h3 >

2.Товарный знак ™ используется на странике продуктов http://www.colorpilot.ru/products.html

Строка на странице в браузере:

Form Pilot Home™ - заполнение бумажных бланков Эта же строка в html коде будет выглядеть так:

<a href="fphcomics.html">Form Pilot Home™</a> - заполнение бумажных бланков

3.Знак копирайта © используется при подписи фотографий, когда необходима ссылка на автора.

Пример можно посмотреть на этой страничке

http://www.colorpilot.ru/makeup.html

Надпись под фотографией

Photo © Alexander Saltykov

имеет такой html код:

Photo © Alexander Saltykov

10.Что такое CSS?

Что такое CSS?

Преимущества CSS перед HTML

Что такое CSS?

CSS (Cascade Style Sheet) - каскадные таблицы стилей. Это своего рода расширение HTML, дающее web-разработчику дополнительные возможности.

Стиль (style) - это набор элементов форматирования текста. Например, цвет текста, шрифт, размер, выравнивание и т.д. Все эти параметры можно хранить в стилях.

Но ведь и HTML позволяет оформлять текст с помощью тегов форматирования.

В чем же преимущество CSS перед HTML?

Преимущества CSS перед HTML

1.CSS одним действием позволяет изменять сразу всю группу параметров.

Например, в наших уроках все заголовки, заданные тегами <h1>, <h2>, <h3> и <h4> оранжевого цвета. В обычном HTML для этого нам понадобилось бы каждый заголовок поместить в контейнер <font> с

параметром color="#CD6600":

<font color="#CD6600"><h1>Заголовок 1</h1></font>

...

<font color="#CD6600"><h4>Заголовок 4</h4></font>

И если бы понадобилось изменить цвет заголовков, нам пришлось бы искать их по всему документу и изменять каждый заголовок в отдельности.

А с помощью CSS мы создали стиль для тегов <h1>, <h2>, <h3> и <h4> в отдельном файле style_school.css (см. строка 22). И все заголовки, заданные этими тегами, без дополнительных тегов будут обладать нужными свойствами.

И если мы захотим изменить какое-либо свойство у заголовков, нам достаточно будет изменить стиль тегов, и все заголовки будут автоматически изменены.

2.Стили предоставляют разработчику гораздо больше возможностей по сравнению с обычным HTML.

Например, с помощью стилей можно задать такие свойства текста, которые нельзя задать с помощью стандартных параметров того или иного html-тега.

3.Все стили можно хранить в отдельном файле. Браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет немного быстрее.

11 Добавление стилей

Внутренние стили

Глобальные стили

Связанные стили

Сочетание различный видов стилей

Упражнение

Стили можно добавить тремя способами.

Внутренние стили

Внутренний стиль - это своего рода расширение html-тега. Такой стиль создается в случае необходимости задать какие-либо свойства для конкретного объекта, а не группы объектов. Эти свойства называютя

атрибутами стиля.

Для создания такого стиля используется параметр style, который есть у всех тегов. Параметру style присваиваются перечисленные через "точку с запятой" атрибуты с заданными значениями. Значения атрибутам присваиваются не знаком "равно", как обычно, а знаком "двоеточие".

Например, Вы хотите, какой-то конкретный заголовок написать оранжевым цветом и размером 22 пиксела. Для этого напишите следующее:

<h1 style="color: #CD6600; font-size: 22px">Урок 1</h1>

Разберем этот пример. Фраза "Урок 1" выделена тегом заголовка <h1>. У тега <h1> создается стиль с помощью параметра style. У стиля задаются 2 атрибута color (цвет) и font-size (размер шрифта), разделенные "точкой с запятой". Атрибуту color присваивается значение #CD6600, атрибуту fontsize присваивается значение 22px.

Глобальные стили

Глобальные стили создаются в случае необходимости задать какие-либо свойства для группы объектов. Такие стили создаются в начале документа внутри тега <head> и их действие распространяется на весь документ.

Глобальные стили добавляются в документ следующим образом:

1.Внутри тега <head> вставляется парный тег <style> с параметром type="text/css";

2.Внутри тега <style> располагаются все стили для данного документа. Стили разделяются просто переносом строки.

3.Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { }.

4.Между "фигурными скобками" пишутся все атрибуты стиля с присвоенными значениями, разделенные "точкой с запятой". Значения атрибутам присваиваются "двоеточием", а не знаком "равно". После значения последнего атрибута "точку с запятой" ставить необязательно.

<head>

<style type="text/css">

стиль1 { атрибут1: значение;

атрибут2: значение;

...

}

стиль2 { атрибут1: значение;

атрибут2: значение;

...

}

...

</style>

</head>

Например, сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов:

<head>

<style type="text/css"> h1 {

color: #CD6600; <-- стиль для тега <h1> font-size: 22px

}

h2 {

color: #FF0000; <-- стиль для тега <h2> font-size: 20px

}

</style>

</head>

После добавления этих стилей, все заголовки Вашего документа, выделенные тегами <h1> и <h2> без дополнительных тегов будут обладать нужными свойствами. И если Вы захотите изменить или добавить какое-либо свойство, Вы просто измените или добавите его в соответсвующем стиле.

Связанные стили

Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном файле с расширением .css и подключаются к документу (или нескольким документам).

Этот способ добавления стилей наиболее удобный из всех описанных способов и предоставляет большее число возможностей для webразработчика.

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

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

И, в-третьих, при первой загрузке браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет нескольк о быстрее.

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