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

Как создать простой сайт на HTML в блокноте [Полная инструкция для новичков]

В этой статье вы узнаете:

  • Что такое HTML: краткое описание языка разметки.
  • Как создать сайт на HTML в блокноте с нуля: пошаговая инструкция.
  • Как быстро создать собственный веб-ресурс: альтернативные способы.
  • Как освоить HTML и CSS самостоятельно: варианты обучения.

Также в статье есть раздел с ответами на частые вопросы.

Что такое HTML: краткое описание

HTML (Hypertext Markup Language) — это язык разметки гипертекста. Он используется для создания сайтов: код нужен для структурирования и отображения веб-страницы и контента.

Простыми словами, HTML «говорит» браузеру — на компьютере или мобильном устройстве, — как отображать веб-страницы.

Язык разметки HTML состоит из тегов — открывающих и закрывающих. Например, чтобы добавить абзац, нужно использовать два тега: первый — <p> (открывающий тег); второй — </p> (закрывающий).

Все закрывающие теги обозначаются символом «/».

Между открывающим и закрывающим тегами размещают контент: например, текст, заголовок или ссылку на изображение.

Сегодня на HTML «пишут» небольшие сайты:

  • Посадочные страницы (Landing Page).
  • Сайты-визитки.
  • Портфолио.

HTML-сайты «легкие» — они не грузят сервера. Благодаря этому у сайтов, созданных на языке разметки, очень высокая скорость загрузки.

Есть два формата верстки веб-сайта в HTML:

  1. Табличная. Это устаревший формат верстки сайта — сейчас его уже не используют.
  2. Блочная. Актуальный вариант верстки HTML-сайтов — с использованием тегов <div>.

Как создать HTML-сайт с нуля в блокноте: пошаговая инструкция

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

Важно: мы поговорим о процессе создания сайта на HTML в общих чертах — создадим простенькую веб-страницу. Задача статьи — познакомить вас с процессом «написания» веб-сайта. Объяснить все тонкости языка разметки и верстки в одной статье — невозможно. Но в статье есть раздел, где мы затрагиваем тему обучения верстке сайтов.

Шаг #1. Создаем новый файл в формате HTML

На первом этапе создадим новый файл в формате HTML. Для этого откройте стандартный блокнот, который доступен в Windows.

Далее — перейдите в раздел «Файл» и выберите функцию «Сохранить как».

Кнопка «Сохранить как» в блокноте

Откроется небольшое окно сохранения: выберите папку или раздел, куда хотите сохранить документ. Теперь нужно переименовать файл и сменить его формат — с *.txt на что-то другое. Главное, чтобы вместо .txt был новый формат — .html.

Например, назовите этот файл myfirstwebsite.html и сохраните на компьютере.

Сохраняем HTML-документ
Сохраняем документ в формате .html
Важно: обязательно посмотрите на строку «Кодировка». Там должна стоять кодировка UTF-8.

Шаг #2. Начинаем работать с тегами

На втором этапе начинается практическая часть — работа с тегами. Для этого откройте созданный HTML-файл через блокнот.

Мы будем писать сайт на HTML5. Самый первый тег, который нужно добавить в блокнот — <! DOCTYPE html>. Этот тег указывает тип документа.

После того, как вы вставили первый тег, давайте добавим на страницу все важные теги. Можете просто скопировать их из блока ниже и вставить в свой документ.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Первый сайт на HTML</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<p>Абзац: номер один</p>

<p>Абзац: номер два</p>

<p>Абзац: номер три</p>

</body>
</html>

В блокноте получится следующая картина (образец):

Пример HTML кода в блокноте
Пример HTML-кода в блокноте

Теперь давайте посмотрим, что означают эти теги:

  • <html> — это корневой тег документа, который размещается в начале и в конце кода. Он открывает и закрывает веб-страницу. С помощью этого тега мы показываем браузеру, что он «работает» с веб-документом.
  • <head> — этот тег нужен для того, чтобы мы могли разместить ключевую информацию о сайте. Например, в <head> добавляют: заголовок страницы, ключевые слова, meta-описание. Это важные элементы для SEO-продвижения ресурса.
  • <title> — тег, который задает странице заголовок. Этот заголовок отображается в браузере и в поисковой выдаче. На самой странице его не видно.
  • <body> — в этом теге размещается весь контент сайта: абзацы, заголовки, изображения, таблицы, кнопки. Все «контентные» теги помещаются в <body>.
  • <h1> — заголовок первого уровня. При создании страницы старайтесь использовать только один заголовок H1. Так нужно для SEO. Если вам нужно много заголовков, то добавляйте теги <h2> и <h3> — это заголовки второго и третьего уровней.
  • <p> — это тег абзаца. Сюда можно вписать любой текст.

У каждого тега есть закрывающий тег: например, у <html> — </html>, у <body> — </body> и т.д.

Шаг #3. Подключаем к сайту стили CSS

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

Чтобы оформить веб-страницу — грамотно расположить важные элементы, добавить фон и цвета, настроить отсупы между параграфами — нужно подключить к HTML-файлу стили.

Добавить стили можно прямо в файл с HTML-кодом. Для этого нужно добавить новый тег <style> в секцию <head>.

Дальше в теге <style> нужно добавить стили для каждого элемента: p, body, h1.

Это выглядит вот так:

<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>

Как видите, в стилях нет тегов.

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

Вы можете скопировать стиль из блока выше и вставить в свой HTML-документ — в секцию <head> (до закрывающего тега).

У вас получится следующая картина (образец):

HTML + CSS в блокноте — образец
Образец HTML-документа со стилями CSS

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

Таким образом, вы можете «украсить» любой элемент веб-сайта: от таблицы до абзаца.

Читайте также:  ТОП-7: Лучшие бесплатные CMS для сайтов [Независимый рейтинг движков]

Шаг #4. Загружаем сайт на хостинг

Готовый сайт нужно загрузить на хостинг. Так вы разместите веб-сайт в интернете — пользователи смогут зайти на ваш веб-ресурс.

Как загрузить сайт на хостинг:

  1. Зарегистрируйтесь на хостинге.
  2. Купите домен и прикрепите к хостингу. Например, доменное имя можно купить на самом хостинге.
  3. Создайте новую директорию для веб-сайта.
  4. Загрузите HTML-файлы в созданную директорию.

В качестве хостинга для сайтов рекомендую использовать Timeweb.

Почему Timeweb — особенности хостинг-провайдера:
→ Высокая скорость и стабильность работы сайтов благодаря тому, что хостинг-провайдер использует самое современное оборудование и ПО.
→ Инновационная панель управления.
→ На хостинге можно недорого купить домен для сайта.
→ Данные сайтов надежно защищены системой резервирования.
→ Можно быстро установить CMS на сайт: например, WordPress.
→ Для больших проектов есть VDS и выделенные сервера.
→ Безлимитное количество доменов: вы можете разместить столько доменов, сколько нужно.
→ Простой файловый менеджер.
→ Можно быстро подключить бесплатный SSL-сертификат к домену.

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

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

В 2022 году не обязательно изучать HTML, CSS и JavaScript, чтобы делать сайты: блоги, информационные проекты, интернет-магазины. С этой задачей отлично справляются CMS и онлайн-конструкторы.

CMS WordPress

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

CMS WordPress
Почему WordPress — особенности «движка»:
→ «Движок» можно установить на сайт за несколько минут.
→ Простой и удобный интерфейс.
→ Большой выбор шаблонов, которые можно настроить под любые задачи.
→ Наличие плагинов, которые расширяют базовый функционал «движка» и веб-сайта.
→ CMS распространяется бесплатно.
→ Практически все WP-шаблоны адаптированы под мобильные устройства.
→ SEO-дружественность.
→ Гибкое управление медиафайлами.
→ Высокая производительность.
→ Для работы с CMS WP не требуются навыки программирования.
Если вы хотите создать сайт на WordPress, то изучите подробное руководство для новичков → «Как создать сайт на WordPress с нуля в 2022 [Пошаговая инструкция]».
После изучения этой статьи вы узнаете:
→ Что потребуется для создания сайта на WP.
→ Как создать собственный веб-сайт — от регистрации хостинга до установки шаблона и плагинов.
→ Как опубликовать первую запись.

Конструкторы

Конструкторы — это онлайн-инструменты, с помощью которых можно быстро создать сайт: например, Landing Page или интернет-магазин. Для работы с конструкторами не требуются навыки программирования — создать собственный ресурс можно без знания HTML, CSS, JS или PHP.

«Собрать» профессиональный сайт можно за 30-40 минут.

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

Почему стоит работать с конструкторами — основные особенности платформ:
→ Не нужны навыки программирования и верстки.
→ Большой выбор готовых шаблонов.
→ Некоторые конструкторы предоставляют возможность «собирать» сайты и страницы с нуля.
→ Создать веб-сайт на конструкторе можно самостоятельно — без верстальщика или дизайнера.
→ Интеграция с системами аналитики: Яндекс.Метрика и Google Analytics.

Если вы хотите создать свой первый сайт, но у вас нет навыков верстки, то обратите внимание на 2 конструктора: uKit и Creatium.

uKit

uKit — удобный конструктор сайтов для бизнеса. С помощью этого инструмента можно создать собственный веб-ресурс своими руками: за 10-15 минут.

На платформе доступно более 350 шаблонов (38 тематик). Все темы адаптивные — благодаря этому сайт эффектен на любых устройствах.

Конструктор сайтов uKit
Преимущества uKit:
На конструкторе можно создать полноценный интернет-магазин.
Можно менять расположение любого элемента на сайте: просто добавляйте и перетаскивайте объекты в визуальном редакторе.
Можно прикрепить собственный домен и подключить к нему бесплатный SSL-сертификат.
Доступна интеграция с системами веб-аналитики: Яндекс.Метрика и Google Analytics.
Есть приложения для iOS и Android. Благодаря этому можно создать свой веб-сайт с телефона или планшета.

Попробовать возможности конструктора сайтов uKit можно бесплатно — на платформе есть тестовый период на 14 дней.

Creatium

Creatium — удобный конструктор сайтов. На платформе можно создать веб-ресурс с использованием готового шаблона или придумать собственный дизайн с нуля.

Конструктор сайтов Creatium
Преимущества конструктора Creatium:
149 шаблонов различных тематик: просто добавьте свой текст и фотографии.
Более 1 000 блоков, с помощью которых можно «собрать» веб-ресурс с уникальным дизайном.
SEO-дружественность.
Можно подключить свой домен.
Доступна интеграция с сервисами аналитики.
Интеграция с CRM-системами.

После регистрации на платформе вам начислят 300 бонусных рублей. Их хватит на 14 дней тестирования сервиса.

Как освоить HTML и CSS с нуля: немного про обучение

Чтобы создать свой сайт на HTML и CSS, нужно освоить эти языки. Давайте немного поговорим про обучение: рассмотрим полезные ресурсы и курсы, которые помогут освоить навыки верстки с нуля.

Полезные ресурсы

Сайты, на которых можно освоить HTML и CSS самостоятельно:

СайтОписание
HTMLBASEСовременный справочник по HTML и CSS «для чайников». Здесь вы найдете описание всех HTML-тегов и атрибутов, описание CSS свойств и значений, много примеров кода, видео и задачи для эффективного обучения.
HTML5BookВеб-ресурс для тех, кто изучает веб-технологии и создает сайты. На платформе есть CSS справочник, уроки по HTML и JavaScript.
HTML AcademyСайт-тренажер для изучения HTML, CSS и JavaScript. 8 частей тренажеров доступны бесплатно (это сто тридцать интерактивных заданий). После прохождения этих тренажеров вы сможете создать свой первый веб-ресурс.

Курсы

Если вы хотите стать востребованным IT-специалистом, чтобы начать зарабатывать от 50 000 ₽ в месяц, рекомендую пройти онлайн-курсы по верстке и программированию:

КурсКраткое описание
Профессия Frontend-разработчик PRO— Вы начнёте с основ вёрстки и JavaScript, а к концу обучения научитесь делать корпоративные сервисы. Получите опыт работы в команде и начнёте карьеру веб-разработчика.
— Сертификат после прохождения обучения
— Цена: 5 800 ₽/мес (рассрочка на 36 месяцев)
Frontend-разработчик с нуля— Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript.
— Соберете крутое портфолио из 9 жизнеспособных проектов для получения работы своей мечты.
— Цена: 91 200 ₽. Рассрочка на 24 месяца: 3 800 ₽/мес.

Мини-FAQ: ответы на частые вопросы

Ответы на частые вопросы новичков:

Обязательно ли изучать HTML и CSS для создания сайта?
Можно ли освоить HTML и CSS самостоятельно?
«Написать» сайт на HTML можно только в блокноте?

Итоги

Краткие итоги статьи:

  • Создать простую веб-страницу можно в блокноте — для этого не потребуются навыки HTML и CSS. Просто следуйте инструкции из этой статьи.
  • Чтобы создать полноценный веб-сайт, нужно освоить навыки верстки.
  • «Собрать» свой сайт можно без навыков программирования: например, с помощью CMS WordPress или специальных конструкторов.
Понравилась статья? Поделиться с друзьями:
Обязательно ли изучать HTML и CSS для создания сайта?
Нет, сейчас такой необходимости нет. Лучше использовать готовые решения: например, CMS WordPress или конструкторы веб-сайтов.
Можно ли освоить HTML и CSS самостоятельно?
Да, вы можете изучить навыки верстки с помощью сайтов-справочников и бесплатных видеоуроков (например, на YouTube).
«Написать» сайт на HTML можно только в блокноте?
Нет, есть другие — более удобные варианты.
Например, специальные редакторы кода:
— Atom.
— Sublime Text.
— Vim.