Пара слов от автора.
Итак, пришло время отсортировать статьи на портале и воссаздать когда-то забытый раздел портала о html,css,php,js - проще говоря раздел о создании сайта.
В этой статье я вам расскажу как сделать свой сайт самостоятельно и совершенно бесплатно!
Для создания своего сайта не нужны никакие заурядные способности в программировании, лично из своего опыта, я могу сказать, что написал ЭТОТ портал, где вы находитесь, при помощи базовых знаний языков программирования и потратил на это очень мало времени.
Итак, давайте приступим! Для начала сядьте поудобнее, налейте себе чай и запустите обычную программу 'Блокнот' (Notepad) на компьютере, есле вы пишете на смартфоне, то запустите любой текстовой редактор.
Для начала давайте я ознакомлю вас с тем, с чем мы будем иметь дело. Для создания сайта мы будем использовать html, он является крайне простым и популярным, поэтому для начала это очень подойдёт.
Но для создания более хорошего и красивого сайта, помимо html нужно использовать стилевой css, он отвечает за внешний вид сайта, а в середине я подведу вас к использованию php - это язык программирования, который используют 70%-80% интернет-сайтов т.к. он крайне удобен, но об этом позже.... Всё готово, давайте начнём создавать сайт!
Для написания вашего сайта вам понадобится только программа БЛОКНОТ (Лучше всего использовать Notepad++ т.к. там есть подсветка систмных фраз, команд и прочей мудрости искуственного интелекта)
Итак, налевайте чай и приступайте к работе над сайтом.
Шаг 1.Для начала нам нужно создать папку, где будет размещатся ваш сайт - Создайте папку с названием 'site'(где угодно),
Шаг 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>
Итак, если вы запустите эту страничку в браузере, то увидите примерно следущее:
Текст более-менее выровнился, и всё стало более-менее приято для глаз. Расшифровка тегов
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>
В целом мы написали сайт на чистом html, но сайт нвыглядет квадратным и скучным. Для его оживления можно использовать css, но про css я напишу вам в следующей статье т.к. это можно отнести в отдельную тему СТИЛИЗАЦИИ сайта.
.png)
