Как сделать сайт общедоступным html

Создаем 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

Как создать простой 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 – это не случайность, провайдер очень надёжный, технологичный.

Как разместить готовый сайт в Интернете

В этой статье мы расскажем о том, как разместить свой сайт в Интернете. Инструкция подойдет тем, у кого уже есть готовый сайт (архив с файлами сайта).

Если у вас нет готового архива, вы можете создать сайт с нуля на WordPress или в Конструкторе сайтов Рег.ру.

Быстрый старт

Получите все необходимые инструменты для быстрого запуска бизнеса в Интернете. В пакет «Быстрый старт» входят домен в зоне .ru, производительный хостинг и SSL-сертификат.

Как разместить свой сайт в Интернете?

Сайт — это по факту совокупность файлов (текст, программные скрипты, база данных, изображения и др.).

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

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

1. Зарегистрировать домен.
2. Заказать хостинг.
3. Привязать домен к хостингу.
4. Разместить сайт на хостинге.

Рассмотрим каждый шаг подробнее.

Шаг 1. Зарегистрируйте домен

Домен — это имя сайта в сети. Слова «домен» и «сайт» часто употребляют как синонимы, хотя это разные понятия. Сайт — это веб-страницы, которые отображаются в Интернете. Домен — это уникальный «адрес» сайта в сети. Если у сайта не будет домена, пользователи не найдут к нему путь и не увидят содержимое.

Чтобы выбрать домен, нужно определиться с доменной зоной и придумать доменное имя. Подбор домена и зоны зависит от целей и направленности сайта. В Рег.ру можно выбрать домен в более чем 750 доменных зонах: международных, национальных и тематических. Определиться с выбором помогут инструкции: Как выбрать домен? и Как придумать доменное имя для сайта?

После выбора домена его нужно зарегистрировать. На странице заказа вы указываете контактные данные и выбираете срок регистрации домена — он зависит от доменной зоны. Например, для доменов .ru, .su и .рф максимальный срок регистрации — один год. А в международных зонах домен можно зарегистрировать на год, пять или десять лет.

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

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

Если вы зарегистрировали домен, переходите к выбору и заказу хостинга.

Шаг 2. Закажите хостинг

Хостинг — это площадка для размещения файлов сайта. Файлы размещаются на специальных компьютерах — серверах. Серверы постоянно находятся в сети и подключены к бесперебойному электропитанию. Благодаря этому размещенные на них сайты доступны круглосуточно. Таким образом, хостинг — это аренда места и мощностей.

В Рег.ру вы можете заказать хостинг под свой проект: виртуальный хостинг, VPS или Dedicated. Самый популярный и простой в работе — виртуальный хостинг. На таком хостинге можно разместить любой сайт: от простого сайта-визитки до интернет-магазина.

• тариф: выбор зависит от количества сайтов, которые можно добавить в рамках одной услуги (от 1 до 70). Определиться с выбором поможет статья: Советы по выбору тарифа хостинга.
• срок заказа (от 1 месяца). Чем больше срок заказа, тем ниже цена за месяц.
• панель управления хостингом: ispmanager, Plesk или cPanel. Через панель можно управлять настройками хостинга и размещёнными на нём сайтами. Как выбрать панель управления хостингом?Как разместить сайт, написанный в HTML

После заказа хостинга нужно связать домен и хостинг между собой.

Шаг 3. Привяжите домен к хостингу

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

Домены состоят из букв и символов. Но «машины» понимают только язык цифр. При вводе доменного имени в поисковую строку DNS-серверы преобразуют его в IP-адрес. Затем по IP они находят нужный сервер, а на нём — искомый сайт, и отправляют эту информацию браузеру. Благодаря DNS-серверам в поисковиках отображается нужный сайт и пользователи посещают его.

Чтобы привязать домен к хостингу, нужно прописать хостинговые DNS-серверы (ns1.hosting.reg.ru, ns2.hosting.reg.ru) автоматически или вручную по инструкции: Как привязать домен к хостингу?

Как завести сайт в интернете

Если вы прописали DNS-серверы для домена, приступайте к размещению сайта в Интернете.

Шаг 4. Разместите сайт на хостинге

Есть несколько вариантов, как можно разместить свой сайт на хостинге. Например, это можно сделать через SSH и по FTP. Однако самый простой путь — размещение сайта через панель управления хостингом.

Чтобы разместить сайт через панель управления, нужно загрузить архив с файлами сайта в корневой каталог и импортировать базу данных (если она есть). В зависимости от выбранной панели это можно сделать по одной из инструкций: Как разместить сайт в ispmanager?, Как разместить сайт в Plesk? или Как разместить сайт в cPanel?

После размещения архива с файлами сайт может быть доступен не сразу. Если ранее вы прописали или сменили DNS-серверы, дождитесь их обновления в течение 24 часов. DNS-серверы обновятся и сайт появится в Интернете.

Теперь вы знаете, как зарегистрировать свой сайт в интернете, и без труда сможете разместить свой сайт.

Помогла ли вам статья?

Спасибо за оценку. Рады помочь ��

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

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

Подготовка сайта

Если вы не знаете даже, как создать HTML-страничку, то специально для вас есть первая часть этой статьи.

Допустим что вы уже сделали сою страничку, а может быть и целый сайт. Сначала его надо проверить на ряд ошибок (недоработок). Я настоятельно рекомендую выкладывать сайт в интернет только после их исправления:

• Все файлы, связанные с сайтом должны называться на латинице маленькими буквами без пробелов. Это касается рисунков, самих .html или .php страниц, .css стилей и т.д. Слева показан неправильный вариант, а справа правильный:

• Следите, чтобы все теги в html-коде были закрыты. Оставлять открытые теги крайне не рекомендуется.
• Главная страница сайта (с которой должен начинаться его просмотр) должна называться «index» (index.html, index.htm или index.php)

Регистрация домена

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

Определимся сразу, мы будем использовать хостинг-провайдер timeweb.ru. Какие у него есть плюсы:

• Стоимость домена (плата за использование имени сайта) в первый год бесплатно, далее (если захотите) 179 рублей в ГОД!
• Стоимость хостинга (плата за размещение страниц сайта в сети интернет) немного ниже чем у других провайдеров (119 рублей в месяц). Тариф Year+ на декабрь 2018 года.
• Техническая поддержка отвечает очень быстро (регламент ответа на вопрос: 10-15 минут) и на любые вопросы.
• Своевременное обновление систем: всегда новый phpMyAdmin, всегда свежая версия php, постоянно дорабатывающаяся панель управления, постоянно расширяющаяся «справка» и, самое главное, форум.

Продолжим. Скажем, вы хотите чтобы по адресу www.vasyapupkin.ru открывался ваш сайт. Нужно сначала проверить, а свободен ли этот домен? Сделать это можно через множество систем. Мы воспользуемся этой. В поле для проверки домена на доступность вводим желаемое имя:

Жмем «Проверить». Скорее всего домен будет занят, т.к. все «крутые» домены уже раскуплены. А новички, как правило, хотят сразу крутой домен. Ну к примеру домен az.ru продавался за 550 тыс. рублей. Так что к выбору имени подходите креативно. Не обязательно чтобы у вас был домен, скажем, tema.ru, если вас зовут Артем. Возьмите домен te-ma.ru или te777ma.ru.

Итак, домен вы себе подобрали и увидели сообщение, что он свободен:

Не переживайте, на первый год он вам достанется абсолютно бесплатно!

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

Какой тип тарифного плана выбрать? Я рекомендую «year+«, т.к. это самый экономный и практичный вариант. Он предоставляет вам:

• возможность разместить 1 сайт
• 5 Гб. дискового пространства
• 1 база данных MySql (если вы хотите научиться программировать сайты с php, то это вам только на руку)
• Почтовый ящик с вашим доменом (к примеру, info@te777ma.ru)
• Бесплатный SSL-сертификат (безопасность для пользователей)

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

Итак, вы выбрали тарифный план «Year» и заполнили все данные:

После регистрации к вам на почту придет письмо с регистрационными данными. Вы их надежно сохраните и никому не показывайте. Используя эти данные (имя аккаунта, пароль к аккаунту) логинимся на странице cp.timeweb.ru и попадаем в панель управления нашим сайтом.

Итак, домен за нами забронирован. Осталось его оплатить. В панели управления кликаем «Оплата услуг» (иконка кошелька) и там выбираем удобный для вас способ оплаты и оплачиваем годовое пользование доменом и хостингом. Лично я всегда плачу с Web-Money или банковской карты. В этих случаях деньги доходят моментально.

Если вы не хотите платить сразу, то можете повременить. TimeWeb дает пробные 10 дней: если все понравится, то для того, чтобы все работало дальше, вам придется заплатить. В этом случаем на первые 10 дней вам будет выдан домен третьего уровня, типа cp***.timeweb.ru (его вы уже можете найти в разделе «Домены»), а после оплаты вы уже сможете привязать к своему сайту свой собственные домен.

Загрузка сайта на хостинг

Итак, домен оплачен и размещение сайта в сети интернет уже закончено на 50%. Теперь надо загрузить сами файлы вашего сайта на хостинг для того, чтобы они были доступны по купленному доменному имени (www.te777ma.ru).

Для закачки файлов на хостинг мы воспользуемся FTP-клиентом. Можно конечно воспользоваться «Файловым менеджером» (также доступен из меню), предоставленным панелью управления, и залить все файлы в папку «public_html», однако, мне кажется, это самоубийство — закачивать все файлы по одному. Лучше мы воспользуемся обычным FTP-клиентом.

Качаем FTP-клиент. Например, FileZilla. Скачать можно с официального сайта: filezilla.ru

Устанавливаем его себе и запускаем. Далее нам надо настроить соединение с нашим сайтом. Заходим «Файл» —> «Менеджер сайтов» —> «Новый сайт» —> Вводим все данные, касательно своего сайта.

Где их взять? Вспомните про письмо, которое вам приходило после регистрации на TimeWeb. Там есть все необходимые данные.

Жмем «Соединиться«.

Если соединение неудачно, значит какие-то данные введены неверно (перепроверьте Хост — он содержится в письме, пользователь и пароль — там же).

Если все удачно, то в нижнем правом окне программы откроется директория нашего сайта. Заходим в папку «public_html«. В левом окошечке открываем директорию с сайтом на вашем компьютере и простым перетаскиванием перемещаем файлы из левой директории в правую (с компьютера на хостинг). Файл index.html, который уже лежит на сервере в папке «public_html» можете просто удалить.

ПОЗДРАВЛЯЮ! Ваш сайт теперь размещен в сети интернет и доступен по адресу www.te777ma.ru (ну домен то у вас другой) любому пользователю интернета.

Заключение

Ну вот, мы увидели, что для содержания сайта в сети необходимо как минимум 1428 рублей в год.

Также можно воспользоваться и бесплатными хостингами:

Однако у всех у них на вашем сайте будет появляться реклама в виде баннеров. Это и будет ваша плата за пользование хостингом. А также сайт ваш будет не второго уровня (te777ma.ru), а третьего (te777ma.narod.ru). Ах да, друзья, вот более новая статься на эту же тему, в которой также разбирается и создание самой простенькой странички.

Понравилась или помогла статья? Самое лучшее, что ты можешь сделать — это поделиться ею в любой из своих соцсетей (даже если ты поделишься в твиттере или google+, которыми ты не пользуешься — это очень поможет развитию моего блога). Спасибо! А если ты еще и оставишь любой комментарий снизу в обсуждениях, то это будет двойное СПАСИБО!