Итак, что же это такое “гипертекст” и “отмеченные объекты”?
Приставка “гипер-” означает “над, сверх, по ту сторону”. Иными словами, наша страничка состоит из двух этажей, с которыми, впрочем, вы уже познакомились.
На одном из них, так сказать, “парадном” расположен ваш документ во всей его красе, а на другом – “подвальном” - его описание, с помощью которого программа просмотра и создает парадный этаж.
Как вы уже знаете по “Виртуальной школе”, на парадном этаже располагается самый обычный текст и самые обычные картинки. Вы наверняка обратили внимание на то, что отдельные слова и картинки выделены особо. Это означает, что под ними находятся ссылки на другие электронные документы или даже на программы, которые будут выполнены в случае выбора этих элементов.
Понять, как именно работают те или иные ссылки, можно, если проанализировать подвальный этаж странички, содержащий ее описание.
Что же располагается в подвале, какие бывают ссылки?
Самая простая ссылка - переход к другим страницам или к другому документу. Можно организовать показ картинки, мультика, прослушать записанный звуковой фрагмент.
Можно даже переадресовать пользователя к другому гипертекстовому документу на другом сервере, расположенном, быть может, за тысячи километров.
Возможен, как мы уже говорили, запуск специальных программ. Чаще всего это программы пересылки файлов. Так, практически все мировые производители комплектующих для компьютеров совершенно бесплатно распространяют самое новейшее программное обеспечение, необходимое для их работы (такие программы называются драйверами).
Любители компьютерных игр могут, невзирая на расстояние, сыграть с несколькими соперниками-партнерами.
И, наконец, относительно недавно начали работу электронные магазины, в которых вы можете ознакомится с товаром и заказать приглянувшуюся вам вещицу с доставкой на дом.
Система гипертекстовых страниц, располагающихся на серверах и позволяющих с легкостью странствовать по всем закоулкам глобальных компьютерных сетей называется World Wide Web - всемирной паутиной. Странички же называются www-страницами. Это как раз те странички, конструированием которых мы и занимаемся.
Как же создается самая простая ссылка - ссылка на другую страничку?
Для этого существует специальный контейнер с атрибутами: <A ..> … </A>. Как вы помните, атрибуты уточняют действие контейнера. В нашем случае просто необходим атрибут, указывающий, куда производится ссылка. А вот и пример контейнера:
<A HREF="file:///s|/html/7b97/tosha/tosha.htm">
Это ужасно интересная страничка Тоши! </A>
Все элементы оформления, будь то текст или картинка, расположенные внутри контейнера <A ...> ... </A>, становятся не просто текстом и не просто картинкой, а гипертекстовой ссылкой. При переводе на эту ссылку указателя мыши он, как вы уже видели, видоизменяется, а если при этом щелкнуть по клавише мыши, то произойдет переход на страничку, которая соответствует файлу, полный путь к которому описан в атрибуте HREF.
Впрочем, если файл вашей второй странички расположен на той же ветке “чудо-дерева” (или, говоря профессионально, в одной папке), что и файл, откуда вызывается ссылка, полный путь можно и не писать.
Так, если две ваши странички, которым соответствуют файлы 23.htm и 23a.htm находятся в одной папке, то в файле 23.htm может быть, например, вот такой вызов второй странички:
<A HREF="23a.htm"> А это мой друг Димка! </A>
Можно сослаться не на описание странички, а прямо на фотографию. Такая ссылка будет выглядеть следующим образом:
<A HREF="file:///s|/html/7b97/tosha/utki.jpg"> Мы с братом очень любим уток! </A>
или вот так, если фотография располагается в одной папке с описанием странички:
<A HREF="7b_34.jpg"> А это скверик возле нашей школы. </A>
Правда, если вы ссылаетесь напрямую на фотографию или картинку, то она, разумеется, будет располагаться вовсе не по центру и уж конечно безо всякого фона. Если вам это не нравится - придется сделать ссылку все же на описание странички на языке HTML, а в ней разместить картинку так, как вы считаете нужным. Естественно, в этом случае очень нелишней будет и подпись под рисунком или фотографией.
Немного отвлекаясь от ссылок, давайте опишем еще два крайне полезных атрибута тега <IMG>.
Наверняка вам доставляло много неудобств то, что картинки и фотографии частенько были не тех размеров, какие бы вам хотелось. Между тем, изменить их размеры очень просто. Достаточно в тег <IMG> добавить необходимый вам дополнительный атрибут.
Итак,
<IMG SRC="file:///s|/html/peop/besinger/dpg_0116.jpg" WIDTH=200>
или
<IMG SRC="file:///s|/html/peop/besinger/dpg_0116.jpg" HEIGHT=250>
Атрибут WIDTH определяет ширину картинки или фотографии в пикселях. Атрибут HEIGHT - ее высоту. Значит, если разрешение экрана - 640х480 пикселей, в первом случае картинка по ширине займет примерно треть экрана. Во втором примере по высоте - примерно половину экрана.
Вместо пикселей в качестве единицы измерения можно использовать проценты. Если вы думаете, что атрибут WIDTH=50% уменьшит картинку в два раза, то вы ошибаетесь. Этот параметр означает, что картинка займет ровно половину ширины окна, выделенного под программу просмотра. Если окно уменьшить - соответственно уменьшится и картинка. Очень может быть, что она и растянется, если ее исходная ширина меньше половины ширины экрана.
Но вернемся к ссылкам. Программа просмотра настроена таким образом, чтобы выделять текстовые ссылки другим цветом. А если ссылкой является фотография или картинка, то вокруг нее появляется цветная рамочка.
Бывает так, что стандартный цвет, которым выделяются ссылки, вовсе не согласуется с выбранным вами фоном. Например, в качестве такого стандартного цвета выбран синий, а фон - тоже синий, и ссылки становятся просто невидимыми. Для того, чтобы изменить цвет ссылки, существуют специальные атрибуты тега <BODY>:
<BODY BACKGROUND="kairos.jpg" VLINK="yellow" LINK="black" ALINK="red">
Атрибут LINK определяет цвет текста, за которым скрывается ссылка (или просто ссылки).
Атрибут VLINK определяет цвет ссылки, которую мы уже “посетили”.
Атрибут ALINK определяет цвет ссылки, по которой мы щелкнули, но которая еще не загрузилась в наш компьютер. Этот атрибут имеет смысл, когда мы работаем в глобальной сети. В нашей школьной сети загрузка происходит настолько быстро, что изменение цвета происходит всего лишь на долю секунды.
Подведем итоги:
Вопросы и задания:
