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

139
0
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Время на прочтение: : 7 мин

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

Несколько слов о HTML

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

HTML был предназначен для добавления интерактивности скучным «листам» документов, которые были практически единственным типом контента в первые дни существования Всемирной паутины (из-за низкой скорости).

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

<html> Основной тег, который открывает и закрывает web-страницу. По <html> браузер понимает, что имеет дело с веб-документом.
<head> Включает ключевые данные, касающиеся web-страницы (заголовок, ключевые слова, описание). Располагается первым после <html>.
<title> Размечает основной заголовок страницы для браузера.
<body> Тело страницы, куда вставляется содержимое для пользователей — текст, картинки, заголовки и т. д.

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

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

Шаг 1 — Создайте HTML-страницу.

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

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

Шаг 2. Добавление разметки веб-страницы.

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

<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>

<title>Топовый сайт новичка</title>

</head>

<body>

<h1>Это тег заголовка первого уровня для содержимого страницы</h1>

<p>Первый абзац</p>

<p>Второй абзац</p>

<p>Третий абзац и т. д.</p>

</body>

</html>

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

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

Шаг 3 — Работа со стилями CSS

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

body {

background: #F2F2F2;

max-width: 900px;

margin: 10px auto;

padding: 30px;

}

h1{

color: #4C4C4C;

padding-bottom: 20px;

margin-bottom: 20px;

border-bottom: 2px solid #BEBEBE;

}

p{

font:italic;

}

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

<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>

<title>Топовый сайт новичка</title>

<style>

body {

background: #F2F2F2;

max-width: 900px;

margin: 10px auto;

padding: 30px;

}

h1{

color: #4C4C4C;

padding-bottom: 20px;

margin-bottom: 20px;

border-bottom: 2px solid #BEBEBE;

}

p{

font:italic;

}

</style>

</head>

<body>

<h1>Это тег заголовка первого уровня для содержимого страницы</h1>

<p>Первый абзац</p>

<p>Второй абзац</p>

<p>Третий абзац и т. д.</p>

</body>

</html>

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

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

Читайте также  17 навыков профессионального SMM-менеджера

Шаг 4 — заливка сайта на хостинг

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

Название хостингаКоличество сайтовМин. цена мес./год.Домен .ruСсылка
Timeweb🥇~466000197 р./2028 р.179 р./399 р.Перейти на timeweb.com
Beget🥈~320000190 р./1980 р.179 р./289 р.Перейти на beget.com
Sprinhost🥉~410800168 р./1416 р.149 р./288 р.Перейти на sprinthost.ru
ihc.ru~3000099 р./990 р.200 р./490 р.Перейти на ihc.ru
webhost1~137400140 р./1428 р.180 р./280 р.Перейти на webhost1
.

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

Скорость страниц Bluehost в Рунете высокая, так как сервера находятся в облаке, используется технология CDN. Провайдер пуленепробиваемый — это значит, что ваш сайт не закроют ни при каких обстоятельствах — можно не бояться жалоб от конкурентов и прочего. Все будет работать надежно. Техническая поддержка круглосуточно. Чтобы запустить HTML-сайт на хостинге, нужно просто скопировать файлы в каталог с доменным именем. Можно использовать встроенный FTP-сервер или программу типа Filezilla, но в этом случае ее нужно настроить для работы с хостингом. База данных не требуется.

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

Самый простой HTML-сайт можно создать в Блокноте за несколько минут. Для построения более сложных структур, способных выполнять конкретные задачи и смотреть на уровне, нужны глубокие знания HTML5 и CCS3. Такой подход полезен новичкам для обучения, приобретения базовых навыков веб-разработчика. В общем, особого смысла создавать такие сайты в других сценариях нет — гораздо эффективнее использовать конструкторы сайтов (например, uCoz, uKit и другие) или даже движок WordPress, если есть опыт.

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

Комментарии (0)
Войдите чтобы оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *