Основы языка HTML и CSS. Практическое применение и использование.

Лабораторная работа №1

Основы языка HTML и CSS. Практическое применение и использование.

Цель работы: ознакомиться с назначением языка и изучить синтаксис HTML, изучить основные функции и возможности HTML, изучить и понять принцип работы технологии CSS, создать первый шаблон web-ресурса.

Теоретические сведения

HTML. Краткие сведения

HTML (Hypertext marker language) – язык разметки гипертекста. Данная технология используется для интерпретации исходного кода, представляющего собой текстовое структурное описание веб-страницы и её элементов браузером. Браузер - программное приложение, предназначенное для просмотра веб-страниц в удобной для пользователя форме. На сегодняшний день наиболее популярными браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera. Любая страница, ресурс глобальной сети своей структурой содержат HTML-код. Просмотр страниц в браузере осуществляется по протоколу http (Hypertext Transfer Protocol).

Файл веб-страницы или веб-документа, как правило, имеет расширение.html или.htm.

Для редактирования html-страницы (веб-документ с вышеуказанными расширениями), потребуется следующее:

- наличие браузера (для просмотра результатов редактирования);

- наличие редактора.

Чаще всего в качестве редактора используется MS Notepad (Блокнот). Можно также использовать MS FrontPage, Adobe Dreamweaver, MS Visual Studio. Отличие последних в том, что вы сможете редактировать не только html-код страницы, но также использовать визуальные средства для её построения - при этом код будет генерироваться автоматически.

Синтаксис HTML

Рассмотрим важные принципы синтаксиса html. Это необходимо для работы по созданию html-документа. Язык разметки гипертекста не является языком программирования – с помощью него можно построить содержимое веб-страницы за счет использования кода. Перед тем, как создать нашу первую страницу, давайте ознакомимся с базовыми понятиями языка.

Для описания объектов и некоего подобия команд, которые будут применяться к тому или иному объекту используются теги. Они имеют следующий вид:

< тег> содержимое < /тег>

Первый элемент пары: < тег> - является открывающим и в нем задаются свойства, которые будут применятся к содержимому. < /тег> - является закрывающим, т.е. в том месте, где он находится, свойство перестает действовать. В данном примере, на месте слова «тег»подразумевается название какого-либо свойства с параметрами. К примеру, мы можем задать размер шрифта и его стиль:

< font size=”5” color=”red”> Текст< /font>

В открывающемся теге мы описываем основные параметры и свойства, которые будут применяться к элементу между открывающим и закрывающим тегом (в данном случае - тексту). В закрывающем теге мы записываем лишь первое слово, которое стоит первым в открывающем теге. В данном примере, мы применили к тексту 5 –й размер шрифта (font size=”5”) и красный цвет (color=”red”). Обратите внимание, что для задания значений какому-либо параметров в HTML используется схема «свойство параметр=”значение”» и никак иначе.

Формат значений

- Для указания размеров, толщины границ, абсолютного положения используется система чисел;

- Для указания цвета используется формат записи:

1) Название текста на английском языке (blue, red, green и т.д.);

2) Код в шестнадцатеричной системе (#FFFFFF - что соответствует в данном случае белому цвету, и т.д.). Формат записи: color=”#FFFFFF”;

- Для описания гиперссылок (к этой теме обратимся немного позже) в качестве параметра используется абсолютный или относительный адрес;

-Для параметра выравнивания используется относительное название положений на html-странице (left, right, center, bottom, top, baseline и т.д.)

Также к одному объекту можно применять несколько тегов и, как следствие, несколько свойств. Обратите внимание на пример:

 

< p align=”center”> < font size=”3” color=”green”> < i> Текст примера< /i> < /font> < /p>

 

Незнакомые свойства тегов буду разобраны ниже. Обратите внимание на последовательность тегов: закрывающие теги должны быть в обратной последовательности к открывающим – это поможет избежать ошибок считывания кода браузером.

Важно также соблюдать синтаксис написания html-кода. Необходимо учесть часто допускаемые ошибки:

ü Несоблюдение правильности написания команд, опечатки;

ü Некорректность в расстановке тегов (открывающий и закрывающий тег распространяются только на содержимое внутри них; в закрывающем теге должен стоять знак «слэш»; должна соблюдаться последовательность в расстановке тегов);

ü Названия и имена параметров должны быть написаны исключительно латинскими буквами.

Структура html-документа

Изучив основные принципы синтаксиса, можно приступить к изучению структуры html-страницы. Пустая страница имеет следующий вид:

 

< html>

< head>

< /head>

< body>

< /body>

< /html>

Листинг структуры html-документа

Разберем параметры данных тегов:

1) < html> < /html> - обозначает всё содержимое html-документа, инициализируется в браузере именно как веб-страница. Открывающий тег должен находиться в самом начале кода, закрывающий - идти в самую последнюю очередь;

2) < head> < /head> - заголовок документа. Здесь могут содержаться такие элементы, как:

· Title – заголовок, название самой веб-страницы, которое будет содержаться в строке заголовка браузера (< title> Заголовок< /title> );

· Meta– содержится так называемая метаинформация (свойства документа, ключевые значения для использования поисковыми системами, авторство и т.д.);

· Связь с таблицами стилей, специальными скриптами (к примеру, JavaScript);

3) < body> < /body> - содержимое веб-страницы – то, что должно отображаться браузером при просмотре данной страницы.

МЕТА-данные

Ограничивается тэгами < head> и < /head>. Содержит, мета-информацию, то есть дополнительные данные о странице, заголовок страницы, выносимый в заголовок окна браузера (в оконной графической системе) и ссылки.

Заголовок определяется тэгами < title> и < /title>, эго присутствие необязательно, но желательно.

Тэги < head> и < title> параметров не имеют. Эти теги могут отсутствовать.

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

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

Прежде чем начать регистрацию вашего сайта в поисковых системах и каталогах, его необходимо к этому подготовить. Иначе эффект от затраченных сил и времени будет минимальным. На данных примерах мы рассмотрим МЕТА-теги. Их роль не заметна при отображении странички. Это лишь команды для web-сервера или браузера, но команды важные, и правильное использование META-тегов дает вам некоторые преимущества.

Поисковые системы при регистрации страницы используют информацию, хранящуюся в Мета дескрипторах, которые помещаются между тегами заголовка < head> и < /head> в html страницах вашего сайта. Мета используются хотя и не всеми поисковыми системами, однако без них не обойтись. Элемент META определяет переменную=значение, описывающую некоторое свойство документа: информацию об авторе, список ключевых слов и т.п. Атрибут name - переменная, а content - ее значение. Запомните! Все META-теги не несут визуальной информации и должны располагаться только в секции < head> < /head> документа.

Необязательно использовать весь набор Мета, но необходимость базовых очевидна. К ним отнесем Title, Keywords, Description, Charset (многие сервера эту информацию сообщают в HTTP заголовке), Author.

Description - описание.

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

Для указания краткого описания используется:

< meta name=" description" content=" описание_страницы" >

Если хотите указать описание на русском, то надо указать атрибут lang

< meta name=" description" lang=" ru" content=" описание_страницы" >

Нужно включить все наиболее часто используемые в вашем сайте термины, фразы и их синонимы в тег " desctiptions".

Content-Language

Еще одно частое использование META-тега - это указание языка, на которой написана страничка. Например, для того, чтобы сказать браузеру, что ваша страничка содержит текст на русском языке, вы должны написать следующий код:

< META HTTP-EQUIV=" Content-Language" CONTENT=" ru" >

Charset - кодировка

Это указание кодировки, на которой написана страничка. Например, для того, чтобы сказать браузеру, что ваша страничка содержит текст в кодировке Win-1251, вы должны написать следующий код:

< meta http-equiv=" content-type" content=" text/html; charset=Windows-1251" >

Robots - робот.

Управление индексацией для поисковых серверов. Основные значения: ALL - индексировать все, NONE - не индексировать. Значение по умолчанию (в случае отсутствия данного тэга) - индексация всего:

< meta name=" robots" content=" ALL" >

Revisit - ревизия.

Указывается промежуток времени, через которое система заново проиндексирует документ, в данном примере это 7 дней.

< meta name=" revisit-after" content=" 7 days" >

Author - автор.

META-тег с параметром " author" служит для указания автора странички и учитывается некоторыми поисковыми системами. И вообще у каждой странички должен быть автор, так что имеет смысл пользоваться этим тегом. Также можно вписать e-mail и адрес вашего сайта, это полезно в тех случаях, когда документ оказывается вне сайта, легко можно определить, откуда он. Можно использовать Owner, указав в нем отдельно e-mail владельца.

< meta name=" author" content=" Vasa Pupkin" >

Если хотите указать имя на русском, то надо указать атрибут lang

< meta name=" author" lang=" ru" content=" Вася Пупкин" >

Похожий META-тег с параметром " generator" автоматически проставляется различными HTML-редакторами и содержит информацию о программе, в которой была сделана страничка. Смысла от этого тега немного, это чистая реклама. Некоторые авторы в его описании дублируют информацию META-тега " author".

Операции над текстом

В html имеется возможность производить операции над текстом. Опишем основные:

· < b> Текст< /b> - устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста;

· < i> Текст< /i> - устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста;

· < strong> Текст< /strong> - тег предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием;

· < s> Текст< /s> или < strike> Текст< /strike> - тег < STRIKE> отображает текст как перечеркнутый. Этот тег аналогичен тегу < S>, который имеет сокращенную форму записи подобно тегам < B>, < I> и < U>. В любом случае, теги < STRIKE> и < S> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили;

· < big> Текст< /big> - тег BIG увеличивает размер шрифта на единицу по сравнению с обычным текстом;

· < font> Текст< /font> - представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Параметры тега:

- color – устанавливает цвет текста;

- face - определяет гарнитуру шрифта;

- size – задает размер шрифта в условных единицах;

· < basefont> - предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега < FONT>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере < HEAD> или < BODY>, причем несколько раз. Это позволяет изменять вид шрифта для части документа. Закрывающий тег не требуется. Параметры тега могут быть такими же, как и для < font> < /font>. Пример использования:

 

< html>

< head>

< title> Тег BASEFONT< /title>

< /head>

< body>

< basefont face=" Arial, Helvetica, sans-serif" size=" 4" color=" maroon" >

< p> Добро пожаловать на мою страничку, которая оформлена с использование

тега BASEFONT< /p>

< /body>

< /html>

Листинг использования тега < basefont>

 

· < bdo> Текст< /bdo> - устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево. Например, к ним относится арабский язык;

· < blockquote> Текст< /blockquote> - предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу;

· < cite> Текст< /cite> - помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера < CITE> курсивом;

· < del> Текст< /del> - используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере < DEL> как перечеркнутый.

· < dfn> Текст< /dfn> - как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег < DFN> применяется для выделения таких терминов при их первом появлении в тексте. Браузеры отображают содержимое контейнера < DFN> с помощью курсивного начертания.

· < em> Текст< /em> - предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием;

· < nobr> Текст< /nobr> - уведомляет браузер отображать текст без переносов. Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега < NOBR> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит;

· < q> Текст< /q> - тег < Q> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках. Браузер Internet Explorer хотя и понимает тег < Q>, но кавычки не ставит. Остальные браузеры кавычки добавляют корректно;

· < small> Текст< /small> - тег < SMALL> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега < SMALL> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов < SMALL>, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1;

· < sub> Текст< /sub> - отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера;

· < sup> Текст< /sup> - отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

 

Списки в html

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

Рис. 4.Список в html (слева – результат, справа – листинг кода).

Пояснение к листингу:

1) Блок < ul> < /ul> является определяющим– в зоне его действия будут находиться пункты списка. В зависимости от параметра-содержимого тегов, тип маркера будет меняться. Существуют: маркированные, числовые, порядковые списки;

2) Блок < li> < /li> - является элементом списка. Между открывающим и закрывающим тегом находится содержимое элемента;

Свойства определяющих блоков:

1) < ul> < /ul> - создает маркированные списки дискового типа;

2) < ol> < /ol> - создает числовые списки порядкового типа;

3) < dl> < /dl> - создает логические списки для глоссариев и словарей (примечание: вместо < li > < /li> здесь будет использоваться схема: < DT> термин 1 < DD> определение 1 < DT> термин 2 < DD> определение 2).

 

Работа с изображениями

В html поддерживается возможность использования графики, изображений. Существует два способа внедрения:

1) Позиционирование изображения (помещение изображение в нужное место документа);

2) Использование изображения в качестве фона;

Разберем данные пункты:

1) Для того, чтобы позиционировать изображение в html, создадим тег в удобном для вас месте документа по схеме:

 

< img src=”url” alt=" text" height= “n1” width= “n2”

align=top|middle|bottom|texttop|absmiddle|baseline|absbottom

border= “n3 vspace=n4 hspace=n5 >

 

· Параметр src=” url” задает местонахождение вашего изображения в каталоге. Для этого вместо слова url используется ссылки (о них – в следующем разделе);

· alt – позволяет создавать подпись к рисунку (при наведении на изображение из курсора «выпадает» текст, заключенный в значение alt);

· height – задает высоту изображения, width – его длину

· align – осуществляет выравнивание изображения в зависимости от назначаемых параметров;

· border – позволяет применять границу в виде рамки изображению;

· vspace - позволяет установить размер в пикселях пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ; hspace – такая же функция, только применяется по вертикали;

Данные параметры не обязательны к применению, кроме src=”url”.

2) Для того, чтобы задать фоновый рисунок ко всей странице, блоковым элементам, в тегах необходимо записать параметр: backgrond=”url”; к примеру, для того, чтобы применить фоновое изображение для всего документа:

 

< body background=”url” >

 

Таблицы

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

· < table> ... < /table> - служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов < TR> и < TD>. Внутри < TABLE> допустимо использовать следующие элементы: < CAPTION>, < COL>, < COLGROUP>, < TBODY>, < TD>, < TFOOT>, < TH>, < THEAD> и < TR>. Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев; Параметры для тега:

· Align – задает выравнивание таблицы (значения: left | center | right);

· Background – задает фоновое изображение (значения: " URL" );

· Bgcolor – задает фоновый цвет (значения: «цвет»);

· Border – толщина рамки в пикселах (числовое значение);

· Bordercolor – цвет рамки (значения: «цвет»);

· Cellpadding - Отступ от рамки до содержимого ячейки (числовое значение);

· Cellspacing - Расстояние между ячейками (числовое значение);

· Cols - Число колонок в таблице (числовое значение);

· Height - Высота таблицы (числовое значение);

· Width - Ширина таблицы (числовое значение);

 

· < table> < tr> < th>...< /th> < /tr> < /table> - Тег < TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег < TH> должен размещаться внутри контейнера < TR>, который в свою очередь располагается внутри тега < TABLE>;

· < table> < tr>...< /tr> < /table> - служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега < TH> или < TD>;

· < table> < tr> < td>...< /td> < /tr> < /table> - Предназначен для создания одной ячейки таблицы. Тег < TD> должен размещаться внутри контейнера < TR>, который в свою очередь располагается внутри тега < TABLE>;

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

< html>

< head>

< title> Таблица< /title>

< /head>

< body>

< table width=" 100%" border=" 0" cellspacing=" 0" cellpadding=" 4" >

< tr align=" center" bgcolor=" #999999" >

< td colspan=" 3" style=" font-size: 160%; font-family: sans-serif" > Lorem

ipsum dolor sit amet...< /td>

< /tr>

< tr>

< td> < img src=" /images/logo.gif" alt=" " width=" 150" height=" 70"

border=" 0" style=" background: #CC9" > < /td>

< td align=" right" > < img src=" /images/title.gif" alt=" " width=" 70"

height=" 70" style=" background: #CF9" > < /td>

< td>

< a href=" lorem.html" > Lorem< /a> < Br>

< a href=" lorem.html" > Ipsum< /a> < Br>

< a href=" lorem.html" > Dolar< /a>

< /td>

< /tr>

< tr>

< td colspan=" 3" >

< table width=" 100%" border=" 0" cellpadding=" 0"

cellspacing=" 0" bgcolor=" #333333" >

< tr> < td> & nbsp; < /td> < /tr>

< /table>

< /td>

< /tr>

< /table>

 

< /body>

< /html>

Листинг использования таблицы

Формы

Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки информация из нее попадает к программе, работающей на сервере. Таким образом, пользователь может интерактивно взаимодействовать с Web-сервером через Internet.

Рис.4 Пример форм в html

Основные свойства:

< form action="..." > ... < /form> - устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

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

Для отправки формы на сервер используется кнопка Submit, то же самое можно добиться, если нажать клавишу < Enter> в пределах формы. Если кнопка Submit отсутствует в форме, клавиша < Enter> имитирует ее использование, но только в том случае, когда в форме имеется только один элемент < INPUT>. Если таких элементов два и более, нажатие на < Enter> не вызовет никакого результата.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега < FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега < INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид:

 

http: //www.htmlbook.ru/cgi-bin/handler.cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED& page=5

 

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (& ). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера < FORM> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов. Параметры для тега:

· action – Адрес CGI-программы или документа, которые обрабатывает данные формы (значения: " URL" );;

· enctype – MIME-тип информации формы;

· method – Метод протокола HTTP (значения get | post);

· name – Имя формы (значение – имя формы);

· target –Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат;

В листинге приведен пример использования форм:

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" >

< title> Тег FORM< /title>

< /head>

< body>

 

< form action=" /html/example/handler.php" >

< p> < b> Как по вашему мнению расшифровывается аббревиатура & quot; ОС& quot;? < /b> < /p>

< p> < input type=" radio" name=" answer" value=" a1" > Офицерский состав< Br>

< input type=" radio" name=" answer" value=" a2" > Операционная система< Br>

< input type=" radio" name=" answer" value=" a3" > Большой полосатый мух< /p>

< p> < input type=" submit" > < /p>

< /form>

 

< /body>

< /html>

Листинг использования форм

 

Рис.5 Результат в браузере

Значение параметра method не зависит от регистра. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET - Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ & ). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST - Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

· Определение элементов управления формы — тег < INPUT>

Данный тег используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.

· Атрибут TYPE=text. Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег < INPUT>, и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.

Ваше имя < INPUT NAME=" Name" SIZE=" 35" >

Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.

· Атрибут TYPE=checkbox. При создании форм часто требуется получить ответ пользователя на вопрос типа " Да/Нет". Для создания независимых кнопок в формах HTML используется тег < INPUT> с атрибутом TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег < INPUT> с атрибутом CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.

Россия< INPUT NAME=" Страна" TYPE=checkbox VALUE=" Россия" > %Страны СНГ< INPUT NAME=" Страна" TYPE=checkbox VALUE=" СНГ" >

В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег < INPUT> должен содержать атрибут CHECKED.

· Атрибут TYPE=radio В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег < INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге < INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.

 

Пол мужской< INPUT NAME=" Пол" TYPE=radio VALUE=" Мужской" > %Пол женский< INPUT NAME=" Пол" TYPE=radio VALUE=" Женский" >

· Атрибут TYPE=image В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег < INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он " обрабатывает" введенную в форму информацию. Когда форма использует атрибут image, тег < INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега < IMG>.

 

< BR> Выберите точку< INPUT TYPE=image NAME=point SRC=" image.gif" >

· Атрибут TYPE=password Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password (TYPE=password). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.

 

Подпись< INPUT NAME=" login" > %Пароль < INPUT TYPE=password NAME=" pass" >

· Атрибут TYPE=reset Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег < INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег < INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.

 

< INPUT TYPE=reset VALUE=" Очистить форму" >

· Атрибут TYPE=submit Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег < INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег < INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит значение переменной поля в вашей форме. Атрибут VALUE — указывает наименование кнопки Submit.

< BR> < INPUT TYPE=submit VALUE=" Отправить сообщение" > %

· Атрибут TYPE=hidden Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

 

· Создание многострочных областей ввода текста — тег < TEXTAREA>

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег < TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS.

· Атрибут COLS. Указывает (число символов) число колонок, содержащихся в текстовой области.

· Атрибут NAME. Определяет наименование поля.

· Атрибут ROWS. Задает количество видимых строк текстовой области.

 

< TEXTAREA NAME=тема COLS=38 ROWS=3> < /TEXTAREA>

 

· Использование списков в форме — тег < SELECT>

Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег < OPTION>. Тег < SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

· Атрибут MULTIPLE. Позволяет выбрать более чем одно наименование.

· Атрибут NAME. Определяет наименование объекта.

· Атрибут SIZE. Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список.

В форме может использоваться тег < OPTION> только внутри тега < SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

· Атрибут SELECTED. Используется для первоначального выбора значения элемента по умолчанию.

· Атрибут VALUE. Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега < OPTION> (открыть).

 

Выбор < SELECT NAME=" Выбор" > %< OPTION> Вариант 1 < /OPTION> %< OPTION> Вариант 2 < /OPTION> %< OPTION VALUE=" Вариант 3" > Вариант 3 < /OPTION> %< OPTION SELECTED> Вариант 4 < /OPTION> %< /SELECT>

Фреймы

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

Технология использования фреймов позволяет:

 

1) Увеличить скорость загрузки веб-страницы;

2) Сократить скорость обновления и перехода по ссылкам, на данной странице;

3) редактировать данные отдельно взятого элемента страницы, не изменяя свойств других ее элементов;

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

Фреймы бывают двух типов: обычные и встроенные внутрь HTML-документа.

123456Следующая ⇒

Поделиться: