Создаём простой HTML сайт с помощью блокнота

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 и т.п., более сложные программные комплексы для web-разработки называются IDE, они могут включать в себя средства отладки, встроенные интерпретаторы основных языков программирования, сложные системы поиска кода, модули интеграции с GIT-хранилищами и многое другое).

Алгоритм работы очень простой:

Создаёте новый документ.
Если ваш редактор поддерживает работу с разными кодировками, то выбираете по умолчанию utf-8.
Вписываете в него нужную структуру документа (с использованием нужных тегов).
Сохраняете документ как текст (с расширением .txt) и меняете расширение на .html. Или сразу сохраняете файл в формате .html, если это позволяет ваш редактор.
Теперь документ можно открыть в любом браузере, он распознает в нём вашу разметку и отобразит содержимое.

Обратите внимание, блокнот Windows в устаревших версиях системы сохраняет текст в кодировке ANSI (в новых версиях он работает с UTF-8), это не преступление, но вместо кириллических символов в браузере вы можете увидеть кракозябры. Поэтому с помощью специального атрибута нужно просто «подсказать» браузеру, что ему нужно работать с ANSI:

Хватит теории, пора переходить к делу. Давайте создадим в блокноте полноценную страницу. Просто скопируйте и вставьте следующий код в ваш блокнот.

<!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 можно заменить на полную (абсолютную, вида https://site123.domen/css/mysitestyle.css) или даже относительную ссылку (вида /css/mysitestyle.css, отсчёт будет вестись относительно каталога, в котором будет лежать исходный html-файл).

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

Минимальное понимание CSS

Представьте себе, что у вас есть некий текст в блоке:

<div>
<Какой-то очень осмысленный текст для примера!>
</div>

Его можно стилизовать за счёт введения дополнительных тегов: заголовков (H1-H6), списков (простых и нумерованных), выделения жирным (тег <b>…</b> или <strong>…</strong>), подчёркивания (<em>…</em>) и т.д.

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

Всё это с лихвой реализуется в каскадных таблицах стилей (CSS). Стили можно определять на уровне классов (class="my-class"), идентификаторов (id="my-ID") или параметров, прописанных прямо внутри конкретного элемента (style="здесь перечисляются параметры и значения").

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

К классам обращение в CSS производится через точку (.vash-css-class), а к ID через решётку (#vash-ID).

Пример использования CSS-классов и ID внутри HTML:

<p class="dark-text" id="first-p">Здесь какой-то текст</p>

Пример описания CSS-параметров:

<style type="text/css">
.dark-text {
font-family: Helvetica;
color: red;
font-size: 10px;
}
#first-p {
text-transform: capitalize;
}
</style>

Выше мы определили для класса dark-text цвет (красный/red), семейство шрифтов (Helvetica) и размер (10 пикселей). А для идентификатора first-p прописали автоматическую трансформацию текста – капитализацию (преобразование всех букв в заглавные).

Чтобы класс начал работать и применять к элементу ваши стили, их нужно прописать внутри специального тега на странице (<style type="text/css">здесь список стилей с параметрами </style>) или внутри CSS-файла (ссылки на CSS-файлы мы описали выше). Внутри CSS-файлов используется тот же синтаксис, что и внутри тега <style>.

CSS-параметры прописываются внутри скобок {}, каждый отделяется от другого за счёт точки с запятой (на случай, если разные параметры будут написаны в одной строке).

К простым тегам обращение в CSS производится напрямую, без точек и решёток в начале (например, конструкция a {color: #fff;} будет отвечать за стилизацию всех тегов <a>).

Если прописать стили непосредственно внутри элемента, то они будут распространяться только на него.

<p style="font-family: Helvetica; color: red; font-size: 10px;">Здесь какой-то текст</p>

Но делать так крайне неудобно. Гораздо проще редактировать CSS-свойства централизованно – для того каскадные таблицы и изобретались. А внутри HTML достаточно будет просто расставлять нужные классы и ID.

Как вставить картинку/изображение в HTML-коде

Изображение или видео тоже может располагаться на вашем сервере (в корне с 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, иначе верстка «поедет»).

Как вставить видео в HTML-коде

Если файл будет храниться на вашем сервере, то нужно действовать по аналогии с картинками, но только вместо тега IMG будет использоваться тег VIDEO.

Простейший пример:

Соответственно, в корне сайта (рядом с файлом index.html) браузер будет искать файл video.mp4.

Многие браузеры лучше всего работают именно с MP4-форматом. Но могут быть и нюансы – в зависимости от версии и типа браузера (у кого-то есть поддержка проприетарных/закрытых кодеков, а у кого-то нет).

Тег с видео можно значительно расширить по возможностям управления и по параметрам внешнего вида.

Пример:

<video width="300" height="250" autoplay loop poster="https://site.site/video/poster1.jpg">
    <source src="https://site.site/video/video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Тут мы задали ширину (width), высоту (height) и несколько дополнительных параметров:

autoplay – команда для автоматического воспроизведения сразу после загрузки страницы.
loop – параметр для зацикливания видео (оно будет повторяться бесконечно, такой подход будет крайне удобен для постеров и для видео-фонов).
poster="" – отвечает за показ превью-картинки (постера) до тех пор, пока само видео не прогрузилось или пока пользователь не нажал на кнопку воспроизведения.
codecs="" – напрямую подсказывает браузеру кодеки, которые нужно использовать для воспроизведения видео.

Если вы вставляете видео с YouTube или с других стриминговых сервисов, нужно скопировать и вставить предложенный embedded-код. Например, для YouTube он будет выглядеть примерно так:

?start – это метка времени в секундах, с которой нужно начать воспроизведение.
Title – это заголовок ролика.
Accelerometer, gyroscope, allowfullscreen и другие атрибуты здесь – это параметры задействования сенсоров на смартфонах.

Как вставить кнопку в HTML

Тег кнопки выглядит примерно так:

<button type="button">Надпись на кнопке</button>

Или так:

Уже даже при наличии такой конструкции браузер нарисует в интерфейсе страницы простую кнопку с дефолтными для него свойствами внешнего вида.

Но работать такая кнопка не будет…

Стилизовать кнопку можно за счёт CSS-стилей и CSS-классов. Например так:

<button class="modern-button" type="button">Надпись на кнопке</button>

Тогда, добавив в теге Head нужные параметры стиля можно детально кастомизировать внешний вид всех кнопок с классом modern-button:

    <style type="text/css">
.modern-button {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.modern-button:hover {
    background-color: rgba(255, 0, 0, 1);
}
.modern-button:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

Обратите внимание:

:hover – это стили для кнопки при наведении на неё курсора.
:active – это стили, применяемые к кнопке при нажатии на неё.

Чтобы кнопка выполняла определённые действия, её нужно связать с тегом формы (<form>). Например, так:

<form action="/new-page.html" target="_blank">
   <button class="modern-button">Открыть страницу New Page</button>
</form>

Здесь параметр action говорит куда нужно переадресовать клиента (какое действие совершить), а параметр target="_blank" сообщает браузеру, что ссылку нужно обязательно открыть в новой вкладке.

Вместо перехода по ссылке можно задать и другие действия, например, запуск JS-скриптов.

Как вставить код аналитики в HTML

Коды счётчиков метрики обычно вставляют сразу после открывающего тега <head>.

Получить свой идентификатор и код для отслеживания можно внутри профильного сервиса аналитики. Например, для Google Analytics нужно создать аккаунт и добавить в него новый ресурс.

Код аналитики от Google будет выглядеть примерно так:

    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ВАШ-ИДЕНТИФИКАТОР"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA- ВАШ-ИДЕНТИФИКАТОР');
</script>

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

Код Яндекс.Метрики выглядит примерно так:

    <!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
   ym(ИНДЕНТИФИКАТОР_КЛИЕНТА, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/ИНДЕНТИФИКАТОР_КЛИЕНТА" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Он тоже копируется и вставляется полностью сразу после открывающего тега <head>.

Как вставить форму обратной связи (организовать сбор контактов) на статичных сайтах

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

Наиболее удобный конструктор web-форм на российском рынке – uCalc (наш обзор). Здесь можно делать что угодно – от онлайн-калькуляторов до многошаговых квизов с интегрированными картинками, есть даже готовая реализация системы бронирования. Для быстрого старта предоставляются готовые шаблоны, в наличии встроенная система уведомлений посредством SMS и email-сообщений, можно настроить интеграцию с популярными CRM-системами и даже принимать оплату прямо в формах.

В общем это мегакомбайн для сборки своих форм.

Алгоритм интеграции uCalc и статичного сайта будет выглядеть следующим образом:

Создаёте аккаунт (запустится бесплатный тестовый период, платные подписки от 4 USD/месяц, покупка навечно – от 120 USD).
Собираете свою форму – на основе шаблона или с нуля в удобном графическом конструкторе.
Получаете код формы.
Вставляете его в нужном месте HTML-страницы. Например, внутри подготовленного блока или во всплывающем окне.

Так выглядит простой код для интеграции на уровне HTML-блока:

    <div class="uCalc_ИДЕНТИФИКАТОР"></div>
<script>
    var widgetOptionsИДЕНТИФИКАТОР = {
        bg_color: "transparent"
    };
    (function() {
        var a = document.createElement("script"), h = "head";
        a.async = true;
        a.src = (document.location.protocol == "https:" ? "https:" : "http:") + "//ucalc.pro/api/widget.js?id=ИДЕНТИФИКАТОР&t="+Math.floor(new Date()/18e5);
        document.getElementsByTagName(h)[0].appendChild(a)
    })();
</script>

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

Один из вариантов реализации (на базе JQuery):

Код кнопки для вызова:

<button id="button_calc">Название кнопки</button>

Кнопка вставляется там, где вам удобно (например, можно реализовать плавающий/зафиксированный на экране блок). Идентификатор "button_calc" для кнопки будет обязательным! При этом стили можно добавить свои.

Например:

<button id="button_calc" class="modern-button">Название кнопки</button>

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

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Заголовок всплывающего окна" style="display:none;">
<div class="uCalc_ИДЕНТИФИКАТОР"></div>
<script>
    var widgetOptionsИДЕНТИФИКАТОР = {
        bg_color: "transparent"
    };
    (function() {
        var a = document.createElement("script"), h = "head";
        a.async = true;
        a.src = (document.location.protocol == "https:" ? "https:" : "http:") + "//ucalc.pro/api/widget.js?id=ИДЕНТИФИКАТОР&t="+Math.floor(new Date()/18e5);
        document.getElementsByTagName(h)[0].appendChild(a)
    })();
</script>
</div>
<script>
$("#button_calc").on("click", function() {
 $("#dialog").dialog();
});
</script>

Теперь при нажатии кнопки с ID ="button_calc" будет вызываться всплывающее окно с вашей встроенной формой uCalc.

Как вставить иконку в HTML-коде

Стандартная вставка иконок ничем не отличается от вставки картинок.

Вот так может выглядеть конструкция простой HTML-кнопки:

<button><img src="images/image.png" alt="Иконка кнопки" style="vertical-align: middle">Эта кнопка будет с рисунком</button>

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

Конечно, при желании всегда можно встроить стандартные картинки и даже gif-анимации внутри кнопок, текста и других элементов. Но они не адаптируются к размерам блока и практически не кастомизируются, поэтому профессиональные дизайнеры всё чаще работают с глифами (то есть с векторными шрифтами). К последним, например, относятся Font Awesome Icons, Dashicons, Typicons и другие.

Рассмотрим вставку иконку на примере Font Awesome. У сервиса есть несколько вариантов распространения: бесплатно и с платными подписками (от 99 USD/год).

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

Скачайте набор шрифтов на свой ПК – отсюда (для бесплатной редакции значков регистрация не требуется).
Распакуйте архив.
Скопируйте папки /webfonts и /css в корень вашего сайта.
Добавьте ссылки на css-файлы внутри тега <head> (подключите основной шрифт fontawesome.css и отдельные CSS-стили, которые планируете использовать в своём проекте, если со стилями никак не получается определиться, подключайте пакет all.css).
Пример для интеграции:

    <head>
  <link href="/css/fontawesome.css" rel="stylesheet">
  <link href="/css/brands.css" rel="stylesheet">
  <link href="/css/solid.css" rel="stylesheet">
    </head>

Укажите стиль иконки и при необходимости её дополнительные параметры (цвет, вращение и пр.). Например, так:
<i class="fa-solid fa-user" style="color: var(—fa-yellow);"></i>

Здесь "fa-solid" говорит о том, что нужно использовать увеличенную жирность/толщину отрисовки, а "fa-user" указывает непосредственно на макет иконки. Другие макеты иконок можно посмотреть на официальном сайте Font Awesome (их там более 26 тысяч).

Пример вставки иконки в кнопку со старой версией Font Awesome 4 и бесплатным CDN-хранилищем шрифтов:

    link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="modern-button"><i class="fa fa-home"></i>Надпись на кнопке</button>

Где fa fa-home – это и есть та самая иконка (в данном случае домика).

Многостраничные сайты в блокноте

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

Например, вы создаёте страницу 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. Но мы рекомендуем не тратить время, и выбрать проверенный сервис, такой как HostGator (компания работает с 2002 года и позволяет размещать даже динамические сайты, например, на популярном движке WordPress, а ещё здесь есть возможность установки любой системы управления контентом прямо из панели управления в один клик и тарифы с полным безлимитом). Цены – более чем приемлемые, от 3,75 USD/месяц.

Как разместить HTML-сайт на хостинге, пошагово:

Вы регистрируете новое доменное имя, если его ещё у вас нет.
Перенаправляете его на DNS-сервера выбранного хостера (например, в качестве NS-записей нужно указать ns123.hostgator.com и ns456.hostgator.com, конкретные данные можно найти в параметрах тарифа или в документации хостера).
В панели управления хостинга создаёте новый сайт (имя задаётся строго в соответствии с доменом).
Далее в веб-версии файлового менеджера или через FTP-протокол закачиваете ваши страницы в корень каталога сайта.
После того, как обновятся данные в DNS-системе и ваш домен начнёт ссылаться на сервера хостинга, сайт можно будет открыть в любом браузере просто введя имя (домен).

Стоит учесть, что если вы введёте в адресной строке vash-sait.ru, то хостинг будет пытаться загружать главную страницу, которую он ожидает увидеть с именем index.html в корне каталога (http://vash-sait.ru/index.html).

Если такого файла не будет, отобразится ошибка. Но вы можете прописать полный путь, например, vash-sait.ru/page1.html, и если файл с таким именем в каталоге сайта есть, то станица будет отображена.

Сколько стоит создать сайт

Стоимость создания сайта зависит от множества факторов. Узнайте сколько стоит создать свой сайт.

Подробнее

Выводы

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

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

Кроме того, в большинстве случаев одним только HTML ограничиться не получится. Если вам нужна интерактивность (обратная связь от посетителей: формы заказа звонков, чат, функционал интернет-магазина и т.п.), то придётся подключать языки программирования и JavaScript или готовые CMS-системы/фреймворки.

Создать сайт бесплатно

	10+ Оценка	Посетить hostgator.com →
	9.8 Оценка	Посетить Наш обзор →
	9.5 Оценка	Посетить bluehost.com →
	9.2 Оценка	Посетить Наш обзор →