">

События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

"Деньги не пахнут" смысл цитаты и её история


Ресторан, построенный в туалете. Уникальные места СПб.


Какими были трамваи в Выборге? Выборг трамваи.


Фильмы ужасов, которые стоит посмотреть. Часть 1.


Защита сайта от СПАМА. проверка в форме.


Тайны картин и скульптур. Обман зрения


Голубой город. Сиди-Бу-Саид. Тунис.


Рисунки психически больных людей, душевнобольных


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


Шокирующий факт о сфинксах в Петербурге


Казанский собор. Тайна собора. Тайны Петербурга.



“ В цивилизованном обществе антисемитизм — нижнее белье, в нецивилизованном — верхняя одежда.”

дед Мазай

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

Это факт!


16 февраля 1568 года, во время разгара борьбы Филипа II с протестантизмом, испанская инквизиция вынесла смертный приговор всем жителям Нидерландов.

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

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

Делаем простой сайт своими руками. Урок 1.


html, css, php, js, java script, урок, уроки, своими руками, сайт, сделать сайт, как сделать сайт, пример сайта, простой сайт, написать сайт, бесплатно, стоит ли делать сайт, как сделать сайт,


Пара слов от автора.
Итак, пришло время отсортировать статьи на портале и воссаздать когда-то забытый раздел портала о html,css,php,js - проще говоря раздел о создании сайта.


В этой статье я вам расскажу как сделать свой сайт самостоятельно и совершенно бесплатно!
Для создания своего сайта не нужны никакие заурядные способности в программировании, лично из своего опыта, я могу сказать, что написал ЭТОТ портал, где вы находитесь, при помощи базовых знаний языков программирования и потратил на это очень мало времени.


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

Для начала давайте я ознакомлю вас с тем, с чем мы будем иметь дело. Для создания сайта мы будем использовать html, он является крайне простым и популярным, поэтому для начала это очень подойдёт.

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




Для написания вашего сайта вам понадобится только программа БЛОКНОТ (Лучше всего использовать "Notepad++" т.к. там есть подсветка систмных фраз, команд и прочей мудрости искуственного интелекта)

Итак, налевайте чай и приступайте к работе над сайтом.

Шаг 1.Для начала нам нужно создать папку, где будет размещатся ваш сайт - Создайте папку с названием 'site'(где угодно),

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

Шаг 2.Создайте в ней "новый текстовой документ" (Нажмите правой кнопкой мыши и из открывшегося мини-меню выберете "Создать"->"новый текстовой документ") и в открывшемся блокноте (текстовом документе) напишите или скопируйте и вставьте следующий код:


<html>
<head>
</head>
<body>
</body>
</html>


веб сайт файл

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

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



Давайте расшифруем, что значит этот когд:


<> - в такие скобки надо обязательно ВСЕГДА прописывать ТЕГИ, они дают понять роботу, что это команды с помощью которого создается скелет или фундамент вашего сайта (они форматируют ваш текст как Microsoft Word, иными словами), а не простой текст. Теги, скобочки, команды - можете по-разному их называть, смысл не меняется, но если вы их не пропишите, то не будет и сайта, а будет огромный неразличаемый текст.

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

head - в этот тег обычно вставляются скрипты, иконки, стили для сайта

body - место, где вы будите размещать весь основной текст вашего сайта, другими словами - контент будь то просто текс, картинки или видео

/ - эта палочка обозначает закрывающий тег.



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


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



И так, теперь мы получили нашу первую веб страничку (вообщем-то это уже можно назвать САЙТОМ, но совсем простеньким):


вебмастер скриншот файл


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

Теперь, когда вы ознакомлены с созданием простой странички, я вас научу делать красивые странички. Как например ЭТОТ портал, где вы сейчас находитесь
красиво оформление
Итак пишите следущее:


<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 я напишу вам в следующей статье т.к. это можно отнести в отдельную тему СТИЛИЗАЦИИ сайта.




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)