Как сделать сайт (бесплатно)

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

Как сделать сайт (бесплатно)


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

РУКОВОДСТВО

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

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

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

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

Что касаемо языка HTML – это язык разметки гипертекста, он состоит из тегов.

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

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

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

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

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

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

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

Запомнили?

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

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

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


Сделали?

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

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

Далее, вводим имя файла, к примеру; index.html – так всегда именуется главная страница сайта.

Тип файла; Все файлы (*.*).

Кодировка, по умолчанию должна стоять 1251 (ANSI - кириллица).

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

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

Если вы всё сделали верно, то результат не заставит себя ждать, и вы на собственном опыте осознаете всю простату и доснупность языка HTML.

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

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

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

А вот ТАК ДОЛЖНО ПОЛУЧИТСЯ.

Заготовку и её подробное описание, можно скачать ЗДЕСЬ Description_make-up.rar [2,66 Kb] (cкачиваний: 0)!

<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 - (откроется дополнительная вкладка).

Рекомендуем посмотреть
  • Мой первый сайт. Первые шаги Первый сайт, как первая девушка — всегда делаешь его с некоторым стеснением. Сегодня мы попробуем преодолеть свои страхи и сделать свой первый сайт на базе движка AutoBlog-X. А заодно убедиться, что
  • Блог на WordPress — первый сайт с базой данных Чтобы разбираться в сайтах на основе базы данных, лучше всего начинать с WordPress. Он прост в установке и дает достаточно понимания для работы с базами на своем хостинге.
  • Продвижение сайта с ошибками Все наверное видели при неправильно набранных словах гугл все таки некоторые результаты показывает. Это работа продвижения или ПС так сама делает? Стоит ли продвигать сайт по словам с ошибками или в
  • Как сделать свой форум В современном мире Интернета форум является важной частью любого сайта. Форумы необходимы для естественного общения среди пользователей того или иного сайта, чтобы пользователь чувствовал себя частью
  • Создание собственного сайта для начинающих: с чего следует начать Если вы читаете эту статью, то, вероятно, вы решили создать свой собственный сайт, но, абсолютно не понимаете, что представляют собой эти интернет-создания и как они создаются.