Как сделать САЙТ (бесплатно)

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

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

РУКОВОДСТВО

Начнём с инструмента, который вобщем то и станет вашем основным помощником в этом увлекательном процессе. Для начала один из важных моментов (не пугайтесь, это просто), предварительно скачайте и установите программу AkelPad – текстовой редактор с открытым исходным кодом.
После чего для работы с программой необходимо создать текстовой документ, открываем интерфейс правой клавишей курсора, находим строку "Создать" – "Текстовой документ" .

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

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

AkelPad – в отличие от стандартного блокнота изначально был предусмотрен как редактор веб – страниц и наряду с многочисленными инструментами имеет основную отличительную черту в виде подсветки синтаксиса.

Что касаемо языка HTML – это язык разметки гипертекста, он состоит из тегов.
ТЕГ – это символы, заключённые в угловые скобки и по своей сути является командой браузеру к отображению информации в заданном виде. Теги, как правило, за не большим исключением, двойные; один открывает, отдаёт команду <…..>, другой закрывает, отменяет её </…..>. Таким образом, помещая какую либо информацию между двумя такими тегами, вы можете задать любую команду, конечно ограничиваясь техническими возможностями. Проще некуда.


А теперь что вам нужно запомнить ЗДЕСЬ и СЕЙЧАС

(не пугайтесь)



Рассмотрим несколько основных тегов (язык HTML)
из которых состоит простейший ВЕБ – документ.

<html>…</html> - это пожалуй самый главный тег, так как указывает принадлежность документа к HTML языку, ставится в самом начале открытым и соответственно закрытым в конце документа.

<head>…</head> - этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.

<title>…</title> - название, оглавление страницы, этот тег всегда помещается внутри - <head>…</head>

<body>…</body> - в этот тег помещается информация, которая должна отображаться в окне браузера.

Запомнили?

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

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

<HTML> 
<HEAD> 
<TITLE> Сказка о рыбаке и рыбке </TITLE> 
</HEAD> 
<BODY> 
      Жил старик со своею старухой 
      У самого синего моря; 
      Они жили в ветхой землянке 
      Ровно тридцать лет и три года. 
      Старик ловил неводом рыбу, 
      Старуха пряла свою пряжу. 
</BODY> 
</HTML>

Сделали?

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

Теперь для того чтобы просмотреть результат в окне вашего браузера, вам необходимо на панели свойств; кликнуть “Файл” – “Сохранить как…” (откроется новое окно).

Далее, вводим имя файла, к примеру; index.html – так всегда именуется главная страница сайта.
Тип файла; Все файлы (*.*).
Кодировка, по умолчанию должна стоять 1251 (ANSI - кириллица).
После того как вы сохранили файл в расширение .html, двойной клик курсора не замедлительно отобразит содержимое файла в окне вашего браузера.

В результате то, что находилось между тегами <body>…..</body> должно быть на странице, а то, что между <title>…..</title> отобразится в названии вкладки браузера.
Если вы всё сделали верно, то результат не заставит себя ждать, и вы на собственном опыте осознаете всю простату и доснупность языка HTML.



(Усложним задачу)



Перед вами лёгкий (без выкрутасов) шаблон
с основными элементами интернет страницы.

Проделайте туже операцию с этим шаблоном страницы сайта и сохраните картинку так, чтобы оба этих файла находились в одном дисковом пространстве.
А вот ТАК ДОЛЖНО ПОЛУЧИТСЯ.


Заготовку и её подробное описание, можно скачать ЗДЕСЬ!

<html> 

<head> 
<title>Слова детских песн и сказок</title> 
</head> 

<body> 

<center> 

<table width="800" height="600"> 

<tr> 
<td colspan="3" width="800" height="150">
<img src="aB0jAVNJnF.jpg" width="800" height="150">
</td> 
</tr> 

<tr> 
<td bgcolor="#42aaff" width="150" valign="top" > 

<a href="index.html">ГЛАВНАЯ</a><br><br> 

<a href="ssilki.html">Ссылки</a> 
</td> 

<td valign="top" bgcolor="#ccccff"><center>
<H1>Слова песни Голубой вагон</H1> 

<p> 
<pre> 
	Медленно минуты уплывают вдаль,
	Встречи с ними ты уже не жди.
	И хотя нам прошлого немного жаль,
	Лучшее, конечно, впереди!
	            *****
	Скатертью, скатертью дальний путь стелится,
	И упирается прямо в небосклон.
	Каждому, каждому в лучшее верится,
	Катится, катится голубой вагон!
	            *****


</pre> 
</center> 
</td> 

<td bgcolor="#42aaff" width="150" valign="top" > 
<center><b>НОВОСТИ</b></center> 
<p>Здесь могут быть новости: сайта, интернета,
развлечение и т. п. </td> </tr> </table> </center> </body> </html>

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

Для того чтобы открыть файл для редактирования, кликните по нему правой клавишей – “Открыть с помощью” - “Блокнот”. К примеру, поменяйте размер макета сайта, он определяется из расчёта разрешения монитора, конечно не вашего. Размер сайта подгоняется под широкий круг пользователей, 800х600 – это самое маленькое разрешение, 1024х768 – это самое распространённое разрешение, 1280х1024 – менее распространённое.

Ещё существует так называемый “резиновый” сайт, его свойства достигаются путём определения ширины – width в процентах, к примеру: width=”100%”, в этом случае ваш сайт будет занимать всю площадь монитора и при изменение окна браузера, страница сайта будет оптимизироваться под его размер.

Теперь попробуйте изменить фон страницы, в атрибуте bgcolor="#..." замените параметр цвета на другой, к примеру: #99ff99 – салатовый, #ffc0cb – розовый, #987654 – бледно - коричневый. Если вас интересует подбор цвета , ЗДЕСЬ краткая рекомендация - (откроется дополнительная вкладка).

Так же попробуйте заменить картинку шапки сайта - img src="aB0jAVNJnF.jpg", всего - то надо поменять родительское имя - aB0jAVNJnF.jpg картинки, на имя выбранного вами изображения. В нашем случае желательно чтобы изображение было панорамным, в противном случае, возможны сильные искажения. Далее закройте программу редактирования и согласитесь с сохранением файла “Да”, после чего двойной клик курсора отобразит содержимое файла.

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

Если кто-то, скажет Вам, что этот пример ужасен, что так давно никто не пишет и что есть ошибки - код  не валидный .

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

Поверьте, Я, начинал именно с этого и ни чуть не жалею что сразу начал с практики вместо зубрёжки порой уже устаревающих материалов.
Просто усердно творите и знания к вам сами прейдут.

Для дополнительных возможностей редактирования файла,
вам необходимо ознакомится с ТЕГами HTML - (откроется дополнительная вкладка).

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

ЗАРАБОТОК на собственном САЙТЕ


Желаю, Успеха!