Идем в народ — как сделать html сайт на Narod.Ru?

Приветствую вас, дорогие читатели моего блога!
Сегодня я отвлекусь от WordPress, от SEO и вспомню старые добрые времена, когда массовые CMS еще только-только появлялись? Одной из немногих возможностей создать сайт на html были бесплатные сервисы. Их было не сказать, что много, но достаточно, чтобы опробовать свои силы, потренироваться в html и сделать статический сайт. Большинство из них исчезло, появились новые, более пробвинутые, обладающие своей полнофункциональной системой управления, на которой можно было бесплатно сделать достаточно сложный по функционалу сайт — такие как ucoz.ru.

Как создать html сайт на narode

Но это было потом, а пока — на дворе 2002 год, и одним из самых удобных и популярных бесплатных хостингов был Народ.Ру. Он и сейчас остается на плаву, поэтому чтобы сделать html сайт и попробовать себя в роли веб-мастера его за глаза хватит начинающему сайтостроителю. Я завел себе почту на Яндексе и решил сделать небольшой сайт на Народе про свой любимый музыкальный инструмент — про трубу. Помню, когда он уже был готов (построен он был на популярной тогда фреймовой системе, когда боковая колонка была на месте, а основная часть прокручивалась), поисковики намного лояльнее относились к методам оптимизации, я мелким невидимым шрифтом пихал везде, где была возможность, ключевые слова, регистрировал по бесплатным базам помоечных каталогов, обменивался ссылками — делал все, за что сейчас бы попал под жесткий фильтр АГС. А тогда — за год поднял ТИЦ аж до 320 — самому не верится, что были возможны такие цифры!

Что такое статический html сайт?

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

То есть страницы будут статическими, они не будут автоматически обновляться — что прописано в html коде страницы, то и отображается. Неудобство заключается в отсутствии админки — каждый раз, чтобы внести изменения, надо открывать редактор и править тексты, встроенные в html код. Но здесь есть и плюсы, так как отсутствие программного кода и базы данных позволяет пользоваться менее требовательными к нагрузке хостингами. Как я уже говорил, вся информация — как html разметка, так и тексты, находятся непосредственно в теле html документа. Однако сюда так же можно подключить Ява скрипты и файл стилей css.

Народ с тех пор, как я сделал свой первый html сайт, изменился не сильно, поэтому если вы:

  • новичок
  • вам не хочется разбираться в установке локального сервера




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

то сейчас я покажу, как сделать html сайт на Народе.

Как сделать сайт на html на Народе?

Для начала скажу, что домен второго уровня к Народу прицепить не удастся. адрес сайта будет такого вида: ВАШ_ЛОГИН_НА_ЯНДЕКСЕ.narod.ru
После того, как завели себе аккаунт на Яндексе (подробно, как это сделать, я показываю в уроке про Директ), переходим по адресу Narod.Yandex.ru.

Здесь находятся ваши файлы, загруженные в хранилище, но нас интересует ссылка «Мой сайт».

сделать сайт на html

Жмем на нее и попадаем в панель управления сайтом. По большому счету здесь особо ничего не нужно. Про колонку, помеченную красным забудьте сразу — это шаблоны, сделанные не только для окончательно хронических нубов, но еще и полных дальтоников. Эти шаблоны (даже язык не поворачивается ТАК назвать ЭТО) устарели уже к моменту открытия сервиса Народ, поэтому, слабонервным лучше про нее вообще забыть. То, что выделено синим, иногда может понадобиться, но тоже редко. А вот зеленые блоки — как раз то, что нам надо для того, чтобы создать html сайт.

как создать сайт на html

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

1. Индексация и статистика.
Нам это не очень нужно, поскольку счетчик посещений будет установлен сторонний, а индексация — это управление файлом robots.txt, который мы сделаем сами.

2. Доступ к файлам по FTP.
Нужный раздел. Особенно если вы делаете сайт дома в Блокноте. Для того, чтобы сделать html сайт, не обязательно сидеть все время в сети — можно делать в оффлайн на своем компьютере, например, в электричке, а потом только загрузить все файлы и папки по ftp на хостинг — очень удобно.

3. Загрузка файлов на сайт.
Этот раздел используется, когда вы не используете ftp, а хотите загрузить картинки, архивы и документы, используя свой браузер.

4. Управление файлами и html редактор.
А вот этот как раз нам сейчас и понадобится. Нажимаем на ссылку.

сайт на народе html

На скриншоте — панель управления файлами нашего сайта. У меня уже создано несколько хтмл страниц — именно в синем секторе будут отображаться все файлы и папке вашего сайта. Для того, чтобы создать новую папку или документ, обратите внимание на ссылки, выделенные зеленым. Про страницу по шаблону — забудьте! Жмем «Создать html файл», задаем имя страницы, например index.html — главная страница html сайта, — сохраняем и далее жмем ссылку «Вернуться к «Управлению файлами» и открыть окно с редактором».

Откроется новое окошко для работы с кодом страницы. Здесь уже есть первоначальная разметка:

<html>
<head>
    <title>Народ.Ру: Новая страница</title>
</head>
<body>


</body>
</html>

Объяснять что здесь к чему подробно я не буду — тема html очень обширная, существует множество учебников, которые вы можете свободно скачать в интернете и изучать, работая над сайтом, созданным как раз на Народе. Моя задача сейчас показать, как работает данный хостинг, поэтому скажу лишь, что в «title» надо занести заголовок сайта, а между тегами «body» будет как раз основное содержание — блоки, таблицы, абзацы и тексты. Да, еще надо будет подключить сюда файл стилей style.css, делается это с помощью следующего кода, который вставляется перед закрывающим тегом </head>:

<link rel="stylesheet" href="ПУТЬ К ВАШЕМУ ФАЙЛУ style.css" type="text/css">

Ну и еще указать основные мета-данные, например, кодировку, описание и ключевые слова:



Как вы понимаете, все это делается вручную, в отличие от того же Вордпресса, где мы это все можем сделать из админки.

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

Гостевая книга для сайта на Народе

Про азы, как сделать html сайт на Народе, я рассказал. Теперь немного тюнинга, а именно использование php скриптов сервиса. Я говорил, что данный программный код здесь не поддерживается, однако у хостинга уже есть встроенные скрипты, которые мы можем использовать. Одни из них является гостевая книга для сайта.

Можно ее сделать из уже готового шаблона, но это не интересно и, как я говорил, не красиво. гораздо приятнее иметь гостевую в том же стиле, что и сам сайт. Поэтому создадим два новых документа.
Первый — guestbook.txt. Это html макет будущей гостевой. Копируем весь html код, который был на главной и вставляем определенный код для гостевой.




<html>
<head>
    <title>Народ.Ру: Новая страница</title>
</head>
<body>

<!---начало кода Гостевой Книги--->
<FORM ACTION=leave_message.xhtml METHOD=POST>
<INPUT TYPE=HIDDEN NAME=owner VALUE="{OWNERID}">
<INPUT TYPE=HIDDEN NAME=newlocation VALUE="http://narod.yandex.ru/guestbook/?owner={OWNERID}&mainhtml=guestbook.txt&messageshtml=mguestbook.txt">
<table align=center>
<tr>
<td align=left width=50%>
Имя :: Name:
</td>
<td align=right width=50%>
<INPUT TYPE=TEXT SIZE=20 NAME=your_name>
</td>
</tr>
<tr>
<td align=left>
Адрес :: E-mail:
</td>
<td align=right>
<INPUT TYPE=TEXT SIZE=20 NAME=your_email>
</td>
</tr>
<tr>
<td align=left>
Домашняя страничка :: URL:
</td>
<td align=right>
<INPUT TYPE=TEXT SIZE=30 NAME=your_url>
</td>
</tr>
<tr>
<td colspan=2 align=left>
Сообщение :: Message:
</td>
</tr>
</table>

<center>
<TEXTAREA ROWS=5 COLS=55 NAME=your_message></TEXTAREA>
<BR>
<INPUT TYPE=SUBMIT style="background:#191970; color:white" VALUE="Добавить сообщение :: Add the message">
</FORM>
<BR>
</center>
{PAGEBAR}<br>{MESSAGES}<br>{PAGEBAR}</span>
</td></tr></table>
<!---конец кода Гостевой Книги--->

</body>
</html>

Перед строкой <!—начало кода Гостевой Книги—> и после аналогичной в конце вы можете писать любые html теги и тексты.

Теперь создаем второй файл — mguestbook.txt — с содержанием:

<hr width=80%>{DATE}<BR>
<A HREF="mailto:{AUTHOREMAIL}"><b>{AUTHORNAME}</b></a>&nbsp;&nbsp;&nbsp;<a href={URL}>{URL}</A>
<BR>{MESSAGE}</font>
<br><BR><font color=#191970>{OWNERREPLY}</font>

Он отвечает за отправку сообщения. Теперь зайдите по ссылке narod.yandex.ru/guestbook/myguestbook.xhtml и попадете в панель администрирования гостевой.
На ней указан адрес, по которому ее можно посмотреть и который надо будет указывать в ссылках с сайта, а также ссылка для администрирования и настроек. Ссылку на изменение дизайна не трогайте — мы все делаем ручками, помните?

Гостевая книга для сайта html

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

Открываем страницу narod.yandex.ru/survey/survey.xhtml, создаем вопрос, добавляем варианты ответа и выбираем дизайн — здесь без навязанного нам оформления уже не обойтись. После этих шагов вам будет сгенерирован script, код которого нужно будет вставить в том месте сделанной страницы html сайта, где вы хотите видеть блок с опросом.

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

Напоследок предлагаю посмотреть видеоролик о том, как быстро и легко создать свой сайт на народе.

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

Для тех, кто не хочет останавливаться, а планирует досконально освоить все премудрости по созданию html сайта — да и не только, ведь умения по верстке пригодятся и для фриланса, и при разработке более серьезного проекта — обратите внимание на продвинутый видеокурс Е. Попова Сайт с нуля, в котором на практическом примере показано, как из макета PSD сверстать и создать рабочий html сайт. Очень советую, курс действительно стоящий.

как сделать html сайт с нуля

  • WP- voprosov.net является одним из наиболее впечатляющих phorums я видел. Большое спасибо за поддержание интернет классный , для разнообразия. Youve есть стиль , класс, бравада. Я имею в виду это. Пожалуйста, имейте это, потому что без Интернета , безусловно, не хватает интеллекта. удача

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

Добавить комментарий