Основные дескрипторы и их синтаксис языка HTML. Структура HTML документа. Что это - дескриптор? Описание структуры атрибута Дескрипторы в html и их обозначения

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

Итак, первый HTML-редактор, на который пал наш взор, стал Macromedia HomeSite.

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

Увеличить картинку

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

Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Данный факт придется по душе опытным пользователям, которые не ограничиваются средствами языка гипертекстовой разметки и используют более сложные языки веб-программирования. Если же Вас не устраивает текущая цветовая схема подсветки синтаксиса, то это не проблема - можно отредактировать существующую, или даже создать собственную схему оформления документов. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.

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

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

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

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

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

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

Для повышения скорости создания документов можно воспользоваться клавиатурными сокращениями - HomeSite предоставляет обширное поле деятельности для любителей клавиатуры. Например, тегу
соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш.

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

Скачать последнюю версию Macromedia HomeSite можно по этому адресу .

Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. В отличие от HomeSite, SiteEdit относится к так называемым визуальным средствам разработки - WYSIWYG-редакторам (от заглавных букв выражения What You See Is What You Get - "что видите, то и получите").

После первого запуска программы появляется готовый шаблон веб-узла.

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

После щелчка по кнопке "Изменить раздел" появляется новое окно, в котором и можно проделать эту нехитрую операцию:

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

Программа предлагает несколько шаблонов оформления: book, galeon, kafe, palm_skin, stroitel, благодаря которым можно существенно изменить облик всего сайта в целом.

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

увеличить картинку

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

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

Любопытно, что напрямую сохранить код странички из программы невозможно, для этого необходимо выбрать пункт "Просмотр страницы в браузере", и лишь из браузера можно сохранить страницу в виде html-файла. Данный подход, видимо, связан с тем, что в версиях Standard и Business программы SiteEdit имеется возможность выгрузки всего проекта сразу на хостинг, однако в бесплатной версии Start данная возможность, к сожалению, отсутствует. Отсюда и подобные неувязки.

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

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

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

SiteEdit выпускается в трех основных версиях - Start, Standard, Business, и двух дополнительных -Partner. Загрузить версию Start программы SiteEdit можно отсюда .

Еще одна Freeware-программа, которая попала к нам в обзор - это HTML Source. Первое, что бросилось в глаза - небольшой размер дистрибутива программы - всего 1,5 Мб! Это навело на несколько скептические мысли о функциональности программы и ее возможностях. Однако мы были приятно удивлены.

увеличить картинку

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

В верхней части рабочей области программы имеется обычная панель инструментов, на которой расположены кнопки для создания нового документа, открытия существующих файлов, печати файла, проверки орфографии и прочие распространенные действия. Все пиктограммы выполнены в неплохом стиле, однако огорчает лишь отсутствие всплывающих подсказок при наведении на ту или иную иконку действия. Примечательно, что программа сама определяет, какие браузеры установлены в системе, и в панели инструментов имеются иконки для просмотра документа в имеющихся у пользователя браузерах. В моем случае, кроме стандартного Internet Explorer, были уставлены также Opera и Mozilla FireFox, что и продемонстрировала программа.

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

HTML Source предлагает подсветку синтаксиса HTML-файлов, однако, на мой взгляд, реализация данной функции в программе несколько уступает таковой в HomeSite. Во-первых, часть кода, относящаяся к определению стилей, вовсе не подсветилась. А во-вторых, отсутствует возможность самостоятельной настройки цветовой схемы, которая присутствовала в том же HomeSite.

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

В меню "Tags" сосредоточены основные группы HTML-дескрипторов.

Наибольший же интерес вызывает содержание меню "Tools", в котором и собраны все инструменты данного программного средства. Разберем его содержимое более пристально.

Пункт "Convert Case" позволяет сменить регистр букв, т.е. либо инвертировать его, либо привести к одному определенному. Следующий пункт "Convert CodePage" позволяет быстро сменить кодировку всей страницы. Среди оставшихся пунктов необходимо отметить встроенный модуль проверки орфографии, и средство для оптимизации HTML-кода под названием Tidy, который приводит вид документа в соответствии с требованиями организации W3C, которая и занимается разработкой стандартов языка гипертекстовой разметки.

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

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

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

Таким образом, HTML Source придется по душе опытным разработчикам, причем не только как средство разработки, но и как справочное пособие. Скачать HTML Source можно по этому

Следующей программой, попавшей к нам в обзор, стала Magic HTML Studio, разработанная компанией AG FreeSoft. После запуска программы нашему взору предстала необычная картина - уж больно необычен был дизайн Magic HTML Studio.

Кому-то подобный интерфейс может и придется по душе, но, на мой взгляд, не совсем удачное решение для программы подобной направленности. Также огорчил факт отсутствия какой бы то ни было подсветки синтаксиса документа. Ну да ладно, отбросим все претензии к дизайну, и посмотрим, как у Magic HTML Studio обстоят дела с функциональной составляющей.

А вот тут все как раз на высшем уровне! Чего только стоят такие инструменты, как Java Constructor и CQI QuickBuilder. Но обо всем по порядку.

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

Теперь перейдем непосредственно к средствам и инструментам, уникальным именно для Magic HTML Studio. Java Constructor представляет собой мощное, и одновременно простое средство создания скриптов на языке JavaScript, причем для этого пользователю совершенно не нужны знания данного языка программирования. С помощью конструктора можно вставить календарь или часы на вашу страницу, сделать динамическое или выпадающее меню, сотворить простенький баннер, состоящий из нескольких картинок и некоторые другие полезные динамические элементы.

увеличить картинку

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

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

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

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

Плюсы: продвинутые конструкторы JavaScript и CGI-скриптов, широкие возможности для добавления динамических элементов, справочная система на русском языке.

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

Microsoft FrontPage, входящий в пакет Microsoft Office, является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода.

Интерфейс программы во многом напоминает таковой и Microsoft Word, что нисколько не удивляет - унификация внешнего вида поможет новичкам быстрее освоить основные возможности FrontPage.

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

увеличить картинку

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

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

FrontPage, благодаря тесной интеграции с другими продуктами корпорации Microsoft, позволяет вставить в веб-документ различные типы объектов: от картинок и диаграмм до листов Microsof Excel.

Разумеется, FrontPage имеет конструктор таблиц, существенно облегчающий их создание.

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

Выбрав необходимый шаблон, можно приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Пользователю доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений. Программа позволяет с легкостью создавать маркированные, нумерованные и многоуровневые списки - и все это без знания языка HTML!

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

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

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

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей пользователя его возможностей может не хватить.

И, наконец, последняя программа в нашем обзоре Macromedia Dreamweaver MX 2004. Немалый размер дистрибутива (62 Мб) позволяет ожидать многого от этой HTML-редактора. И действительно, возможности Macromedia Dreamweaver MX 2004 впечатляют. После установки пользователя просят выбрать внешний вид программы, который отличается в зависимости от подхода к созданию веб-документов. При выборе "Code" интерфейс программы будет подстроен под нужды кодировщика, а при выборе "Design" - соответственно, дизайнера. Впрочем, всегда имеется возможность для переключения между этими двумя режимами, а также доступен третий, комбинированный режим - рабочая область программы делится на две части.

увеличить картинку

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

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

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

Для пользователей, знакомых с возможностями языка HTML, можно порекомендовать использовать инструмент под названием Tag Chooser, с помощью которого можно вставить не только любой HTML-тег, но и основные выражения и операторы таких языков программирования, как JavaScript, ASP.Net, PHP, WML и ColdFusion. Все это открывает новые горизонты использования программного средства при разработке различных сложных проектов с использованием серверных языков программирования.

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

При работе в режиме "Code" рабочая область программы напоминает таковую у HomeSite - чувствуется, что у продуктов один создатель, однако функциональность у Dreamweaver все-таки повыше. Чего стоит только один конструктор таблиц, предоставляющий разработчику небывалую гибкость при создании таблиц. Более того, при создании таблицы программа предлагает использовать один из шаблонов оформления, коих насчитывается несколько десятков, причем при выборе определенного шаблона тут же имеется возможность подстроить его под свои нужды, откорректировав некоторые его атрибуты. После создания таблицы и наполнения ее содержимым становится доступным сортировка таблицы по какому-либо столбцу. И все это - в визуальном режиме, сам код же, естественно, меняется автоматически.

Macromedia Dreamweaver MX 2004 может использоваться совместно с другими продуктами компании - Macromedia Fireworks, Flash и др.

Если же выбор пользователя, который предпочитает создавать документы в визуальном режиме, практически очевиден, то перед "кодировщиком" появляется непростая задача в выборе между двумя продуктами Macromedia: HomeSite или Dreamweaver MX 2004? Можно отметить, что возможности Dreamweaver MX 2004 будут лишними для кодера, однако при большом объеме рутинной работы можно вполне воспользоваться визуальным режимом - если программа предлагает его, то почему бы не попробовать? Пользователи же HomeSite подобной возможности лишены, но зато программа предлагает им весь необходимый набор инструментов для комфортной разработки веб-документов различной сложности.

Таким образом, каждый волен выбирать нужный ему продукт самостоятельно, учитывая поставленные цели и имеющиеся знания. Разумеется, вопрос также и в цене - оба продукта Macromedia распространяются как Shareware, но их можно бесплатно использовать в течение 30-дневного пробного срока. Этого времени вполне достаточно, чтобы определиться с выбором.

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

Минусы: большой объем дистрибутива, высокая цена продукта.

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

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

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

Вопросами стандартизации языка HTML занимается организация World Wide Web Consortium (W3C). Несмотря на необходимость обеспечить полную программную и аппаратную независимость Web-страниц, в полной мере реализовать эти принципы довольно сложно. Одна из проблем состоит в том, что работа над языком продолжается. Появляются новые версии HTML, предоставляющие дополнительные возможности для разработчиков Web-страниц.

Существует множество специализированных HTML-редакторов, которые можно условно разделить на два типа:

визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold и др.). При работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа. Кстати, существуют конверторы текстовых документов, подготовленных в Word и Word Perfect, в формат HTML-файлов;

редакторы собственно HTML-текстов, позволяющие автоматизировать набор и редактирование кода (например, HomeSite, HotDog, Ken Nesbitt Web Editor и многие другие). Эти программы дают возможность пользователю быстро и легко вставлять в документы элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.

Кроме перечисленных двух категории, существуют программы, объединяющие в себе черты текстовых и визуальных HTML-редакторов к таким программам относится HotMetal разработки компании SoftQuad Sofware.

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

При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице, правда, в тех случаях, когда не используются фреймы. Если же страница представляет собой документ планировки фреймов (подробнее об этом в разделе «Фрей мы» главы 3), то вместо элемента BODY используется элемент FRAMESET.

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

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

В приведенном ниже примере есть два абзаца (первый в зеленой рамке) и таблица:

<Р style="border: Зрх solid дгееп">Текст абзаца 1

<Р> Текст абзаца 2

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

Можно использовать другой код:

<Р style="border: Зрх solid дгееп">Текст абзаца 1

<Р> Текст абзаца 2

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

И наоборот, элемент Р может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев Р.

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

<Н1>Заголовок 1 <Н2> Заголовок 2 Заголовок 3

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

Некоторые элементы не имеют конечного теги. Очевидно, что элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом или без него. Самым ярким примером служит элемент абзаца Р. Он может иметь конечный тег, но если этот тег не задан, то при знаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент Р, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и т. д. Таким образом, полезная информация одного элемента должна находиться либо между начальным и конечным тегами данного элемента, либо между начальным тегом данного и начальным тегом следующего элемента. Любой произвольный текст, введенный на страницу, воспринимается браузером как подлежащий выводу на экран и, следовательно, форматированию в соответствии с окружающими этот текст элементами. При этом не учитывается разбиение текста на строки, полученное в текстовом редакторе. Теоретически, всю Web-страницу можно уместить в одной длинной строке. Символы конца строки, введенные, например, в Блокноте, могут помочь чтению кода HTML, но не отображаются браузером. Последний, при выводе страницы на экран, может оборвать строку в соответствии с расстановкой элементов Hn, P или BR, а в остальных случаях он форматирует абзацы произвольно, в зависимости от объема текста, размера шрифта и текущего размера окна. Поэтому Web-страницы надо компоновать таким способом, чтобы их вид кардинально не изменялся для разных режимов разрешения монитора, размера экрана, размера окна браузера, а также для полноэкранного или оконного режимов. Очень важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега .

Символы, заключенные в угловые скобки являются HTML командами, по которым «браузер» распознает, как следует преобразовать части текста, заключенные между этими командами.

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

Документ состоит из 2 частей:

заголовка (Head).

документа (Body).

При написании команд HTML не имеет значение, какими буквами – строчными или прописными Вы пишете команды.

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

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >.

Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL. Общую схема документа показана на рисунке 1.1.

Рисунок 1.1. Общая схема документа в формате HTML

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

Моя первая Web-страница

Результат: Моя первая Web-страница.

Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

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

Запишем пример простейшего документа:

<ТIТLЕ>Пример HTML-страницы

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.

Тег

Ричард Бах

Единственная

Мы прошли долгий путь, правда?

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

В окне браузера будет выводиться как показано на рисунке 1.4.

Рисунок 1.4. Разбиение на абзацы.

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

» html для новичков

» Главная страница

» html для новичков

Основные Тэги (Дескрипторы) языка html

По традиции всех классических руководств по HTML мы приводим самый простой гипертекстовый документ.

Здесь размещен заголовок первого уровня

Добро пожаловать в Internet!

Первый и последний параграф.

В этом примере мы использовали следующие термины гипертекста (так называемые тэги):

Название документа

Это не правило, и даже не закон, это факт:

Любой документ HTML имеет название.

По названию вашего документа HTML другие обозреватели могут найти информацию. Место для названия всегда определено – оно находится вверху экрана, и отдельно от содержимого документа. Максимальная длина названия – 40 символов.

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

Форматирование может быть непосредственным или авторским. Если вы используете тэг

Следующие тэги присущи непосредственному форматированию:

Параграф.

Обрыв строки.

Заголовки и подзаголовки

Язык HTML позволяет вам работать с шестью уровнями заголовков. Первый заголовок – самый главный. На него обращается особое внимание. Остальные заголовки могут быть оформлены, например, жирным шрифтом или прописными буквами.

В HTML первый заголовок обозначается как

:

Текст

Под n понимается уровень заголовка, то есть, числа 1, 2, 3, 4, 5 или 6.

В HTML первый заголовок может совпадать с названием документа.

Списки подразделяются на ненумерованные:

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

нумерованные:

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

c описаниями:

Собака (элемент)

Друг человека (описание элемента)

и вложенные:

Примус

Другой примус

Выделение текста

Текст в документе HTML может быть выделен одним из следующих способов:

- цитата

- программный код

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

- логический акцент

- ввод с клавиатуры

- сообщения компьютера

- сильный акцент

- переменные

Один большой параграф

В HTML разбиение на строки не принципиально. Это означает, что вы можете разбить строки вашего документа в любом его месте. Связано это с тем, что в гипертекстовом документе идущие подряд отбивки превращаются в одну. Но! Если отбивка сделана после тэга

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

HTML позволяет вам связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием.

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

¦ наберите

¦ введите HREF=”filename”>

¦ наберите тэг

Bob

Здесь слово Bob ссылается на документ BobAnapa.html, образуя гипертекстовую ссылку.

Bob

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

protocol: //hostport/path

Предварительное форматирование текста

Тэг

Позволяет сформировать текст, оформленный моноширинным шрифтом.

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

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

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

 
Встроенные изображения
 
Вы можете встраивать в ваш документ картинки. Синтаксис встроенной картинки следующий:
 

 
Здесь image_URL есть указатель на файл картинки, синтаксис которого совпадает с синтаксисом ссылки HTML.
Реферат

1. Краткая история WWW
2. Язык HTML - построение Web-документов:
а) шаблон Web-документа
б) форматирование текста
в) форматирование параграфов
г) работа с изображениями изображений:
I. фоновые изображения
II. статические и динамические изображения



е) фреймы:
I. Вертикальные фреймы
II. Горизонтальные фрейм
III. Вложенные фреймы
Альтернативные средства офрмления документов
1. Краткая история World Wide Web
Общеизвестно, что сеть Internet–это, в частности, громадное хранилище всевозможной информации. До появления службы World Wide Web (WWW) навигацию по Internet в поисках нужной информации нельзя было назвать удобной. Чтобы получить файл с FTP–сервера, приходилось отдельно загружать приложение–клиент. При этом нужно было помнить свой пароль, приходилось перемещаться по многочисленным каталогам в поисках нужного файла, не забывая перед его получением установить правильный режим передачи; знать многочисленные команды работы с FTP–серверами и т.д. Если же нужно было просмотреть какую–либо конференцию, то приходилось запускать уже другое приложение, у которого был свой набор команд для чтения, пересылки, сохранения сообщений из конференций. Все это былонеудобно.
Около пяти лет назад была предпринята попытка организовать информационный порядок в сети Internet. Это привело к появлению службы World Wide Web (Всемирная Паутина), которая получила рождение в Европейском Центре Ядерных Исследований в Швеции. В основе идеи WWW лежат так называемые hypermedia

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

 документами, что в общем, не совсем верно.
На экране типичный Web–документ выглядит как набор текстасо ссылками, могут присутствовать различные иллюстрации. Документ можно листать, просматривая содержимое, быстро перемещаться по нему или другим документам с помощью ссылок.
С появлением WWW сеть Internet стала обслуживать текст и графику, с помощью мыши стало возможным путешествовать по всему миру и легко находить нужную информацию с помощью простого указания и щелчка. Стало легко перекачивать файлы и читать конференции. Вот почему служба WWW приобрела всемирную популярность и получила большое распространение. Каждый день в сети Internet появляются в больших количествах Web–серверы и публикуются тысячи новых документов.
Для построения Web–документов в WWW используется специальный язык HTML, что означает HyperText Markup Language – язык гипертекстовой разметки, язык форматирования данных. Основанный на языке SGML (Standard Generalized Markup Language), язык HTML определяет форматирование и организацию данных в Web–документах. Он не определяет то, как точно будет размещен текст на экране, этот язык определяет структуру данных. Web–документ может содержать не только текстовую информацию, и поэтому язык HTML правильнее было бы называть HyperMedia Markup Language, однако в литературе практически всегда употребляется аббревиатура HTML. Документ, созданный на языке HTML – это обычный файл в ASCII–формате. В его основе лежат специальные дескрипторы (теги), которые и определяют форматирование данных в любом Web–документе. Естественно, для просмотра HTML–документов в World Wide Web необходимо специальное программное обеспечение. Такие программы называются броузерами (от англ. browse

 – листать, просматривать). С их помощью можно загружать и просматривать Web–странички, осуществлять навигацию по WWW и т.д. В настоящий момент существует довольно большое количество броузеров, из которых самыми популярными являются броузеры Microsoft Internet Explorer, Netscape Navigator и NCSA Mosaic. Броузер, прочитав HTML–файл, с помощью дескрипторов интерпретирует содержащиеся в документе данные и соответствующим образом отображает их на экране компьютера.На рис. 1 показан пример Web–документа:
Рис.1 Пример Web–документа
Язык HTML быстро развивается. В процессе своего развития он приобретал новые возможности и утрачивал мало использовавшиеся и устаревшие. В настоящий момент текущей официальной версией языка HTML является версия 3.2, обладающая развитыми средствами построения Web–документов. По сравнению с версией HTML 2.0 новая версия предлагает такие новые возможности, как таблицы, «обтекание» изображений текстом, встраивание апплетов Java и др. возможности.
На сегодняшний день кроме официальной версии языка также существуют версии HTML от фирм Microsoft и Netscape, которые также поддерживают и дополнительные возможности, не описанные в спецификации к официальной версии HTML. Чтобы решить проблему совместимости броузеров при отображении документов, составленных с использованием элементов неофициальных версий языка HTML, вышеупомянутые фирмы включают в свои продукты поддержку альтернативной версии языка. На подходе уже есть версия языка под номером 4.0, называемая Dynamic HTML, обещающаяусовершенствованные старые и новые захватывающие возможности для оформления Web–документов. W3C (World Wide Web Consortium – организация по стандартам в World Wide Web) уже предлагает на рассмотрение эту версию языка как стандарт. Существуют варианты новой версии языка от фирм Microsoft и Netscape, которые, однако, пока несовместимы между собой. В настоящей работе раскрываются основные средства построения документов из языка HTML версии 3.2 фирмы Netscape Communications.
2. Язык HTML. Построение Web–документов
Как было сказано выше, форматирование документа на языке HTML задается специальными дескрипторами. Дескриптором называется команда форматирования данных и заключена эта команда в угловые скобки «<» и «>». Существуют открывающие и закрывающие дескрипторы, между которыми размещается текст, подлежащий форматированию. Открывающие дескрипторы задают способ форматирования, вторые его отменяют. Разница между такими дескрипторами заключается в том, что в закрывающем дескрипторе перед именем стоит косая черта. Например, дескрипторы . Существуют также дескрипторы, которые не требуют закрывающего варианта.
Язык HTML не чувствителен к регистру букв, поэтому все дескрипторы можно задавать как прописными, так и строчными буквами. Броузер будет их однозначно интерпретировать в любом написании.
Если просмотреть исходный текст типичной Web–странички, то можно увидеть примерно следующее содержание:
заголовок документа

текст

текст

текст

текст

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

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

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


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

 , где число n – число от 1 до 7, определяющее размер шрифта относительно обычного. Таким образом, следующий текст в теле документа
Этот  текст  на четыре размера больше обычного
на экране будет выглядеть следующим образом:
Этот текст на четыре размера больше обычного.
Необходимо заметить, что пары дескрипторов  и , а также  и  являются элементами языка HTML версии фирмы Netscape и поэтому могут не поддерживаться остальными броузерами.
Форматирование абзацев
Текстовая информация, размещаемая на Web–страницах, организована в абзацы. Абзац начинается дескриптором <Р> и завершается закрывающим дескриптором 
, однако последний необязателен. Пример кода на HTML:

Первый абзац 

Второй абзац 

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

Создание заголовков

Заголовки различного уровня задаются с помощью дескрипторов  и , где n – число от 1 до 6. Самый крупный заголовок задается дескриптором 
, самый маленький – дескриптором 
. Например:

 Это заголовок уровня 1 

 Это заголовок уровня 3 

 Это заголовок уровня 6 

В результате на экране будет выведено:
Это заголовок уровня 1

Это заголовок уровня 3

Это заголовок уровня 6
Заголовки являются одним из наиболее часто используемых элементов оформления документов в WWW.
Создание списков

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

Нумерованный список:
 Элемент списка

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

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

Результат:
Ненумерованный список:
 Элемент списка

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

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

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

 Пояснение первого понятия

 Второе определяемое понятие

 Пояснение второго понятияі

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


Атрибут HREF указывает на имя метки в текущем документе.


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

 Это метка 
На экране метка в отличие от ссылок ничем не выделяется среди остального текста.


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

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

Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый броузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.
Атрибут ALT указывает на текст, который будет выводиться в окне броузера вместо изображения, если, например, броузер пользователя не поддерживает графику или же отключена опция загрузки изображений. Этот атрибут не является обязательным, однако его использование считается хорошим стилем при составлении Web–документов.
Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:

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

Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:
LEFT – текст будет охватывать изображение слева-снизу.
RIGHT – текст обхватывает изображение справа-снизу
TOP – изображение окружено текстом справа-сверху
BOTTOM – изображение окружено текстом справа-снизу
MIDDLE – изображение окружено текстом справа-посредине
Например, при составлении Web–странички, приведенной на рис. 1, была использована такая запись в теле документа, описывающая изображение:

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

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

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

 Текст


 Область задания фреймовой структуры


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

Ваш броузер не поддерживает фреймы!




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

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

В строке размеров элементы отделяются запятой и могут быть заданы следующем образом:
value% – относительный размер фрейма в процентах. Например: 10%,40%,50% – на первое окно выделяется 10% от общего размера окна броузера, на второе окно – 40%, и на третье – 50% соответственно;
value – абсолютный размер в пикселях. Например: 100,540 – на первый фрейм выделяется область шириной в 100 пикселов, на второй – все оставшееся место (для видеорежима монитора 640х480).
C помощью дескрипторов  задается только структура фреймов. Для размещения данных во фреймах используются дескрипторы , не имеющие закрывающего варианта. Количество этих дескрипторов обязательно должно соответствовать количеству фреймов, заданных до этого. Каждый дескриптор  указывает на URL некоторого документа, который будет отображен в соответствующем фрейме. Это осуществляется с помощью атрибута SRC=URL_ДОКУМЕНТА. При загрузке фрейм–содержащего документа окно броузера будет разбито на подокна, а затем в них будут загружены документы. Пример использования фреймов можно увидеть на рис.1, где изображено окно броузера, разбитое на два фрейма.
При переходе по ссылке в обычном документе его содержимое полностью исчезает с экрана и заменяется новым содержимым другого документа. При использовании фреймов есть возможность при активации ссылок изменять содержимое окна в текущем фрейме, содержимое окна другого фрейма или всего окна броузера. Это осуществляется с помощью комбинации дескриптора  и атрибута TARGET (от англ. target

– цель). В общем случае формат этого дескриптора выглядит так:

 Текст гипертекстовой ссылки 
Параметр ИМЯ_ЦЕЛИ представляет собой зарезервированное слово, начинающееся со знака подчеркивания ‘_’. Вот список наиболее употребительных параметров:

TARGET=_TOP – обновляется содержимое окна всего броузера.
TARGET=_BLANK – документ будет открыт в новом окне броузера.
На первый взгляд может показаться, что использование параметров «_TOP»и «_BLANK» равнозначно, так как в обоих случаях старое содержимое окна полностью заменяется содержимым другого документа. Однако в первом случае можно вернуться к предыдущему содержимому окна средствами самого броузера (с помощью кнопки BACK на панели инструментов), а во втором случае способ возврата к содержимому предыдущего документа возлагается на составителя Web–странички или самого пользователя.
3. Другие элементы языка

HTML

Наряду с наиболее популярными элементами языка HTML существуют и такие, которые хоть и не находят повсеместного применения, все же используются при составлении страничек в WWW.
Если при подготовке публикации (например, подготовка электронных новостей) необходимо на страницу вынести некую цитату, то простым указанием теста с кавычками не обойтись – броузер воспринимает символы кавычек как управляющие, и на экране они отображены не будут. В таком случае необходимо заключить текст-цитату в специальные дескрипторы . Лишь в этом случае броузер выведет текст, заключенный в кавычки.
Кроме того символа кавычек существует еще набор символов, которые броузер считает управляющими и для того, чтобы вывести их на экран, необходимо в тело документа вставлять специальные команды. Ниже приводится список команд для наиболее употребительных символов:
Ранее было замечено, что броузер автоматически осуществляет перенос текста, если строка не помещается на экране. Тем не менее, случается так, что необходимо вывести текст одной строкой без разрыва. Для этого нужно поместить перед строкой текста одиночный дескриптор , который является расширением языка HTML фирмы Netscape. Какой длинной не была бы строка, броузер ее полностью выведет на экран без переноса.

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

Дескриптор  используется для работы с музыкальными файлами, атрибут SRC указывает на файл, который будет загружен. Атрибут AUTOSTART указывает броузеру, нужно ли проигрывать данный файл после загрузки или нет. Атрибут HIDDEN также как и атрибут AUTOSTART принимает логическое значение и сообщает броузеру, что на экран нельзя выводить кнопки управления процессом воспроизведения файла. Если же два последних атрибута принимают значения FALSE, то после загрузки музыкального файла броузер выведет на экран кнопки управления воспроизведением, и пользователь в любой момент может проиграть файл, остановить воспроизведение, заново воспроизвести файл.
Также находят свое применение в Web–страничках такие структуры данных, как таблицы. Они помогают в определенных случаях удобно организовать некоторые данные, скажем, некоторую сводку цифр, каких-то расчетов и т. д. На экране такие таблицы выглядят аналогично привычным нам таблицам на бумаге или в приложениях типа Microsoft Excel. Кроме представления табличных данных таблицы можно использовать, например, для оформления: произвольного расположения изображений и текста, на экране. Методы построения таблиц вследствие своего объема и некоторой сложности в данной работе не приводятся.
Те, кто хоть раз пользовался при навигации в World Wide Web для поиска информации поисковыми машинами, обязательно сталкивался с так называемыми формами. Это специфические, хотя и весьма популярные возможности языка HTML. Формы представляют собой поля ввода текста, флажки, радиокнопки, списки и др. формы интерактивного общения с пользователем. Данные, вводимые в формы, отсылаются на Web–сервер для дальнейшей обработки, после чего результаты обработки высылаются назад пользователю. Составление документов с использованием форм является признаком профессионализма дизайнера, так как требует кроме хорошего знания языка HTML также и умение работать с языками сценариев, что является неотъемлемой частью работы с формами. Средства описания форм в документах в данную работу не входят.
4. Альтернативные средства составления Web–документов
Язык HTML является основным средством организации данных в World Wide Web и пока не существует других языков, которые служили бы ему полной альтернативой. Поэтому говорить о том, в чем этот язык превосходит другие языки или в чем он им уступает,не приходится. Хотя нужно заметить, что свои ограничения в HTML присутствуют.
В последнее время в дизайне Web–документов все чаще используется популярный язык Java, который способен преодолеть ограничения HTML. В связке с HTML язык Javaпредлагает пользователю средства оформления документов, которые трудно или даже невозможно реализовать с помощью одного лишь HTML. Это, например, создание трехмерной анимации на экране, выполнение апплетов (приложений) на машине пользователя, пересылаемых с сервера. Язык Javaпредоставляет более гибкие и удобные способы общения с пользователями, например, более развитые формы ввода данных. С помощью этого языка можно внести некоторую динамику в любой Web–документ, например, заставить на экране изображения сменять друг друга с произвольной периодичностью и порядком. Таким образом, Javaдобавляет больше интерактивности в документах. Но сам Javaне позволяет так быстро разрабатывать Web–странички, как это можно сделать с помощью HTML, и требует намного больше времени для изучения.
В заключение можно сказать, что комбинация языков HTMLи Javaпредставляет собой мощное средство для построения красочных и профессиональных Web–документов.

Как говорилось, HTML на сегодняшний день является основой для написания любой веб страницы во Всемирной паутине. При использовании CSS создание кода на языке HTML коренным образом меняется. Можно попрощаться с перепрофилированием неуклюжих HTML тегов просто для того, чтобы добиться тех или иных визуальных эффектов. О некоторых HTML тегов или атрибутах, таких как, например, устаревший тег …
Главная
 
   Закажите сайт и займитесь бизнесом!



  Данную фразу можно услышать и увидеть на многих сайтах, а это ведь не зря!


 Сайт


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


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


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


  Важнейшими достоинствами HTML являются:


  простота, позволяющая изучить HTML в кротчайшие сроки.


  возможность создания собственных Web страниц


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


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


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