Файл: Примеры_по_HTML.docx

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 04.12.2019

Просмотров: 5009

Скачиваний: 4

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

<!-- -->

Пример:

Примечания:

Заголовок

Элементы, относящиеся к заголовку документа

HEAD

Пример:

TITLE

Пример:

Примечания:

BASE

Атрибуты

Пример:

STYLE

Атрибуты

Пример:

Примечания

Рекомендуем почитать про CSS:

LINK

Атрибуты

Пример 1

Пример 2

Примечание

META

Атрибуты

Пример:

Фреймы

Элементы для создания фреймов и работы с ними

Примечания

FRAME

Атрибуты

Пример (файл index.html):

FRAMESET

Атрибуты

Примечание

NOFRAMES

Пример:

Скрипты

Элементы для работы со скриптами

SCRIPT

Атрибуты

Пример 1:

Пример 2:

Где размещать скрипт

NOSCRIPT

Пример:

Навигационные карты

Пример:

Примечание

MAP

Атрибуты

Пример:

AREA

Атрибуты

Пример:

Примечания

Тело документа

Примечания

BODY

Атрибуты

Пример:

Примечания

Гиперссылки

Ссылки на другие сайты по данной теме

A

Атрибуты

Пример 1

Пример 2

Пример 3

Примечания

Ссылки на другие сайты по данной тематике

Текстовые блоки

Элементы

H1,H2,...H6

Атрибуты

Пример:

DIV

Атрибуты

Пример:

Примечание

ADDRESS

Пример

Примечание

BLOCKQUOTE

Пример:

BR

Атрибуты

Пример:

Примечание

HR

Атрибуты

Пример:

PRE

Пример:

Примечание

LISTING, PLAINTEXT, XMP

Форматирование текста

Элементы форматирования текста

BASEFONT

Атрибуты

Пример:

Примечание

Пример

FONT

Атрибуты

Пример:

Примечание

I

Пример:

EM

Пример:

Примечание

B

Пример:

STRONG

Пример:

Примечание

U

Пример:

S, STRIKE

Пример:

BIG

Пример:

Примечание

SMALL

Пример:

Примечание

SUP

Пример:

SUB

Пример:

CODE, SAMP

Пример:

TT

Пример:

TT

Пример:

KBD

Пример:

VAR

Пример:

CITE

Пример

Списки

Элементы

UL

Пример:

UL

Пример:

OL

Атрибуты

Пример:

LI

Атрибуты

Пример

Примечания

MENU, DIR

DL

Атрибуты

Пример:

DT

DD

Объекты

Элементы

IMG

Атрибуты

Пример 1:

Пример 2. Использование изображения в качестве гиперссылки:

Пример 3. Использование ISMAP:

Пример 4. Использование USEMAP:

Примечания (особо важно)

EMBED

Атрибуты

Другие атрибуты

Пример 1:

Пример 2:

Примечания

Смотрите также

Ссылки на другие сайты по данной теме

NOEMBED

Пример:

APPLET

Атрибуты

Пример 1:

Пример 2:

Примечание

PARAM

Пример

CAPTION

Атрибуты

Пример:

TABLE

Атрибуты

Примечания

Пример

TD и TH

Атрибуты

Примечания

Пример:

TR

Атрибуты

Примеры таблиц

Пример 1:

Пример 2:

Формы

Элементы для создания форм

FORM

Атрибуты

Пример:

Примечания

TEXTAREA

Атрибуты

Пример:

Примечание

SELECT

Атрибуты

Пример:

Результат

OPTION

Атрибуты

Пример:

INPUT

Атрибуты

Пример 1:

Пример 2:

Примеры таблиц

Пример 1:

<TABLE BORDER>
<TR>
<TH ROWSPAN=2>HDD</TH>
<TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD>
</TR>
<TR>
<TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD>
</TR>
</TABLE>

Пример 2:

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Video</TH>
</TR>
<TR>
<TD>Matrox G400</TD><TD ALIGN="right">115$</TD>
</TR>
<TR>
<TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD>
</TR>
</TABLE>


Формы

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

Элементы для создания форм

  • FORM Создает заполяемую форму

  • TEXTAREA Создает поле для ввода нескольких строк текста

  • SELECT Создает меню в заполняемой форме

  • OPTION Создает отдельные пункты в меню (см. SELECT)

  • INPUT Создает поле в форме


FORM

(HTML 2.0) - Form

Используется для создания заполяемой формы. Необходимо присутствие начального и конечного тегов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.

Атрибуты

NAME - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.

ACTION - обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы - путь к скрипту сервера, обслуживающему данную форму.

METHOD - определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST.

ENCTYPE - определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".

TARGET - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в атрибуте TARGET элемента A.

Пример:

<!-- Создаем форму -->
<FORM ACTION="/cgi-bin/thanks.pl" METHOD=GET NAME="TestForm">

<!-- Внутри формы создаем поле ввода: -->
Фамилия:
<INPUT TYPE="text" name="lastname" SIZE="20" VALUE="Пупкин"><br>

<!-- Кнопка "Отправить": -->
<INPUT TYPE="submit" VALUE="Отправить">
</FORM>
<!-- Все, конец форме -->'

Примечания

  • Во время отладки скрипта, принимающего данные, удобнее всего использовать метод GET.

  • Метод GET не позволяет передать скрипту большой объём данных. Если предполагается, что пользователь будет заполнять очень большую форму или вводить объёмные текстовые данные, или пересылать файл - используйте METHOD="POST".

  • Перед тегом <FORM> в браузерах Netscape образуется пустое пространство, вертикальный отступ. Если вас это не устраивает и при этом форма на странице одна, поместите тег <FORM> в начало страницы, сразу после тега <BODY>, это должно помочь.

TEXTAREA

(HTML 2.0) - Text Area

Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент TEXTAREA должен располагаться внутри элемента FORM.

Атрибуты

NAME - обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.

ROWS - определяет количество строк текста, видимых на экране.

COLS - определяет ширину текстового поля - в печатных символах.

WRAP - определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:

  • off - перенос слов не происходит (значение по умолчанию)

  • virtual - перенос слов только отображается, на сервер же поступает неделимая строка.

  • physical - перенос слов будет происходить во всех точках переноса.

Пример:

...
<FORM ACTION="receive.html" METHOD=POST>
<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">Ваш адрес...</TEXTAREA><br>
<INPUT TYPE="submit" VALUE="OK">
</FORM>
...

Результат:

Начало формы

Конец формы

Примечание

  • Поле типа TEXTAREA позволяет пользователю набрать довольно большой блок текста. Поэтому, если в форме присутствует поле TEXTAREA, передавайте скрипту данные методом POST (см. элемент FORM) иначе есть вероятность потери данных.


SELECT

(HTML 2.0) - Select

Элемент SELECT создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный теги. Содержит несколько элементов OPTION, иначе не имеет смысла.

Атрибуты

MULTIPLE - дает возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. По умолчанию можно выбрать только один пункт меню.

NAME - определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.

SIZE - определяет количество видимых пунктов в меню. Если значение этого атрибута больше единицы, то результатом будет список пунктов.

Пример:

...
<FORM ACTION="receive.cgi">
<SELECT NAME="OS" MULTIPLE>
    <OPTION VALUE="DOS">MS-DOS
    <OPTION VALUE="WinXP">MS Windows98
    <OPTION VALUE="Unix" SELECTED>UNIX
    <OPTION VALUE="WinNT">MS Windows NT
</SELECT>
<INPUT TYPE="submit" VALUE="Послать">
</FORM>
...

Результат

Начало формы

   

Конец формы


OPTION

(HTML 2.0) - Option

Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тега.

Атрибуты

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

VALUE - Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением атрибута NAME в элементе SELECT.

Пример:

...
<FORM ACTION="script.cgi">
Мой пол
<SELECT NAME="gender">
        <OPTION VALUE="male" SELECTED>Мужской
        <OPTION VALUE="female">Женский
        <OPTION VALUE="not_yet">Определяюсь
</SELECT>
<INPUT TYPE="submit" VALUE="OK">
</FORM>
...


Смотрите также файлы