velikol.ru
1
n=Html-документом~sz=188950;pg=1;te=На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно~cat=~t=~!~

Введение


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

Такие страницы как правило имеют расширение htm или html. Отдельный документ, выполненный в формате HTML, называется:

HTML-документом;

Web-документом;

Web-страницей.

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

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

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


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

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


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


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

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


Этот текст будет выровнен по центру экрана
. В данном примере атрибут align (выравнивание) расположен внутри тега
, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана.

Ниже приведена структура типичного Web-документа.




Этот тег указывает на начало HTML-документа



Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования общей структуры документа.

Название Web-страницы

Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна браузера.



Этот тег несет служебную информацию и не отображается на экране браузера. В данном случае идет речь о кодировке Web-страницы. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день.



Имя автора Web-страницы.



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



Конец области заголовка Web-страницы.



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

Здесь расположен заголовок вашей странички



Элемент заголовка


Здесь расположен текст первого абзаца вашей странички




Элемент абзаца.


Здесь расположен текст второго абзаца вашей странички




Конец содержимого Web-страницы.



Конец HTML-документа.


Теги можно записывать как строчными, так и заглавными латинскими символами.
^

Правила синтаксиса


1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.






.....





..................






2. Необходимо всегда использовать конечные теги (не забывать
,

,
и др.).

3. Не нарушать правила вложения тегов. Правильно: ^

Заголовок крупный

Заголовок поменьше

. Не правильно:

Заголовок крупный

Заголовок поменьше



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

5. Все атрибуты располагаются в начальном теге.

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

Элемент

Тег

Атрибуты


Абзац





- выравнивание текста по левому краю экрана.

- выравнивание текста по центру экрана.

- выравнивание текста по правому краю экрана.

- выравнивание текста по ширине страницы.

Принудительный переход на новую строку




 

Выделение текста полужирным шрифтом



 

Выделение текста курсивом



 

Определение типа, размера и цвета шрифта.



- абсолютный размер шрифта (возможные значения от 1 до 7).

- цвет шрифта

- определение названия шрифта.

- все атрибуты могут быть использованы совместно внутри данного тега.

Цитата



 

Маркированный список



    ?


  • ?


  • ?




Имеет атрибут type, задающий вид маркера в списке: "disc", "square", "circle" (по умолчанию "disc"). А каждый элемент списка определяется тегом


  • Нумерованный список



      ?


    1. ?


    2. ?




    Имеет атрибут type, задающий тип нумерации: арабские цифры, римские цифры, буквы (по умолчанию арабские цифры). Каждый элемент списка определяется тегом

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


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

    ^ Градации красного



    Градации зеленого



     Градации синего



    Градации оранжевого



    Компьютерная радуга:


    ^

    Использование цвета при офoрмлении страницы


    Цвет шрифта можно задать с помощью атрибута color в теге , например:

    Это цветной текст 1   

    Это цветной текст 2

    Чтобы задать цвет фона страницы используется атрибут color внутри тега , например:


    Тэги списков


    Существует три основных вида списков в HTML-документе:

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

    Пронумерованные списки


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

    Пронумерованный список начинается стартовым тэгом
      и завершается тэгом
    . Каждый элемент списка начинается с тэга
  • и заканчивается тегом
  • . Например:



    1. Программирование

    2. Алгоритмизация

    3. Проектирование



    Тэг
      может иметь параметры:

        где: TYPE - вид счетчика:


        START=n - число, с которого начинается отсчет. Например:



        1. Программирование

        2. Алгоритмизация

        3. Проектирование


        Непронумерованные списки


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

        Cписок начинается стартовым тэгом . Каждый элемент списка начинается с тэга
      1. . Например:



        • Программирование

        • Алгоритмизация

        • Проектирование



        Тэг
          может иметь параметр: TYPE=disc|circle|square>. Тип тэга
            определяет внешний вид маркера - по умолчанию (disc), круглый (circle) или квадратный (square). Например:



            • Программирование

            • Алгоритмизация

            • Проектирование


            Списки

            Вложенные списки


            Дадим пример вложенных списков:





            Список сотрудников





            ^

            Список сотрудников нашей фирмы



            Составлено : 30 июля 2006 года




            Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

            Список может быть использован только в служебных целях.




            1. Дирекция



              • Иванов И.И.

              • Петров К.В.





            2. Отдел маркетинга



              • Варшавская Е.Л.

              • Самсонов Д.М.













            Список определений


            Список определений начинается с тэга
            и завершается тэгом
            . Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом
            , а описание - тэгом
            . Например:



            ^ Отдел маркетинг

            Данный отдел занимается продвижением продуктов и услуг

            Финансовый отдел

            Данный отдел занимается всеми финансовыми операциями

            ^ Отдел кадро

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


            Работа с графическими объектами


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

            Необходимым атрибутом является src - указатель на файл графики:

            src="/Ссылка на файл". Например: - анимированный рисунок.

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

            Например: .

            Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height - высота и width - ширина.

            Например:

            . Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.

            Атрибут border задает рамку вокруг объекта, например, border='2'- ширина рамки задается в пикселях и в нашем примере равна 2.

            Например: фото.

            Вставка гиперссылок


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

            Произвольный текст Текст для щелчка

            Например, так выглядит гиперссылка в тексте: Если вы хотите вернуться к материалам урока "Гиперссылки", то вам сюда, при этом надо предварительно поставить имя закладки перед тем местом в документе, на которое происходит переход. Закладка в документе задаётся в следующем виде: . В наше случае это имя zakl2.

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



            Например: Чтобы вернуться к уроку "Гиперссылки" нажмите на кнопку

            Внутри тега используются атрибуты link - задает цвет ссылок на всей Web-странице, vlink - задает цвет посещенных ссылок, alink - задает цвет активных ссылок (цвет появляется при нажатии мыши).

            Пример:

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

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

            href="/./Папка/файл.тип". Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если необходимо указать папку, которая находится на том же уровне вложенности, что и текущая, добавляют еще одну точку: href="/../Папка/файл.тип".

            Если ссылка указывает на какой-либо Web-ресурс, то она выглядит следующим образом, например: href="http://www.netscape.com".

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

            admin@cko-bait.ru Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript >Письмо администрации сайта

            Работа с таблицами


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

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

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

            Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:
            .

            - внешний элемент таблицы.










            TABLE>

            Начало таблицы


            Начало первой строки

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

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


            Конец первой строки


            Начало второй строки

            Первая ячейка второй строки
            Первая ячейка второй строки

            Вторая ячейка второй строки
            Вторая ячейка второй строки


            Конец второй строки



            Конец таблицы

            Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне браузера.

            Например, если нам нужно создать таблицу определенного размера, то мы укажем:









            Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.


            Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.











            Ширина этой таблицы 100%. и она состоит из одной строки и двух столбцов


            Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB", например:



































            Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.























            Ширина этой таблицы 300 пикселей
            и она состоит из двух строк и трех столбцов


            Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:























            Ширина этой таблицы 300 пикселов
            и она состоит из двух строк и трех столбцов


            Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:

            left - выравнивание влево;

            right - выравнивание вправо;

            center - центрирование.

            Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

            top - выравнивание по верхнему краю ячейки

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

            baseline - выравнивание по первой строке.

























            Выравнивание по горизонтали По центру По левому краю По правому краю
            Выравнивание по вертикали По верхнему краю По центру По нижнему краю




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


            Некоторые WWW-браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на Вашем WWW-сервере. Когда форма интерпретируется WEB-браузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введённая пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

            Когда Вы описываете форму, каждый элемент ввода данных имеет тэг . Пользователь, помещает данные в элемент формы, и инфоромация размещается в разделе VALUE данного элемента.

            Синтаксис


            Все формы начинаются тэгом
            и звершаются тэгом
            .

            Обший вид:

            Элементы_формы_и_другие_элементы_HTML


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

            • GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.

            • POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных Вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.

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

            Тэги Формы


            Тэг

            Атрибуты, используемые внутри тэга необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:

            • NAME - имя поля ввода.

            • ROWS - высота поля ввода в символах.

            • COLS - ширина поля ввода в символах.

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

            Тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга:

            • ^ CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.

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

            • NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, Вы сможете получить данные, помещенные пользователем в это поле.

            • SIZE - определяет визуальный размер поля ввода на экране в символах.

            • SRC - URL, указывающий на картинку (используется совместно с атрибутом IMAGE).

            • TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны: CHECKBOX. Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

            • HIDDEN - поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, как то ID прользователя, пароля или другой информации.

            • IMAGE - данный тип поля ввода позволяет Вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселах (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом .

            • PASSWORD - то же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране.

            • RADIO - данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив Вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.

            • ^ RESET - данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.

            • SUBMIT - данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

            • TEXT - данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

            • VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

            Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:



            • SELECT - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Даннй вид представляется как выпадающий LISTBOX.

            • ^ SELECT SINGLE - то же самое, что и SELECT, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг.

            • ^ SELECT MULTIPLE - позволяет выбрать несколько элементов из LISTBOX.

            Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

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