Всем привет! Думаю, каждый когда долгое время сидел в интернете, хотел создать и свой сайт, с блекджеком и заработком. Сегодня я расскажу быстро и подробно как это можно сделать. Сразу говорю, всё что будет продемонстрировано в статье бесплатно, без водяных знаков, и не требует никаких средств, от Вас требуется только желание и компьютер.
Часть 1. Введение.
Есть 3-ри способа создания сайта. Но перед тем, как я расскажу подробнее, посмотрим на алгоритм "вёрстки" от старта до финала.
АЛГОРИТМ:
1. Подготовка папки.
2. Вёрстка сайта с использованием одного из способа, о которых речь пойдёт дальше.
3. Оформление домена.
4. Загрузка на хостинг.
5. Подключение рекламы и аналитики.
Итак, как было сказано выше, мы можем пойти по одному или, ещё лучше, как будет дальше в статье, сразу всех 3-х способов. А это:
1. Написание страницы самостоятельно и использованием "html, css, js".
2. Использование готового шаблона из интернета.
3. Использование конструктора.
Мы будем совмещать эти способы. Каким образом? А всё просто, с помощью конструктора сделаем макет страницы, с помощью шаблонов дополнительные страницы, а с помощью основ html мы отредактируем всё так, как нам нужно.
Вот мой сайт: Unesell Inc. - Вы можете посмотреть, что может и у вас получится в будущем при желании и следовании этой статье :)
2. Основы HTML
Сейчас кратко рассмотрим основы html - это язык гипертекстовой разметки, скелет сайта.
Создадим на своём компьютере папку, назовите её как-нибудь. В папке создайте файл "index.html" (О нём далее). Если не знаете как, создадите текстовый документ и место ".txt"напишите ".html". Далее вставляем "скелет" страницы, или "дерево".
Рассмотрим подробнее:
<!DOCTYPE html> <!-- Объявление формата документа -->
<html>
<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
<title>...</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей (CSS) -->
<script src="script.js"></script> <!-- Подключаем JS -->
</head>
<body> <!-- Основная часть документа -->
</body>
</html>
Более подробную информацию Вы можете найти в интернете.
<h1> / <h2> и так далее до "h6" - это заголовки.
<p>TEST</p> - Текст с абзацем.
<a>TEST</a> - Простой текст.
Как вы можете понять, весь сайт, текст на странице состоит из этих элементов, и редактируя их, очевидно, поменяется содержимое страницы.
Этим мы и будем манипулировать с нашими шаблонами. Но, сначала, попробуйте создать свою страницу, на чистом html используя "дерево" выше и теги форматирования текста. Помните, желательно все теги форматирования (h1, p, a) мы должны размещать внутри тегов body, и каждый открывающий тег <p> мы должны закрывать </p> после ввода текста внутри.
3. Шаблоны и конструкторы.
Теперь приступим к самому интересному - пишем в поиске "шаблон html css js". Переходим на несколько первых сайтов с поисковых запросов.
Далее всё легко, выбираем понравившийся шаблон и скачиваем его. Разархивируем его в нашу созданную папку и открываем файл "index.html" - главный исполняемый файл, в каждом каталоге должен называться именно так, это точка входа, так сказать.
Перед нами редактор / блокнот, в котором уже знакомая нам картина. Дерево сайта, в котором мы видим уже знакомые нам теги. Откройте этот файл у себя в браузере, а в текстовом редакторе нажмите сочетание клавиш "Ctrl + F". В окне поиска введите фразу / текст с сайта, которую хотите редактировать, и собственно, отредактируйте на свою.
Сохраните файл сочетанием "Ctrl + S" и обновите страницу в браузере с помощью клавиши "F5".
Тадам, мы видим страницу, в котором, место старого текста какой мы искали и изменяли - наш текст. Вот так вы можете создать сайт, изменяя шаблон. Далее, добавляя более новый текст, и изменяя изображения. Для ещё большей "могущественности" поищите в интернете "Основы CSS". После того как разберётесь, поздравляю, вы уже можете не только редактировать шаблоны, но и попробовать написать что-то своё. Главное, помните, в любой ситуации - гуглите.
Насчёт конструкторов, нет, не про WIX не про UCOZ речи быть не может. Это как игрушка с водяными знаками и бешеными ценами, а нам нужен инструмент, который строит сайт, но локально, без своего хостинга в браузере. Хороший, и даже лучший пример, программа - Mobirise. Скачиваем программу и дальше разберётся любой школьник. Выбираем бесплатный шаблон и строим сайт с помощью блоков и изменяя текст в них.
После этих манипуляций и "публикации" в нашу папку (Выбираем локальный экспорт), мы получили готовый сайт, уже не как шаблон с изменённым текстом, а как собственный сайт.
Какой смысл и в чём прикол использовать эти два способа, особенно вместе? Отвечаю: Вы можете так же полностью редактировать макеты, добавляя свои блоки. Значит, имея красивую страницу, будь по шаблон или построенная страница, мы можем удалить всё лишнее и добавить своё новое и сделать страницу ещё лучше и красивее.
4. Готовимся загружать страницу на сервер.
После того как мы создали страницу, сами, с использованием шаблона или конструктора, или всё вместе, не важно, мы можем загрузить наш сайт на хостинг. Хостинг — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети.
Но, сначала нам нужен домен, домен это адрес в интернете в виде: "yandex.ru", "vk.com", и другие подобные адреса.
Пишем в поисковике "бесплатный домен" и выбираем первые результаты. Я использую сервис "nic.ua", так как я житель Украины, в России это "nic.ru". Если Вы с Украины, то вам первый вариант, если с России, соответственно второй. Я использую бесплатный домен "pp.ua". Так же введите в поисковую панель адрес, на который будет подключен ваш сайт. То есть, например пишем "yakrytoi" и выбираем в списке бесплатный вариант "yakrytoi.pp.ua", но, если у Вас есть деньги, которые не жалко, вы можете купить нормальный домен для своего сайта. Что я настоятельно рекомендую после изучения полных основ и пару созданных сайтов.
Теперь, когда у нас есть домен, нам нужен хостинг. Для поиска бесплатного хостинга используем так же поисковик, и выбираем что подходит Вам. Я могу порекомендовать, например, "beget". Используем бесплатный хостинг.
После всего этого, можно сказать, что мы почти у цели, остались малые, но сложные детали. Переходим в файловый менеджер, и загружаем туда наш сайт. Лучше всего использовать FTP.
После загрузки, если существует файл "index.html", и перехода по домену выданном нашим хостингом, мы увидим, что наш сайт теперь в интернете. Мы можем делиться с ним везде. Но, ссылка не много не красивая, правда? По этому переходим в раздел "Домены", вводим домен который мы регистрировали на "nic" и следуем инструкции. (Смысл - написать в "серверах имён" определённые записи, которые будут перенаправлять на наш сайт.)
Готово, вы создали свой сайт, выложили на хостинг и подключили домен и всё бесплатно без всяких денежных трат и опыта в программировании и вёрстке.
5. Монетизация и аналитика сайта.
Одна из главных и последних глав в нашей статье, это монетизация нашего труда.
Существует множество партнёрских сетей. НО. Просто взять и подключить рекламу нельзя. Должны быть обязательно выполненные некоторые пункты, это, самый главный - сайт должен быть наполнен. (Иметь не одну страницу, а хотя бы 15 с разным контентом), и в частности, иметь каждый день посетителей. Но, Вам может повести, и если у вас хороший сайт (есть несколько страниц с контентом, не нарушает принципы сообщества и морали) то вам могут одобрить заявку. Главные партнёры - это РСЯ (Рекламная сеть Яндекс) и Google Adsense.
⚠ ВНИМАНИЕ - если вы уверены, что ваш сайт наполнен и большой, он уже на хостинге с нормальным доменом, только тогда регистрируйтесь в партнёрской сети и подавайте заявку на свой сайт. После этого его или примут или отвергнут с указанием причины. (В основном, с первого раза не всегда принимают, но заявку можно отправить повторно или написать в поддержку, если в РСЯ заблокировали сайт / домен). Для подтверждения, вы должны будете разместить на главной странице сайта определённую часть кода (скрипт) который подтвердит право собственности на сайт
Далее - всё легко, создаём блок рекламы, настраиваем, и вставляем в код сайта. Реклама работает, а за просмотр и клики ваших гостей вы получаете копеечку.
Так же, рекомендую подключить аналитику, тоже от Яндекса или Google. Принцип подтверждения тот же, настройка такая же.
6. Выводы.
Вот и всё, быстрый и краткий экскурс в создание сайта и начале заработка положен и Вам известен. Конечно, это не делается за один день, могут быть проблемы, трудности, но я уверен, что вы их обязательно пройдёте и решите. Я в Вас верю. С вами был Станислав Мирошниченко, переходите на мой сайт (Поддержите меня как раз :)
Всем спасибо и пока! Читайте так же другие мои статьи)