21 - Июнь
События в этот день

Узнать фазу луны
Вопрос-Ответ
Без ограничений и регистрации

Мемы, демотиваторы


Это факт!


Средний горожанин тратит две недели своей жизни на светофорах.

Следующий факт »




Самая старая крепость в Африке. Фото.


Читать дальше






Самая старая канализация в мире - Римский водопровод. (Загуан. Римский Храм воды


Читать дальше






Холм Бирса.Карфаген.Тунис. Древний Рим. История.


Читать дальше






Бани (термы) Антонина. Тунис. Карфаген. Римские бани.


Читать дальше






Ведьмы живут среди нас


Читать дальше






Как Сталин предал своих солдат и свой народ? Документы


Читать дальше






Интересные факты о времени и часах.


Читать дальше






Интерактивная карта: "Как жили в Древнем Риме?" (Нажимай, смотри, трогай карту)


Читать дальше





Мудрые мысли на картинках



“Встарь богатейшими странами были те, природа которых была наиболее обильна; ныне богатейшие страны – те, в которых человек наиболее деятелен.”

Генри Томас Бокль

Следующая цитата »


Смешные грустные картинки


"Хокку". японская мудрость


А вам и печали нет,
Птицы сорокалетья[46] — сороки,
Что старость напомнили мне!
Басё

Безимянный стих

Следующий стих »

Карусель мира

Узнай о своём дне рождении больше





Ра оставил тебе послание!... (0о0)


В этой статье я вам расскажу как сделать свой сайт самостoятельно и совершенно бесплатно!
Для создания своего сайта не нужны никакие заурядные способности в программировании, лично из своего опыта, я могу сказать, что написал свой портал http://RecsGames.ru при помощи базовых знаний сайтостроения и потратил на это очень мало времени.

Итак, давайте приступим! Для начала сядьте поудобнее, налейте себе чай и запустите обычную программу 'Блокнот' (Notepad) на компьютере, есле вы пишете на смартфоне, то запустите любой текстовой редактор.

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



1.Создайте папку с названием 'site',
создание сайта скриншот 1 папка
2.создайте в ней новый текстовой документ, откройте этот документ с помощью блокнота и напишите следующий код:



<html>

<head>
</head>


<body>
</body>

</html>

веб сайт файл Этот код и есть структура вашего сайта (страницы сайта), теперь сохраните этот код и переименуйте весь файл в 'index.html'

P.S. Обязательно измените расширение файла на '.html' - именно это расширение будет говорить компьютеру, что файл нужно открывать в браузере.

html - обязательный тег, показывающий браузеру, что созданый только что вами файл является веб-страницей
head - в этот тег обычно вставляются скрипты, иконки, стили для сайта
body - место, где вы будите размещать весь основной текст вашего сайта, другими словами - контент будь то просто текс, картинки или видео
/ - эта палочка обозначает закрывающий тег.


Итак, вот мы и написали структуру сайта, теперь давайте её заполним:
<html>

<head>
<title>Это мой сайт</title>
</head>
<body>
Привет мир! Поиграю в игры и почитаю статьи на RecsGames.RU
</body>

</html>


И так, теперь мы получили нашу первую веб страничку:
вебмастер скриншот файл

Но это только начало, страничка выглядет немного неполной. Нету ни цвета, ни фона, ни картинок и буквы какие-то неинтересные. Теперь, когда вы ознакомлены с созданием простой странички, я вас научу делать красивые странички. Как например мой портал http://recsgames.ru. красиво оформление Итак пишите следущее:
<html>

<head>
<title>Это мой сайт</title>
</head>
<body>
Привет мир! Поиграю в игры и почитаю статьи на RecsGames.RU
А какие новости есть на портале?

<img src='http://recsgames.ru/newimg/gta3.jpg' title='это картинка' alt='номер 1'>

</body>

</html>



В этом коде мы вставили картинку в нашу страничку, картинку вы можете вставить таким же образом свою. Для большего удобства создайте новую папку , в нашей папке, и назовите новую папку 'images', теперь скачайте картинку и киньте её в эту папку.
стиль файл мода
Итак, теперь давайте я объясню что и зачем

img - тег, говорящий браузеру о том, что это именно картинка
src - тег пути (тут надо указать свой путь к картике)
alt - обычно этот тег ничем не премичателен, особенно в современных браузерах, он нужен для того чтобы если картинка непокажется или незагрузится, что маловероятно, показать информацию о картинке (что это за картинка), часто его не прописывают. НО! при SEO-оптимизации сайта (раскрутки) его обязательно нужно писать т.к. в него можно заключить ключевые слова, но об этом позже :-)
title - необязательный тег, нужен например для того, чтобы дать описание картинки (всплывающая подсказка).


Итак, давайте теперь попробуем сделать страничку ещё красивее, выделив цветом и курсивом текст
Для этого напишите следущий код, а я объясню что к чему :-)
<html>
<head>
<title>Это мой сайт</title>


</head>

<body>
<h2><center> Mой сайт!</center></h2>


<center><img src='http://recsgames.ru/newimg/gta3.jpg' title='это картинка' alt='номер 1'></center><br>
 <center><h3>Привет! Я автор этого сайта!</h3> </center>
<hr>
<br> <center><i><b><font color='red' Здесь ты можешь прочесть информацию обо мне или мой блог.<br><br>Представь, что тут много картинок или игр :-)</font></b></i> </center>
<br><br><br><br><br><br><br><br><br><br><br><br><hr><br> <center>Это мой копирайт :-))))

</center>
</body>



</html>


Итак, если вы запустите эту страничку в браузере, то увидите примерно следущее:
создание сайта скриншот 1 папка

Текст более-менее выровнился, и всё стало более-менее приято для глаз.

center - тег, который нужно добавлять тогда, когда вы хотите расположить текст или картинку посередине страницы.
h2 - тег, созданый для того, чтобы менять размер букв и заголовков, он имеет значения от 1 до 6, но тут не так всё просто. Размер идёт от большего к малому т.е. 1 - очень большой текст, а 6 - очень маленький текст. (он нам понадобиться при раскрутке сайта)
br - тег переноса текста ил картинки на новую строку (я его использую очень часто потому что, он заменяет клавишу Enter :-) ) без этого тега переход на новую строку не состоиться т.к. браузер не понимает клавишу Enter, а вместо неё будет просто пробел.
hr- горизонтальная разделительная палочка, лично я её использую просто для красоты
color - изменяет цвет текста (цвет можете менять на свой, просто поменяйте red на что-то другое, например white или green )
b (или strong) - делает текст жирный
i (или em) - курсивный текст



Ну и напоследок, для большей красоты давайте добавим фон для сайта:) Для этого между тегами head вставите такую строчку
<style>
body{
 background-image: url(http://recsgames.ru/filez/15.jpg);
}</style>



создание сайта скриншот 1 папка

В целом мы написали сайт на чистом html, но сайт можно сделать ещё более красивым и приятным к просмотру! Для этого используется css, но css я напишу вам в следующей статье т.к. это можно отнести в отдельную большую тему. Спасибо вам за прочтение моего урока) Кстати, поделитесь пожалуйста ссылочкой на статью или портал RecsGames.ru с друзьями! (так вы скажете мне спасибо ещё больше! :-) )



Другие статьи и видео про создание сайта :)


Полезные редакторы и программы для создания сайта






info:

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