HTML – это основа всех современных сайтов. По сути, это язык разметки, который помогает браузеру правильно отображать те или иные элементы. Чтобы создать свои первые web-страницы будет достаточно даже простого текстового блокнота (имеется ввиду программа-редактор для работы с текстом, а не бумажная записная книжка).
Какие именно шаги нужно пройти и как сделать свой первый сайт «бесплатно», «без регистрации и SMS» — ниже.
Пара слов об HTML
С одной стороны, создание универсального синтаксиса для разметки интернет-страниц позволило этому самому интернету перерасти из технологии объединения сетей до современного WEB’а со всем его многообразием. С другой стороны, так можно сказать про любой язык программирования – он помогает преобразовывать логические структуры в машинный код. Но для того, чтобы получить более-менее внятный результат нужно проделать огромный пласт работы: изучить и досконально знать синтаксис, а на это может уйти много времени и сил, накопить опыт по созданию своих скриптов и т.п., а это ещё больше времени.
HTML был призван добавить интерактивности к скучным «простыням» документов, которые были практически единственным видом контента на заре зарождения глобальной паутины (из-за низких скоростей).
Фактически это язык разметки, который позволяет выделять определённые элементы страницы и задавать для них специфичные параметры (размер, шрифт, тип: картинка это, текст, ссылка, видеофайл и т.д.).
Немного о синтаксисе
Например, комбинация <h1>Здесь текст</ h1> позволяет выделить заголовок первого уровня, она состоит из открывающего и закрывающего (с косой чертой) тегов. Некоторые теги, могут использоваться самостоятельно – без закрывающих элементов.
Любой HTML-документ может быть представлен в текстовом виде и должен иметь определённую структуру.
Обязательными тегами для любых HTML-страниц являются следующие:
<HTML> <HEAD></HEAD> <BODY></BODY> </HTML>
Внутри тега <HTML></HTML> располагается вся разметка страницы.
Внутри тега HEAD описываются параметры заголовка страницы, включая так горячо любимые seo-атрибуты: title и description.
А внутри BODY располагается весь остальной контент.
В общей сложности в современной версии языка разметки HTML5 используется 125 основных элементов (тегов).
Простая web-страница в блокноте
Открываете любой доступный текстовый редактор (это может быть встроенное системное приложение, например, «Блокнот» в Windows, или сторонний софт, например, Notepad++, AkelPad и т.п.).
Алгоритм работы очень простой:
- Создаёте новый документ.
- Если ваш редактор поддерживает работу с разными кодировками, то выбираете по умолчанию utf-8.
- Вписываете в него нужную структуру документа (с использованием нужных тегов).
- Сохраняете документ как текст (с расширением .txt) и меняете расширение на .html. Или сразу сохраняете файл в формате .html, если это позволяет ваш редактор.
- Теперь документ можно открыть в любом браузере, он распознает в нём вашу разметку и отобразит содержимое.
Обратите внимание, блокнот Windows в устаревших версиях системы сохраняет текст в кодировке ANSI (в новых версиях он работает с UTF-8), это не преступление, но вместо кириллических символов в браузере вы можете увидеть кракозябры. Поэтому с помощью специального атрибута нужно просто «подсказать» браузеру, что ему нужно работать с ANSI:
<meta charset="windows-1251"> (тег вписывается внутри блока HEAD).
Хватит теории, пора переходить к делу. Давайте создадим в блокноте полноценную страницу. Просто скопируйте и вставьте следующий код в ваш блокнот.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="UTF-8"> <title>Название страницы - отображается на вкладке браузера и в поиске</title> <style type="text/css"> a{ color: #fff; text-decoration: none; } html{ background: #FFF8CC; min-height: 100%; font-family: Helvetica; display: flex; flex-direction: column; } body{ margin: 0; padding: 0 15px; display: flex; flex-direction: column; flex: auto; } h1{ margin-top: 0; } h1, p{ color: #006064; } img{ border: 0; } .header{ width: 100%; min-width: 460px; max-width: 960px; margin: 0 auto 30px; padding: 30px 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; } .logo{ font-size: 1.5rem; color: #fff; text-decoration: none; margin: 5px 0 0 5px; justify-content: center; align-items: center; display: flex; flex: none; align-items: center; background: #839FFF; width: 130px; height: 50px; } .nav{ margin: -5px 0 0 -5px; display: flex; flex-wrap: wrap; } .nav-item{ background: #BDC7FF; width: 130px; height: 50px; font-size: 1.5rem; color: #fff; text-decoration: none; display: flex; margin: 5px 0 0 5px; justify-content: center; align-items: center; } .sqr{ height: 300px; width: 300px; background: #FFDB89; } .main{ width: 100%; min-width: 460px; max-width: 960px; margin: auto; flex: auto; box-sizing: border-box; } .box{ font-size: 1.25rem; line-height: 1.5; margin: 0 0 40px -50px; display: flex; flex-wrap: wrap; justify-content: center; } .box-base{ margin-left: 50px; flex: 1 0 430px; } .box-side{ margin-left: 50px; font: none; } .box-img{ max-width: 100%; height: auto; } .content{ margin-bottom: 30px; display: flex; flex-wrap: wrap; } .banners{ flex: 1 1 200px; } .banner{ background: #FFDB89; width: 100%; min-width: 100px; min-height: 200px; font-size: 3rem; color: #fff; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center; } .posts{ margin: 0 0 30px 30px; flex: 1 1 200px; } .comments{ margin: 0 0 30px 30px; flex: 1 1 200px; } .comment{ display: flex; } .comment-side{ padding-right: 20px; flex: none; } .comment-base{ flex: auto; } .comment-avatar{ background: #FFA985; width: 50px; height: 50px; } .footer{ background: #FF3366; width: 100%; max-width: 960px; min-width: 460px; color: #fff; margin: auto; padding: 15px; box-sizing: border-box; } @media screen and (max-width: 800px) { .banners{ margin-left: -30px; display: flex; flex-basis: 100%; } .banner{ margin-left: 30px; } .posts{ margin-left: 0; } } @media screen and (max-width: 600px) { .content{ display: block; } .banners{ margin: 0; display: block; } .banner{ margin-left: 0; } .posts{ margin: 0; } } </style> </head> <body> <header class="header"> <a class="logo"> LOGO </a> <nav class="nav"> <a href="#posts" class="nav-item">Посты</a> <a href="#comments" class="nav-item">Комменты</a> <a href="#footer" class="nav-item">Подвал</a> <a href="#posts" class="nav-item">Посты2</a> </nav> </header> <main class="main"> <div class="box"> <div class="box-base"> <h1>Заголовок 1</h1> <p>Здесь расположен осмысленный текст и самом важном продукте на свете...</p> </div> <div class="box-side"> <div class="sqr"> </div> </div> </div> <div class="content"> <div class="banners"> <div class="banner">Баннер 1</div> <div class="banner">Баннер 2</div> <div class="banner">Баннер 3</div> </div> <div class="posts" id="posts"> <div class="post"> <h1>Пост #1</h1> <p>Концепция маркетинга индуцирует контент. Системный анализ развивает тактический рекламный клаттер. Медиавес поддерживает экспериментальный нишевый проект. Лидерство в продажах допускает эмпирический социальный статус.</p> </div> <div class="post"> <h1>Пост #2</h1> <p>Департамент маркетинга и продаж реально допускает жизненный цикл продукции. Стоит отметить, что опросная анкета стабилизирует охват аудитории. До недавнего времени считалось, что promotion-кампания изоморфна времени. </p> </div> <div class="post"> <h1>Пост #3</h1> <p>В соответствии с законом Ципфа, сущность и концепция маркетинговой программы синхронизирует тактический медиамикс, осознав маркетинг как часть производства. Общество потребления сознательно отталкивает презентационный материал.</p> </div> </div> <div class="comments" id="comments"> <div class="comment"> <div class="comment-side"> <div class="comment-avatar"> </div> </div> <div class="comment-base"> <h1 class="comment-title">Комментарий #1</h1> <p>Рекламный бриф масштабирует из ряда вон выходящий выставочный стенд. Изменение глобальной стратегии, в рамках сегодняшних воззрений, индуцирует культурный ребрендинг.</p> </div> </div> <div class="comment"> <div class="comment-side"> <div class="comment-avatar"> </div> </div> <div class="comment-base"> <h1 class="comment-title">Комментарий #2</h1> <p>Имидж предприятия, в рамках сегодняшних воззрений, вполне вероятен. Стоит отметить, что имидж версифицирован. Экспертиза выполненного проекта осмысленно программирует из ряда вон выходящий клиентский спрос. </p> </div> </div> <div class="comment"> <div class="comment-side"> <div class="comment-avatar"> </div> </div> <div class="comment-base"> <h1 class="comment-title">Комментарий #3</h1> <p>Представляется логичным, что особенность рекламы нейтрализует потребительский сегмент рынка. Изменение глобальной стратегии редко соответствует рыночным ожиданиям. </p> </div> </div> </div> </div> </main> <footer class="footer" id="footer"> Подвал сайта расположен, как это ни странно внизу, здесь можно разместить контакты и другую информацию... </footer> </body> </html>
Сохраните файл как index.html и откройте в браузере.
Вы получили типовой адаптивный шаблон, который можно наполнить своим контентом. Только править нужно наполнение, а не теги, нельзя их удалять или нарушать структуру (например, убирать закрывающие), так как в противном случае вся ваша «вёрстка» съедет и будет отображаться «криво».
Стили CSS, скрипты, картинки и другой контент
Как можно заметить, приведённый пример адаптируется под ширину окна браузера и может выстраиваться в одну вертикальную колонку на мобильных устройствах. Как так получилось? Всё дело в таблице каскадных стилей (они же CSS).
Вы можете задать для каждого HTML-тега свои параметры оформления: цвет заливки, текста, тип шрифта, его размер, отступы и многое другое. В нашем примере стили прописаны в блоке <style type="text/css"> (между открывающим и закрывающим тегом style).
Такое написание можно заменить ссылкой на внешний файл (причём файл стилей может располагаться как в каталоге на вашем сервере, так и на любом другом, главное, чтобы ссылка на него была правильной).
Например, <link rel="stylesheet" type="text/css" href="mysitestyle.css">.
mysitestyle.css можно заменить на полную (абсолютную) или даже относительную ссылку (отсчёт будет вестись относительно каталога, в котором будет лежать исходный html-файл).
Аналогичным образом вставляются js-скрипты, которые помогают анимировать страницу или добавить какие-либо специфические функции.
Изображение или видео тоже может располагаться на вашем сервере (в корне с html-файлом) или вообще на другом сайте. В первом случае можно использовать относительные ссылки, чтобы было просто сменить домен, а во втором, можно использовать ресурсы со сторонних сайтов (не нужно хранить изображение у себя и отнимать ресурсы сервера).
Пример вставки изображения со своего сайта (файл image.png должен лежать рядом с index.html):
<img src="image.png" alt="текст, который будет показан вместо изображения, если оно не загрузится" width="190" height="260">
Параметры ширины и высоты можно пропустить или задать в таблице стилей CSS.
В нашем примере вы можете заменить баннер:
- Вместо тега <div class="banner">Баннер 1</div>
- Пишем <img class="banner" src="image.png" alt="баннер-картинка">
- Рядом с index.html кладём любое изображение в формате .png и меняем имя на image.png
Обратите внимание на указание класса (class="banner"), этот параметр позволяет задать стиль оформления централизовано – через CSS. Поэтому изображение любого размера аккуратно впишется в имеющийся дизайн.
Точно также можно заменить все остальные баннеры на свои изображения или добавить их внутри других блоков (только в последнем случае уже без указания класса banner, иначе верстка «поедет»).
Многостраничные сайты в блокноте
Вы можете создать сколько угодно страниц, но, чтобы они были взаимосвязаны между собой, и пользователь мог переходить с одной на другую, нужно правильно прописать ссылки.
Например, вы создаёте страницу page1.html, а нужно попасть на page2.html. тогда нужно внутри страницы page1 прописать ссылку для перехода на page2. Это делается с помощью специального тега и его параметра:
<a href="page2.html">Нажмите для перехода на Страницу 2</a>
Файл page2.html должен лежать рядом с page1.html в одном каталоге, иначе нужно указывать более подробный относительный путь или абсолютную ссылку, если страница расположена на другом сайте.
Соответственно, если со Страницы 2 вам нужно вернуться на первую, то внутри второй страницы нужно прописать уже другой URL, который будет ссылаться на первую. И т.д.
Количество ссылок на другие страницы никак не ограничено, вы можете создавать столько страниц, сколько вам нужно.
Размещение на хостинге
Все созданные HTML-файлы и дополнительные ресурсы (изображения, скрипты, видео и т.д.) вы можете разместить на хостинге и открыть доступ к ним для любого желающего.
Любой web-хостинг работает с html-файлами, даже если у него нет поддержки PHP или баз данных. Хостинг-провайдеров безумное множество, для статичных (html) сатов даже встречаются бесплатные варианты, например, GitHub Pages. Но мы рекомендуем не тратить время, и выбрать проверенный сервис, такой как Bluehost (компания работает с 2002 года и позволяет размещать даже динамические сайты, например, на популярном движке WordPress, а ещё здесь есть возможность установки любой системы управления контентом прямо из панели управления в один клик и тарифы с полным безлимитом).
Как разместить HTML-сайт на хостинге, пошагово:
- Вы регистрируете новое доменное имя, если его ещё у вас нет.
- Перенаправляете его на DNS-сервера выбранного хостера.
- В панели управления хостинга создаёте новый сайт (имя задаётся в соответствии с доменом).
- Далее в веб-версии файлового менеджера или через FTP-протокол закачиваете ваши страницы в корень каталога сайта.
- После того, как обновятся данные в DNS-системе и ваш домен начнёт ссылаться на сервера хостинга, сайт можно будет открыть в любом браузере просто введя имя (домен).
Стоит учесть, что если вы введёте в адресной строке vash-sait.ru, то хостинг будет пытаться загружать главную страницу, которую он ожидает увидеть с именем index.html в корне каталога (http://vash-sait.ru/index.html).
Если такого файла не будет, отобразится ошибка. Но вы можете прописать полный путь, например, vash-sait.ru/page1.html, и если файл с таким именем в каталоге сайта есть, то станица будет отображена.
Выводы
Мы рассмотрели основы «олдскульного» подхода к созданию сайтов. Сейчас в блокнотах сайты делать просто бессмысленно, так как это очень сложно для новичков и очень нерационально для профессионалов (они работают со специальными средами разработки и другими инструментами).
Начинающим web-мастерам проще и быстрее воспользоваться онлайн-конструкторами, которые позволяют собрать сайт своими руками даже без знания основ вёрстки или погружения в HTML, а результат ничем не будет уступать профессиональным продуктам. Посмотреть на достойные сервисы можно в нашем рейтинге лучших конструкторов сайтов.
Кроме того, в большинстве случаев одним только HTML ограничиться не получится. Если вам нужна интерактивность (обратная связь от посетителей: формы заказа звонков, чат, функционал интернет-магазина и т.п.), то придётся подключать языки программирования и JavaScript или готовые CMS-системы/фреймворки.