Kuraltay-Khan.ru - Статья в фелинологическом журнале "Альманах МФА 2003/2004"

Статья в фелинологическом журнале "Альманах МФА 2003/2004"

Шевченко Е.А. опубликовала статью в фелинологическом журнале "Альманах МФА 2003/2004" о примере создании сайтов о кошках на примере сайта нашего клуба. Автор - я, наш веб-мастер, статья вышла в урезанном виде, так как её полный объём составлял около 40 страниц машинописного текста с иллюстрациями. Посмотреть полную версию статьи можно ЗДЕСЬ.

Наш сайт: от задумки до реализации.

Вступительное слово.

Необходимость данной статьи в «Альманахе» – просто очевидна. На пороге XXI век – век компьютерных технологий и информации, и, следовательно, Интернета. Мы общаемся, переписываемся, обмениваемся информацией, читаем новости, смотрим фильмы, слушаем музыку, учимся, познаём новое и интересное, и ещё много можно перечислять…

Интернет «дошёл» и до наших любимцев – им посвящены целые web-ресурсы, так может, настало время и нам добавить свой ресурс?..

Сайт: дань моде или необходимость.

В наш сегодняшний век компьютерных технологий нельзя остаться в стороне от решения вопроса: нужна ли страничка в Интернете про своего питомца или же нет? Чем руководствуются люди, которые завели себе личные странички или же клубные сайты? Что это – дань моде или же жизненно важная необходимость? Попробуем разобраться в данном вопросе.

Сначала определимся, есть ли у Вас то, что стоит опубликовать в Сети? Интересно ли это будет людям, зашедшим на Ваш ресурс? Допустим, что Вы положительно ответили на эти два вопроса, тогда – вперёд! Если же нет – то: любые попытки создать сайт ради, собственно, его создания – заранее обречены на провал.

Реальную необходимость в размещении сайта или странички в Интернете должны понимать владельцы питомников и клубы, ведь этим можно решить многие проблемы, ведь лучше один раз увидеть, чем сто раз услышать. Это очень актуально, особенно, для иногородних посетителей, которые заинтересовались, например, в покупке котёнка в Вашем питомнике или решили повязать свою кошечку с котом из Вашего клуба. Сайт же даст Вам возможность сэкономить время на «пустых» объяснениях, которых чаще всего около 95%, а иногороднему – даёт возможность сэкономить на междугородних или международных звонках, так как хотя бы минимальный ответ по интересующему его вопросу, он может получить на сайте, и если его уж что-то конкретно заинтересовало, то он уже обратится к Вам по телефону или электронной почте, так называемому «мылу». А это немаловажно – надо просто уважать интересы и возможности друг друга.

Что выбрать?

Что же выбрать личную страничку или личный сайт, а может клубный вариант сайта? У каждого варианта есть свои выигрыши и недостатки. Постараемся в этом разобраться.

Личная страничка. Такой вид выкладки информации в Сеть очень популярен на Западе. Это документ, содержащий информацию о какой-нибудь проблеме или теме, которая выложена в виде одного документа.

«Плюсы»: Вы – являетесь администратором данного ресурса, то есть его создателем и владельцем, Вам решать, что на ней разместить и где в Интернете её разместить.

«Минусы»: как показывает практика, данный вид ресурса интересен очень малому кругу посетителей, а чаще всего, что это может быть интересно только Вам (не будет же Ваша любимая кошка посещать сделанную Вами страничку о ней).

Личный сайт. Такой вид выкладки информации в Сеть даёт большие возможности в сравнении с личной страничкой, такой вид ресурса очень распространён у нас на территории бывшего Советского Союза.

«Плюсы»: здесь большее пространство для творчества. Можно создать различные разделы, фотоальбомы, форумы, доски объявлений и многое другое, всё, что душе угодно, важно помнить – это должно быть интересно посетителям, а не только Вам, чтобы утешить свои амбиции. Вы – являетесь администратором данного ресурса, то есть его создателем и владельцем, и Вам решать, что на нём разместить и где в Сети его разместить.

«Минусы»: как показывает практика, содержание 95% личных сайтов – это «зеркала», то есть копии других сайтов (но с другой стороны наличие такого ресурса в Городском Интернете необходим, так как не все могут себе позволить Глобальный Интернет, а это посетители оценят, главное, чтоб данный ресурс был один в Вашем Городском Интернете, тогда данный «минус» перейдёт в разряд «плюсов», иначе происходит простое захламление Сети).

Клубный сайт. Такой вид выкладки информации в Сеть даёт большие возможности, в сравнении с личным сайтом, а именно, помимо общих организационных и информационных разделов на каждого члена клуба заведён личный раздел, который может на все 100% заменить необходимость в создании личного сайта.

«Плюсы»: здесь огромное пространство для творчества, избегается «пустое» копирование информации с других сайтов, выдерживается единый стиль оформления для членов всего клуба. На данных ресурсах можно получить информацию о работе клуба, его племенной работе, о предстоящих выставках и о результатах прошедших, можно получить интересующую справочную информацию о содержании и уходе и многое другое, всё зависит от администрации клуба и сайта.

«Минусы»: Вы – не являетесь владельцем и создателем ресурса.

Итак, подведём предварительный итог. Если Вы являетесь членом клуба или питомника, то целесообразней остановиться на создании клубного сайта, чем на какие-то разрозненные отдельные странички или сайты. Тогда можно будет создать прекрасный ресурс, который удовлетворит и посетителей (большим количеством интересных, а главное полезных разделов), Вас как члена клуба (наличием личного раздела о Вашем питомце) и провайдера (единый ресурс по данной тематике, что избавляет от «мёртвых», то есть редко посещаемых страничек и сайтов на серверах).

С чего начать?

Итак, Вы подобрали всю необходимую информацию, которую хотели бы разместить на своём сайте? Тогда приступим к созданию сайта. Рассмотрим создание клубного сайта на примере официального сайта Клуба Породистых Кошек «Богема» (http://www.bogema.altnet.ru).

Во-первых, необходимо продумать меню. Это очень щекотливый вопрос, ведь с меню придётся работать посетителям постоянно, поэтому, необходимо продумать всё до мелочей. Для этого рекомендую начать составление карты сайта на простом листе бумаги. «Разобьём» наш сайт на разделы и подразделы, чтобы понять, какие разделы внести в пункты основного меню, а какие оставить как подразделы, чтоб не загромождать основное меню. Сделаем это в виде таблицы, например:

*Название раздела*	*Подразделы*		*Расшифровка содержания*
*Главная страница*	Главная страница		«Титульный лист» нашего сайта
	Наши новости		Наши новости и достижения
*о МФА*			Информация о МФА
*о клубе «Богема»*			Информация о клубе «Богема»
*Календарь выставок*			Календарь выставок проводимых МФА и другими системами
*Члены клуба*	Фотоальбом		Фотоальбом о конкретном животном
	Подробнее		Подробнее о конкретном животном
	…		…
	Фотоальбом		Фотоальбом о конкретном животном
	Подробнее		Подробнее о конкретном животном
*Стандарты пород*	Все породы	ABY	Описание стандартов пород кошек
		…
		JBT
	Шифры окрасов		Описание шифров окрасов различных пород
	Терминология		Используемая терминология
*Племенная работа*			О племенной работе КПК «Богема»
*Кормление и уход*	Кормление и уход		Советы по кормлению и уходу за животными
	Советы Айболита		Советы по лечению и уходу за больными животными
*Гостевая книга*			Гостевая книга – книга отзывов и предложений
*Ссылки*			Страничка ссылок на дружественные сайты

Составление данной таблицы – это не бесполезная трата времени, а наглядное пособие для последующего составление карты сайта. Можно её представить и в виде «дерева», как это выглядит в «Проводнике» в операционной системе «Windows», что тоже очень наглядно. Главное, чтобы выбранная Вами система структуры будущего сайта была Вам понятна, чтобы все разделы и подразделы были логически завязаны, тогда у Вас будет меньше проблем с «висячими» ссылками (ссылками, отправленными в ни куда).

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

Дизайн vs контейн.

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

Хороший дизайн – это простой дизайн. Если кто с этим не согласен, то рекомендую пропустить вообще этот подраздел.

Для создания качественного дизайна вовсе не обязательно использовать Flash, анимацию, DHTML-спецэффекты, «навороченную» графику в виде фоновых подложек. Поверьте, что никто не вернётся ещё раз на Ваш сайт, ради того, чтоб полюбоваться Вашим творением, и никто не оценит его «крутизну» так же, как Вы сами. Подавляющее большинство действительно хороших сайтов, прежде всего, содержит интересную текстовую информацию. И, следовательно, дизайн подчинён содержимому, а не наоборот.

Вот конкретный пример из жизни. Чуть больше года мной был создан сайт «HELP_MY» (http://www.help_my.altnet.ru) – это своеобразная FTP-«помойка», на которой выложено большое количество различного программного обеспечения с минимальными требованиями по дизайну. Около трёх-четырёх месяцев в «Гостевой книге» я читал ругательства по оформлению, что людям (а чаще всего это были подростки 15-20 лет) не нравится дизайн сайта, и я даже устал писать ответы, что содержание гораздо важнее оформление. И, спустя некоторое время, стали приходить благодарственные письма, что люди нашли на данном ресурсе то, что долго искали, и это были отзывы не только из Барнаула, Алтайского края и Западной Сибири, но и с других городов России, стран СНГ и даже стран, так называемого Дальнего зарубежья, таких как Египет, Германия, Бельгия, США, Канада, что ещё раз подтверждает, что содержание важнее оформления.

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

А теперь попробуйте придумать дизайн. Тяжело? Но ведь в этом и прелесть, необходимо найти ту «золотую середину», которая бы отвечала всем запросам содержания и оформления!

Наши инструменты.

Наконец-то мы подобрали всю необходимую информацию для будущего сайта, нарисовали на бумаге макеты меню и будущих страничек. Теперь можно переходить к созданию самого сайта, но возникает вопросы: «Какими же программами воспользоваться для создания сайта?», и «Какой же нужен компьютер, и какая необходима периферия?»

Компьютер понадобится не самый слабый, а чем его аппаратные возможности, тем лучше. Как минимум Вам понадобится компьютер с частотой процессора от 800 МГц – эти показатели дадут процессоры «Duron» от компании «AMD» или «Celeron» от компании «Intel», но можно и взять более работоспособные процессоры. Видеокарта должна быть с объёмом памяти не менее 32 Мб, и будет вообще прекрасно, если она содержит аппаратно-графический ускоритель (AGP). Монитор необходим с минимальным разрешением 800x600 точек, что на данный момент самое распространённое разрешение экрана в Интернете, но есть тенденция к переходу на разрешение 1024x768. Объёма операционной памяти предела нет, но, работая с графическими редакторами, Вам понадобится достаточно большой её объём. Так что как минимум рекомендую хотя бы 128 Мб оперативной памяти. Необходим, будет так же и CD-ROM, так как клипарты и профессиональные фотографии чаще всего находятся на компакт-дисках. Также понадобится сканер, желательно, чтоб он имел слайд-адаптер, так как со сканированного негатива можно получить более качественное изображение, чем при сканировании уже отпечатанного снимка. Рекомендуемые параметры сканера: планшетный, желательно наличие слайд-адаптера, сканируемое разрешение не мене 600x600 dpi, глубина цвета не менее 24 bpp. Такой сканер обеспечит Вам нормальную работу с изображениями, а с более высокими параметрами – обеспечит Вам комфортную работу. Также Вам понадобятся программы по распознанию текста, например: «ABBYY Fine Reader 7.0 pro», но можно и более младшей версии. Если на Вашем сайте будут использованы звуковые эффекты, то понадобится ещё и звуковая карточка.

Существует много вариантов написания сайта, но новичку, так называемому на компьютерном жаргоне «чайнику» наиболее лёгким вариантом станет освоение HTML кода. Главное понять, что HTML код – это не язык программирования, а всего лишь коды разметки страницы для вывода на ней информации, и не важно, где она будет выведена: на экран или на бумагу.

Необходимо как разумный минимум три компонента для создания будущего сайта, а именно: HTML-редактор, графический редактор и FTP-менеджер. Рассмотрим что для чего нужно.

HTML-редактор – необходим для написания кода страничек сайта. Существует множество различных HTML-редакторов, у каждого есть свои преимущества перед другими, так и свои недостатки. Их можно своеобразно поделить на две группы: визуальные и текстовые. Рассмотрим их преимущества и недостатки.

Визуальные – позволяют визуальное (наглядное) оформление будущих страниц, очень удобные интерфейсы (удобное для пользователя меню), возможность одновременного просмотра как самого HTML-кода, так и уже получаемой страницы. К таким редакторам относятся: пакет программ Macromedia^® MX 2004, Macromedia^® HomeSite®+ 5.1, Arachnophilia 4.0 и многие другие. Но у многих таких HTML-редакторов есть один важный недостаток – они прописывают много «мусора», то есть много лишнего, что даже не используется на данной странице, а это приводит к её «утяжелению», то есть к увеличению объёма странице, а, следовательно, и к более длительной её загрузки.

Текстовые – позволяют писать HTML-код страничек своими руками, что более сложно, в сравнении с визуальным способом написания страничек сайта, но зато решает многие проблемы, которые не могут выполнить визуальные редакторы. Таких редакторов тоже достаточно много, можно использовать Microsoft^® Front Page Express, Microsoft^® Word XP, Tiger Pad 3.5.2. Я рекомендую использовать Tiger Pad 3.5.2 – это и текстовый редактор, который может заменить системный «Блокнот», так и HTML-редактор, в котором есть: минимальные, но очень необходимые основные шаблоны тэгов, примеры использования HTML-кода, DHTML, Java Script, а также настраиваемая цветовая подсветка тэгов, что очень поможет начинающему web-разработчику.

Графический редактор – необходим для редактирования изображений: как самого рисунка, таки его размеров; их конвертаций в форматы, принятые для web-дизайна (*.gif, *.jpg, *.png). Таких редакторов и оболочек существует огромное множество. Я же рекомендую пользоваться Adobe® Photoshop® CS, ACDSee 6.0 (можно, конечно же, пользоваться и их предыдущими версиями) – они полностью удовлетворяют меня своими возможностями по редактированию и конвертации.
FTP-менеджер (FTP-клиент) – необходим для передачи созданных страничек сайта на выбранный Интернет сервер. Существует множество таких программ, которые содержат различные дополнительные функции. Но самым простым является FAR manager – это и файловый менеджер и FTP-клиент одновременно. Ещё есть Smart FTP – это FTP-менеджер, который позволяет производить upload (позволяет производить «докачку» на web-сервер), что очень важно при работе с плохой связью или перегруженной Сетью.
А также необходимо ещё иметь под рукой некоторые программы, которые помогут Вам при создании Вашего сайта, а именно: программы для проверки корректности назначенных Вами ссылок на другие страницы и документы, наборы Java-скриптов для создания анимированных меню, уже написанные модули гостевой книги, статистики и тому подобного, так создание данных элементов достаточно трудны для начинающего web-дизайнера. В использование данных программ и модулей нет ничего зазорного, ведь по мере того, как оформление и содержание будет «обкатываться», Вы уже будете совершенно на другом уровне, а там уже можно будет обойтись и своими силами.

Основы HTML.

Рассмотрим структуру любой страницы. Любую страницу можно рассмотреть в виде пяти основных элементов, вложенных друг в друга. Для наглядности рассмотрим ниже приведённую схему.

<HTML> Декларация страницы
	<HEAD> Заголовок страницы
		Техническая информация и заголовок страницы
	</HEAD>

	<BODY> Тело страницы
		Текст, таблицы, изображения, ссылки и баннеры
	</BODY>
</HTML>

Из схемы видно, что web-документ (страничка) состоит из двух основных частей: заголовка страницы и тела страницы. Рассмотрим содержание каждого из элементов.

Заголовок («голова») страницы – в данном элементе документа описывается название страницы и техническая информация для поисковых систем и машин.

Тело («тело») страницы – это и есть самое, что не на есть главное в web-документе – это всё то, чем будет «богата» Ваша страница. В данном элементе содержатся: текстовая, табличная и графическая информация (тексты, таблицы и рисунки), а также анимированные меню, счётчики и баннеры, которые выделены в отдельный вид – управляющие функции.

Рассмотрим наиболее часто встречающиеся тэги в создании страничек – это поможет Вам в создании своего собственного сайта. Но что же такое тэг и с чем его «едят»?

Тэг – законченная единица HTML-кода. Например, <HTML>, <HEAD>, <BODY>, <FONT> и так далее. Тэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). Большинство тэгов – парные, то есть в их написании есть и открывающий и закрывающий тег, например, вышеуказанным тэгам соответствуют закрывающие тэги </HEAD>, </FONT>, </BODY>, </HTML>.

Многие из тэгов имеют свои параметры, которые мы с Вами рассмотрим, так как они помогут Вам в создании своих HTML-документов.

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

Всё то, что находится вне символов «<» и «>» выводится на экран (печать), а то, что в внутри данных символов – нет. Итак, переходим непосредственно к тэгам.

Примечание. При выборе, а также и последующем их написании в web-документах имён файлов, страниц будьте внимательны. Некоторые ftp-серверы не могут отличить названия тапа: LOGO.GIF и logo.gif – для них одно и тоже, а для некоторых – это разные имена, поэтому рекомендую все имена писать строчными (маленькими) буквами. И, что уж совсем обязательно – латиницей (можно писать транслитерацию русского названия). Некоторые ftp-серверы «пропинывают» (то есть отказываются выполнять) такие ссылки и директории, как: BANNER и/или BANNERS, LINK и/или LINKS. Поэтому старайтесь избегать таких названий файлов и web-документов во избежание неприятностей.

Тэги, применяемые в «голове» страниц.

Открывающий тэг <HEAD> и закрывающий тэг </HEAD> определяют границы заголовка страницы, внутри которой расположена техническая информация и заголовок документа.

<META> – специальная группа инструкций, необходимых для поисковых машин. Все тэги данной группы не видны при просмотре страницы. Рассмотрим некоторые наиболее важные параметры данного тэга на примерах.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

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

<META NAME="Keywords" CONTENT="ключевые слова">

В данном записываются ключевые слова, связанные с данной страничкой, которые перечисляются через запятую, общим количеством до 1000 символов.

<META NAME="Author" CONTENT="имя автора сайта или страницы">

В данном записывается имя автора сайта, что позволяет через поисковые машины найти данный сайт по автору.

<META NAME ="copyright" content="© кому принадлежат права на данный сайт">

В данном записывается имя владельца сайта, что позволяет через поисковые машины найти данный сайт по его владельцу.

Открывающий тэг <TITLE> и закрывающий тэг </TITLE> определяют название страницы, которая высветится в верхнем поле Internet Explorer`а.

<TITLE> Название страницы </TITLE>

Вот мы и рассмотрели тэги, которые имеют место в «голове» web-документа, теперь перейдём к тэгам «тела» web-документа.

Тэги, применяемые в «теле» страниц.

В «теле» web-страницы располагаются в основном: текст, таблицы, изображения, ссылки и баннеры, а также и фреймы (которые уходят уже в прошлое, поэтому мы их рассматривать не будем). Научившись правильно пользоваться этими пятью элементами, Вы сможете создать web-страницу любого вида и сложности. Перейдём к рассмотрению каждого элемента. Но для начала рассмотрим, как задаётся само «тело» web-страницы.

Открывающий тэг <BODY> и закрывающий тэг </BODY> – данными тэгами определяется само «тело» web-страницы, внутри которого мы и будем располагать всю информацию (текстовую, графическую, табличную, а также ссылки и баннеры). Им может задать не только определение «тела» страницы, но и цвет текста во всём документе, но и размер шрифта, и вид основного шрифта, а также фоновый цвет или фоновое изображение, всё зависит лишь от применяемых параметров (или же атрибутов) данного тэга. Эти атрибуты располагаются внутри открывающего тэга <BODY>, рассмотрим часто применяемые атрибуты для данного тэга. Вся необходимая для вывода информация располагается между открывающим и закрывающими тэгами. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

TEXT – это атрибут, задающий основной цвет текста в документе. Он может задаваться в виде значений #RRGGBB, где значение смешения трёх основных цветов (RGB – красный, зелёный и синий) задаются в шестнадцатеричном формате, либо может задаваться как цветовая константа, например красный цвет можно задать так: "#FF0000" или "red" (по умолчанию – чёрный).

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

BACKGROUND – это атрибут, задающий цвет общего фона. Формат его задачи такой же, как и у атрибута BGCOLOR. Но можно использовать и графическое изображение, тогда в значение атрибута прописывается путь (ссылку к необходимому изображению) к фоновому изображению (например: BACKGROUND="background.jpg"). По умолчанию используется – белый цвет.

LINK – этот атрибут задаёт основной цвет ссылки.

ALINK – этот атрибут задаёт цвет активной ссылки, то есть которая используется в данный момент.

VLINK – этот атрибут задаёт цвет уже посещённой ссылки.

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

Таблица базовых цветов

Aliceblue F0F8FF	Antiquewhite FAEBD7	Aqua 00FFFF	Aquamarine 7FFFD4
Azure F0FFFF	Beige F5F5DC	Bisque FFE4C4	Black 000000
Blanchedalmond FFEBCD	Blue 0000FF	Blueviolet 8A2BE2	Brown A52A2A
Burlywood DEB887	Cadetblue 5F9EA0	Chartreuse 7FFF00	Chocolate D2691E
Coral FF7F50	Cornflowerblue 6495ED	Cornsilk FFF8DC	Crimson DC143C
Cyan 00FFFF	Darkblue 00008B	Darkcyan 008B8B	Darkgoldenrod B8860B
Darkgray A9A9A9	Darkgreen 006400	Darkkhaki BDB76B	Darkmagenta 8B008B
Darkolivegreen 556B2F	Darkorange FF8C00	Darkorchid 9932CC	Darkred 8B0000
Darksalmon E9967A	Darkseagreen 8FBC8F	Darkslateblue 483D8B	Darkslategray 2F4F4F
Darkturquoise 00CED1	Darkviolet 9400D3	deeppink FF1493	Deepskyblue 00BFFF
Dimgray 696969	Dodgerblue 1E90FF	Firebrick B22222	Floralwhite FFFAF0
Forestgreen 228B22	Fuchsia FF00FF	Gainsboro DCDCDC	Ghostwhite F8F8FF
Gold FFD700	Goldenrod DAA520	Gray 808080	Green 008000
Greenyellow ADFF2F	Honeydew F0FFF0	Hotpink FF69B4	Indianred CD5C5C
Indigo 4B0082	Ivory FFFFF0	Khaki F0E68C	Lavendar E6E6FA
Lavenderblush FFF0F5	Lawngreen 7CFC00	Lemonchiffon FFFACD	Lightblue ADD8E6
Lightcoral F08080	Lightcyan E0FFFF	Lightgoldenrodyellow FAFAD2	Lightgreen 90EE90
Lightgrey D3D3D3	Lightpink FFB6C1	Lightsalmon FFA07A	Lightseagreen 20B2AA
Lightskyblue 87CEFA	Lightslategray 778899	Lightsteelblue B0C4DE	Lightyellow FFFFE0
Lime 00FF00	Limegreen 32CD32	Linen FAF0E6	Magenta FF00FF
Maroon 800000	Mediumauqamarine 66CDAA	Mediumblue 0000CD	Mediumorchid BA55D3
Mediumpurple 9370D8	Mediumseagreen 3CB371	Mediumslateblue 7B68EE	Mediumspringgreen 00FA9A
Mediumturquoise 48D1CC	Mediumvioletred C71585	Midnightblue 191970	Mintcream F5FFFA
Mistyrose FFE4E1	Moccasin FFE4B5	Navajowhite FFDEAD	Navy 000080
Oldlace FDF5E6	Olive 808000	Olivedrab 688E23	Orange FFA500
Orangered FF4500	Orchid DA70D6	Palegoldenrod EEE8AA	Palegreen 98FB98
Paleturquoise AFEEEE	Palevioletred D87093	Papayawhip FFEFD5	Peachpuff FFDAB9
Peru CD853F	Pink FFC0CB	Plum DDA0DD	Powderblue B0E0E6
Purple 800080	Red FF0000	Rosybrown BC8F8F	Royalblue 4169E1
Saddlebrown 8B4513	Salmon FA8072	Sandybrown F4A460	Seagreen 2E8B57
Seashell FFF5EE	Sienna A0522D	Silver C0C0C0	Skyblue 87CEEB
Slateblue 6A5ACD	Slategray 708090	Snow FFFAFA	Springgreen 00FF7F
Steelblue 4682B4	Tan D2B48C	Teal 008080	Thistle D8BFD8
Tomato FF6347	Turquoise 40E0D0	Violet EE82EE	Wheat F5DEB3
White FFFFFF	Whitesmoke F5F5F5	Yellow FFFF00	YellowGreen 9ACD32

2.1. Текст.

Открывающий тэг <font> и закрывающий тэг </font> – очень многофункциональный элемент. Им может задать не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта, всё зависит лишь от применяемых параметров (или же атрибутов) данного тэга. Эти атрибуты располагаются внутри открывающего тэга <FONT>, рассмотрим часто применяемые атрибуты для данного тэга. Вся необходимая для вывода информация располагается между открывающим и закрывающими тэгами. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

FACE – это атрибут, задающий наименование используемого шрифта.

SIZE – это атрибут, задающий размер шрифта в пределах от 1 до 7, где 1 – самый мелкий размер шрифта. По умолчанию (то есть при отсутствии данного атрибута, данный параметр равен 3).

COLOR – это атрибут, задающий цвет шрифта. По умолчанию используется – чёрный цвет.

BGCOLOR – это атрибут, задающий цвет подложки шрифта. Формат его задачи такой же, как и у атрибута COLOR. По умолчанию используется – цвет основного фона.

Теперь перейдём к атрибутам форматирования текста, которые влияют на вид текста и располагаются между открывающим тэгом <font> и закрывающим тэгом </font>, непосредственно в тексте.

<BR> – это непарный тег, который осуществляет переход на следующую строку, и он тоже имеет свои параметры, которые почему-то используют крайне редко:

CLEAR – атрибут тэга <BR>, отвечающий за обтекание изображения текстом:

ALL – завершить обтекание изображения текстом;

LEFT – завершить обтекание изображения текстом, выровненного по левому краю;

RIGHT – завершить обтекание изображения текстом, выровненного по правому краю.

Возьмите за правило – после каждого графического тэга <IMG> обязательно ставить без пробелов тэг <BR> – это избавит Вас от некоторых мучений по совмещению картинок и текста.

<P> текст </P> – это парный тег (причём закрывающий тэг </P> использовать необязательно, но всё же лучше его использовать, пусть это станет Вашим «хорошим тоном»), который осуществляет переход на следующий абзац. Данный тэг тоже имеет свои атрибуты, которые находятся в открывающем <P> и позволяют форматировать текст, рассмотрим параметры форматирования текста данного атрибута тэга <P>:

align – это атрибут выравнивания, рассмотрим его параметры:

LEFT – выравнивание текста по левому краю документа, что выполняется и так по умолчанию;

RIGHT – выравнивание текста по правому краю документа;

CENTER – выравнивание текста по центру документа;

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

<I> текст </I> – это парный тег, который преобразует вписанный в него текст в курсив, то есть наклонный текст. Можно использовать аналог данного тэга: <EM> текст </EM>.

<B> текст </B> – это парный тег, который преобразует вписанный в него текст как «жирный», то есть данный текст станет более широким и выделенным по отношению к общему тексту. Можно использовать аналог данного тэга: <STRONG> текст </STRONG>.

<U> текст </U> – это парный тег, который преобразует вписанный в него текст в подчёркнутый снизу линией текст.

<SUB> текст </SUB> – это парный тег, который преобразует заключённый в него текст как нижний индекс.

<SUP> текст </SUP> – это парный тег, который преобразует заключённый в него текст как верхний индекс.

Вот основные тэги и их атрибуты, которые используются при выводе текстовой информации на экран. Эти тэги можно использовать и в сочетаниях, главное правило в таких случаях – соблюдать иерархию вложений, то есть все вложенные тэги должны быть вложены друг в друга как русская матрёшка. Например:

<font size="1" bgcolor="#4080FF" face="AG_Benguiat">

<p align="justify"> <b> <U> <I> В СЛУЧАЕ БОЛЕЗНИ: </I> </U> </b> </P> </font>

в результате получим надпись «В СЛУЧАЕ БОЛЕЗНИ: » жирным подчёркнутым курсивом написанную шрифтом AG_BENGUIAT самым малым размером с голубой подложкой. В примере видно, как были использованы три вида форматирования к текстовой фразе, но и её размещение, и размер на странице.

2.2. Графика.

Графическая информация – это одна из важнейших составляющих любого web-ресурса, но важно помнить, что всё хорошо в меру, и по возможности применять графику как можно реже, так как её наличие «утяжеляет» Вашу страничку. Поэтому наличие графической информации должно быть обоснованно, а не ради того, чтоб показать какие тэги Вы знаете.

Тэг <IMG> – это непарный тэг, который не имеет закрывающего тэга, предназначен для вывода на экран графической информации. На сегодняшний момент поддерживает графические форматы: *.GIF, *.JPEG, *.JPG, *.PNG. Параметры графического изображения зависят от значений атрибутов данного тэга. Рассмотрим основные часто используемые атрибуты тэга <IMG>. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

SRC – это обязательный атрибут, задающий URL (адрес или же место расположения) используемого изображения.

align – это атрибут выравнивания, его действие точно такое же, как и в уже рассмотренном теге форматирования текста <P>, рассмотрим параметры форматирования данного атрибута тэга:

LEFT – выравнивает по левому краю документа, текст обтекает изображение справа (выполняется по умолчанию);

RIGHT – выравнивает по правому краю документа, текст обтекает изображение слева;

TOP и TEXTTOP – выравнивает верхнюю кромку изображения с базовой линией текущей текстовой строки;

MIDDLE – выравнивает базовую линию текущей текстовой строки с центром изображения;

BOTTOM и BASELINE – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки;

ABSTOP– выравнивает верхнюю кромку изображения с верхней кромкой текущей текстовой строки;

ABSMIDDLE – выравнивает центр текущей текстовой строки с центром изображения;

ABSBOTTOM – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

ALT – это очень полезный атрибут, который выводит подпись к используемому изображению при подводе к нему манипулятора типа «мышь», а также, если картинка не загрузилась или же стоит запрет в браузере на закачку изображений, то данный тэг альтернативного текста на месте изображения оставит свою надпись, ту, что являлась подписью к изображению..

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

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

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

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

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

Приведём пример использования тэга <IMG>:

<IMG SRC = "KBT-Isabella Banzay.jpg" align = "CENTER" WIDTH = "300" height = "225" border = "1" VSPACE = "7" HSPACE = "7" ALT= "Изабелла Банзай KBT ny2209">

в результате получим: выведенное на экран изображение, которое будет размером 300 на 225 пикселей (по ширине и высоте соответственно), расположено по центру строки, иметь рамку-окантовку толщиной в 1 пиксел, при наличии текста он не будет подходить к изображению на 7 пикселей со всех сторон, а также при наведении «мыши» будет появляться надпись: «Изабелла Банзай KBT ny2209».

Тэг <HR> – это непарный тэг, результатом которого является горизонтальная линия, перед и после которой располагаются по одной пустой строке. Форматирование линии определяется атрибутами, которые рассмотрим ниже. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

SIZE – это атрибут, задающий толщину линии в пикселях.

align – это атрибут выравнивания, его действие точно такое же, как и в уже рассмотренном теге форматирования текста <P> и графическом <IMG>, рассмотрим параметры форматирования данного атрибута тэга:

LEFT – выравнивание по левому краю документа;

RIGHT – выравнивание по правому краю документа;

CENTER – выравнивание по центру документа, что выполняется и так по умолчанию.

WIDTH – это атрибут, задающий ширину в пикселях или процентах от ширины окна браузера.

COLOR – это атрибут, задающий один из шестнадцати базовых цветов линии. По умолчанию используется – чёрный цвет. Данный атрибут работает в основном только в Internet Explorer`е.

Таблица шестнадцати базовых цветов.

	Black		Navy
	Gray		Blue
	Silver		Aqua
	White		Green
	Red		Lime
	Fuchsia		Teal
	Maroon		Yellow
	Purple		Olive

NOSHADE – это атрибут, который определяет способ закраски линии как сплошной. По умолчанию, то есть при отсутствии данного атрибута – линия является объёмной. Данный атрибут является флагом, а это значит, что ему не нужны никакие значения.

Приведём пример использования данного тега:

<hr size = "3" color = "red" align = "LEFT" WIDTH = "30%" NOSHADE>

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

Вот мы и рассмотрели часто используемые в web-дизайне графические тэги.

2.3. Таблицы.

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

Основные используемые тэги при создании таблиц – это: открывающие тэги <TABLE>, <CAPTION>, <TH>, <TR> и <TD> и соответственно им закрывающие тэги </TD>, </TR>, </TH>, </CAPTION> и </TABLE>. Рассмотрим подробнее каждый из этих тэгов.

Таблица задаётся открывающим тэгом <TABLE> и закрывающим тэгом </TABLE>. Допускаются вложения одной таблицы в другую, то есть содержимым любой ячейки может быть тоже таблица. Параметры самой таблицы по отношению к web-документу задаются атрибутами в открывающем тэге. Все остальные параметры, такие как параметры ячеек, столбцов и строк, задаются в соответствующих открывающих тэгов, расположенных между открывающим тэгом <TABLE> и закрывающим тэгом </TABLE>. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

align – это атрибут горизонтального выравнивания, его действие точно такое же, как и в уже рассмотренном форматирования текста <P>, рассмотрим параметры форматирования данного атрибута тэга:

LEFT – выравнивание по левому краю документа, что выполняется и так по умолчанию;

RIGHT – выравнивание по правому краю документа;

CENTER – выравнивание по центру документа.

VALING – это атрибут вертикального выравнивания, его действие точно такое же, как и в уже рассмотренном форматирования текста <P>, рассмотрим параметры форматирования данного атрибута тэга:

BOTTOM – выравнивание по нижнему краю документа;

TOP – выравнивание по верхнему краю документа (используется по умолчанию);

MIDDLE – выравнивание по середине документа.

BORDER – это атрибут, задающий толщину (в пикселях) рамки (по умолчанию – рамки нет).

bordercolor – это атрибут, задающий цвет бордюра (рамки) таблицы.

HEIGHT – это атрибут, задающий высоту таблицы в пикселях или процентах.

WIDTH – это атрибут, задающий ширину таблицы в пикселях или процентах.

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

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

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

BACKGROUND – это атрибут, задающий цвет общего фона. Формат его задачи такой же, как и у атрибута BGCOLOR. Но можно использовать и графическое изображение, тогда в значение атрибута прописывается путь (ссылку к необходимому графическому файлу) к фоновому изображению (например: BACKGROUND="background.jpg"). По умолчанию используется – цвет основного фона.

Рассмотрев, как задаётся таблица, перейдём к тэгам и их параметрам, расположенным внутри таблицы.

Название таблица задаётся открывающим тэгом <CAPTION> и закрывающим тэгом </CAPTION>. Содержание заголовка должно состоять только из текста, не допускается использовать в названии заголовка таблицы блочные элементы. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

BOTTOM – помещает заголовок таблицы под самой таблицей;

TOP – помещает заголовок таблицы над самой таблицей (используется по умолчанию).

Рассмотрев, как задаётся подпись названия таблицы, перейдём к тэгам и их параметрам, которые непосредственно задают строки таблицы.

Таблицы в HTML формируются не традиционным способом – построчно, а именно – сначала создаётся строка с помощью открывающего тэга <TR>, а затем в данный тэг вкладывается необходимое количество ячеек с помощью открывающего тэга <TD> и закрывающего тэга </TD>, после чего ставят закрывающий тэг </TR>. Таким образом можно получить таблицу любого вида. Перейдём к рассмотрению вышеперечисленных тэгов.

Строки таблицы задаются открывающим тэгом <TR> и закрывающим тэгом </TR>. Содержание строк таблицы – это ячейки таблицы. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

align – это атрибут горизонтального выравнивания, рассмотрим параметры форматирования данного атрибута тэга:

LEFT – выравнивание содержимого всех ячеек строки по левому краю (используется по умолчанию);

RIGHT – выравнивание содержимого всех ячеек строки по правому краю;

CENTER – выравнивание содержимого всех ячеек строки по центру.

VALING – это атрибут вертикального выравнивания, рассмотрим параметры форматирования данного атрибута тэга:

BOTTOM – выравнивание содержимого всех ячеек строки по нижнему краю;

TOP – выравнивание содержимого всех ячеек строки по верхнему краю (используется по умолчанию);

MIDDLE – выравнивание содержимого всех ячеек строки по середине.

bGcolor – это атрибут, задающий фоновый цвет всех ячеек строки.

После рассмотрения способа задания строки, перейдём к заданию ячеек. Ячейку можно задать двумя способами:

- с помощью открывающего тэга <TH> и закрывающего тэга </TH>, тогда мы получим ячейку – заголовок;

- с помощью открывающего тэга <TD> и закрывающего тэга </TD>, тогда мы получим произвольного вида ячейку.

Рассмотрим атрибуты, находящиеся в открывающем тэге <TD>, и то, как они влияют непосредственно на ячейку в таблице. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

LEFT – выравнивание содержимого ячейки по левому краю (используется по умолчанию для тэга <TD>, если не было задано в тэге <TR>);

RIGHT – выравнивание содержимого ячейки по правому краю;

JUSTIFY – выравнивание содержимого ячейки по обоим краям;

CENTER – выравнивание содержимого ячейки по центру (используется по умолчанию для тэга <TH>).

BOTTOM – выравнивание содержимого ячейки по нижнему краю;

TOP – выравнивание содержимого ячейки по верхнему краю;

MIDDLE – выравнивание содержимого ячейки по середине (используется по умолчанию, если не было задано в тэге <TR>).

bGcolor – это атрибут, задающий фоновый цвет ячейки.

BACKGROUND – это атрибут, заполняющий ячейку фоновым рисунком, например: BACKGROUND="background.jpg". По умолчанию используется – цвет основного фона.

HEIGHT – это атрибут, задающий высоту в пикселях или процентах ячейки по отношению к общей высоте таблицы.

WIDTH – это атрибут, задающий ширину в пикселях или процентах ячейки по отношению к общей ширине таблицы.

COLSPAN – это атрибут, определяющий количество столбцов, на которые простирается данная ячейка (по умолчанию равна 1).

ROWSPAN – это атрибут, определяющий количество строк, на которые простирается данная ячейка (по умолчанию равна 1).

NOWRAP – это атрибут, блокирующий перенос слов в текущей ячейке, данный атрибут является флагом, поэтому он не имеет значений.

TITLE – это атрибут, выдающий всплывающую текстовую (используется только текст) подсказку.

Приведём пример использования данного атрибута тега:

<TD height = "100" title = "Пример"> Ячейка столбца 1, строка 1 </TD>

результатом будет всплывающая подсказка со словом «Пример» при наведении на данную ячейку (размером в 100 пикселей) курсора манипулятором типа «мышь».

Приведём ниже HTML-код таблицы, которая может стать Вам шаблоном для построения родословной Вашей кошки или кота, стоит лишь поменять клички животных и их окрас, а также если дописать к этой таблице «голову» и оформить «тело», то у Вас уже получится web-страница с родословной Вашего питомца. Можно украсить таблицу фоновым рисунком или цветом, применив дополнительно соответствующие параметры.

<caption align = "top"> Родословная кота/кошки (01010202030304040505060607070808) </caption>

<TR>

<TH> PARENTS </TH>

<TH> GRANDPARENTS </TH>

<TH> GREAT-GRANDPARENTS </TH>

<TH> GREAT-GREAT-GRANDPARENTS </TH>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "8"> кот (0101020203030404) <BR> его окрас </TD>

<TD WIDTH = "178" ROWSPAN = "4"> кот (01010202) <BR> его окрас </TD>

<TD WIDTH = "178" ROWSPAN = "2"> кот (0101) <BR> его окрас </TD>

<TD WIDTH = "178"> кот (01) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (01) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "2"> кошка (0202) <BR> её окрас </TD>

<TD WIDTH = "178"> кот (02) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (02) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "4"> кошка (03030404) <BR> её окрас </TD>

<TD WIDTH = "178" ROWSPAN = "2"> кот (0303) <BR> его окрас </TD>

<TD WIDTH = "178"> кот (03) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (03) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "2"> кошка (0404) <BR> её окрас </TD>

<TD WIDTH = "178"> кот (04) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (04) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "8"> кошка (0505060607070808) <BR> её окрас </TD>

<TD WIDTH = "178" ROWSPAN = "4"> кот (05050606) <BR> его окрас </TD>

<TD WIDTH = "178" ROWSPAN = "2"> кот (0505) <BR> его окрас </TD>

<TD WIDTH = "178"> кот (05) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (05) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "2"> кошка (0606) <BR> её окрас </TD>

<TD WIDTH = "178"> кот (06) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (06) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "4"> кошка (07070808) <BR> её окрас </TD>

<TD WIDTH = "178" ROWSPAN = "2"> кот (0707) <BR> его окрас </TD>

<TD WIDTH = "178"> кот (07) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (07) <BR> её окрас </TD>

</TR>

<TR>

<TD WIDTH = "178" ROWSPAN = "2"> кошка (0808) <BR> её окрас </TD>

<TD WIDTH = "178"> кот (08) <BR> его окрас </TD>

</TR>

<TR>

<TD WIDTH = "178"> кошка (08) <BR> её окрас </TD>

</TR>

</table>

Попробуем разобраться в структуре HTML-кода данной таблице. Для построения родословной нам необходима таблица размером 4 столбца на 17 строк. Некоторые из ячеек надо будет объединить между собой в определённом порядке, чтоб получить необходимого вида таблицу. Всю таблицу, которая представляет собой родословную можно поделить на три части:

- строка-заголовок столбцов с наименованиями колен родословной (1 строка в 4 столбца);

- блок ячеек, описывающих родословную по отцовской линии (8 строк в 4 столбца);

- блок ячеек, описывающих родословную по материнской линии (8 строк в 4 столбца).

Блоки ячеек по отцовской и материнской линии абсолютно идентичные по HTML-коду, поэтому рассмотрим только первые 9 строк таблицы.

Как было уже описано, таблицы в HTML формируются не традиционным способом – построчно. А именно – сначала создаётся строка с помощью открывающего тэга <TR>. Затем в данный тэг вкладывается необходимое количество ячеек с помощью открывающего тэга <TD> (<TH>)и закрывающего тэга </TD> (</TH>), после чего ставят закрывающий тэг </TR>. Таким образом можно получить таблицу любого вида. Перейдём к формированию нашей таблицы.

Зададим с помощью тэгов <table> и </table> саму таблицу, в которую вложив все необходимые компоненты: заголовок и строки, содержащие ячейки.

Зададим с помощью тэгов <caption> и </caption> название таблицы.

Теперь перейдём к формированию самих строк.

Первая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём в четырёх ячейках, созданных с помощью тэгов <TH> и </TH>, названия всех четырёх колен родословной.

Вторая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём в четырёх ячейках, созданных с помощью тэгов <TD> и </TD>, форматирование этого блока таблицы. То есть, проводим объединение соответствующих ячеек с помощью атрибута ROWSPAN и заносим данные по животным. Для первой ячейки значение атрибута будет равно 8, сюда записываем кота (0101020203030404) и его окрас. Для второй ячейки значение атрибута будет равно 4, сюда записываем кота (01010202) и его окрас. Для третьей ячейки значение атрибута будет равно 2, сюда записываем кота (0101) и его окрас. Для четвёртой ячейки значение атрибута будет равно 1 (и его можно не писать, так как это выполняется по умолчанию), сюда записываем кота (01) и его окрас.

Третья строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего одну ячейку, созданную с помощью тэгов <TD> и </TD>. В данной строке всего лишь одна ячейка – четвёртая ячейка, так как первая, вторая и третья были уже зарезервированы атрибутом ROWSPAN во второй строке. В четвёртую ячейку записываем кошку (01) и её окрас.

Четвёртая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего две ячейки, созданные с помощью тэгов <TD> и </TD>. В данной строке всего лишь две ячейки – третья и четвёртая ячейки, так как первая и вторая были уже зарезервированы атрибутом ROWSPAN во второй строке. Для третьей ячейки значение атрибута ROWSPAN будет равно 2, сюда записываем кошки (0202) и её окрас. В четвёртую ячейку записываем кота (02) и его окрас.

Пятая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего одну ячейку, созданную с помощью тэгов <TD> и </TD>. В данной строке всего лишь одна ячейка – четвёртая ячейка, так как первая и вторая были уже зарезервированы атрибутом ROWSPAN во второй строке, а третья – в четвёртой строке. В четвёртую ячейку записываем кошку (02) и её окрас.

Шестая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего три ячейки, созданные с помощью тэгов <TD> и </TD>. В данной строке всего лишь три ячейки – так как первая была уже зарезервированы атрибутом ROWSPAN во второй строке. Для второй ячейки значение атрибута ROWSPAN будет равно 4, сюда записываем кошку (03030404) и её окрас. Для третьей ячейки значение атрибута будет равно 2, сюда записываем кота (0303) и его окрас. Для четвёртой ячейки значение атрибута будет равно 1 (и его можно не писать, так как это выполняется по умолчанию), сюда записываем кота (03) и его окрас.

Седьмая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего одну ячейку, созданную с помощью тэгов <TD> и </TD>. В данной строке всего лишь одна ячейка – четвёртая ячейка, так как первая и вторая были уже зарезервированы атрибутом ROWSPAN во второй строке, а третья – в четвёртой строке. В четвёртую ячейку записываем кошку (03) и её окрас.

Восьмая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего две ячейки, созданные с помощью тэгов <TD> и </TD>. В данной строке всего лишь две ячейки – третья и четвёртая ячейки, так как первая была уже зарезервированы атрибутом ROWSPAN во второй строке, а вторая – в шестой строке. Для третьей ячейки значение атрибута ROWSPAN будет равно 2, сюда записываем кошки (0404) и её окрас. В четвёртую ячейку записываем кота (04) и его окрас.

Девятая строка. В этой строке, созданной с помощью тэгов <TR> и </TR>, задаём всего одну ячейку, созданную с помощью тэгов <TD> и </TD>. В данной строке всего лишь одна ячейка – четвёртая ячейка, так как первая была уже зарезервирована атрибутом ROWSPAN во второй строке, вторая – в шестой строке, а третья – в восьмой строке. В четвёртую ячейку записываем кошку (04) и её окрас.

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

Не рекомендую вписывать номера родословных в данную таблицу, в избежания использования этих данных нечестными на руку людей. Рассмотрев данный HTML-код, у Вас возникнет вопрос: «А что за ещё неизвестный нам тэг «  ?»

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

Если внимательно рассмотреть, как написан HTML-код таблицы, то Вы увидите, что тэги ячеек немного утоплены. Такое написание HTML-кода таблиц в web-страницах – необязательное, но очень наглядное, поэтому рекомендую и Вам пользоваться таким написанием, тогда очень удобно отслеживать необходимые для коррекции ячейки.

Перечислив основные тэги и их атрибуты для вывода на экран графической информации, перейдём к рассмотрению следующей группы необходимых тэгов для создания Вашего сайта.

2.4. Ссылки и баннеры.

Ссылки, а также баннеры – одни из составляющих любых web-страничек. В Сети Вы почти не найдёте страниц, которые бы не содержали такие данные.

Все ссылки можно разбить по их назначению, а именно:

текстовые ссылки (так называемые – линки, или же гипертекстовые ссылки) – это ссылки, представленные в виде подчёркнутого снизу текста, например: скачать, при нажатии на данный линк, Вам будет предложен диалог на закачку некоторого файла; или http://www.bogema.altnet.ru, при нажатии данного линка, Вы перейдёте на web-сайт с данным адресом;

графические ссылки – это картинки, баннеры, мапы или же карты и счётчики, которые есть разновидность баннеров, только ведущие подсчёт посещаемости Вашего web-сайта, при нажатии которых Вы перейдёте на определённый web-сайт или web-документ.

Рассмотрим ниже эти варианты задания ссылок.

Гипертекст или же ссылка, задаётся открывающим тэгом <A> и закрывающим тэгом </A>, всё находящееся между ними – есть гипертекст, который поддаётся форматированию, как в открывающем тэге, так и в самом «контейнере» (промежутке между открывающим и закрывающим тэгами). Рассмотрим возможные параметры и атрибуты данного тэга. Все значения атрибутов выводятся по шаблону:

НАЗВАНИЕ АТРИБУТА = "ЗНАЧЕНИЕ АТРИБУТА"

HREF – обязательный атрибут, который определяет текст или картинку, находящуюся между открывающим и закрывающим тэгами, как гипертекстовую ссылку (URL или линк) на документ (и/или область документа), указанный в значении данного параметра. Рассмотрим параметры данного атрибута:

HTTP:// – создаёт ссылку на www-документ;

FTP:// – создаёт ссылку на ftp-сайт или на расположенный на нём файл;

MAILTO: – запускает почтовую программу-клиент с уже заполненным адресом получателя.

TITLE – это атрибут, выдающий всплывающую текстовую (используется только текст) подсказку.

NAME – это атрибут, задающий имя для работы с фреймами. Фреймы – это уже атавизм, и только закостенелые, ленивые или халявщики до чужого труда пользуются ими до сих пор. Фреймы ушли в прошлое с появлением таблиц, которыми не только можно задавать сами таблицы, но и создавать дизайн web-страницы. Поэтому мы рассматривать использования фреймов не будем.

Рассмотрим подробнее параметры атрибутов: HTTP:// и MAILTO:, которые наиболее часто Вам придётся применять при создании Вашего web-сайта или web-страницы.

Ссылка на www-документ может задаваться по-разному, всё зависит от необходимого типа задачи ссылки, а именно:

<A href = "имя странички.html"> текстовая информация о ссылке </a> – если данный документ находится в той же папке (директории);

<A href = "имя директории/имя странички.html"> текстовая информация о ссылке </a> – если данный документ находится в некоторой поддиректории;

<A href = "http://имя сайта/имя директории/имя странички.html"> текстовая информация о ссылке </a> – если данный документ находится на другом сайте или же – это абсолютная ссылка. Абсолютная ссылка удобна для корректного распознания ссылки, но и есть свои недостатки: трудность в написании (необходимо прописывать весь путь к web-документу), а также невозможно сделать «зеркало» (действующую копию сайта на локальном компьютере, а не в Сети Интернет) сайта с множеством ссылок, так как это прямые ссылки на web-документы в Сети Интернет.

Ссылка на диалог с почтовой программой-клиентом тоже может задаваться в нескольких вариантах, а именно:

<A href = "mailto:имя_почтового_ящика"> текстовая информация о почтовом ящике </a> – если надо создать диалог для работы почтовой программы-клиента с уже указанным адресом получателя;

<A href = "mailto:имя_почтового_ящика?subject=текстовая информация, вносимая в поле почтовой программы-клиента «тема»"> текстовая информация о почтовом ящике </a> – если надо создать диалог для работы почтовой программы-клиента с уже указанным адресом получателя и темой письма;

<A href = "mailto:имя_почтового_ящика?subject=текстовая информация, вносимая в поле почтовой программы-клиента «тема»&cc=имя_почтового_ящика, кому необходимо отправить копию письма"> текстовая информация о почтовом ящике </a> – если надо создать диалог для работы почтовой программы-клиента с уже указанным адресом получателя и темой письма, а также, если надо отправить копию ещё на один почтовый ящик;

<A href = "mailto:имя_почтового_ящика?subject=текстовая информация, вносимая в поле почтовой программы-клиента «тема»&cc=имя_почтового_ящика, кому необходимо отправить копию письма&body=некоторая фраза, которая будет в начале отправляемого письма"> текстовая информация о почтовом ящике </a> – если надо создать диалог для работы почтовой программы-клиента с уже указанным адресом получателя и темой письма, а также, если надо отправить копию ещё на один почтовый ящик и необходимо начать данное письмо некоторой фразой.

Примечание. Значение атрибута HREF пишется слитно, то есть без пробелов во всей строке значений, кроме необходимых грамматических пробелов в текстовых полях: subject и body.

Графическая ссылка – это та же гипертекстовая ссылка, но уже содержащая графическую составляющую, то есть вместо текстовой информации о ссылке, заключённой в «контейнере» между открывающим <a> и закрывающим тэгами </a>, вставляется изображение с помощь тэга <IMG>, атрибуты и параметры которого мы рассмотрели выше, в подразделе «Графика». Способ задания ссылки такого рода такой же, как и у текстовой (смотри выше). Например:

<img src = "KBT-Isabella Banzay.jpg" width = "300" height = "225" border = "1" alt="Официальный сайт Клуба Породистых Кошек -=БОГЕМА=- (г. Барнаул, Алтайский край), входящего в Международную Фелинологическую Ассоциацию"></a>

результатом данного HTML-кода будет – графическая ссылка с размером изображения 300x225 пикселей и каймой в 1 пиксель (графическая составляющая которого – файл KBT-Isabella Banzay.jpg), при наведении на неё курсора манипулятора типа «мышь» (или при не возможной загрузке графической составляющей ссылки) – появится надпись: «Официальный сайт Клуба Породистых Кошек -=БОГЕМА=- (г. Барнаул, Алтайский край), входящего в Международную Фелинологическую Ассоциацию», а при нажатии на данное изображение – осуществится переход на web-страничку сайта с адресом: http://bogema.altnet.ru/MEMBERS/KBT/Isabella Banzay/Isabella Banzay.htm.

Поговорим немного о баннерах.

Баннер – это графическая ссылка на определённый web-ресурс (сайт, страничку, реже на какой-нибудь файл). Баннеры можно разделить на две группы: статические и динамические (они же анимированные). Динамические баннеры придают привлекательность ссылке на web-ресурс, разжигая интерес у посетителя Сети, особенно, если баннер сделан отлично, но не вызывающе кричащий. Рисовать баннеры я Вас учить не буду – это дело каждого человека, но советы по их форматам я дам.

Баннеры имеют определённые размеры – это облегчает их интегрирование на другие ресурсы, рассмотрим эти размеры:

- 470x60 – это новый стандарт формата большого баннера, в ближайшем будущем он вытеснит полностью формат 468x60;

- 468x60 – это самый распространённый формат большого баннера, он используется большинством баннерных сетей;

- 234x60 – этот формат называют – «половинка», так как два таких баннера в сумме дают один большой;

- 120x60 – этот формат называют – «заглушка», используется рядом (обычно слева) с большим баннером 468x60, чтобы занять пустое место до стандартной ширины экрана в 600 пикселей, при этом соблюдается расстояние между ними в 12 пикселей, чтобы они «не склеились» между собой;

- 100x100 – это самый распространённый квадратный баннер;

- 125x125 – это мало распространённый квадратный баннер, такого вида баннер встречается, чаще всего, на одиночных сайтах;

- 200x55 – этот формат называют – «ухо», используют обычно три таких баннера, чтобы занять пустое место до стандартной ширины экрана в 600 пикселей, такой вид баннеров чаще всего используют электронные СМИ (например, WWW.GAZETA.RU);

- 230x33 – этот формат называют – «мелкий», используют обычно такие баннера на сайтах поисковых систем и каталогов;

- 81x63 – этот формат называют – «счётчик», используют обычно такие баннера на сайтах поисковых систем и каталогов, как счётчик или для показа рейтинга (например, «Rambler`s Top 100» на сайте WWW.top100.rambler.ru/top100/);

- 81x31 – этот основной малый формат баннера называют – «баннерик», используют такие баннеры большинства на своих сайтах.

Если Вы решили сделать баннер несоответствующий данным стандартам, то постарайтесь придерживаться основным высотам, что облегчит установку Вашего баннера на других сайтах, в случае баннерообмена – это высоты: 31, 60 или 100 пикселей. Рассмотрим пример HTML-кода для получения баннера, все указанные элементы, тэги и атрибуты Вам уже известны:

<a href="http://www.bogema.altnet.ru">

<img src="http://www.altnet.ru/~bogema/INDEX/logo_02.gif" border="1" width="88" height="31" alt="Официальный сайт Клуба Породистых Кошек -=БОГЕМА=- (г. Барнаул, Алтайский край), входящего в Международную Фелинологическую Ассоциацию">

</a>

результатом данного кода получится анимированный баннер (графическая составляющая – файл logo_02.gif) размером 88x31 пикселей с каймой в 1 пиксель, при наведении на него курсора манипулятора типа «мышь» (или при не возможной загрузке графической составляющей баннера) – появится надпись: «Официальный сайт Клуба Породистых Кошек -=БОГЕМА=- (г. Барнаул, Алтайский край), входящего в Международную Фелинологическую Ассоциацию», а при нажатии на данный баннер – осуществится переход на сайт с адресом: http://www.bogema.altnet.ru.

Счётчики и рейтинги – это разновидность баннеров, дающие информацию о посещаемости пользователями Вашего web-ресурса. HTML-код данных типов графических ссылок отличается от баннеров лишь наличием дополнительного элемента ID, который получаем при регистрации на поисковых серверах. Обычно, поисковые сервера присылают готовый HTML-код счётчика Вам на электронный почтовый ящик. Поэтому, не будем заострять внимание на данном вопросе.

Прочие применяемые тэги и скрипты.

Вот мы уже и рассмотрели многие элементы, тэги и их атрибуты для создания web-страниц. Но у нас ещё осталось меню сайта в подвешенном состоянии. Предлагаю воспользоваться выдвижным слева меню, которое следит за скроллингом, то есть при прокрутки длинных страниц вниз или вверх, меню всегда остаётся на экране, в то же время, оно занимает очень мало места на экране, не закрывая выложенную информацию на странице. Работу данного меню можете посмотреть на нашем клубном сайте по адресу: http://www.bogema.altnet.ru.

function move(x) {

if (document.all) {

object1.style.pixelLeft += x;

object1.style.visibility = "visible"}

else if (document.layers) {

document.object1.left += x;

document.object1.visibility = "show"}};

function makeStatic() {

if (document.all) {object1.style.pixelTop= document.body.scrollTop+20}

else {eval(document.object1.top= eval(window.pageYOffset+20));}

setTimeout("makeStatic()",0);}

</script>

<style>

<!--

.hl {

Background-Color : yellow;

Cursor:hand;

}

.n {

Cursor:hand;

}

-->

</style>

function positionmenu(){

move(-132)

}

if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}

</script>

document.write('<td align="center" rowspan="100" width="16" bgcolor="#FF6666"><span style="font-size:13px"> <p align="center"><font face="Arial Black">S<br>I<br>D<br>E<br>M<br>E<br>N<BR>U </font></p> </span></TD>')

</script>

</tr>

if (document.all||document.layers) {

makeStatic();}

var text=new Array();

var thelink=new Array();

//configure thelinks below. Extend as desired

text[0]="наименование раздела 1";

text[1]="наименование раздела 2";

text[2]="наименование раздела 3";

text[3]="наименование раздела 4";

text[4]="наименование раздела 5";

text[5]="наименование раздела 6";

text[6]="наименование раздела 7";

text[7]="наименование раздела 8";

thelink[0]="адрес ссылки на раздел 1";

thelink[1]="адрес ссылки на раздел 2";

thelink[2]="адрес ссылки на раздел 3";

thelink[3]="адрес ссылки на раздел 4";

thelink[4]="адрес ссылки на раздел 5";

thelink[5]="адрес ссылки на раздел 6";

thelink[6]="адрес ссылки на раздел 7";

thelink[7]="адрес ссылки на раздел 8";

//Введите здесь target (по умолчанию стоит для этого окна)

//ПРАВИЛЬНОЕ ОБОЗНАЧЕНИЕ 'new'-для нового окна, ' ' - для этого окна, 'framename' (где 'framename' имя фрейма)

var linktarget=' '

///DO NOT EDIT BELOW THIS LINE////////////////

function navigateie(which){

if (linktarget=='')

window.location=thelink[which]

else if (linktarget=='new')

window.open(thelink[which])

else{

temp_var=eval("window.parent."+linktarget)

temp_var.location=thelink[which]

}

for (i=0;i<=text.length-1;i++)

if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL> '+text[i]+'</FONT></TD></TR>')}

else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL> <A HREF="'+thelink[i]+'" target="'+linktarget+'" id="nounderline">'+text[i]+'</A> </FONT></LAYER></ILAYER></TD></TR>')}

//-->

</script>

<tr>

</TR>

</table>

if (document.all) {document.write('</DIV>')}

window.onload=positionmenu

</script>

</LAYER>

Код этого меню содержит не только HTML-код, но и язык JavaScript (версии 1.2), что задаётся открывающим тэгом <SCRIPT> и закрывающим тэгом </SCRIPT>. Описывать данный язык я не буду, так как это нельзя описать в одной статье журнала. Ещё в данном меню применены слои, которые задаются открывающим тэгом <LAYER> и закрывающим тэгом </LAYER>. Слои помогают в web-дизайне «оживить» простую графику сайта и придать сайту динамичность.

В данном меню можно увеличить при необходимости количество строк, но не перестарайтесь, если меню будет слишком большим, и не будет вмещаться в экран, то нижними строками такого длинного меню Вы просто не сможете воспользоваться. Поэтому постарайтесь не использовать более 15 пунктов в данном меню. Вы можете настроить это меню, под свой вкус, изменив цвета, тип и размер шрифтов, цвет подложки в меню – всё это находится в уже узнанных раннее тэгах. Пробуйте – ведь только опробовав, ошибившись, а после, найдя ошибку и устранив её – Вы научитесь понимать, читать и писать HTML-код и не только. «Метод научного тыка» или же «метод проб и ошибок» – один из лучших учителей в вопросе изучения не только в web-дизайне, но и вообще.

Вот ещё один полезный скрипт – защита от копирования, при нажатии правой клавиши манипулятора типа «мышь» появляется надпись: «Недопустимое действие!» Но есть у него недостаток, через панель инструментов браузера копирование всё же возможно, но не каждый про это знает, да и так копировать жутко не удобно. Устанавливается данный скрипт между тэгами <HEAD> и </HEAD>.

<!--

var mes="Недопустимое действие!";

function click(e) {

if (document.all) {

if (event.button == 2) { // Чтобы отключить левую кнопку поставьте цифру 1

alert(mes);

return false;

}

if (document.layers) {

if (e.which == 3) {

alert(message);

return false;

}

if (document.layers) {

document.captureEvents(Event.MOUSEDOWN);

}

document.onmousedown=click;

// -->

</script>

Вот ещё один интересный скрипт – антифреймер. Данный скрипт борется с фреймами. В Сети достаточно много нечестных людей, которые оформляют свой «сайт» как меню, а в одном из фреймов используют информацию с других сайтов, оформляя как свою. Данный скрипт «уничтожает» фрейм и делает Вашу страницу во весь экран браузера. Устанавливается данный скрипт между тэгами <BODY> и </BODY>.

setTimeout("Killer()",500);

function Killer()

{

if (self.parent.frames.length!=0)

if (self.parent.location!=document.location)

{self.parent.location=document.location};

}

</script>

Фотоальбом.

Какие странички и рубрики создать – решать Вам. Но очень часто спрашивают: «А как создать функциональный фотоальбом?» Вот это мы и постараемся рассмотреть в данной главе.

Что же нужно для хорошего фотоальбома? Ответ прост – хорошие качественные фотографии и голова с руками, чтоб написать HTML-код фотоальбома. Итак, перейдём к созданию фотоальбома.

Пусть у Вас некоторое количество фотографий равное числу N. Пусть оно будет кратно четырём. Эти данные нужны для построения листа предпросмотров или же фотоанонсов. Для этого нам понадобятся как сами фотографии (желательно формата 800x600 точек), так и их уменьшенные копии (фотоанонсы или же фотоминиатюры, желательно формата 200x150 точек, так как данный формат – это одна четвёртая от формата 800x600, что мы принимаем из поставленного выше условия).

Во-первых, создадим папку «photo album», внутри которой создадим ещё три папки: «images» (в ней будут находиться сами фотографии, желательно формата 800x600 точек), «pages» (в ней будут находиться web-страницы, которые будут содержать эти фотографии), и «thumbnails» (в ней будут находиться фотоанонсы или же фотоминиатюры, желательно формата 200x150 точек, так как данный формат – это одна четвёртая от формата 800x600).

Во-вторых, создадим из исходных фотографий изображения размером (или форматом) 800x600, дадим им названия от 01.jpg и до N.jpg, их в свою очередь отправляем в папку «images», которая находится внутри папки «photo album». Создадим из полученных фотографий фотоанонсы размером (или форматом) 200x150, дадим им названия от 01.jpg и до N.jpg, их в свою очередь отправляем в папку «thumbnails», которая находится внутри папки «photo album».

В-третьих, надо создать лист фотоанонсов, который сбережёт нервы, деньги и время потенциальных посетителей, которым интересны не все фотографии, а лишь некоторые – а это будет им от Вас просто подарком, а Вам – хорошим тоном web-дизайнера. Перейдём к написанию кода по алгоритму:

- задаём саму web-страницу;

- задаём «голову» web-страницы, в которой прописываем различную служебную информацию для поисковых машин и заголовок страницы;

- закрываем «голову» web-страницы;

- задаём «тело» web-страницы, прописывая все родительские (главные) атрибуты;

- центруем web-документ;

- задаём таблицу, прописывая в ней родительские атрибуты, применяемые к таблице;

- маркируем начало 01 строки таблицы;

- задаём 01 строку таблицы;

- вкладываем в строку таблицы четыре ячейки (01, 02, 03 и 04) с вложенными элементами: путь к полной картинке, изображение фотоанонса и подпись к фотоанонсу;

- закрываем 01 строку таблицы;

- маркируем конец 01 строки таблицы;

…

повторяем действия со строками по мере необходимости

…

- маркируем начало XX строки таблицы;

- задаём XX строку таблицы;

- вкладываем в строку таблицы четыре ячейки (N-3, N-2, N-1 и N) с вложенными элементами: путь к полной картинке, изображение фотоанонса и подпись к фотоанонсу;

- закрываем XX строку таблицы;

- маркируем конец XX строки таблицы;

- закрываем таблицу;

- закрываем центрирование;

- закрывает «тело» web-страницы;

- закрываем саму web-страницу.

Как видно из алгоритма – все перечисленные действия мы уже рассмотрели, так что – пишем!

<HTML>

<HEAD>

<TITLE> ФОТОАЛЬБОМ: кличка (и титул) животного </TITLE>

</HEAD>

<TR>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

</TR>

…

<TR>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Вот уже готовый HTML-код, в котором надо всего лишь поменять по своему вкусу то, что выделено курсивом, а также выполнить рекомендации по структуре фотоальбома – и у Вас уже есть лист фотоанонсов! Сохраняем данный код как index.htm в папку «photo album».

В-четвёртых, необходимо нарисовать в любом графическом редакторе три стрелки: «влево», «вверх» и «вправо». Это могут быть и треугольники с нужной ориентировкой, и что-то иное – всё на Ваш вкус. Сохраним их в папку «pages» с именами соответственно: «previmage.gif», «home.gif» и «nextimage.gif».

В-пятых, необходимо создать страницы, в которых изображены, будут фотографии Вашего питомца, с именами с 01.htm по N.htm, которые необходимо сохранить в папке «pages». Общий вид HTML-кода страниц с 02. htm по N-1.htm – идентичны, их различие лишь в подписях к фотографиям и различие в ссылках.

Рассмотрим HTML-код страницы с именем 01.htm:

<HTML>

<HEAD>

<TITLE> ФОТОАЛЬБОМ: кличка (и титул) животного / фото 01 </TITLE>

</HEAD>

</TD>

<FONT size="размер шрифта" face="наименование шрифта" > Кличка животного / фото 01</FONT>

</TD>

<TABLE>

<TR>

</A></TD>

<TD>

</A></TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<TR>

</TD>

</TR>

</TABLE>

</CENTER>

<P>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</CENTER>

</P>

</BODY>

</HTML>

Рассмотрим HTML-код страницы с именем 02.htm:

<HTML>

<HEAD>

<TITLE> ФОТОАЛЬБОМ: кличка (и титул) животного / фото 02 </TITLE>

</HEAD>

<FONT size="размер шрифта" face="наименование шрифта" > Кличка животного / фото 02</FONT>

</TD>

<TABLE>

<TR>

<TD>

</A></TD>

</A></TD>

<TD>

</A></TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<TR>

</TD>

</TR>

</TABLE>

</CENTER>

<P>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</CENTER>

</P>

</BODY>

</HTML>

Рассмотрим HTML-код страницы с именем N.htm:

<HTML>

<HEAD>

<TITLE> ФОТОАЛЬБОМ: кличка (и титул) животного / фото N </TITLE>

</HEAD>

<FONT size="размер шрифта" face="наименование шрифта" > Кличка животного / фото N</FONT>

</TD>

<TABLE>

<TR>

<TD>

</A></TD>

</A></TD>

</TABLE>

</TD>

</TR>

</TABLE>

<TR>

</TD>

</TR>

</TABLE>

</CENTER>

<P>

<FONT size="размер шрифта" face="наименование шрифта" > подпись к рисунку </FONT>

</CENTER>

</P>

</BODY>

</HTML>

Если Вы всё правильно сделали, то у Вас должен получиться неплохой фотоальбом, который не стыдно выложить и в Сеть.

Послесловие.

И напоследок несколько советов:

- каждому пункту меню создавайте свою папку;

- используйте, по возможности, абсолютные ссылки;

- после использования тэгов <IMG> ставьте без пробелов тэг <BR>, что избавит Вас от некоторых неприятностей с текстом при наличии в тексте картинок;

- пишите значения атрибутов тэгов в кавычках, хотя новые версии браузеров позволяют не использовать их, но путь это станет для Вас правилом;

- имена файлов, страничек, картинок пишите в латинице маленькими буквами, чтоб у Вас не было проблем с распознаванием этих файлов;

- тэги и их атрибуты старайтесь писать заглавными буквами, хотя разницы и нет, но так получается наглядней;

- не бойтесь ошибаться, по чаще сохраняйтесь и проверяйте результат в браузере!

Вот мы и подошли к концу, надеюсь, что чтение Вас не утомило, а мой труд не пропал даром, и Вы достигли желаемого результата – сделали свой первый сайт о своих питомцах.

Если у кого возникли вопросы, то не стесняйтесь – пишите электронный почтовый ящик, постараюсь ответить всем: Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript..

С уважением к читателю, Алексей Мозгляков.

Алтайский край, г. Барнаул.