Среда, 15.05.2024, 08:31 Приветствую Вас Гость

Одна КОМАНДА

Меню сайта
Категории каталога
Сооздание сайта [6]
материалы и статьи по созданию сайтов своими ручками
Категория Сайтостроение [0]
описание категории сайтостроение
Главная » Статьи » Что нам стоит сайт построить » Сооздание сайта

САЙТОСТРОЕНИЕ (часть 3)
ЗНАКОМСТВО С HTML

   По моему мнению, язык HTML - самый легкий из всех языков программирования, самый усвояемый. Это объясняется, во-первых, тем, что его можно осваивать постепенно, по мере необходимости или желания усложнять свои творения. Во вторых - тем, что каждый шаг в создании страницы можно контролировать, просматривая результат в окне браузера и оперативно внося исправления. И в третьих - наличием таких редакторов, как SNK Visual HTML Workshop. Но, несмотря на всю его легкость, для того, чтобы с ним работать, нужно познакомиться хотя бы с его основами.
   HTML-документы или WEB страницы, как Вам удобнее, строятся при помощи слов-тегов. Теги являются командами браузеру, указывающими, что необходимо сделать с материалом внутри тега. Браузеры распознают теги по наличию угловых скобок < и &gt. То есть, все, что находится между такими скобками, воспринимается браузерами, как руководство к действию. Правда, если браузер встречает незнакомый ему или неправильно записанный тег, он его игнорирует молча, нисколько не задумываясь над тем, что же Вы ему хотели скомандовать.
   Теги бывают двух типов: теги-контейнеры и теги-команды. Теги-контейнеры состоят из двух частей: открывающей и закрывающей. В открывающую часть кроме названия тега включаются при необходимости параметры тега, закрывающая часть обозначается прямой дробной чертой, стоящей внутри угловых скобок перед названием тега. Между открывающей и закрывающей частями находятся данные, которые будут выводиться на экран. Например, тег, говорящий браузеру о том, что ему необходимо построить таблицу выглядит так: &ltTABLE (параметры таблицы)>данные, которые мы хотим показать в таблице </TABLE>. Некоторые теги-контейнеры не требуют закрывающей части. Теги-команды состоят из одной части. Например, тег &ltBR> говорит браузеру, что в этом месте необходимо перевести строку.
   Как правило, HTML-документ содержит в себе как минимум три обязательных тега:
  1. тег &ltHTML></HTML>, внутри которого размещается весь документ. Этот тег говорит браузеру о начале и конце документа. На самом деле браузер (во всяком случае Internet Exploper) принимает документ за свой даже в случае, если в нем вообще нет никаких тегов, а в названии есть расширение .html . В этом Вы можете убедиться, посмотрев этот пример.
  2. тег &ltHEAD></HEAD> - "заголовок", внутри которого размещается служебная информация для браузера
  3. и
  4. тег &ltBODY> </BODY> - "тело", внутри которого размещается все, что Вы хотели бы показать людям.
   Вот так выглядит HTML-код простейшего документа в окне редактора:
&ltHTML>
&ltHEAD> здесь помещается служебная информация для браузера, поисковых машин и прочая
</HEAD>
&ltBODY> здесь - информация, которую Вы хотите показать </BODY>
</HTML>
, а вот так - этот документ выглядит в окне браузера.
   Кроме того, вначале документа, перед тегом &ltHTML>, помещается строка, содержащая информацию о версии HTML. Например, для документа, который Вы читаете, такая: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   Эти теги обязательны для документов, которые Вы желаете разместить в интернете. В файлах для "внутреннего употребления" они совсем не нужны. Например, в моих папках лежит несколько HTML-файлов с адресами серверов почтовых рассылок, досок обьявлений и т.д. Очень удобно - открываешь такой файл, кликаешь по ссылке - и ты уже на нужной тебе странице интернета. Что-то типа избранного, но во многих случаях удобнее тем, что в таких файлах можно добавить сколь угодно длинный комментарий к любой ссылке.
   По ходу наших занятий я расскажу о применении многих самых употребляемых при создании страниц тегов. Как я уже упоминал, язык HTML довольно молодой и бурно развивающийся. О его бурном развитии говорит уже то, что новые версии, исправленные и дополненные, появляются каждые 2-4 года. Рассказывая об использовании тегов, я буду пользоваться в основном спецификацией HTML 4.0. Полностью ее можно найти здесь.
   Теперь у нас есть все, чтобы приступить к делу - созданию самой страницы. Но прежде, чем создавать ее "в натуре", необходимо представлять, что же мы будем делать, как будет выглядеть страница. Поэтому поговорим немного о стилях.

НЕМНОГО О СТИЛЕ

   В этой статье я позволю себе немного порассуждать о внешнем виде сайта или странички. Это именно рассуждения, выражающие мое личное мнение и не несущие никакой учебной или даже рекомендательной нагрузки. Кто-то, прочитав, согласится, кто-то пожмет плечами, а кто-то скажет: - "Какая глупость!" Сколько людей, столько мнений, а о вкусах, как говорится, не спорят.
   Много раз я встречал в интернете сайты, на которых рассказывают, каким должен быть дизайн или каким он не должен быть. По моему мнению, нужно быть очень самонадеянным человеком, чтобы утверждать: "Я знаю, как должно быть! И должно быть только так!"
   Все сайты представленные в сети имеют право на существование, раз они прошли проверку у провайдера и выставлены на всеобщее обозрение, а если они никому не нужны и не интересны, на них просто никто не придет! Одно из достоинств интернета (а по-моему - одно из главных) - его демократичность. Никто не принуждает смотреть то, чего ВЫ не хотите. А если все-таки на Вас неожиданно выскочит "самооткрывающееся" окно с какого-нибудь сайта - поместите его в свой черный список! У разных людей были разные причины для создания именно таких сайтов, какими мы их видим. Это их право, но постольку, поскольку сайты и страницы выставлены на наше обозрение, мы имеем право высказать свое мнение о них. Я не делю сайты и страницы на хорошие и плохие. Есть сайты, которые мне нужны, потому что на них находится информация, которую я искал, и есть сайты меня не интересующие. Есть сайты, с которых удобно брать информацию и есть - с которых не очень. Это оценка так сказать, "полезности". Но мы сейчас говорим о стиле исполнения.
   Так вот - я делю все сайты на пять категорий. Деление, конечно, чисто условное и субъективное, да и границ между категориями не существует. Это как в радуге: мы выделяем и называем всего семь цветов из всей палитры.
    К первой категории в моей классификации относятся сайты, сделанные по принципам "шоб було" , "и так сойдет". Информации нет или очень мало, внешний вид слеплен из шаблонов или на скорую руку на WYSIWYG-редакторе.
   Следующая категория - сайты-красавцы. Они имеют исключительно привлекательный внешний вид, все элементы и их расположение продуманы очень тщательно, но в них нет никакой информации. Мне, например, встречался сайт одной финской компании, довольно солидной, надо сказать, в котором было четыре страницы-картинки. На первой было название фирмы, ее адрес и ссылки на три другие страницы. На остальных страницах были имена, фамилии и контактные данные хозяина фирмы и двух должностных лиц (на каждой странице по одной персоне). И все! Посещать такие сайты можно как картинную галерею: часами рассматривать, отдыхать, думать, пытаться понять, какие мысли и чувства вложил автор в это произведение искусcтва (или, если у Вас другой склад хaрактера - какими средствами он добился того или иного эффекта).
   Затем идут информационные сайты. Оформлены обычно без претензий. Очень много полезной информации, но порой бывает трудно найти ее в переплетении страниц. Особенно, если сайт большой, а навигация не очень продумана. Иногда бывают перегруженные информацией, как например, стартовая страница известного игрового сайта Loto.ru. Понятно, что хочется показать все сразу, но в одну страницу все равно никакой сайт не поместится.
   Сайты-сюрпризы и сайты перегруженные графикой и всякими премудростями. Зайдя на такой сайт никогда не знаешь, что тебя ожидает через секунду. Вдруг может открыться еще пару дополнительных окон - совсем с не интересующей тебя тематикой или на другом языке. Сама страница, даже если ты ее внимательно читаешь, через N секунд вдруг может пропасть и смениться новой (автор почему-то решил, что раз я не вожу мышкой по странице несколько секунд, она мне неинтересна. А у меня просто кофе кончился или я пытаюсь поглубже вникнуть в суть страницы). Или вдруг на тебя выпрыгивает какой-нибудь рекламный баннер, как было на Mail.ru перед сменой дизайна (оказывается, до сих пор еще выпрыгивает). Очень удобно - изучаешь папку входящие, прикидываешь, какое письмо открыть первым, но не долго - через пять секунд тебе вместо писем предлагают пиво, или еще что. Хорошо еще, если авторы баннера отметили большими буквами кнопку "убрать", а другой раз сразу и не сообразишь. Хоть кричи: не хочу пива! Да я уверен, Вы и сами можете привести кучу примеров на эту тему.
   И наконец - Сайты-шедевры, в которых исключительно продуманный и привлекательный внешний вид, удобная навигация, отсутствие всяких заморочек типа выскакивающих вдруг подменю, мигающих баннеров и прочая, сочетается с функциональным наполнением. Конечно, такие сайты редко создаются в одиночку любителями-дизайнерами. Как правило, такие сайты - произведения WEB-студий, где трудятся профессионалы. В качестве примера можно привести сайт магазина Digita.
   Еще есть сайты вне категории, которые, по моему мнению, смотреть очень трудно или вообще невозможно. Что Вы скажете о странице, оформленной в таком, например стиле:

ВНИМАНИЕ

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

ПЛАН

   Прежде, чем воплощать страничку "в битах и байтах", неплохо было бы представить, какой Вы ее хотите видеть. А еще лучше сделать эскиз на бумаге или в том же "Paint"-e, если Вам удобнее и привычнее делать это на компьютере. Продумать план страницы до начала ее создания необходимо по той простой причине, что переделывать уже сделанное всегда хлопотнее, чем сделать сразу правильно. С другой стороны, иногда очень трудно предугадать заранее, в каком направлении пойдет развитие сайта, поэтому никогда не стоит исключать необходимости полной перестройки сайта. Учитывая, что это Ваш первый опыт создания страницы, очень трудно рассчитывать, что все получится идеально и переделывать или хотя бы добавлять что-то не придется. Но начинать все ровно придется с плана.
   Составление плана можно и даже нужно разбить на два этапа:
  1. Планирование сайта в целом.
  2. Планирование отдельных страниц.
   Планирование сайта в целом. Здесь Вам необходимо представить, из каких разделов будет состоять Ваш сайт, какие страницы в него будут входить. Предположим, что Вы собираетесь делать сайт об автоспорте. В таком случае, наверно, будет целесообразно сделать разделы "История", "Ралли", "Формула-1" и т. д. В каждом из этих разделов могут присутствовать свои подразделы, в которых материал будет сгруппирован по фирмам, участвующим в соревнованиях, или по гонщикам, или по годам, в зависимости от направленности Вашего рассказа. Кроме того, видимо нужно сделать заглавную страницу, которая будет загружаться первой и рассказывать посетителям, что это за сайт, о чем здесь речь и как найти интересующую информацию. Здесь же нужно продумать навигацию по сайту, то есть спланировать, как посетитель будет перемещаться со страницы на страницу. Здесь возможны варианты. Например, Вы помещаете на главной странице меню или оглавление, где даны ссылки на все страницы Вашего сайта, что бы посетитель мог сразу перейти на интересующую его страницу, или на главной странице будут ссылки только на разделы, а внутри разделов - на отдельные страницы. Это как Вы считаете нужным. Сейчас стало модным делать карту сайта, но об этом мы будем разговаривать позже.
   Планирование отдельных страниц. После того, как составлен план сайта в целом, нужно продумать, как будут выглядеть отдельные страницы. Я неоднократно встречал высказывания, что сайт, у которого все страницы оформлены в одном стиле, смотрится лучше. Это дело вкуса, но бесспорно, что такой сайт делать проще. Во-первых, не надо ломать голову над оформлением каждой странички и во-вторых, можно использовать шаблоны и не набирать повторяющиеся детали каждый раз заново. Представьте, какой бы Вы хотели видеть свою страницу, какие будут заголовки , рисунки, где будут навигационные ссылки на другие страницы Вашего сайта, будут ли они текстовыми или в этом качестве будут выступать какие-нибудь картинки. На каком Фоне будет подаваться информация? Будет ли фон однотонным, как на этой странице или Вы используете фоновый рисунок? Сразу скажу, что использование фоновых рисунков увеличивает время загрузки страницы, но подробнее об этом позже.
   Даже если Вы делаете скромную личную страничку, Вам будет интересно, заходят ли на нее посетители, а значит, Вам нужно будет поставить счетчик хотя бы одного из рейтингов. Для него тоже необходимо предусмотреть место. Такие счетчики, как правило, имеют вид кнопки размером 88 на 31 пиксел и располагать их желательно вначале страницы. Это делается для того, чтобы счетчик загружался первым и срабатывал, даже если посетитель не дождался полной загрузки страницы. Правда, некоторые рейтинги предлагают вначале страницы ставить невидимый счетчик размером 1 на 1 пиксел, а рекламную кнопку в таком случае можно поставить в любом удобном для Вас месте. Но на странице она все равно должна присутствовать. Кроме того, если Вы будете пользоваться услугами бесплатного хостинга, что вполне оправданно, во всяком случае, на время обучения и экспериментов, на Вашу страницу обязательно повесит баннер владелец хостинга. На "народе", например, этот баннер размером 120 на 120 пиксел располагается в правом верхнем углу, как Вы можете видеть. На hut.ru баннер побольше - 468 на 60, но вешают его аккуратно, не закрывая Вашу информацию. На других серверах бесплатного хостинга тоже в долгу, безусловно, не остаются. Это плата за бесплатность. О преимуществах того или иного бесплатного хостинга мы еще поговорим, но место под их баннер оставить нужно.
   Нужно сказать, что язык разметки гипертекстов HTML позволяет воплотить в жизнь, вернее - в интернет, любую страницу, так что можете отпустить свою фантазию в свободный полет и ничем ее не ограничивать. Формировать или верстать страничку можно двумя способами: с помощью фреймов и с помощью таблиц. Правильнее даже будет сказать, что при формировании странички можно употреблять фреймы, а можно обойтись одними таблицами. Иногда фреймы позволяют сформировать страничку более компактно и удобно, но работать с ними сложнее и мы пока их рассматривать не будем. Тем более, что подавляющее большинство сайтов сделано без них.
   Ну, а пока в голове зреют планы сайта и страниц, займемся вещами более прозаическими, но не менее важными и рассмотрим, из чего же состоит заголовок HTML-документа.
Категория: Сооздание сайта | Добавил: odnakomanda (06.08.2008)
Просмотров: 1055 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Поиск
Друзья сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyCorp © 2024 Сайт управляется системой uCoz