Вопрос 13.doc

Вопрос 13.

Язык HTML. Структура HTML документа, парные и не парные теги, & - последовательности.

Язык HTML, или универсальный язык разметки гипертекста, используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения как программе, так и человеку. Благодаря этому HTML - страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.

Для создания HTML-страниц можно пользоваться любым текстовым редактором, но существуют и специализированные программы. Эти HTML-редакторы делятся на два типа: визуальные и не визуальные.

Структура HTML документа.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>

Все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в браузере.
Обязательные тэги.
<html> </html>

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации.

Например <title> - заголовок.

Все тэги, расположенные между <body> </body> - непосредственное содержание документа.

Дескриптор в HTML — это некое ключевое слово или сокращение, которое служит признаком того или иного форматирования данной части документа. Для того чтобы дескриптор можно было отличить от остального текста, его заключают между знаками "больше" и "меньше": <ДЕСКРИПТОР>.

Многие дескрипторы принадлежат к контейнерному типу: в них, как в контейнер, заключается фрагмент текста, форматирование которого определяется этим

дескриптором, — например, выделение курсивом или "привязка" гиперссылки.

Контейнерные дескрипторы всегда парные: каждому открывающему дескриптору

соответствует одноименный закрывающий, причем закрывающий дескриптор отличается от открывающего тем, что начинается с косой черты

Встречаются и не контейнерные, одинарные дескрипторы. Они не содержат текста, который нужно так или иначе отформатировать, а определяют характеристики документа в целом или описывают объект, который нужно вставить в данной точке документа, например картинку. Такие дескрипторы не имеют закрывающих "двойников"

Пример парных тегов: <I> текст курсивом </I> ; <B> текст жирный </B>; <U> текст подчеркнутый </U>

Пример не парных тегов: <br> перенос текста на другую строку;как вставлять картинки в документ: <img src="my.jpg">

Символы, не входящие в стандартный набор ASCII, обозначаются в HTML – коде с помощью Esc-последовательностей или мнемонических имен. Esc-последовательность представляет собой ASCII-код символа, перед которым стоят знаки &#, а после — точка с запятой. Мнемоническое имя символа — это некое сокращение, образованное от его английского названия, перед которым стоит амперсанд, а после — точка с запятой. Так, левую и правую угловые кавычки (« и ») в HTML-коде можно обозначить как « и » или же как « и sraquo;. Таким же способом в HTML-код вносят служебные символы HTML. Например, если на страницу потребуется вывести угловые скобки, обычно используемые как признак дескрипторов HTML, то можно воспользоваться Esc-последовательностями < и

> или же мнемоническими именами < и >. А также   - пробел; & - &.

Форма в HTML, обязательные атрибуты формы.

Как получить данные и передать их для обработки?

Для этой цели используются формы — элементы Web-страницы, содержащие такие знакомые нам поля ввода, списки, кнопки и прочие верные признаки графического интерфейса.

информацию нужно как-то обрабатывать.

Поэтому параметры дескриптора <FORM> должны описывать то, что нужно делать

дальше с полученными данными.

Action (обязательный атрибут) – место где указывается обработчик (программа которая будет принимать и обрабатывать данные из этой формы).

<form action = “index.html”> </form> (index.html - обработчик)

Method – определяет способ передачи информации (post – из формы get – в адресной строке).

Существуют различные типы кодирования информации, передаваемой через Internet. Тип кодирования данных, введенных через форму, определяется параметром enctype (от английского encryption type — тип кодирования). В данном случае имеются в виду типы кодирования MIME. По умолчанию параметр enctype принимает значение

application/x-www-form-urlencoded, но при отправке данных электронной почтой используется тип text/plain. Таким образом, для того чтобы данные формы передавались по электронной почте, код формы должен выглядеть так:

Типы элементов INPUT.

Для ввода однострочных полей используется дескриптор <INPUT>. Это непарный

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

Введите строку: <INPUT type=text name=search value = “123” >

Текстовая строка имеет имя search и начальное значение 123, присвоенное параметру value.

Довольно часто встречаются ситуации, когда вводимая строка не должна быть видна на экране. Типичный случай — пароль. Для того чтобы обеспечить конфиденциальность такого рода, используются текстовые строки специального вида - параметру type присваивается значение password.

Чтобы измерить длину строки. За это "отвечает" параметр size. Его значением является число символов, помещающихся в строке. Например, если нужно ввести что-то очень короткое - скажем, сегодняшнее число — то строку можно сократить до двух символов, присвоив параметру size значение 2. Но помешает ли это посетителю ввести более

длинное число? Нет. Просто символы, введенные первыми, "уедут" из видимой

части строки влево

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

Иногда возникает необходимость передать из формы программе- обработчику некую скрытую информацию — такую, которую пользователь не то что не вводит, но даже и не видит. Для этого используется дескриптор <INPUT> с параметром type = hidden

Для ввода имени файла используется текстовая строка с параметром file

Кнопки - главный элемент любой электронной формы.

Для того чтобы создать кнопку отправки данных, параметру type присваивается значение submit

Если стандартный серый квадрат с надписью не "вписывается" в дизайн страницы, его можно заменить на любой рисунок. Для этого параметру type вместо submit присваивается значение image. После этого кнопка превратится в рисунок, а дескриптору <INPUT> можно присваивать все те параметры, что и обычным изображениям.

С помощью значения reset создается кнопка, возвращающая форму в исходное состояние

Если необходимо создать кнопку, назначение которой отличается от приема данных и сброса, используется значение type=button.

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

Обычно пункты списков вариантов снабжены квадратными "окошками", в которых при выборе появляются "птички" (checkbox). Для создания такого списка используется уже знакомый нам дескриптор <INPUT> с параметром type=checkbox.

<INPUT type= checkbox name= pirog > Пирожок

<INPUT type= checkbox name= bulka > Булочка

<INPUT type= checkbox name= tort > Торт

Если мы хотим, чтобы какой-то из пунктов был выбран по умолчанию, то нам понадобится дополнительный параметр — checked.

<INPUT type= checkbox name= tort checked > Торт

В списках-переключателях слева от пунктов имеются кружки, причем в центре кружка, соответствующего выбранному пункту, появляется жирная точка (radiobutton). Для создания таких списков используется тот же дескриптор <INPUT>, что и для списка вариантов, но параметру type присваивается значение radio. Как и в списке вариантов, каждому элементу списка-переключателя соответствует отдельный дескриптор <INPUT>. Однако, в отличие от списка вариантов, все элементы списка-переключателя имеют одно имя. Иначе и не может быть: ведь мы хотим получить только одно значение из всего перечня.

Раскрывающиеся списки.

Сам список создается с помощью дескриптора <SELECT> </SELECT>, а отдельные элементы - с помощью дескрипторов <OPTION>.

<OPTION value = Понедельник> Понедельник

<OPTION value = Вторник> Вторник

<OPTION value = Среда> Среда

</SELECT>

Мы можем модифицировать список так, чтобы он принял вид окна, содержащего несколько строк и — при необходимости — полосу прокрутки. Для этого нам потребуется параметр size дескриптора <SELECT>. Этот параметр определяет количество строк, из которых состоит список в "закрытом" состоянии, и по умолчанию равен 1.

Для того чтобы список позволял выбрать сразу несколько, вариантов, используется параметр multiple.

Ввод многострочного текста в HTML

Для создания текстового поля используется дескриптор <TEXTAREA>. Высота поля ввода определяется параметром rows и измеряется в строках, ширина — параметром cols и измеряется в символах.

<TEXTAREA name = text cols = 25 rows = 5> Начинай прямо отсюда </TEXTAREA>

Три режима отображения и передачи длинных строк, определяемые параметром wrap: перенос при вводе wrap = virtual

- отсутствие переноса wrap = off

- перенос при вводе и передаче wrap = hard

Вопрос 13. Язык HTML. Структура

Встречаются и не контейнерные, одинарные дескрипторы

Таким образом, для того чтобы данные формы передавались по электронной почте, код формы должен выглядеть так: <FORM action=mailto: почтовый @ адрес method=post enctype=text/plain>

После этого кнопка превратится в рисунок, а дескриптору <INPUT> можно присваивать все те параметры, что и обычным изображениям

Для того чтобы список позволял выбрать сразу несколько, вариантов, используется параметр multiple

Скачать файл