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

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

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

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

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

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

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

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

После перехода на главную страницу сайта hostinger.ru надо найти в верхнем правом углу ссылку "Создать аккаунт" и перейти по ней.

Мы попадаем на форму регистрации.

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

В качестве электронной почты указывайте свой очень надежный e-mail. Дело в том, что Ваш e-mail будет использоваться не только для связи с администрацией этого хостинга, но и в качестве логина для входа в Ваш аккаунт. Этот e-mail никому не показывается. Для каждого бесплатного сайта на этом хостинге можно будет потом завести два бесплатных электронных адреса. Один из которых можете использовать, например, для связи с посетителями своего сайта.

Далее, придумайте надежный пароль от своего аккаунта. Если Вы затрудняетесь с придумыванием своего пароля, то прошу посетить этот сервис генератора паролей.

Затем, вводите кривые символы. Это необходимо для защиты от автоматических регистраций роботами. Обязательно надо поставить галочку, что Вы согласны с условиями Договора. В российском Интернете договора читать не принято. Но всё-таки как-нибудь найдите время, чтобы прочитать этот договор, который фактически является сборником правил использования данного хостинга.

И, наконец, нажимаем на кнопку "Создать аккаунт". Мы попадаем на страницу создания отдельных аккаунтов своих сайтов.

На этой странице Вы увидите сообщение, проверить свой почтовый ящик, чтобы найти там письмо с активационной ссылкой. При этом Вам на почту в течение нескольких минут (или даже секунд) придут два письма. Первое письмо с сообщением, что Ваш аккаунт успешно создан. Там будут указаны Ваш логин и пароль. Перепишите пароль в очень надежное место и уничтожте это письмо. А второе письмо, это письмо подтверждения вашего e-mail. В этом письме надо просто перейти по специальной ссылке, чтобы активировать Ваш аккаунт. Это проверка того, что Вы правильно указали e-mail и что этот e-mail действительно принадлежит Вам.

Если Вам не пришли такие письма в течение нескольких часов, то это значит, что или Вы неправильно указали свой e-mail (перерегистрируйтесь заново), или письма попали в папку "Спам" (просто переместите их оттуда в папку "Входящие") или у Вас очень ненадежная почта, которая блокирует автоматические письма, созданные роботами. В последнем случае надо перерегистрировться с электронным адресом от другого почтового сервиса.

После перехода по активационной ссылке в письме, Вы попадаете снова в свой аккаунт, где Вам предладают на выбор три тарифа для Вашего сайта, один бесплатный и два платных.

Мы, разумеется, выбираем бесплатный тариф и нажимаем внизу на кнопку "Заказать"

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

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

Мы в качестве адреса сайта регистрируем здесь домен третьего уровня vasya-pupkin.id1945.com. При этом доменом второго уровня является id1945.com, а его субдоменом является vasya-pupkin. Мы регистрируем домен третьего уровня, потому что он бесплатный. Домен id1945.com является доменом второго уровня и он принадлежит хостингу hostinger.ru, так как этот хостинг когда-то купил себе этот домен. Но если бесплатные сайты располагаются на хостинге hostinger.ru, то хостинг раздает бесплатные домены третьего уровня в своих собственных доменах. Вот и мы бесплатно взяли домен vasya-pupkin.id1945.com в домене id1945.com, так как субдомен vasya-pupkin оказался еще не занятым в домене id1945.com. Теперь уже никто не сможет взять себе этот домен vasya-pupkin.id1945.com, так как он уже занят нами.

Справа есть небольшое меню, где Вы можете выбрать другие домены этого хостинга, в которых будет находиться Ваш бесплатный домен третьего уровня: p.ht, id1945.com, 16mb.com, zz.mu, pusku.com, besaba.com, hol.es, vv.si. Я выбрал имя сайта в домене id1945.com, потому что com это нормальная доменная зона, а число 1945 у меня ассоциируются с 1945-м годом и это хорошая ассоциация.

Если у Вас есть свой собственный платный домен второго уровня, то Вы можете на хостинге hostinger.ru сделать сайт под адресом своего собственного домена. Для этого перенесите радиокнопку с "Субдомен" на "Домен" и введите имя своего домена.

После заполнения всех полей формы регистрации аккаунта сайта, нажимаем на кнопку "Создать" и ждем секунд 5-10 пока создается аккаунт сайта. После чего мы окажемся в панели управления своими аккаунтами, где будет находиться список всех Ваших сайтов на хостинге hostinger.ru.

Если бы сейчас мы посмотрели, как выглядит наш сайт в Интернете, то увидели бы по адресу vasya-pupkin.id1945.com просто информационную "заглушку", которую хостинг показывает по умолчанию в пустых сайтах, чтобы не показывать ошибку.

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

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

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

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

Теперь этот файл нужно наполнить содержимым. Для этого открываем его стандартным редактором Блокнот из стандартных программ Windows. (Если не знаете, где у Вас в компьютере находится редактор Блокнот, то пройдите следующие пункты меню: Пуск --> Программы --> Стандартные --> Блокнот.) Блокнот, с загруженным туда пустым файлом index.html держим открытым, а сами идем на станицу Инструментов создания web-страницы. Там опускаемся в самый конец этой страницы и находим в разделе номер 3 шаблон веб-страницы с инструкцией из 5 пунктов. Выделяем весь этот шаблон и копируем его в наш файл index.html в Блокноте.

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

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

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

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

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

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

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

• http://vasya-pupkin.id1945.com/hobbi.html
• http://vasya-pupkin.id1945.com/murka.html

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

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

Создать ссылку очень просто. Выделяем мышкой слово или фразу, которая будет ссылкой и нажимаем в верхнем меню визуального html-редактора на первую кнопку второго ряда. В появившемся окошке вводим полное имя файла страницы, на которую будет вести ссылка (например, написать http://vasya-pupkin.id1945.com/hobbi.html), и тип ссылки выбираем "_blank". Тип ссылки "_blank" означает, что страница, на которую переходим по ссылке, будет открываться в новом окне или в новой вкладке, чтобы не пропадала предыдущая страница, с которой перешли.

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

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

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

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

Мы выбираем второй вариант и снова заходим на сайт hostinger.ru. В правом верхнем углу этого сайта находим кнопку "Войти", а перед этой кнопкой два поля для ввода. В первое поле ввода вводим в качестве логина адрес своей электронной почты, который мы указали при регистрации аккаунта, а во второе поле вводим пароль от аккаутна хостинга (не от аккаунта своего сайта!!!) и нажимаем на кнопку "Войти".

Мы попадаем на главную страницу акккаунта, где обычно находятся какие-нибудь последние новости от хостинга. В верхней линейке меню находим кнопку "Панель" и нажимаем на нее. Мы переходим в список сайтов, зарегистрированных в данном аккаунте хостинга. Находим нужный нам сайт vasya-pupkin.id1945.com и справа от него нажимаем на кнопку "Выбрать". Мы попадаем в, как называемую, c-panel управления сайтом.

Забросить готовые файлы на хостинг можно несколькими способами. Посмотрим, как это делается через cpanel. Для этого опускаемся вниз до группы меню "Файлы".

Выбираем, например, "Файловый Менеджер 2". При первом входе файловый менеджер может попросить ввести пароль от сайта. (Это бывает не всегда.)

После ввода пароля снова заходим в "Файловый Менеджер 2". Там мы можем лицезреть список файлов нашего сайта на хостинге. Первоначально мы видим, что там уже есть один единственный файл default.php.

Этот файл default.php как раз и есть та самая информационная заглушка. Он нам не нужен. Поэтому его надо удалить. Кликнем мышкой по этому файлу так, чтобы выделить его. Слева у нас появится контекстное меню.

Выбираем первый пункт этого меню "Delete file" и уничтожаем файл default.php.

Теперь надо закачать на хостинг файл index.html. Для этого в левом меню кликаем мышкой на загрузку файла "Upload file". Появляется кнопка "Обзор", при помощи которой мы выбираем на диске компьютера наш файл index.html и нажимаем кнопку "OK".

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

Если теперь набрать в строке браузера адрес сайта vasya-pupkin.id1945.com, то увидим первую страницу нашего сайта Васи Пупкина.

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

В принципе, Вы можете таким же способом закачивать файлы своего сайта на хостинг, как было описано выше, через "Файловый менеджер". Но более продвинутым способом закачки файлов на свой сайт является использование специальных программ FTP-клиентов. Вы можете познакомиться здесь с бесплатной программой FTP-клиент FileZilla Client, установить у себя эту программу и использовать её для обмена файлами с Вашим хостингом. В этой программе в качестве хостинга надо указывать для нашего сайта хостинг "ftp.vasya-pupkin.id1945.com", а в качестве пользователя надо указать имя, которое можно найти в разделе "FTP-доступ" на хостинге hostinger.ru в аккаунте сайта.

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

При загрузки файлов сайта через FTP надо помнить, что все файлы на этот хостинг должны загружаться в папку public_html, а также все другие папки Вы должны создавать также только внутри этой папки public_html и больше нигде. (При использовании "Файлового менеджера 2" мы по умолчанию сразу оказываемся в этой папке public_html.)

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

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

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

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

.

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

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

В этой же папке создаем пустые файлы 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="Почему кошка Мурка является любимой кошкой Васи Пупкина">

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

...

Для вставки фотографий используем третью кнопку из второго ряда верхнего меню визуального html-редактора. В появившемся окошке пишем полное имя файла фотографии (начиная с http и с имени сайта), затем описание фотографии (можно не писать), выбираем расположение и центровку (можно оставить пустым), задаем ширину границы фотографии (можно поставить ноль, то есть границы не обводится) и задаем свою высоту и ширину фотографии (если не задать, то фотография будет иметь свои собственные размеры, как сам файл фотографии).

Для упорядочивания расположения на странице текста и картинок, мы применяем таблицы. Определенные тексты заносим в определенные ячейки таблицы и фотографии тоже размещает в ячейках таблицы. Это всё делается, чтобы тексты и картинки не шли сплошным линейным образом. Для создания таблиц применяем пятую кнопочку во втором ряду верхнего меню визуального редактора. В появившемся окошке задаем, какое будет количество ячеек по вертикали и по горизонтали, какова будет ширина таблицы на web-странице, ширина границ ячеек, расстояния между ячейками и отступ от границы ячейки внутри самой ячейки, и, наконец, выравнивание объектов в ячейках таблицы. Для вставки и удаления новых строк и столбцов таблицы, а также для объединения нескольких ячеек в одну и раъединения, используются шесть кнопочек во втором ряду верхнего меню визуального html-редактора, которые идут сразу за кнопкой создания таблицы.

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

• http://vasya-pupkin.id1945.com/stars.jpg
• http://vasya-pupkin.id1945.com/murka.jpg

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

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

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

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

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

...

Копируем эти два файла на хостинг и проверяем, правильно ли работают все ссылки. Вы можете зайти на сайт vasya-pupkin.id1945.com и убедиться, что все ссылки работают правильно.

...

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

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

Удачи Вам!

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

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

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