Учебник
по Web-мастерству:
Урок
1. Краткий экскурс в теорию сетей
Урок 2. Основы web-технологий
Урок 3. Введение в web-дизайн
Урок
4. Первая web-страница:
В
предыдущих уроках мы подробно изучили теоретические аспекты web-дизайна.
Ну, а теперь переходим к практике.
Всевозможных
реализаций языка разметки гипертекста существует довольно много, но
для изучения лучше всего воспользоваться HTML версии 3.2. Безусловно,
сегодня уже существует и широко применяется HTML 4.0, включающий в себя
множество дополнений и расширений в части системы команд. По сравнению
со своими "младшими" собратьями HTML 4.0 является более совершенным
и, если хотите, "современным" вариантом языка. Почему же мы
всетаки остановимся на версии 3.2?
Во-первых,
HTML 3.2 является более простым в изучении, а с учетом того, что мнемоника
и синтаксис обоих языков практически одинаковы, пользователю, знакомому
с данной версией, не составит труда быстро освоить новую реализацию
HTML, бегло прочитав соответствующую документацию. Во-вторых, с помощью
HTML 3.2 можно делать практически то же самое, что и посредством HTML
4.0, особенно на начальном этапе. В-третьих, HTML 3.2 более «демократичен
к клиентскому программному обеспечению. Благодаря принципу обратной
совместимости, заложенному в более позднюю версию HTML создателями языка
(консорциум W3C), HTML 3.2 прекрасно распознается и старым программным
обеспечением, и вполне современным. Ну как, достаточно оправданий? Я
думаю, да. Тогда несколько слов об истории HTML 3.2.
Если
вы, уважаемый читатель, полагаете, что HTML 3.2 есть дополненный и расширенный
вариант HTML 3.0, то вы глубоко заблуждаетесь. Совпадение первых цифр
в обозначении версий этих двух языков является не то досадным недоразумением,
не то удивительным совпадением. Дело в том, что HTML 3.0 существует
как бы независимо от других реализаций языка разметки гипер текста и,
по всей видимости, на сегодня представляет собой своеобразную «тупиковую
ветвь» в эволюции Hypertext Markup Language. HTML 3.2 был создан
на основе спецификации HTML 2.0 и вобрал в себя некоторые модифицированные
элементы HTML 3.0, плюс определенный набор независимых расширений, разработанных
W3C.
Сейчас
HTML 3.2 наравне с HTML 4.0 является одним из наиболее распространенных
и широко используемых в Интернете языков разметки гипертекста. Подробным
изучением его структуры, мнемоники и системы команд мы и займемся. Но
сначала — небольшое «лирическое отступление».
В
среде web-дизайнеров почему-то принято считать, что на свете существуют
всего две методики создания web-страниц. Первая заключается в использовании
объектно-ориентированных сред разработки html-документов, так называемых
web-редакторов. Web-мастеру, использующему в своей работе подобную программу,
по большому счету не нужно знать HTML: достаточно лишь уметь обращаться
с данным приложением и щелкать мышью. Весь необходимый код редактор
генерирует сам. Не удивительно, что такой подход считается «непрофессиональным»,
поскольку в данной ситуации создатель web-ресурса не может гибко управлять
структурой разрабатываемых им документов, а сами эти редакторы по качеству
работы весьма далеки от идеала. Второй подход, считающийся «верхом
профессионализма», подразумевает написание всего кода вручную,
с применением стандартного текстового редактора MS Windows —программы
Notepad, известной также как Блокнот. Скажу по секрету, что раньше я
поступал именно так. И не потому, что, пользуясь молодежной терминологией,
«косил под профессионала», а просто в силу отсутствия в
те времена визуальных редакторов: они получили широкое распространение
на российском рынке программного обеспечения чуть позже.
Лично
я рекомендую использовать третий подход, "смешанный". Заключается
он в том, что шаблон страницы, включая невидимые таблицы, часть графических
элементов и необходимый набор гиперссылок, готовится в web-редакторе,после
чего осуществляется «доводка», дописывание, отладка и оптимизация
кода вручную. Объясняется это, прежде всего, элементарными соображениями
удобства и, если хотите, лени: структура сложных html-документов подразумевает
наличие большого количества идентичных, часто повторяющихся команд,
используемых, например, при создании таблиц и форматировании абзацев.
Поверьте, писать эти тонны кода «руками» — удовольствие
сомнительное. В конце концов, web-редакторы и были созданы как раз для
того, чтобы облегчить жизнь web-мастеру. На практике большинство web-дизайнеров
поступает сейчас именно так.
На
серверах Интернета, содержащих рекомендации по web-дизайну, а также
на форумах и конференциях, посвященных той же тематике, постоянно звучит
определенный набор "комплиментов" в адрес WYSIWYG-редактора
MicrosoftFrontPage. Все они сводятся в основном к тому, что данная программа,
мягко говоря, значительно уступает другим аналогичным пакетам, а в ряде
случаев вообще непригодна для создания web-страниц. Подозреваю, что
общественное мнение сформировалось таким образом в первую очередь потому,
что FrontPage является продуктом Microsoft. Смею вас заверить: как инструмент
для разработки шаблонов html-документов, которые впоследствии все равно
дописываются и отлаживаются вручную, Microsoft FrontPage вполне подходит,
поскольку полностью отвечает всем требованиям, предъявляемым обычно
к подобным приложениям: эта программа удобна, оснащена достаточно дружественным
интерфейсом, проста в установке, изучении и использовании. В принципе
для создания шаблонов web-страниц можно использовать любой другой web-редактор,
это дело вкуса. Я не стану настаивать на том, чтобы вы непременно сделали
Microsoft FrontPage своим основным инструментом: изучив основы разработки
html-документов, можно без труда освоить и применять любой редактор.
Тем неменее дизайнеры, на чем свет стоит ругающие данный программный
продукт и утверждающие, что создают свои проекты исключительно посредством
Notepad (тоже, заметьте, продукт Microsoft), на мой взгляд, несколько
лукавят. Анализируя код некоторых их творений, я часто видел весьма
характерную строку в разделе описания метаинформации: <meta name="GENERATOR"
content="MicrosoftFrontPage 3.0">.
Изучаем
HTML
Несколько
предварительных замечаний
Регистр
записи команд
Escape-последовательности
Перевод
строки, пробелы, табуляция
Комментарии
Общие
рекомендации
Цветовые
спецификации
Базовые
теги разметки гипертекста
Элемент
<FONT>
Атрибуты
тега <BODY>
Заголовки
Списки
Разделители
Гиперссылки
Ссылки
на документы
Ссылки
на разделы
Ссылки
на адрес электронной почты
Ссылки
на файловые объекты
Практикум
Размещение
страницы в Интернете
Урок
5. Графика в web-дизайне
Урок
6. Специальные возможности HTML
Урок
7. Microsoft FrontPage
Урок
8. Каскадные таблицы стилей
Урок
9. Полезные приемы web-дизайна
Урок
10. Обслуживание web-страницы
Урок
11. Как стать web-звездой?
Урок
12. Деньги и Интернет