Как создать пустой сайт

Быстро создать пустой сайт

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

Сегодня вы без труда можете получить такой «чистый» сайт от компании grupla.ru. Зарегистрировать его так же просто, как создать свою страничку в социальной сети, а возможности его помогут размещать общедоступную информацию как коммерческого, так и личного характера.
Алгоритм создания такого сайта просто и совсем не сложен. Переходите на сайт компании grupla.ru и создаете свой собственный сайт на основе готовых решений. Для этого на главной странице кликаете кнопку «создать сайт сейчас» и попадаете на страницу создания своего сайта (http://grupla.ru/create). Вы можете выбирать любое решение по дизану, поскольку после регистрации сайта все это можно легко изменить.
Компания предлагает два вида использования ресурса: бесплатный с ограниченными возможностями, и платный, при котором вы можете получить собственное доменное имя, почтовые аккаунты, автоматизацию продвижения сайта и достаточно большое место под размещение своего сайта.
Выбор всего функционала и настройка сайта проводятся из простой и понятной панели управления, доступ к которой открывается после подтверждения адреса электронной почты.

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

Во многом именно создание собственного сайта с полной его настройкой в современной высокопроизводительной системе управления — это оптимальное решение для сайтов всех уровней сложности. От визитки до интернет магазина.

• Главная |
• Как создать сайт |
• Создать пустой сайт

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

HTML-сайты пользовались широкой популярностью в 90-х и 2000-х годах. Просто потому, что особых альтернатив не было. Их создание – основа основ, азбука веб-разработчика. Сейчас их, в основном, используют для обучения основам вёрстки веб-страниц, изучения HTML и CSS, что пригодится при работе вообще с любым движком.

HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.

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

Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например, — тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.

Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.

Шаг 1 – создание страницы формата HTML

Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text — неважно), откройте меню «Файл», выберите «Сохранить как», измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), впишите заголовок веб-страницы и измените расширение на html (оно идёт после точки), после чего сохраните изменения.

Шаг 2 – добавляем разметку веб-страницы

Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:

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

Шаг 3 – работаем со стилями CSS

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

1. body
2. background: #F2F2F2;
3. max-width: 900px;
4. margin: 10px auto;
5. padding: 30px;
6. >
7. h1
8. color: #4C4C4C;
9. padding-bottom: 20px;
10. margin-bottom: 20px;
11. border-bottom: 2px solid #BEBEBE;
12. >
13. p
14. font:italic;
15. >

В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:

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

Шаг 4 – загрузка сайта на хостинг

Понятно, что сайт из примера – не из тех, что публикуют в Интернете и тратятся ради этого на платный хостинг. Но, если вы по тем же принципам, изучив HTML и CSS, создадите действительно стоящий сайт для достижения каких-то целей, то для его отображения в Сети потребуются хостинг и домен.

Выбор хостинга – важная задача. Сайты на HTML легковесны и не требуют для своей работы каких-то суперских мощностей, но, тем не менее, мы рекомендуем использовать качественный хостинг, такой как Bluehost. Это один из самых надёжных и популярных зарубежных провайдеров с огромной базой клиентов (обслуживает более 2 млн доменов), впечатляющим количеством серверов по всему миру (около 120) и хорошими условиями. Стоит он $2.95/месяц, плюс ещё домен дают на первый год в подарок, бесплатный SSL и прочие интересные плюшки.

Скорость работы сайтов Bluehost в Рунете высокая, поскольку сервера находятся в облаке, используется CDN-технология. Провайдер абузоустойчивый – это означает, что ваш сайт не отключат ни при каких обстоятельствах – можете не бояться жалоб конкурентов и прочего. Всё будет работать надёжно. Техподдержка круглосуточная.

Для того, чтобы запустить HTML-сайт на хостинге, достаточно просто скопировать его файлы в директорию с названием домена. Можно использовать встроенный FTP-сервер либо программу вроде Filezilla, но, в таком случае, её придётся настраивать для работы с хостингом. База данных не нужна.

Выводы и рекомендации

Простейший HTML-сайт можно создать в блокноте за несколько минут. Для построения более сложных структур, способных выполнять конкретные задачи и выглядеть на уровне, потребуются углублённые знания HTML5 и CCS3. Этот подход полезен новичкам для обучения, приобретения базовых навыков веб-разработчика. В целом, особого смысла создавать такие сайты в других сценариях нет – гораздо эффективнее использовать конструкторы сайтов (например, uCoz, uKit и другие) или даже движок WordPress, если есть опыт.

Попробовать хостинг Bluehost установка CMS в 1-клик ↵

Быстрый, простой и безопасный хостинг для HTML-сайтов и адекватной ценой. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Тарифы: от $2.95

* Bluehost — самая привилегированная хостинг-компания в мире, обслуживает более 2 млн. сайтов, официально рекомендуемая компаниями WordPress, PrestaShop, WooCoomerce и др.!

Выбор хостинга важен, на чём бы ваш сайт ни был собран. В случае с конструкторами он не нужен (всё нужное получаете сразу из коробки), а для сайтов на CMS и чистом HTML стоит использовать Bluehost. Именно этот хостинг официально рекомендован WordPress.org – это не случайность, провайдер очень надёжный, технологичный.

Как создать сайт

Хотите создать самостоятельно свой сайт, но не знаете, с чего начать? Тогда этот пошаговый урок – для вас. Мы подготовили простые рекомендации для тех, кто не владеет html, css, php и другими навыками профессионального сайтостроителя.

Первый этап. Продумываем идею

Возьмите лист бумаги (или сделайте список в Word) и запишите, зачем вам вообще нужен сайт, каковы его цели и задачи.

Среди таких задач могут быть:

• Продажа товаров или услуг
• Продвижение бренда, коммерческого или персонального
• Продажа рекламы
• Портфолио, представляющее ваш опыт и достигнутые успехи

Возможно, весь сайт вам нужен всего лишь как практика сайтостроения и администрирования. Это косвенная задача, и давайте сделаем всё по-взрослому.

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

Если вам нужен сайт для серьезного проекта – обратитесь к профессиональным разработчикам. Специалисты с большим опытом создания и продвижения сайтов подготовят для вас проект, семантическое ядро, установят и настроят систему управления контентом и шаблон для неё.

Соберите список запросов

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

Чтобы создать качественную структуру сайта, вам нужно собрать список ключевых слов, запросов, по которым вас будут находить посетители. Для этого можно воспользоваться сервисом Яндекс-Вордстат.

Все эти запросы объединяются в группы, называемые «кластерами». Предположим, что вы подписываете свадебные открытки в каллиграфическом стиле на заказ и продаете свой авторский курс по каллиграфии. В вашем списке могут быть такие ключевые слова:

• подписать открытку каллиграфическим почерком
• курс каллиграфии цена
• где подписать открытку
• каллиграфия заказать надпись
• каллиграфия цена
• каллиграфия заказать
• подписать открытку образец
• стоимость каллиграфии
• заказать красивую надпись

После того, как вы объедините эти запросы в группы и добавите к этим группам служебные страницы, у вас получится нечто похожее:

Главная страница

• стоимость каллиграфии
• каллиграфия заказать надпись
• заказать красивую надпись
• каллиграфия заказать
• каллиграфия цена

Услуги

• подписать открытку каллиграфическим почерком
• подписать открытку образец
• где подписать открытку

Курс каллиграфии

Портфолио

Контакты

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

Выбираем платформу для сайта

Поскольку программировать и верстать вы не умеете, обойдёмся без этого: сейчас доступно множество платформ, которые позволяют собрать полноценный сайт без таких навыков и знаний. Среди них можно перечислить:

И это лишь малая часть таких систем управления контентом (CMS), на которых любой новичок может сделать сайт самостоятельно.

Сразу отметим: сайты-конструкторы, подобные Wix, использовать не стоит. Главная причина – их можно использовать только для платной рекламы, поисковые системы работают с ними плохо. Tilda в этом плане отличается более гибким функционалом, но и у нее есть свои ограничения, с которыми вы рано или поздно столкнетесь. Проблема в том, что перенести сайт с этих платформ на другую будет намного сложнее, фактически – невозможно, и вам придётся начинать все работы, по сути, с нуля. Даже если вы к тому времени больше узнаете о вёрстке, работе с базами данных и т.п.

Самая важная причина, по которой не стоит делать сайт на Wix и Tilda: вы будете ограничены теми функциональными возможностями, которые заложены в готовые шаблоны, а также действиями техподдержки. Сделать сайт просто и быстро там можно, но вот просто так уйти оттуда уже не удастся, как не удастся и внести необходимые правки.

В отличие от платформ-конструкторов такие платформы как WordPress или Joomla! предоставляют вам фактически неограниченные возможности по изменению дизайна, добавлению функциональных возможностей, масштабированию и переноса сайта на другую площадку. например, на WordPress вы можете самостоятельно сделать сайт-портфолио, блог или целый интернет-магазин. Поэтому дальнейшие шаги мы будем рассматривать именно на примере WordPress, хотя почти всё то же самое можно сделать и на Joomla! и некоторых других CMS — без необходимости учить вёрстку и программирование.

Выбираем шаблон

Итак, мы решили использовать для создания сайта своими руками WordPress. Большое преимущество этого движка в том, что для него существует множество готовых шаблонов, бесплатных и платных, в пределах 10-100$. Вы можете выбрать подходящий для вашего проекта и быстро адаптировать для себя, без программирования.

Поищите в репозитории WordPress или на таком сайте, как TemplateMonster.com. Все шаблоны удобно распределены по категориям, тегам и другим характеристикам. Вам остаётся только выбрать тот шаблон, который максимально точно соответствует вашим идеям и планам. В хорошем случае вам достаточно просто загрузить свой логотип вместо демо-версии, – и этого достаточно.

Заказываем хостинг и регистрируем домен

Теперь время найти площадку для размещения своего сайта. Хостинговых компаний, предоставляющих такие площадки, очень много. Для простого сайта вам понадобится самый базовый тариф, стоит такой на год около 1000-1700 рублей. Есть хостинги, которые предоставляют бесплатный хостинг, хотя и с очень ограниченными возможностями.

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

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

Как выбрать тариф хостинга

Для начала возьмите самый простой и дешевый. Большинство хостеров позволяют сменить тариф буквально налету, добавив вам системные ресурсы и пространство на диске.

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

Выберите домен

Доменное имя – это адрес, по которому будет доступен ваш сайт, и которое должны запомнить пользователи вашего сайта. Поэтому домен должен соответствовать имени вашего бренда, компании, или вашему имени, если это персональный сайт. Например, sashaivanov.ru.

Однако вы можете выбрать в качестве домена имя, содержащее ключевое слово, описывающее содержание сайта. Это хорошо для продвижения.

Помните, что имя должно быть недлинным, хорошо запоминаемым и хорошо звучащим.

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

Вам остается лишь зарегистрироваться на хостинге, выбрать тариф и начать разворачивать свой сайт.

Как правило, компания-хостер предоставляет тестовый бесплатный период, в течение которого вы можете понять, нравится ли вам этот хостинг или стоит поискать другой. Используйте эту возможность, оплатить вы успеете по истечении срока (обычно это 7-14 дней).

Настраиваем сайт

Итак, вы купили хостинг и доменное имя. Время установить систему управления контентом — WordPress. Есть три основных способа:

• Зайдите в официальный репозиторий WordPress и скачайте последнюю официальную версию. Выбирайте русифицированную. После этого скачанный архив надо загрузить на сервер с использованием протокола SSH или FTP. Если вы не знаете, как это сделать – переходим к пункту 2.
• В этом случае этот же архив вы должны загрузить через панель управления хостингом, «Менеджер файлов». Загружаем архив, по окончании загрузки разархивируем встроенными инструментами панели управления. Готово! Но есть способ ещё более простой.
• Любой современный хостинг сейчас предоставляет возможность установки WordPress одним кликом. В этом случае вам нужно всего лишь зайти в соответствующий раздел панели управления и нажать кнопку «Установить». Всё!

Если что-то непонятно – посмотрите справку, предоставляемую хостером, или задайте вопрос техподдержке.

А теперь — время создать сайт.

Устанавливаем тему оформления сайта

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

Если вы выбрали бесплатную тему из репозитория WordPress, установить её можно прямо из админки. Зайдите в админку, выберите вкладку «Внешний вид» – «Темы», и уже оттуда загрузите понравившуюся, нажав кнопку «Установить». После установки активируйте её.

Если вы уже добавляли какой-то контент – он сохранится. Новая тема лишь заменит оформление.

Платные темы, как правило, поставляются с некоторым количеством заранее предустановленных стандартных страниц для типовых задач: «О компании», «Портфолио», «Галерея», страницы авторов и т.д. Обычно они поставляются в нескольких вариантах вёрстки.

Кроме того, хорошо сделанная тема позволяет менять дизайн темы прямо из админки: фон, цвета, шрифты, особенности вёрстки, выравнивание. Для тех, кто владеет css, есть возможность добавить собственные стили оформления.

Более того: некоторые темы — это настоящие «комбайны», включающие в себя несколько шаблонов, адаптированных под разные задачи. Вам нужно лишь выбрать нужный шаблон в рамках темы, загрузить его из админки, установить и активировать.

Чаще всего предусмотрен демо-контент: шаблонные тексты и изображения, которые нужны для того, чтобы вы не делали всё с нуля. Такой контент можно использовать в качестве основы для своего контента или просто как пример. Если вы собираете сайт в первый раз, и есть возможность импортировать демо-контент – сделайте это.

Добавляем контент

На предыдущих шагах мы установили WordPress, шаблон, адаптировали дизайн под свой вкус или фирменный стиль. Начнем добавлять страницы и контент на них.

Вот как добавить страницу «Обо мне»: в панели управления WordPress найдите вкладку «Страницы» — «Добавить новую», и система создаст новую пустую страницу. Выглядит она почти так же, как стандартный интерфейс Word. Здесь есть визуальный редактор, вкладка для правки кода в режиме html, а также дополнительные окошки, где можно выбрать шаблон страницы.

Добавьте текст, отформатируйте его (точно так, как это делается в любом текстовом редакторе). Готово! На вашем сайте появилась первая страница, которую вы создали своими руками.

Добавляем страницу в меню

После сохранения изменений на новой странице переходим на вкладку панели управления «Внешний вид» — «Меню».

В зависимости от шаблона у вас может быть несколько типов меню, расположенных в разных частях сайта: главное (сверху), боковое, в «футере» (в «подвале» сайта).

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

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

Не забудьте сохранить изменения кнопкой «Сохранить меню».

Добавляем на сайт блог

Блог на WordPress обычно реализуют через формат «Записи» — привычную всем ленту сообщений. Хотя, возможно, вы будете использовать «Записи» как формат для статей, а категории записей — как отдельные пункты меню. Всё определяет ваша разработанная в самом начале структура сайта.

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

Зайдите в панели управления WordPress на вкладку «Записи» – «Создать новую». Вы увидите почти такой же интерфейс текстового редактора, как в «Страницах», но общий интерфейс будет немного отличаться. Здесь так же есть окно выбора шаблона, а к нему добавляются выбор категории и тегов (меток страницы). Добавьте нужную категорию и теги.

Теперь остаётся добавить категорию в меню, точно так, как мы делали это раньше.

Адаптируем дизайн и настраиваем шаблон

Почти всё в WordPress можно решить с помощью плагинов, бесплатных и платных. Хорошие темы оформления уже поставляются с некоторыми плагинами. Как правило, это редакторы интерфейса, слайдеры, социальные кнопки «Поделиться», и многое другое. Если вы считаете, что вашему сайту нужны какие-то дополнительные возможности, то вам не понадобится разработчик: вы можете найти соответствующий плагин в репозитарии WordPress, установить и активировать его, а потом внести простые настройки. Знания программирования здесь не нужны.

С одной стороны — это очень удобно. С другой — вы можете столкнуться с программными конфликтами и проблемой «грязного» кода. Однако даже это представляет собой намного меньшую проблему, чем ограничения конструкторов сайтов, подобных Wix. Сайты на WordPress отлично продвигаются в поиске, не требуют глубоких знаний для настройки и администрирования, и, если вы хотите создать сайт самостоятельно – это, пожалуй, лучший выбор.

Но надо понимать, что для серьезного продвижения сайта в качестве вебмастера, разработчика, веб-дизайнера, верстальщика таких навыков мало. Вам всё равно придётся изучать и html, и css, и javascript, и даже php, если вы решите стать профессиональным разработчиком.

Создаем HTML страницу

Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу.

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

HTML-страницы создаются с помощью языка HTML, а код этого языка записывается в текстовых редакторах, например в обычном Блокноте от Windows. Открыв Блокнот и введя туда код написанный на языке HTML, а затем сохранив получившийся документ в файл с расширением .html мы получим HTML-файл, который можно просмотреть с помощью браузера.

Открыть Блокнот в Windows можно следующим образом:

Пуск — Все программы

В Блокноте наберите следующий код:

    
Заголовок статьи
 
Абзац статьи.
  

Или просто скопируйте его и вставьте в Блокнот :

Затем сохраните получившийся документ на Рабочий стол , в виде файла с названием index и расширением .html

Для этого нажмите на кнопки:
Файл — Сохранить как…

В появившемся окне выберите Рабочий стол , имя файла напишите index.html и нажмите кнопку:
Сохранить

Теперь файл index.html , который вы сохранили на Рабочий стол , можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox :
Открыть с помощью — FireFox

Если у вас на компьютере не установлен браузер FireFox , то можете открыть файл index.html любым другим браузером, например: Opera , Google Chrome , Internet Explorer или Safari .

Файл index.html , открытый в браузере FireFox :

На этом, первый урок учебника по HTML, окончен. В следующем уроке мы подробно разберём HTML-код и узнаем из каких частей он состоит.

• Category: HTML
• Tag: html, создание страницы, учебник html