Когда создавалась эта рубрика, мы предполагали, что здесь речь пойдет только о создании игр. Однако читатели регулярно просят нас не ограничиваться игроделанием и рассмотреть другие виды творчества. Чаще всего речь идет о создании карт или модулей для той или иной игры — и интернет-сайтов, в частности — фан-сайтов игр. Первой из этих тем мы еще посвятим немало статей, а пока займемся второй.

О чем эта статья

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

Но...

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

Другими словами, эта статья — самый начальный учебник по созданию сайтов. Он не вдается в вопрос «почему», он рассказывает только, «как». Тем, кто уже сделал первые шаги в этой области, она не пригодится; но для них мы планируем опубликовать еще несколько статей на тему разработки веб-сайтов.

Как сверстать сайт

Большинство информации в Сети содержится в формате HTML (hypertext markup language). HTML — это текст, который содержит определенную разметку, то есть специальные команды, определяющие:

шрифты, абзацы, таблицы, списки;

фоны, вставку картинок и других материалов;

ссылки на другие страницы, пометки в тексте и файлы.

Кроме того, у HTML должен быть заголовок, содержащий ключевую информацию о странице: название, автор, ключевые слова (по которым ее потом найдет поисковик), кодировку.

Обычно авторы учебников, особенно старых, рекомендуют взять обычный текст и вставлять в него руками нужные команды разметки. Это, в принципе, правильно, чтобы привыкнуть воспринимать разметку на глаз; однако на сегодняшний день существует немало программ, которые позволят сверстать текст в визуальном режиме, примерно так, как вы расставляете форматирование в Microsoft Word.

Это важно: хотя сам Microsoft Word тоже умеет сохранять HTML, то есть вордовский файл можно напрямую сохранить в виде веб-страницы, делать это ни в коем случае не нужно. Дело в том, что Word сохраняет в файле кучу ненужной информации, из-за чего страница грузится потом медленно и печально. Так, например, текст этой статьи — без единой картинки! — занимает в такой конвертации больше 200 килобайт.

Некоторые из таких редакторов вы найдете на нашем диске в разделе «Полезные программы». В них можно сразу посмотреть, какой результат даст та или иная разметка.

Это важно: бывают еще так называемые веб-конструкторы, во многом похожие на редакторы HTML, но работающие непосредственно в окне вашего браузера: их можно найти на многих порталах, где раздают бесплатные доменные имена и место под странички — например, narod.ru. Но пользоваться этими инструментами я тоже категорически не рекомендую: в них сделано все, чтобы ваш сайт навсегда остался на этом сервере. А вы уверены, что этого хотите? Не исключено, что через некоторое время тамошние условия начнут «жать в плечах». Если ваш сайт когда-либо перерастет статус «домашней странички» и станет популярным и посещаемым, на таких порталах ему будет уже не место.

Формат команды HTML

Большинство команд HTML — так называемых «тэгов» — имеет вид: собственно команда в угловых скобках — текст, подлежащий обработке командой — закрывающая команда. Иногда хватает первой части — собственно команды.

Например, — команда курсива; что-то там такое приведет к появлению текста «что-то там такое» курсивом. показывает конец курсивного фрагмента.

Вообще, название команды, перед которым стоит знак /, всегда показывает конец ее зоны действия.

Команды могут быть вложенными; например, что-то там такое приведет к такому результату: «что-то там такое»

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

«Сайт журнала ЛКИ вы найдете здесь.»

Результат будет выглядеть так:

«Сайт журнала ЛКИ вы найдете здесь.» Ссылка будет вести на www.lki.ru.

Подробнее обо всех важнейших командах вы прочтете ниже.

Заголовочная часть

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

Title — собственно заголовок — это то, что будет писаться в верхней строчке Internet Explorer, Mozilla или чем там пользуется читатель вашей странички.

Author — автор помещенного текста. Думаю, пояснять не надо.

Keywords — ключевые слова — слова, по которым в первую очередь будет находиться ваша страничка. Правильно их расставив, вы обеспечите скорейшее нахождение вашего сайта поисковиками. Для них ключевое слово, указанное здесь или в заголовке, важнее, чем в тексте страницы. Например, если вы делаете сайт по игре Starcraft, пусть первым ключевым словом будет starcraft; можно добавить (по-русски и по-английски) зергов, протоссов и так далее.

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

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

Такие общие слова, как, например, «игры», большого смысла в качестве ключевых не имеют. Если верить Google, их в интернете около 4 миллионов. Только в сочетании с чем-то еще.

Это важно: в любом случае большинство поисковиков обнаружит вашу страницу не сразу. Так что не удивляйтесь, что «я еще вчера поставил страницу в Сеть, а Яндекс ее все не находит!».

Еще в заголовочной части нередко определяется фон (bg, background).

Разметка

Разметку принято делить на два вида: логическую и физическую.

Например, вам нужно сделать перед текстом крупный заголовок. Вы можете указать, что его надо делать жирным шрифтом Arial размером 28 — это будет физическая разметка (вы явно указываете, как должен выглядеть текст в итоге). Можно просто сказать, что это «заголовок первого уровня» — тогда его автоматически покажут крупным, подходящим для заголовка шрифтом, причем более крупным, нежели заголовок второго уровня. Это — логическая разметка.

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

У логической — те преимущества, что ее гарантированно будет хорошо видно при любых настройках компьютера пользователя, даже в варианте «для слепых» или на древнем текстовом мониторе. Что, может быть, еще важнее, текст с логической разметкой легко структурируется (можно получить, например, оглавление). Физическая гарантирует, что пользователь увидит страницу именно так, как задумывал автор — или никак; некоторые «навороченные» дизайны сразу распадаются при необычных настройках компьютера.

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

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

В этом варианте вся разметка делается на логическом уровне, но существуют специальные стилевые файлы — .css, которые определяют, как в данном конкретном документе должны выделяться заголовки и так далее. Если человеку невмоготу смотреть на ваши шрифты и раскладку — он волен стили запретить, а обычный пользователь увидит страницу так, как вы ее задумывали. Можно включать стили и внутрь кода странички — ряд редакторов это делает.

Для ходовых стилей — заголовки, обычный текст — вы сможете определить там тип, размер, цвет шрифта, параметры абзаца (выравнивание, отступ). В общем, все то же самое, что заключено в разделы «Формат / Шрифт» и «Формат / Абзац» MS Word. Упомянутые редакторы программ очень просто и интуитивно редактируют стилевые файлы, так что не буду подробно на этом останавливаться; скажу только, что надо не забыть вписать в заголовок вашей странички использование этого файла.

Основные команды

Абзацы и разделители

Стандартный абзац заключается в тэг

. Его нужно завершать

.

Например:

Товарищ, верь, взойдет она,

Звезда пленительного счастья!

Если вы не поставите знаков

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

Товарищ,

верь,

взойдет она,

Звезда

пленительного

счастья!

— он будет отображаться в экране браузера точно так же. Концы абзацев — только по тэгу

.

На заметку: хотя многие браузеры, например — Internet Explorer, поймут ваш код, даже если абзац не будет заканчиваться

, пользоваться такой «сокращенной» формой не следует. У ряда браузеров она порождает глюки. Да и зачем бы? Неужели лень написать 4 знака —

?

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

Здесь "имя_класса" — это имя, которому в вашем стилевом файле соответствует какой-то способ отображения, шрифт, цвет и так далее.

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

Можно назначить конец строки и без конца абзаца — это делает тэг
.
— это просто перевод строки, безо всяких дополнительных эффектов.

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

Еще один разделитель —

---

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

Заголовки

Самый характерный случай «особого» абзаца — заголовок или подзаголовок. Для них существуют особые тэги:

,

,

и так далее (как в MS Word — стили «Заголовок 1», «Заголовок 2» и так далее). Например:

Глава первая

Цифра после буквы h — это так называемый «уровень заголовка».

Посмотрите на эту статью. Слова «Как сверстать сайт» — заголовок первого уровня, «Разметка» — второго, «Заголовки» — третьего. По умолчанию заголовки автоматически отображаются так, чтобы первый уровень был самым крупным, второй — помельче, и так далее.

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

Не стоит использовать заголовки ниже 3-4 уровня — столько уровней текста плохо воспринимается на глаз.

Шрифты

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

Раньше считалось правильным применять и здесь логический метод, например, тэг показывал «усиление» шрифта. Но сейчас понемногу пришли к выводу, что жирный шрифт и курсив можно и нужно показывать напрямую; для этого служат уже продемонстрированные вам в главе «Формат команды» тэги (жирный шрифт) и (курсив).

На заметку: жирный шрифт обычно применяют для выделения ключевых слов и псевдозаголовков («Казак. Атака 6, защита 2, скорость 3»). Курсив хорош для показа фрагмента текста, на который как бы падает ударение («Вы уверены, что это реальный план?»).

Подчеркивание при верстке страниц использовать не принято, хотя специальный тэг — — существует. Главная (не единственная!) причина — в том, что подчеркивание по умолчанию показывает гиперссылку. Нехорошо обманывать ожидания посетителя.

Гиперссылки и метки

Главная особенность языка HTML, давшая ему название, — это гиперссылки, то есть указатели на другие страницы, файлы или места в тексте.

Делает все это команда . Мы уже показывали ее пример:

«Сайт журнала ЛКИ вы найдете здесь.»

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

Когда файл не указан, а назван только адрес — как выше, — показывается файл index.htm или index.html из этого каталога.

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

Существует мнение, что ссылки на слово «здесь» и тому подобные — дурной тон, и лучше делать ссылки вроде «Сайт журнала ЛКИ». Впрочем, это дело вкуса.

На заметку: из-за обилия в современной сети «левых» ссылок, ведущих на порносайты или еще в какое-то подобное место, есть смысл указывать в ссылках адрес, по которому делается переход («Сайт журнала ЛКИ вы найдете по адресу www.lki.ru»).

В конце адреса может быть метка через знак #: . Это — просьба не просто открыть по ссылке соответствующий файл, но навестись на кусок текста, помеченный begin. Чтобы сделать в своем тексте такие метки, используется та же самая команда, но с другим параметром: какой-то текст.

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

На заметку: Internet Explorer обычно старается открывать сам файлы формата PDF, DOC, XLS и некоторые другие. Иногда это полезно, порой — нежелательно, потому что удобнее скачать файл и потом уже смотреть. Порой стоит ставить два варианта файла — как есть и в архиве.

Картинки

Как бы это ни было досадно некоторым «борцам за идею», картинки — давно уже неотъемлемая часть большинства сайтов. Их вставлением в страничку заведует тэг .

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

То, что описано в параметре src — имя файла с картинкой (если надо — с каталогом или адресом). Параметры width и height — ширина и высота картинки в пикселах — вообще говоря, необязательны, но если их указать — это ускорит загрузку страницы и вообще упростит жизнь.

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

Параметр alt многие начинающие не используют, но это большая ошибка. В нем содержится текст, который будет показан, если браузер почему-либо не загружает картинок (или если эту конкретную еще не успел загрузить). Как ни странно это может показаться обладателям выделенных линий, в нашем мире немало пользователей, у которых перегруженная графикой страница качается очень медленно, и они порой запрещают показ графики. Грамотный текст alt позволит им понять — нужна им эта конкретная картинка или нет.

В случае, если картинка не несет никакой информационной нагрузки — например, виньетка, орнамент и так далее — этот параметр тоже нужен, но между кавычками не должно быть ничего. Просто alt="". Дело в том, что по умолчанию там пишется название файла, а это нежелательно почти всегда.

Здесь нужно сказать пару слов о формате картинок. По умолчанию интернет-стандарт поддерживает два формата: JPEG и GIF. Другие иногда могут быть поняты, но пользоваться ими все равно не надо.

GIF хорош тогда, когда картинка состоит из немногочисленных резких цветов, без полутонов и переливов. Например — схема метро. JPEG нужен для фотографий и прочих подобных картинок: он с небольшими потерями качества рисунка существенно экономит занимаемое им место. У JPEG есть такой параметр, как степень сжатия: обычно для веб-страничек хороши цифры около 50-60%. Не ставьте слишком высокое качество без необходимости.

Спецсимволы

Русские и английские буквы, цифры, большинство знаков препинания ставится в HTML без особых усилий, но есть знаки, которые можно вставить только особыми командами (разумеется, пункт меню Insert Symbol в редакторе страниц с этим справится). Сюда входят, например: тире (длинные и короткие), кавычки-«елочки», знаки евро, копирайта и торговой марки, дроби через косую черту, смайлики и так далее. У таких команд нет угловых скобок, они отличаются знаком & в начале и ; (точкой с запятой) в конце. Например, левой «елочке» соответствует команда «. Тэгами такие команды не называют.

Особое место среди спецсимволов занимает неразрывный пробел —  . Отображается он как обычный пробел, но есть тонкость: там, где вы его установили, будет ровно один пробел и ничего более. Обычный же пробел может стать при необходимости двумя, тремя и так далее (если вы включили выравнивание justify), может замениться на перевод строки и так далее. Если вы не хотите, чтобы здесь мог оказаться перенос или широкий интервал (например, внутри названия книги) — ставьте вместо обычного пробела неразрывный.

Таблицы

За создание таблицы отвечает тэг

. Каждая строка таблицы начинается с и заканчивается , клетка, соответственно, заключается в . Например, простенькая таблица может выглядеть так:

...

Род войск	Атака	Защита
Мечник	8	12
Рыцарь	14	21

Параметр border="0" означает, что границы строк и столбцов рисовать не нужно; если поставите 1 или 2 — будет, соответственно, одинарная или двойная линия.

Параметр width отвечает за ширину таблицы (в

) или столбца (в

). В данном случае он в пикселях, но можно задать его и в процентах: width="50%". У тэга

есть еще и команда height — высота. Списки Напоследок упомянем еще о списках. Как и в Word, в HTML есть нумерованные и ненумерованные списки. Первые обозначаются тэгом , вторые — . Cтроки заключаются в ... . Простейшие приемы верстки Перечислим несколько элементарных приемов комбинирования этих возможностей. Кнопка. Чтобы сделать кнопку, достаточно внутри гиперссылки указать не текст, а картинку (и установить ей border="0"). Не забудьте в параметре alt поставить функцию кнопки (например, «В начало»). В сайтах строгого дизайна часто обходятся текстом на цветном фоне — получается вполне приемлемая, хоть, быть может, и не самая красивая кнопка. Есть и специальные функции кнопок, но их применение — вопрос особый и не для этой статьи. Meню. Как сделать, чтобы меню сайта было не сверху или снизу, а сбоку? Обычно для этого применяется таблица, у которой всего две колонки (меню и основное содержание) и одна строка. Только не забудьте указать явным образом ширину столбца меню. Кстати, точно так же часто делают позиционирование картинки. Некоторые пуристы осуждают такую практику, но, поскольку текстовые браузеры, не понимавшие этих фокусов, уже в прошлом, сейчас этот метод вполне легален. Фон. Новички часто думают, будто фон — это единая цельная картинка под страницу. Конечно, так тоже можно делать, но зачем? Она будет скорее отвлекать от содержимого, чем помогать. А вот узенькая цветная полоска во всю ширину экрана может очень помочь, отделив меню, сделав ненавязчивую переливчатую подложку и так далее. При этом пользователь не будет вас корить за многомегабайтную страницу — такая строка занимает обыкновенно 3-4К. Раскрывающаяся картинка. Простейший способ сделать это — маленькая картинка в качестве гиперссылки на большую. Конечно, анимации не будет, но так ли она нужна? Чего нельзя сделать этими средствами? Описанных средств достаточно для того, чтобы выкладывать в Сеть почти любую информацию. Однако так не сделаешь содержимого, на которое пользователь сможет влиять. То есть — форумов, гостевых книг и так далее. Для простого сайта вам вполне хватит тех команд, о которых рассказано выше; о тонкостях мы поговорим в следующих статьях. Тем же, кто хочет добавлять в свои страницы серьезную интерактивность, стоит заняться изучением языков скриптов — Perl, Java или что-то еще. Но это — слишком глобальная тема для вводной статьи. Впрочем, не все так страшно: если ваши потребности в интерактивном содержимом ограничиваются форумом или чем-то подобным, то весьма вероятно, что удастся подобрать подходящий код в сборнике готового. Кое-что мы выложим на наш диск. Средства, без которых лучше обойтись За долгое время существования всемирной Сети скопилось немало механизмов и приемов, которые получили в какой-то момент большую популярность, но отнюдь не по причине восторга пользователей. Разумеется, выше эти средства не описаны. Зачем учить делать то, чего лучше не делать? В первую очередь хотел бы вас предостеречь от бездумного использования Macromedia Flash. Нет, если вы собрались заняться программированием Flash-игр или созданием мультфильмов — честь вам и хвала, но вот украшать свой сайт Flash-роликом — ни в коем случае. Flash — замечательная технология, исключающая, в отличие от Javascript, возможность вируса; но, не будучи «стандартным» средством HTML, для браузеров он — «пасынок», он никак не состыкован со стандартом веб-страницы. Что раздражает людей больше Flash-сайта, который не реагирует правильно на команды браузера, не дает поставить закладку, сохранить картинку или корректно отмотать шаг назад? Затрудняюсь ответить. Flash нужен для анимационных и интерактивных сайтовых программ, которые средствами HTML cделать нельзя. И тем не менее толпы людей и организаций, делая кто сайт коммерческого продукта, а кто — скромную личную страничку, прибегают к средствам Flash всего лишь затем, чтобы по страничке что-нибудь бегало или подмигивало из угла. Кто-то, может, и любит такие «приманки»... но ненавидящих гораздо больше. Flash в отдельном фрагменте страницы — например, в качестве рекламы или анонса — вполне допустим, главное, чтобы по нему не нужно было щелкать и он не содержал ключевой для этого конкретного сайта информации. А вот модные в последнее время Flash-рекламы, плавающие поверх сайта, — верх пошлости и неуважения к пользователю. Конечно, иногда это — единственный способ окупить работу составителей сайта, но какой же грязный! Особенную ненависть вызывают Flash-рекламки, где кнопку «закрыть» всеми средствами прячут от пользователя или заставляют бегать туда-сюда, чтобы он волей-неволей прочел всю ту чушь, которая написана в окошке. И вообще, как говорил Додо Алисе, «никогда не используй слова только за то, что они красивые и длинные». В данном случае это означает — старайтесь не применять никаких механизмов, которые не дают ничего содержательного вашему сайту. Украсить сайт — дело благое, но не ценой удобства. Никогда не заставляйте свой сайт принудительно открывать какие бы то ни было окна. И совершенно неважно, реклама это или подраздел сайта. Такой прием ассоциируется с порносайтом или хакерским притоном и заставляет подозревать владельцев страницы в нечистоплотности, не говоря уж о том, что раздражает сам по себе. В крайнем случае окно может открыться в результате выбора какого-то пункта меню. Но на самом деле нужно это так редко, что вряд ли встретится вам в реальной жизни, если вы не станете проектировать больших порталов. Несколько лет назад в большом фаворе у разработчиков были фреймы — средства, делящие окно браузера на несколько частей и держащие в каждой части свой html-файл. К счастью, ныне эта механика понемножку уходит в прошлое. Почему это плохо? Во-первых, потому, что сделать закладку нельзя, сохранять информацию неудобно — в общем, типовые проблемы «нестандартного HTML» (фреймы пытались ввести в стандарт, но явно зря). Во-вторых, информацию с фреймов не найдут поисковики, и ссылку на них толком не дашь — прости-прощай, популярность сайта. В-третьих, несчастные пользователи, у которых экран маленький, часто вообще не могут увидеть на такой страничке ничего. Пусть ваша страница ни в коем случае не звучит. Если вы хотите поставить туда свою музыку — пусть ее проигрывают по нажатии какой-нибудь кнопки, а фоновая музыка неуместна всегда, кроме разве что Flash-игр, и то только после включения игры. Если при открытии странички начинается какой-то звук, реакция «закрыть немедленно!» срабатывает примерно у 2/3 пользователей. Шаблоны и fan site kits Многое из нужных для страницы элементов можно найти в готовом виде. Повсеместно продаются сборники шаблонов страниц или отдельных графических элементов (правда, нередко они в этих сборниках краденые). Ну, а если мы хотим сделать сайт по любимой компьютерной игре — вероятно, о нужных графических элементах уже позаботились разработчики. Эта забота выражается в создании так называемого fan site kit — набора фонов, кнопок, картинок и так далее. Такие наборы бывают очень разными, от всеобъемлющих до убогих, и сейчас ими может похвастаться около половины крупнобюджетных игр, в первую очередь — стратегий и ролевок. Несколько таких наборов вы найдете на нашем DVD-диске. Как поместить сайт в Сеть Перво-наперво вам надо решить, какой адрес будет у сайта, и где он физически будет размещаться (на каком сервере). Множество порталов, вроде narod.ru, предложит вам немного места бесплатно, вместе с бесплатным же доменом третьего уровня — скажем, petrivanov.narod.ru. Конечно, это не совсем «даровая» услуга: в ваш сайт будет, как правило, принудительно включена реклама. Но для начального теста вполне сойдет. Если же у вас серьезные намерения — придется приобрести собственный домен второго уровня и, по возможности, платный хостинг. Разумеется, коммерческим страницам категорически не следует размещаться на бесплатном хостинге: даже если его правила это разрешают, это очень несолидно и производит плохое впечатление. Для начала займемся выбором имени сайту. Желательно, чтобы оно было не слишком длинным (знаков 8-12, не больше) и говорило что-то о сути сайта. Например, фан-сайту желательно включить название игры в это имя, а для домашней странички вполне подойдет фамилия или ник хозяина. Сайту компании крайне рекомендуется называться так же, как и компания, странице собственной игры — названием игры. Это важно: ни для чего, кроме личной странички, не стоит использовать в качестве части имени сайта свою фамилию. Иногда удается создать себе таким образом имя, но чаще губится популярность страницы. Конечно, если вас зовут не Сид Мейер. Делая фан-сайт по, скажем, Doom, его можно назвать doomclub или doomcity, но не doompetrov. Конечно, домен может оказаться уже занят. В большинстве случаев при этом можно перейти на другой бесплатный сервер (в случае третьего уровня) или с .ru на .net либо .org (последний — только для некоммерческих структур) или даже .com. Чтобы проверить, занят ли домен второго уровня, введите его адрес в поисковую строку на сайте www.checkdomain.com. Регистрация домена на бесплатном сервере проста и интуитивна; чтобы получить хостинг на платном, придется произвести больше манипуляций. Эту работу (а также собственно регистрацию домена) обеспечивает большинство провайдеров. Расценки у них очень разные, хорошая стоимость за регистрацию в зоне .ru — около 600-800 р. (ту же сумму придется платить ежегодно), рвачи пытаются получить 1000 и даже больше. За хостинг сайта обычно просят 100-150 р. в месяц, больше — за крупные объемы на диске, но имейте в виду, что, если ваш сайт будет производить серьезный траффик (например, если у вас будут постоянно качать большие файлы или играть в сетевую игру), то вряд ли вам удастся обойтись настолько скромными затратами. Впрочем, за 300-500 р. можно получить очень приличные условия (часто говорят о неограниченном траффике, но на деле это, как правило, все-таки «в разумных пределах»). На заметку: если сами файлы лежат не у вас, а вы только делаете на них ссылку — это не приведет к проблемам с большим траффиком вашего сайта. Наконец, вы зарегистрировали домен, приобрели так или иначе хостинг и подготовили на домашнем или рабочем компьютере собственно сайт. Теперь нужно его загрузить. Это очень просто: у всякого хостинга есть ftp-адрес, войдя на который со своими логином и паролем, вы получите доступ к корневому каталогу вашего сайта. Для «заливки» подойдет любая программа, работающая с FTP: я предпочитаю старый добрый Far Commander (на нашем диске). Просто открываете в нем нужный каталог (рекомендация: вписывайте логин и пароль прямо в адресную строку) — и заливаете файлы, как на обычный диск. Вы ведь не забыли снабдить свой сайт «базовым» файлом index.html? Все, ваш сайт работает!

1474 Прочтений •  [Как сделать сайт] [15.08.2012] [Комментариев: 0]

Добавил: Vova

Ссылки

HTML:
[BB Url]:

Похожие статьи
Название	Добавил	Добавлено
• Как сделать сайт	Vova	15.08.2012
• Мультибраузерный сайт или как его с...	Vova	08.05.2012