Найти: на:
   Англо-Русский словарь

Введение в учебник HTML, немного истории.

Историческая справка

Практически с появлением первых компьютеров возникла проблема передачи информации между ними. И способы были найдены - это различные носители и кабельный способ. Были написаны программы, позволяющие передавать и получать данные и, практически сразу, возникла вторая проблема - проблема совместимости, т.е. как заставить два и более компьютера, соединенных кабелем, работать в локальной сети. В 1999 году мировая общественность отметила 30-ти летие Intrnet. Официальным днем рождения сети Intrnet считается 2 января 1969 года, когда Управление перспективных исследований Министерства обороны США ARPA (Advanced Research Project Agency) начало работу над проектом связи оборонных компьютеров.

И только много позже - в 1989 году выпускник Оксфордского университета, бакалавр в области физики - сотрудник Европейского центра ядерных исследований (CERN) Тим Бернес-Ли разработал и всерьез приступил к созданию информационной службы World Wide Web. Он написал приложение клиент/сервер ( браузер ). В основу всей системы легло понятие гипертекста - т.е. множества отдельных текстов, имеющих ссылки друг на друга. Для работы с этими текстами был создан специальный протокол HTTP - Hyper Text Transfer Protocol были обозначены основные элементы языка разметки HTML. Эта технология дала огромный толчок в развитии сети и сеть стала действительно интернациональной сетью.

Стандартизация языка HTML, усилия W3C

Многие коммерческие компании подхватили эту инициативу и стали выпускать свои браузеры - бродилки и к ним свои собственные расширения языка HTML. В 1994 году был образован Консорциум W3C, он был призван, навести порядок в области языка HTML, разработав стандарты необходимые для дальнейшего развития World Wide Web. В 1996 году Консорциум W3C объявил о сотрудничестве с лидерами рынка для установления стандартов совместимости программного обеспечения. Была предложена версия HTML 3.2, которая стала компромиссным решением - попыткой примирить Microsoft и Netscape и объединить их оригинальные решения в одно целое.

Успех Консорциума W3C оказался спорным, т.к. компании продолжили придумывать новые расширения к языку HTML и внедрили их поддержку в свои браузеры. Гиганты рынка постоянно пеняют на Консорциум W3C из-за того, что он является своеобразным тормозом в развитии HTML, ввиду отсутствия давления на него со стороны пользователей и не спешит принять некоторые их расширения, в то время когда многие WEB-разработчики давно и успешно их применяют на своих страницах. С помощью версии HTML 4,0 Консорциум W3C предпринял очередную попытку установить стандарты.

На сегодняшний день перед WEB-мастерами стоит дилемма - использовать чистый HTML и достигнуть при этом максимальной читаемости и посещаемости, или пользоваться расширениями и нововведениями, в ущерб посещаемости создавать интересные эффекты. Для достижения универсальности WEB-разработчики стали разрабатывать свои страницы в двух вариантах и предлагать посетителям право выбора в зависимости от того, каким браузером тот пользуется. Но в связи с предпринятыми мерами отдела маркетинга фирмы Microsoft, а их браузер Microsoft Internet Explorer теперь бесплатно входит в комплектацию оперативной системы как составная часть Windows '98, становится ясно - что предпочтение их расширениям WEB-мастерами будет отдаваться все чаще и чаще (по некоторым данным их уже сейчас более 80% ! ). Хотя существует такая прослойка нейтральных пользователей, которые по тем или иным соображениям пользуются браузерами третьих фирм-производителей.

Агрессивная маркетинговая политика компании Microsoft не ограничилась только этим одним ходом. Руководство компании объявило, что все будущие версии операционной системы Windows будут использовать язык HTML в качестве фундамента интерфейса пользователя. Еще в четвертых поколениях их браузеров Microsoft обогнала Netscape по количеству поддерживаемых земных языков 98 против 10 ! В планы Microsoft входит также внедрение поддержки интерактивных переговоров и рабочих групп. Тем временем Консорциум W3C объявил о разработке нового языка XML, который возможно в будущем заменит HTML, если он окажется эффективнее и удобнее, а так же будет решено -как быть с теми миллионами уже существующих в Интернете страниц, написанных с использованием HTML.

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

World Wide Web стремительно развивается, программное обеспечение для сети устаревает и обновляется в виде всевозможных заплаток и дополнений, а с ними развивается и сам язык HTML. Язык HTML находит применение все чаще в областях, где раньше не применялся, он перестает быть только лишь исключительно языком описания Web-страниц. Microsoft уже в операционную систему Windows'98 внедрила интеграцию с World Wide Web, что сильно меняет взаимодействие пользователя с операционной системой. Пользователь, работающий в локальных, становящихся все более популярными intranet-сетях, теперь имеет возможность получать доступ к сетевой информации, используя браузер, а не диспетчер файлов, поскольку WEB-браузер может отображать не только документы, поддерживающие HTML, например - содержимое папок или таблицы Excel.

Более того - поддержка таких технологий Internet, как сценарии, потоковая загрузка аудио-видео, Java в Windows'98 встроена в саму операционную систему. Пользовательский интерфейс теперь по желанию может быть настроен так, что все ярлыки станут ссылками, переходы по ним могут осуществляться одним щелчком, рабочий стол и папки могут быть представлены в виде WEB-страниц с возможностью корректировать код и тем самым настраивать их внешний вид. Внешний вид папки может быть настроен при помощи редактора шаблонов или ручками отредактировать файлы Folder.htt и Webview.css при помощи Notepad.

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

Стиль работы меняется, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо-независимый язык. Новые технологии применяются практически везде и довольно скоро пространство World Wide Web перестанет быть достоянием лишь пользователей настольных PC, уже сейчас некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп, или на монохромные дисплеи различных организаторов-пейджеров и пр.

Пути дальнейшего развития

Уже в 1999 году в мире объем продаж персональных настольных компьютеров упал примерно на 40%, когда продажи всевозможных носимых и карманных портативных устройств стремительно пошли вверх. В этот сектор рынка естественно обратила свои взоры и Microsoft. Возникает сам собой вопрос - на что особенно необходимо обратить внимание при изучении языка сегодня, чтобы быть во всеоружии уже в недалеком будущем.

В 1997 году Консорциум W3C опубликовал спецификацию языка HTML 4,0, в которой указано какие из элементов устарели и не рекомендуются к дальнейшему применению ( APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE и U ), а так же новые элементы и атрибуты (ABBR, ACRONYM, BDO, BUTTON, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD и Q ),которые предлагается использовать в дальнейшем.

При этом Консорциум W3C обозначил тенденцию развития языка HTML все более в сторону логического форматирования содержимого. Была дана возможность идентификации практически любого элемента или группы элементов по имени, были описаны основные атрибуты для событий. Однозначно было указанно на платформо-независимость языка HTML, другими словами было подчеркнуто, что HTML не является языком визуальной верстки текстов, а является языком логической разметки.

Почти все атрибуты, определяющие представление документа HTML (цвета, выравнивание, шрифты, графика и т.д.) являются нежелательными, взамен рекомендуется использовать таблицы стилей и классы. Атрибуты id и class позволяют авторам назначать элементам информацию об имени и классе для таблиц стилей, ссылок, скриптов, объявления объектов, общей обработки документа и т.д., а так же ожидается, что задачу представления таблиц в ближайшем будущем возьмут на себя таблицы стилей.

HTML 4.0 поддерживает более обширный набор дескрипторов устройств, так что авторы могут писать таблицы стилей в зависимости от устройств. Многие элементы теперь имеют атрибуты для событий, которые могут объединяться со скриптами и при наступлении события выполняется скрипт (например, при загрузке документа, при щелчке мыши и т.д.), это легло в основу повышения интерактивности документов, дало возможность пользователям динамически изменять вид и содержание документов.

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

Основные понятия

Итак гипертекст это текст, в котором имеютя ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста. Документы, размеченные при помощи этого языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково , благодаря тому, что "понимают" и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

Существует множество простых и сложных программ для написания страниц HTML. В своей основе все они делятся на две категории: программы автоматизирующие вставку тэгов, т.е. редактирующие исходный код и программы, работающие по методу WYSIWYG (What you see is what you get) - что видишь, то и получишь, когда WEB-мастер редактирует визуализированный конечный продукт, не видя исходного кода. Помимо специальных HTML редакторов, не требующих особого знания синтаксиса языка, написание документа, возможно практически всеми стандартными текстовыми редакторами и процессорами, написанными для любых платформ.

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

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

Еще раз остановимся на том, из каких основных этапов состоит процесс создания документа HTML ручками, не прибегая к специализированным приложениям:

  • Набор содержимого в любом из текстовых редакторов (например Notepad) и сохранение обычного текстового файла.
  • Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html (делается это все в том же Notepad).
  • Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML.
  • Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.

Для того, чтобы в последствии изменить любой из созданных файлов, достаточно открыть его при помощи того же Notepad откорректировать и сохранить изменения. Браузер Internet Explorer позволяет делать прямо в нем самом, для этого необходимо в меню Вид выбрать просмотр В виде HTML, или кликнуть правой кнопкой мыши и выбрать тот же пункт меню. Для того, чтобы увидеть изменения в документе достаточно в меню Вид выбрать обновить, либо кликнуть в панели управления браузера на значке .

Объявление <!DOCTYPE>

Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически). Он сообщает серверу WEB способ обработки документа и то, какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется браузерами. Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL" >
Здесь текст определяет версию HTML , а URL позволяет браузерам пользователей загрузить DTD например:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Ниже описаны некоторые версии HTML

  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
    "    http://www.w3.org/TR/REC-html40/strict.dtd"> Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">     Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"
    "http://www.w3.org/TR/REC-html40/frameset.dtd">     Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.

Поскольку язык HTML развился из стандартного обобщенного языка описания документов SGML, являясь его производной, созданной для разметки текстовых документов, то этим и объясняется необходимость задания типа документа. На языке SGML может быть создано приложение для разметки текста, но для описания функциональных особенностей каждого элемента этого приложения разработчику необходимо создать комментарии или специальную документацию, так как сам язык SGML формально может лишь сообщить где может встречаться тот или иной элемент, но не его свойства. Документы, в которых могут встречаться те или иные элементы, были отнесены к различным типам документов (document type). И теперь если возникает необходимость описать элементы разметки документа - достаточно выбрать стандартное определение типа документа - DTD (Document Type Definition).

Ниже для примера приведена выдержка из DTD, описывающая правила задания абзацев текста в документе:
<! ELEMENT P - 0 ( %text ) * >
<! ATTLIST P
       align (left|center|right) #IMPLIED>
Отсюда следует, что абзацы текста необходимо заключать в тэги <P> и </P>, причем закрывающий тэг принимает значение "0", следовательно, может быть опущен как необязательный, т.е. наличие в исходном коде начального тэга <P> подразумевает автоматическое завершение предыдущего абзаца. Содержимым абзаца может быть текст любого объема. Атрибутом абзаца является его выравнивание по правому, левому краям или по центру.

Определение границ документа с помощью элемента <HTML>

Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ. Как и <!DOCTYPE> тэги <HTML> и </HTML> - не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код.

Синтаксис: <HTML> текст и прочие дескрипторы </HTML>
А уже непосредственно документ, обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову - <HEAD></HEAD> и тело - <BODY></BODY>

 

Общая схема исходного кода документа HTML

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
служебные дескрипторы
</HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>

Элемент <HEAD>

Область, обозначаемая тэгами <HEAD> и </HEAD> служит только для формирования общей структуры документа, задавая его глобальные свойства. Информация находящаяся в этом разделе документа является служебной и необходима программе браузеру пользователя. Она допускает вложение между дескрипторами следующих элементов: <TITLE>,<BASE>,<ISINDEX>,<LINK>,<META>,<STYLE>.

Создание титула документа с помощью элемента <TITLE>

При помощи данного дескриптора создается краткое однострочное название страницы, которое выводится в заголовке окна браузера, рядом с названием самого браузера. Если титул опускается разработчиком страницы, браузер попытается сгенерировать его из названия файла. Рекомендуется делать длину титула минимальной и одновременно с этим информативной. Синтаксис: <TITLE> текст </TITLE>

Разрешение относительных ссылок с помощью элемента <BASE>

Данный элемент автоматически задаёт URL для относительных ссылок документа, которые по умолчанию указывают на тот же сервер, где расположена сама страница. Однако этот дескриптор позволяет разрешать также ссылки относительно других каталогов и серверов. Элемент <BASE> имеет один лишь атрибут HREF и не имеет конечного тега.
Синтаксис: <BASE HREF="протокол://имя сервера/путь">

Здесь протокол соответствует схеме извлечения данных Internet, например, HTTP, a имя сервера соответствует имени или IP-адресу сервера, например, www.microsoft.com, путь определяет расположение ресурса в иерархии каталогов предыдущего сервера. Путь является необязательным компонентом указателя URL. Если протокол и имя сервера будут опущены, то указатель по умолчанию будет относиться к текущему серверу. Это очень полезный элемент он избавляет разработчика от необходимости вносить множественные коррективы в ссылках исходного кода документа, например, при размещении копии документа на другом сервере. Достаточно лишь вставить в заголовок копии элемент <BASE> с именем прежнего сервера и тогда целый узел будет отзеркален лишь копией одного файла, а ссылки будут адресоваться по прежнему адресу.

Обеспечение поиска при помощи элемента <ISINDEX>

Элемент <ISINDEX> используется во время проведения интерактивного поиска на Web странице. Этот элемент вставляется в документ, сгенерированный сценарием CGI, и предоставляет пользователю сформулировать критерии поиска. При этом любой введённый в приглашении текст склеивается с URL самого документа и пересылается сценарию CGI для обработки в форме URL?слово1+слово2+...+словоN. Это стандартный синтаксис для возврата значений сценариям CGI, согласно которому знак вопроса соответствует началу строки данных, а каждый плюс соответствует пробелу. Дескриптор внедряется в документы исключительно ради сценариев CGI, для предоставления пользователю возможности поиска по заданным словам. Он поддерживает атрибуты : prompt который позволяет изменять текст приглашения и action , последний указывает сценарий или программу, которой будет передан критерий поиска.
Синтаксис: <ISINDEX prompt="строка" action="сценарий">
Где строка и задаёт текст приглашения длиной не более 35 символов.

Взаимосвязь между документами с помощью элемента <LINK>

Справедливости ради, надо отметить, что этот элемент используется довольно редко, хотя и появился он в самой первой версии языка HTML. Этот дескриптор можно использовать для создания в документе панелей инструментов и меню, для определения последовательности печати файлов HTML и для связывания таких ресурсов, как таблицы стилей и сценарии. С дескриптором <LINK> используется ряд атрибутов :

  • href
    Указатель URL связанного документа.
  • rel
    Атрибут указывает как связаны документы с заданным атрибутом href . Ему могут быть присвоены значения Present, History, Made, Annotation и Precede .
    Например:     <LINK rel=Annotation href="annotations.html">
    означает, что все аннотации для текущего документа расположены в файле annotations.html.
  • rev
    Атрибут во многом похож на rel ему могут быть присвоены те же значения.
    Например: <LINK rev=Annotation href="master.html">
    означает, что текущий документ содержит аннотации к файлу master.html.
  • title
    Атрибут относится к href и задает название документа, на который ссылается href .Естественно, что значение атрибута должно соответствовать значению дескриптора <TITLE>.
  • name
    Позволяет назначить ссылке на фрагмент текущего документа более описательное имя.
  • methods
    Позволяет указать метод извлечения документа, например, FTP, Gopher и т. д.
  • lang
    Позволяет указать информацию о языке документа, например: ru, en, fr.
  • target
    Позволяет указать информацию о целевом фрейме.
  • charset
    Позволяет указать кодировки символов документа.

В настоящее время элемент <LINK> используется только для ссылок на внешние таблицы стилей.
Например: <LINK rel=stylesheet href="style.css" type="text/css">
,где style.css файл, который содержит набор дескрипторов <style> и любые другие определения таблицы стилей.

Предоставление дополнительной информации о документе с помощью <META>

Элемент предоставляет дополнительные сведения о способе обработки документа, он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки. Элемент поддерживает парные атрибуты, первый из которых name определяет тип данных, а второй content - содержание. Атрибут name используется приложением-клиентом (броузером)для получения дополнительной информации о документе. Его часто заменяют элементом http-equiv , который используется сервером для создания дополнительных полей при выполнении запроса. В этом случае тэг <META> с атрибутом будет включен в заголовок ответа браузера.

Другими словами атрибут name используется с целью предоставления сведений о документе, которые могут пригодиться при его поиске, а элемент http-equiv поручает выполнение каких либо действий серверу .
Например: <META HTTP-EQUIV="Window-target" CONTENT="_top">

Использование элемента http-equiv со значением "refresh" позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом, что незаменимо при создании страниц, где публикуются непрерывно меняющиеся данные (скажем курсы валют или акций). Значение элемента content в этом случае означает промежуток между обновлениями в секундах, так если оно равно нулевому значению - страница будет обновляться непрерывно.

  • <META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/index.html">
    Перезагрузка документа.
  • <META HTTP-EQUIV="Expires" content="Дата">
    Дата, обозначающая срок годности документа, при его значении равном "0" документ будет подгружаться не из кэша а с сервера.
  • <META HTTP-EQUIV="Reply-to" content="Имя@Адрес">
    Адрес электронной почты .
  • <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
    Описание типа и характеристик документа.
  • <META HTTP-EQUIV="Content-language" content="en">
    Описание языка документа.
  • <META HTTP-EQUIV="Cache-Control" content="no-cache">
    Контроль за кэшированием документа.

Может принимать значения:

    • no-store - не сохраняется.
    • no-cache - не сохраняется в кэш.
    • Public - доступен для любого кэширования.
    • Private - кэшируется в частных кэшах.
  • <META HTTP-EQUIV="Window-target" content="_top">
    Определяет способ появления новых окон браузера.
  • <META HTTP-EQUIV="pragma" content="no-cache">
    Контроль за кэшированием документа.
  • <META HTTP-EQUIV="Set-Cookie" content="NAME=имя;EXPIRES=дата; DOMAIN=имя домена;PATH=путь;SECURE">
    • имя - любая строка без запятых, пробелов и переходов на след.стр. (обязательный парaметр)
    • дата - дата истечения срока хранения в формате: Sun, 25-Feb-01 12:00:01 GMT , если не задан, то cookie не сохраняется (необязательный парaметр)
    • имя домена - домен для которого действительно значения cookie , если не задан, то тот сервер, где лежит сайт (необязательный парaметр)
    • путь - путь к документам домена, для которого действительно значения cookie, если не задан, тогда тот каталог, где лежит сайт (необязательный парaметр)
    • SECURE -указывается только тогда, когда применяется защищенный режим SSL, если не задан, тогда информация передается в обычном режиме (необязательный парaметр)

Установка Cookie для браузера в том случае, когда надо сохранить информацию в компьютере посетителя и при необходимости к ней обратиться.
Работает так:
Браузер, встретив такую конструкцию, записывает файл .txt с данными ввиде имя/значение и хранит в кэше, в следующий раз он сверяет все свои cookie на предмет полного совпадения, и если находит, то отсылает серверу как HTTP заголовок. Конечно, в настройках cookie должны быть разрешены, каждый cookie не может превышать 4 kB (если больше, то отсекается кусок вначале записи) всего их может храниться до 300, причем с одного сервера не больше 20 (если больше, то последние пишутся поверх первых)

  • <META name="Author" content="Имя автора">
    Имя автора документа.
  • <META name="Keywords" lang="ru" content="Слово1,слово2,слово3 ...">
    Набор ключевых слов для поиска.
  • <META name="Title" content="Название">
    Название станицы.
  • <META name="Robots" content="index,nofollow">
    Указание индексации поисковыми роботами данного документа

Может принимать значения:

    • ALL - индексировать всё.
    • INDEX - индексировать эту страницу.
    • FOLLOW - индексировать ссылки на этой странице.
    • NONE - не индексировать, игнорировать полностью.
    • NOINDEX - не индексировать, игнорировать эту страницу.
    • NOFOLLOW - не индексировать ссылки на этой странице.
  • <META name="Description" content="Содержание">
    Краткое однострочное описание содержания документа.
  • <META name="Document-state" content="Dynamic">
    Определяет единовременную либо постоянную индексацию документа поисковыми системами.

Может принимать значения:

    • Static - индексировать единожды.
    • Dynamic - индексировать многократно.
  • <META name="Generator" content="Название">
    Название приложения, в котором был создан документ.
  • <META name="Copyright" content="Условия">
    Условия копирования и распространения документа.

 

Для автоматизации написания META-тэгов воспользуйтесь формой-генератором.

 

Определение стиля страницы с помощью <STYLE>

Применение дескрипторов <STYLE> и </STYLE> само по себе является отдельным способом форматирования документа, когда текст форматируется целиком автоматически. Между дескрипторами <STYLE> и </STYLE> указывается описание стилей документа HTML, определяющих свойства элементов, классов, идентификаторов и общих стилей. Внутри дескриптора <STYLE> должны находиться атрибуты:

  • TYPE
    Атрибут описывает тип таблиц стилей.
    Например: <STYLE TYPE="text/javascript">
  • media
    Позволяет указать информацию о том под какое из устройств вывода стилизован документ, например:
    • screen
      Указывает на экраны компьютеров, не разделенные на страницы.
    • tty
      Указывает на носители с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
    • tv
      Указывает на устройства типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
    • projection
      Указывает на всевозможные проекторы.
    • handheld
      Указывает на карманные устройства (небольшой экран, монохромный, растровая графика, ограниченный диапазон).
    • print
      Указывает на страничные, непрозрачные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати.
    • braille
      Указывает на тактильные устройства с алфавитом Бройля (для незрячих).
    • aural
      Указывает на синтезаторы речи.
    • all
      Указывает на все устройства используется в случае, если разработчик предоставляет различные варианты с возможностью выбора.

Элемент <BODY>

Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов.

Вложенные атрибуты элемента <BODY>

  • BACKGROUND
    Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Файл с изображением должен быть сохранен в формате GIF или JPEG.
    Синтаксис: <BODY BACKGROUND="(URL)(путь) имя файла">
    В данном случае файл с изображением фона лучше размещать в том же каталоге, что и сам файл, тогда (URL) и (путь) указывать не нужно.
  • BGCOLOR
    Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала, соответствующего названию цвета.
    Синтаксис    : <BODY BGCOLOR="#ff0000"> или <BODY BGCOLOR="RED">
  • TEXT
    Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным.
    Синтаксис    : <BODY TEXT=" цвет ">
  • LINK
    Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим.
    Синтаксис:     <BODY LINK="цвет" >
  • ALINK
    Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам.
    Синтаксис:     <BODY ALINK="цвет" >
  • VLINK
    Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам.
    Синтаксис:     <BODY VLINK="цвет" >
  • BGPROPERTIES
    Этот атрибут задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее скроллинг изображения.
    Синтаксис:     <BODY BGPROPERTIES="fixed" >
  • TOPMARGIN
    Этот атрибут задает верхнюю границу страницы в пикселях.
    Синтаксис:     <BODY TOPMARGIN=число >
  • BOTTOMMARGIN
    Этот атрибут задает нижнюю границу страницы в пикселах.
    Синтаксис:     <BODY BOTTOMMARGIN=число >
  • LEFTMARGIN
    Этот атрибут задает границу страницы в пикселях слева.
    Синтаксис:     <BODY LEFTMARGIN=число >
  • RIGHTMARGIN
    Этот атрибут задает границу страницы в пикселях справа.
    Синтаксис:     <BODY RIGHTMARGIN=число >

Управление цветом

Шестнадцатеричные значения цвета RGB

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

Во втором же случае за основу принимается черный цвет экрана монитора, каждая ячейка которого, светится одним из трех цветов: red-красный, green-зеленый и blue-синий. Тогда при полном отсутствии какого-либо свечения мы получаем чистый черный цвет экрана, а любой из требуемых цветов задается соотношением каждого из трех цветов. В этом случае мы получим RGB-способ передачи цвета. Основные цвета могут иметь значения от 0 до 255, или от 0% до 100%, либо могут быть представлены в виде шестнадцатеричного значения. На рисунке ниже можно увидеть результаты смешения основных цветов.

Шестнадцатеричная система счисления, в отличии от десятичной в своём ряду цифр имеет не десять знаков, а шестнадцать - отсюда и название. Соответственно не повторяющихся вариантов сочетаний из двух цифр может быть только - 256, для продолжения ряда цифр после 9 используются буквы от A до F, следовательно, ряд будет выглядеть так - 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

В этом случае цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из двух цифр. Первое число определяет интенсивность красного цвета, среднее- зеленого, последнее- синего цвета. Все числа могут принимать значения в диапазоне от 00 до FF (от 0 до 255 ). Например: зеленый цвет задается как #00FF00, красный - как #FF0000, синий - как #0000FF, белый - как #FFFFFF, полное отсутствие цвета или черный задается как #000000.

Примеры некоторых шестнадцатеричных значений цветов RGB: градации красного, синего и зеленого цветов.

вид

код

вид

код

вид

код

вид

код

вид

код

вид

код

 

#010000

 

#800000

 

#000100

 

#008000

 

#000001

 

#000080

 

#100000

 

#900000

 

#001000

 

#009000

 

#000010

 

#000090

 

#200000

 

#A00000

 

#002000

 

#00A000

 

#000020

 

#0000A0

 

#300000

 

#B00000

 

#003000

 

#00B000

 

#000030

 

#0000B0

 

#400000

 

#C00000

 

#004000

 

#00C000

 

#000040

 

#0000C0

 

#500000

 

#D00000

 

#005000

 

#00D000

 

#000050

 

#0000D0

 

#600000

 

#E00000

 

#006000

 

#00E000

 

#000060

 

#0000E0

 

#700000

 

#FF0000

 

#007000

 

#00FF00

 

#000070

 

#0000FF

Задание цвета при помощи строчных литералов

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

вид

имя

вид

имя

вид

имя

вид

имя

 

White

 

Red

 

Orange

 

Yellow

 

Green

 

Blue

 

Purple

 

Black

 

Aliceblue

 

Antiquewhite

 

Aqua

 

Aquamarine

 

Azure

 

Beige

 

Bisque

 

Blanchedalmond

 

Blueviolet

 

Brown

 

Burlywood

 

Cadetblue

 

Chartreuse

 

Chocolate

 

Coral

 

Cornflowerblue

 

Cornsilk

 

Crimson

 

Cyan

 

Darkblue

 

Darkcyan

 

Darkgoldenrod

 

Darkgray

 

Darkgreen

 

Darkkhaki

 

Darkmagenta

 

Darkolivegreen

 

Darkorange

 

Darkorchid

 

Darkred

 

Darksalmon

 

Darkseagreen

 

Darkslateblue

 

Darkslategray

 

Darkturquoise

 

Darkviolet

 

Deeppink

 

Deepskyblue

 

Dimgray

 

Dodgerblue

 

Firebrick

 

Floralwhite

 

Forestgreen

 

Fuschia

 

Gainsboro

 

Ghostwhite

 

Gold

 

Goldenrod

 

Gray

 

Greenyellow

 

Honeydew

 

Hotpink

 

Indianred

 

Indigo

 

Ivory

 

Khaki

 

Lavender

 

Lavenderblush

 

Lemonchiffon

 

Lightblue

 

Lightcoral

 

Lightcyan

 

Lightcoldenrodyellow

 

Lightgreen

 

Lightgray

 

Lightpink

 

Lightsalmon

 

Lightseagreen

 

Lightskyblue

 

Lightslategray

 

Lightsteelblue

 

Lightyellow

 

Lime

 

Limegreen

 

Linen

 

Magenta

 

Maroon

 

Mediumaquamarine

 

Mediumblue

 

Mediumorchid

 

Mediumpurple

 

Mediumseagreen

 

Mediumslateblue

 

Mediumspringgreen

 

Mediumturquoise

 

Mediumvioletred

 

Midnightblue

 

Mintcream

 

Mistyrose

 

Navajowhite

 

Navy

 

Oldlace

 

Olive

 

Olivedrab

 

Orangered

 

Orchid

 

Palegoldenrod

 

Palegreen

 

Paleturquoise

 

Palevioletred

 

Papayawhip

 

Peachpuff

 

Peru

 

Pink

 

Plum

 

Powderblue

 

Rosybrown

 

Royalblue

 

Saddlebrown

 

Seagreen

 

Seashell

 

Sienna

 

Silver

 

Skyblue

 

Slateblue

 

Slategray

 

Snow

 

Springgreen

 

Steelblue

 

Tan

 

Teal

 

Thistle

 

Tomato

 

Turquoise

 

Violet

 

Wheat

 

Whitesmoke

 

Yellowgreen

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

Использование безопасной палитры цветов

К сожалению, на разных платформах, с разными системными настройками, правильная передача цвета является проблемой. Все дело в том, что браузер всегда старается подстроить цветовую палитру документа под системные настройки и возможности монитора, путем самостоятельного смешивания цветов и их замещения. Как результат - иногда пользователь видит не совсем то, что хотел ему показать web-мастер. Выход из этой ситуации был найден в применении палитры, каждый цвет которой гарантированно передается одинаково всеми браузерами на разных платформах. Это так называемая гарантированная палитра, еще ее называют безопасной палитрой. В эту палитру входят цвета, цветовые составляющие которых, принимают следующие значения:00,33,66,99, CC,FF, во всех возможных 216 их сочетаниях.

вид

код

вид

код

вид

код

вид

код

вид

код

вид

код

 

FFFFFF

 

CCCCCC

 

999999

 

666666

 

333333

 

000000

 

CCCC66

 

CCCC33

 

999966

 

999933

 

999900

 

666600

 

CCFF66

 

CCFF00

 

CCFF33

 

CCCC99

 

666633

 

333300

 

99FF00

 

99FF33

 

99CC66

 

99CC00

 

99CC33

 

669900

 

CCFF99

 

99FF99

 

66CC00

 

66CC33

 

669933

 

336600

 

66FF00

 

66FF33

 

33FF00

 

33CC00

 

339900

 

009900

 

33FF33

 

00FF33

 

00FF00

 

00CC00

 

33CC33

 

00CC33

 

CCFFCC

 

99CC99

 

66CC66

 

669966

 

336633

 

003300

 

99FF99

 

66FF66

 

33FF66

 

00FF66

 

339933

 

006600

 

66FF99

 

33FF99

 

00FF99

 

33CC66

 

00CC66

 

009933

 

66CC99

 

33CC99

 

00CC99

 

339966

 

009966

 

006633

 

99FFCC

 

66FFCC

 

33FFCC

 

00FFCC

 

33CCCC

 

009999

 

CCFFFF

 

99FFFF

 

66FFFF

 

33FFFF

 

00FFFF

 

00CCCC

 

99CCCC

 

66CCCC

 

339999

 

669999

 

006666

 

336666

 

66CCFF

 

33CCFF

 

00CCFF

 

3399CC

 

0099CC

 

003333

 

99CCFF

 

3399FF

 

0099FF

 

6699CC

 

336699

 

006699

 

0066FF

 

3366CC

 

0066CC

 

0033FF

 

003399

 

003366

 

6699FF

 

3366FF

 

0000FF

 

0000CC

 

0033CC

 

000033

 

3333FF

 

3300FF

 

3300CC

 

3333CC

 

000099

 

000066

 

9999CC

 

6666FF

 

6666CC

 

666699

 

333399

 

333366

 

CCCCFF

 

9999FF

 

6666FF

 

6600FF

 

330099

 

330066

 

9966CC

 

9966FF

 

6600CC

 

6633CC

 

663399

 

330033

 

CC99FF

 

CC66FF

 

9933FF

 

9900FF

 

660099

 

663366

 

CC66FF

 

CC33FF

 

CC00FF

 

9900CC

 

996699

 

660066

 

CC99CC

 

CC66CC

 

CC33CC

 

CC00CC

 

990099

 

993399

 

FFCCFF

 

FF99FF

 

FF66FF

 

FF33FF

 

FF00FF

 

CC3399

 

FF66CC

 

FF00CC

 

FF33CC

 

CC6699

 

CC0099

 

990066

 

FF99CC

 

FF3399

 

FF0099

 

CC0066

 

993366

 

660033

 

FF6699

 

FF3399

 

FF0066

 

CC3366

 

996666

 

663333

 

CC9999

 

CC6666

 

CC3333

 

CC0000

 

990033

 

330000

 

FFCCCC

 

FF9999

 

FF6666

 

FF3333

 

FF0000

 

CC0033

 

FF6633

 

CC3300

 

FF3300

 

FF0000

 

CC0000

 

990000

 

FFCC99

 

FFCC66

 

FF6600

 

CC6633

 

993300

 

660000

 

FF9900

 

FF9933

 

CC9966

 

CC6600

 

996633

 

663300

 

FFCC66

 

FFCC00

 

FFCC33

 

CC9900

 

CC9933

 

996600

 

FFFFCC

 

FFFF99

 

FFFF66

 

FFFF33

 

FFFF00

 

CCCC00

 

 

Структурное форматирование.

 

Комментарии <COMMENT >

Элемент позволяет скрыть от пользователя комментарии к исходному коду, а так же для сокрытия сценариев Java Script от браузеров, которые не поддерживают их.

Синтаксис: <COMMENT> Текст комментария </COMMENT>

Полностью аналогичен старому варианту задания комментариев

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

 

Шесть уровней заголовков <Hn>

Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> назначается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right.

Синтаксис: <Hn align=отступ> Текст заголовка </Hn>

 

Разделительные линии <HR>

Элемент <HR> используется для проведения горизонтальной черты в документе, он может иметь атрибуты : color, задающий цвет линии, size высота в пикселах width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега.

Синтаксис: <HR align="center" size=n width=n color="цвет">

 

Элемент <P>

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align.

Синтаксис: <P align=отступ> Текст абзаца </P>

 

Элемент <BR>

Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear.

Синтаксис: <BR clear=обтекание> Текст

Может быть отменен тэгами <NOBR> и </NOBR>

 

Элемент <WBR>

Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку.

Синтаксис: <WBR >Текст

 

Элемент <PRE>

Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT>

Синтаксис: <PRE width=число символов >...текст.. .</PRE>

 

Элемент <DIV>

Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.

Синтаксис: <DIV align=отступ> Текст раздела </DIV>

 

Элемент <CENTER>

Элемент <CENTER> текст </CENTER> полностью идентичен конструкции

Синтаксис: <DIV align=center> Текст раздела </DIV>

 

Элемент <ADDRESS>

Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона.

Синтаксис: < ADDRESS>контактная информация </ADDRESS>

 

Элемент <BLOCKQUOTE>

Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста.

Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>

 

Элемент <SPAN>

Элемент <SPAN> позволяет выделить некоторое количество текста для последующего его форматирования, но в отличие от <DIV> не начинает новый абзац.

Синтаксис: <SPAN> Текст </SPAN>

 

Организация в списки.

 

Элемент <OL>

Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Синтаксис: <OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL>

Пример:

 

элемент списка

элемент списка

 

Элемент <UL>

Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle,square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Синтаксис: <UL type=circle > <LI> элемент списка <LI> элемент списка </UL>

Пример:

 

элемент списка

элемент списка

 

Элемент <DL>

Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение.

Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL>

Пример:

 

термин 1

определение 1

термин 2

определение 2

 

Элемент <MENU>

Элемент <MENU> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.

Синтаксис: <MENU><LI> элемент списка <LI> элемент списка </MENU>

Пример:

 

элемент списка

элемент списка

 

Элемент <DIR>

Элемент <DIR> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.

Синтаксис: <DIR><LI> элемент списка <LI> элемент списка </DIR>

Пример:

 

элемент списка

элемент списка

 

Форматирование символов.

 

Элемент <EM>

Элемент <EM> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <EM> Текст </EM>

Пример: Текст выделенный тэгами <EM> и </EM>

 

Элемент <CODE>

Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PRE>.

Синтаксис: <CODE> листинг кода </CODE>

Пример: Текст выделенный тэгами <CODE> и </CODE>

 

Элемент <KBD>

Элемент <KBD> используется с целью выделения диалога пользователя с компьютером .

Синтаксис: <KBD> Ввод с клавиатуры </KBD>

Пример: Текст выделенный тэгами <KBD> и </KBD>

 

Элемент <VAR>

Элемент <VAR> используется с целью дополнительного выделения переменных в коде совместно с элементом <CODE> .

Синтаксис: <VAR> Переменная </VAR>

Пример: Текст выделенный тэгами <VAR> и </VAR>

 

Элемент <SAMP>

Элемент <SAMP> используется с целью выделения диалога пользователя с компьютером .

Синтаксис: <SAMP> Системное сообщение компьютера </SAMP>

Пример: Текст выделенный тэгами <SAMP> и </SAMP>

 

Элемент <DFN>

Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев.

Синтаксис: <DFN> Текст </DFN>

Пример: Текст выделенный тэгами <DFN> и </DFN>

 

Элемент <CITE>

Элемент <CITE> используется с целью обозначения источника информации, из которого взята цитата.

Синтаксис: <CITE> Текст </CITE>

Пример: Текст выделенный тэгами <CITE> и </CITE>

 

Элемент <STRONG>

Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <STRONG> Текст </STRONG>

Пример: Текст выделенный тэгами <STRONG> и </STRONG>

 

Элемент <I>

Элемент <I> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <I> Текст </I>

Пример: Текст выделенный тэгами <I> и </I>

 

Элемент <B>

Элемент <B> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <B> Текст </B>

Пример: Текст выделенный тэгами <B> и </B>

 

Элемент <U>

Элемент <U> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <U> Текст </U>

Пример: Текст выделенный тэгами <U> и </U>

 

Элемент <STRIKE>

Элемент <STRIKE> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <STRIKE> Текст </STRIKE>

Пример: Текст выделенный тэгами <STRIKE> и </STRIKE>

 

Элемент <TT>

Элемент <TT> используется с целью выделения особым телетайпным шрифтом слова или текста.

Синтаксис: <TT> Текст </TT>

Пример: Текст выделенный тэгами <TT> и </TT>

 

Элемент <SUP>

Элемент <SUP> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <SUP> Текст </SUP>

Пример: Текст выделенный тэгами <SUP> и </SUP>

 

Элемент <SUB>

Элемент <SUB> используется с целью выделения особым шрифтом слова или текста.

Синтаксис: <SUB> Текст </SUB>

Пример: Текст выделенный тэгами <SUB> и </SUB>

 

Элемент <BIG>

Элемент <BIG> используется с целью выделения особым шрифтом слова или текста относительно основного текста.

Синтаксис: <BIG> Текст </BIG>

Пример: Текст выделенный тэгами <BIG> и </BIG>

 

Элемент <SMALL>

Элемент <SMALL> используется с целью выделения особым шрифтом слова или текста относительно основного текста.

Синтаксис: <SMALL> Текст </SMALL>

Пример: Текст выделенный тэгами <SMALL> и </SMALL>

 

Элемент <BLINK>

Элемент <BLINK> используется с целью выделения особым шрифтом слова или текста относительно основного текста.

Синтаксис: <BLINK> Текст </BLINK>

Пример: Текст выделенный тэгами <BLINK> и </BLINK>

 

Элемент <FONT>

Элемент <FONT> используется с целью выделения особым шрифтом слова или текста. С ним применяются два атрибута size и color. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию.

Синтаксис: <FONT size=n color="цвет"> Текст </FONT>

 

или <FONT face=имя color="цвет"> Текст </FONT>

 

Элемент <BASEFONT>

Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию.

Синтаксис: <BASEFONT size=n>

 

Элемент <ABBR>

Элемент <ABBR> используется с целью логического выделения слова, обозначающего аббревиатуру, например ФСБ, FBI , HTML , WWW, MTV

Синтаксис: <ABBR>ФСБ</ABBR>

 

Элемент <ACRONYM>

Элемент <ACRONYM> используется с целью логического выделения слова, обозначающего акроним, например GmBH, Ltd., и т.д., и т.п.,

Синтаксис: <ACRONYM>Ltd.</ACRONYM>

 

Элемент <INS>

Элемент <INS> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был вставлен после опубликования документа.

Синтаксис: <INS>текст</INS>

Пример: Текст выделенный тэгами <INS> и </INS>

 

Элемент <DEL>

Элемент <DEL> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был удален после опубликования документа.

Синтаксис: <DEL>текст</DEL>

Пример: Текст выделенный тэгами <DEL> и </DEL>

 

Элемент <Q>

Элемент <Q> используется с целью логического выделения краткой цитаты, встроенной в текст. Поддерживает атрибут lang и в зависимости от особенностей языка соответственно помечает цитату.

Синтаксис: <Q lang="ru">текст</Q>

 

Элемент <A>

Элемент <A> используется с целью создания ссылок на другие элементы документа, или даже на другие документы, такие ссылки являют собой основную причину ошеломляющей популярности пространства World Wide Web , где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом URL последних. Элемент выполняет два действия: задает имя ссылки и задает ссылку на имя. Имя ссылки браузер автоматически выделяет другим цветом и подчеркивает.

  • name
    Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка.
    Синтаксис:     <A name=имя> необязательный текст </A >
  • href
    Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на URL и имя файла.
    Синтаксис:     <A href="URL"> текст, для щелчка </A >

    или же в тексте: <A href="#имя"> текст для щелчка </a>
  • methods
    Атрибут указывает метод извлечения документа, например, FTP, Gopher и т. д.
    Синтаксис:     <A methods="название"> необязательный текст </A >
  • frame
    Атрибут используется для указания названия кадра, в котором должен быть визуализирован целевой документ.
    Синтаксис:     <A frame="имя фрейма"> необязательный текст </A >
  • id
    Для организации ссылки используется атрибут href, который задает адрес ссылки. Атрибут id идентичен атрибуту name с той разницей, что он может вставляться в другие тэги, отличные от тэга <A>
    Например:     <P id="имя абзаца"> далее в тексте.. .<A href="# имя абзаца"> Ссылка</A >
  • title
    Для визуализации подсказки ссылки используется атрибут title, который задает название ссылки
    Синтаксис:     <A title=" имя ссылки"> Ссылка</A >
    Пример: ссылка наверх
  • accesskey
    Атрибут используется для указания горячей клавиши, при нажатии на которую осуществляется переход по ссылке
    Синтаксис:     <A accesskey=" имя клавиши"> Ссылка</A >
    Пример: ссылка наверх - нажмите ALT+u

 

Примеры использования элемента <A>

Ниже приведены примеры ссылок на различные файлы по разным протоколам:

  • Ссылка на HTML файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/page1.html">Пример</a>
    Пример
  • Ссылка на ZIP файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.zip">Пример</a>
    Пример
  • Ссылка на TXT файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.txt">Пример</a>
    Пример
  • Ссылка на EXE файл по протоколу FTP
    <a href="ftp://ftp.sausage.com/pub/hotdog/hotdog6/hotdog6install.exe">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto
    <a href="mailto:name@domen.ru">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы
    <a href="mailto:name@domen.ru?Subject=E-mail to Web-master">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы и текста послания
    <a href="mailto:name@domen.ru?Subject=Teмa &BODY=Тeкст послания">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы, текста послания, а также адресов для отправки копии письма и скрытой копии
    <a href="mailto:name@domen.ru?Subject=Teмa &BODY=Тeкст послания&cc=name@domen.ru&bcc=name@domen.ru">Пример</a>
    Пример
  • Ссылка на MPG файл по протоколу HTTP, в случае если броузер сам не умеет открывать данные файлы, то запускается независимая программа, умеющая это делать.
    <a href="http://www.arcus.lv/dimas/roma.mpg">Пример</a>
    Пример ( 204 kB ).
  • Ссылка на группу новостей,при помощи протокола news
    <a href="news:comp.infosystems.www.announce">Пример</a>
    Пример

Последняя ссылка будет работать только, если Ваш провайдер поддерживает доступ к телеконференциям.

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

Элемент <TABLE>

Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.

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

По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C - таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты:

  • bgcolor
    Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.
    <TABLE bgcolor=цвет>
  • background
    Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.
    <TABLE background=URL файла изображения>
  • bordercolor
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLЕ border=число bordercolor=цвет >
  • bordercolorlight
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLE border=число bordercolorlight=цвет>
  • bordercolordark
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLE border=число bordercolordark=цвет>
  • align
    Этот атрибут задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .
    <TABLE align= способ >
  • width
    Этот атрибут задает ширину таблицы в пикселях или процентах от всего окна.
    <TABLE width=число или %>
  • border
    Этот атрибут задает ширину внешнего обрамления таблицы в пикселях.
    <TABLE border=число >
  • cellspacing
    Этот атрибут задает ширину внутреннего обрамления в пикселях.
    <TABLE сellspacing=число >
  • сellpadding
    Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселях.
    <TABLE сellpadding=число >
  • summary
    Этот необязательный атрибут задает краткое описание таблицы для некоторых браузеров.
    <TABLE summary=описание >
  • rules
    Этот атрибут задает линии между ячейками.
    <TABLE rules=all >
    • none
      Нет линий, значение используется по умолчанию.
    • groups
      Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.
    • rows
      Линии отображаются только между строками.
    • cols
      Линии отображаются только между столбцами.
    • all
      Линии отображаются между строками и столбцами.
  • frame
    Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
    <TABLE frame=void> Возможные значения:
    • void
      Сторон нет. Это значение используется по умолчанию.
    • above
      Только верхняя часть.
    • below
      Только нижняя часть.
    • hsides
      Только верхняя и нижняя часть.
    • vsides
      Только левая и правая части.
    • lhs
      Только левая часть.
    • rhs
      Только права часть.
    • box
      Все четыре части.
    • border
      Все четыре части.
  • id
    Этот атрибут задает имя для ссылки.
    <TABLE id=имя>

Элемент <COL>

Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты:

  • width
    Этот атрибут задает ширину ячеек в колонке.
    <COL width=число>
  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <СOL bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <СOL align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <СOL valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <COL id=имя>

Элемент <COLGROUP>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты:

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <COLGROUP bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <COLGROUP align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <COLGROUP valign=значение>
  • span
    Этот атрибут задает количество колонок в группе.
    <COLGROUP span=число>
  • width
    Этот атрибут задает ширину ячеек в колонках.
    <COLGROUP width=число>
  • id
    Этот атрибут задает имя для ссылки.
    <COLGROUP id=имя>

Элемент <THEAD>

Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки".
<THEAD ><TR ><TD >...<TD >...</THEAD>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <THEAD bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <THEAD align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <THEAD valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <THEAD id=имя>

Элемент <TBODY>

Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы.
<TBODY ><TR ><TD >...<TD >...</TBODY>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TBODY bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TBODY align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TBODY valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TBODY id=    имя>

Элемент <TFOOT>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки".
<TFOOT ><TR ><TD >...<TD >...</THEAD>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TFOOT bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TFOOT align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TFOOT valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TFOOT id=имя>

Начало строки: элемент <TR>

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

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TR bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TR align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TR valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TR id=имя>

Заголовок таблицы: элемент <CAPTION>

Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id
- имя для ссылки.
<CAPTION> текст </CAPTION>

Ячейки заголовка: элемент <TH>

Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id
- имя для ссылки.
<TH атрибуты > текст заголовка

Ячейки с данными <TD>

Элемент <TD> определяет ячейку с данными

  • bgcolor
    Этот атрибут задает цвет фона ячейки.
    <TD bgcolor= цвет >
  • width
    Этот атрибут задает ширину ячейки в пикселях или %.
    <TD width= число или % >
  • height
    Этот атрибут задает высоту ячейки в пикселях.
    <TD height=значение>
  • rowspan
    Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
    <TD rowspan=количество строк >
  • colspan
    Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
    <TD colspan=количество колонок >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TD align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TD valign=значение>
  • nowrap
    Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект &nbsp;
  • id
    Этот атрибут задает имя для ссылки.
    <TD id=имя>

Исходные коды некоторых таблиц.

Таблица с общим заголовком и заголовками в колонках.

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR><TD>Ячейка 1 <TD>Ячейка 2
<TR><TD>Ячейка 3 <TD>Ячейка 4
</TABLE>

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

Заголовок 1

Заголовок 2

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Таблица с общим заголовком и заголовками в колонках, и в строках.

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="white">
<TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR<TH bgcolor="white">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="white">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</table>

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

 

Заголовок 1

Заголовок 2

Заголовок 3

Ячейка 1

Ячейка 2

Заголовок 4

Ячейка 3

Ячейка 4

Таблица с объединенными ячейками в колонках, и в строках.

<TABLE border=4 cellspacing=0 >
<CAPTION>Заголовок таблицы </caption>
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TR><TD rowspan=3 bgcolor="white">Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=2 bgcolor="white" align="center">Ячейка 5
</table>

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

Заголовок 1

Заголовок 2

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Более сложное объединение ячеек в колонках, и в строках.

<TABLE border=4 cellspacing=0 >
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TD bgcolor="white">Заголовок 3
<TR><TD rowspan=4 colspan=2 bgcolor="white">Ячейка 1
<TR><TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=3 bgcolor="white" align="center">Ячейка 5
</table>

Заголовок 1

Заголовок 2

Заголовок 3

Ячейка 1

 

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Таблица в ячейке таблицы.

<TABLE border=4 cellspacing=0>
<TR><TD bgcolor="white">Ячейка 1
<TD>
<TABLE border=2>
<TR><TD>Ячейка 2-1
<TD>Ячейка 2-2
<TR><TD>Ячейка 3-2
<TD>Ячейка 4-2
</table>
<TR><TD bgcolor="white">Ячейка 3-1
<TD bgcolor="white">Ячейка 4-1
</table>

Ячейка 1

Ячейка 2-1

Ячейка 2-2

Ячейка 3-2

Ячейка 4-2

Ячейка 3-1

Ячейка 4-1

Таблица, состоящая из одной ячейки.

<TABLE border=4 cellspacing=3 cellpadding=10>
<TR><TD bgcolor="white">Одна ячейка
</table>

Одна ячейка

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

<TABLE bgcolor="#0000ff" border="1"
align="center" rules="all" frame="box">
<caption align="top"> Заголовок таблицы </caption>
<COL width="100" bgcolor="#ffffff" align="center">
<COLGROUP span="3" width="50">
<CAPTION align="top">CAPTION</CAPTION>
<THEAD bgcolor="#ff0000">
<TR><TD><TD><TD><TD>
</THEAD>
<TFOOT bgcolor="aqua">
<TR><TD><TD><TD><TD>
</TFOOT>
<TBODY>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
</TBODY>
</TABLE>

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

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Создание форм HTML

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:

Элемент <FORM>.

Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты:

  • method
    Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
  • action
    Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
  • enctype
    Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Подробнее:

Синтаксис:

<FORM action="mailto:имя@домен.ru?subject="Comment from Home Page" method="post" enctype="text/plain">
<br> Комментарии:<br>
<TEXTAREA type="text" NAME="комментарий" ROWS=5 COLS=50></TEXTAREA> <br>
Имя: <br>
<INPUT type="text" NAME="имя" SIZE="57"> <br>
E-mail: <br>
<INPUT type="text" name="e-mail" size="52" maxlength="360"> <br>
<INPUT type="reset" VALUE=Сброс >
<INPUT type=SUBMIT VALUE=Послать>
</FORM>

Пример:


Комментарии:

Имя:

E-mail:

Элемент <INPUT>.

Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:

  • TEXT
    Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
    • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
    • size. Задаёт максимально допустимую длину поля в символах.
    • value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">
Пример:

  • PASSWORD
    Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
    • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
    • size. Задаёт максимально допустимую длину поля в символах.
    • value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
Пример:

  • HIDDEN
    Еще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных.
    Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
    <INPUT type="HIDDEN" name="file" value="anyfile.html">
  • CHECKBOX
    Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
    • checked. Задаёт начальный статус флажка по умолчанию.
    • value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>
Пример:

  • RADIO
    Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.
    Пример:

Visa <INPUT type="radio" name="payment_type" value="visa">
Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>

Visa Mastercard American Express

  • SUBMIT
    Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
    Синтаксис:

<FORM method="get" или "post" action="mailto:name@domen.ru" >
<INPUT type="submit" value="послать"></FORM>


Пример:

  • RESET
    Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.

    Синтаксис: <INPUT type="reset" value="очистка">
    Пример:
  • IMAGE
    Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
    • src. Задаёт URL файла с изображением.
    • align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
    • name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.


Синтаксис: <INPUT type="image" src="knopka.gif">

Пример:

  • BUTTON
    Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
    Синтаксис: <INPUT type="button"value="кнопка">
    Пример:

  • FILE
    Создает управляющий элемент выбор файла.
    Синтаксис: <INPUT type="file">
    Пример:

  • ACCESSKEY
    Задает кнопку, при нажатии которой происходит обработка поля.
    Синтаксис: <INPUT accesskey="a">
    Пример: нажмите Alt+a:

  • ID
    Задает имя для ссылки.
    Синтаксис: <INPUT id="имя">
  • SIZE
    Задает ширину элемента в пикселях.
    Синтаксис: <INPUT size="число">
  • DISABLED
    Отключает возможность изменять содержимое поля или положение кнопки.
    Синтаксис:     <INPUT disabled">
    Пример:

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:

  • name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
  • rows. Задаёт высоту области в строках.
  • cols. Задаёт ширину области в символах.

Синтаксис:

<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM>

Пример:

Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:

  • name. Задаёт имя.
  • size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
  • multiple. Задаёт возможность одновременного выбора нескольких значений.

Элемент <OPTIONS>.

Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT>
Синтаксис: <OPTION value="n" selected>значение
имеет атрибуты:

  • selected. Задаёт изначально выбранное слово.
  • value. Задаёт значение выбранного слова для сценария.

Пример:

<H3>Выбери нужное</H3>
<SELECT multiple>
<OPTION value=a>Первый</OPTION>
<OPTION value=b>Второй</OPTION>
<OPTION value=c>Третий</OPTION>
<OPTION value=d>Четвертый</OPTION>
</SELECT>

 

Выбери нужное



Пример:

<SELECT size=1>
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</SELECT>


 

Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

<SELECT size=1>
<OPTGROUP label="Первая группа">
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
</OPTGROUP>
<OPTGROUP label="Вторая группа">
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</OPTGROUP>
</SELECT>

 

Элемент <ISINDEX>.

Элемент <ISINDEX>Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.

Пример: <ISINDEX prompt=" строка для ввода критерия поиска"> Допустим что на текущей странице задан базовый URL при помощи элемента
<BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен.

Строка для ввода критерия поиска

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста.
Синтаксис: <BUTTON ><IMG src=...> </BUTTON>

  • name задает имя элементу.
  • value задает значение элементу.
  • type при использовании в качестве кнопки принимает значения: button, submit и reset.
  • disabled делает недоступным данный элемент
  • tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
  • accesskey задает клавишу доступа.
  • id задает имя для ссылки.

Пример:
<BUTTON name="submit" type="submit">отправить</BUTTON >

 

послать

Элемент <LABEL>.

Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы. Поддерживает атрибут for, который связывает элемент <LABEL> с другим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.

Пример:

<FORM action="URL" method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">Имя</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Фамилия</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

 

Имя

Фамилия

 

Пример:

<FORM action="URL" method="post">
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">e-mail: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Мужской">Мужской<BR>
<INPUT type="radio" name="sex" value="Женский">Женский<BR>
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</FORM>

Имя:
Фамилия:
e-mail:
Мужской
Женский

Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать элементы формы.
Синтаксис: <FIELDSET> имя</FIELDSET>

Элемент <LEGEND>.

Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы.
Синтаксис: <LEGEND> имя</LEGEND>

Пример:

<FORM>
<FIELDSET>
<LEGEND>Группа 1</LEGEND>
<INPUT type="text" id="name1"><BR>
<INPUT type="text" id="name2"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Группа 2</LEGEND>
<INPUT type="text" id="name3"><BR>
<INPUT type="text" id="name4"><BR>
</FIELDSET>
</FORM>

 

Группа 1

Группа 2


Создание документа с помощью кадров

Использование <FRAME> позволяет помещать в окна одной страницы несколько отдельных страниц, произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Тэги <FRAMESET> и </FRAMESET> в данном случае заменяют тэги <BODY> и </BODY> соответственно.

Внутри пары <FRAMESET> и </FRAMESET> могут быть использованы только тэги <FRAME>, <FRAMESET> и <NOFRAMES>. По сути создается несколько отдельных страниц фреймов, которые выводятся на экран одновременно ввиде нескольких окошек одного документа. Другими словами, прежде чем организовывать отдельные документы ввиде фреймов одного документа, необходимо прежде создать сами документы. Для пользователей, чей броузер не поддерживает фреймы, необходимо создать альтернативный документ или сообщение о том, каким броузером нужно воспользоваться для прoсмотра данного документа и заключить его в тэги <NOFRAME> и </NOFRAME>

Пара <FRAMESET> и </FRAMESET>

Тэги <FRAMESET> и </FRAMESET> позволяют задать относительный и абсолютный размеры фреймов, <FRAMESET> может иметь атрибуты:

  • border
    Атрибут задает толщину обрамления в пикселах для всех производных фреймов.
    <FRAMESET border="число" >
  • cols
    Атрибут задает количество и размер колонок в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения ширины различных кадров перечисляются в кавычках и через запятую.
    <FRAMESET cols="число, число* или % ">
  • rows
    Атрибут задает количество и размер строк в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения высоты различных кадров перечисляются в кавычках и через запятую.
    <FRAMESET rows="число, число* или % ">
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <FRAMESET frameborder="1 или 0" >

Использование <FRAME>

Элемент <FRAME> определяет содержимое заданных фреймов. Он может иметь атрибуты:

  • src
    Атрибут задает документ, который должен быть отображен в фрейме.
    <FRAME src="URL" >
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <FRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    <FRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    <FRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему с помощью атрибута target в ссылках <A href>. Но существует четыре зарезервированных имени:
    1. _blank
      Имя открывает в новом окне содержимое указанного URL.
    2. _parent
      Имя открывает содержимое указанного URL в родительском, относительно текущего, фрейме.
    3. _self
      Если так назвать фрейм, то содержимое указанного URL заменит первоначально находившуюся в этом фрейме ссылку.
    4. _top
      Имя отображает содержимое указанного URL в развёрнутом на всё окно фрейме.
  • noresize
    Атрибут лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши.
    <FRAME noresize >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
    <FRAME scrolling="значение ">

Использование <IFRAME>.

Этот тэг позволяет вставить в тело BODY окно, в котором визуализируется другая страница, при этом тэг IFRAME, в отличие от тэга FRAME вставляется не между тэгами FRAMESET и /FRAMESET, а между тэгами BODY и /BODY

  • src
    Атрибут задает документ, который должен быть отображен в фрейме.
    <IFRAME src="URL" >
    .
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <IFRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    <IFRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    <IFRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему в ссылках и направлять в него содержимое.
  • align
    Атрибут позволяет позиционировать кадр по отношению к тексту, принимает значения left, right, middle, top и bottom.
    <IFRAME align="left" >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
    <FRAME scrolling="значение ">
  • width
    Атрибут определяет ширину кадра в пикселях.
    <IFRAME width="число ">
  • height
    Атрибут определяет высоту кадра в пикселях.
    <IFRAME height="число ">



Примеры простейших макетов страниц с фреймами.

Горизонтальное деление экрана производится при помощи атрибута rows, а вертикальное при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах, процентах или * для обозначения оставшейся части экрана.
Например:

  • cols=50%,50%
    Деление области просмотра на равные, правую и левую, части.
    Пример
  • cols=20%,80%
    Деление области просмотра на неравные, правую и левую, части.
    Пример
  • rows=100,20%,*
    Деление области просмотра на три части: первой отведено 100 пикселей, второй - 20% доступного пространства, а третьей - все остальное.
    Пример
  • cols=*,3*
    Деление области просмотра на неравные, правую и левую, части. Правая часть в три раза шире левой.
    Пример
  • cols=25%,75%
    Деление области просмотра аналогично предыдущему примеру.
    Пример

Пример исходного кода фреймов более сложной структуры.

<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page1.html" NAME="1">
<FRAMESET FRAMEBORDER=1 BORDER=2 COLS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page2.html" NAME="2">
<FRAME SCROLLING="YES" NORESIZE SRC="page3.html" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>



Пример исходного кода фреймов c навигацией, тут при клике на ссылке в фрейме 2 меняется содержимое фрейма 3, в него загружается файл page1.html, при этом файл page2.html должен иметь следующий вид:

<HTML>
<HEAD>
<TITLE>page2</TITLE>
</HEAD>
<BODY>
<A HREF="page1.html" target="3">link</A>
</BODY>
</HTML>

Языковые стандарты

Кодирование символов

Все символьные обозначения букв, цифр, специальных знаков и иероглифов на самом деле представляют собой битовые комбинации - различные сочетания битов. Так, например, из 8 битов, в различных комбинациях, теоретически может получиться 256 последовательностей, в свою очередь каждой из этих последовательностей присвоен символ, другими словами из 8 битов может получиться 256 символов. Каждому такому символу присваивается свой код и из них составляется таблица - кодировка символов. Соответственно таких таблиц может быть как минимум по одной на каждый из земных языков. На самом деле их гораздо больше, чем это нужно, все они были созданы в разное время, для различных платформ, и кодируются они не только при помощи 8 битов, но и 16 и даже 32.

Самым популярным из стандартов кодирования символов, в настоящий момент является стандарт ISO 646, созданный международной организацией стандартизации ISO, а точнее его первые 128 символов, которые кодировались при помощи 8 битов, но при этом первый бит всегда равнялся нулю. Ему было присвоено имя ASCII и иногда его еще называют 7-битовым стандартом. Он используется большинством компьютерных машин для написания символов латинского алфавита, а также для синтаксиса всех языков программирования и разметки, а также для всех типов данных.

Для поддержки языков, использующих в своем алфавите символы отличные от латинских, был использован восьмой бит байта, а это дало возможность добавить еще 128 дополнительных символов. Была создана серия кодировок ISO 8859, в которых первая часть - это 128 символов ASCII. Самая первая из них, ISO 8859-1, еще ее называют ISO Latin-1 или 8-битовой ASCII, содержит в себе практически все европейские нестандартные символы, а кодировка ISO 8859-5 является русской.

В свою очередь, организация Unicode Consortium создала на основе 16-битового кодирования одноименную кодировку, в которую решено было вместить 65536 символов, каждый весом в два байта. Первые 256 символов Unicode в точности соответствуют ISO 8859-1, а саму кодировку компьютерное сообщество признало и использует все чаще, и если основной кодировкой в HTML раньше считалась ISO 8859-1, то с появлением HTML 4.0, основной кодировкой стала Unicode.

Не желая останавливаться на достигнутом, ISO разработала новый, 32-битовый стандарт кодирования ISO 10646. Он совместим с Unicode, а также имеет несколько своих производных фоматов, одна из которых - формат UTF-8 внедрен в Windows.

Особенности работы с кодировками

Для нормального отображения символов той или иной кодировки, и сервер, и браузер должны обменяться соответствующей служебной информацией. Для этого протокол HTTP, при помощи поля Accept-Charset, позволяет браузеру послать сообщение на сервер о том, какие кодировки в нем доступны и в каком порядке очередности. При этом сервер может выбрать из вариантов документ, исполненный в требуемой кодировке, сообщить браузеру информацию о том, в какой кодировке будет прислана страница, или автоматически перекодировать ее и переслать браузеру. Если такая возможность не реализована на сервере, то присланный документ можно просмотреть в различных кодировках, выбрав их в настройках браузера вручную.

Еще одним способ сообщить браузеру о стандарте кодирования может сводиться к следующему - автор документа создает служебную информацию для браузера в тэге <МЕТА>, между тэгами <HEAD> и </HEAD>, запись эквивалентную заголовку HTTP, например:
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
Встретив такую инструкцию, браузер автоматически переключается на нужную кодировку.

Русские кодировки

Кодировок, русифицирующих сеть, существует гораздо больше, чем хотелось бы, их как минимум пять: KOI-8 (созданная для UNIX), 866 (для MS DOS), Windows-1251, ISO 8859-5, MAC. Ввиду распространения такого количества русских кодировок, в русской части сети очень распространен способ, когда сервер имеет систему автоматического перекодирования документа на лету, в зависимости от того, какой ответ пришел о браузера.

В итоге, часто происходит например, следующее: документ написан в KOI-8 и имеет об этом запись в тэге <МЕТА>, сервер определяет кодировку браузера Windows-1251 и автоматически перекодирует документ в нее, браузер же получив инструкцию прописанную в тэге <МЕТА> переключается в свою очередь на KOI-8 и пользователь не может прочесть текст. Выход может быть в том, чтобы вовсе не указывать charset в тэге <МЕТА>, в документах, которые будут лежать на таком сервере, либо пользователь сохраняет документ на диске и удаляет эту инструкцию из <МЕТА> вручную.

Создание многоязыковых документов

Иногда web-мастер сталкивается с необходимостью разместить в одном документе текст на двух и более языках. Как правило, это небольшие фрагменты текста, чаще реклама или ссылки, поэтому очень часто их выполняют в виде рисунков экономичного формата .gif Но бывают также случаи, когда на сайте действительно необходимо разместить именно текст. В таком случае можно воспользоваться мнемоническими ссылками на символы Unicode, это значит, что автор использует для создания документа обычную кодировку, а вместо недостающих символов другого языка вставляет их код в таблице Unicode.

Например, если в документ Windows-1251 вставить знак &#246;, или &ouml;, то получим символ ö, применяемый в немецком языке. Этим и объясняется сильное увеличение объема документа в три-четыре раза, когда для его создания используется WYSIWYG-редактор, так как он заменяет каждую букву русского текста такой ссылкой.

  • По-русски: Я хочу сделать покупку
  • Deutsch: Ich möchte einkaufen
  • Englich: I want to buy someting

Еще один вариант - набрать текст в текстовом процессоре, например в MS Word, а после сохранить его как файл HTML, при этом кодировку документу выбрать, скажем UTF-8.
Пример

Таблица символов

Ниже приведена таблица наиболее часто встречающихся символов и их кодов:

Знак

код

Знак

код

Знак

код

Знак

код

Знак

код

Знак

код

"

&#34;

Œ

&#140;

ö

&#246;

Š

&#352;

σ

&#963;

ְ

&#1456;

#

&#35;



&#141;

÷

&#247;

š

&#353;

τ

&#964;

ֱ

&#1457;

$

&#36;

Ž

&#142;

ø

&#248;

Ţ

&#354;

υ

&#965;

ֲ

&#1458;

%

&#37;



&#143;

ù

&#249;

ţ

&#355;

φ

&#966;

ֳ

&#1459;

&

&#38;



&#144;

ú

&#250;

Ť

&#356;

χ

&#967;

ִ

&#1460;

'

&#39;

‘

&#145;

û

&#251;

ť

&#357;

ψ

&#968;

ֵ

&#1461;

(

&#40;

’

&#146;

ü

&#252;

Ŧ

&#358;

ω

&#969;

ֶ

&#1462;

)

&#41;

“

&#147;

ý

&#253;

ŧ

&#359;

ϊ

&#970;

ַ

&#1463;

*

&#42;

”

&#148;

þ

&#254;

Ũ

&#360;

ϋ

&#971;

ָ

&#1464;

+

&#43;

•

&#149;

ÿ

&#255;

ũ

&#361;

ό

&#972;

ֹ

&#1465;

,

&#44;

–

&#150;

Ā

&#256;

Ū

&#362;

ύ

&#973;

ֻ

&#1467;

-

&#45;

—

&#151;

ā

&#257;

ū

&#363;

ώ

&#974;

ּ

&#1468;

.

&#46;

˜

&#152;

Ă

&#258;

Ŭ

&#364;

Ё

&#1025;

ֽ

&#1469;

/

&#47;

™

&#153;

ă

&#259;

ŭ

&#365;

Ђ

&#1026;

־

&#1470;

0

&#48;

š

&#154;

Ą

&#260;

Ů

&#366;

Ѓ

&#1027;

ֿ

&#1471;

1

&#49;

›

&#155;

ą

&#261;

ů

&#367;

Є

&#1028;

׀

&#1472;

2

&#50;

œ

&#156;

Ć

&#262;

Ű

&#368;

Ѕ

&#1029;

ׁ

&#1473;

3

&#51;



&#157;

ć

&#263;

ű

&#369;

І

&#1030;

ׂ

&#1474;

4

&#52;

ž

&#158;

Ĉ

&#264;

Ų

&#370;

Ї

&#1031;

׃

&#1475;

5

&#53;

Ÿ

&#159;

ĉ

&#265;

ų

&#371;

Ј

&#1032;

א

&#1488;

6

&#54;

 

&#160;

Ċ

&#266;

Ŵ

&#372;

Љ

&#1033;

ב

&#1489;

7

&#55;

¡

&#161;

ċ

&#267;

ŵ

&#373;

Њ

&#1034;

ג

&#1490;

8

&#56;

¢

&#162;

Č

&#268;

Ŷ

&#374;

Ћ

&#1035;

ד

&#1491;

9

&#57;

£

&#163;

č

&#269;

ŷ

&#375;

Ќ

&#1036;

ה

&#1492;

:

&#58;

¤

&#164;

Ď

&#270;

Ÿ

&#376;

Ў

&#1038;

ו

&#1493;

;

&#59;

¥

&#165;

ď

&#271;

Ź

&#377;

Џ

&#1039;

ז

&#1494;

<

&#60;

¦

&#166;

Đ

&#272;

ź

&#378;

А

&#1040;

ח

&#1495;

=

&#61;

§

&#167;

đ

&#273;

Ż

&#379;

Б

&#1041;

ט

&#1496;

>

&#62;

¨

&#168;

Ē

&#274;

ż

&#380;

В

&#1042;

י

&#1497;

?

&#63;

©

&#169;

ē

&#275;

Ž

&#381;

Г

&#1043;

ך

&#1498;

@

&#64;

ª

&#170;

Ĕ

&#276;

ž

&#382;

Д

&#1044;

כ

&#1499;

A

&#65;

«

&#171;

ĕ

&#277;

ſ

&#383;

Е

&#1045;

ל

&#1500;

B

&#66;

¬

&#172;

Ė

&#278;

ƒ

&#402;

Ж

&#1046;

ם

&#1501;

C

&#67;

­

&#173;

ė

&#279;

Ǻ

&#506;

З

&#1047;

מ

&#1502;

D

&#68;

®

&#174;

Ę

&#280;

ǻ

&#507;

И

&#1048;

ן

&#1503;

E

&#69;

¯

&#175;

ę

&#281;

Ǽ

&#508;

Й

&#1049;

נ

&#1504;

F

&#70;

°

&#176;

Ě

&#282;

ǽ

&#509;

К

&#1050;

ס

&#1505;

G

&#71;

±

&#177;

ě

&#283;

Ǿ

&#510;

Л

&#1051;

ע

&#1506;

H

&#72;

²

&#178;

Ĝ

&#284;

ǿ

&#511;

М

&#1052;

ף

&#1507;

I

&#73;

³

&#179;

ĝ

&#285;

˘

&#728;

Н

&#1053;

פ

&#1508;

J

&#74;

´

&#180;

Ğ

&#286;

˙

&#729;

О

&#1054;

ץ

&#1509;

K

&#75;

µ

&#181;

ğ

&#287;

˚

&#730;

П

&#1055;

צ

&#1510;

L

&#76;

&#182;

Ġ

&#288;

˛

&#731;

Р

&#1056;

ק

&#1511;

M

&#77;

·

&#183;

ġ

&#289;

˜

&#732;

С

&#1057;

ר

&#1512;

N

&#78;

¸

&#184;

Ģ

&#290;

˝

&#733;

Т

&#1058;

ש

&#1513;

O

&#79;

¹

&#185;

ģ

&#291;

;

&#894;

У

&#1059;

ת

&#1514;

P

&#80;

º

&#186;

Ĥ

&#292;

΄

&#900;

Ф

&#1060;

װ

&#1520;

Q

&#81;

»

&#187;

ĥ

&#293;

΅

&#901;

Х

&#1061;

ױ

&#1521;

R

&#82;

¼

&#188;

Ħ

&#294;

Ά

&#902;

Ц

&#1062;

ײ

&#1522;

S

&#83;

½

&#189;

ħ

&#295;

·

&#903;

Ч

&#1063;

׳

&#1523;

T

&#84;

¾

&#190;

Ĩ

&#296;

Έ

&#904;

Ш

&#1064;

״

&#1524;

U

&#85;

¿

&#191;

ĩ

&#297;

Ή

&#905;

Щ

&#1065;

،

&#1548;

V

&#86;

À

&#192;

Ī

&#298;

Ί

&#906;

Ъ

&#1066;

؛

&#1563;

W

&#87;

Á

&#193;

ī

&#299;

Ό

&#908;

Ы

&#1067;

؟

&#1567;

X

&#88;

Â

&#194;

Ĭ

&#300;

Ύ

&#910;

Ь

&#1068;

ء

&#1569;

Y

&#89;

Ã

&#195;

ĭ

&#301;

Ώ

&#911;

Э

&#1069;

آ

&#1570;

Z

&#90;

Ä

&#196;

Į

&#302;

ΐ

&#912;

Ю

&#1070;

أ

&#1571;

[

&#91;

Å

&#197;

į

&#303;

Α

&#913;

Я

&#1071;

ؤ

&#1572;

\

&#92;

Æ

&#198;

İ

&#304;

Β

&#914;

а

&#1072;

إ

&#1573;

]

&#93;

Ç

&#199;

ı

&#305;

Γ

&#915;

б

&#1073;

ئ

&#1574;

^

&#94;

È

&#200;

IJ

&#306;

Δ

&#916;

в

&#1074;

ا

&#1575;

_

&#95;

É

&#201;

ij

&#307;

Ε

&#917;

г

&#1075;

ب

&#1576;

`

&#96;

Ê

&#202;

Ĵ

&#308;

Ζ

&#918;

д

&#1076;

ة

&#1577;

a

&#97;

Ë

&#203;

ĵ

&#309;

Η

&#919;

е

&#1077;

ت

&#1578;

b

&#98;

Ì

&#204;

Ķ

&#310;

Θ

&#920;

ж

&#1078;

ث

&#1579;

c

&#99;

Í

&#205;

ķ

&#311;

Ι

&#921;

з

&#1079;

ج

&#1580;

d

&#100;

Î

&#206;

ĸ

&#312;

Κ

&#922;

и

&#1080;

ح

&#1581;

e

&#101;

Ï

&#207;

Ĺ

&#313;

Λ

&#923;

й

&#1081;

خ

&#1582;

f

&#102;

Ð

&#208;

ĺ

&#314;

Μ

&#924;

к

&#1082;

د

&#1583;

g

&#103;

Ñ

&#209;

Ļ

&#315;

Ν

&#925;

л

&#1083;

ذ

&#1584;

h

&#104;

Ò

&#210;

ļ

&#316;

Ξ

&#926;

м

&#1084;

ر

&#1585;

i

&#105;

Ó

&#211;

Ľ

&#317;

Ο

&#927;

н

&#1085;

ز

&#1586;

j

&#106;

Ô

&#212;

ľ

&#318;

Π

&#928;

о

&#1086;

س

&#1587;

k

&#107;

Õ

&#213;

Ŀ

&#319;

Ρ

&#929;

п

&#1087;

ش

&#1588;

l

&#108;

Ö

&#214;

ŀ

&#320;

Σ

&#931;

р

&#1088;

ص

&#1589;

m

&#109;

×

&#215;

Ł

&#321;

Τ

&#932;

с

&#1089;

ض

&#1590;

n

&#110;

Ø

&#216;

ł

&#322;

Υ

&#933;

т

&#1090;

ط

&#1591;

o

&#111;

Ù

&#217;

Ń

&#323;

Φ

&#934;

у

&#1091;

ظ

&#1592;

p

&#112;

Ú

&#218;

ń

&#324;

Χ

&#935;

ф

&#1092;

ع

&#1593;

q

&#113;

Û

&#219;

Ņ

&#325;

Ψ

&#936;

х

&#1093;

غ

&#1594;

r

&#114;

Ü

&#220;

ņ

&#326;

Ω

&#937;

ц

&#1094;

ـ

&#1600;

s

&#115;

Ý

&#221;

Ň

&#327;

Ϊ

&#938;

ч

&#1095;

ف

&#1601;

t

&#116;

Þ

&#222;

ň

&#328;

Ϋ

&#939;

ш

&#1096;

ق

&#1602;

u

&#117;

ß

&#223;

ʼn

&#329;

ά

&#940;

щ

&#1097;

ك

&#1603;

v

&#118;

à

&#224;

Ŋ

&#330;

έ

&#941;

ъ

&#1098;

ل

&#1604;

w

&#119;

á

&#225;

ŋ

&#331;

ή

&#942;

ы

&#1099;

م

&#1605;

x

&#120;

â

&#226;

Ō

&#332;

ί

&#943;

ь

&#1100;

ن

&#1606;

y

&#121;

ã

&#227;

ō

&#333;

ΰ

&#944;

э

&#1101;

ه

&#1607;

z

&#122;

ä

&#228;

Ŏ

&#334;

α

&#945;

ю

&#1102;

و

&#1608;

{

&#123;

å

&#229;

ŏ

&#335;

β

&#946;

я

&#1103;

ى

&#1609;

|

&#124;

æ

&#230;

Ő

&#336;

γ

&#947;

ё

&#1105;

ي

&#1610;

}

&#125;

ç

&#231;

ő

&#337;

δ

&#948;

ђ

&#1106;

ً

&#1611;

~

&#126;

è

&#232;

Œ

&#338;

ε

&#949;

ѓ

&#1107;

ٌ

&#1612;



&#127;

é

&#233;

œ

&#339;

ζ

&#950;

є

&#1108;

ٍ

&#1613;

€

&#128;

ê

&#234;

Ŕ

&#340;

η

&#951;

ѕ

&#1109;

َ

&#1614;



&#129;

ë

&#235;

ŕ

&#341;

θ

&#952;

і

&#1110;

ُ

&#1615;

‚

&#130;

ì

&#236;

Ŗ

&#342;

ι

&#953;

ї

&#1111;

ِ

&#1616;

ƒ

&#131;

í

&#237;

ŗ

&#343;

κ

&#954;

ј

&#1112;

ّ

&#1617;

„

&#132;

î

&#238;

Ř

&#344;

λ

&#955;

љ

&#1113;

پ

&#1662;

…

&#133;

ï

&#239;

ř

&#345;

μ

&#956;

њ

&#1114;

چ

&#1670;

†

&#134;

ð

&#240;

Ś

&#346;

ν

&#957;

ћ

&#1115;

ژ

&#1688;

‡

&#135;

ñ

&#241;

ś

&#347;

ξ

&#958;

ќ

&#1116;

گ

&#1711;

ˆ

&#136;

ò

&#242;

Ŝ

&#348;

ο

&#959;

ў

&#1118;

ڰ

&#1712;

‰

&#137;

ó

&#243;

ŝ

&#349;

π

&#960;

џ

&#1119;

ڱ

&#1713;

Š

&#138;

ô

&#244;

Ş

&#350;

ρ

&#961;

Ґ

&#1168;

ڲ

&#1714;

‹

&#139;

õ

&#245;

ş

&#351;

ς

&#962;

ґ

&#1169;

ڳ

&#1715;

 

Вставка в документ объектов.

Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно браузером и содержимое, обрабатываемое дополнительными средствами. Браузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению: .gif, .jpg, .mpg, .wrl и т.д., либо по специальному коду content type="тип содержимого" вставляемому в исходный код документа, где тип содержимого может принимать значения: text/html, image/gif, video/quicktime и т.д.

Так как язык HTML создавался как язык разметки текста и только для этих целей, то естественно что в нем изначально не была предусмотрена поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их браузеров доступ к мультимедиа-содержимому, встраивая в них различные plug-ins. Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно, так и в заданных размерах. На практике получается следующее - если браузер подгружает файл с таким содержимым впервые, то пользователю предлагается скачать плагин, который запишется на жесткий диск и в следующий раз браузер передаст мультимедиа-содержимое на обработку уже сразу ему.
Ïðèìåð <prim7.html> (84 kB).

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

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

 

Элемент <IMG>

 

Элемент <IMG> Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Синтаксис: <IMG src= URL атрибуты >

·        src
Этот атрибут указывает на файл графики, задавая его URL.
Синтаксис: <IMG src=" URL ">
Пример:

·        alt
В некоторых случаях, когда браузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги, отключает загрузку картинок, на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы .
Синтаксис: <IMG alt=" описание ">
Пример:

·        align
Этот атрибут задает расположение рисунка в окне и его выравнивание. Он может принимать значения:

·        top-по верхнему краю
Пример:
строка, в которую вставлена картинка, будет выровнена по верхнему краю картинки и высота строки будет равна высоте самого рисунка

·        bottom-по нижнему краю
Пример:
строка, в которую вставлена картинка, будет выровнена по нижнему краю картинки

·        middle-по центру
Пример:
строка, в которую вставлена картинка, будет выровнена по центру

·        right-справа
Пример:

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

·        left-влево
Пример:

картинка выравнивается по левому краю, текст будет обтекать картинку справа, часто применяется для создания буквиц, когда первая буква представляется ввиде рисунка
Синтаксис: <IMG align=" значение ">

·        width
Этот атрибут задает ширину области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
Синтаксис: <IMG wigth= число >

·        height
Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
Синтаксис: <IMG height= число >

Обратите Ваше внимание на тот факт, что размер изображения в килобайтах не меняется - какие бы вы не задавали параметры width и height

Пример width=50

Пример height=30

Пример width=50 height=100

Пример width=100 height=50

·        hspace
Этот атрибут задает пустое пространство в пикселях справа и слева от рисунка.
Синтаксис: <IMG hspace= число >
Пример:

·        border
Этот атрибут задает в пикселях толщину рамки вокруг рисунка.
Синтаксис: <IMG border= число >
Пример:

·        vspace
Этот атрибут задает пустое пространство в пикселях сверху и снизу от рисунка.
Синтаксис: <IMG vspace= число >
Пример:

·        ismap
Этот атрибут разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие рисунки называют MAP карта, они используются совместно с элементом <A>. В этом случае реакцию на щелчок по карте отрабатывает сервер.
Синтаксис: <A href=" URL карты "><IMG src=" URL изображения " ismap>

·        usemap
Этот атрибут разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом <MAP>. В этом случае реакцию на клик по карте отрабатывает браузер.
Синтаксис: <IMG src=" URL изображения " usemap= "URL" карты(#имя карты) >

·        lowsrc
Этот атрибут задает URL файла с низкокачественной копией основного изображения, которое может быть визуализировано до изображения, заданного атрибутом src.
Синтаксис: <IMG lowsrc= URL >

·        dynsrc
Этот атрибут задает URL файла с видео клипом или сценой VRML.
Синтаксис: <IMG dynsrc= URL >

·        start
Этот атрибут используется совместно с атрибутом dynsrc, он задает возможность управления процессом воспроизведения клипа, принимает значения fileopen-сразу после загрузки и mouseover-при наведении курсора.
Синтаксис: <IMG dynsrc= URL start= mouseover >

·        loop
Этот атрибут задает количество воспроизведений видео клипа. Он может принимать значения от 1 до infinite - бесконечно.
Синтаксис: <IMG loop= значение >

Ïðèìåðû  <prim4.html>(208 kB) внедрения видео файлов в страницу.

 

Элемент <MAP>

Элемент <MAP> применяется для представления графического изображения в виде карты с активными областями. Он поддерживает аттрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name=" имя "> <AREA атрибуты > </MAP>

 

Элемент <AREA>

Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint , для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:

·        href
Этот атрибут указывает URL ссылки.
Синтаксис: <AREA href=" URL ">

·        alt
Этот атрибут задает альтернативный текст для браузеров, которые не поддерживают данный элемент.
Синтаксис: <AREA alt=" текст подсказки ">

·        title
Этот атрибут задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент.
Синтаксис: <AREA title=" текст подсказки ">

·        shape
Этот атрибут задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,Y1,X3,Y3.
Синтаксис: <AREA " circle " coords= X,Y,R >

Пример изображения - карты :

<IMG src=" map.gif " usemap="# supermap " border= 0 >
<MAP name=" supermap ">
<AREA shape= circle coords=" 34,32,23 " href=" page1.html " title=" ссылка 1 ">
<AREA shape= poly coords=" 12,110,37,62,72,114 " href=" page2.html " title=" ссылка 2 ">
<AREA shape= rect coords=" 83,44,133,94 " href=" page3.html " title=" ссылка 3 ">
</MAP>

 

Элемент <BANNER>

Элемент <BANNER> позволяет зафиксировать какую-либо информацию на экране вне зависимости от того, какая часть окна просматривается в данный момент. Данный элемент также редко поддерживается браузерами, добиться же подобного решения можно при помощи фреймов или слоев.
Синтаксис: <BANNER>Текст или рисунок </BANNER>
Пример: Текст, выделенный элементом <BANNER>.

 

Элемент <BGSOUND>

Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы. Он может не иметь конечного тэга и может иметь атрибуты:

·        src
Этот атрибут указывает URL звукового файла в формате WAV, AU или MIDI.
Синтаксис: < bgsound src= URL >

·        loop
Этот атрибут задает количество воспроизведений звукового файла. Он может принимать значения 1 или infinite - бесконечно.
Синтаксис: <BGSOUND loop= значение >

Ïðèìåð  <page5.html>задания фонового звучания.

 

Элемент <MARQUEE>

Элемент <MARQUEE> используется с целью создания в документе бегущей строки.
<MARQUEE атрибуты> Текст строки </MARQUEE>
Он может иметь атрибуты:

·        bgcolor
Этот атрибут задает цвет фона бегущей строки.
Синтаксис: <MARQUEE bgcolor="цвет">

·        height
Этот атрибут высоту бегущей строки в пикселях или процентах от всего окна.
Синтаксис: <MARQUEE height=число>

·        align
Этот атрибут задает выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom.
Синтаксис: <MARQUEE align= ...>

·        direction
Этот атрибут задает направление движения бегущей строки: left влево, right вправо, up вверх, down вниз.
Синтаксис: <MARQUEE direction="...">

·        behavior
Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю.
Синтаксис: <MARQUEE behavior="...">

·        hspace
Этот атрибут задает смещение в пикселах в право бегущей строки.
Синтаксис: <MARQUEE hspace=число>

·        vspace
Этот атрибут задает пустое пространство выше и ниже бегущей строки.
Синтаксис: <MARQUEE vspace=число>

·        loop
Этот атрибут задает количество проходов бегущей строки.
Синтаксис: <MARQUEE loop=число>

·        scrollamount
Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро.
Синтаксис: <MARQUEE scrollamount=число>

·        scrolldelay
Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками.
Синтаксис: <MARQUEE scrolldelay=число>

Пример: Бегущая строка, заданная элементом
<MARQUEE height=10 behavior="scroll">СТРОКА</MARQUEE>

 

Элемент <APPLET>

Элемент <APPLET> используется для передачи компьютеру клиента программы - апплета, которая загружается и выполняется браузером. Программы, переданные браузеру, существенно улучшают работу со страницей, придавая ей интерактивность не свойственную страницам написанным без использования апплетов. Процесс внедрения состоит из двух этапов. Во-первых, необходимо убедиться, что все классы и связанные файлы, такие как графические изображения и аудио фрагменты, размещены в доступном каталоге - чаще всего это подкаталог classes каталога с документами HTML. Во-вторых, в исходный код страницы должен быть внедрен тэг ссылки на классы <APPLET>, а так же все необходимые для его работы параметры. Он может иметь атрибуты:

·        CLASS
Этот атрибут указывает имя апплета.

·        SRC
Этот атрибут указывает URL каталога, в котором должен быть обнаружен откомпилированный апплет с символом / на конце. Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS.

·        WIDTH
Этот атрибут указывает ширину области вывода апплета в пикселях.

·        HEIGHT
Этот атрибут указывает высоту области вывода апплета в пикселях.

·        ALIGN
Этот атрибут указывает режим выравнивания апплета относительно текста, принимает значения TOP, MIDDLE и BOTTOM.

Синтаксис: <APPLET class="имя.class" src="URL/" width="число" height="число" align="значение">
<PARAM NAME=имя параметра VALUE=его значение REF="адрес расположения объекта"></APPLET>

Пример внедрения в страницу àïëåòà Java  <prim5.html>

 

Элемент <SCRIPT>.

Для придания документу дополнительных возможностей, которые невозможно обеспечить с помощью стандартных элементов языка HTML, разработчики пользуются скриптовыми языками. Встраиваемые в документ объекты придают ему динамичность, интерактивность, позволяют управлять содержимым страницы уже после её загрузки. Элемент <SCRIPT> определяет язык сценариев, который используется в текущем документе обычно это либо Java Script , либо Visual Basic Script. Он может иметь атрибуты:

·        language
Атрибут указывает язык, который использовался при написании сценария.
Синтаксис: <SCRIPT LANGUAGE ="язык">

·        src
Атрибут задает URL текстового файла с кодом сценария и расширением .js.
Синтаксис: <SCRIPT type="text/javascript" src = URL>

Кроме того скрипты могут привязываться к определенным событиям:

·        onLoad
Скрипт отрабатывается в момент загрузки страницы.
Пример: Ïðèìåð  <prim9.html>

·        onUnload
Скрипт отрабатывается в момент ухода со страницы.
Пример: Ïðèìåð  <prim8.html>

·        onClick
Скрипт отрабатывается в момент клика мыши в определенном месте.
Пример:

·        onMouseOver
Скрипт отрабатывается в момент наведения курсора мыши на определенный объект.
Пример:

·        onMouseOut
Скрипт отрабатывается в момент покидания курсором мыши определенного объекта.
Пример:

·        onFocus
Скрипт отрабатывается в момент, когда поле активизируется клавишей TAB.
Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:

·        onBlur
Скрипт отрабатывается в момент, когда поле теряет фокус.
Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:

·        onSelect
Скрипт отрабатывается в момент, когда в поле выбран текст.
Пример:

·        onChange
Скрипт отрабатывается в момент, когда поле теряет фокус, а данные в нем уже изменены.
Пример измените содержимое первого поля, а затем перейдите ко второму полю клавишей TAB или курсором:

Top of Form 1

Bottom of Form 1

·        ondblclick
Событие происходит при двойном щелчке на элементе. Этот атрибут может использоваться с большинством элементов.
Пример:

·        onmousedown
Событие происходит при нажатии кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
Пример:

·        onmouseup
Событие происходит при отпускании кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
Пример:

·        onmousemove
Событие происходит при перемещении курсора, когда он находится на элементе. Этот атрибут может использоваться с большинством элементов.
Пример проведите курсором над текстом:

·        onkeypress
Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
Пример укажите курсором на текст и нажмите на любую клавишу:

·        onkeydown
Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
Пример укажите курсором на текст и нажмите на любую клавишу:

·        onkeyup
Событие происходит при отпускании клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
Пример укажите курсором на текст и, нажав, отпустите любую клавишу:
Пример:

·        onsubmit
Событие происходит при отправке формы. Оно используется только в элементе FORM

·        onreset
Событие происходит при сбросе формы. Оно используется только в элементе FORM

Существует другой способ применения элемента <SCRIPT>, когда тэг <SCRIPT> используется совместно с закрывающим тэгом </SCRIPT>, заключая в себе инструкции сценария. Если эту конструкцию поместить в заголовке, то сценарий будет запущен еще до того, как загрузится документ. Сценарии, которые должны выполняться после загрузки документа или в результате действий пользователя, помещают в соответствующие формы или гиперссылки.
Синтаксис: <SCRIPT >инструкции сценария</SCRIPT>
В случае не поддержания браузером языков сценариев инструкции сценария визуализируются на странице ввиде текста, скрыть его можно так:
Синтаксис: <SCRIPT ><!- -инструкции сценария //- - ></SCRIPT>

 

Элемент <OBJECT>

Элемент <OBJECT> вставляет в документ графическое изображение, видео клип, апплет JAVA, или элемент управления ActiveX. Можно сказать, что он пришел на смену элементу <APPLET> т.к. с помощью последнего можно вставить только лишь апплет Java. Единый для всех объектов и модулей элемент <OBJECT> функционально замещает элемент IMG и при необходимости может расширяться. Его атрибуты:

·        id
Этот атрибут определяет идентификатор документа.

·        declare
Этот атрибут позволяет подразумевать документ, не создавая его.

·        classid
Этот атрибут определяет URL идентификатора класса или экземпляра объекта.

·        codebase
Этот атрибут определяет URL местоположения кода.

·        data
Этот атрибут определяет URL, который указывает на необходимые данные или объект.

·        type
Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом DATA.

·        codetype
Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом CLASSID.

·        standby
Этот атрибут позволяет выводить окна с коротким сообщением в процессе загрузки объекта.

·        align
Этот атрибут определяет режим выравнивания объекта относительно строки текущего текста или как отдельного элемента.
Допустимые значения:

·        text-top

·        middle

·        textmiddle

·        baseline

·        textbottom

·        left

·        center

·        right

·        width
Этот обязательный атрибут определяет ширину объекта в окне браузера.

·        height
Этот обязательный атрибут определяет высоту объекта в окне браузера.

·        border
Этот атрибут задает наличие или отсутствие обрамления объекта при помощи значений 1 и 0 соответственно.

·        hspace
Этот атрибут позволяет задать дополнительное пространство вокруг объекта.

·        vspace
Этот атрибут позволяет задать дополнительное пространство вокруг объекта.

·        usemap
Этот атрибут определяет URL объекта, если тот является картой.

·        shapes
Этот атрибут используется вместе с объектами, которые обладают точками привязки или активными зонами.

·        name
Этот атрибут используется с формами HTML, которые могут содержать объект, и определяет, должен ли тот передавать данные серверу при запуске формы.

·        alt
Этот атрибут определяет альтернативное содержимое, которое будет визуализировано в случае, если пользователь не может или не хочет отобразить объект.

·        title
Этот атрибут определяет заголовок объекта.


Синтаксис: <OBJECT атрибуты>параметры и альтернативное содержание</OBJECT>



Ïðèìåðû <prim6.html> (208 kB) внедрения в страницу при помощи <OBJECT>:
Еще один ïðèìåð <prim5a.html>, а именно использование <OBJECT> вместо <APPLET>




Элемент <EMBED>

Элемент <EMBED> является популярным расширением к языку HTML от Netscape пока он сам и его синтаксис не описаны в спецификации HTML 4.0, но т.к. Microsoft обеспечила некоторую поддержку этого элемента своими браузерами, то довольно часто применяется при внедрении в страницы мультимедиа содержимого и других файлов. Официально для этих целей Консорциум W3C в спецификации HTML 4,0 рекомендует применять дескриптор <OBJECT>, однако Web-мастера довольно часто используют тэги <EMBED> и </EMBED>, и в зависимости от возможностей браузера элемент обрабатывается либо браузером, либо в специально запущенном приложении.
Синтаксис: <EMBED атрибуты> </EMBED>
Элемент может поддерживать следующие атрибуты:

·        height задает вертикальный размер, вставляемого объекта

·        width задает горизонтальный размер, вставляемого объекта

·        autostart задает возможность запуска при загрузке, принимает значения true или false

·        loop задает количество повторений, принимает значения true или false

·        hidden позволяет скрыть панель управления, принимает значения true или false

·        src указывает на URL мультимедиа файла

·        pluginspage указывает на URL плагина для проигрывания мультимедиа файла

·        bgcolor задает фон объекта

·        type указывает на тип мультимедиа файла

·        quality указывает на качество мультимедиа файла

·        alt задает альтернативное содержание

Пример:

<EMBED src="file.swf" menu=true quality=high bgcolor=#000066 WIDTH=760
HEIGHT=410 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>

 

 

 



Hosted by uCoz