События в этот день

Узнать фазу луны





Присяга - это ложь и обман.


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






Стоит ли работать в Яндекс Еде или Дивилири?(Личный опыт)


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






многоженство и многомужество это нормально?


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






В Библии написана правда. Доказательства.


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






Вы не знали этого про СССР! ШОК!


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






УРОК 2. Делаем монстра из глины.


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






УРОК 1. Лепим рыцаря из глины.


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






Почему различать духи на женские и мужские - глупо?


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








“Порою мне кажется, что Творец очарован английской монархической системой: Бог царствует, но не управляет.”

Станислав Ежи Лец

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




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

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





Это факт!


 Великий Рембрандт, создавший за свою жизнь более 700 шедевров живописи, был настолько беден, что в 1656 году заявил о своем банкротстве. Чтобы заплатить за погребение своей любовницы Хендрикье Стоффельс, он был вынужден продать могилу своей жены Саскии ван Эйленбюрх, изображенной на значительном числе его картин и рисунков.

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

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

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



Что-то...

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