Создание сайтов бесплатно самостоятельно | Создание сайта самостоятельно бесплатно с нуля 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 и сохраняете на своем рабочем столе или в любом другом удобном для Вас месте на вашем компьютере. Теперь сохраненный файл будет открываться в вашем браузере при его вызове. И посмотрите, что у Вас должно получиться. Скриншот “Сайт с нуля“:
Это моя заготовка! А теперь мы с вами приступим к созданию вашего сайта с нуля. Я буду вам рассказывать и показывать примеры как создавалась данная веб-страница. Ну, а Вы в свою очередь повторяйте мои действия, но уже со своими картинками и текстовкой. Это для того, чтобы ваш вновь созданный сайт был уникален и соответствовал тому, что Вы сами задумали создать. Договорились? Давайте начинать …
Поэтапное создание сайтов бесплатно самостоятельно!
Для создания собственного сайта или отдельной веб-страницы, вам будет нужно выполнить всего лишь три шага:
- Создаем шаблон нашего будущего сайта
- Верстаем наш будущий веб-сайт и наполняем его уникальным контентом, чтобы он начал работать
- Закачиваем наш сайт на хостинг
Вот все не хитрые три действия, которые мы с вами прямо сейчас выполним и получим на уникальный веб-сайт, который будет работать и приносить нам не только радость, но и прибыль!
Скачайте заготовленные мной для Вас исходные файлы сайта здесь. А теперь разархивируйте скачанный файл. В нем будет три файла: файл – 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 кодом это хорошо. а где его потом бесплатно разместить? вот самый главный вопрос.
Это уже следующий вопрос. О котором к стати можно будет как-нибудь рассказать!