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

Главная

Закажите сайт и займитесь бизнесом!

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

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

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

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

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

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

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

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

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.
Сегодняшняя статья затрагивает весьма актуальную тему среди начинающих программистов и 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
, важнейшим определением является «тег
» (от англ. «tag», иногда также пишут «тэг»).
Тег
 — это символьное или текстовое выражение (для наглядности, позволим себе не вполне корректную аналогию с терминами «команда» или «оператор» из языков программирования), предписывающее предпринять какое-либо определённое действие непосредственно по
разметке
 и форматированию
 экранного представления веб-страницы
.
То есть, это ни в коем случае не оператор и не команда, но именно указание (например, слева сделать отступ, справа разместить иллюстрацию конкретного размера, а под ней —
гиперссылку
).
Кроме собственно тегов, в языке гипертекстовой
 разметки
 используются их
атрибуты.
Оформление тега
 в массиве документа осуществляется посредством угловых скобок, что позволяет интерпретатору различать текст (тематический контент) и непосредственно
HTML
-код, корректно отображая информацию на веб-странице.
Теги могут быть парными (то есть используемыми в неразрывной связке друг с другом).
В этом случае применимы термины открывающего
 и закрывающего
 тегов. Синтаксис парных тегов неизменно таков:
Фрагмент документа...,
Причём предписываемые тегом указания распространяются на весь указанный между ними фрагмент документа. Теги могут быть и одиночными, то есть закрывающего тега стандартами
HTML
 не предусмотрено.
Элементы языка HTML
Все без исключения элементы языка HTML являются или тегами, или их атрибутами; ни команд, ни условий в
языке
 гипертекстовой разметки просто-напросто не существует
(о тегах особого класса МЕТА см. ниже).
 Активные элементы и динамические эффекты на
веб-странице
 осуществляются встраиваемыми в гипертекстовый код самостоятельными и завершёнными модулями, реализованными уже на каком-либо из классических языков программирования
(например, на сайтах очень популярен JavaScrypt), или же методами серверного программирования.
Символика МЕТА



HTML
. Тег



Опорные темы:


Веб-дизайн
. HTML
. Тег



В
дипломном проекте в качестве программного
инструментария для заполнения статического
контента был использован язык
гипертекстовой разметки 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 

Если страница может быть отображена, то она выводится на экран без каких-либо предупреждающих сообщений. Программа интерпретирует ошибочно расставленные теги определенным образом и формирует изображение, следуя логике, заложенной в нее разработчиками. При этом вид страницы может и не соответствовать замыслу автора. И только в случае очень серьезных ошибок или явных противоречий браузер выводит сообщение с невозможности отобразить страницу. Косвенным признаком ошибки разметки может служить появление на странице фрагментов кода 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. Разбиение на абзацы.