Немного истории

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

Овладеть навыками работы с HTML совсем несложно. Сам Web-браузер помогает в изу­чении HTML-трюков и ловких приемов, так как программный код любой Web-страницы можно просмотреть с помощью браузера. Кроме того, существуют мощные программные средства, которые позволяют создавать новые сайты так же легко, как разрабатывать графику С помощью графических программ. Интерфейсы этих программ очень похожи между собой. В данной главе вы узнаете: как использовать таблицы, фреймы и CSS-стили для эффективно­го управления макетом страницы; как создавать фоновые узоры; как сделать страницу инте­рактивной с помощью ссылок.

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

В основном, элементы размещаются на Web-странице с помощью языка разметки страниц HTML (HyperText Markup Language). Первоначально HTML был очень простым и использо­вался лишь в качестве языка для отображения документов и организации ссылок между ними. С течением времени HTML эволюционировал и сейчас уже обладает возможностями под­держки сложных макетов страниц, роскошных интерактивных медиакомпонентов и дополни­тельных встроенных языков, например JavaScript.

Симпатичная Web-страница, которую все мы хорошо знаем и любим, получается благодаря гому, что браузер (например, Mi villa Firetox или Internet Explorer) ин­терпретирует HTML-код. (Интересно заметить, что первый графический Web-браузер появился в 1993 г. и назывался "Mosaic". Эта небольшая программа имела ошеломительный успех, а год спустя была преобразована в браузер Netscape, по­лучивший кодовое название "Mozilla". Такова история развития этого браузера.)

Язык HTML позволяет отобразить графику, анимацию и медиакомпоненты в окне браузера, при этом самого кода пользователь не видит— конечно, до тех пор, пока специально не захо­чет на него взглянуть. HTML-код напоминает невидимого чародея из книги "Волшебник Изумрудного города".

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

<а href=npage2.htm">Page 2</a>

Данный фрагмент кода позволяет отобразить на Web-странице подчеркнутую ссылку Page 2. Когда пользователь щелкнет на этой ссылке, на экране появится страница page2 .htm. Причем совершенно не обязательно, чтобы текст ссылки соответствовал имени файла. Например, этот код <а href="/page2 . htm" > выполнится с таким же успехом, если текст ссылки будет целым предложением Щелкните здесь, чтобы увидеть мою коллекцию. В следующем примере все это предложение будет отображаться как подчеркну­тая ссылка на страницу page2 . htm. <а href="/page2.htm">Щелкните здесь, чтобы увидеть мою коллекцию.</а>