Домой / Сайтостроение / Создание сайтов бесплатно самостоятельно | Пошаговая инструкция

Создание сайтов бесплатно самостоятельно | Пошаговая инструкция

создание сайтов бесплатно самостоятельно
создание сайтов бесплатно самостоятельно

Создание сайтов бесплатно самостоятельно | Создание сайта самостоятельно бесплатно с нуля HTML | Инструкция и пример!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru!


Мне очень приятно, что Вы снова со мной и сегодня у нас с вами очень интересная тема, особенно для тех, кто собрался создать свой сайт самостоятельно с нуля. И это потому будет для них интересно и полезно, что я сейчас расскажу как это сделать и покажу пример создания сайтов бесплатно самостоятельно практически с нуля в HTML.

После чего Вы сами сможете создавать свои сайты, подписные и продающие страницы на примере, который я вам сейчас дам.

Ну, что давайте приступим к освоению такого интересного и нужного дела, как создание сайтов бесплатно самостоятельно с нуля. Вот вам инструкция и пример ...

Простое создание сайтов бесплатно самостоятельно — Пример и инструкция!

Поэтапное создание собственного сайта при помощи фотошопа и HTML кода, которые Вы сейчас освоите за пару минут в буквальном смысле. Не верите? Ну что же давайте проверим?!

Пример: Создание сайтов бесплатно самостоятельно — Создание простого html кода для нашего будущего сайта, который будет служить основой для него. Этот html код состоящий всего лишь из одной веб-страницы и он будет указывать браузеру, что, как и где правильно отображать при открытии нашей веб-страницы. Вот этот простейший html код страницы:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <base href="https://pribylwm.ru/create website/index.html" />
  <title>Ваш новый сайт с нуля</title>
  <meta name="description" content="Узнай как создать сайт с нуля за пять минут самостоятельно" />
  <meta name="keywords" content="сайт с нуля, сайт с нуля самому, создать сайт с нуля" />
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
  <div id="page">
  <header>
    <a href="/" title="" class="logo"><img src="images/logo.png" alt="Ваш новый сайт" /></a>
    <div class="phone">+7 (123) 12-34-56</div>

    <nav>
      <ul id="top_menu">
        <li><a href="https://pribylwm.ru/chem-ya-zanimayus">О сайте</a></li>
        <li><a href="https://pribylwm.ru/reklama-uslugi">Наши услуги</a></li>
        <li><a href="https://pribylwm.ru/kontakty">Контакты</a></li>
      </ul>
    </nav>

    <div class="header_img">
    <img src="images/header_img.jpg" alt="Ваш новый сайт с нуля" />
    </div>
  </header>

  <section id="content">
    <h1>Приветствуем Вас на сайте созданном с нуля!</h1>
    <img src="images/content_img.jpg" alt="Картинка" class="float-right" />
    <p>Здравствуйте! Мы рады приветствовать Вас на сайте созданном с нуля! Мы предлагаем Вам последовать нашему примеру создания веб-сайта самостоятельно!</p>
    <p>Только у нас Вы сможете узнать, как можно быстро и совершенно бесплатно, а также не имея навыка создать свой первый сайт с нуля быстро и качественно!</p>
    <p>Если Вам понравилось оформление данного сайта созданного практически за пять минут, то просим Вас зайти на страничку с описанием и примерами по созданпию собственного сайта с нуля и научиться это делать буквально за пять минут.</p>
  </section>
  <footer>
  <a href="https://pribylwm.ru" title="Блог Валерия Бородина">Собственный сайт за пять минут!</a><br />Все права защищены
  </footer>
  </div>
</body>
</html>

Вам нужно просто скопировать данный код и поместить его в любой текстовый редактор, лучше конечно в Notepad++. Затем сохраните этот документ в расширении html. Если Вы не знаете как это сделать, то объясняю: После помещения скопированного кода в текстовый редактор, Вы жмете сохранить и в строке «Имя файла» прописываете index.html и сохраняете на своем рабочем столе или в любом другом удобном для Вас месте на вашем компьютере. Теперь сохраненный файл будет открываться в вашем браузере при его вызове. И посмотрите, что у Вас должно получиться. Скриншот «Сайт с нуля»:

сайт с нуля
сайт с нуля

Это моя заготовка! А теперь мы с вами приступим к созданию вашего сайта с нуля. Я буду вам рассказывать и показывать примеры как создавалась данная веб-страница. Ну, а Вы в свою очередь повторяйте мои действия, но уже со своими картинками и текстовкой. Это для того, чтобы ваш вновь созданный сайт был уникален и соответствовал тому, что Вы сами задумали создать. Договорились? Давайте начинать ...

Поэтапное создание сайтов бесплатно самостоятельно!

Для создания собственного сайта или отдельной веб-страницы, вам будет нужно выполнить всего лишь три шага:

  1. Создаем шаблон нашего будущего сайта
  2. Верстаем наш будущий веб-сайт и наполняем его уникальным контентом, чтобы он начал работать
  3. Закачиваем наш сайт на хостинг

Вот все не хитрые три действия, которые мы с вами прямо сейчас выполним и получим на уникальный веб-сайт, который будет работать и приносить нам не только радость, но и прибыль!

Скачайте заготовленные мной для Вас исходные файлы сайта здесь. А теперь разархивируйте скачанный файл. В нем будет три файла: файл — index.html, папка — images и папка — css.

Первый шаг: Создание сайтов бесплатно самостоятельно — Создание шаблона сайта:

Эти действия мы с вами будем выполнять в самом удобном и популярном графическом редакторе - Photoshop CS6. Если у Вас его еще нет, то найти и скачать рабочую версию на русском языке Вы сможете вот здесь: СКАЧАТЬ Photoshop CS6

Теперь открываем свой Photoshop CS6 и создаем новые картинки для вашего нового сайта. В папке — images лежат три картинки: 1 - header_img, 2 - content_img и 3 - logo. Теперь по очереди замените каждую картинку своей, но учитывая при этом их размер и расширение. Вот пример на скриншоте, как изменить картинку:

как изменить картинку
как изменить картинку

Все просто! Поместите в свой Photoshop CS6 картинку и посмотрите ее параметры, нажав на вкладки «Изображение» и затем «Размер изображения». Затем создайте новый документ с аналогичными размерами и поместите туда свою картинку. Теперь сохраните ее с расширением JPG и аналогичным этой картинке названием. Проделайте такие же действия со всеми картинками из папки images.

Теперь замените картинке в скачанной папке images на созданные вами картинки. Первый шаг - создание сайтов бесплатно самостоятельно Вы прошли!

Второй шаг: Создание сайтов бесплатно самостоятельно — Так называемая верстка:

Откройте скачанный файл — index.html в текстовом редакторе Notepad++ и замените текст на свой. Также не забудьте изменить ссылки на свои и поменяйте путь к файлу со стилями на свой. Также Вы можете в папке CSS в файле style.css изменить цвета фона, текста и т.д. На этом наша верстка закончена.

Третий шаг: Создание сайтов бесплатно самостоятельно — Закачиваем сайт на хостинг.

Полученные файла вам нужно заархивировать в формат zip и отправить на ваш хостинг в заготовленную заранее папку. Теперь разархивируйте его и удалите архив. Все, теперь ваш новый сайт будет доступен по назначенному вами адресу!

Вот на этом все на сегодня! Пишите свои комментарии! Если что-то не получилось или возникли какие-либо другие трудности, то я постараюсь вам обязательно помочь!

Кстати, Вы можете вот на этой странице глянуть, как создать одностраничник новичку с помощью специальной программы. Здесь все подробно описано и прилагается программа для скачивания!

Жду ваших сообщений!



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

  • http://vk.com/id302798225 Яков Кирилов

    Создать файл с html кодом это хорошо. а где его потом бесплатно разместить? вот самый главный вопрос.

    • https://pribylwm.ru pribylwm

      Это уже следующий вопрос. О котором к стати можно будет как-нибудь рассказать!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу