Инструментарий

Для разработки веб-сайтов каждому сайтостроителю необходимо иметь набор инструментов. К книге прилагается СД-диск. Программное обеспечение, которое вам понадобится:

Windows

TheBat - почтовая читалка Far - файловый менеджер, позволяет копировать и редактировать файлы по ftp. UltraEdit - редактор HTML, позволяет редактировать файлы удаленно по ftp. ACDSee - просмоторщик картинок, может выполнять тривиальное редактирование. Netscape 2,3,4,6 - броузеры для проверки совместимости сайта Opera 4,5,6 - броузеры для проверки совместимости сайта Teleport, ReGet, FlashGet и прочие выкачивалки WinZip, WinRar, ARJ - архиваторы, на сегодняшний день zip является наиболее распространенным. Apache - веб-сервер PHP - скриптовый язык phpMyAdmin - оболочка для администрирования MySQL Perl - язык для разработки CGI-программ MySQL - СУБД ITCGI - библиотека для разработки CGI-программ на Си ERWin - утилита для автоматизации проектирования баз данных telneat - клиент для SSH

Unix

Apache - веб-сервер PHP - скриптовый язык phpMyAdmin - оболочка для администрирования MySQL Perl - язык для разработки CGI-программ MySQL - СУБД ITCGI - библиотека для разработки CGI-программ на Си wget - выкачивалка ssh - сервер unix2dos - конвертирует \r\n в \n recode - перекодировщик win1251,koi8, и прочее

Обработка информации

Хранение, добавление, обновление, удаление, поиск, сортировка, вычисления, генерация отчетов и прочее.

Основы сетевых технологий

В данном параграфе необходимо дать минимальный ликбез по сетевым технологиям. Каждый участник проекта должен иметь представление о технологиях и владеть инструментальными средствами.

Веб-сайты размещаются на серверах в Сети. Сервер - как правило, обычный системный блок. Наиболее распространенной операционной системой является FreeBSD. Также широко используются WindowsNT/2000 и различные поставки Linux. FreeBSD(фрибэсди) и Linux(линукс) являются разновидностями операционной системы UNIX. Наиболее популярной программой для управления веб-сайтами является веб-сервер Apache(апачи), который поставляется как в бинарных модулях, так и в исходных текстах. Apache используется на всевозможных ОС. В Windows имеется свой веб-сервер Internet Information Server (сокращенно IIS, по-русски произносится идваэс).

Сервера соединены всевозможными каналами связи: проводами, радиомодемами, спутниковой связью и т.д.. Информация передается по протоколу TCP. Суть в том, что у каждого сервера может быть несколько физических интерфейсов передачи данных. Интерфейсом называют сетевые карты, модем, в общем любое устройство через которое происходит соединение с Сетью. Если ваш компьютер подключен через параллельный(LPT) порт, то в данном случае параллельный порт будет сетевым интерфейсом. У каждого интерфейса может быть несколько IP-адресов. IP-адрес - это четыре числа от нуля до 256 разделенных точкой. Например: 194.226.32.53. На каждом IP-адресе имеется 65 тысяч гнезд(портов), по которым и происходи передача информации. Поверх протокола TCP идут протоколы более высокого уровня.

Представление информации

Дизайн, верстка, навигация, информационное наполнение, юзабилити и мн. др..

Реклама

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

С чего начинаются сайты?

Эта глава пожалуй одна из самых трудных. Нет, не для вас, для меня. Уже написано большая часть книги, а к первой главе приступил только сегодня - 26 августа 2001 года. До этого момента не было вдохновения и честно говоря совсем не представлял, что надо здесь написать, с чего начать. Я и сейчас не очень знаю, но через 10 дней мне предстоит читать семестровый курс лекций по данной тематике, поэтому надо начинать. Поехали!

Давайте попытаемся дать ответ на первый вопрос: "А что же такое сайт?" Сайт может быть:

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

Как вы видите направлений масса. Конечно, если подойти с технической точки зрения, то можно определить сайт, как совокупность гипертекстовых документов взаимосвязанных, как правило, с информационной системой. Вообще говоря классифицировать сайты дело неблагодарное. Уже столько раз пробовали и ни к чему не пришли. И каждое направление будет иметь свои особенности в содержательной части. Общей же у них будет технология создания. Под технологие создания следует понимать весь жизненный цикл работы над сайтом - начиная от идеи создания и заканчивая его сопровождением и в конце концов утилизацие. Общими у сайтов будуи не только чисто технические характеристики, но и другие процессы управлении проектом, раскрутки, поддержке, информационном наполнении и др.

Отвечая на вопрос данного параграфа "С чего начинаются сайты?" скажу, что сайты, как и эта книга, и многие другие продукты творчества начинаются с ИДЕИ. Если у вас есть хорошая идея, то пол дела уже сделано, конечно, при условии наличия прямых и хватких рук. ;-) Идея заключается в том, насколько будет востребован ваш сайт. Важно оказаться в чем-то первым, надо придумать что-то новое, иначе из-за конкуренции пробиться будет не просто. Например, в области разработки операционных систем для IBM PC совместимых компьютеров приличную долю рынка занимает Microsoft, потому что они были первыми подсуетившимися и ухватившимися за кусок безразмерного пирога.
Лидером на нашем рынке по разработке веб-сайтов и дизайна является студия Артемия Лебедева. Он был первый! Кто знает, как бы оно все сложилось, если б я родился на пят лет раньше. ;-) Артемий Лебедев начинал в 1995. В сентябре 1995 года я только только начал знакомиться с персональным компьютером, даже побаивался его, был просто чайником. Вот насколько важно во время найти идею и реализовать ее. Меня успокаивает одно, что на мой век еще хватит ИДЕИ и пионерии.

27.08.2001 2:08 (третий час ночи, однако!!!) Черт возьми, хочется начать как-то нестандартно, банальные слова про то, что все только начинается, какие большие перспективы у Интернета и информационных технологий, уже приелись. Впрочем стоп, для любителей лозунгов, могу посоветовать "Бизнесс со скоростью мысли" Билла Гейтса. Нудная книжка о том, что по утрам надо чистить зубы. Через одну минуту по телеку начнется концерт "50 лет на двоих. Машина времени + Воскресенье". Надо пойти посмотреть. ... Посмотрел. Круто! В голову пришел еще один абзац.

Итак, у вас появилась идея. Что с ней делать? Бежать в студию веб-дизайна или в книжный за книгами про HTML за 24 часа? Если у вас много денег, приходите к нам, мы поможем вам от них избавиться. Если у вас хорошее настроение, мы его вам испортим.... тьфу... этого я не говорил... вспомнил это из пародии на нас, автор Дмитрий Марамзин.

Если у вас хорошее настроение, когда вы идете к нам, то мы вам его испортим!

Если у вас много денег, то вы потеряете у нас все!

Если вы любите жизнь, то после визита к нам вам захочется застрелиться!

Если вы здоровы, то и это для нас не проблема!

Мы сожжем ваш огнетушитель!

Утопим ваших рыбок!

Провалим ваш матан!

Нагрубим вашему начальнику!

Съедим ваши конфеты!
Выпьем ваше пиво!

И это еще не все!

Контактный адрес электронной почты -

Полную версию пародии вы можете увидеть по адресу http://client3.itsoft.ru/. Теперь ближе к делу, вернемся, так сказать, к нашим баранам. Не торопитесь изучать HTML и бежать отдавать свои денежки.


Проработайте и продумайте свою идею до конца. За вас этого в полной мере никто не сделает. Просмотрите Интернет, что уже есть по данной тематике или близко к ней. Отметьте плюсы и минусы тех или иных проектов. В большинстве случаев вам может показаться, что идея уже реализована, что и так много подобных сайтов. Но потом вы начнете что-то делать и уже сможете назвать и пересчитать по пальцам своих конкурентов. Пройдет еще время и вы продвинетесь и займете лидирующее положение, скорее всего не точно в той цели, которая была намечена изначальна, а где-то близко. Поставьте себя на место пользователя\посетителя вашего сайта. Очень многие владельцы ресурсов сети не обращают должного внимание на удобства использования их сайта. А между прочим, постоянно приходится наталкиваться на проблемы. Надо посмотреть список путевок в Крым, а у них каких только разделов нет - весь мир, а Крыма нет. Бывают сайты изначально обреченные на провал. Какой-нибудь менеджер наслушается сказок о чуде Интернет и решает вложить некоторую сумму денег в Интернет-проект, а он не окупается или вообще не работает. Возможно, что изначально планировалось получать какую-то отдачу от сайт, а потом он оказался невостребованным. То ли из-за того, что действительно никому не нужен, толи потому что не смогли раскрутить. Истинную причину неудачи тоже довольно сложно установить. На страничке http://ricn.ru/tomb/ вы найдете кладбище сгинувших сайтов.

Теперь давайте проанализируем дальнейшие шаги после того, как у вас в кармане уже имеется неплохая идея.

будет ли сайт(ИДЕЯ) востребованной сбор данных проектирование бизнес-логики дизайн верстка программирование тестирование регистрация доменного имени, размещение, дальнейшее сопровождение и продвижение(раскрутка) сайта в Сети

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


Ответы на остальные поставленные вопросы и многое другое вы узнаете из данной книги.

Также здесь необходимо произнести банальную фразу о том, что команда профессионалов является необходимым условием для успешного завершения проекта. Очень часто это условие сознательно или несознательно игнорируется. Управляют проектом или принимают решения люди не имеющие соотвествующих знаний и опыта. Мне доводилось работать с так называемыми менеджерами и директороами интернет-проектов, которые были настолько далеки от Интеренет, что применяли факс для обмена информацией вместо электронной почты. Руководитель проекта должен знать все обо всем или хотя бы иметь представление. Так, например, знание HTML, DNS, юзабилити, работа с FTP и email является необходимым. Все отговорки, что это сложно или не нужно лишь попытки локально облегчить себе жизнь. На самом же деле, жизнь только осложняется.

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

Два бизнесмена договариваются о сделке. Один другому предлагает вагон повидла за милион. После сделки один бежит искать вагон с повидлом, а другой милион.

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

Опять несколько откланились от основной темы. Теперь давайте поговорим о целях и задачах веб-сайта. Очень многие технические задания и переговоры о разработке сайта часто начинаются с чисто технических характеристик таких, как объем текста, количество картинок и фотографий, платформа хостинга, структура базы данных и других.Такие технические задания мне приходилось читать во всевозможных тендорах. Нам присылают подобных проекты технических заданий с просьбой сказать сколько будет стоить разработка. Между тем опускается наиболее важная компонента, а именно - Цель. Самое удивительное, что ни в одной книге мне не удалось найти грамотного, на мой взгляд, начала. А начинается все с ответа на элементарный вопрос - "Зачем". Разработчик должен видеть и понимать цель, ради которой он разрабатывает веб-сайт. Все наши переговоры о создании сайта мы начинаем именно с цели. Мы уже создали десятки информационных систем и на основе такого колосального опыта можем уточнить цель и подсказать грамотное решение. Итак, перечислим некоторые из основных целей создания веб-сайта:

Smtp

25й порт. Протокол отправки почты. Отличительной особенностью является отсутствие авторизации, т.е. нет логина и пароля. В связи с данной особенностью хакеры могут отправлять почту через чужой незащищенный SMTP-сервер. Защита базируется на разграничение доступа по IP-адресам или авторизации посредством протокола pop3.

Собственное удовлетворение

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

В публикациях также можно встретить такие цели, как: коммуникация и круглосуточная работа. Это псевдоцели! Это особеннсости Сети. Да в Интернет информация с одного континента до другого доходит за считанные секунды. Да Интернет не закрывается ни на праздники, ни на обед, ни чтобы поспать. Это просто его особенности, но никак не цель для создаваемого нового сайта.

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

Средства коммуникации

Гостевые книги, форумы, чаты, списки рассылки, интеграция веб-форумов, электронной почты и USENET-конференций.

Telnet

23й порт. По данному протоколу производися удаленная работа на компьютере. Программа telnet имеется во всех ОС. В настоящее время почти не используется, т.к. данные не шифруются и можно запросто перехватить пароль и другие данные.

Ведение бизнеса

К таким сайтам относятся всевозможные торговые площадки. Например: http://www.oxygensoftware.com, http://petek.ru/zippo. Необходимо выделить в подцель информационные системы, которые предназначены для внутреннего использования. Технология создания таких систем несколько отличается от общей, т.к. здесь мы можем задавать и определать ряд дополнительных условий: каналы передачи, программно-аппаратную конфигурацию клиента, несколько другие требования к безопасности и ряд других условий и ограничений.

Визитная карточка

Аналог обычной визитной карточки, только информации можно представить значительно больше, чем умещается на вашей визитке. Примером такого сайта может быть наш сайт http://itsoft.ru или http://www.tevostok.ru.

Гиперссылки

Гиперссылки используются для связи с другими документами. С их помощью вы можете делать ссылки на документы или файлы, которые находятся на других сайтах, на документы в пределах текущего сайта и блоки внутри документов. Наиболее употребителен следующий синтаксис: <a href=URL>Название ссылки</a>.
Примеры:

Атрибут title удобно использовать, когда гипертекст нельзя сделать слишком большим и непонятно, что имеется в виду. Такое бывает часто в меню, когда одно слово обозначает раздел или действие, и требуются дополнительные пояснения. Наведите курсор мыши на гиперссылку и вы увидите подсказку. Для того чтобы открыть ссылку в новом окне, укажите атрибут target=_blank. Старайтесь использовать этот атрибут в черезвычайно редких случаях. В ссылках указывающих на документы на данном сайте совсем неправильно открывать их в новом окне. Открытие гиперссылок в новом окне, часто используется, когда она ссылается на другой сайт. Тем не менее, в любом случае принудительное открытие документов в новом окне плохо тем, что вы решаете за пользователя, что ему нужно. Возможно он хотел открыть эту ссылку именно в том окне, а не в новом. При использовании атрибута _blank пользователя вынуждают закрывать предыдущее окно, если оно ему больше не нужно. Использование атрибута _blank оправдано только в каталогах и поисковых машинах, например Yandex, где можно почти со 100% уверенностью утверждать, что пользователь хотел открыть в новом окне. Если пользователю требуется открыть ссылку в новом окне, то он сделает это самостоятельно, удерживая клавишу Shift или щелкнув на ссылку правой кнопкой мыши и выбрав соотвествующий пункт контекстного меню. Другие значения атрибута target мы рассмотрим в главе "Фреймы". Вы можете ссылаться на абзацы и в других документах, в этом случае значение атрибута href=http://server_name/path_to_file#link_name. Имя и место ссылки задается командой <a name=link_name> в тексте. Так, например, в данной главе параграф "оформление текста" выглядит следующим образом:

Оформление текста

h2>Пример

Атрибут color в команде font задается тремя числами - R,G,B в шестнадцатеричном виде. Каждое изменяет в диапазоне от 0 до FF (255). Также цвет можно задать одним из следующих ключевых слов.

Имена цветов и RGB-значения

	black = 000000		green = 008000		maroon = 800000		navy = 000080
	silver = C0C0C0		lime = 00FF00		red = FF0000		blue = 0000FF
	gray = 808080		olive = 808000		purple = 800080		teal = 008080
	white = FFFFFF		yellow = FFFF00		fuchsia = FF00FF		aqua = 00FFFF

Команда действует до тех пор, пока броузер не встретит соответствующую ей закрывающую команду. Вы можете комбинировать их, вкладывая одну команду в другую.

Например: Красный наклонный жирный увеличенный текст. Обратите внимание на выделенное слово "можете" выше. На первом этапе необходимо знать все возможности технологий и инструментов, но из этого не следует, что все их надо применять. Самая распространенная ошибка начинаючих сайтостроителей заключается в том, что они используют не по месту звои познания в области HTML. Например, никогда не используйте цвет текста не к месту. Никогда не делайте подчеркнутым обычный текст! Подчеркнутой в HTML может быть только гиперссылка. На подчеркнутый текст пользователи Сети подсознательно пытаются щелкнуть мышью, принимая этот текст за гиперссылку.
Не используйте двойного или многократного выделения текста. Полным бредом будет цветной жирный подчеркнутый увеличенный курсив. Вполне достаточно применить к слову одно выделение, чтобы сделать на нем ударение, т.е. сделать его более заметным для читателя. Цветовое выделение не очень хорошо. Значительно лучше либо увеличить, либо сделать жирным или курсивом.

И последнее, о чем здесь стоит сказать, об использовании в тексте знаков <> и других эскейп последовательностях. Они интерпретируются, как начало и окончание команды html, поэтому, если вы хотите их использовать в качестве текста, то пишите

Пример <pre> // Форматированный

Оформите какой-либо текст используя, заголовки двух уровней для обозначения глав и параграфов. Текст внутри абзацев выравнивайте по обоим краям. Перепишите пример номер 2 из предыдущего параграфа так, чтобы одна строчка выравнивалась по левому краю, а вторая - по правому и т.д. Каждые две строчки отделяйте горизонтальной линейкой, шириной 75%.

Пример <ul> <li> Красный

Правило, по которому каждому элементу из множества Х ставится в соответствие элемент множества Y.

Производная

Предел отношения приращения функции к приращению ее аргумента при стремлении последнего к нулю.

Составьте список из десяти ссылок

Заголовок первого уровня

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

<p align="center"><font face="Times New Roman" color="#0000A0"><strong><big><big>Московский государственный институт</big></big><br> <big><big>электроники и математики</big></big></strong></font>

Конечно, этот текст был написан не человеком, а сгенерирован WYSIWYG-редактором типа FrontPage, но часто и веб-мастера такое пишут. Всегда когда имеет место быть заголовок делайте оформляйте его именно при помощи команд <hx>. Во-первых, это правильно с точки зрения оформления текста. Во-вторых, многие поисковые машины индексируют заголовки. После заголовка текст начинается с новой строки. Заголовок также может быть выровнен по левому или правому краю и по центру. По умолчанию выравнивание делается по левому краю. Пример выравнивания по правому краю: <h3 align="right">Заголовок прижат к правому краю</h3>:

Заголовок прижат к правому краю

Атрибут align может принимать одно из трех значений: left, center, right.

После заголовка начинается новый абзац. Он задается командой <p>. У этой команды есть атрибут align, который принимает значения: left, center, right, justify. justify означает, что текст будет выровнен по левому и по правому краю, как это делается в печатных изданиях. В Сети часто используется выравнивание по левому краю. Считается, что так читать текст с экрана монитора легче. Это дело вкуса, мне, например, больше нравится выравнивание по обоим краям. Учтите, что броузер сам форматирует документ, и перенос текста на новые строки зависит от размера шрифта и ширины окна броузера. Если вы измените размер окна броузера, то текст автоматически переформатируется, и форматирование будет другим. Всегда проверяйте, как ваш документ смотрится на другом разрешении экрана и мониторах с другой диагональю. Для принудительного перехода на новую строку используйте команду <br>.

Например:

Листинги программ оформляются при помощи команды <pre>. Эта команда позволяет сохранить форматирование текста: пробелы, табуляции и переходы на новые строки. Обычно, броузер оставляет один пробел между словами, несмотря на их реальное количество. Переносы на новую строку игнорируются, если вы только явно не используете команду <br>. Команды <p> и <pre> имеют закрывающие команды </p> и </pre>. Обратите внимание, что хоть форматирование и сохраняется, но знаки <> вам надо указывать через спецсимволы &lt;&gt;. Следите также, чтобы абзаце pre не было слишком длинных строк. В этом случае могут пользователи увидеть у себя горизонтальную пркрутку. Ширина HTML-документа определается максимально широким элементом. Такими элементами, которые нельзя перенес на новуюстроку являютя либо картинки, либо листинги программ. При верстке текста старайтесь, чтобы он отображался в окне броузера шириной в 500 пикселов без линейки прокрутки. Вы никогда не знаете, какое разрешение у пользователся. Есть даже пользователи с карманными компьютерами. Текст на то и текст, чтобы хорошо располагаться и в окне шириной в 1024 пиксела, и в окне в 320 пиксела.

Align

выравнивание области относительно других объектов, принимает значения left, rigth, top, middle, bottom

Alink

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

Bgcolor

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

Bgproperties=fixed

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

Фреймы

Фреймы используются для того, чтобы в одном окне броузера показать несколько HTML-документов. Например, мы разобьем окно на три части. В первый фрейм загрузим меню для навигации. Во второй будем загружать документы, на которые пользователь будет щелкать по пунктам меню. В третьем будет крутиться баннер. Такой подход к созданию страниц экономит время закачивания информации. Меню закачивается один раз. Недостатком является внешний вид. Примеров удачного использования фреймов в Интернет очень мало. Фреймы были популярны в 90х годах. Сейчас от них практически отошли. Мало где на серьезном сайте вы найдете страницы с фреймами. Они могут быть полезны для создания домашних страничек или любительских сайтов. Также возможно их использование на второстепенных страничках сайта, которые не обязаны выглядеть блестяще. Здесь я привожу краткое описание фреймов, для того чтобы вы знали с чем их едят, если придется с ними столкнуться. При использовании фреймов, старайтесь избегать линеек прокрутки. Они смотрятся неестественно в середине HTML-страницы. Единственное более или менее удачное применение фреймов, на мой взгляд, для меню, которое всегда должно оставаться наверху, а не сползать вниз при прокрутке документа. Посмотрите пример на сайте . Но та же идея может быть не очень удачно реализована, как, например, на сайте . Прокручивать меню неудобно, когда там раскрыто несколько подпунктов, затрудняется навигация и работа с сайтом.

Начнем со встроенных фреймов. Они появились в стандарте языка HTML, начиная с версии 4.0, поэтому не все броузеры их поддерживают. Например, Netscape 4.06 их не понимает. Но зато самый распространенный броузер InternetExplorer четвертой и более поздней версии умеет с ними работать. Встроенный фрейм позволяет вам в вашем документе выделить прямоугольную область и загрузить туда html-документ.

Leftmargin

Задает отступ в пикселях от левого края окна броузера. По умолчанию 10 пикселей.

Link

Задает цвет гиперссылок, которые вы еще не посетили.

Marginheight

Тоже самое, но для Netscape.

Последние два элемента полезны, когда вы делаете документы для сайта и вам надо, чтобы они были прижаты к левому или верхнему краю. Если не задать атрибуты leftmargin=0 и topmargin=0, то у вас получится отступ(промежуток) в десять пикселей от границы броузера до содержимого вашего документа.

Пример использования с одного из наших сайтов: <body bgcolor=FFFFFF text=000000 link=000000 vlink=CCCCCC alink=000000 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

Scrolling

определяет наличие прокрутки, возможные значения - (yes, no, auto)

Следующй вариант использования

Создайте следующую фреймовую структуру.

--------------------------------------- | | | заголовок | | | |_______________________________________| | | | | | | | | | | меню | | | | документы | | | | | | | | | | |---------|-----------------------------| | | | баннер | ---------------------------------------

Тело

В теле html-документа содержатся команды, которые мы рассматривали в предыдущей главе. У команды <body> могут быть следующие атрибуты:

Topmargin

Задает отступ в пикселях от верхнего края окна броузера. По умолчанию 10 пикселей.

Vlink

Задает цвет гиперссылок, на которых вы уже успели побывать. Желательно, чтобы значение vlink отличалось от link.

Заголовок

В заголовке html-документа передаются параметры, относящиеся ко всему документу в целом. Он следует после команды <html> и объявляется командой <head>. Внутри <head> могут находиться следующие команды.

title - название документа meta - используется для передачи параметров в виде имя=значение link - связь с другими объектами style - определение стилей script - скрипт, например, на языке JavaScript base - задает базовый URL

Название документа отображается в заголовке окна броузера и при нажатии и удержании мышкой кнопки BACK. Хоть название документа можно и не прописывать, все же его настоятельно рекомендуется указать. Это позволит при нажатии на кнопку BACK или при просмотре журнала видеть нужный документ. Ну и самая главная причина в том, что поисковые машины индексируют заголовки HTML-документов. В заголовок можно также помимо названия документа включить и ключевые слова, чтобы ваша страница лучше проиндексировалась поисковыми машинами. Допустим вы не укажете название документа, тогда все файлы у вас будут на одно лицо - без названия.

Пример использования команды title:

Используя команду meta, можно задать кодировку, слова и описания для поисковых машин. Но некоторые поисковые машины, например Rambler, игнорируют keywords и description, ссылаясь на то, что эти поля невидимы для пользователя и в них можно прописать что угодно. Многие злоупотребляют этими параметрами. Тема культуры поведения в Сети - отдельная тема. Но хочется заметить, что в Сети, как и в реальной жизни есть такие понятия, как имидж и репутация. Используя грязные технологии можно сильно уронить свою репутацию. Сеть принципиально отличается от реального мира тем, что информация распространяется мгновенно, хранится очень долго и вы постоянно навиду. Ниже вы видите строчку, которая вынуждает броузер использовать кодировку win-1251.

Пример использования команды meta, взятый с сайта http://itsoft.ru:

Align

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

Alt

всплывающая подсказка

Здесь необходимо отметить, что для создания карт навигационных областей уместно прменять WYSIWYG-редакторы, которые значительно упрощают и ускоряют разметку навигационных областей. В качестве такого редактора можно использовать, например, Macromedia Dreamweaver 4. Но сгенерированный HTML-код все равно потребует доведения его до ума вручную.

Background

фоновая картинка

У команды <td> есть еще два атрибута colspan и rowspan. Они определяют, для какого количества колонок и рядов, ячейка является общей, или другими словами в каком количестве колонок и рядов состоит данная ячейка. По умолчанию эти атрибуты имеют значение единица, т.е. ячейка находится в одном ряду и ровно в одном столбце.

Cellpadding

расстояние от внутренней рамки ячейки до ее содержимого

Coords

координаты, задающие соответствующую область

rect: left-x, top-y, right-x, bottom-y, т.е. левый верхний угол и правый нижний circle: center-x, center-y, radius. poly: x1, y1, x2, y2, ..., xN, yN.

Документ фиксированной ширины

Вы можете обратить внимание на страницы в Сети, где форматирование текста не зависит от размеров окна броузера. Это так называемые фиксированные сайты или HTML-документ. У них четко задана ширина. В самом начале такого документа после команды <body> идет таблица:

<table align=center width=700> <tr><td>

Теперь форматирование текста не зависит от размеров окна броузера. В любом окне текст будет выглядеть одинаково, шириной в 700 пикселей. Не забудьте перед закрывающей командой </body> закрыть эту таблицу - </table>.

Форматирование HTML-документов.

Здесь мы рассмотрим приемы эффективного форматирования HTML-документов при помощи таблиц.

Frame

определяет, какие стороны рамки будут видны, возможные значения:

void - никаких сторон. В спецификации HTML4.0 написано, что это значение по умолчанию, однако броузер Internet Explorer почему-то об этом не знает. Когда я установил это значение, то рамка исчезла. above - только сверху below - только снизу hsides - только горизонтальные рамки vsides - только вертикальные lhs - только левые рамки rhs - только правые box - со всех сторон border - тоже самое

Главная страница сайта

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

Кнопки

Для создания кнопки атрибут type должен быть равен button - <input type=button value=Кнопка>. Атрибут value задает надпись на кнопке.

Такого рода кнопки используются обычно при совместном использовании с JavaScript. Наиболее часто используется кнопка для отправки данных HTML-формы на сервер и кнопка для сброса значений формы в начальное положение.

Кнопка для отправки формы создается так: <input type=submit value="Опубликовать">. Внешне она выглядит, как кнопка, но обратите внимание, что атрибут type имеет значение не button, а submit.

Для сброса формы в начальное состояние служит элемент: <input type=reset value="Сбросить в начальное состояние"> Вы можете изменить значения в элементах данной HTML-формы выше, а затем сбросить в начальное состояние, нажав следующую кнопку. Не путайте сброс в начальное состояние с нулевым. Часто на кнопке Reset пишут "очистить". Это в корне неверно. Очень часто этот элемент применяется не по делу. Во-первых, глупостью является сброс в нулевое состояние, т.е. когда у вас по умолчанию в HTML-форме никаких значений не было. Во-вторых, совсем полной глупостью является размещения кнопки Reset рядом с кнопкой Submit. Многие пользователи жмут на кнопки интуитивно и очень быстро. Например, все уже привыкли, что кнопка ОК размещается слева, а кнопка Cancel справа. Если на сайте поставить кнопку Reset слева от кнопки Submit, то будет много мата от посетителей такого сайта. Прежде, чем поставить кнопку Reset подумайте, а нужна ли она. Она нужна тогда и только тогда, когда в HTML-форме имеются начальные значения, которые пользователь редактирует. По сути кнопка Reset позволяет вернуться к начальным значениям не перегружая HTML-страницу. В Сети приходится встречать очень большие HTML-формы, в конце которых стоят рядом две кнопки Reset & Submit. И посетитель сайта долго и упорно заполнявший форму, а потом ошибившись кнопкой, начинает проклинать все что только можно и перебирать всех близких родственников разработчиков данного сайта.

Навигационные области

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

<img src=head.jpg usemap=#Map border=0><map name=Map><area shape=rect coords="1,109,59,123" href=/about/><area shape=rect coords="58,110,154,124" href=/library/><area shape=rect coords="154,110,235,124" href=/download/><area shape=rect coords="235,110,301,124" href=/links/><area shape=rect coords="301,110,385,124" href=/map/><area shape=poly coords="590,109,696,109,696,90,656,89,633,77" href=/forum/><area shape=poly coords="654,37,696,37,696,81,653,82,636,72" href=/guestbook/><area shape=poly coords="652,2,655,36,698,35,697,2" href=mailto:olimp@itsoft.ru><area shape=rect coords="75,12,502,74" href=/></map>

При помощи атрибута usemap команды <img> к изображению цепляется навигационная карта. Сама карта определяется двумя командами: <map> и <area>1;. Команда <map> имеет один единственный атрибут name, который задает название карты. В данном примере карта имеет имя Map, которое также присваивается атрибуту usemap команды <img>. Команда <map> имеет закрывающую часть - </map>. Сами навигационные области определяются при помощи команды <area>. Эта команда имеет следующие атрибуты:

Несколько элементов на одной линии

При вставке формул в документ стоит задача разместить на одном уровне картинку формулы и ее номер или название.

<table width=100%> <tr> <td width=50% align=center><img src=it03.gif></td> <td width=50% align=center>(1)</td> </tr> </table>

(1)

Отступы

При помощи таблиц можно делать горизонтальные и вертикальные отступы в пикселях. Учтите, что в Netscape пустая ячейка не отображается, поэтому в нее надо вставлять прозрачный gif-файл. Кстати, это еще один прием форматирования. Вы создаете прозрачный gif, размером один на один пиксель, а в команде img указываете нужные вам ширину и высоту.

Переключатель - поле ввода для атрибутов типа Boolean

<input type=checkbox name=checkbox>

Аналогично примеру выше, для того чтобы отметить переключатель, укажите атрибут checked. Также вы можете задать и атрибут value. По умолчанию он имеет значение on. Но смысла в этом особого нет, т.к. если переключатель не отмечен, то он не передается на сервер вообще.

Поле ввода для пароля

Поле ввода для пароля создается <input type=password name=text value="Начальное значение" size=40 maxlength=10>. Как вы можете заметить, разница в значении атрибута type.

Обратите внимание, что на этот раз размер видимой части больше, чем максимальное количество символов, которое можно ввести.

Поле ввода для строки

Поле ввода для строки создается командой <input type=text name=text value="Начальное значение" size=40 maxlength=80>.

name задает имя параметра value - начальное значение size - размер видимого поля на экране maxlength - максимальный размер строки ввода

Атрибут value обычно не указывается, это означает, что после загрузки HTML-страницы, в поле ввода будет пустая строка. Обратите внимание на параметр maxlength. Его желательно указывать, чтобы ограничить максимально допустимое количество символов. Это полезно по двум причинам. Во-первых, предостеречь пользователя от неправильного ввода. Представьте, что у вас большая форма с кучей полей. Человек ошибся, в индексе вместо шести цифр указал семь. Если вы не зададите атрибут maxlength равным шести, то бедному пользователю придется ждать, пока данные отправятся CGI-программе, потом пока программа выдаст сообщение об ошибке и т.д. Во-вторых, это будет предупреждением хакерам, что ваш сайт не так просто сломать. Но эту тему мы разберем отдельно в главе "Безопасность CGI".

Поле ввода для текста

Область ввода для текста создается командой <textarea name=textarea cols=45 rows=6>Здесь текст по умолчанию</textarea>

Здесь текст по умолчанию

Радиокнопки

Для создания радиокнопки атрибут type должен быть равен radio.

<input type=radio checked name=smile value=icon1.gif> <img src=icon1.gif> <input type=radio name=smile value=icon2.gif> <img src=icon2.gif> <input type=radio name=smile value=icon3.gif> <img src=icon3.gif> <input type=radio name=smile value=icon4.gif> <img src=icon4.gif> <input type=radio name=smile value=icon5.gif> <img src=icon5.gif> <input type=radio name=smile value=icon6.gif> <img src=icon6.gif> <input type=radio name=smile value=icon7.gif> <img src=icon7.gif> <input type=radio name=smile value=icon8.gif> <img src=icon8.gif> <input type=radio name=smile value=icon9.gif> <img src=icon9.gif> <input type=radio name=smile value=icon10.gif> <img src=icon10.gif> <br> <input type=radio name=smile value=icon11.gif> <img src=icon11.gif> <input type=radio name=smile value=icon12.gif> <img src=icon12.gif> <input type=radio name=smile value=icon13.gif> <img src=icon13.gif> <input type=radio name=smile value=icon14.gif> <img src=icon14.gif> <input type=radio name=smile value=icon15.gif> <img src=icon15.gif> <input type=radio name=smile value=icon16.gif> <img src=icon16.gif> <input type=radio name=smile value=icon17.gif> <img src=icon17.gif> <input type=radio name=smile value=icon18.gif> <img src=icon18.gif> <input type=radio name=smile value=icon19.gif> <img src=icon19.gif> <input type=radio name=smile value=icon20.gif> <img src=icon20.gif>

Rules

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

none - нет правил, значение по умолчанию groups - применяются к группам, здесь я не буду рассматривать эти команды за ненадобностью rows - применяются к рядам cols - к ячейкам all - ко всему

Я перечислил параметры frame и rules затем, чтобы дотошные читатели не завалили меня письмами с упреками, что я что-то забыл. У меня ни разу не возникала в них необходимость. Если у вас найдется красивый пример использования этих параметров, то, пожалуйста, пришлите его мне.

Сначала мы рассмотрим использование таблиц по их прямому назначению, а потом перейдем к эффективному форматированию HTML-документа при помощи таблиц. Пример таблицы с выравниванием по центру, размерами 300х200 пикселей, шириной рамки пять пикселей и синим цветом рамки. Расстояние между соседними ячейками устанавливается равным десяти пикселям. Расстояние от внутренней рамки ячейки до содержимого тридцать пикселей.

Для вывода данных в таблицах лучше использовать ряды с чередующимися оттенками одного цвета и узкой рамкой. Ниже приведены два примера. Обратите внимание на то, как построена рамка в первой, а как во второй таблице. В первом случае устанавливается атрибут border=1. Во втором случае я хотел получить рамку размером один пиксель черного цвета. Но установив border=1 и bordercolor=000000, я получил черную рамку шириной в два пиксела. Пришлось извернуться, установить пространство между ячейками в один пиксель и задать цвет фона таблицы черным. Отлаживался я на броузере Internet Explorer 4.0. В Netscape 4.06 для того чтобы получить красивые рамки, придется делать вложенные таблицы. Кстати, здесь я опираюсь на стандарт HTML4.0, поэтому Netscape4х может многие примеры отображать некорректно.

Shape

область, одно из следующих значений

default - вся область rect - прямоугольник circle - окружность poly - многоугольник

Создание HTML-форм

Для создания html-формы используется команда form. У нее могут быть следующие параметры:

NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм. ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером. METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST. TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна.

Простой пример:

Здесь мы создали форму, которую будет обрабатывать программа gb_show.exe. Параметр method, указывает каким способом передаются параметры в программу gb_show.exe. Какой именно способ указывать, зависит от программы gb_show.exe, которая будет обрабатывать вашу html-форму. В этом параграфе вы должны научиться создавать формы в html-документе. Их использовать вы сможете после установки и настройки веб-сервера, но об этом во второй части книги.

Внутри команды form могут быть следующие элементы:

поле ввода для строки поле ввода для пароля кнопки радиокнопки список поле ввода для текста checkbox - поле ввода для атрибутов типа Boolean рисунок

Создание "окошек"

Новости на главных страницах сайтов, сообщения в гостевых книгах часто оформляют в окошке. Такие окошки делаются при помощи таблиц. Вы устанавливаете cellspacing=0 и cellpadding=0, а далее делаем красивое окошко. Рамки являются ячейками и рядами. Вот пример:

Список

Список создается командой SELECT. Запись в списке создается командой OPTION. В команде OPTION обязательный атрибут value. Атрибут SELECTED указывает, что данная строка будет выбрана по умолчанию.

<SELECT NAME=list>

<OPTION value=1>one

<OPTION value=2>two

<OPTION value=0 SELECTED>zero

</SELECT>

one two zero

В команде SELECT могут быть атрибуты SIZE и MULTIPLE. SIZE задает размер списка на экране в строчках. Модификатор MULTIPLE указывает, что в данном списке можно выбрать несколько строк.

<SELECT NAME=list2 SIZE=3 MULTIPLE>

<OPTION value=1>one

<OPTION value=2>two

<OPTION value=0 SELECTED>zero

<OPTION value=10>ten

<OPTION value=11>11

</SELECT>

one two zero ten 11

Таблицы

Таблицы выполняют две функции. Первая - представление и оформление данных в виде таблиц. В этом случае таблицы, как правило, имеют видимые границы, иногда - рисунок в качестве заднего фона. Таблицы также являются главным элементом языка HTML, при помощи которого делается форматирование документа. В HTML нет команд, которые бы позволили сдвинуться на 5 миллиметров вправо или вниз. Такие команды есть в TeX'e. Например, для того чтобы на одном уровне разместить несколько элементов, используется таблица. В этом случае сама таблица, как правило, уже невидима для пользователя. Необходимо отметить, что таблицы не предназначались для форматирования HTML-документов. Верстальщики начали использовать таблицы, как инстумент форматирования, из-за отсутствия в HTML специально предназначенны для этого команд. Поэтому часто при верстке дизайна сайта возникают большие проблемы. Начало таблицы объявляется командой <table>, эта команда требует закрывающей части </table>. Новый ряд в таблице объявляется командой <tr>. Ячейка в ряду объявляется командой <td>. Для <tr> и <td> закрывающие команды необязательны.

Таблицы\листы каскадных стилей

С помощью стилей можно определить свойства объектов в HTML-документе. Под объектом следует понимать любой элемент: текст, гиперссылка, абзац, заголовок, рисунок, таблица и пр. Стили определяются для HTML-команд. Начнем с простого случая. Допустим требуется жирный текст белого цвета на голубом фоне. Используя язык HTML, вам пришлось бы написать примерно следующее:

Такой же результат можно получить, используя стили:

При помощи стилей можно свести на НЕТ и действие самой команды:

У большинства команд можно задать атрибут style. В качестве значения атрибута style указывается строка: "имя_свойства:значение; имя_свойства:значение; и т.д.". Обратите внимание, что двоеточие отделяет имя свойства от его значения, а точка с запятой отделяет пары свойство-значение. В самом конце точка с запятой не ставится. Здесь я привожу несколько наиболее часто используемых приемов задания стилей, полный список свойств и возможных значений смотрите в приложении к данной книге. В следующем примере показывается, как в абзаце установить картинку в качестве заднего фона и сделать текст синим.

<p style="background-image:URL(paper.gif); color:blue"> Абзац текста.<br> Новая строка. </p>

Абзац текста.

Новая строка.

Стили можно также определить на уровне документа, т.е. вы можете установить свойство HTML-команды, которое будет применяться ко всем объектам, созданным при помощи этой команды. Например, исходный код выводится при помощи команды <pre>. Вставив следующие строчки в заголовок HTML-документа, мы устанавливаем серый фон для этой команды.

<style> pre {background:#E5E5E5} </style>

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

<link rel=stylesheet href=/styles.css>

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

Другими словами, CSS представляет собой метаязык разметки текста. Вы можете определать\создавать новые команды\объекты. Очень часто CSS используется без явной на то необходимости. Например, в файле styles.css определяют свойства команды <body>:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}

Это совершенно пустое и неправильное использование CSS. Пустое потому, что эти свойства можно задать средствами классического HTML. Неправильное потому, что если броузер у пользователя старый и не понимает CSS, то пользователь увидит что-то непотребное. Вывод - свойства body надо прописывать в атрибутах этой команды, а не в стилях. Тогда возникает резонный вопрос: "А где же использование стилей является оправданным?". Ответ - в HTML-документах или сайтах, где есть объекты наделенные общими свойствами. Сразу надо заметить, что таких объектов должно быть несколько, т.е. они должны образовывать группу. Если у на сайте до 10 документов, то вполне можно обойтись без использования CSS. Но предположим у нас на сайте размещаются статьи. Статей много. Естественно, что заголовки статей, фамилии авторов, координаты авторов и сам текст статьи должны выглядеть одинаково. Если делать разметку средствами HTML без использования стилей, то в случае, если через год нам захочется изменить внешний вид заголовков статей, то придется исправлять все документы. Если же у нас будет файл стилей, то достаточно будет его подправить.

Самое главное правило, которое необходимо помнить разработчику - HTML-документ должен корректно отображаться в случае, если броузер пользователя не поддерживает CSS. Стили можно использовать, чтобы отменить подчеркивание у гиперссылок, которые находятся в меню сайта. Для этих гиперссылок подчеркивание не требуется, т.к. и так понятно, что это гиперссылки. В наших работах файлы стилей, как правило, очень небольшие. Лучшее, как известно, враг хорошего. В заключение приведу пример styles.css с сайта .

td { font-family: Arial; font-size:x-small} a.tm {font-family: Arial; text-decoration: none; font-size:xx-small; color: #000000} a.m {font-family: Arial; text-decoration: none; font-size:x-small; color: #4F5054} h3 {color:#566A89}

и навигационной карты добавить прямоугольную

---