Уроки HTML'
advertisement
Тема 1. «Уроки по HTML» Урок 1 – вводная информация 1. Сайт с красивой графикой выглядит лучше, чем текстовая версия. Однако перенасыщенность картинками может замедлит загрузку страницы. Некоторые пользователи, имеющие медленный доступ, отключают автоматическую загрузку рисунков. В этом случае они видят на экране только безобразное нагромождение квадратов. Следовательно, нужно позаботиться и об этих посетителях. Для картинок необходимо иметь альтернативный текст, который подсказывал пользователю, что ему нужно сделать. Графика должна быть нормально видна при просмотре на мониторе, показывающем не более 256 цветов. 2. Особого внимания заслуживает фон. Лучше всего читается чёрный текст на белом экране. Очень не много имеется изображений, на фоне которых текст виден хорошо. Не заставляйте своих пользователей (посетителей) портить зрение!!! 3. Использовать фреймы или нет??? Пару лет назад я бы вам не посоветовал, а сейчас почти все браузеры воспринимают их нормально, да порой и не обойтись без них. 4. Использовать ли последние достижения дизайнерской мысли: Java, Java-скрипт, DHTML??? Все эти средства могут приятно украсить сайт, сделать его очень живым и привлекательным. И в то же время они отнимут у вас часть пользователей, которые не смогут увидеть и оценить это великолепие. Всякий раз, когда загружается Java, компьютер на несколько секунд замирает. Если сайт разработан только под Internet Explorer, то как быть тем, кто пользуется Communicator'ом? Поэтому в дизайне главноесоблюсти разумную меру. Постараться выразить свои мысли просто, но оригинально. Урок 2 (Уроки HTML) - структура Язык HTML не сложен для изучения, но в нем есть несколько тонкостей. На самом деле HTML в основном интуитивен и его легко читать. Он близок к английскому. В любом случае, HTML учить легче чем английский... Независимо от того, как выглядит ваша страница и какую информацию вы хотите отобразить, существует три тега, которые в соответствии со стандартами HTML должны присутствовать на каждой странице: <HTML> - Сообщает браузеру, что документ создан на HTML. <HEAD> - Отмечает вводную и заголовочную части HTML-документа.<BODY> Отмечает основной текст и информацию. Эти тэги необходимы Web-браузеру для определения различных частей HTMLдокумента, они не оказывают прямого влияния на внешний вид WEB-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпретировали вашу страницу, а также для того, чтобы она выглядела одинаково в часто используемых браузерах. Например, на хостинге (место, где вы расположите веб-страницу) веб-сервером, создавая список имеющихся HTML-документов (подобных вашему), запускается программа, которая использует только эти тэги. Таким образом, если на странице нет этих тэгов, она не будет включена в этот список. Список этот используется для поиска по хостингу. К примеру, если Вы расположите свою страничку на Narod.RU, то при наличии этих тэгов Ваша страница будет доступна для поиска по Narod.RU. <HTML> и </HTML>. Эти тэги сообщают браузеру, что текст между ними следует интерпритировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг <HTML> говорит о том, что файл написан на языке HTML (Hyper Text Markup Language - Язык гипертекстовой разметки). Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <HTML> в самом начале текста. Затем наберите его напарника </HTML> - в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ "/"? Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<HTML>), другой закрывает (</HTML>). Их действие распространяется только на тот текст, который находится между ними. Итак, сейчас наша страница выглядит таким образом: файл: index.html <HTML> </HTML> Открыв на браузере эту страницу, мы ничего не увидим. Пока мы не завершили работу над <HEAD> и </HEAD>. Теперь введем тэги <HEAD> и </HEAD>. Они должны быть между тэгами <HTML> и </HTML>. Эти тэги отмечают ту информацию в нашем документе, которая будет служить названием. В этих тэгах должна содержаться следующая информация: <TITLE>Design LAB</TITLE> - Между этими двумя тэгами необходимо ввести заголовок Вашей странички. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows1251"> - Эту строчку нужно вставить, если Вы создаете свой документ на блокноте или другом простейшем текстовом редакторе. Посмотрим как выглядит страничка теперь: файл: index.html <HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY> </BODY> </HTML> Но открыв на браузере эту страницу, мы опять ничего не увидим. Почему перед некоторыми тэгами я оставляю свободное место? Это чтобы самому зрительно не запутаться, то есть, для лучшей наглядности и удобочитаемости всего текста. Логическая цепочка открытия и закрытия больших (длинных) тэгов дает понять что за чем открывается и когда закроется. Теперь перейдем к тэгам <BODY> и </BODY>. С их помощью мы сможем изменить стиль страницы, перед тем как набрать текст. К примеру, нам необходимо сделать так, чтобы текст был белым на черном фоне, а ссылки (посещенные, непосещенные или локальные) светло-зелеными. В этом случае, необходимо дополнить тэг <BODY> следующими параметрами: файл: index.html <HTML> ... <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> ... </BODY> </HTML> BGCOLOR="BLACK" - цвет фона - черный. TEXT="WHITE" - цвет текста - белый. LINK="LIME" - цвет непосещенной ссылки - салатовый. VLINK="LIME" - цвет посещенной ссылки - салатовый. ALINK="LIME" - цвет локальной ссылки - салатовый. Итак, теперь мы, наконец, попробуем создать текст. К примеру, нам нужно сделать ссылку на страничку с информацией о создателе сайта. файл: index.html <HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> На этой страничке есть информация <a href="about.html">про меня</a> </BODY> </HTML> Открыв эту страничку на браузере в таком виде, мы получим примерно следующее. preview: index.html На этой страничке есть информация про меня При наведении курсора мыши на надпись про меня он (курсор) примет форму руки. И далее, кликнув по надписи, мы попадем на страничку about.html., где расположена информация об авторе. Итак, на этом уроке мы с Вами изучили тэги <HTML> и </HTML>, <HEAD> и </HEAD>, <TITLE> и </TITLE>, <BODY> и </BODY>, а также затронули тему ссылок. На следующем уроке мы продолжим разговор о ссылках. Урок 3 (Уроки HTML) - цвета, заголовки, набор текста, разделители Итак, на предыдущем уроке мы начали разговор о гиперссылках. У многих браузеров существует история посещенных страниц. Скажем, если я когда-то был на вашем сайте, и заходил в раздел про меня, то я увижу эту ссылку другим цветом. По умолчанию этот цвет фиолетовый, но изменив в <BODY> значение VLINK="LIME", мы увидим посещенную ссылку салатовым цветом. А еще можно сделать так, чтобы кликая на ссылку, скрывающаяся за ней страница открывалась в новом окне. Синтаксис таков: <a target="_blank" href="http://cray.vision.krg.kz/~Sam/dlab">Design Lab</a> Отсюда видно, что кроме параметра HREF (что значит "направление", "расположение"), здесь присутствует target="_blank". Этот параметр и дает команду открывать ссылку в новом окне. Вообще мы еще, скорее всего, вернемся к этой теме. Пока нам достаточно и этого... Цвета Давайте поговорим о цветах. Язык HTML понимает 2 вида цветовых переменных: HEX и Color. Color - это ввод цвета словом, как в английском языке (red - красный, blue - синий и т.д.). А очень интересно устроены HEX-значения. Давайте посмотрим на эту таблицу: #110000 #330000 #550000 #990000 #ff0000 #001100 #003300 #005500 #009900 #00ff00 #000011 #000033 #000055 #000099 #0000ff В HEX палитре числа представлены парами. Т.е. можно присмотревшись заметить то, что первая пара влияет на красный цвет, вторая пара чисел влияет на зеленый цвет, и третья пара - на синий (#RRGGBB). А сейчас я представлю вам палитру текстовых цветов: red cyan lime pink fuchsia green gray maroon navy olive blue purple silver teal yellow Заголовки Итак, продолжим набивать текстом нашу страницу. Поговорим о заголовках. Подобно названию страницы, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Итак, давайте взглянем на эти виды заголовков: Пример заголовка - размер 1 Пример заголовка - размер 2 Пример заголовка - размер 3 Пример заголовка - размер 4 Пример заголовка - размер 5 Пример заголовка - размер 6 Заголовки отображаются Web-браузерами намного крупнее и жирнее стандартного текста. Это хороший способ выделять различные части Web-страницы. Чтобы поспользоваться заголовком с размером букв первого номера, нужно обозначить выделяемый текст тегами <H1> и </H1>. Давайте попробуем ввести заголовок в нашу страницу. Этот текст должен распологаться в части, отдельной тегами <BODY> и </BODY>. файл: index.html <HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> <H1>Моя Домашняя Страничка</H1> На этой страничке есть информация <a href="about.html">про меня</a> </BODY> </HTML> И вот что мы получим в результате: preview: index.html Моя Домашняя Страничка На этой страничке есть информация про меня Написав <H1>, мы активизировали команду "Заголовок #1". Написав </H1>, мы закрыли эту команду. Весь текст который находился между этими тегами был подвластен команде "Заголовок #1". Набор текста Давайте теперь набьем какой-нибуть текст в нашу страничку. Процедура набора текста в HTML-документ является самой простой. Итак, наберем: Здравствуйте. Меня зовут Иванов. Мои любимые сайты: Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) Bjork (http://bjurk.by.ru) Prodigy (http://prodiga.by.ru) iPoizon.com (http://iPoizon.com) Но запустив нашу страничку на браузере, мы увидим: preview: index.html Моя Домашняя Страничка Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты: Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) Bjork (http://bjurk.by.ru) Prodigy (http://prodiga.by.ru) iPoizon.com (http://iPoizon.com) Все смешалось. Необходимо отформатировать текст. Существует тег <br>. Этот тег нужно вставлять в месте, где нужно делать перенос строки. Давайте теперь, после обработки посмотрим на результат: preview: index.html Моя Домашняя Страничка Здравствуйте. Меня зовут Иванов. Мои любимые сайты: - Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) - Bjork (http://bjurk.by.ru) - Prodigy (http://prodiga.by.ru) - iPoizon.com (http://iPoizon.com) файл: index.html <HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> <H1>Моя Домашняя Страничка</H1> Здравствуйте. Меня зовут Иванов. Мои любимые сайты:<br> - Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br> - Bjork (http://bjurk.by.ru)<br> - Prodigy (http://prodiga.by.ru)<br> - iPoizon.com (http://iPoizon.com)<br> </BODY> </HTML> Существует также тег параграфа, т.е. небольшой отступ от начала строки. Это тег <dd>. Давайте попробуем заменить в списке знаки - на <dd>: preview: index.html файл: index.html Моя Домашняя Страничка <HTML> ... Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:<br> <dd>Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br> <dd>Bjork (http://bjurk.by.ru)<br> <dd>Prodigy (http://prodiga.by.ru)<br> <dd>iPoizon.com (http://iPoizon.com)<br> ... </HTML> Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты: Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) Bjork (http://bjurk.by.ru) Prodigy (http://prodiga.by.ru) iPoizon.com (http://iPoizon.com) Но, к сожалению, этот тег не работает в ранних версиях различных браузеров. Разделители Хотя простые линии очень полезны, они довольно скоро надоели создателям Webстраниц. Поэтому несколько лет назад, тег <hr> был доработан до его теперешнего, "резинового" в обращении, вида. Теперь помимо тонкой линии поперек страницы вы можете применить и другой тип линии, используя расширения тега <hr>. Давайте посмотрим что можно сделать с линиями: Простая линия <hr> Линия без тени <hr noshade> Линия размером в 10px <hr size="10"> Линия шириной в 80% <hr width="80%"> Оранжевая линия <hr color="orange"> А теперь сгармонируем все параметры в одну линию <hr noshade width="80%" color="orange" size="10" > А теперь спокойно разберем все возможные параметры линий: <hr noshade> - По умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать такой синтаксис. <hr size="10"> - По умолчанию, линия имеет размер 1 пиксел. Но мы можем его менять. Для этого необходимо вписать size="ваше число", где ваше число - число пикселей. <hr width="80%"> - По умолчанию, линия имеет ширину равную 100%, т.е. во всю длину окна браузера. В данном случае мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80 % занимаемой ширины окна. <hr color="orange"> - По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется что линия серая. Мы можем изменить цвет линии. Чуть раньше было рассказано, и объяснено на примерах какими могут быть цвета. Синтаксис виден из примера. Все эти параметры могут сочетаться и использоваться параллельно. Итак, на этом уроке мы с Вами изучили гиперссылки, затронули тему цветов, поговорили о заголовках, начали разговор о наборе текста и изучили различные виды разделителей. Урок 4. (Уроки HTML) – стилевое оформление текста. На этом уроке мы поговорим о стилевом оформлении текста. Теперь, когда вы уже знакомы с основными построениями странички, стоит освоить способы управления внешним видом текста. Вам, возможно, потребуется выделить определенное слово или напечатать фразу курсивом. В другой раз вы решите выровнять заголовок по центру или даже захотите чтобы текст мерцал. При создании веб-страницы можно использовать целый ряд средств форматирования текста. Все эти возможности могут действительно оживить вашу страничку. Выравнивание текста по центру Выравнивание текста по центру позволяют сделать тег <center> и <center>. При использовании этих тегов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста. Чтобы выровнять текст по центру, просто вставьте теги <center> и </center> в начале и в конце нужного фрагмента: <center><h1>Пример заголовка - размер 6</h1><center> Вот что мы получим в результате: Пример заголовка - размер 6 Вы можете центрировать заголовки (как на примере), текст, абзацы и веб-графику. Полужирный шрифт Теги <b> и </b> позволяют отображать различные слова и фразы вашего документа полужирным шрифтом. Текст между этими тегами выглядит толще обычного текста, чем приятно выделяется. Чтобы разметить текст как полужирный, вставьте <b> и </b> в начале и в конце этого текста: обычный текст сливается с <b>полужирным</b> Вот что мы получим в результате: обычный текст сливается с полужирным Курсив Теги <i> и </i> позволяют отображать различные слова и фразы вашего документа курсивным шрифтом. Чтобы разметить текст как курсивный, вставьте <i> и </i> в начале и в конце этого текста: обычный текст сливается с <i>курсивным</i> Вот что мы получим в результате: обычный текст сливается с курсивным Мерцание Тег мерцания <blink> </blink> не работает в браузерах MicroSoft Internet Explorer. Вообще этот тег самый раздражающий из всех существующих тегов в HTML. Разумное использование тегов <blink> и </blink> может вполне только приукрасить вашу страничку. Итак, давайте посмотрим как нужно использовать тег обычный текст сливается с <blink>мерцающим</blink> Вот что мы получим в результате: обычный текст сливается с мерцающим (НЕ MSIE!) Подчеркивание Существует в HTML также тег, который используется для подчеркивания какого-либо текта. Это теги <u> и </u>. Давайте посмотрим их синтаксис обычный текст сливается с <u>подчеркнутым</u> Вот что мы получим в результате: обычный текст сливается с подчеркнутым Перечеркивание Существует в HTML также тег, который используется для перечеркивания какого-либо текта. Это теги <s> и </s>. Давайте посмотрим их синтаксис обычный текст сливается с <s>перечеркнутым</s> Вот что мы получим в результате: обычный текст сливается с перечеркнутым Размеры текста Иногда при написании текста в веб-странице необходимо слегка выделить определенные фрагменты текста, чтобы читатель обратил на них особое внимание. HTML предлагает ряд возможностей для такого выделения, в числе которых еще два новых тега, дающих возможность изменить вид текста на экране. Это теги <big> и <small>. Они не оказывают существенного влияния на вид текста, но вызывают некоторые изменения в размере шрифта. Шрифт текста между тегами <big> и </big> немного крупнее обычного текста. Как вы догадаетесь, действие тегов <small> и </small> прямо противоположно. Шрифт между ними становиться немного меньше. обычный текст сливается с <big>большим</big> и <small>маленьким</small> Вот что мы получим в результате: обычный текст сливается с большим и маленьким Если взять стандартный текст за 100%, то тег <big> увеличивает эту мерку до 110%, а тег <small> уменьшает до 90%. Верхние и нижние индексы В последних версиях HTML появилось еще два новых тега - теги нижнего и верхнего индексов. Вряд ли вы будете часто использовать эти теги, но они очень удобны, когда вам нужно отобразить в своей странице такую специфическую информацию как химические формулы (H2O) или математические формулы (a2=b+c2). Чтобы текст выводился в виде нижнего индекса, его следует пометить между тегами <sub> и </sub>, в виде верхниего - <sup> и </sup>. Например: Химическая формула воды - H<sub>2</sub>0 Используемая нами формула - a<sup>2</sup>=b+c<sup>2</sup> Вот что мы получим в результате: Химическая формула воды - H20 Используемая нами формула - a2=b+c2 На следующий урок я продолжу тему о стилевом оформлении веб-страницы и расскажу вам о размерах шрифта. Подводя итоги пройденного сегодня материала могу сказать, что мы сегодня ознакомились с выравниванием теста по центру, научились выводить полужирный, курсивный, мерцающий, подчеркнутый и перечеркнутый тексты, поработали с размерами текста и узнали о верхних и нижних индексах. Урок 5. (Уроки HTML) – размеры шрифтов. Теперь я расскажу вам о размерах шрифта. Тег <font> имеет дополнительные возможности для задания размера шрифта основного текста. Вместо определенного номера вы можете задать относительный размер шрифта, например +3 или -1. Браузер прибавляет (или вычитывает) заданное число к номеру шрифта, используемого по умолчанию (размер 3). На пример: <font size=+3>текст заданный параметpом +3</font> <font size=-2>текст заданный параметpом -2</font> Вот что мы получим в результате: текст заданный параметpом +3 текст заданный параметpом -2 Поскольку шрифт обычно имеет размер +3, первая строка приведенного кода будет выведена на экран шрифтом 6 (3+3=6), а вторая будет иметь размер 1 (3-2=1). Часто относительное задание размеров используется для вывода первой буквы фразы более крупным шрифтом, чем остальное предложенное. Этот метод позволяет привлеч внимание к определенному фрагменту веб-страницы. Ниже даны примеры вывода первого символа более крупным шрифтом, чем остальное предложенное: <font size=5>П</font>римеры из книги<br> <font size=6>Г</font>лава <font size=6>4</font> Вот что мы получим в результате: Примеры из книги Глава 4 Вложенные теги <font> Вы можете применять вложенные друг в друга теги <font size=...>, но их действие окажется не совсем таким как вы об этом думаете. Скажем, вы хотели чтобы 3 слова были выделены шрифтом последовательно увеличивающегося размера: Крупный, крупнее, крупнейший. Скорее всего вы захотите использовать три вложенных теги <font>: <font size=+1>Крупный, <font size=+1>Крупнее, <font size=+1>Крупнейший</font></font></font>. Вот что мы получим в результате: Крупный, Крупнее, Крупнейший. Естественно предположить, что при этом шрифт первого слова Крупный будет увеличен на один номер; затем слова Крупнее увеличатся еще на один размер, а затем шрифт слова Крупнейший возрастет в совокупности на три номера. Но браузер поймет это иначе. Теги <font> не являются кумулятивными. Каждый тег <font size=+1> задает увеличение размера до 3+1=4, но это не говорит о том, что последующие теги будут следовать алгоритму 3+1+1=5 -> 3+1+1+1=6. Чтобы последовательно увеличить размер шрифта, следует записать HTML-код следующим образом: <font size=+1>Крупный</font>, <font size=+2>Крупнее</font>, <font size=+3>Крупнейший</font>. Вот что мы получим в результате: Крупный, Крупнее, Крупнейший Шрифты различного начертания Обычно на компьютере установлено около 37 шрифтов. Internet Explorer позволяет задавать начертание (гарнитуру) шрифта, которым текст будет выведен на экран, с помощью нового ключевого слова в теге <font>. Делается это вот так. Воспользуйтесь ключевым словом face="...", и брозуер попытается отобразить текст тем альтернативным шрифтом, который вы указали. Например: <font face="Arial">Шрифт Arial</font><Br> <font face="Courier New">Шрифт Courier New</font><Br> <font face="Times">Шрифт Times</font><Br> <font face="MS Sans Serif">Шрифт MS Sans Serif</font><Br> Вот что мы получим в результате: Шрифт Arial Шрифт Courier New Шрифт Times Шрифт MS Sans Serif Этот фрагмент кода (face="...") сообщает браузеру, что отмеченый тегом <font> текст должен быть отображен шрифтами указанными внутри face="..." [Arial, Courier New, Times, MS Sans Serif]. Тег <font> работает следующим образом. Сначала браузер выясняет, какой шрифт вы задали, - в нашем случае Arial (возьмем за пример первую строку). Затем он проверяет, установлен ли шрифт Arial на персональном компьютере посетителя веб-страницы. Если да, то броузер отображает текст, используя этот шрифт. Если по какой-либо причине не удается найти шрифт Arial, броузер просто выводит текст стандартным шрифтом, как если-бы тега <font face="Arial"> вообще не было. При желании можно задать список шрифтов, которые браузер будет искать перед тем, как прибегнет к шрифту, заданному по умолчанию. <font face="Arial, Courier New, Times, MS Sans Serif"> В этом случае, если браузер не обнаружит шрифт Arial, он будет искать шрифт Courier New; если и Courier New не будет установлен, он пойдет дальше... Используя этот тег для выделения фрагмента, помните, что такое выделение увидят лишь только те посетители страницы, на чьих компьютерах установлен соответсвующий шрифт. И еще, неоторые шрифты имеют разный размер, это видно из таблицы на абзац выше. Это говорит о том, что нерациональное применение разных шрифтов некрасиво отразится на дизайне вашего сайта. При использовании данного тега важно правильно называть шрифты. Чтобы увидеть список шрифтов, установленных на вашем компьютере, вам нужно выполнить следующие действия: Пуск -> Настройка -> Панель управления -> Шрифты. Управление цветом шрифта Возможно менять цвет любого фрагмента отображаемой информации - один из самых замечательных способов придать тексту индивидуальность. Вы можете сделать так, чтобы слово или предложение автоматически отображалось одним из миллионов различных оттенков. Вы также можете выбрать ваш собственный цвет, смешивая различные оттенки красного, зеленого и синего. Речь о цветах у нас уже была затронута во втором уроке. Использование ключевого слова color=... тега <font> дает возможность задавать один из нескольких цветов для отображения текста, например: <font color="red">Красный</font> Вот что мы получим в результате: Красный Другие способы изменения цвета Менять стандартный цвет страницы можно с помощью ключевого тега <body>. Это ключевое слово также использует цветовую схему, описанную в первом уроке. Подробней об этом можно прочесть в этом же первом уроке. Подводя итоги пройденного сегодня материала могу сказать, что мы сегодня ознакомились с размерами текста, вложенными тегами <font>, шрифтами различного начертания. Урок 6. (Уроки HTML) – специальные символы Иногда у вас могнут возникнуть проблемы при попытке отобразить некоторые символы на веб-странице. Такие символы как &, < >, ®, ©, ™, используются при написании некоторых тегов. Другие символы не содержатся в обычном алфавите. Кроме того, существуют символы, используемые в иностранных языках, но не содержащиеся в английском - например, чтобы правильно отобразить на веб-странице слово français вам понадобится набрать fran (буквы до селиля), набрать &ccedil;, и ais (буквы после седиля). Смотрим: fran&ccedil;ais Вот что мы получим в результате: français Таким же образом можно вставлять любые символы. Сейчас я приведу примеры наиболее распространенных. Символ HTML - тег Символ HTML - тег < &lt; > &gt; & © &amp; &copy; " ® &quot; &reg; ™ £ &trade; &pound; ¢ ¤ &cent; &curren; ¥ ¨ &yen; &uml; § ª &sect; &ordf; « &laquo; ¬ &not; ¯ ± &macr; &plusmn; ° ² &deg; &sup2; ³ µ &sup3; &micro; ´ ¶ &acute; &para; · &middot; ç &ccedil; ¸ º &cedil; &ordm; ¹ » &sup1; &raquo; ¼ ¾ &frac14; &frac34; ½ ¿ &frac12; &iquest; À Â &Agrave; &Acirc; Á Ã &Aacute; &Atilde; Ä &Auml; Å &Aring; Æ É &AElig; &Eacute; È Ê &Egrave; &Ecirc; Ë Í &Euml; &Iacute; Ì Î &Igrave; &Icirc; Ï &Iuml; Ð &ETH; Ñ Ó &Ntilde; &Oacute; Ò Ô &Ograve; &Ocirc; Õ &Otilde; Ö &Ouml; × &times; Ø &Oslash; Ù Û &Ugrave; &Ucirc; Ú Ü &Uacute; &Uuml; Ý ß &Yacute; &szlig; Þ &THORN; &nbsp; Напоминаю, я привел только часть из всех существующих. Этот урок является как - бы дополняющим к предыдущему. Подводя итоги пройденного сегодня материала, могу сказать, что мы сегодня ознакомились со специальными символами. Мы закрываем тему набора текста и на следующем уроке я начну рассказ о таблицах. Урок 7. (Уроки HTML) – списки Списки и таблицы Итак, теперь мы начнем изучать списки и таблицы. Многие любят смотреть вечерние новости, потому что в этих передачах за несколько минут можно получить большой объем информации. Комментаторы знают, что они должны поддерживать интерес у зрителей, чтобы те не переключились на другую программу. То же относится к страницам в Интернет. Вам придется организовать вашу страницу и представить информацию в кратком и понятном виде, иначе посетители покинут ее еще быстрее, чем плохой телевизионный канал. У нас уже есть простейшая веб-страница. Теперь мы приступим к изучению различных элементов HTML, позволяющих лучше организовать ее и представить информацию в более привлекательном виде. Последующий ряд уроков посвящается тому, как использовать на веб-страницах списки и таблицы. Списки и таблицы - это элементы HTML, облегчающие представление информации в удобном формате. Списки используются для перечисления элементов по пунктам, а таблицы - для упорядоченного расположения информации в столбцах и строках. Хотя списки и таблицы по сути просты, мы все-таки изучим их поподробней. Что такое списки и таблицы Сегодня списки можно увидеть почти на каждой веб-странице. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки в строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, часто маркированы или нумерованы. При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для перечисления ваших интересов или для организации ссылок. Таблицы содержат информацию, расположенную по строкам и столбцам, и играют большую роль в организации веб - страницы. Они отображаются практически всеми веббраузерами. Таблицы очень удобны для представления большого количества связанной между собой информации в формате, который легко воспринимается и хорошо располагается на странице. Все, что можно организовать в столбцы, стоит представить в виде таблицы. Компании часто используют таблицы для представления информации о товарах и ценах. Как списки помогают организовать нам информацию Давайте рассмотрим этот абзац: Несмотря на то что я учусь, у меня остается довольно много свободного времени. У меня есть целый ряд интересов. Я работаю с программным обеспечением компании Microsoft. Кроме использования п/о компании Microsoft я использую программу Far Manager для обработки HTML-данных. Одно из моих любимых занятий - бродить по интернету, выискивая полезные ресурсы. Еще мне нравиться слушать музыку группы Prodigy и песни исландской певицы Björk. Этот абзац был слишком длинным. Кроме того, информация в нем повторялась и была плохо организована. Ниже приведен отрывок HTML-кода, показывающий, как можно его привести в порядок с помощью списков. Мои интересы: <ul> <li> Програмное обеспечение от Microsoft и Far Manager <li> Обозрение WWW <li> Слушаю Prodigy и Björk </ul> Вот что мы получим в результате: Мои интересы: Програмное обеспечение от Microsoft и Far Manager Обозрение WWW Слушаю Prodigy и Bjork Согласитесь, этот вариант намного лучше. Списки помогают организовать информацию. Такую страницу посетители скорее прочтут, поскольку, бегло глянув на список, возможно быстро найдут в нем то что нужно. Как создать список на вашей странице Теперь вы знаете, когда вы можете (или должны) применять списки. Давайте рассмотрим различные типы списков. Существует три основных типа списков: маркированные, нумерованные и списки определений. Есть и другие типы, но эти три наиболее часто используются. Они сходны в том, что все они распологают каждый пункт на новой строчке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре. Создать список довольно легко. Сначала введите теги открытия и закрытия списка: <ul> </ul> Затем перед текстом каждого пунтка списка введите <li>: <ul> <li> первая строка <li> вторая строка <li> третья строка </ul> И теперь, при желании, вы можете озоглавить ваш список тегами <lh> и </lh>: <ul> <lh>Заголовок</lh> <li> первая строка <li> вторая строка <li> третья строка </ul> А теперь давайте посмотрим последствия приведенного чуть выше html-кода: Заголовок первая строка вторая строка третья строка Нумерованный список Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графического маркера (точки) автоматически помещаются последовательные номера или буквы. Вы вводите новый пункт в начале списка, а последующие пункты нумеруются сами, что очень удобно. Нумерованный список задается следующей коммандой: <ul type="1"> </ul> Теперь давайте посмотрим как нумерованные списки выглядят в готовом варианте: <ul type="1"> <li> первая строка <li> вторая строка <li> третья строка </ul> Вот что мы получим в результате: 1. первая строка 2. вторая строка 3. третья строка Нумерованные списки удобны для описания информации, которую вы хотите определенным образом ранжировать (например, как в хит-параде), или стадий процесса, которые должны следовать в определенном порядке. Помимо параметра type="1" существует еще ряд других параметров. Посмотрите на следующую таблицу: <ul type="1"> <li> первая строка <li> вторая строка <li> третья строка </ul> <ul type="A"> <li> первая строка <li> вторая строка <li> третья строка </ul> <ul type="a"> <li> первая строка <li> вторая строка <li> третья строка </ul> <ul type="I"> <li> первая строка <li> вторая строка <li> третья строка </ul> 1. первая строка 2. вторая строка 3. третья строка A. первая строка B. вторая строка C. третья строка a. первая строка b. вторая строка c. третья строка I. первая строка II. вторая строка III. третья строка <ul type="i"> <li> первая строка <li> вторая строка <li> третья строка </ul> i. первая строка ii. вторая строка iii. третья строка В этой таблице представлено 5 html-кодов и их результаты. По сути они одно и то же, но изменение параметра type="..." дает знать о себе раличными результатами. В первом случае мы видим простой нумерованный список с арабскими цифрами. Во втором - список маркированный заглавными латинскими буквами. В третьем - маркировка строчными латинскими буквами. В четвертом - маркировка большими римскими цифрами. В пятом маленькие римские цифры. Списки определений Хотя списки определений используются не так части, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно, когда вы приводите дополнительную информацию. Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег <li>. Тег <dt> задает отдельный элемент, то есть определяемый термин, а тег <dd> - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Взглянув один раз на список определений, вы поймете, откуда такое название. Идеальное использование списков такого типа это словарь. С помощью HTML вы можете легко задать каждый термин и его определение. Однако скоро вы узнаете о многих других применениях таких списоков. В этом примере первой строчкой списка будет название музыкальной комманды, а второй - краткий комментарий. Мои любимые музыкальные комманды: <ul> <dt><b>Prodigy</b> <dd><i>Группа родилась в 90х годах. С самого начала состояла из 4х участников: Lime, Keith, Maxim и Leeroy. В 2000 году Leeroy решил покинуть группу и начать сольную карьеру...</i> <dt><b>Bjork</b> <dd><i>Девушка начала заниматься музыкой в очень раннем возрасте. Она работала совместно с SugarCubes, но быстра ушла из комманды: сразу после выхода неудавшегося их 2го совместного альбома...</i> </ul> Вот что мы получим в результате: Мои любимые музыкальные комманды: Prodigy Группа родилась в 90х годах. С самого начала состояла из 4х участников: Lime, Keith, Maxim и Leeroy. В 2000 году Leeroy решил покинуть группу и начать сольную карьеру... Bjork Девушка начала заниматься музыкой в очень раннем возрасте. Она работала совместно с SugarCubes, но быстра ушла из комманды: сразу после выхода неудавшегося их 2го совместного альбома... Списки в списках Одно из замечательных свойств списков - это возможность вкладывать их друг в друга. Вложение списков в списки позволяет вам создать несколько уровней организации информации. Вы можете использовать несколько уровней списка на одной странице. Вы можете использовать несколько уровней списка на одной странице, что поможет упорядочить информацию. Главное не перетрудиться ;). Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега </ul>. Вкладывать друг в друга можно даже типы списков (простой маркированный, нумерованный или список определений). Давайте посмотрим пример списка в списке: Мои интересы: <ul> <li>Любимое п/о <ul> <li>Microsoft <li>Far Manager </ul> <li>Любимые музыкальные исполнители <ul> <li>Prodigy <li>Björk </ul> </ul> Вот что мы получим в результате: Мои интересы: Любимое п/о o Microsoft o Far Manager Любимые музыкальные исполнители o Prodigy o Bjork Итак, подводя итоги пройденного сегодня материала могу сказать, что мы ознакомились сегодня с различными видами списков, а о таблицах мы начнем разговор на следующем занятии. Урок 8. (Уроки HTML) – таблицы У списков есть один недостаток - они одномерны. Это значит, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для вывода информации на веб-страницу. Важно использовать таблицы так, чтобы они не занимали попусту место на вебстранице. Благодаря наличию строк и столбцов таблицы удобно для сравнения и противопоставления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице. Хорошая таблица делает веб-страницу информативной, аккуратной и организованной, а неудачная разбивает ее и запутывает то, что вы хотели сообщить. Давайте взглянем на удачную таблицу. Имя Команда Победы/поражения Очки Ауты Пит Шурек Цинциннати 16-2 2,73 194 Гидео Немо Грег Энгриус Лос-Анджелес Атланта 19-8 24-6 2,94 2,21 399 275 Как построить таблицу Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги <table> и </table> обрамляют таблицу целиком, а ряд других тегов определяет, каким образом будет выводиться информация. В следующей таблице я приведу полное описание всех тегов таблиц. Теги Описание <table> и </table> Эти теги охватывают таблицу. Тег <table> сообщает браузеру, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER (получится <table border>), но подробней об этом позже. <caption> и </caption> Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги <tc> и </tc>. <th> и </th> Теги отображают текст заголовка или строки столбца немного более крупным полужирным шрифтом. <tr> и </tr> Теги, определяющие каждую строку таблицы. Тег </tr> необязателен, но делает html-код более красивым и понятным. <td> и </td> Эта пара тегов определяет текст каждой ячейки таблицы. При использовании этих тегов следует быть очень аккуратным, иначе создание таблицы, состоящей из нескольких строк, может оказаться сложным делом. Чтобы создать даже такую простую таблицу, как была приведена в качестве примера чуть выше (по бейсбол), понадобится довольно много строк html-кода. Теперь я покажу, в качестве примера правильной таблицы, код той самой таблицы: <table border="1"> <tr> <td align="center"><b>Имя</b></td> <td align="center"><b>Команда</b></td> <td align="center"><b>Победы/поражения</b></td> <td align="center"><b>Очки</b></td> <td align="center"><b>Ауты</b></td> </tr> <tr> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> </tr> <tr> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> Да! И это все для маленькой таблички! На самом деле, елси вы терпеливо и аккуратно вводите теги, создаете таблицу, оказывается, весь процесс не так уж и сложен. Теперь давайте все по порядку. Первый шаг - ввод инициализационного тега таблицы: <table> </table> Чтобы ячейки таблицы были разделены тонкими линиями, добавим тег border. Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не будет. Теперь начнем создавать ячейки, одну за другой. Сначала зададим строку: <table border="1"> <tr> </tr> </table> После этого зададим ячейки. Их у нас 5, соответственно 5 открытий и закрытий тегов <td> и </td> <table border="1"> <tr> <td>Имя</td> <td>Команда</td> <td>Победы/поражения</td> <td>Очки</td> <td>Ауты</td> </tr> </table> В итоге мы получим это: Имя Команда Победы/поражения Очки Ауты Не очень-то и смотрится без центрирования таблицы. Давайте исправимся? <table align="center" border="1"> <tr> <td>Имя</td> <td>Команда</td> <td>Победы/поражения</td> <td>Очки</td> <td>Ауты</td> </tr> </table> В итоге мы получим это: Имя Команда Победы/поражения Очки Ауты Теперь таблица посередине, но было бы лучше если бы были и другие строки, а верхняя, в качестве заглавной, была выделена тегами <th> и </th> (чуть более жирнее): <table align="center" border="1"> <tr> <th>Пит Шурек</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr> <td>Манчестер</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> </tr> </table> В итоге мы получим это: Имя Пит Шурек Команда Цинциннати Победы/поражения 16-2 Очки 2,73 Ауты 194 В принципе все, основные команды управления таблицами вы уже знаете. Расширенные возможности форматирования таблиц Теперь, когда вы умеете создавать простую красивую таблицу, попробуем ее слегка оживить. Современные браузеры предлагают несколько впечатляющих способов настройки таблиц. При использовании каждого из этих методов подразумевается, что вы аккуратно сосчитали количество строк и столбцов. В каждом из разделов вы увидите измененную версию простой нашей "бейсбольной" таблицы. Объединение нескольких строк в одну ячейку Если вы будете часто применять таблицы, то непременно столкнетесь с ситуацией, когда какая-либо ячейка должна занимать несколько строк таблицы. Здесь вам пригодится ключевое слово ROWSPAN, которое добавляется в тег <td> заданной ячейки. Чтобы ячейка занимала две строки вместо одной, замените ваш код, например <td>текст вашей простой ячейки</td> на <td rowspan=2>Вас расширенный текст</td>. Теперь при отображении таблицы ячейка с ключевым словом ROWSPAN займет две строки. Так можно изменить бейсбольную таблицу: <table align="center" border="1"> <tr> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr> <td>Пит Шурек</td> <td rowspan=2>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> </tr> <tr> <td>Хосе Рио</td> <td>28-2</td> <td>1,92</td> <td>199</td> </tr> </table> В итоге мы получим это: Имя Пит Шурек Хосе Рио Команда Цинциннати Победы/поражения 16-2 28-2 Очки 2,73 1,92 Ауты 194 199 Мы видим что 2 ячейки с параметром "Команда" объеденились в одну. Объединение нескольких столбцов в одну ячейку Подобно тому, как ROWSPAN распространяет ячейку на несколько строк, COLSPAN "раздвигает" ее на несколько столбцов. С помощью ключевого слова COLSPAN вы можете распространить ячейку на любое количество столбцов. Обратите внимание на следующий код: <table align="center" border="1"> <tr> <th colspan=2>Личная информация</th> <th colspan=3>Статистика</th> </tr> <tr> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> </tr> <tr> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> В итоге мы получим это: Личная информация Имя Команда Пит Шурек Цинциннати Гидео Немо Лос-Анджелес Грег Энгриус Атланта Статистика Победы/поражения 16-2 19-8 24-6 Очки 2,73 2,94 2,21 Ауты 194 399 275 Я думаю здесь тоже без проблем... Включение списка в таблицу Таблицы можно комбинировать с другими элементами HTML. Так, они могут содержать списки любого из описанных на прошлом занятии типов. Строго следите за тем, чтобы всегда использовались закрывающие теги, иначе коды списков трудно отслеживать. Давайте попробуем включить маркированный список в нашу таблицу: <table align="center" border="1"> <tr> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td> <li>команда "All-Star Team" <li>Награда MVP <li>Серебряная летучая мышь </td> </tr> <tr> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> В итоге мы получим это: Имя Команда Победы/поражения Очки Ауты Пит Шурек Цинциннати 16-2 2,73 194 Гидео Немо Грег Энгриус Лос-Анджелес Атланта 19-8 24-6 2,94 2,21 399 275 команда "All-Star Team" Награда MVP Серебряная летучая мышь Итак, сегодня мы начали знакомиться с таблицами. Мы изучили элементарные функции построения таблицы, изучили возможности объединения нескольких строк в одну ячейку и нескольких столбцов в одну ячейку. На тему таблиц материала осталось примерно еще на один урок. Урок 9 (Уроки HTML) – форматирование в таблице. Выравнивание текста в таблице Для каждой ячейки вы можете задать способ выравнивания текста как по вертикали, так и по горизонтали. Способы выравнивания задаются специальными ключевыми словами align и valign. Вы можете задать также способ выравнивания для всей таблицы полностью или для заданной строки. Но, как правило, это выполняется только для одной ячейки, хотя и остальные способы имеют место применения. Каждое из ключевых слов align и valign имеет четыре возможных значения. Они используются так же, как и описанные выше ключевые слова объединения в теге <td>,. Сейчас я приведу вам таблицу, в которой даны эти значения: Значение ключевого слова Описание ALIGN=LEFT Выравнивает текст в ячейке (таблице, строке) по левому краю (идет по умолчанию) ALIGN=CENTER Выравнивает текст в ячейке (таблице, строке) по центру ALIGN=RIGHT Выравнивает текст в ячейке (таблице, строке) по правому краю ALIGN=JUSTIFY VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM Растягивает текст в ячейке (таблице, строке) на всю строку (проверено на MSIE 4.0+) Растягивает текст в от самого верха ячейки (полезно, когда информация в строке состоит из нескольких строк) Выравнивает текст в ячейке в ячейке вертикально по центру (идет по умолчанию) Выравнивает текст в ячейке по нижнему краю Продолжая работать с бейсбольной таблицей (та, в которой есть список), введем ключевое слово VALIGN=TOP для всей строки, стодержащей список, чтобы текст не "плава" в центре ячейки. Изменим тег этой строки таким образом: <table align="center" border="1"> <tr> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr valign=top> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td> <li>команда "All-Star Team" <li>Награда MVP <li>Серебряная летучая мышь </td> </tr> <tr> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> И посмотрим что получилось: Имя Пит Шурек Гидео Немо Грег Энгриус Команда Победы/поражения Очки Ауты Цинциннати 16-2 2,73 194 ЛосАнджелес 19-8 2,94 399 Атланта 24-6 2,21 275 команда "AllStar Team" Награда MVP Серебряная летучая мышь Цвета в таблице До недавнего времени не было возможности управлять цветами в таблице на вебстраницах. Сетка таблицы была черной, фон совпадал по цвету с фоном самой страницы. Было очень трудно выделить какую-то ячейку другим цветом. Теперь существует ряд новых тегов, позволяющих задать цвета фона и сетки таблицы. В первом случае ключевое слово bgcolor вставляется в тег <table> следующим образом: <table </table> bgcolor="yellow"> Мы изучали цвета на втором уроке. Кроме bgcolor, существуют другие способы управления цветом: Значение ключевого слова Описание BORDERCOLOR="..." Изменяет цвет сетки таблицы BORDERCOLORDARK="..." / BORDERCOLORLIGHT="..." Используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти аттрибуты, ваша таблица выглядет трехмерной. Имя Пит Шурек Гидео Немо Грег Энгриус Команда Победы/поражения Очки Ауты Цинциннати 16-2 2,73 194 ЛосАнджелес 19-8 2,94 399 Атланта 24-6 2,21 275 команда "All-Star Team" Награда MVP Серебряная летучая мышь Такого вида таблицы мы добились лишь с помощью этих самых ключевых тегов: <table align="center" bordercolordark=navy bordercolorlight=blue border="1"> <tr bgcolor="yellow"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> </tr> <tr valign=top bgcolor="#abcdef"> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td bgcolor="#bcdefa"> <li>команда "All-Star Team" <li>награда MVP <li>Серебряная летучая мышь </td> </tr> <tr bgcolor="#abcdef"> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> </tr> <tr bgcolor="#abcdef"> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> </tr> </table> Альтернативы таблицам Если вас беспокоит то, что ваши таблицы не смогут увидеть некоторые посетители, потому что они используют браузеры, которые не поддерживают таблицы (например Lynx, или старые версии Mosaic или Netscape), или таблицы вообще кажутся вам слишком трудоемкими и неинтересными, для вас создан ряд популярных альтернатив, например использование списков или предварительного форматирования (о нем чуть позже). Оба эти способа сходны с созданием таблицы, но их возможности гораздо более органичены. Вместо таблицы используем список Несмотря на то что списки "одномерны", парой списков при надлежащем использовании можно заменить практически любую таблицу. Например, вы можете замеить бейсбольную таблицу несколькими списками. Конечно, эти списки не так легко читать, как таблицу, и они заставляют пользователя перемещаться по экрану. В общем случае списки менее компактны, чем таблицы. Кроме того, информацию в списках труднее сравнивать. Посмотрите на список, заменяющий нам бейсбольную таблицу: Пит Шурек o Цинциннати o 16-2 (W/L) o 2.73 очков o 194 аута команда "All-Star Team" Награда MVP Серебряная летучая мышь Гидео Немо o Лос-Анджелес o 19-8 (подеды/поражения) o 2.94 очков o 399 аута Грег Энгриус o Атланта o 24-6 (победы/поражения) o 2.21 очков o 275 аутов Предварительное форматирование При использовании тегов <pre> и </pre> информация отображается браузером точно в таком виде, в каком вы ее напечатаете, без всякой интерпритации. Вы можете воспользоваться этими тегами для эмуляции таблицы. Результат не так эффектен, как таблица, и здесь невозможно ввести сетку таблицы, но большинство людей не заметит особой разницы. Предварительно отформатировав текст с использованием возвратов каретки, пробелов и табуляций так представит все ту же бейсбольную информацию: <PRE><B> Имя Команда Победы/поражения Очки Ауты</B> Джон Хеппи Цинциннати 16-2 2.73 194 Гидео Немо Лос-Анджелес 19-8 2.94 399 Грег Энгриус Атланта 24-6 2.21 275 Победы/поражения 16-2 19-8 24-6 Очки 2.73 2.94 2.21 Ауты 194 399 275 </PRE> Что получится: Имя Джон Хеппи Гидео Немо Грег Энгриус Команда Цинциннати Лос-Анджелес Атланта Итак, подводя итоги пройденного сегодня материала, хочу сказать что мы изучили: способы выравнивания текста в таблице, цвета в таблице, нашли способы замены таблиц списками и предварительным форматированием. Урок 10 (Уроки HTML) – графика Как оживить веб-страницу с помощью графики? Вот и добрались до графики. Имея за плечами страницу украшенную списками, таблицами, заголовками и красивым форматированным текстом начнем ее "оживлять". "За" и страницах "против" применения графики на веб- Вы, наверное, потратили много времени, просматривая различные веб-узлы, видели личные страницы, коммерческие, и я уверен, что практически на каждой из них тем или иным образом использовалась графика. В WWW можно найти любую графику, начиная от логотипов фирм и броских пиктограмм до фотографий домашних животных и репродукций известных картин. Рисунки и графика жизненно важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст. Представьте себе, что вы берете любимую газету, а там нет иллюстраций. Она будет выглядеть скучно, независимо от того, как отформатирован текст. Веб-страница без графики подобна рекламному проспекту без рисунков - в нем просто нет смысла. На этом, и ближайших уроках мы научимся вводить в домашнюю страницу изображения и рисунки, что сделает ее более привлекательной для посетителей. Конечно, будет немного сложно показывать вам примеры в рассылке, так как большинство людей просматривает e-mail сообщения в режиме OffLine (отключен от сети). Поэтому вам будет полезно посещать архив рассылки расположенный на сайте Design Laboratory. Читателям рассылки в текстовом режиме вообще с этой темой не повезло... Иногда следует избегать применения графики на веб-страницах, но такие случае крайне редки. Как правило, страницы без графики довольно скучны. С другой стороны, будьте благоразумны и не обременяйте свою домашнюю страницу слишком большим количеством изображений. Решив ввести сотню изображений, вы явно перегрузите свою страницу. Если ваша страница загромождена пиктограммами и изображениями, текст потеряется в этой неразберихе и посетители не поймут, куда же они попали. Кроме того, страница будет загружаться бесконечно долго, и все ваши усилия сойдут на "зачем я жду? пойду на другой сайт". Где вы сможете найти графику, изображения и рисунки Теперь, когда вы убедились, что вам следует ввести в веб-страницу несколько графических объектов, задается вопрос: где их взять? Сайт Design Laboratory расчитан для вебстроителей. На нем есть раздел Графика где вы сможете найти большую коллекцию различной графики. Вы также можете взаимствовать графику с чужих веб-страниц. Для этого необходимо подвести курсор мыши на изображение, вызвать всплывающее меню (правой кнопкой) и найти Save Image As... [Сохранить рисунок как...]. Потренеруйтесь с этим загадочным квадратом справа. Правда сохранять-то нечего, поэтому вы просто увидите надпись Save as…. Создаем свое изображение Существует множество программ, позволяющих создать свое изображение. Например имея какую-либо картинку, мы можем привязать к ней любую надпись, но это уже не HTML. Учиться рисовать будем только после того, как изучим HTML. Делая домашнюю страничку, мы можем положить на нее свою фотографию. Обычно, простые бумажные фотографии переходят в графический режим при помощи сканеров. Сканеры бывают различного качества и стоимости. Вы можете найти простенький чернобелый сканер за 79 долларов, но самый совершенный цветной сканер может стоить все 1000 долларов и более, в зависимости от требуемого качества. Сканеры характерезуются разрешением. Разрешение - это число крошечных точек, которые различает сканер при преобразовании в цифровой код ваших фотографий и рисунков. Разрешение является важнейшей характеристикой, поскольку чем оно больше, тем более подробным будет изображение. Выбирайте сканер с разрешением не меньше 300х300 точек на дюйм. Это означает, что при сканировании каждого квадратного дюйма сканер различает 90'000 точек. Кажется, что это много, но обычный факс имеет разрешение 200х200 ppi (pixels per inch - точек на дюйм) и вы знаете, какими расплывчатыми иногда бывают сообщения. Часто сканеры поставляются с программным обеспечением, которое существенным образом повышает разрешение. Сканеры с высоким разрешением обычно стоят довольно дорого. Они вряд ли необходимы, если вы просто сканируете изображения для веб-страницы. Для непрофессионального исп7ользования обычно достаточно разрешения 300х300 или 600х600 ppi. Как поместить изображение на страницу Теперь мы знаем, откуда берутся изображения. Настала пора поместить на нашу вебстраницу каких-нибудь картинок. Далее я расскажу процесс вставки графики в веб-страницу и рассказывается об использовании при этом различных опций HTML. Сначала мы узнаем кое-что об изображениях и типах файлов. Затем последует описание процесса помещения простого изображения на веб-страницу. Вы также узнаете о некоторых тонкостях, облегчающих использование вашей веб-страницы и делающих ее более привлекательной. Использование файлов нужных типов Изображения можно созранять в нескольких форматах. У каждого их них есть свои преимущества и недостатки. Не секрет, что во всемирной паутине преобладают 2 распространенных формата - GIF и JPeG. Тип файлов GIF (Graphical Interchange Format Графический Формат Обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых WWW. Недавно был разработан формат JPeG (Joint Photographic Experts Group - Объединенная Группа Экспертов Фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPeG занимают меньше места и, соответственно, быстрее загружаются. Но бывает так, что GIF занимает меньше места, чем JPeG, но это лишь в тех случаях, когда изображение маленького размера (не в байтах, а в точках). Как поместить изображение на страницу Имеется страница, на которой имеется пока только текст. Например эта: -= Моя коллекция бабочек =Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Стоит нам добавить одну строчку и страничка превращается в следующее: -= Моя коллекция бабочек =- Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Посмотрите, что мы добавили: <center> <h3>-= Моя коллекция бабочек =-</h3> <img src="images/baterfly/pic1.jpg"><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br> Изображения помещаются на странице крайне просто. Вам нужно только знать, как применять тег <img>. IMG - сокращение от "image" ("изображение"). Надо ввести тег <img> и ключевое слово SRC="..." для указания, какую картинку закрузить. И все! Изображения можно помещать в любом месте веб-страницы, в заголовки, таблицы, списки или в текст, только проверьте, чтобы тег <img> оказался между тегами <body> и </body>. В данной странице о бабочках я собираюсь ввести изображение бабочки, вверху страницы, как раз под заголовком <h1></h1>. Мы вставляли здесь картинку бабочки в формате GIF, под названием pic1.jpg, которая находится в папке /images/baterfly/. Тег <img> сообщает браузеру, что необходимо вывести на экран изображение с именем исходного файла dc72.gif. Вводя этот тег, вы подразумеваете, что файл pic1.jpg находится в папке /images/baterfly/. Если эта картинка находится в той же папке, что и HTML-файл в котором вы собираетесь вставить тег <img>, то название папки можно не вводить, тогда код будет выглядеть следующим образом: <img src=" pic1.jpg ">. Основываясь на информации, приведенной, легко определить, когда вы указали неверное расположение графического файла: браузер вместо изображения, которое вы ожидали увидеть, выводит вместо картинки пиктограму ошибки такого вида: Эта пиктограмма показывается браузером в случаях, если: Имя файла, содержащего изображение, задано неверно и не указывает ну существующий файл (возможно, вы по ошибке набрали не dc72.gif, а dcc72.gif). Неверно указан путь к файлу. Попробуйте скопировать файл с изображением в ту же директорию, где находится ваш HTML-файл. Бывает, что некоторые сервера, на которых вы решите хранить свою страницу (например narod.ru) базированы на UNIX'е. Ничего страшного если не понятно. Суть в том, что важно как вы напишите имя файла. Например если вы напишите <img src="PIC1.JPG">, картинка не покажется из-за регистра. Попробуйте ввести <img src=" pic1.jpg"> и ошибка будет устранена. Файл изображения находится там, где вы указали, но у него неверно обозначены права доступа. Поскольку веб-страница предназначена для загрузки и Интернет, часть ваших файлов изменяется так, чтобы никто не смог просмотреть их. В этом случае, если вы уверены, что верно указали путь, свяжитесь со своим провайдером и спросите его, как правильно установить права доступа. Оптимальные размеры изображений При использовании изображений на веб-страницах вам придется обратить внимание на размеры файлов. Когда кто-то посещает веб-страницу, ему обычно необходимо загрузить весь текст и все изображения на свой компьютер. Текст загружается не долго, чего нельзя сказать об изображениях. Вы должны представить себе, насколько велика ваша веб-страница и сколько времени потребуется пользователю на полную ее загрузку. Загрузка должна занимать разумный промежуток времени. Представьте себе, что вы обратились в компанию за консультацией. Вам пришлось потратить немало сил и времени на то, чтобы соединиться с нужным добавочным номером. А после этого приходится еще ждать, когда освободится нужный специалист. Вы просто сидите и ждете у телефона, хотя предпочли бы заняться в это время чем-нибудь другим. Если вы повесите трубку и перезвоните позже, вас ждет такая же канитель. Примерно тоже самое происходит, когда посетитель останавливается на вашей веб-странице. Она сразу же начинается появляться, но посетителям приходится ждать, пока загрузится весь текст и все рисунки. До этого времени они не могут продолжить работу. Им приходится сидеть и смотреть, как их компьютер загружает все картинки одну за другой. И чем дольше им приходсят ждать, тем больше они теряют терпение. Поскольку пустое ожидание всегда раздражает, попробую дать некоторые советы, которые помогут сделать так, чтобы посетители не уходили наливать себе чашку кофе, когда начнет загружаться ваша веб-страница (иначе после 1-2 посещений он у вас больше не появится). Максимальный размер файла. Лично я стараюсь ограничить любые изображения на своих сайтах. Придерживаюсь нормы 15-20 килобайт. Такие изображения достаточно подробны, но посетители не начинают грызть ногти в ожидании, пока они загрузятся. Ограничение в 15-20 килобайт очень приблизительно. Чуть позже я расскажу о пиктограммах, и вы убедитесь, что большинство из них очень малы (0.5-5 килобайт) и быстро загружаются. Если вы встретили потрясающее изображение, занимающее больше 20 килобайт, спокойно используйте его. Просто помните, что если вы вставите слишком много таких изображений, время ожидания посетителей существенно возрастет. Уменьшение размера и миниатюризация изображений. Если общий размер файлов превышает желаемый, у вас есть несколько способов разместить изображение к себе на страницу, не заставляя каждого посетителя должно ждать их загрузки. Вы можете масштабировать изображения, уменьшив их размер на экране и, соответственно, размер файла. Кроме масштабирования существует другой способ ужать картинку в размерах, с понижением при этом качества. Но об этом чуть позже. Существует ряд профессиональных пакетов, таких как Adobe Photoshop, Corel PhotoPaint, позволяющих изменять размеры изображений. После уменьшения размера ваше изображение становится труднее рассматривать. Некоторые изображения в сжатом виде смотрятся хорошо, другие же практически невозможно разглядеть. Другая возможность, которой можно воспользоваться - создание миниатюрных дубликатов более крупных изображений. Вы создаете на веб-странице миниатюрную копию большого изображения и вставляете ссылку на изображение-оригинал, чтобы посетители смогли увидеть его полную версию, если захотят. Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть. Я покажу вам сейчас как можно использовать миниатюры:7 Миниатюра Полное изображение Алтернативный текст Некоторые браузеры не поддерживают форматы GIF и JPeG, другие вообще не могут выводить изображения. Хотя наиболее распространенные браузеры поддерживают оба формата, вы наверняка захотите, чтобы ваша веб-страница была доступна абсолютно любому человеку. Кроме того, иногда загрузка изображений занимает много времени, и не очень приятно, если ваши посетители будут видеть просто белые пятна на месте изображений. Торопливые посетители часто командуют браузерам прекратить загрузку иозображений с WWW. Поскольку загрузка изображений отнимает львиную долу времени, они предпочтут ускорить процесс, не дожидаясь полной загрузки всех изображений. Для таких посетителей полезен альтернативный текст - тогда они смогут прочесть короткое описание того, что предоставлено на рисунке, и при желании просмотреть его. В описаных выше случаях полезно использовать ключевое словов ALT тега <img>. ALT выводит заданный текст в той части экрана, где должно быть (или будет) изображение. Задание альтернативного текста, описывающего изображения домашней страницы, считается правилом вежливости. Альтернативный текст является частью тега <img>. Просто добавьте к тегу ключевое слово ALT="..." и наберите текст в кавычках после знака "равно". Данный тег с альтернативным текстом, к примеру с pic1.jpg, выглядет так: -= Моя коллекция бабочек =- Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Посмотрите, что мы добавили: <center> <h3>-= Моя коллекция бабочек =-</h3> <img alt="Бабочка" src="images/baterfly/pic1.jpg"><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br> Есть еще один плюс у альтернативного текста. Подведя курсор мыши к картинке где есть ключевое слово ALT="...", вы увидите всплывающее окошко с самим альтернативным текстом. Попробуйте подвести к бабочке чуть выше. Мы начали разговор о веб-графике. Этот урок был вводным, поэтому важных материалов по обучению почти не содержал. Урок 11 (Уроки HTML) – выравнивание изображений. Продолжая тему об изображениях перехожу к следующей процедуре. Есть несколько способов выравнивать изображения на странице по отношению к тексту. Ключевое слово align нам в этом поможет. С его помощью вы можете задавать место изображения на экране и вид оборки его текстом. Сейчас я приведу вам 8 опций ключевого слова align. Опция Действие LEFT Выравнивает изображение по левому краю страницы, строки текста выводятся справа от изображения RIGHT Действует подобно LEFT, но выравнивает изображение по правому краю страницы TOP Выравнивает изображение по самомы высокому элементу в строке. TEXTTOP Выравнивает изображение по самому высокому элементу в строке (обычно совпадает с top) MIDDLE Выравнивает нижнюю границу строки посередине изображения ABSMIDDLE Выравнивает середину строки посередине изображения (очень похожа на MIDDLE, но прменяется для мелких изображений) BASELINE см. сл. BOTTOM Выравнивает нижнюю границу строки по нижней границе изображения Давайте будем избегать тегов TEXTTOP, ABSMIDDLE и BASELINE, они могут вас просто запутать. Чтобы задать выравнивание картинки бабочки по левому краю, зададим следующую команду: <center> <img align="left" alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"> <h3>-= Моя коллекция бабочек =-</h3> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br> Посмотрите, что получится: -= Моя коллекция бабочек =Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Задание размера изображения Вы можете управлять не только способом выравнивания изображения, но и его высотой и шириной. Как правило, изображения выводятся в натуральную величину, но с помощью ключевых слов HEIGHT и WIDTH можно сжать или растянуть изображение, не изменяя самой картинки. Кроме того, ключевые слова HEIGHT и WIDTH позволяют отвести вполне определенное место под изображение и пустить текст вокруг него оборкой. В этом случае, пока загружаются изображения, остальная страница будет уже видна. Многие применяют ключевые слова HEIGHT и WIDTH именно по этой причине, даже если нет необходимости менять размер изображения. Значения HEIGHT и WIDTH задаются в пикселах. Тем самым задается доля размеров картинки по отношению к размерам экрана. Ключевые слова HEIGHT и WIDTH используются в теге <img> наряду с ключевыми словами выравнивания и альтернативного текста. Когда я ввел ключевое слово HEIGHT и WIDTH в тег картинки, получился следующий код: <center> <img width="100" height="100" align="left" alt="Бабочка" src= "images/baterfly/pic1.jpg"> <h3>-= Моя коллекция бабочек =-</h3> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br> Посмотрите, что получится: -= Моя коллекция бабочек =Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Теперь изображение бабочки на экране размерами в 100х100. HEIGHT - высота, WIDTH - ширина. Пиктограммы Кроме полноцветных изображений (подобной бабочке) и рисунков, на странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию "изображения" (они обычно хранятся в файлах формата GIF или JPeG), но обычно очень малы 0.5-5kb, и применяются на домашних страницах из соображений дизайна, эстетики, а также для "перелистывания" страниц. Существуют самые различные пиктограммы. На страницах WWW вы найдете их великое множество, начиная от миниатюрных пиктограмм реконструкции до цветных линий и кнопок. Иногда при просмотре домашних страниц вы даже не отдаете себе отчета в том, что вы смотрите на пиктограммы, насколько хорошо они интегрированы в страницу. Линии и полосы Раньше мы говорили о применении тега <hr> для того, чтобы разделить веб-страницу на части линиями. Очень часто вместо тега <hr> используют линейную графику (простую графику в виде полос или линий). Элементы линейной графики бывают различных форм, цветов и рисунков и существенно отличаются от результата работы тега <hr>. Например, на нашей странице необходимо поставить красивый разделитель под названием pic4.gif, который расположен на /images/borders/: <center> <img alt="Бабочка" src= "images/baterfly/pic1.jpg"> <h3>-= Моя коллекция бабочек =-</h3> <img src=/images/borders/pic4.gif><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br><br> Посмотрите, что получится: -= Моя коллекция бабочек =- Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Пиктограммы новинок, пиктограммы перемещения Это, пожалуй, категория полезных пиктограмм для профессиональных разработчиков и самых бесполезных - для тех, кто создает простую веб-страницу. Они полезны, когда у вас большой веб-узел, состоящий из многих страниц с перекрестными ссылками друг на друга. Поскольку ваща страница, скорее всего, окажется достаточно простой, вам вряд ли пригодится пикограммы перемещения. Обычно эти пиктограммы имеют вид стрелок, указывающих то или иное направление. Обычно это стрелки перехода на следующую страницу. Например, если вы читаете книгу на веб-узле, скорее всего, вы увидите на каждой странице три пиктограммы: стрелка влево, стрелка вправо и пиктограмма "Начало". Стрелка влево вернет вас на предыдущую страницу, стрелка вправо - на следующую, а пиктограмма "Начало" - в самое начало книги. Это избавит вас от необходимости перемещаться с помощью кнопок Back (Назад) и Forward (Вперед) на панели инструментов браузера. Пиктограммы перемещения полезны только в том случае, когда вы пытаетесь связать ссылками в одно целое несколько веб-страниц, поскольку они дают возможность графически "листать" страницы. Фон страниц Одна из интересных возможностей HTML - это задание фона документа. Вместо того чтобы создавать страницы со стандартным серым фоном, вы можете задать любой другой цвет. Если даже вам не нравится однотонный фон, вы можете задать фоновый узор. Это сделает вашу с траницу забавнее. Давным-давно людям было безразлично, какого цвета машина, на которой они ездят. Все ездили на Ford Model T, которые выпускались только черного цвета. Эта машина устраивала несколько поколений людей, пока их не осенило, что машины могут быть разных цветов и форм. Сегодня на дорогах можно увидеть машини всех цветов, от пурпурного до ярко-зеленого. Веб-страницы эволюционировали аналогичным образом. Сначала фон всех веб-страниц был белым или серым, поскольку именно так их отображали древнии браузеры. Вскоре всем это надоело, и появилось уже знакомое нам ключевое слово BGCOLOR, способное изменять цвет фона Веб-страниц. У вас есть возможность выбора из 16'777'216 цветов. Гораздо быстрее можно задать один из 16 "именных" цветов. Ключевое слово BGCOLOR может использоваться в теге <body>. Мы говорили уже об этом на первом уроке. Вы можете задавать не только стандартные цвета, но и фоновые рисунки. При правильном применении эта графика дает интересный эффект. Фоновые узоры состоят из картинок, которые повторяясь создают эффект узоры (как обычные обои). Текст и изображение, естественно, распологаются поверх фона. Допустим у нас есть фоновая картинка pic5.jpg расположенная на http://cray.vision.krg.kz/~Sam/dlab/grcol/back. Посмотрите, как с помощью ключевого слова BACKGROUND="..." мы поставим эту картинку как фон в нашей странице: <body background="/images/borders/pic5.jpg"> <center> <img alt="Бабочка" src= "images/baterfly/pic1.jpg"> <h3>-= Моя коллекция бабочек =-</h3> <img src=/images/borders/pic4.gif><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br><br> </body> Посмотрите, что получится: -= Моя коллекция бабочек =- Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. На этом занятии мы узнали о том, как выравнивать изображения, задавать точные размеры изображений, изучили различные виды пиктограмм, поговорили о фонах. Осталось еще материала по этой теме примерно еще на одно занятие. Урок 12 (Уроки HTML) – работа с изображениями. Прозрачные изображения в формате GIF Я уже говорил о форматах GIF и JPeG как имеющие примерно равные возможности с точки зрения помещения графики на веб-страницы. Настала пора упомянуть об одном специфическом свойстве формата GIF, дающем ему преимущество при интеграции в вебстраницу - о прозрачности. В GIF-изображениях можно задать один цвет в файле, который будет игнорироваться браузерами и рассматриваться ими как прозрачный, то есть такой, сквозь который можно видеть фон. В результате браузер выводит обычное GIF-изображение, но вместо одного из его цветов показывает фоновый цвет или узор веб-страницы. Подобно тому, как проектор отображает слайды на позрачных пленках, браузеры воспроизводят прозрачные GIFизображения так, чтобы рисунки выглядели на веб-странице более естественно. Прозрачные GIF-изображения - мощное средство разработки страниц. Чтобы создавать интересные рисунки для WWW, необходимо уметь использовать прозрачные GIFизображения. Понять, что такое прозрачные GIF-изображения и как они работают, девольно просто. Вспомните, как работает проектор. Просвечивая прозрачные пленки с нанесенными на них надписями, он отображает на экране только надписи. Прозрачные GIF-изображения выглядят на экране примерно так же. Формат GIF позволяет задать один из 256 доступных в GIF цветов, который при отображении на браузере будет игнорироваться, то есть выглядеть прозрачным. Часто GIF-изображения применяются в рисунках с белым фоном. Если белый цвет задан в качестве прозрачного, браузер игнорирует все белые точки в рисунке, и изображение становится "плавающим". Оно лучше интегрируется в веб-страницу. Давайте посмотрим как отличаются прозрачные картинки от непрозрачных. -= Моя коллекция бабочек =Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Еще у меня есть различные графические инструменты: Adobe Photoshop Corel Draw PhotoPaint На этой странице использованы два различных зеленых маркера в виде треугольника. Один прозрачен, другой нет. Обратите внимание, что у непрозрачных GIF-изображений виден фон, что не очень привлекательно выглядит, поскольку страница имеет фоновый узор. Именно свойство прозрачности объясняет, почему большинство пиктограмм и маркеров сохраняется в формате GIF а не JPeG. Как браузеры изображениями работают с прозрачными Когда вы задаете один из цветов в качестве прозрачного, эта информация сохраняется в GIF-файле. Поскольку она является частью файла, загружаемого и отображаемого на вебстраницах, браузеры легко распознают и игнорируют этот цвет. При разработке GIF-изображений вы располагаете буквально миллионами цветов - 16,7 миллиона оттенков и тонов красного, зеленого и синего. Хотя у вас есть миллионы вариантов, одновременно можно использовать только 256 цветов. Каждый цвет представлен числом от 1 до 256. Таким образом графические программы (например Photoshop) и веббраузеры распознают каждый цвет. Они не понимают слово "синий", но понимают число, скажем 175. Структура GIF-файла состоит из следующих данных. Сначала идет определение того, что данный файл действительно является GIF-графическим. Потом идет данные палитры этого файла. Потом идет перечисление всех кадров мультика, вот почему анимированный гиф больше чем статичный. Когда браузер выводит изображение, он разбивает его на участки, каждый из которых выводится определенным цветом. Это похоже на то, как вы в детстве раскрашивали картинки, где каждый цвет задан номером. Картинки разбиты на ряд фрагментов, на каждом из которых написан номер, соответствующий определенному цвету. Браузер выбирает из 256 цветов (для GIF-файлов), но идея та же. Каждая часть веб-изображения раскрашивается в соответствии с заданным номером. Вот здесь и срабатывает свойство прозрачности. Вы можете указать браузеру НЕ закрашивать один конкретный цвет изображения, оставляя вместо него пустое место. Поскольку в этом месте изображения ничего не рисуется, оно остается прозрачным, то есть вы можете видеть сквозь него. Браузеры могут размещать цвета изображения в виде фона страницы, под любыми изображениями и текстом. Вместо "прозрачного" цвета вы увидите фон страницы, если он задан. В отношении вывода изображений и графики веб-браузеры оказываются не слишком сложным программным обеспечением. Понимание того, как они выводят прозрачные GIFизображения, помогает использовать при разработке веб-графики все преимущества их простоты и гибкости. Создание прозрачных GIF-изображений Теперь, когда вы познакомились с прозрачными GIF-изображениями и с тем, как их выводят браузеры, настало время создать свое изображение. Создание прозрачных GIF-изображений - не очень хитрое дело, но в этом процессе есть несколько довольно сложных этапов, если вы не совсем уверены в том, что делаете. Я буду использовать Adobe Photoshop 3.0 (rus.edit.). Ничего страшного если версия вашего Photoshop'а более новая или старая. Необходимый плагин есть во всех версиях программы: 1. Запустите Adobe Photoshop и откройте GIF-изображение, с которым вы хотите работать. 2. Если изображение было в сохранено в формате GIF, читайте следующий шаг. Если изображение было сохранено в формате JPeG, то необходимо войти в Режим (Mode) и переключиться на Индексированные цвета (Indexed Colors). После этого действия всплывает окно. В принципе, вы можете поэкспериментировать над всеми параметрами, а так, все выставляется на оптимальный режим. 3. Далее нужно войти в Файл (File) -> Экспорт (Export) -> GIF89a Export. После этого выходит плагин, отвечающий за создание прозрачной основы в GIF-изображении. Имеется инструменты: Увеличение, Перетаскивание и Установка Прозрачности ;). Также дано изображение в оригинале. Выберите инструмент Установка Прозрачности и кликните на том месте изображения, где нужно создать прозрачную основу. Например имеем белый круг на черном фоне. Кликнув на черный цвет инструментом, черный цвет становится прозрачным. Можно попробовать сделать подобное на программе PaintShop Pro: 1. Запустите PaintShop Pro и откройте GIF-изображение, с которым вы хотите работать. 2. Вам необходимо сообщить PaintShop Pro, какой цвет будет прозрачным. По умолчанию PaintShop Pro назначает прозрачным цвет фона. Чтобы выполнить этот шаг, щелкните на пиктограмме Dropper (Пипетка), расположенной в ряду пиктограмм вверху экрана. 3. Теперь переместите курсор мыши в любое место фона вашего рисунка и нажмите на правую кнопку мыши. Пипетка позволяет выбирать цвета, кликая на них мышью. Левая кнопка мыши управляет передним планом, а правая - фоном. 4. В Color Palette (Цветовой палитре), расположенной в правой части экрана, переключается цвет фона и становится таким, на какой вы указали. Например, цвет фона изображения серый. Но действия будут теми же, если в качестве фонового цвета выбрать синий, красный или зеленый - любой. 5. Теперь вы можете сохранить вновь созданное прозрачное GIF-изображение. Выбираете команду строки меню PaintShop Pro File -> Save As... (файл -> сохранить как...). Появится диалоговое окно Save As... где нужно указать имя файла и место, куда его записывать. 6. Нажмите кнопку Options (Параметры). Появится диалоговое окно File Preferences (Предварительные установки). Здесь вы можете точно задать, в каком виде PaintShop Pro необходимо сохранить цвет, указанный вами в качестве прозрачного. 7. Установите переключатель Set the transparency value to the background color (Установить фоновому цвету значение прозрачного). Таким образом вы укажите PaintShop Pro, что текущий цвет фона (заданный в Color Palette) будет прозрачным на веб-странице. 8. Задайте имя файла вашего изображения и сохраните его. Теперь оно подготовлено для использования на веб-странце, и нужный цвет задан как прозрачный. В современных версиях программ по работе с растровой графикой прозрачный GIF рисунок делается проще.7 Наложение изображений Как вы знаете, работа с изображениями может существенно увеличить время загрузки веб-страницы. К сожалению, многие разработчики все же предпочитают использовать на веб-страницах яркие, цветные и большие изображения. Посетителя любят цветные изображения и скорее снова посетят веб-страницы, если они им понравились и запомнились. Разработчики Web часто встают перед выбором между замечательными цветами и хорошей скоростью. Чтобы разрешить эту дилемму, разработано новое ключевое слово тега <img>, которое дает возможность разработчикам и посетителям воспользоваться обоими преимуществами. Это ключевое слово низкого разрешения LOWSCR="...". Оно сообщает браузеру, что сначала следует загрузить малый файл изображения с низким разрешением, а затем, когда загрузится все страница, вывести нормальное изображение с высоким разрешением. На практике разработчики веба часто применяют большие цветные изображения, которые слишком велики для использования на веб-странице. Вместо этого они с помощью графического пакета, такого как PaintShop Pro или Photoshop, создают дублирующий файл с ухудшенной версией той же графики (содержащей черно-белое изображение или изображение меньшего размера). Браузер сначала загружает на страницу изображение, заданное ключевым словом LOWSCR="...". Затем, закончив загрузку остальной части, он загружает обычное изображение, заданное стандартным ключем SRC="...". Допустим, например, что у меня есть два изображения. Одно называется LOWCAR.GIF. Это черно-белая версия цветной фотографии машины. Чтобы использовать слово LOWSCR, я ввожу следующую строку: <img src="HIGHCAR.GIF" lowscr="LOWCAR.GIF"> Сегодня мы закончили разговор о графике в Web. Мы поговорили о прозрачных изображениях в формате GIF, узнали о том как браузеры работают с прозрачными изображениями, научились создавать прозрачные GIF-изображения. Урок 13 (Уроки HTML) – ссылки Ссылки на веб-страницах Веб-страница без ссылок - это изолированный остров. Если ее кто-нибудь посетит, он не сможет оттуда попасть на другие острова-страницы. Если в ваши планы не входит превращать людей в Робинзонов, хорошо бы сослаться на несколько других страниц в WWW. Тогда вы тоже примете участие в плетении всемирной паутины. Уже было показано, как интегрировать в веб-страницу графические изображения, пиктограммы и фоновую графику. Теперь настало время сделать следующий шаг и научиться ссылаться на другие веб-страницы. Гиперссылки на веб-страницы - одно из основных свойств WWW. Любой документ может содержать ссылку на другой веб-документ, заданную с помощью специального тега в HTML. Этот, и возможно еще другие уроки посвящены гипертекстовым ссылкам. Вы узнаете, как на странице сослаться на другие HTML-документы, расположенные в любом месте Интернета. Понятие гипертекстовой ссылки Путешествуя по web'у, вы, наверное, встречали на веб-страницах гипертекстовые ссылки. Это фрагменты текста, часто подчеркнутые и выведенные синим текстом. Отображенный таким образом текст называется текстом ссылки. Если на нем кликнуть мышью, он автоматически осуществляет ссылку на другую веб-страницу. В каждом URL-адресе есть три части: протокол, узер Интернета и имя файла (включая к путь нему, если необходимо). Протокол - это правила, в соответствии с которыми два компьютера общаются друг с другом; в этой главе говорится в основном о стандартном http (hyper text transfer protocol - протокол трансляции гипертекста, т.е. HTML) - стандартном протоколе WWW. Вы должны указать также узел Интернета и при необходимости имя файла. Например онлайновый адрес архива этих уроков, таков: http://cray.vision.krg.kz/~Sam/dlab/subscr/html.arc/index.html Длинно? Но ведь если речь идет о index.html, то его можно опустить... т.е. адрес по идее таков: http://cray.vision.krg.kz/~Sam/dlab/subscr/html.arc/ Если перевести это на русский язык, получится, что браузер должен с помощью определенного способа связи (http) связаться по Интернету с указанным адресом dlab.by.ru (сайт Design Laboratory), затем найти вебстраницу в поддиректории subscr/html.arc/ и запустить index.html. Этот порядок срабатывает и во втором случае, т.к. наличие index.html необязательный параметр. Гипертекстовые ссылки часто используются, поскольку могут легко свзяать два документа, расположенные на противоположных концах мира. Каждый документ и файл в Интернете имеют уникальный адрес, называемый URL'ом (uniform recource locator универсальный указатель ресурса). Чтобы связать два документа, разработчики веб-страниц помещают на одном из них URL другой. URL напоминает адрес электронной почты. Интернет-компьютеры понимают, как транслировать URL и найти по ним, с кем нужно связаться. Независимо от того, где находятся веб-страница, на которые вы хотите сослаться - в Купично или в Новой Зеландии, - веб будет работать с ними одинаково. Браузер использует каждый URL для того, чтобы найти документ в Интернете и автоматически доставить его вам. Тому, кто просматривает веб-узлы по всему миру, нет нужды думать ни о URL'е, ни о том, как найти нужный документ. Обо всем этом позаботится ваш браузер. С помощью WWW вы можете непосредственно на веб-странице ссылаться на HTMLдокументы (веб-страницы), файлы (по протоколу FTP [file transfer protocol - протокол передачи файлов]), группы новостей Интернета (например, UseNet) и даже на такие популярные источники информации как Yandex или Yahoo!. Ссылки можно создавать на веб-странице только по отдельности. Вам необходимо определить, что будет служить текстом ссылки и, еще важнее, какую ссылку будет представлять каждый такой текст. Вы можете поместить на веб-странице сколько угодно ссылок и скомпоновать их любым способом. Анатомия ссылки Ссылаться на другие страницы достаточно просто, но при этом необходимо понимать, каким образом помещать ссылки на странице, а также знать соответствующий синтаксис HTML. Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорем7) - это тег <a>. Затем вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </a>. Вот так, например, выглядит HTML-код ссылки, на сайт Design Laboratory: <a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a> <a> - якорь; href="http://cray.vision.krg.kz/~Sam/dlab" - ссылка; Design Laboratory - текст ссылки; </a> - закрытие якоря. Теперь посмотрите, как выглядит этот код на практике: Design Laboratory Создание ссылки Настало время поместить ссылку на нашу веб-страницу. Мы поместим на странице ссылки двух различных (но похожих друг на друга) типов. Сначала, рассмотрим, как ссылаться на местные докумаенты. Местный документ - это документ, который хранится в том же месте в Интернете, что и ваша стартовая страница. На местные документы легко ссылаться, поскольку в этом случае вам не обязательно вводить полный URL - знать нужно только путь и имя файла. Затем вы научитесь ссылаться на документы, расположенные в других местах WWW, используя ту же процедуру. Для этого типа ссылок вам понадобится полный URL. Ссылки на местные веб-страницы Вполне вероятно, что в одном месте у вас окажется несколько HTML-документов. Допустим, у вас слишком много информации для одного документа, и вы решили рабить его на несколько HTML-файлов. В такм случае естественно поместить на главной странице ссылки на каждый из этих документов, которые позволят легко и быстро на них перейти. Возможно даже, вы выполните свою главную веб-страницу в виде оглавления, ссылающегося на несколько отдельных страниц. Давайте придумаем элементарную страницу-оглавление. На ней разместим различные ссылки. В процессе вы убедитесь что все это элементарно просто. Нужно только задать фрагменты текста, ссылающегося на каждый конкретный HTML-файл. Таким образом, первый шаг - это определение файлов, на которые я хочу сослаться, и текстов ссылок. Текст ссылки Имя файла Обо мне about.html полезные сайты links.html Теперь введите тег <a href>. Тег <a> назвают якорем. Он применяется для ссылок на другие веб-страницы. Ключевое слово HREF якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег </a>. Чтобы создать ссылку на about.html нужно ввести следующий код: <a href="about.html">Обо мне</a> Вот и все. Фраза "Обо мне" появится на экране в виде текста ссылки. Когда посетители кликнут на этом тексте, они откроют файл about.html. Проверьте, не забыли ли вы, если это необходимо, указать путь к файлам, на которые ссылаетесь. Например если бы файл about.html был сохранен в папке INFO, я бы задал с ключевым словом HREF путь info/about.html: <a href="info/about.html">Обо мне</a> Сейчас на вашей страничке появится только текст "Обо мне". Выполнив ту же процедуру, я добавлю еще одну ссылку, посвященную полезным сайтам: <a href="links.html">Полезные сайты</a> Действие ссылки можно проверить, кликнув на ней и посмотрев, попали ли вы на нужную страницу. До того как вы кликните на ссылке, браузер выведет полный URL того документа, который вы хотите посетить, в строке состояния внизу экрана. Давайте посмотрим на нашу страничку с сылками: файл: index.html Домашняя странца Сергея Здравствуйте уважаемые посетители. Вы попали на страницу Выскубова Семена. Посмотрите какие разделы здесь доступны: Обо мне Полезные сайты Ссылки на любое место в WWW Теперь настало время научиться ссылаться на HTML-документы, расположенные на вашем Веб-узле. Для таких ссылок вам понадобиться полный URL документа, в не только путь и имя файла, как в предыдущих примерах. Тем не менее, ссылка выглядит так же. Вы снова обозначаете имя файла и текст ссылки тегами <a href="..."> и </a>. Когда вы ссылаетесь на другой HTML в Web, URL всегда начинается с HTTP://. Таким образом браузер узнает, что искать следует документ в WWW, а не файл на вашем веб-узле. Остальная часть URL'а состоит из пути в Интернет к нужному узлу и имени файла документа, который вы ищите. Это очень похоже на написание адреса на конверте: чтобы адресата можно было найти, вы должны правильно указать все части его адреса. В качестве иллюстрации ссылки на любое место в Интернете я помещу на страницу Сергея ссылку на список веб-страниц цирков на поисковике Yahoo!. Первый шаг определение полного URL'а, необходимо для доступа к документу. Следующий - задание текста, осуществляющего ссылку в окне браузера. Мне понадобится ULR списка цирков в поисковике Yahoo!. Через каталог я пойду по следующему пути: Arts (искусство) -> Performing Arts (представления) -> Circuses (цирки). Теперь в адресной строке (та, что вверху браузера) я вижу URL страницы цирков. Он таков: http://www.yahoo.com/arts/performing_arts/circuses/ Теперь на своей страничке я введу в теги <a href> и </a> адрес списка цирков в Yahoo!: <a href="http://www.yahoo.com/arts/performing_arts/circuses/> Список цирков в поисковике Yahoo!</a> После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую. Обратите внимание, что, когда указатель мыщи попадает на гипертекстовую ссылку, браузер выводит в строке состояния внизу окна браузера полный URL того места, на которые вы хотите перейти. Хочу дать совет разработчикам веб-страниц. Если пользователь зайдет на другую страницу по вашей ссылке, он может уйти на другие узлы и забыть о вашем. Для того чтобы этого избежать, я расскажу вам о специальной функции, которя позволит вам этого избежать. Добавив в теге <a href="..."> ключевое слово target="_blank", ссылка откроется в новом окне браузера. Т.е. сначала будет открыто паралельное окно браузера, а затем это окно откроет URL на который вы ссылались. Посмотрите на пример, который откроет URL на список цирков в Yahoo! в новом окне: < target="_blank" href="http://www.yahoo.com/arts/performing_arts/circuses/> Список цирков в поисковике Yahoo!</a> Мы начали разговор о ссылках. Узнали, что они из себя представляют ссылки, разобрали элементарную ссылку по составу, научились создавать ссылки на локальные и другие веб-страницы. Урок 14 (Уроки HTML) – цвет ссылок, якоря Цвет ссылки Вы можете изменить цвет текста ссылки. Мы уже говорили как заменять цвета простого текста с помощью тега <body>. Это было на на первом уроке, где также описано как изменить цвет ссылок во всем документе. Но можно заменить цвет ссылки еще и тегом <font>. Посмотрите: <a href="http://cray.vision.krg.kz/~Sam/dlab"><font color="green">DesignLab</font></a> Поглядите как будет выглядеть такая ссылка на практике: DesignLab Использование изображений для ссылок В качестве средства ссылок на другие веб-страницы, можно использовать не только текст, но и изображения. В предыдущей главе рассказано о том, как помещать изображения на веб-страницу. Теперь вы узнаете, как сделать их так сказать ссылочными :). Это означает, что, когда вы кликаете мышью на изображении, на экран выводится другой веб-документ, ссылкой на который и служило это изображение. Так же, как вы ссылались на другой документ с помощью текста, вы можете сослаться на него с помощью изображения. Нужно только вместо текста ссылки задать изображение. По умолчанию браузеры обнаруживают изображение с синей рамкой. Кликнув мышью в любом месте этого изображениея, посетители переходят на соответствующий документ. В качестве ссылок на веб-документы вы можете использовать любые виды изображений, рисунков и пиктограмм. Очень популярны также изображения-карты. В качестве изображения-карты может применяться веб-графика любого типа. Такое изображение открывает различные файлы в зависимости от того, на каком фрагменте был произведен щелчок мышью. На следующих уроках вы узнаете об этом поподробее. Давайте представим что нужно вставить графический рисунок Design Laboratory на страничку. Посмотрите на это: Как вы видите синего бордюра обрамляющего картинку нет. В тег <img> я добавил ключевое слово border="0", дающее команду "отключить обрамление". Посмотрите теперь на код изображения: <a href="http://cray.vision.krg.kz/~Sam/dlab"><img border="0" src="dlab.gif"></a> Обратите внимание, якорь остался тем же, он ссылается на сайт Design Laboratory, но вместо текста я ввел тег <img>. Вот так просто задаются графические ссылки. Якоря Теперь вы большой знаток по HTML-ссылкам, умеете отсылать посетителей своей домашней страницы к любому другому файлу в Интернете. Однако есть еще несколько способов применения тегов <a> и </a>. Особо стоит отметить их использование в качестве внутренних ссылок и указателей. Предположим, вы взяли большую книгу и хотите прочесть в ней только главу 26. Вместо этого вы обратитесь к оглавлению, найдете, где начинается нужная глава, и сразу отправить туда. Так же работают якорные теги. Если у вас большой HTML-документ, в различных его местах нужно поставить якоря. Так, если бы толстая книга существовала в виде одного большого HTML-файла, логично было бы установить якорь в начале каждой главы. В начале HTML-файла нужно сделать оглавление, ссылающееся на каждый якорь в вашем файле (или на каждую главу). Если посетитель кликнет на якоре с меткой "глава 26", браузер автоматически перенесет его на якорь "глава 26" в том же файле; ему не придется просматривать бесчисленное количество страниц с информацией. Не забывайте, что якоря предназначены только для работы в одном большом HTML-файле. Чтобы организовать несколько файлов, применяйте гипертекстовые ссылки. Давайте возьмем в качестве примера веб-узел, использующий якорные теги. Поглядите на этот сайт. Здесь вы найдете онлайновую книгу HTML Quick Reference. Этот узел содержит полный текст книги. Он разбит на несколько отдельных HTML-файлов, но в каждом HTML-файле есть несколько подразделов. Вы можете просмотреть оглавление и кликнуть на заголовке того раздела, который вас интересует, после чего немедленно увидите нужную часть HTML-страницы. Якоря действуют так же, как и ссылки на другие документы в Интернете, только ссылки происходят на внутренние метки документа. Как и с обычными ссылками, вы можете использовать сколько угодно якорей и тегов, но не переборщите. Разработчики веба часто называют применяемые таким образом якорные теги флажками. Создание якоря и присвоение якоря Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите теги <a href="..">, указывающие на эти разделы. Вы можете вводить именные якоря в любом месте ваших веб-страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки. В данном примере я помещу четыре якорных тега и соответствующие им ссылки. <a href="#raz1">Переход к разделу 1</a><br> <a href="#raz2">Переход к разделу 2</a><br> <a href="#raz3">Переход к разделу 3</a><br> <a href="#raz4">Переход к разделу 4</a><br> <br> <a name="raz1">Раздел 1</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz2">Раздел 2</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz3">Раздел 3</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz4">Раздел 4</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> "<a href="#raz1">Переход к разделу 1</a>" - этой строчкой мы обозначили якорным тегом имя Переход к разделу 1. Чтобы перейти на этот тег, посетитель должен кликнуть на флажке с именем raz1. Посмотрите, к чему привел этот код, и немного "подрессеруйтесь" :). Переход к разделу 1 Переход к разделу 2 Переход к разделу 3 Переход к разделу 4 Раздел 1 Ваш текст ... ... ... Ваш текст Раздел 2 Ваш текст ... ... ... Ваш текст Раздел 3 Ваш текст ... ... ... Ваш текст Раздел 4 Ваш текст ... ... ... Ваш текст Задать якорь, как вы убедились, довольно легко. Ссылка на якорь После того как вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей. Ссылка на якорь очень напоминает стандартную ссылку. Для этого используется тег <a href="...">. Отличие в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел нашей "золотой" страничке, я использовал тег: <a href="#raz4">Переход к разделу 4</a><br> Символ # указывает браузеру, что следует искать флажок, а не страничку. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при клике на таком тексте он перейдет не на отдельный HTML-файл, а на якорь, расположенный в той-же странице что и ссылка на него. Компоновка ссылок в виде списков Применяя на веб-странице ссылки, важно располагать их организованно, в определенном порядке, чтобы они были понятны и ими было легко пользоваться. Каждый раз, добавив очередной фрагмент HTML, убедитесь, что страница осталась организованной и читаемой. Ссылки часто компонуют в виде списка. Раньше мы уже говорили о списках. Упоминалось и о том, что списки могут представлять собой множество отдельных фрагментов информации в четком маркированном виде. Списки очень удобны, если вы хотите использовать целый ряд ссылок. Например, у каждого есть своя подборка интересных веб-страниц. В нашем списке мы перечислим ряд мест, которые любит посещать веб-народ. Если бы эти ссылки не были расположены в виде списка, они представляли бы собой бесполезною мешанину. Итак, смотрите: Design Laboratory - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров. ADG Design - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа. WebMaster - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов. Ну думаю достаточно... Посмотрите на код и все станет ясно: <li><a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a> - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров.<br> <li><a href="http://dweb.ru">AGS Design</A> - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа.<br> <li><a href="http://gif.lgg.ru">WebMaster</a> - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов.<br> Полезные советы Умение пользоваться гиперссылками является мощным средством веб-страниц. Однако наряду с увеличением гибкости появляется опасность сделать веб-страницу более запутанной и сложной для посетителей. Ниже я приведу ряд полезных советов относительно применения ссылок. Некоторые из них вытекают просто из здравого смысла, другие же покажутся менее очевидными. Следуя этим советам, вы не усложните веб-страницу при использовании ссылок. Пусть ссылок будет не слишком много Нельзя представить себе ничего более замкнутого, чем веб-страница, содержащая текст из 200 слов, из которых 180 являются ссылками на другие веб-ресурсы. Поскольку текст на ссылки подчеркивается, слишком большое число ссылок в абзаце (или на странице) делает его нечитаемым, и вряд ли это понравится посетителям. Посещение веб-страниц во многом напоминает разглядывание витрин магазинов. Если у магазина некрасивая, беспорядочная ветрена, вам вряд ли захочется туда зайти. Помните об этом при использовании ссылок. Если вы все же хотите ввести множество ссылок, подумайте о создании простого (но хорошо организованного) списка в конце страницы. Текст ссылок должен быть понятным Постарайтесь сделать так, чтобы смысл был понятен. Я проиллюстрирую этот совет (ссылки выделены жирным шрифтом). Такой абзац содержит непонятную ссылку: Московский Ледовый Цирк - это сплошной праздник. Посещение этого цирка доставит удовольствие отдельным зрителям и целым семьям любого возраста и положения. Кликните на Московском Ледовом Цирке, и вы увидите палатку цирка. Эта палатка знаменита на весь мир. Это самая высокая цирковая палатка на сегодняшний день. А вот тот же текст с понятной ссылкой: Московский Ледовый Цирк - это сплошной праздник. Посещение этого цирка доставит удовольствие отдельным зрителям и целым семьям любого возраста и положения. Вы непременно захотите увидеть палатку цирка - самую большую цирковую палатку в мире на сегодняшний день. Ссылки не должны нарушать плавности повествования, как это было в первом примере ("Кликните на..."). Как будто посетители и так не знают, что нужно кликнуть на ссылку. Но вообще на первый взгляд это мелочи, но статистика показывает, что это очень важный элемент. Предупреждения о ссылках на большие документы Когда вы ссылаетесь на большие рисунки, файлы, звуковые файлы или видеоклипы (или даже на очень большие текстовые файлы), лучше честно предупредить об этом визитеров, поскольку загрузка больших файлов может занять много времени. Более подробно этот вопрос мы обсудим когда будем говорить о мультимедийности страницы. Поддерживайте ссылки в действующем состоянии Когда вы приобретете опыт в создании веб-страниц, на них, скорее всего, будет целый ряд ссылок на различные части Веба. Эти ссылки со временем устаревают. Веб-страницу, на которую вы ссылаетесь, могут удалить или перенести на другой узел. В среднем раз в несколько месяцев некоторые ваши ссылки будут терять актуальность. Посетители вашей веб-страницы будут разочарованы, если попытаются воспользоваться такой ссылкой, и узнают, что этой страницы больше нет. Периодически проверяйте ссылки на своей веб-странице, чтобы точно знать, что они актуальны. Иначе их лучше не использовать. На этом занятии мы закончили разговор о ссылках. Вспомнили и научились по-другому задавать цвета ссылок, научились применять изображения вместо текста ссылок, изучили якоря, научились компоновать ссылки в виде списков, узнали какие вещи желательно соблюдать используя ссылки на своей веб-странице. Урок 15 (Уроки HTML) – изображения – карты. Изображения-карты Читая материал о том как оживить веб-страницу с помощью графики, вы узнали о том, как графика обогащает Всемирную Паутину и делает страницы интересными для просмотра. В этой главе я расскажу, как сделать еще один шаг вперед и заставить изображения работать на вас. Разновидность веб-графики, о которой пойдет речь, называется изображения-карта. Такие изображения удобны в использовании и быстро приобрели популярность среди вебразработчиков во всем мире. Изображение-карта - это такое изображение, различные фрагменты которого служат ссылками на разные документы. Выбирая с помощью мыши различные фрагменты изображения, посетители могут перемещаться со страницы на страницу. По своей природе изображения-карты более удобны, чем обычные текстовые ссылки, потому что в этом случае не приходится объяснять, что делает каждая ссылка. Посетителю нет необходимости читать о том, куда перенесет его ссылка, он и так это видит. Данная глава посвящена различным аспектам применения изображений-карт и технологии, облегчающей их создание. Потратив несколько минут, любой сможет создать на своей странице так называемое клиентское изображение-карту. Как работают изображения-карты Вы уже знакомы с тем, как располагать графику на веб-странице, и умеете использовать изображение в качестве ссылки, вставляя тег <img> в гипертекстовую ссылку, например, так: <a href="http://cray.vision.krg.kz/~Sam/dlab"><img src="http://cray.vision.krg.kz/~Sam/dlab/butts/1.gif"></a> В этом примере я ввожу кнопку своего проекта. Если посетитель щелкнет на этом изображении, браузер автоматически загрузит сайт Design Laboratory. На каком бы месте рисунка вы ни кликнули, вы все равно осуществится ссылка на Design Laboratory. В этом и состоит отличие простого изображения от изображения-карты. Кликнув на разных фрагментах изображения-карты, вы попадаете на различные HTMLфайлы. Это очень удобная технология, поскольку посетители веб-страницы привыкают к одному определенному изображению и с его помощью перемещаются со страницы на страницу, кликая на различных его фрагментах. Посмотрите на домашнюю страницу моей подруги (Weirdo). Это замечательный пример изображения-карты. Я поместил на страницу 25 разных изображений, некоторые из которых - изображения-карты. Каждый фрагмент с надписью (chat, about me, favorites) переносит вас на определенную страницу. Есть много полезных способов применения изображений-карт. Например, можно создать карту Италии. Вы сможете кликать мышью на любом регионе или городе, о котором хотите узнать. Кликните на Риме, и вы увидите Колизей, на Пизе - знаменитую "кривую" башню. Вот и идея для сайта ;). Компания Боинг, например, может вывести рисунок своего самолета. Чтобы ознакомиться с моделью, предположим, 777, ему будет достаточно кликнуть на определенный участок рисунка. Практически любое изображение легко превратить в изображение-карту. При использовании соответствующих средств изображение-карту можно разработать и ввести в веб-страницу за несколько минут. Изображения-карты не являются новой технологией Изображения-карты используются довольно давно. Однако с появлением версии Netscape 2.0 их применение на веб-страницах стало намного проще. Раньше, вводя в свою веб-страницу изображение-карту, вы зависели от программного обеспечения своего сервера. Сервер управляет доступом ко всем веб-страницам на определенном интернет-узле. Чтобы использовать изображение-карту, нужно было найти подходящее изображение, определить, какой его фрагмент будет служить ссылкой на какой документ, а затем произвести необходимые установки на сервере. Это было довольно сложно даже для тех, кто понимал каждый шаг. Некоторые веб-серверы не позволяли использовать изображения-карты, поэтому их применение на веб-страницах было прерогативой профессиональных веб-разработчиков и крупных компаний. Лишь немногие частные лица использовали на своих личных страницах изображения-карты. Однако теперь создание изображений-карт значительно упростилось. Появление их новой разновидности под названием клиентские изображения-карты намного облегчило применение данной технологии для индивидуальных разработчиков веб-страниц, таких как вы. Различия между серверными изображениями-картами и клиентскими Как говорилось выше, серверные изображения-карты существуют уже несколько лет, но они неудобны в использовании и имеют некоторые недостатки в работе, почему и были вытеснены новой технологией. Серверные изображения-карты работают следующим образом. На веб-странице выставляется большое изображение, состоящее из нескольких четко разделенных фрагментов. Вы кликаете на одном из фрагментов. Веб-браузер запоминает координаты и запускает CGI (Common Gate Interface - общий шлюзовой интерфейс), который транслирует координаты в URL'е, т.е. имя файла, соответствующего тому фрагменту, на котором был произведен клик. Затем браузер передает имя файла браузеру, который и загружает соответствующий файл. Как вы догадываетесь, серверные изображения-карты не слишком эффективны и ими трудно пользоваться, чему есть ряд причин: Серверные изображения-карты не будут работать, если вы не запустите свой узел на собственном жестком диске, поскольку необходимо прямое соединение с вебсервером, проще говоря нужен хотя-бы локальный веб-сервер. Изображения-карты могут перегружать веб-сервер. Если ваш веб-сервер очень популярен, он можнт непрерывно запускать программу транслирования координат в пикселах в HTML-файл. Это сильно замедлит работу всех, кто читает веб-страницы на данном веб-узле. К счастью, новый вид изображений-карт пришел на смену серверным. Клиентские изображения-карты существенно проще и более эффективны при взаимодействии с вебсерверами. Пользователь видит на экране такое же изображение, но при клике на нем происходит совсем другой процесс. Вместо обмена данными с веб-сервером браузеры сами узнют, на какой из HTML-файлов сделана ссылка, и автоматически переносят вас на тот файл. Этот процесс занимает существенно меньше времени (вы не ждете ответа от сервер) и проще для интерпретации браузером. Каждому фрагменту изображения соответствуют собственные координаты в пикселях. Эти координаты заданы в том же HTML-файле, что и остальная часть веб-страницы, и вы можете осуществить ссылку на другую HTML-страницу так же, как и при использовании обычного тега <a href>. Клиентские изображения-карты проще создавать, и они удобнее для посетителей. В конце концов, клиентские изображения-карты полностью вытесняют серверные. Создание изображения-карты Поскольку клиентские изображения-карты намного проще создавать и применять, серверные изображения-карты еще существуют на устаревших узлах. Теперь настало время создавать шаг за шагом свои изображения-карты. Ниже описывается процесс создания и ввода главным образом клиентского изображения-карты. Вы узнаете, как выбирать подходящее изображение, соотнести его различные фрагменты с разными HTML-файлами и ввести необходимые теги в веб-страницу. Как найти подходящее изображение Первый шаг при создании изображения-карты - поиск подходящего изображения. Когда посетители увидят картинку, им должно быть сразу понятно, что она состоит из нескольких фрагментов и каждый из них представляет собой ссылку на разные документы. Выбирать надо понятные для посетителей изображения, фрагменты которых хорошо разграничены на экране, или хотя-бы отделены от основного фона. Я ухожу придумывать картинку... [через 10 минут]. Вот что значит хорошее настроение, соответственно вдохновение. Смотрите: Пока это только картинка int.jpg. Изображения-карты можно создать практически из любого графического рисунка - пиктограммы, кнопки, линейки и т.д., если разбить его на фрагменты и представить в качестве изображения-карты; но это, как говорится, извращение... Типично изображения-карты - что-то подобное тому, что я нарисовал. Сначала, чтобы ввести вас в курс, я расскажу обо всем по порядку. 1я пиктограмма это будет "серфинг", 2я - "мотоциклы", 3я - "статистика", 4я - "животные", 5я - "экология и география", 6я - "фотографии", 7я - "заработки в сети", 8я - "театр", 9я - "просвещение", 10я "обмен". Предупреждаю, мне это никак не соответствует... скорее я перечислил здесь то, что мне полностью противоречит ;). Картинки людей и животных не так уж плохи в качестве изображений-карт, если вы уверены, что посетители поймут: при клике на разных фрагментов (например, различных частях тела) они попадут на различные веб-страницы Планирование карты Ваше следующее действие - разбить выбранное изображение на фрагменты и определить, как будет работать изображение-карта. В нашем примере с "интересами" каждый кубик должен служить ссылкой на определенную страницу. Если вы определили, как разбить изображение-карту на фрагменты, можно перейти к следующей стадии - введению необходимых тегов в код веб-страницы. Создав изображение-карту, важно помнить, что теперь вы работаете с несколькими веб-страницами. Вы прокладываете пути, по которым посетители будут изучать различные аспекты вашего узла. Помещение изображения на веб-страницу Итак, о новых тегах HTML, поддерживающих клиентские изображения-карты. Ввод в код страницы изображения-карты очень похож на ввод обычного изображения, понадобится только новое ключевое слово и пара новых тегов. Но если вы не хотите изучать эти тонкости HTML, можно этого и не делать. Есть полезное средство, позволяющее избежать этой работы. Если вы хотите сами ввести необходимый фрагмент HTML, сначала поместите изображение на веб-страницу и с помощью тега <img> и ключевого слова USEMAP. <img src="int.jpg" usemap="#interests"> Этот тег дает указание браузеру вывести на веб-странице файл int.jpg. Слово USEMAP сообщает браузеру, что это изображение является изображением-картой, и дает ему указание найти в документе именной раздел под названием "interests". В этом именном разделе описывается, как интерпритировать клики мышью на различных координатах изображения. Значок # очень важен, благодаря ему браузеры распознают именные ссылки внутри файла. Разбиение изображения на фрагменты После того как изображение помещено на веб-страницу, настало время графически на нем задать каждый фрагмент. Представьте себе, что изображение ненесено на большой лист миллиметровки, на котором вам необходимо определить точные координаты X и Y для каждого фрагмента, соответствующего ссылке на HTML-файл. Координаты изображения измеряются в пикселах (точка, характеризующая разрешение монитора). Чтобы каждый фрагмент правильно связать с определенным HTML-файлом, его координаты необходимо задать в пикселах. К счастью, существует ряд удобных средств, облегчающих задание фрагментов для изображений-карт. К этим программам мы можем отнести Front Page или DramWeawer На этом уроке мы начали разговаривать об изображениях-картах. Узнали как они работают, прочитали немного об истории изображениях-картах, научились создавать свои изображения-карты. Урок 16 (Уроки изображения. HTML) – Формы фрагментов Скорее всего, вы будете создавать изображения-карты с помощью программы типа Front Page. Тем не менее, в данном разделе описан процесс создания изображения-карты вручную. Это поможет вам понять действие всех тегов, использованных в предыдущем разделе. Следующим шагом после задания на веб-странице тега изображения будет ввод тегов <map> и </map>: <map name="interests"></map> Это новые теги HTML, сообщающие браузеру, на что ссылаться из фрагментов изображения-карты. Проверьте, чтобы значение, присеваемое NAME, точно совпадало со значением, ранее заданным USEMAP. Иначе браузер не сможет верно интерпретировать ссылки изображения-карты. Тег <map> означает, что следующий за ним фрагмент HTML-файла описывает работу каждого фрагмента изображения-карты. Между тегами <map> и </map> вводятся теги <area> для каждого из фрагментов, ссылающихся на другие HTML-файлы. Фрагменты могут быть трех разных форм: прямоугольные, круглые и многоугольные. Прямоугольники Чтобы описать прямоугольный фрагмент изображения, необходимо задать координаты левого верхнего и правого нижнего углов прямоугольника в пикселях. Тогда браузер поймет, что область между этими двумя точками задает ссылаемую область в виде прямоугольника. Координаты задаются парами чисел в пикселях. Предположим нужно задать область ссылающуюся на файл SURF.HTML из нашего рисунка. Область должна соответствовать пиктограмме с человеком на серфинг-доске. Я заранее знаю координаты верхнего левого угла: 27 по оси X и 8 по оси Y; и правого нижнего: 92 по оси X и 73 по оси Y. Следовательно, я должен создать код такого вида: <img border="0" src="int.jpg" usemap="#interests"> <map name="interests"> <area alt="Surfing" href="surf.html" shape=rect coords="27,8,92,73"> </map> Теперь протестируйте код на изображении: Теперь я подробно расшифрую весь код. Новым для нас здесь стало alt="Surfing" и shape=rect. С альтернативным текстом alt="Surfing" мы уже знакомы, посто знайте, что его можно использовать и здесь. shape=rect дает браузеру знать, что данная область - не круг, не многоугольник, а прямоугольник, следовательно coords="..." должен состоять из четырех точек. Вообще shape=rect - необязательный тег. По умолчанию в AREA всегда идет shape=rect. Окружности Круглые фрагменты задаются также просто, как и прямоугольные, но здесь есть несколько отличий. Чтобы задать круглую форму, необходимы только три коодинаты (а не четыре, как у прямоугольников) - координаты центра окружности по X и Y и ее радиус. Теперь к практике. Если присмотреться к нашему рисунку, мы увидим там круг с центром в 239,155 и радиусом в 37. Вот как должен будет выглядеть код: <img border="0" src="int.jpg" usemap="#interes"> <map name="interes"> <area alt="Такой вот кружочек ;)" href="circle.html" shape=circle coords="239,155,37"> </map> Теперь протестируйте код на предыдущем изображении изображении: Как вы видите, это также просто. Помните, что главное поменять параметр shape=rect на shape=circle. Многоугольники Последняя из возможных форм фрагментов - многоугольник. В этом случае вы можете создать фрагмент любого размера с любым числом сторон. Для этого вам придется задать координаты каждого угла многоугольника. Просмотрите на этот рисунок: Тег AREA в данном случае задается так же просто; единственное отличие состоит в том, что в RECT=... нужно прописать RECT=POLY. Ну и дальше задавать координаты. Кстати, можете задать вопрос: "с какой точки начать?". С какой понравится, с такой и начинайте. <img border="0" src="img/015/poly.gif" usemap="#inter"> <map name="inter"> <area alt="Такой вот прямоугольник ;)" href="poly.html" shape=poly coords="98,24,206,25,259,86,247,228,196,283,84,248,53,135"> </map> Теперь протестируйте код на изображении: Посмотрите, я начал с точки 98,24, а закончил в 53,135. Линия от 53,135 до 98,24 дочертилась сама. Это тоже советую учесть. Как работают перекрывающиеся фрагменты При задании фрагментов может оказаться, что два или более из них перекрываются как на следующем рисунке: В этом примере два прямоугольника имеют небольшую область перекрытия. Как браузеры интерпретируют щелчок на области перекрытия? Ответ прост. Они ссылаются на файл, стоящий первым в списке фрагментов, перечисленных в теге <map>. Вот код приведенного примера: <map name="rectangle_on_rectangle> <area alt="Rectangle #1" href="r1.html" coords="25,26,170,171"> <area alt="Rectangle #2" href="r2.html" coords="129,131,274,276"> </map> Задание ссылки, осуществляемой по умолчанию Кроме проблемы перекрывающихся фрагментов есть еще одна: что просиходит, когда пользователь кликает на таком месте изображения-карты, которое не принадлежит ни одному из заданных фрагментов? Вы можете задать ссылку по умолчанию, которая будет активизирована в такой ситуации. Задание ссылки по умолчанию очень полезно, поскольку в этом случае независимо от того, в каком месте изображения кликнет посетитель, он попадет на какую-либо страницу. Чтобы ввести ссылку по умолчанию, вам придется задать последний фрагмент изображения-карты - прямоугольник, перекрывающий все изображения по длинне и ширине. Например изображение-карта моих интересов занимает 400 пикселей в ширину и 300 в высоту. Добавьте в самый низ тега <map> эту строчку: <area coords="0,0,399,299" href="default.html"> Напрашивается вопрос, почему 0,0,399,299 а не 1,1,400,300? Дело в том, что тег AREA ведет исчисление пикселов не с точки 1,1 а 0,0, соответственно все данные вводимые в COORDS="..." должны быть на один пиксель меньше. Еще возможно, вы захотите, чтобы при клике за пределами заданных вами фрагментов ничего не происходило. В этом случае все же полезно задать тег <area>, охватывающий все изображение, но с ключевым словом NOHREF: <area coords="0,0,399,299" nohref> Это указывает браузеру, что следует игнорировать клики, произведенные за пределами заданных фрагментов. Данный тег не является необходимым, он просто делает ваше изображение-карту более аккуратным. Тестирование Закончив создание карты, необходимо тщательно протестировать ее с помощью Netscape или Internet Explorer. Опробуйте каждый фрагмент по очереди, убедитесь, что ссылки заданы правильно. Многие опускают этот шаг, считая, что они не сделали ошибок, если точно следовали описанной выше процедуре. Однако опечатки, неверные имена файлов и другие ошибки могут легко испортить ваше изображение-карту. Советы по дизайну изображений-карт Вот несколько полезных советов, которые хорошо бы учесть при создании на вебстранице изображений-карт. Некоторые из них повторяют информацию, упомянутю выше, другие - нет. Перед тем как допустить кого-либо к вашим изображениям-картам, пройдитесь по этому списку. Правильно выбирайте вид изображения-карты. Подумайте, правильно ли вы понимаете различия между клиентскими и серверными изображениями-картами. Хотя клиентские изображения-карты более эффективны, в некоторых случаях их не стоит использовать, особенно если вы опасаетесь, что у многих посетителей вашей вебстраницы браузеры не поддерживают клиентские изображения-карты. Следите за размером файлов. Изображения-карты имеют большой размер файлов, чем простые изображения, потому что их часто выводят более крупно. Проверьте, чтобы файл с изображением не был чрезмерным (например, больше 20 килобайт), иначе посетители вашей веб-страницы начнут терять терпение. Пользуйтесь изображениями с чересстрочной разверткой. Изображения с чересстрочной разверткой - это изображения, которые загружаются на нескольких уровнях, начиная с расплывчатой картинки, которая затем становится более подробной. Изображения с чересстрочной разверткой хоть и занимают чуть больше места чем другие, все же они идеальны в качестве изображений-карт, поскольку как только посетители поймут, какой фрагмент им нужен, им не придется больше ждать появления изображения целиком. Четко определяйте фрагменты. Применяйте такие изображения, чтобы посетителям сразу было понятно, какие именно фрагменты ссылаются на другие HTML-файлы. Посетители легко могут не заметить мелкие (или нелогичные) фрагменты изображения-карты. Протестируйте как минимум дважды изображение-карту. Здесь не может быть мелочей. Я встречал много изображений-карт, которые не были достаточно тщательно протестированы. Обычно одни фрагменты на них правильно осуществляют ссылки, а другие - нет. Непроверенное изображение-карта не понравится посетителям вашей страницы. Здесь мы закончили разговор об изображениях-картах. Узнали какие формы могут иметь изображения-карты, научились вручную их создавать. Узнали что происходит если фрагменты имеют пересечения, узнали о "ссылках по умолчанию". Урок 17 (Уроки HTML) – Совершенствования вебстраницы Допустим, вы купили себе машину. Она вам понравилась, но я уверен, что вы все-таки кое-что в ней изменили. Некоторые устанавливают плееры или сигнализацию, другие - люки в крыше или неоновые огоньки, не говоря уже о болтающейся игрушке! Такие усовершенствования делают каждую машину уникальной. Сейчас ваша веб-страница напоминает только что купленную машину. Я покажу вам, как усовершенствовать веб-страницу, чтобы она отвечала вашим личным вкусам и предпочтениям, как преобразовать стандартную веб-страницу в вашу собственную. Вы изучите более сложные теги HTML и другие замечательные средства, позволяющие перекроить домашнюю страницу по своему усмотрению. Они не настолько сложны, чтобы вы не смогли применить их на своей веб-странице сразу же. Развертывание веб-страницы в веб-узел Поначалу вы, наверное, жили в маленькой однокомнатной квартире, которую только и могли себе позволить. У вас было совсем немного мебели и украшений на стенах. Потом всего этого стало много, и вы поняли, что необходимо переехать в квартиру большего размера или, возможно, в отдельный дом. Сравните свою первую переполненную квартиру с вашей веб-страницей. Не слишком ли много на ней информации? Возможно, простая веб-страница сначала отвечала вашим требованиям. Но когда вы начали перечислять на ней свои личные и профессиональные интересы, ввели несколько изображений, мултимедийных клипов и стали применять ссылки на веб-страницы по всему Интернету, наверняка заметили, что ваша веб-страница стала слишком большой и неуклюжей. Значит, пора расширить ваши горизонты и вместо вебстраницы сделать веб-узел. Вспомните свой переезд на новую квартиру. Пришлось многое ремонтировать и переделывать. В большом доме всегда есть, что совершенствовать. Так же и развернутые веб-узлы требуют постоянной и кропотливой поддержки. Поддерживать веб-узел на современном уровне и во взаимоувязанном состоянии сложнее, чем веб-страницу. Личная веб-страница - это оперативная точка для тех, кого интересует наша персона. Но теперь на вашей веб-странице есть ссылки на ряд других HTML-документов, также содержащих информацию о вас. Все эти документы в совокупности и называются веб-узлом, или сайтом. Развертывание веб-страницы в веб-узел - это обычная практика. Например, если вы заметили, Design Laboratory содержит множество различных наборов информации, которые я пытался разместить на одной странице. В конечном счете информации набралось больше, чем можно разместить на одной странице, а я хочу все время добавлять новые материалы. Поэтому я разбил сайт на несколько отдельных разделов, связанных с основной страницей и двухсторонними ссылками. Так и создается собственная мини-паутина HTML-документов. Зачем разделять веб-страницу Существует две важные причины для развертывания веб-страницы в веб-узел. Вопервых, так посетителям легче найти ту информацию, которая им нужна. Например, если вашу веб-страницу посетит потенциальный работодатель, он вряд ли захочет ждать, пока загрузится ваши семейные фотографии. Ему нужно прочесть ваше резюме и узнать о вашем опыте работы. Если узел разбит на несколько документов, посетитель сможет выбрать только ту информацию, которую он искал. Это экономит ему время. Вторая причина более эгоистического свойства. При наличии нескольких документов появляется возможность вводить больше интересной графики и личной информации. Если к веб-странице, перегруженной графикой и мультимедийными файлами, еще что-нибудь добавить, ее станет трудно читать. Когда я разделил свою страницу, я смог удвоить количество графики и разного рода мультимедиа. Наконец, самая главная причина разделения - узел легче поддерживать и обновлять. В хорошо организованном веб-узле легко обновить любую информацию. Правильно проектируйте свой узел Перед тем как разделять домашнюю страницу, разработайте план. Нужно продумать структуру вашего узла. Ниже я набросал четыре варианта структуры узла. Каждая из этих структур имеет преимущества и недостатки в различных ситуациях. Выберите ту, которая вам больше нравится. Стандартная Здесь основная веб-страница содержит ссылки на остальные документы вашего узла, а документы, соответственно, на основную веб-страницу. Это самый простой и часто встречающийся способ организации веб-узла. На рисунке показана схема стандартного способа разделения веб-страницы. Каскад В этом случае ссылки в документах заданы таким образом, что существует только один путь обхода ваших страниц. Небоскреб Чтобы попасть в комнату 1801 в главном здании Московского университета, вы должны поехать на лифте до 18-ого этажа. Затем вы идете по коридору до нужной двери. В данной модели посетители могут попасть на некоторые страницы, только если они идут верным путем. Паутина Здесь все страницы веб-узла содержат ссылки друг на друга, и вы можете попасть с любой страницы практически на любую другую. Эта схема может превратиться в лабиринт, если выйдет из-под контроля, но она популярны в тех случаях, когда ссылками на документы пользуются не слишком часто. Например мой главный проек iPoizon.COM построен именно по этой схеме. Подсчет числа посетителей домашней страницы Начинающие владельцы веб-страницы часто хотят знать, сколько людей посещает их творение. Им хочется понять, популярна ли их веб-страница, как ночной клуб на Манхеттене, или она пустынна, как Сахара. Если у вас собственный веб-сервер или необычайно дружелюбный провайжер, вы моежете получить эту информацию, просто подав запрос. Программное обеспечение веб-сервера иногда автоматически отслеживает такую статистику. Но в большинстве случаев вам придется самому позаботиться об определении количества посетителей. Существует несколько способов создания на домашней странице дифференционального счетчика. Каждый раз, когда кто-либо посещает веб-страницу, такие счетчики увеличивают предыдущее значение на 1 единицу. Могу посоветовать простейший счетчик. Посмотрите на код, который должен быть выставлен на вашей странице: <a href=http://counter.co.kz><img src="http://counter.co.kz/counter.cgi?page=ВАШURL&style=a&digits=КОЛИЧЕСТВО-ЧИСЕЛ" alt="Counter CO.KZ" border=0></a> Вам не нужно негде регистрироваться. Просто поставьте этот код заменив в нем ВАШURL на ваш url с префиксом http:// и КОЛИЧЕСТВО-ЧИСЕЛ на нужное вам число. Например первоначально вы можете поставить 3, и когда количество посетителей перевалит за 999, можете поставить 4. На этом занятии мы занимались доработкой веб-страниц. Особо важного материала здесь нет, зато все пункты больше чем полезны для новичков!
