Начинающим WEB-мастерам

Выбрать:

Начинающим ...

От автора:

Предисловие

Итак, Вы желаете сделать полезный, красивый и удобный сайт. Что же для этого нужно? Какие факторы влияют на популярность web-сайта? С чего лучше всего начать создание собственного сайта? И какие ошибки могут подстерегать на этом пути?
www.webclub.ruпопробовал выделить основные причины, которые влияют на популярность сайта:Содержание или контент - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Вспомните, как много полезных страничек Вы видели в последнее время по сравнению с общим количеством посещенных Вами мест?Дизайн- вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т.е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Ведь если Вам очень понравился дизайн сайта, то Вы, наверняка, расскажете о нем своим друзьям. Не забывайте, что встречают-то по одежке. Для того, чтобы сделать хороший сайт, не обязательно даже использовать графику. Есть полезные сайты с минимумом графики (или даже без оной) и масса бесполезных, забитых мегабайтными картинками. Для web-сайта, как впрочем, и для других дизайнерских проектов, очень важным является стиль сайта, придающий ему собственное лицо и узнаваемость. Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Отсюда следует вывод - странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Раскрутка web-сайта - включает в себя не только регистрацию Вашего сервера во всех возможных Поисковых системах мира, но и такие средства, как размещение информации в средствах массовой информации (URL - в газете), а также упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т.д. Кроме этого, на web-сайте обязательно должен быть упомянут E-mail для связи с Вами или, в случае его отсутствия, хотя бы номер телефона. Ясная и логическая структура размещения информации на Вашем сервере - ничто так не утомляет при поиске нужной информации, как плохо структурированные сервера. Отсутствие орфографических и грамматических ошибок - этот пункт я включаю сюда ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Ведь это просто - набивайте текст в редакторе с проверкой орфографии и перечитывайте то, что Вы написали перед выставлением Вашего сервера на всемирное обозрение.Вот, пожалуй, и все основные принципы, соблюдение которых гарантирует успех Вашему WEB-сайту, а через него - и благополучие, и расширение известности Вас, Вашей фирмы, клуба, движения.1.1. Цель и место размещения документа Web

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.
Иными словами, средства, предназначенные для работы с Сетью, стали использоваться и в других целях, с нею не связанных, а среди программного обеспечения, устанавливаемого на большинство персональных компьютеров, приложения для Internetзаняли свое почетное место.

В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства.

1.2. Сценарий и структура Web-документа.

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

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

Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде всего это <HTML></html>

Также основным тегом является <HEAD></head>

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа.

<BODY></body>

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

Без этих тегов невозможно создать ни одну Web-cтраницу. Более подробно эти и другие теги мы рассмотрим в параграфе 2.1.

2.1. Структура текста Web-документа

ЕWeb-страниц, можно сли сравнить исходные тексты различных легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.

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

<COMMENT> Комментарий к документу </comment>

<HTML>

<HEAD>

<TITLE> Структура Web-страницы</title>

<STYLE> H2 {font-family: Arbat;}

CODE {font-family: Arbat;} </style>

<META

name=’’Author’’

content=’’Irina’’>

<META

name=’’Keywords’’

content=’’WWW, HTML, document, element’’>

</head>

Переход в <A href=’’#bottom’’> конец </a>документа <P>

Переход к <A href=’’#S001’’><B> ссылке 1</b></a><P>

<P>

<HR>

<H1>Заголовок1<h1>

<H2>Заголовок2<h2>

<H3>Заголовок3<h3>

<H4>Заголовок4<h4>

<H5>Заголовок5<h5>

<H6>Заголовок6<h6>

<HR>

Здесь расположена <B>ссылка 1</b><A name=’’S001’’></a>

<HR>

<P>Здесь должен располагаться оригинальный текст Web-страницы

<HR>

Переход в <A gref=’’top’’> начало </a>документа

</body>

</html>

Текст комментария. В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле - не исключение. Текст, помещенный внутри COMMENT, игнорируется броузером[1]. COMMENT может располагаться в любом месте кода Web-страницы. Без конечного тега[2], здесь по-видимому не обойтись: комментарий должен быть отделен от основного текста.

Существует, правда, одно ограничение: внутри комментария не должны располагаться другие элементы[3]. Так должно быть, разумеется, только в том случае когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора. Если в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом. С этой проблемой связана другая, похожая: обычный текст не может содержать фрагменты, имеющие вид тегов. Для того чтобы включать в текст подобные конструкции, существует элемент PLAINTEXT, о котором речь пойдет ниже.

Существует и другой способ обозначения комментария. Он заключается в использовании восклицательного знака и обрамлении текста комментария двойным тире. Например:

Внутри подобной конструкции можно помещать и теги: они не будут восприниматься броузером.

Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты[4] version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html>заканчиваются все гипертекстовые документы.

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна броузера. Эта особенность часто используется для организации поиска в WWW[5]. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.

Описание стиля некоторых элементов Web-страницы. В выше приведенном примере назначены шрифты для элементов Н2 и CODE. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE не обязательно.

<META>

Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент META содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание. Далее приведены несколько примеров meta-данных.

Дата, обозначающая «срок годности»документа:

name=’’Expires’’ content=’’Дата’’

Адрес электронной почты:

name=’’Reply-to’’ content=’’Имя@Адрес’’

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

name=’’Generator’’ content=’’Название HTML-редактора’’

Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.

Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:

URL=’’http://адрес’’

Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:

background=’’Путь к файлу фона’’

Более простое оформление фона сводиться к заданию его цвета:

bgcolor=’’#RRGGBB’’

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

Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.

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

text=’’#RRGGBB’’

Для задания цвета гиперссылок[6] используется атрибут:

link=’’RRGGBB’’

Также можно задать цвет для использованных гиперссылок:

vlink=’’RRGGBB’’

Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.

<A></a>

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

В этом случае для перехода внутри документа можно использовать следующую конструкцию:

<P>Переход к <A href=’’#Метка’’>метке</a></p>

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

<BASE>

Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Для использования элемента необходима следующая конструкция:

Фрагмент путь1 не является обязательным. При форматировании полного адреса он будет отброшен.

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

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

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

Другие конструкции мы рассмотрим ниже.

[1] Броузер (browser) - программа для просмотра Web-страницы

[2] Тег (tag) - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

[3] Элемент (element) - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любой Web-документ представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.

[4] Атрибут (attribute) - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой присваивается определенный набор значений: стандартных или произвольных. Атрибуты располагаются внутри стартового тега и отделяются друг от друга пробелами.

[5] WWW, World Wide Web - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Internet.

[6] Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

2.2. Гипертекстовые ссылки

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

<A></a>

Чаще всего используется такой шаблон:

Произвольный текст <A href=’’Адрес ссылки’’>текст для щелчка</a>

Или такой:

<A href=’’Адрес ссылки’’> <IMG src=’’Ссылка на рисунок’’></a>

Первый шаблон применяется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Internet, файл на локальном диске или метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. Именно на нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на рисунок, который находиться на локальном диске, она обязательно должна начинаться со слова «file», то есть содержать указание на схему доступа:

file://Диск:\Путь к файлу

или

file:///Диск:/Путь к файлу

Подобно многим другим элементам языка, элемент А требует использование атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:

href=’’URL’’

или

href=’’Протокол://Адрес ссылки’’

Например:

href=’’http://www.netscape.com’’

Кодовое слово, стоящее вначале URL[1], обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из «разновидностей» Internet. В этом смысле можно сказать, что Internet - это как бы несколько сетей в одной. У каждой из них существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Их можно использовать для связи голосом, передачи факсов, межкомпьютерной связи и т. д.

WWW, как самая современная система, должна обеспечивать совместимость с более ранними, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например, ftp). Существуют следующие схемы доступа:

file - доступ к файлу на локальном диске;

ftp - доступ к архивам файлов при помощи протокола передачи файлов ( file transfer protocol);

gopher - доступ к системе Gopher;

http - доступ к WWW;

mailto - отправка сообщений по электронной почте;

news - доступ к новостям USENET;

nntp - доступ к новостям USENET с использованием протокола NNTP;

telnet - подключение по протоколу telnet;

wais - подключение к системе WAIS.

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

<A href=’’mailto:styp@belpak.brest.by’’></a>

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

<A name=’’Метка’’></a>

[1]URL (Uniform Resource Locator) - адрес некоторого объекта в Internet

Продолжение следует

Эта страничка посвящена начинающим WEB-"гигантам".
Она заполнена информацией(азами), которую должен знать каждый,
дабы повысить и/или закрепить свою квалификацию в Web-ремесле.

Материал на эту тему по-круче вы можете найти на
www.webclub.ru
(Мой любимый сайт:)

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

Вкачестве упражнения попробуйте пройтись в WEB и посчитать время на загрузку различных страничек, а также обоснованность их загрузки (исходя из содержания). Посмотрите, насколько понятна структура сервера и удобство пользования им.

Тег - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки,. А конечный всегда снабжается косой чертой

^{Hack-Новости}^|^Ne^www^s^|^{И-нетский
юмор}^|^F.A.Q^|^Ссылки^|^Хозяин^|^{Фан-клуб}^{*** |}^{Гостевая
книга}^|^{На главную}^|^Чат^{| ***}

^{Мои
почтовые ящики:}^{STYP@belpak.brest.by}^{STYP@i-connect.csom}