Создание маленького сайта при помощи визуального редактора и генератора метатегов

Внимание!!! Это архивная версия учебного примера создания сайта. В связи с тем, что хостинг narod.ru прекратил свое существование, Вы уже не сможете создать свой простой сайт по сценарию, описанному на этой странице. Весь этот учебный пример из этой страницы был на вот этой странице переработан и переделан для примера создания простого сайта на примере бесплатного хостинга hostinger.ru, базовый функционал которого практически совпадает с функционалом бывшего хостинга narod.ru. Плюс к этому отсутствует реклама и есть поддержка PHP и MySQL.

..............................................................................................

..............................................................................................

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

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

А мы здесь прямо на Ваших глазах от начала до конца сейчас изготовим личный сайт Васи Пупкина.

Регистрация хостинга и домена

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

В учебных целях мы сначала зарегистрируемся на каком-нибудь бесплатном хостинге, где дают бесплатный домен третьего уровня и где файлы сайта можно копировать со своего компьютера по протоколу FTP. Какой именно использовать бесплатный хостинг, это нам сейчас без разницы. Заходим на страницу со списком бесплатных хостингов и внимательно читаем их описания, чтобы выбрать подходящий. Оказалось, что самый первый в списке хостинг на сайте narod.ru нам подходит. Переходим туда по ссылке narod.ru.

Этот бесплатный хостинг на Народе является одним из сервисов Яндекса. Его эквивалентный адрес narod.yandex.ru.

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

Пишем тут свое имя и фамилию. Можно писать ненастоящие, но если Ваш сайт взломают хакеры, то с ненастоящими данными восстановить аккаунт уже не сможете. И там же выбираем незанятый логин. Нашему Васи Пупкину достался логин vasya-pupkin-ok. Все более короткие логины оказались уже заняты. (В стране огромное число Васей Пупкиных, больше чем Иван Иванычей и Марь Ванных.) Этот выбранный свободный логин будет входить в адрес нашего будущего сайта. Этот адрес, по умолчанию будет в виде домена третьего уровня vasya-pupkin-ok.narod2.ru. (Мы потом этот адрес чуть упростим и сделаем таким vasya-pupkin-ok.narod.ru, без двойки после narod.)

Нажимаем на кнопку "Далее" и переходим на второй шаг

Здесь придумываем пароль и секретный вопрос для восстановления пароля. Пароль запоминаем или записываем в специальный блокнотик. Для большей надежности в восстановлении пароля, можете еще указать свой действующий e-mail и номер мобильного телефона, но, в общем-то, это не обязательно. Вводим кривые символы с картинки и нажимаем на кнопку "Зарегистрировать". Попадаем на финишную страницу регистрации.

Оттуда можно перейти на страницу создания сайта по ссылке "Начать пользоваться сервисом Народ".

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

Создание шаблона главной страницы сайта

Заводим у себя в компьютере папку для файлов нашего сайта. Назовем эту папку каким-нибудь именем, неважно каким, например, site_vasya. Там создаем главный файл сайта. Главный файл любого сайта должен всегда иметь имя index и некоторое расширение из специального набора определенных разрешенных расширений. Мы возьмем из этого списка расширений расширение html. То есть наш главный файл будет иметь имя index.html. Расширение html говорит о том, что в данном файле содержатся только коды языка разметки HTML и не содержатся программы на таких языках программирования, как, например, PHP и подобные.

Теперь этот файл нужно наполнить содержимым. Для этого открываем его Блокнотом и держим открытым. А сами идем на станицу Инструментов создания web-страницы. Там опускаемся в самый конец этой страницы и находим в разделе номер 3 шаблон веб-страницы. Выделяем весь этот шаблон и копируем его в наш файл index.html.

В файле index.html между тегами <title> и </title>, где стоит фраза "Здесь напишите заголовок Вашей web-страницы", пишем название этой web-страницы, например, "Личная страница Васи Пупкина".

Генерирование метатегов главной страницы сайта

Теперь осталось только вставить мета-тэги после тэга <head> и основное содержание web-станицы между тэгами <body> и </body>. Начнем с мета-тэгов. На странице Инструментов создания web-страницы перемещаемся в раздел номер 2 в генератор метатегов. Создаем первые 5 мета-тэгов, вводя информацию в форму.

Жмём на кнопку "Создать Метатеги" и копируем полученные метатеги в файл index.html между тэгами <head> и </head> вместо фразы "Здесь вставьте мета-тэги, полученные в генераторе мета-тэгов".

Создание основной части главной страницы сайта

Теперь в Инструментах перемещаемся в раздел 1, где находится редактор web-страницы. Там сначала стираем весь начальный текст, чтобы окно редактора было чистым. Затем создаем простую страницу со списком из двух ссылок на две другие страницы будущего сайта.

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

• http://vasya-pupkin-ok.narod.ru/hobbi.html
• http://vasya-pupkin-ok.narod.ru/murka.html

Про хобби Васи Пупкина будет рассказано на странице hobbi.html, а про его кошку Мурку будет рассказано на странице murka.html.

Дело в том, что каждая страница сайта должна находиться в своем файле. Если у нашего сайта должно быть три страницы, то значит нам нужно создать для них три файла: index, hobbi.html и murka.html. Разные страницы одного сайта связаны друг с другом гиперссылками. Значит в адресах этих ссылок должны быть указаны соответствующие названия файлов других страниц.

Теперь нажимаем на кнопку "Code" внизу редактора и копируем полученный код в наш файл index.html между тэгами <body> и </body> вместо фразы "Сюда вставьте код, созданный в редакторе web-страницы".

Окончательно сохраняем файл index.html в следующем виде.

Итак, мы полностью создали файл главной страницы нашего сайта. Теперь можно или приступить к созданию двух других файлов hobbi.html и murka.html нашего сайта и потом копии всех трех созданных файлов забросить на хостинг или можно уже сейчас забросить готовый файл index.html на хостинг, а два дополнительных файла создать потом.

Копирование файлов на хостинг

Мы выбираем второй вариант и снова заходим на сайт narod.ru. В правом верхнем углу сайта narod.ru находим кнопку "Войти" и нажимаем на нее. Вводим логин и пароль, после чего попадаем в свой аккаунт на Народе. Нажимаем на кнопку "Создать свой сайт".

Мы попадаем в сервис создания сайта через конструктор сайтов. Но мы с самого начала решили, что создавать сайт будем не через конструктор, а как настоящие профессиональные вэб-мастера, самостоятельно создавая свои файлы сайта и копируя их со своего компьютера на хостинг. К сожалению, сервис Народа сейчас пытается раскрутить свой конструктор сайтов, поэтому в первую очередь мы попадаем в их конструктор, а не в сервис FTP, где есть возможность сразу копировать файлы своего сайта на хостинг. Наша задача состоит в том, чтобы быстренько создать в их конструкторе любую главную страницу сайта index.html, а потом заменить её на нашу. Понимаю, что это немного напоминает метод вырезания гланд через задницу, но ничего не поделаешь. Такой уж этот хостинг на Народе. Поверьте мне, что это не самый худший из хостингов для начинающих вэб-мастеров. А в былые времена это был бесплатный хостинг номер 1 в России.

Итак, в конструкторе сайта на первом шаге выберете любую специфику сайта, какую хотите. Это не важно, так как всё равно мы затерём создаваемый здесь файл index.html нашим файлом. Жмем кнопку "Дальше".

На втором шаге конструктора убираем галочки создания других страниц сайта, кроме главной и жмём на кнопку "Дальше".

На третьем этапе сразу жмем на кнопку "Начать заполнять". Мы попадаем в рабочее место конструктора, где нас интересует пункт меню "Управление файлами"

На странице управления файлами Вы увидите, что у Вас на сайте создан файл robots.txt. Его не трогайте. Это служебный файл, предназначенный для более профессиональной работы с запретами поисковым системам индексировать части сайта. Сейчас там разрешено поисковикам индексировать весь сайт. Поэтому оставляем его как есть.

А вот файл index.html Вы не видите в списке файлов сайта, но он уже есть на сайте, только незаполненный. Мы нажимаем на кнопку "Загрузить файл" и появляется форма для загрузки файла с компьютера.

Вот тут, через кнопку "Обзор" выберем с нашего компьютера наш созданный файл index.html и загрузим его на хостинг. Если через несколько секунд после этого зайти на сайт vasya-pupkin-ok.narod2.ru, то мы увидим там нашу созданную страницу.

Копирование файлов через FTP

Но нам еще осталось "избавиться" от конструктора сайта. Для этого нам нужно сделать так, чтобы адрес нашего сайта был не "инкубаторский" с narod2.ru, где находятся сайты, созданные через конструктор, а c narod.ru, где находятся сайты настоящих вэб-мастеров. Для этого в меню выбираем пункт "сделать сайт основным".

Если Вы не видите этого пункта меню, то зайдите сначала в пункт "статистика" и ищите пункт "сделать сайт основным" из статистики. После выбора "сделать сайт основным" появится следующее окно.

Нажимаем на кнопку "Да". Теперь через некоторое время, возможно через несколько часов, мы сможем увидеть первую страницу нашего сайта по адресу vasya-pupkin-ok.narod.ru.

Каков смысл того, что теперь наш сайт можно обнаружить не только по адресу vasya-pupkin-ok.narod2.ru, но и по адресу vasya-pupkin-ok.narod.ru?

Смысл в том, что теперь можно не заходить в свой аккаунт на сайте narod.ru, а забрасывать файлы нашего сайта на хостинг через протокол FTP. Для владельцев сайтов на narod2.ru такой возможности нет. Ведь они же умеют создавать свои сайты только через конструктор. Поэтому им никакое FTP не положено. А профессиональные вэб-мастера закидывают файлы своего сайта на хостинг по протоколу FTP через программы FTP-client.

В принципе, Вы можете продолжать закидывать файлы своего сайта также, как описано на этой странице через конструктор, выбирая в меню конструктора пункт "Управление файлами" и затем пункт "Загрузить файл". А можете познакомиться здесь с бесплатной программой FTP-клиентом FileZilla Client, установить у себя эту программу и использовать её для обмена файлами с Вашим хостингом. В этой программе в качестве хостинга надо указывать для нашего сайта не хостинг "ftp.narod.ru", как для старых сайтов на Народе, а хостинг "vasya-pupkin-ok.ftp.narod.ru" и имя пользователя "vasya-pupkin-ok". Это вот теперь такая особенность на Народе для новых сайтов, которые появляются сначала через конструктор. Имейте это ввиду, когда будете создавать свой собственный сайт на Народе.

Графические файлы на сайте

Мы же сейчас не будем отвлекаться на изучение FTP и его возможностей. Мы закинем на наш хостинг два файла с картинками. (Или ждем активации нашего сайта на narod.ru и кидаем файлы на хостинг через FTP или не дожидаясь активации сайта на narod.ru загружаем файлы через аккаунт конструктора сайтов.) Эти картинки мы будем использовать, когда будем создавать две оставшиеся страницы в редакторе web-страниц. Дело в том, что если картинки еще не находятся в Интернете по какому-нибудь адресу, то визуальный редактор web-страниц не сможет правильно показать нам, как будет на самом деле выглядеть создаваемая страница.

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

Это удобно тем, что один и тот же графический файл может быть использован неоднократно. Его можно вывести на разных вэб-страницах сайта и даже несколько раз на одной и той же web-странице. Мы загрузим файл с фотографией кошки Мурки murka.jpg и файл с астрономической тематикой stars.jpg.

.

Будем считать, что астрономическая тематика является хобби нашего Васи Пупкина. (В Интернете можно узнать, что у Васи Пупкина тысяча разных хобби. И когда только он всё успевает...) Файлы murka.jpg и stars.jpg заносим сначала в папку site_vasya, где уже находится наш главный файл index.html, чтобы все файлы сайта были в компьютере собраны в одном месте. Оттуда копируем их на хостинг.

Создание файлов других вэб-страниц сайта

В этой же папке создаем пустые файлы hobbi.html и murka.html. Вы помните, что на файлы с такими именами у нас стоят ссылки с главной страницы сайта. Идем опять на страницу Инструментов создания страниц сайта и снова в разделе 3 копируем шаблон web-страницы в эти два новых файла.

Ну и далее всё делаем точно также, как создавали главный файл index.html. Между тэгами <title> и </title> вставляем фразу "Хобби Васи Пупкина" в файле hobbi.html и фразу "Любимая кошка Васи Пупкина" в файле murka.html.

Далее создаем мета-тэги для файла hobbi.html:

<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="title" content="Увлечения Васи Пупкина">
<meta name="author" content="Вася">
<meta name="description" content="Астрономические увлечения Васи Пупкина">
<meta name="keywords" content="Вася, Пупкин, астрономия">

И для файла murka.html:

<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="title" content="Кошка Васи Пупкина">
<meta name="description" content="Почему кошка Мурка является любимой кошкой Васи Пупкина">

Наконец, создаем сами страницы.

...

Обратите внимание, что при визуальном редактировании этих страниц мы правильно видим, какое место на наших страницах занимает таблица. (В файле hobbi.html тоже применяется таблица для форматирования расположения фотографий и текста на странице, но с невидимыми краями ячеек.) Это благодаря тому, что мы уже скопировали фотографии murka.jpg и stars.jpg на хостинг и когда в визуальном редакторе указывали адреса этих картинок, то правильно указали:

• http://vasya-pupkin-ok.narod.ru/stars.jpg
• http://vasya-pupkin-ok.narod.ru/murka.jpg

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

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

• "http://vasya-pupkin-ok.narod.ru/index.html", как в файле hobbi.html
• "http://vasya-pupkin-ok.narod.ru/", как в файле murka.html

То есть имя главного файла index.html можно не указывать после имени сайта.

Вот так окончательно выглядят наши файлы hobbi.html и murka.html, соответственно.

...

Копируем эти два файла на хостинг и проверяем, правильно ли работают все ссылки. Вы можете зайти на сайт vasya-pupkin-ok.narod.ru и убедиться, что все ссылки работают правильно. Кроме того, оказывается, копия этого сайта находится на сайте vasya-pupkin-ok.narod2.ru. (Только все ссылки на наших web-страницах ведут на сайт vasya-pupkin-ok.narod.ru, поэтому при переходе по любой ссылке Вы перейдете с сайта vasya-pupkin-ok.narod2.ru на сайт vasya-pupkin-ok.narod.ru.)

...

Всё! Поздравляю! Вы только что вместе со мной создали маленький сайт.

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

Удачи Вам!

...

------------------

Автор статьи: Евгений Миронов.

[0] Создание страниц простого сайта
[1] Инструкция по применению визуального редактора страниц сайта
[2] Инструкция по применению генератора мета-тэгов
[3] Учебный пример создания сайта
   [3a] Предыдущая версия примера создания сайта (для хостинга Народ)
[4] Учебный пример создания интернет-магазина
[R] Бесплатные HTML-редакторы