1. Язык HTML

Создание Web-страниц

 

Цель: изучить язык гипертекстовой разметки (HyperText Markup Language),  освоив таким образом, Web-технологию, на основе которой построена одна из популярнейших услуг Internet - Всемирная паутина(World Wide Web). Получить практические навыки по созданию собственных информационных ресурсов.

 

 

Как создаются Web-страницы?

 

Для создания Web-страниц используется язык HTML (HyperText Markup Language — язык гипертекстовой разметки), определяющий набор специальных команд, на­зываемых тегами.

Тег – это специальная HTML-метка, предназначенная для того, чтобы дать указание Web-браузеру, как именно необходимо интерпретировать расположенный после него текст. Особые теги применяются для раз­мещения на Web-страницах графических изображений, аудио- и видеокли­пов и прочих так называемых внедренных объектов.

Web-страницы представляют собой текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе и содержат текст, который вы хотите поместить на страницы, только размеченный особым образом. Продемонстрируем это на следующем примере. На рисунке 1 представлена простейшая Web-страница, которая создана в обычном Блокноте. Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приве­денный ниже код и сохраните его в файле с расширением .html. После этого откройте полученный файл в Web-обозревателе, дважды щелкнув по нему мышью.

 

Рис. 1

 

 

Листинг кода Web-страницы:

 

<html>

<head>

<title>ПримерWeb-страницы</title >

</head>

<body>

<h1>Наша первая Web-страница</h1>

<p>Это простейшая Web-страничка, созданная в стандартном <i>Блокноте</i> и отображенная в <i>Microsoft Internet Explorer</i> </p>

</body>

</html>

 

Несмотря на ряд неизвестных слов, содержащихся в HTML-коде страницы, хорошо заметен текст, который отображен в окне Web-обозревателя (рис.1). Рассмотрим код HTML-страницы более подробно.

 

<h1>Наша первая Web-страница</h1 >

<p>

Это простейшая Web-страничка, созданная в стандартном <i>Блокноте</i> и отображенная в <i>Microsoft Internet Explorer</i>

</p>

 

Вы видите какие-то слова, заключенные в угловые скобки < >. Это и есть теги HTML. Они задают форматирование текста.

Скажем, строка <i>Блокноте</i> будет выведена курсивом, т. к. теги <i> и </i> задают кур­сивное начертание текста. Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег).

Это были теги физического форматирования текста, т. е. задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логиче­ского форматирования, которые позволяют разбить текст на отдельные логи­ческие единицы.

В нашем небольшом фрагменте это теги <p> и <h1> (и соответствующие им за­крывающие теги </p> и </h1>).

Они задают соответственно

<p></p>  - тексто­вый параграф и

<h1> </h1> - заголовок первого уровня.

При этом Web-обозреватель будет знать, что <h1>Наша первая страница</h1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логической единицы текста, а закрывающий — конец. Здесь мы говорили о так называемых парных тегах, состоящих из откры­вающего и закрывающего тега (тем не менее, о них говорят как об одном теге).

 

HTML определяет также набор одинарных тегов. Один из них — это тег перехода к новой строке <br>.

 

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

Парный тег <body>. . .</body> применяется для выделения тела Web-стра­ницы, т.е. той ее части, которая будет отображаться в окне Web-обо­зревателя.

Кроме тела, Web-страница также должна содержать HTML-заго­ловок, который обрамляется теговой парой <head>…</head> нем помещается служебная информация. (Не путайте HTML-заголовок и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя.

Название страницы помечается тегами <title>…</title>. Заметьте, что тег <title> вложен внутрь парного тега <head>. Такая вложенность тегов в HTML встречается на каждом шагу. При этом тег <head> называется родительским тегом или родителем тега <title>, а тег <title> — соответственно, дочерним тегом, или потомком тега <head>.

И если вы еще раз посмотрите на полный листинг кода нашей Web-страницы, то увидите, что весь HTML-код заключен внутрь парного тега <html>...</html>. Именно этим тегом начинается любая HTML-страничка. Следовательно, любой HTML-документ имеет следующую структуру.

 

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

 

<html>

<head> <title>…</title> </head>

<body>

</body>

</html>

 

Об­ратите внимание на порядок вложенности тегов - закрывающие теги идут всегда в обратном порядке, например:

<head> <title>  .  .  .  </title > </head>

 

Если же вы случайно допустите ошибку и поместите теги так:

<head> <title>  .  .  .  </head> </title >,

то Web-обозреватель может и не отобразить ваше творение.

 

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

С термином Web-сервер существует определенная путаница. Во-первых, так называют компьютер, подключенный к Сети по быстрому каналу и храня­щий на своих жестких дисках файлы Web-страниц. Во-вторых, так именует­ся программа, принимающая от Web-обозревателей (клиентов) запросы и выдающая им соответствующие файлы. Но чаще и компьютер и программу объединяют в единое целое и называют одним словом — Web-сервер. Так поступим и мы.

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

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

 

Web-документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 Information processing. Text and office systems. Standard Generalized Markup Language (SGML)”.

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

Приведем справочные таблицы по использованию тегов, (табл.1 и табл.2), которые позволят управлять внешним видом выводимого текста web-страницы.

 

Таблица 1. Основные теги языка HTML

 

Тег

Атрибуты

Назначение

<HTML> </HTML>

 

Обрамляет любой HTML-документ

<HEAD> </HEAD>

 

Обрамляет заголовок HTML-документа

<TITLE> </TITLE>

 

Устанавливает название HTML-документа, которое появится в строке заголовка браузера

<BASE HREF="URL">

 

Указывает базовый URL, относительно которого можно указывать другие URL данного документа

<BODY>  </BODY>

 

Обрамляет тело HTML-до­кумента, в котором содержится текст и прочие теги, выводимые в рабочем поле браузера

 

BACKGROUND="URL"

Фоновый рисунок. URL спе­цифицирует графический файл в формате GIF или JPEG

 

BGCOLOR= #RGB

Цвет фона

 

TEXT= #RGB

Цвет текста

 

LINK= #RGB

Цвет невыбранной ссылки

 

VLINK= #RGB

Цвет ссылки после ее акти­визации

 

ALINK= #RGB

Цвет ссылки в момент ак­тивизации

<!--          -->

 

Комментарий. Между этими символами может стоять любой текст, поясняющий HTML-страницу. Браузер иг­норирует комментарии, т.е. не выводит их

 

Таблица 2. Теги форматирования текста

 

Тег

Атрибуты

Назначение

<CENTER> </CENTER>

 

Выравнивание всех элемен­тов по центру

<LEFT> </LEFT>

 

Выравнивание всех элемен­тов влево

<RIGHT> </RIGHT>

 

Выравнивание всех элемен­тов вправо

<P> </P>

 

Обозначает начало нового абзаца

 

 

align=хххх

Используется для изменения выравнивания текста внутри абзаца. Параметр «хххх» принимает следующие значе­ния:

·  center — выравнивание по центру

·  left — текст влево

·  right — текст вправо

·  justify выравнивание по ширине абзаца

<BR>

 

Перенос текста на новую строку

n> </Нn>,

где n-цифра от 1 до 6

 

Обрамляет заголовок. Суще­ствует шесть стилей заго­ловков: от 6 (самый малень­кий) до 1 (самый крупный)

<b> </b>

 

Устанавливает жирный шрифт

<I> </I>

 

Устанавливает курсив

<U> </U>

 

Устанавливает подчеркивание текста

<TT> </TT>

 

Машинопись (шрифт фик­сированной ширины)

<pre> </pre>

 

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

<font> </font>

 

Устанавливает атрибуты   шрифта выводимого текста

 

FACE="Namel, Name2,…, NameN"

Указывает гарнитуру шрифта, которым требуется вы­вести текст. Можно через запятую указать несколько шрифтов

 

SIZE="X"

Относительный размер шрифта. За базовый прини­мается размер 3. Увеличение размера получается путем указания положительных це­лых чисел (например, SIZE=+5), уменьшение — от­рицательных (size=-5)

 

COLOR="#RGB"

Указание цвета выводимого текста

<Sup></sup>

 

Создает эффект верхнего индекса

<sub></sub>

 

смещение текста в нижний индекс

<OL>   </OL>

 

Обрамляет нумерованный список

<UL>   </UL>

 

Обрамляет маркированный список

<LI>   </LI>

 

Элемент нумерованного или маркированного списка

 

Цвета и цветовые триады

 

В атрибутах BGCOLOR, COLOR, TEXT любой цвет устанавливается, как комбинация красного, зеленого и синего (red, green, blue - RGB). Однако указывается не процент того или иного цвета, содержащегося в комбинации, а некое число от 0 до 255, которое характеризует процентное соотношение данного цвета в комбинации. Все числа указываются не в десятичном, а в шестнадцатеричном виде.

Шестнадцатеричное число, это число, составленное из десяти цифр (от 0 до 9) и шести первых литер латинского алфавита (A, B, C, D, E, F). Атрибут BGCOLOR устанавливает цвет фона документа, а атрибут TEXT – цвет текста. Например, установка белого цвета символов на синем фоне для всего HTML-документа будет реализована следующим образом:

<body bgcolor="#0000ff" text="white" >

 

В любом  месте документа цвет символов можно изменить с использованием тега <font>, например:

 

<font color="#ff0000">Красный шрифт</font>

или по другому:

 

<font color="red">Красный шрифт</font>

 

Следующий пример отображает буквы слова «текст» разными цветами:

 

<FONT size=8 color="blue"> <B>т </b></font>

<FONT size=7 color="orange">    е </font>

<FONT size=6 color="green">       к </font>

<FONT size=5 color="maroon">   с </font>

<FONT size=6 color="fuchsia">   т </font>

 

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

В таблице 3 представлены допустимые названия цветов.

 

Таблица 3. Названия и коды цветов

 

Русское название

Английское название

RGB-код

Аквамарин

aqua

#00FFFF

Белый

white

#FFFFFF

Желтый

yellow

#FFFF00

Зеленый

green

#008000

Золотой

gold

#FFD700

Индиго

indigo

#460080

Каштановый

maroon

#800000

Красный

red

#FF0000

Оливковый

olive

#808000

Оранжевый

orange

#FFA500

Пурпурный

purple

#800080

Светло-зеленый

lime

#00FF00

Серебристый

silver

#C0C0C0

Серый

gray

#808080

Сизый

teal

#008080

Синий

blue

#0000FF

Ультрамарин

navy

#000080

Фиолетовый

violet

#EE80EE

Фуксиновый

fuchsia

#FF00FF

Черный

black

#000000

ГИПЕРССЫЛКИ

Создание гипертекстовых ссылок

 

Гипертекстовые ссылки связывают разрозненные Web-страницы, выложенные на Web-серверах, в одну гигантскую сеть, «паутину WWW».

Гиперссылка состоит из двух частей: псевдокнопки и адресной части (уже известный нам URL). Псевдокнопка – это просто какой-либо текст или графическое изображение, по которому пользователь должен щелкнуть мышью.

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

Для создания гипертекстовой ссылки используется тег <A>  следующего формата:

 

 

<A href=”url”> Любой текст </A>

 

 

Если в качестве псевдокнопки необходимо использовать изображение, тогда тег, описывающий графический объект, следует обрамить тегом гиперссылки:

 

 

<A href=”index.htm”> <imf src=”home.gif” alt=”На главную страницу”> </A>

 

 

В этом примере приведена ссылка на главную страницу (index.htm) Web-сайта. Предполагается, что на диске имеется gif-файл с именем home.gif, в котором хранится некое изображение.

 

Виды гиперссылок

 

Гиперссылки можно разделить на абсолютные, относительные и внутренние. Они отличаются тем, как представлен адрес URL. Рассмотрим каждый тип подробнее.

 

Абсолютные ссылки


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

 

 

<А href=”http://www.ya.ru”>Поисковая система Яндекс </A>

 

 

создаст ссылку на страницу поисковой системы. А вот использование абсолютной ссылки, представленной ниже абсолютно неприемлемо:

 

 

<A href="file:///E:/eMIR/L-MIR/Part-1.doc"> Глава 1</A>

 

 

Здесь ссылка ведет на внутренний ресурс, расположенный на диске E, в каталоге eMIR. Именно такие ссылки пытаются создать визуальные редакторы. И на вашем локальном компьютере все будет работать правильно, но когда вы перенесете ваш документ на удаленный сервер, там уже не окажется ни диска E: ни каталога eMIR и мы получим «мертвую ссылку».

 

Относительные ссылки


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

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

 

 

<a href=”../index.htm”> На главную</a>     -  для перехода на главную страницу

 

<a href=”.. /info/doc/lec1.doc”> Лекция 1 </a> -  для перехода к первой лекции.

 

 

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

 

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


Внутренние ссылки используются для быстрого перемещения внутри документа. Это особенно актуально, если ваша страница длинная, состоит из нескольких разделов. Для таких перемещений вам, во-первых, нужно создать внутри html-документа «именованные якоря» - точки, куда нужно совершить прыжок. («Именованный якорь» - это дословный перевод «Named Anchor» – именно так называются эти точки в литературе.)

Они помечаются следующим фрагментом кода: <a name="metka"></a>. В качестве метки рекомендуется использовать короткий набор латинских букв или цифр. Этот фрагмент нужно поместить перед тем абзацем, куда нужно совершить переход.

Теперь, чтобы совершить переход в произвольном месте страницы, нам нужно добавить следующую ссылку:

 

 

<a href="#metka">ключевое слово или заголовок раздела </a>

 

 

Знак решетка, сообщит браузеру, что переход совершается внутри страницы.

 

Шаблон гиперссылки

 

·         для перехода к метке внутри текущей страницы:

<a href=”#Метка”> текст для щелчка</a>

 

·         к определенной части любого Web-документа:

<a href=http://Адрес/имя файла.html#Метка”> текст для щелчка</a>

 

Часто в сети Интернет можно встретить ссылки на электронный адрес человека. Для таких целей используется несколько измененный вид тега <a>:

 

 

<a href="mailto:user@server.ru ">текст ссылки</a>

 

 

Параметр mailto: является обязательным, он указывает на e-mail адресата. Также при необходимости через знак & указывается тема отправляемого сообщения. При щелчке на такую ссылку у пользователя загружается установленная почтовая программа.


ГРАФИКА НА WEB-СТРАНИЦЕ 

Форматы графических изображений

 

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

Для размещения на странице графического объекта, необходимо его предварительно подготовить. Для этого создаётся изображение в форматах GIF, JPG, JPEG или PNG. У каждого из них есть свои особенности:

GIF – это графический формат, поддерживающий до 256 цветов и сжатие по алгоритму LZW. Его рационально применять в простых графических изображениях и навигации. Закодировать же фотографию, имеющую много цветов и большие габариты, с приличным качеством под силу только профессионалам. Стандарт GIF89a вводит дополнительные усовершенствования: прозрачность, чересстрочечная (Interlaced) развёртка и анимация.

JPEG/JPG – это другой формат, специально разработан для передачи фотографий через сеть. Он содержит 24-битовую цветовую палитру и высокую (регулируемую при создании) степень сжатия (алгоритм JPG). Файлы данного формата могут быть сохранены с опцией «прогрессивный»: это значит, что изображение выводится на экран не сразу, а фрагментарно (через строку), по мере загрузки. Применяется для кодирования изображений любой сложности.

PNG –формат, позволяющий задавать параметры прозрачности (как в GIF) и производит сжатие без потери качества. Поддерживает 24-, 32-, 48- битовую цветную палитры, 8- и 16- битовую палитру серого и 8-битовую пользовательскую палитру. Так же присутствуют механизмы чересстрочечной развёртки и контроля целостности файла при передаче через сеть. Данный формат используется реже.

 

Атрибуты тега <img>

 

Встраивание любого из описанных типов изображений в уже созданную страницу осуществляется при помощи непарного тега <Img>. Он вставляется в том месте, где по смыслу должна располагаться иллюстрация.  За настройку внедренного изображения отвечает ряд атрибутов, указанных в приведенной  таблице:

 

Тег

Атрибуты

Назначение

<HR>

 

Горизонтальная линия

<IMG>

 

Расположение графики внутри документа, выводи­мого браузером

 

src="url"

Указывает адрес загружае­мого графического файла форматов GIF или JPEG

 

name="имя"

Имя изображения, которое может быть использовано в функциях языка JavaScript

 

align="расположение"

Расположение текста по от­ношению к изображению:

·        Наверху (top)

·        Посредине (middle)

·        Внизу (buttom)

 

alt="текст"

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

 

width=x

Ширина изображения в пикселях

 

height=x

Высота изображения в пикселях

 

border=x

Размер рамки вокруг изо­бражения. Установка border=o отключает рамку

 

Пример внедрения рисунка с именем foto_author.jpg. Фотография находится в подкаталоге images.

 

 

<img src="images/foto_author.jpg" border="0" width="300" heght="240" alt="Фото автора сайта">

 

 

Требования по применению графики

 

Несмотря на то, что в последнее время скорость каналов возросла, выделенные линии, DSL-модемы перестали быть экзотикой, осталась потребность в том, чтобы графика занимала как можно меньше места. Поэтому использование графики на странице должно соответствовать некоторым требованиям:

 

·  не создавайте больших фоновых изображений – это значительно понизит скорость загрузки HTML-страницы. Графика для web-страниц должна быть оптимизирована, максимальное качество изображения должно сохраняться при минимальном размере файла. Оптимизировать изображение можно с помощью программы Adobe Photoshop.

·  используйте графику только там, где это действительно необходимо;

· желательно, чтобы объём загружаемой страницы не превышал 80-100 Кб (сюда включен сам html-документ, все изображения и скрипты); запомните: чем больше объем Web-страницы, тем меньше пользователей дождутся загрузки вашего HTML-документа.


ТАБЛИЦЫ


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

 

Приведем пример шаблона для любой таблицы.

 

 

<table border=”1” cellpadding=“0” cellspacing=”0” width=100%>

<tr>   <! – Строка заголовка – >

<th>   </th>

<th>   </th>

<th>   </th>

</tr>

<tr>   <! – Строка 1 – >

<td>   </td>

<td>   </td>

<td>   </td>

</tr>

<tr>   <! – Строка 2 – >

<td>   </td>

<td>   </td>

<td>   </td>

</tr>

.

.

.

<tr>   <! – Строка n – >

<td>   </td>

<td>   </td>

<td>   </td>

</tr>

 

</table>

 

 

Таблица начинается и заканчивается парным тегом <table></table>.

В нашем случае – это видимая таблица, толщина ее границы равна одному пикселю (параметр border=”1”).

Каждая строка начинается и заканчивается парным тегом  <tr></tr>.

Каждая столбец начинается и заканчивается парным тегом <td></td>.

При построении таблиц часто используют комбинацию &nbsp; Комбинация символов nbsp – происходит от Non Break Space (неразрывный пробел). Эта комбинация символов – пробел. Обычные пробелы в языке HTML игнорируются. Если не вставить в ячейку никакой текстовой информации, то данная ячейка будет выбиваться на странице, у нее не будет границы.

 

В ячейку таблицы, обрамленную парой <td></td>, можно помещать: любой текст, любые изображения, списки, гиперссылки и так далее. Используя атрибуты bgcolor=”#цвет” и background=”файл”, которые можно добавить к тегу <table> или <tr>, или даже <td>, можно получить довольно сложное мозаичное изображение.

 

Систематизировать имеющиеся средства языка HTML для построения таблиц поможет таблица 1.

 

Таблица 1. Теги для создания таблиц

 

Тег

Атрибуты

Назначение

<table></table>

 

Создание таблицы

 

border=n

Ширина рамки

 

bgcolor="#rgb"

Цвет фона

 

cellpadding=n

Расстояние между границей каждой ячейки и ее содержимым

 

cellspacing=n

Промежуток между столбцами

 

bordercolor="#rgb"

Цвет рамки

 

background="url"

Фоновое изображение

<caption> </caption>

 

Заголовок таблицы

 

align=buttom

Помещает заголовок под таблицей

<th> </th>

 

Заголовок столбца

<tr> </tr>

 

Строка таблицы

<td> </td>

 

Ячейка строки таблицы

 

width=n% или width=n

Общая ширина табли­цы  может быть ука­зана как в процентах, так и в пикселях

 

align={значение1}

Выравнивание текста в ячейке по го ризон­тали. Значение1 может быть равным одному из трех: CENTER, LEFT или RIGHT.

 

valign={значение2}

Выравнивание текста в ячейке по вертикали. Значение2 может быть равным: TOP, MIDDLE или BOTTOM.

 

bgcolor="#rgb"

Цвет фона

 

bordercolor="#rgb"

Цвет рамки

 

background="url"

Фоновое изображение


ФОРМЫ

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

Форма начинается с тега <form>, а заканчивается - </form>. Этот тег имеет обязательные атрибуты:

§         action – указывает действие, которое будет произведено над введенными данными.

§         method – способ посылки данных серверу.

 

В атрибуте action чаще всего указывается URL размещенного на сервере т.н. сценария-обработчика получаемых данных (CGI). Такие сценарии обычно пишут на языках PHP, Perl, Java опытные программисты. Но с помощью атрибута action можно перенаправить введенные данные на собственный почтовый ящик. Оформить это можно следующим образом: action=”mailto:электронный адрес”

 

Атрибут method может принимать два значения:

§         method=”get”

§         method=”post”

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

Теги для описания элементов формы приведены в таблице 1

 

Таблица 1. Формы

 

Тег

Атрибуты

Назначение

<form> </form>

 

Задает начало и конец формы

 

name={Имя}

Имя формы

 

action={Обработка}

Способ обработки послан­ных серверу данных. Для посылки данных на e-mail этот атрибут должен иметь вид: "mailto:{адрес}"

 

method={Метод}

Способ, которым данные посылаются серверу

<input>

 

Тег, описывающий диало­говые элементы формы типа полей ввода и кнопок различ­ного вида

 

type="{тип}"

Этот атрибут специфициру­ет элемент, выводимый тегом <input> следующим образом:

text — строка ввода

password — строка вво­да пароля

radio — кнопка с зави­симой фиксацией

checkbox — радиокнопка

submit — кнопка "Вы­полнить"

reset — кнопка "Вос­становить"

hidden — скрытое поле

 

name="{имя}"

Имя элемента, по которому он может быть обработан средствами языка JavaScript

 

value={значение}

Конкретное значение эле­мента

 

size="{ширина}"

Ширина (в символах) для строк ввода

 

Maxlength=

"{макс. ширина}"

Максимальное количество символов, которые могут быть введены в данном текстовом поле

<select> </select>

 

Задает начало и конец рас­крывающегося списка

 

name="{имя}"

Имя списка

 

multiple

Наличие этого атрибута де­лает возможным множест­венный выбор из списка

<option> </option>

 

Описывает элемент списка

 

selected

Этот необязательный атри­бут специфицирует перво­начально активный элемент

<textarea>

</textarea>

 

Описывает поле для ввода большого текстового массива

 

name="имя"

Имя элемента

 

rows=X

Высота поля (в строках)

 

cols=X

Ширина поля (в символах)

 

Теперь рассмотрим пример формы (рис.1), которую можно использовать для сбора данных о посетителях сайта. После ввода данные посылаются на некий гипотетический адрес yyyy@mail.ru.

 

Листинг кода html-страницы с формой

 

<html><head><title> Формы </title></head>

<body bgcolor="#C0C0C0">

<table border="0" bgcolor="pink">

 

<form action="mailto:yyyy@mail.ru"  method="post">

<tr><td align="left" valign="middle">Имя: </td>

        <td> <input type="text" size="25"> </td>

<tr><td align="left" valign="middle">Фамилия: </td>

        <td> < input type="text" size="25"> </td>

<tr><td align="left" valign="middle">Ваш E-mail: </td>

           <td><input type="text" size="25"></td>

<tr><td>Пол: </td>

           <td><input type="radio" name="sex" value="male" > М

                  <input type="radio"  name="sex"  value=" female" > Ж

           </td>

<tr><td>Адрес</td>

          <td><select name="adress">

                        <option selected>Абакан

                       <option>Новосибирск

                       <option>другой

                  </select>

           </td>

<tr><td align="left" valign="top">Сообщение: </td>

           <td><textarea cols="30" rows="3" >Введите сообщение</textarea></td>

<tr><td align="bottom"><input  type="submit"  value="Отослать"></td>

           <td><input type="reset" value="Сброс"></td>

</form>

 

</table>

</body>

</html>

 

 

Рис. 1. Форма для сбора данных о посетителях сайта


МЕТАТЕГИ

Метатеги никак не влияют на внешний вид вашей страницы в браузере, но, тем не менее, они важны. Все эти теги располагаются в описательной части Интернет-страницы (внутри блока <head> … </head>). Рассмотрим их подробней.

 

Заголовок страницы

 

<title>Заголовок страницы</title>

Все, что вы поместите между тегами <title> … </title>, окажется в заголовке окна браузера. Но данный заголовок задается не для человека, а, прежде всего, для поисковых роботов. Заходя на ваш сайт по этому заголовку, они будут индексировать, то есть запоминать в своих базах данных информацию, о чем данная страница. Поэтому давайте вашим страницам осмысленные названия.

 

Кодировка страницы

 

<МЕТА http-equiv="Content-Type" content="text/html"; charset="windows-1251">

Для кодирования символов русского языка существует несколько кодовых таблиц. Самые распространенные русские кодировки в сети Интернет – windows-1251 и koi-8, а еще есть Mac, ISO, DOS, Unicode. Проблема заключается в том, что посетители часто об этом не подозревают, и, открыв страницу с бессмысленным набором символов, они не выбирают команду меню Вид/Кодировка/название кодировки, а навсегда уходят от вас. Поместив в метатеги информацию о кодировке вашей страницы (параметр charset=” ”), вы поможете браузеру посетителя вашего сайта правильно отобразить станицу на экране.

 

Ключевые слова

 

<МЕТА name="Keywords" content="ключевые слова вашей страницы">

Значение параметра content=”” предназначено для поискового робота. Вы должны написать те ключевые слова, которые характеризуют содержимое вашей страницы. Количество слов неограниченно и поэтому на некоторых сайтах можно увидеть десятки строк таких слов. Предположим, ваш сайт посвящен компьютерным играм, в таком случае смело помещайте в кавычки название игры, а также все, что относится к данной игре. Каждое слово робот поместит в свою базу данных и когда человек наберет в Яндексе или любой другой поисковой системе название вашей игры, он получит ссылку на ваш сайт.

 

Описание содержимого страницы

 

<МЕТА name="Description" content="Краткое описание страницы">

Текст, который вы напишете в данном метатеге, первым прочтет поисковый робот. Но после, вместе со ссылкой на ваш сайт Яндекс (Rambler, Google и т.д.) будет отображать именно эти два–три предложения. От того, насколько толково будет написана главная мысль, будет зависеть, захочет ли человек щелкнуть на ссылку и заглянуть к вам.

Comments