Ступенька 40-ая.
"При нажатии на ссылку документ открывается в другом фрейме, в полное окно".

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

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

Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:

Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.

Введем атрибут target в документе со ссылками - menu.html.

Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).

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

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:

<a href="project.html" target="_top">Мой проект о рыбках</a>

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

Ступенька 42-ая.
"Немного об объектах. Вставка объектов в наш документ при помощи тэга OBJECT".

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

Итак, представьте себе елочку, которую вы принесли в свой дом под новый год. Html подобен такой елочке. Но елочку надо нарядить. Что мы для этого можем сделать – покрасить ветки, навесить мишуру – мы весьма ограничены без дополнительных средств для украшения нашей елки (html).

Итак, я говорила, о том, что мы можем встраивать объекты в нашу страницу. Один тэг для вставки объекта в страницу мы уже знаем <img>, вводя его в код нашего документа, мы указываем броузеру подгрузить картинку на нашу страницу. Т.е. <img> позволяет нам повесить на нашу елку шарик. Но шарик не является частью елки, это посторонний объект. А тэг <img> в данном случае играет роль веревочки, при помощи которой мы присоединяем шарик (картинку, объект) к елочке (html).

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

Какие объекты, кроме картинок, мы уже умеем включать в наш документ? Это другие документы, мы научились их внедрять в наш документ при помощи тэга <iframe>.

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

Итак, вы уже знакомы с тэгом <img>. Напишем код для вставки картинки в наш документ:

Это вам все знакомо – src - указывает, где находится изображение, которым будет подменен тэг <img>, alt – альтернативное описание, на всякий случай, если картинка не загрузится, тогда мы увидим его.

То же самое мы можем сделать при помощи тэга <object>, подгрузить картинку в наш документ.

Теперь будем по обычаю разбираться, что к чему.

Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.

Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:

Как видите, все не так уж сложно. Но на этом возможности и функции тэга <object> не ограничиваются. С помощью него мы можем сделать альтернативную генерацию объектов: это, допустим, когда ваш фильм (клип) не загрузился, вы можете указать, чтобы вместо него подгрузился клип с другого адреса, можете указать, что если и другой клип не подгрузится, чтобы вместо него подгрузилась картинка, и т.д. И это далеко не все, что вы можете сделать при помощи тэга <object>, но, как я говорила, наше знакомство с ним в данном учебнике будет кратким и обзорным, более тесно и серьезно познакомиться с <object> вам поможет спецификация (официальная документация по HTML), где наиподробнейшим образом расписаны все возможности применения <object> в ваших документах. А пока что наш с вами путь лежит на следующую ступеньку, где мы продолжим наш разговор об объектах и их внедрении в наш документ.

Ступенька 44-ая.
"Что такое таблицы стилей и для чего они нужны (CSS - Cascading Style Sheets)".

В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.

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

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

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

Что же именно можно сделать при помощи CSS:

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

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

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

Ступенька 46-ая.
"Что такое скрипты. Как внедрять скрипты в html-документы".

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

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

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

Итак, как и в случае с CSS код скрипта может внедряться непосредственно в код вашего html-документа при помощи специального тэга SCRIPT:

Атрибут type определяет тип содержимого (язык скрипта, в нашем примере указано, что будет использоваться Javascript).

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

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

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

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

Скрипт внедрен в тэг <A> при помощи специального атрибута onclick - указывающего, что при одиночном нажатии на ссылку (или объект, или кнопку) - произойдет какое-то событие, какое именно, зависит от скрипта, который мы внедрили в наш документ, в нашем случае это открытие нового окна.

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