Время на Земле
Сейчас год Собачки
:-) !

Что было в этот день?
Узнать фазу луны
Факт о мире

Длина орбиты, по которой Земля движется вокруг Солнца, в 23 тысячи раз больше длины экватора Земли.
Следующий факт »

Всё плохо и грустно?

время сыра


961.Разговаривают двое в пивной.
- Как-то на вечеринке я поспорил, что за один присест выпью двадцать
бутылок пива, - рассказывает один, - и выиграл спор.
- И без каких-либо последствий?
- Увы, с последствиями. С тех пор меня не принимают ни в какую
компанию.

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

“Английский официант ждет распоряжений, исполняет их и никогда их не предвосхищает; если вы передумаете, он не выказывает ни удивления, ни недовольства. Итальянский официант заранее создает себе совершенно четкое представление о том, где вы будете сидеть и что есть, и если вы вздумаете обмануть его ожидания, он вас зарежет.”

Бернард Шоу

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

Угадай страну


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


Первый снег под утро.
Он едва-едва пригнул
Листики нарцисса.
Басё

* * *

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

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

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





Ра оставил тебе послание!... (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:

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


Что-то...

Вы чай из улиток не желаете? :)