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

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

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

Создание сайтов бесплатно самостоятельно | Создание сайта самостоятельно бесплатно с нуля 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 и отправить на ваш хостинг в заготовленную заранее папку. Теперь разархивируйте его и удалите архив. Все, теперь ваш новый сайт будет доступен по назначенному вами адресу!

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

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

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



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

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

как сделать картинку ссылкой в html

Как сделать картинку ссылкой в html на любом сайте!

Узнай сейчас как сделать картинку ссылкой в html на своем сайте! Здравствуйте, уважаемые друзья и …

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

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

    • https://pribylwm.ru pribylwm

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

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