Как создать свой сайт бесплатно самому от А до Я, создать сайт www ru.

Как создать свой сайт бесплатно своими руками

  1. Создаем простой сайт на HTML – пример создания простого одностраничного сайта на HTML. Здесь же упоминаются некоторые соглашения об именах и особенности HTML-страниц.
    • Сайт на Wix – создаем свой сайт с помощью онлайн конструктора Wix быстро и бесплатно.

Лендинг (Landing Page) – на примерах рассмотрим создание целевой товарной страницы.

  • Сайт на A5 – поэтапно рассмотрим создание сайта в простом конструкторе A5.
  • Сайт на Nethouse – создадим свой первый сайт в конструкторе Nethouse.
  • Сайт на WordPress – пошаговая инструкция покажет, как создать сайт на WordPress.
  • Сайт на Joomla – следуя нашей инструкции вы сможете создать свой сайт на Joomla.
  • Рейтинг конструкторов сайтов – выбираем лучший онлайн конструктор под ваши цели.
    • Создание шаблона сайта – пошаговое создание шаблона сайта с помощью Adobe Photoshop, выбор фрагментов и сохранение для использования в страницах.
    • Верстка сайта – основные HTML-теги и способы организации контента статических страниц.
    • Сайт на PHP – отличие статических и динамических страниц. Сайт преобразуем в 3-х страничный динамический. Даются начальные сведения о системах управления контентом (CMS).

    Вы готовы? Итак приступим!

    Для начала создадим простейший сайт на HTML. Состоит он всего из одной страницы.

    Перейдем к делу. Перед Вами текст простейшей HTML-страницы:

    Кстати, index.html – не случайно выбранное нами имя. Конечно, не обязательно, но считается хорошим тоном главную (или ту, которая должна отображаться первой) страницу назвать именно так. По умолчанию, любой веб-сервер страницу пытается выдать браузеру страницу index.html при обращении к нему (необязательно, потому, что на любом веб-сервере это настраивается).

    Полный вариант сайта вы можете скачать в архиве (10,8Mb). После распаковки архива запускаем html/index.html.

    Для того, чтобы создать сайт самому, необходимо выполнить 3 этапа работ:

    Создание шаблона сайта

    Создаем в Adobe Photoshop новый документ. Задаем имя – MySite.

    Устанавливаем цвет фона F7F7C5 в шестнадцатеричном виде или выбираем с помощью палитры цветов.

    В пункте меню «Просмотр» — «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа.

    Слева от логотипа, как и справа от контактного телефона, проводим направляющие, которые позволят обозначить рамки по ширине сайта.

    Далее вставляем изображение в шапку сайта. Подходящее изображение вы можете найти на любом из сервисов, предлагающих загрузку изображений.

    Также, используя инструмент «Текст» и шрифт «Arial», добавляем текст главной страницы, здесь рекомендуем использовать блочный текст для последующей работы с ним.

    Перемещая правую границу основного текстового блока, вставляем изображение в тексте страницы (справа от текста).

    Под линией с помощью инструмента «Текст» (шрифт Arial) размещаем копирайт в подвале страницы.

    В результате проделанных работ получаем эскиз сайта, который представлен в начале страницы. Однако, если вы решите внести собственные изменения в макет страницы, то PSD-файл вы также найдёте в архиве к странице.

    Макет создан, необходимые фрагменты получены, можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми примитивными возможностями Adobe Photoshop.

    Верстка сайта

    ВАЖНО! Первой строкой файла должна быть строка вида

    Обратите внимание, теги формируют пары – открывающий и закрывающий. Последний всегда заканчивается на </ .

    Внутри <head>…</head> располагаются теги, которые не отображаются в основном окне. Как правило, они начинаются словом meta, и называются мета-тегами, а вот тег <title>…</title> отображается в заголовке окна браузера и используется поисковыми системами.

    Существует несколько способов организации контента. Наиболее популярные из них – организация с помощью блоков ( <div>…</div> ) и в виде таблиц ( <table>…</table> ).

    На примере нашего сайта, структура его элементов выглядит следующим образом:

    Более подробно о всех HTML-тегах, их назначение, использование таблиц стилей (CSS) можно изучить, воспользовавшись книгами в разделе Языки разметки, так же полезные советы по организации контента, верстке, CSS приводятся в статьях.

    Простейший пример вёрстки сайта из головы

    На нашей странице все определено заранее и не будет изменяться при обращениях пользователя. Такие страницы называются статическими, и для их описания вполне хватает средств HTML. Если же предоставляемая пользователю информация изменяется в зависимости от каких либо факторов или запросов, говорят, что страница содержит динамический контент (является динамической).

    Это все касается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript.

    Мы не стали углубляться в дебри программирования на PHP и для наглядности ограничились простыми вставками фрагментов страницы. Суть следующая — мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php, затем в страницах с текстовым содержанием, с помощью PHP, вставляем в макет сайта. Делается это с помощью следующего кода:

    Для того, чтобы файл (скрипт PHP) выполнился, он должен быть обработан интерпретатором языка. Такой интерпретатор обязательно есть на веб-серверах, который и обеспечивает PHP кода. Как же посмотреть, что изменилось?

    Установка не требует никаких усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа, создаем ярлыки. Вот и все! Denwer к работе готов!

    Подробнее о PHP и его использовании — в статьях и книгах.

    Но до сих пор мы создавали сайт своими руками от начала и до конца. В настоящее время существуют средства облегчающие этот процесс – системы управления контентом (CMS – content management system). К наиболее популярным относятся Joomla!, WordPress, Drupal . Для них разработаны сотни шаблонов и дополнений, позволяющих получить профессионально выглядящий сайт с любой функциональностью.

    Как вариант вы можете использовать онлайн-конструкторы сайтов вроде Wix , A5 и других.

    Мы готовы опубликовать свой сайт в Интернет. Что для этого нужно?

    Во-первых, доменное имя. Доменное имя или домен – символическое имя, под которым Ваш сайт будет известен в сети. Получить его можно либо, купив у регистратора, либо бесплатно, но в виде поддомена от одного из бесплатных хостингов. Более подробно читайте в статье как подобрать домен.

    • Цена — есть как платные, так и бесплатные хостинги.
    • Объем предоставляемого трафика и дискового пространства
    • Поддержка тех или иных средств (PHP, MySQL, возможность развертывания CMS, наличие дополнительных скриптов и т.д.)

    Размещение сайта на сервере

    Обычно это загрузка содержимого по HTTP-протоколу, с использованием панели управления хостера или по FTP с помощью FTP-клиента.

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

    Самый простой способ создания сайта

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

    Стоит отметить, что данные сервисы обладает целым рядом явных преимуществ по сравнению со многими другими подобными решениями.

    • Шаг первый – регистрируемся на сайте сервиса. Регистрация абсолютно бесплатна.
    • Шаг второй – входим в свой только что созданный аккаунт и уже в нем выбираем категорию и подкатегорию для создаваемого сайта.
    • Шаг третий – выбираем один из нескольких сотен вариантов графических шаблонов, который позволит придать сайту красочный вид. Стоит отметить, что при желании можно создать свой собственный шаблон, используя технологию HTML5.

    Как видите, выполнив несколько простейших действий, вы создадите свой сайт быстро и бесплатно! Если, несмотря на всю простоту и интуитивную понятность интерфейса, у вас возникнут сложности с использованием конструктора – не беда, воспользуйтесь нашей пошаговой инструкцией по Wix. Попробуйте проделать описанные выше шаги и убедитесь в этом сами.

    Заключение

    Мы уверены, что у вас возникнут вопросы при создании своего первого сайта, а может и не первого, поэтому милости просим на наш замечательный форум вебмастеров .