Блиц-опрос

Ваше мнение очень важно для автора сайта! Оцените дизайн и контент сайта:

Круто - 50%
Нормалёк - 18.8%
И так сойдет - 18.8%
Полный отстой - 12.5%

Проголосовали: 16
Голосование для этого опроса закончилось on: 31 Дек 2017 - 00:00

Создаем сайт — начало

1

логотип сайтаВопрос вопросов — как создать сайт? И этот вопрос, который часто ставит в тупик новичка, даже если он уже начал изучать язык HTML по какому-либо учебнику. Заголовок на самом деле должен быть другим — «Хочу сделать сайт и точка! А как его сделать-то?». Но игривые и юморные заголовки – это нехорошо для поисковых сервисов.

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

Сайты в подавляющем большинстве случаев создаются на жестком диске компьютера вебмастера. И лишь потом, когда сайт уже будет готов для публикации, его закачивают на сервер хостера. Поэтому вы можете экспериментировать и играться со своим первым сайтом, не используя интернет. Естественно, пока вы не создали более менее приличный сайт, он должен быть закрыт от индексации поисковыми системами. Это легко делается с использованием файла robots.txt, который должен находиться в корневой директории вашего сайта (public_html) у хостера. Это обычный текстовой файл, который легко сделать самому. У некоторых хостеров этот файл попросту уже лежит в директории вашего сайта, нужно просто проверить его на предмет «правильности». А лучше все-таки создать файл у себя на жестком диске.

Забегая вперед, поясню следующее. Если вы успешно разместили свой сайт на сервере хостера с файлом robots.txt, в котором прописаны директивы, запрещающие поисковым системам индексацию всего сайта, то ваш сайт никто не увидит. О вашем сайте никому не известно. И внешних ссылок на ваш сайт нет ни одной. Но вы можете позвонить другу и продиктовать имя сайта. Друг войдет в интернет, откроет браузер, введет имя вашего сайта в адресную строку и ахнет, увидев ваше «произведение». И теперь он сможет время от времени просматривать ваш сайт, давать советы или высказывать свою точку зрения по поводу дизайна и контента, указывать вам на ошибки, описки и проч. Теперь вы можете  добавлять другие, созданные на вашем жестком диске, страницы сайта. А можете вообще удалить все папки и файлы с сервера хостера, сделать новые и опять закачать на сервер. Это абсолютно безопасно, это делают все.

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

А теперь сам алгоритм

Создайте папку на вашем жестком диске в любом месте с любым названием, например [Пробный сайт].  Внутри папки создайте папку [Images] и [Files]. В папке [Images] вы будете хранить файлы в графических форматах – картинки, фотографии и прочие элементы оформления сайта. А в папке [Files] – файлы, архивы книг, программы и проч., то есть то, что вы будете предлагать для закачки своим посетителям (если, конечно, вы будете это делать). Названия папок могут быть другими, но на практике применяют эти – так удобнее и нагляднеене запутаетесь потом. Для верстки сайта можно использовать любые текстовые редакторы (Word для этого не подходит). Это либо штатный Блокнот либо Notepad++ либо другие редакторы, с которыми вы умеете работать.

Итак, попытаемся сверстать наш пробный сайт в простой табличной форме (с использованием тега <table>). Сейчас не принято создавать сайты в виде таблицы. Сейчас популярна блочная верстка с использованием тегов <div> и CSS (каскадные таблицы стилей). Но в нашем случае я просто хочу «наскоряк» сделать сайт и выложить на сервер хостера. Когда-то я упражнялся с таблицами, просто нашел файл и подправил для нужд данной статьи.

Я не стал менять «ядовитые» цвета, оставил видимые границы таблицы и не стал добавлять ячейку для футера (в нижней части макета). Итак, я открыл редактор Notepad++, создал новый файл, скопировал в него код болванки сайта и сохранил его под именем index.html в папке [Пробный сайт]. Проверил код на валидность — все нормально. Итак, ниже находится HTML код макета пробного сайта. Попросту говоря, это таблица, состоящая из двух строк и двух столбцов. Итого – четыре ячейки.

<!DOCTYPE HTML PUBLIC «-//W3° C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Не боги горшки обжигают</title>
</head>
<body text="#336699" bgcolor="#FFFFFF">
<table align="center" width="800" border="1" cellspacing="0" cellpadding="10">
   <tr>
      <td height="170" width="150" bgcolor="#CC3399">
    <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#000000">
      Здесь будет логотип</font></p>
      </td>
    <td width="650" bgcolor="#CC3399">
    <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="6" color="#000000">
      <b>Здесь будет название сайта</b></font></p>
      </td>
   </tr>
   <tr>
    <td height="250" width="150" bgcolor="#CC66FF" valign="top">
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#000000">
      Здесь будет меню сайта</font></p>
    </td>
      <td width="250" bgcolor="#FFCCFF" valign="top">
      <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#000000">
Здесь будет контент сайта</font></p>
     </td>
   </tr>
</table>
</body>
</html>

Теперь попробую посмотреть, что получилось. Открываю браузер Internet Explorer (подключение к интернету не обязательно), иду [Файл] > [Открыть] > [Обзор] > ищу созданный файл index.html > [Открыть], и вот, что я вижу:

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

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

Защитный код
Обновить

Поделитесь с друзьями!

Поиск по сайту