Приглашаем посетить
Гончаров (goncharov.lit-info.ru)

HTML - краткое описание

HTML - документ. Краткое описание.



1.1 Вступление.

Без преувеличения можно сказать , что получение информации посредством Интернет-страниц(WEB-pages,html-pages) наиболее популярен.Для создания подобных документов необходимо иметь хотя бы общее представление о структуре html - файла.

HTML(HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до полненая по сравнению с версией 3.2

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

2.1 Что такое HTML ?

На самом деле ,если вы откроете файл с расширением htm (или html) в любом текстовом редакторе, вы увидите,что это не что иное, как ... обычный текст, правда "испорченный" какими-то словами в угловых скобках.Эти "ненужные" слова и представляют собой средства разметки текста, которые понимает программа, работающая с html-файлами(такую программу называют браузер).Похожий принцип построения докуметов не нов, и встречается ,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем енты - тэги (удобное представление этой самой информации).
Одсюда следует, что для того, чтобы создать гипертекст,нужно всего лишь знать как, куда и в каком количестве "вносить" эти управляющие элементы.

2.2 Тэги.

Тэги - (от англ. tag) это средство, позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде, удобном для восприятия, пои ска, чтения.Это в своем роде язык программирования, определяющий ,как будет выглядеть на экране следующая строка, что нужно выделить, а что - наоборот - столь очевидно,что нет необходимости это подчеркивать.
Тэгом считается определенное выражение, помещенное в скобки вида <>. Весьма условно тэги можно разделить на граничные и унарные.Унарные тэги представляют собой очевидные операции, предписывающие браузеру совершить определенное действие по постижению данного тэга при обра ботке html - документа.Пример - наиболее часто употребляемый тэг <BR> - переход на другую строку, весь следующий за ним гипертекст браузер будет представлять, начиная с новой строки.Унарные тэги не относятся к определенным участкам текста,а ,скорее всего, к всей последующей части документа.С граничными тегами сложнее, но надо учитывать, что их много больше , нежели унарных.Граничные тэги определяют, как будет выглядеть на экране пользователя часть текста,определеная этими элементами, причем в начальном тэге можно указывать различные параметры,опреде ленные данному тэгу, в конечном тэге эти параметры присутствовать не должны(браузером они игнорируются).

Пример граничного тэга: гиперссылка <a href="http://uic.tula.ru/">Сервер ТулГУ</a>
    Здесь
  • a - управляющее слово, показывающие, что текст вплоть до тега </а> ,будет являться гипертекстовой ссылкой (то есть указнием браузеру просмотреть определенный html - документ при совершении управляющего действия ( шелчка мыши) над "ограниченным" текстом)

  • href="..." http - сервис))


Некоторые параметры определены по умолчанию браузером, некоторые- пользователем браузера,но есть и такие,определять которые необходимо при создании страницы(пример - тотже параметр href тэга <a>).

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

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

Структура гипертекстовых файлов черезвычайно проста.HTML-документ должен начинаться тэгом <html> и заканчиваться </html>.Информация вне этих тэгов игнорируется,либо выдается в нелицеприятном виде. Помимо этого все, огражденное тегами <html> и </html> делится на две части:
  • заголовок(меньшая часть)
    Ограничивается тэгами <head> и </head>.Содежит, как правило мета-информацию,то есть дополнительные данные о странице, и заголовок страницы,выносимый как правило в заголовок окна браузера(в оконной графической системе).
    Рассматривать представление мета-информации в данном тексте не имеет смысла,поскольку она не играет никакой роли при визуализации страницы.Заголовок определяется тэгами <title> и </title>,эго присутствие необязательно,но желательно.

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

  • основная часть документа (тело)
    Ограничивается тэгами <body> и </body>.Определяет то,что выводится в главном окне браузера.Здесь сосредотачивается вся несомая страницей информация.Так же может отсутствовать при использовании фреймов.
      Тэг <body> имеет следующие (необязательные) параметры:
    • background="img.gif" - на задний план документа помещается изображение из файла img.gif
    • bgcolor="RED" - цвет заднего плана, если преведущий параметр не определен(о представлении цвета в HTML смотрите следующую часть главы)
    • text="BLACK" - цвет текста документа
    • link="RED" - цвет гиперссылок документа
    • vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
      и другие.


      <html>
      <head>
      <title>Заголовок</title>
      </head>
      <body bgcolor="WHITE" text="BLACK" link="BLUE">
      .
      .
      Тело документа
      .
      .
      </body>
      </html>
    

    Области <head> и <body> не пересекаются.Любая информация вне них,но внутри <html>-области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).

    2.4 Представление цвета в HTML.

    Цвет в гипердокументах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая определяет количество базисного цвета (по системе RGB) в данном.То есть вы можете в одном из параметров тэга <body> вместо "WHITE" указать "#ffffff", где # указывает ,что следующее число шестнадцатиричное, а каждая из световых компонент (напомню, здесь используется аддитивная модель цветопередачи) имеет значение ff, то есть участвует в формировании цвета полностью.Соответствено базисные цвета могут быть представлены:
      
         #ff0000      RED     красный
         #00ff00      GREEN   зеленй
         #0000ff      BLUE    синий
    
    Наиболее часто используемые сочетания трех компонент занесены в таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций имеет определенное название, распознаваемое браузером.Именно в таком виде определялись цвета в примере с тэгом <body>.

    2.5 Основные тэги HTML.

    В этой части главы будут кратко описаны наиболее часто встречаемые тэги гипертекстового языка.Более подробно они описаны в спецификации и разного рода справочной и учебной литературе.

      Тэги, оределяющие отображение текста
    • размер шрифта
             <h1> - определяет следующий до закрывающего тэга текст как
              заголовок первого уровня (размер букв - максимально
              допустимый)
       <h2>  - ..
       <h3>  - ..   размер букв изменяется пропорционально
       <h4>  - ..        в сторону допустимого минимума
       <h5>  - ..
       <h6>  - размер букв -минимально допустимый
      
       <big> - максимально допустимый шрифт
       <small> - минимально допустимый шрифт
      
       (Границы допустимости шрифтов задаются браузером, используя
       среднее значение, определяемое ,как правило, пользователем)
      
    • вид надписи
             <i> - (italic) наклонный шрифт
       <b> - (bold) шрифт с выделением толщиной символов
       <u> - (underline) подчеркнутый текст
       <tt> - (teletype<blink> - мигающая надпись
       <p> - форматированный вывод текста (широко использует MS Word 8)
      

      Кроме того существует тэг, определяющий тип шрифта, размер и цвет <font face="......" size=. color="#......" > -
        где
        face - тип шрифта (не стоит увлекаться экзотическими шрифтами, поскольку они могут отсутствовать в системе клиента)
        size - размер (варьируется от 1 до 6) в относительных единицах.Его также можно задавать относительно ,например : size=+1 (увеличить текущее логическое значение на 1)
        color - задает цвет шрифта.

      Вышеописанный тэг очень удобен для выделения цветом той или иной строки.
    • форматирование текста (и других элементов)
           <center> - выравнивание по центру
           <left> - выравнивание по левой границе
           <right> - выравнивание по правой границе
       

    • Теги,отвечающие за формирование списков
         - <ul>
         - <menu> - Эти два тэга определяют ограничиваемую область как
              список с соответствующим отступом от левой границы
              документа
         - <li> - определяет следующую информацию как новый элемент списка.
            Выделяется различными фигурками (пунктами)
         

      Списки могут быть вложенными, то есть элементом одного из списков может быть другой список.
    • Тэги общего характера
      • <img src=".." alt=".." width=. height=.> - Вставка в документ графической информации.(Злоупотребление этим тэгом снижает посещаемость страницы!)
          Параметры:
        • src="имя-файла"
        • alt="текстовой-аналог" - применяется в случае, если у клиента отключена загрузка графических изображений.
        • width - Ширина изображения в пикселах (может не соответствовать реальному).
        • height - Высота изображения в пикселах.
      • <hr width=..> - разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах).
      • <br> - тэг начала новой строки.
      • code><!-- - тэг комментария.Следующий текст игнорируется до появления --!>.
      • <a href=" "> - тэг гипертекстовых ссылок.Может адресовать документы в :
        • глобальной сети
          Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла.
        • файл на данной машине (необязательно html-документ)
          Параметр href содержит путь к файлу относительно текущего каталога и имя файла.
        • метку в текущем документе
          <a href="#001">.Метки задаются тем же тэгом, но с другим параметром <a name=" ">, где name - имя метки (# - не используется!).Примет для 001 - <a name="001">


    2.6 Работа с таблицами в HTML.

    Таблицы в HTML - это один из мощных инструментов представления информа ции.Они описываются набором тегов, почти каждый из которых имеет свои параметры.Рассмотрим основные:
    • <table bgcolor=.. border=.. width=.. cellpadding=.. cellspacing=..> - объявление таблицы и определение некоторых параметров

        bgcolor - цвет фона таблицы
        width - ширина таблицы в абсолютных и относительных единицах
        border - ширина рамки таблицы (в пикселах)
        cellpadding - отступ от границ при визуализации табличного контента (в пикселах)
        cellspacing - промежуток между ячейками таблицы (в пикселах)
    • <caption> - заголовок таблицы.Как правило, применяется после объявления таблицы
    • <th> - заголовок каждого столбца.
    • <tr> <td>, определяющим вертикальныеразделяющие линии при визуализации таблицы.То есть область, ограничиваемая тэгом <tr> включает в себя одну или несколько областей, ограниченых тегом <td>, определяющим, что будет находится в каждой ячейке на данной строке.
    Пример:                           HTML - решение:
      Нужно построить таблицу:             <table>
                                     <tr>
                                     <td>1</td><td>1</td><td>3</td>
         1   1  3                    </tr>
         2   2  3                    <tr>
                                     <td>2</td><td>2</td><td>3</td>
                                     </tr>
                                     </table>
    
      Последние три тэга имеют ряд параметров:
    • colspan=.. - "растянуть" данную ячейку в ширину на указанное целое число ячеек. (неприменимо к tr)
    • rowspan=.. - аналогично, но действие происходит по вертикали.
    • bgcolor=.. - задание цвета фона для каждой ячейки


    2.7 Фрэймы.

    Фрэймы - это окна независимого просмотра различных html - документов. Иногда бывает очень удобно организовать навигацию по странице в виде меню в отдельном фрейме, и основного окна, где будет представлятся вся информация, определяемая действиями пользователя в области меню.Здесь окно нужно понимать как часть рабочей области браузера, а не как отде льное от нее окно в среде Windows или X11 (хотя при помощи JavaScripts возможно и такое).Поясню действие фреймов на примере:

    Создадим 2 фрэйма: меню и информационное окно.
    Основной html-файл будет выглядеть так:

    index.htm
        <html>
        <!--
        Замечу, что это тот случай,когда <body> может отсутстовать
        --!>
        <frameset cols="20%,80%" border=0>
        <!--
        Оъявление фреймов.Они будут располагатся вертикальными полосами
        (об этом говорит параметр cols, для горизонтальных полос нужно
        вместо него использовать параметр rows) и занимать 20 и 80 проце
        нтов рабочей области.Параметр border определяет границу между
        фрагментами.
        --!>
        <frame src="menu.htm" name="Menu">
        <!--
        Определение документа, начально загружаемого при открытии этого
        файла.Парметр name (имя фрейма) необходимо указывать.
        --!>
        <frame src="hello.htm" name="Info">
        </frameset>
        </html>
    

    Стоит учитывать, что фреймы могут быть вложенными.


    menu.htm
        <html>
        <body>
        <br>
        <a href="about.htm" tagert="Info">
        About me
        </a>
        <br>
        <a href="books.htm" tagert="Info">
        My favorite books
        </a>
        <br>
        <a href="link.htm" tagert="Info">
        Nice links
        </a>
        </body>
        </html>
    

      Замечу, что у тэга <a> появился параметр tagert, указывающий на фрейм Info.Это означает, что при нажатии на ссылку искомый документ загрузится не в текущий, а в определяемый tagert фрейм.
      Вот так, довольно просто можно организовать навигацию по стра ницам припомощи фреймов.Однако с развитием технологии SSI (о ней далее) многие Web-дизайнеры предпочитают организацию сопровождения по сайту при помощи таблиц.


    2.8 Неупомянутые тэги.

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

    Тэги <form>,<input>,<textarea>,<select> и <option> предназначены для организации так называемых заполняемых форм, являющихся по сути дела обратной связью во взаимодействии "клиент-сервер".
    Тэги <map> и <area> необходимы для использования в качестве меню одного графического изображения.Разным участкам этого изображения ставится в соответствие разлчные документы, при активизаци (нажатии) участка происходит переход на другой документ, аналогичный переходу при нажатии на гиперссылку.
    И,наконец, тэг <embeed> позволяет встраиватьв документ файлы раз личных форматов (например, midi-музыку).При получении такого файла браузер пользователя (если у него доступны функции, отвечающие за работу с этим файлом) сам отобразит этот файл как часть общего до кумента, не прибегая к помощ сторонних приложений.

    3.1 Технологии создания динамических HTML - документов.

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

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

    CGI (Common Getaway Interface) - за этой аббревиатурой кроется принцип передачи результатов программы, работающей на сервере, клиенту(пользователю). Такая программа может быть написана на любом языке программирования, который поддерживает платформа сервера.Очень часто для подобных целей используют PERL - интерпретируемый язык, похожий на Си.

    SSI(Server Side Includes) - технолгия, позволяющая вставлять в статические html-документы динамически меняющиеся документы или результаты ис полняемых на сервере программ.

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

    CSS(Cascade Style Sheets) - технология, позволяющая определить для каждого тэга вид, размер(в абсолютных единицах) и тип шрифта текста,ограничиваемого данным тэгом.

    VRML - своеобразный язык для создания 3х-мерных сцен и страниц.Похож на HTML.

    И ,наконец, ASP(Active Server Page), DHTML(DynamicHTML) и XML(eXtendet Makeup Language) - совсем новые, но довольно быстро распространяющиеся технологии, разработанные консорциумом W3C и корпорацией Microsoft.

    3.2 Инструменты и приемы создания Web-страничек.

    Первое, что необходимо для создания html-документов, это браузер. Развитие Интернета спровоцировало появление около десятка различных программных продуктов подобного рода.В настоящее время браузеры су ществуют практически для всех платформ, а в некоторых графических оболочках (например, в KDE для Linux) стали неотъемлемой частью сис темы.Названия некоторых из них приведены ниже:
            Netscape Navigator      MacOS,Windows,UNIX
      Internet Explored       Windows,some UNIX
      Opera                   Windows
      Arachne                 DOS,Linux
      Arena                   Linux
    

    Второе - редактор HTML-документов.Рынок програмного обеспечения на сыщен комерческими программными продуктами, позволяющими содавать HTML-страницы на основе приципа WYSIWYG(What You See Is What You Get) - приципа соответствия выходного html-кода задаваемому программе виду, желаемому пользователем.В качестве примера назову MS FrontPage, Lotus Domino, Xara Webster.В браузере Netscape Navigator начиная с 3-ей версии встроен достаточно неплохой редактор Netscape Composter. Однако нет необходимости в сложных и дорогих редакторах, поскольку html-документ по сути обычный текстовой файл, то есть для его создания и редактирования достаточно простейшего текстового редактора.



      Напоследок объявлю несколько негласных правил Web-дизайна:
    • Недопустим избыток графических изображений. Поскольку не все могут позволить себе многомегабитные линии доступа в Сеть, часто пользователи отключают автозагрузку графической информации, что сведет на нет все усилия сделать страницу максимально привлекательной
    • Желательно, чтобы все графически оформленные ссылки были продублированны текстовой ремаркой по той-же причине.
    • Как правило, при оформлении используют ограниченный набор цветов, причем для отображения информации подбираются контрастные элементы палитры.(Это не строго,но ,согласитесь, разобрать светло-зеленые буквы на светло-сером фоне достаточно сложно)
    • Прежде,чем размещать страницу, необходимо проверить, адекватно ли она воспринимается другими браузерами.
    • При помещении страницы в нерусской зоне Интернет необходимо учитывать, что, в отличии от Windows-систем, в UNIX-ах используется другая кодировка символов KOI8, потому нужно предусмотреть возможность просмотра тех же документов в данной кодировке.(Обычно в русском Интернете на всех серверах имеются автоматические перекодировщики, поэтому тут достаточно одного экземпляра страницы в определенной кодировке).

М.Крентовский