Сайтостроительство

         

Формирование сообщества


На сайтах преследующих данную цель формируется сообщество людей, которые общаясь между собой, сами участвуют в развитии сайта. Примерами таких сайтов будут http://opengl.org.ru и http://perl.org.ru. Когда-то мы приложили определенные усилия к созданию этих сайтов. В настоящее время на этих сайтах сформировалось сообщество людей, которые постоянно их посещают.



Ftp


21й порт. Протокол служит для передачи файлов, поддерживает докачку фалов после разрыва связи. Информация передается в открытом виде.



Http


80й порт. Протокол передачи гипертекста. Собственно говоря, поэтому протоколу и передается вся информация с сайтов.



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


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

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>.
Примеры:

<a href=http://itsoft.ru title="Веб-студия ITSoft - веб-дизайн, программирование, базы данных, хостинг и регистрация доменов">Ссылка на мой сайт</a><br><br> <a href=ftp://itsoft.ru>Наш ftp-архив</a><br><br> <a href=http://mitme.ru target=_blank>А эта ссылка откроется в другом окне</a><br><br> <a href=mailto:igor@itsoft.ru>А вот так запустится почтовая программа, в которой вы сможете написать мне письмо</a><br><br> <a href="mailto:igor@itsoft.ru?subject=Поздравляем! &cc=itarasov@rtuis.miem.edu.ru&body=С выходом книги Основы OpenGL"> А вот так можно указать дополнительные параметры</a> <a href=#text>Ссылка на параграф "оформление текста" в этом же документе</a>

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

<a name=text> <h3>Оформление текста</h3>



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


h2>Пример

Исходный текст Результат в броузере
<font color=09AB12 size=5 >Цветной текст</font> Цветной текст
<b>Жирный текст</b> Жирный текст
<i>Курсив</i> Курсив
<u>Подчеркнутый</u> Подчеркнутый
<s>Перечеркнутый</s> Перечеркнутый
Ув<big>еличе</big>нный Увеличенный
Ум<small>еньше</small>нный Уменьшенный
Индекс<sup>вверху</sup> Индексвверху
Индекс<sub>внизу</sub> Индексвнизу
<tt>МоноШиринный WIWI</tt> МоноШиринный WIWI
А здесь <!-- Это<b> комментарий</b> он не воспринимается броузером<br> -->пишите что хотите А здесь пишите что хотите

Атрибут 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, поэтому, если вы хотите их использовать в качестве текста, то пишите

< &lt; Знак меньше
> &gt; Знак больше
  &nbsp; Пробел
& &amp; Амперсант
" &quot; Кавычка
© &copy; Знак копирайта
® &reg; Зарегистрированная торговая марка
£ &pound; фунт
&deg; Градус

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


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



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


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



Производная


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



Рисунки


Рисунки вставляются командой <img src=path_to_file>. Вставлять можно рисунки двух типов: jpg или gif. GIF-файлы могут быть анимированными. В gif-формате есть ограничение в 256 цветов. GIF-формат может быть 2х,4х,8ми, и т.д. до 256 цветовым. Он часто используется для хранения формул. В jpg формате обычно хранят фотографии. Путь к изображению может быть как относительным или абсолютным, так и URL. Также имеются следующие атрибуты:

width, height задают размеры рисунка. Если они не указаны, и броузер полностью не выкачал рисунок, то общее форматирование HTML-документа поплывет, поэтому всегда указывайте эти параметры. Если вы укажете значения, не соответствующие действительности, то рисунок будет отмасштабирован. border задает размер рамки, когда рисунок является гиперссылкой этот атрибут, как правило, приравнивают нулю, в противном случае будет видна рамка рисунка. alt задает текст, который будет всплывать при наведении мышки на рисунок. Этот атрибут полезен также в случае, когда клиент сидит на малоскоростной линии, и у него отключена загрузка рисунков. hspace, vspace определяют расстояние до ближайших соседних объектов по горизонтали и по вертикали. align - выравнивание применяется, когда рисунок обтекает текст. Возможные значения: left, rigth, top, middle, bottom.


Примеры:

<img src=igor.jpg width=360 height=288 border=1 alt="Моя фотография" hspace=50 vspace=5>

<img src=http://itsoft.ru/personal/igor2.jpg border=1 alt="Моя фотография" hspace=50 vspace=5>

Рисунки часто используют для гиперссылок меню. Для этого используется команда <a href=url><img src=url></a> Обязательно прописывайте атрибут alt.



Списки


Списки бывают трех видов: неупорядоченные, упорядоченные и списки определений. Рассмотрим их по порядку. Неупорядоченные списки создаются командой <ul>. Наличие закрывающей команды </ul> обязательно. Элементы списка создаются командой <li>. Эта команда не требует закрывающей части. У команд <ul> и <li> можно указать атрибут type, который принимает одно из трех значений: disc, square, circle.



Текстовые блоки


После того, как мы научились оформлять отдельные фразы и предложения, мы рассмотрим оформление текстовых блоков: заголовков, абзацев, листингов программ. Заголовки в тексте оформляются с помощью команд <h1>, <h2> ... <h6>. Они делятся на шесть уровней.

Например: <h1> Заголовок первого уровня</h1>.



В языке html имеются еще


Используя вышеприведенные команды, напишите html-код следующего текста: 1 2 3 4 5 6 7 В языке html имеются еще команды для оформления текста: em, strong, dfn, code, samp, kbd, var, cite. Многие из них я почти никогда не использовал, т.к. результат совпадает с уже рассмотренными командами. Но, в качестве упражнения, поэкспериментируйте с ними.






Возьмите какой-нибудь рисунок и сделайте html-документ, в котором текст будет обтекать этот рисунок.
В связи с обтеканием текстом рисунка необходимо отметить атрибут clear команды br. Проcто команда br прерывает текущую строку. Команда <br clear=all> делает разрыв текста до конца рисунка. В качестве примера см. .





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


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




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





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


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

<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>.

Например:

<p align=center>Текст, выровненный<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:

<html> <head> <title>Название документа</title> </head> <body> Hello, World! </body> </html>

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

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

<html> <head> <title>ITSoft - веб-дизайн, программирование, базы данных и хостинг.</title> <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> <meta name=keywords content="ITSoft, web design, веб-дизайн, дизайн, design, программирование, programming, базы данных, хостинг"> <meta name=description content="ITSoft: web design, database programming and Macromedia Flash"> </head> <body> Hello, World! </body> </html>
<
В случае, если ваш документ переехал по новому адресу, оставьте на старом месте HTML-документ со следующей командой в заголовке: <meta http-equiv=refresh content="0; url=http://адрес_страницы"> Это означет, что через ноль секунд загрузится новый документ. Вы можете указать и другое время, например, 10 секунд, чтобы пользователь успел прочитать какое-нибудь сообщение. Также вы можете поставить там ссылку на самого себя и указать время порядка нескольких минут. Например, так сделано на второстепенных страницах сайта http://molotok.ru. Ребята поставили время 180 секунд и тем самым накручивают показы баннеров. Тем самым, если вы читаете документ 9 минут, то за это время он успеет три раза перезагрузиться.

Команды link, style и script используются для подключения каскадных стилей и вставки JavaScript, поэтому они будут рассмотрены в главах CSS и JavaScript соответственно. Команда base задает базовый url, относительно которого будут рассчитываться относительные гиперссылки. Например, я хочу разместить содержания всех своих публикаций в одном месте, на своем главном сайте http://itsoft.ru. Ссылки у меня в содержании относительные, поэтому если я просто скопирую файл с содержанием книги об OpenGL c http://opengl.org.ru/books/open_gl/ в http://itsoft.ru/publications, то относительная ссылка на первую главу будет указывать на http://itsoft.ru/publications/chapter1.html. Получилось, что все гиперссылки стали неправильными. Я не хочу копировать всю книгу, мне нужно только содержание. Переправлять все ссылки тоже неудобно, там 8 глав и в каждой по 10 параграфов. Выход из создавшейся ситуации <base href=http://www.opengl.org.ru/books/open_gl/> Теперь относительная ссылка <a href=chapter1.html> указывает на http://www.opengl.org.ru/books/open_gl/chapter1.html.






Align


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



Alt


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

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



Background


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

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

<table align=center width=300 border=0 cellspacing=1 cellpadding=0 bgcolor=000000> <tr bgcolor=CCCCFF align=center> <td> 1 <td colspan=2> Эта ячейка находится в двух колонках <td rowspan=3> А эта ячейка - в трех рядах <tr bgcolor=EEEEEE> <td> Иванов <td> Иван <td> Иванович <tr bgcolor=CCCCCC> <td> Петров <td> Петр <td> Петрович </table>

1 Эта ячейка находится в двух колонках А эта ячейка - в трех рядах
Иванов Иван Иванович
Петров Петр Петрович



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>


От группы радиокнопок на сервер посылается пара name=value, в нашем случае это smile=icon1.gif. Если вы переставите точку на другую кнопку, то соответственно value изменится. В одной форме может быть несколько групп радиокнопок. Радиокнопки группируются на основании поля name. Если вы хотите заранее пометить какую-то кнопку, как отмеченную, то поставьте ей атрибут checked. См. самую первую строчку в примере.









































Такие радиокнопки используются в форумах и гостевых книгах, см. .


Rules


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

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

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

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

<table align=center width=300 height=200 border=5 bordercolor=0000FF cellspacing=10 cellpadding=30 background=07.jpg title="Всплывающая подсказка для данной таблицы"> <tr><td> 1 <td> 2 <tr><td> 3 <td> 4 </table>

1 2
3 4

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



<table align=center width=300 border=1 cellspacing=0 cellpadding=0> <tr bgcolor=CCCCFF> <td> Имя<td> Фамилия <tr bgcolor=EEEEEE> <td> Иван<td> Иванов <tr bgcolor=CCCCCC> <td> Петр<td> Петров </table>

<br>

<table align=center width=300 border=0 cellspacing=1 cellpadding=0 bgcolor=000000> <tr bgcolor=CCCCFF align=center> <td> Имя<td> Фамилия <tr bgcolor=EEEEEE> <td> Иван<td> Иванов <tr bgcolor=CCCCCC> <td> Петр<td> Петров </table>

Имя Фамилия
Иван Иванов
Петр Петров
Имя Фамилия
Иван Иванов
Петр Петров
Теперь давайте рассмотрим атрибуты команд <tr> и <td>


Shape


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

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



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


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

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

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

<form method=POST action=/cgi-bin/gb_show.exe> <input type=text name=text value="Значение по умолчанию" size=40> <input type=submit value=Опубликовать> </form>

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

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

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



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


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

<table align=center width=300 border=0 cellspacing=0 cellpadding=0 bgcolor=000000> <tr bgcolor=CCCCFF> <td colspan=3> Тема новости

<tr bgcolor=EEEEEE> <td width=2 bgcolor=CCCCFF> <td> Вчера завершил работу над третьей главой книги. <td width=2 bgcolor=CCCCFF> <tr bgcolor=EEEEEE> <td width=2 bgcolor=CCCCFF> <td > 10 декабря 2000 <td width=2 bgcolor=CCCCFF> <tr bgcolor=CCCCFF> <td colspan=3 height=2> </table>

 Тема новости

Вчера завершил работу над третьей главой книги.
10 декабря 2000



Список


Список создается командой 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, вам пришлось бы написать примерно следующее:

<table bgcolor=blue cellpadding=0 cellspacing=0> <tr><td> <b><font color=white>жирный текст белого цвета на голубом фоне</font></b> </table>

жирный текст белого цвета на голубом фоне

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

<b style="background:blue; color:white">жирный текст белого цвета на голубом фоне</b>
жирный текст белого цвета на голубом фоне

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

<b style="font-weight:normal">жирный</b>
жирный

У большинства команд можно задать атрибут 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}

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


Для вышеприведенного изображения и навигационной карты добавить прямоугольную область для заголовка "ОЛИМПИАДА". Ссылку поставить на сайт .

Напишите HTML-код для следующей таблицы. В качестве подсказок я указал номера рядов и ячеек. Попробуйте реализовать это несколькими вариантами различного кода. Подсчитайте, сколько всего существует различных вариантов.
1_1 1_2 1_3 1_4
2_1 2_2
3_1 3_2 3_3 3_4 3_5
4_1 4_2 4_3 4_4
5_1 5_2 5_3 5_4
6_1 6_2

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