Как правильно верстать в 2022 году. Часть 1 / Хабр
Вступление
Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.
В этой статье я расскажу лишь о небольшой части проблем, которые можно достаточно быстро решить, не прибегая к радикальному переписыванию больших частей проекта.
Содержание
Используйте правильные теги.
Как правильно вкладывать теги друг в друга.
Работа с медиаконтентом.
Пишем таблицы на HTML правильно.
a или button? Работа с интерактивными элементами и как выбрать правильный тег.
Различный теги для медиа-контента.
Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы.
Пишем доступные формы.
Избыточная вёрстка. Как облегчить разметку.
Современные фишки HTML и CSS способные облегчить нам жизнь.
Экспериментальные технологии, входящие в стандарт.
Используйте правильные теги
Исторически так сложилось, что HTML служит для описания документов. То есть язык гипертекстовой разметки был придуман для обмена документами (в основном научного характера) и не предназначался для построения сложных веб-приложений и сайтов. Благодаря развитию стандарта стало полегче, но большинство современных разработчиков всё ещё предпочитают <div> в качестве главного тега и засовывают в него любой контент, вплоть до изображений (через background-image).
И я прекрасно их понимаю, <div> — очень удобный тег: у него нет встроенных стилей, его можно вкладывать в другие дивы. Чем не кандидат на лучший тег. Но при таком использовании тегов мы теряем главные преимущества HTML:
семантику — чёткую структуру контента, где каждый тег говорит о том, зачем он здесь и что ожидается внутри;
доступность — HTML может рендериться не только браузером, но и другими инструментами, вроде скрин-ридеров, роботов-поисковиков и т.д. И в наших силах упростить для них парсинг страниц.
Про какие теги нам следует стоит помнить?
Структурные теги документа
Почти любой сайт или приложение можно разбить на 3 большие части: <header>, <main> и <footer>. Сейчас это стало неким стандартом в дизайне. Некоторые части приложения повторяются от страницы к странице, и мы можем выделить их в отдельные части (шапку и подвал).
Шапка — это контент вверху страницы.
Там обычно размещается логотип, навигационное меню и другие элементы, которые должны быть доступны пользователю с любой страницы. Тег <header> не обязательно один на странице, он может озаглавливать любую независимую часть (например, быть частью модального окна).
Подвал — нижняя часть сайта, где обычно дублируется навигация и располагаются контакты компании. Также, как и шапка, <footer> может быть не один и использоваться для других независимых частей, помимо страницы.
Тег
Плохо
<body> <div> ... </div> <div> ... </div> <div> ... </div> </body>
Хорошо
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
Помимо трёх базовых семантических тегов существует ряд других.
Разберём их ниже.
<article>
Это независимый блок на странице, который без внешнего контекста может существовать в рамках других сайтов и сервисов. Это может быть статья в блоге, твит, виджет VK, коментарий к публикации и т.д. Желательно, чтобы у этого блока был заголовок.
<section>
Неотделяемая от основного контента секция на странице. Например, это может быть блок на лендинге. Чаще всего имеет заголовок.
<aside>
Побочный, косвенный контент на странице, находящийся в стороне. Может иметь заголовок и быть не в одном экземпляре. Главная ошибка — использовать его только для боковой панели. Этот тег многогранен и может использоваться для любых блоков, не имеющих основное значение.
<nav>
Блок навигации с ссылками на другие страницы или разделы текущей страницы. Может использоваться только для основной навигации, а не для каждой группы ссылок. Например навигацию в <footer> не имеет смысла упаковывать в <nav>, так как подвал сам по себе предполагает присутствие навигационных элементов.
И этот тег не обязательно должен включать в себя список ссылок. Туда может входить навигация любого типа, главное, чтобы она считалась основной.
<address>
В этот тег нужно вкладывать контактные данные. У него по-особенному работает «область видимости» — контактные данные в <address> относятся к ближайшему родительскому блоку <article>, либо к <body>, если он находится вне <article>.
Заголовки
Как и в любом документе на HTML-странице могут содержаться заголовки. По стандарту мы обязаны всегда указывать заголовок первого уровня <h2>. Остальные уровни опциональны, но они должны быть в иерархической последовательности! Это значит, что мы не можем <h4> поставить после <h2>. Чтобы лучше это понять, посмотрим код ниже:
<body> <header> ... </header> <main> <h2> Наша кондитерская самая кондитерская из всех кондитерских </h2> ... <section> <h3> Почему наши булочки лучшие? </h3> ... <h4> Мука высочайшего сорта </h4> ... <h4> Много корицы </h4> ... <h5> Корица со Шри-Ланки</h5> ... <h4> Минимум сахара </h4> ... <h5> </section> </main> <footer> ... </footer> </body>
..
<section>
<h3> Почему наши булочки лучшие? </h3>
...
<h4> Мука высочайшего сорта </h4>
...
<h4> Много корицы </h4>
...
<h5> Корица со Шри-Ланки</h5>
...
<h4> Минимум сахара </h4>
...
<h5>
</section>
</main>
<footer>
...
</footer>
</body>Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.
По поводу использования нескольких заголовков <h2>: вы МОЖЕТЕ использовать несколько заголовков первого уровня, если это требуется на странице. Когда-то давно некоторые злые SEO-специалисты настоятельно не рекомендовали так делать, хотя спецификация ничего не говорит на этот счёт. Сейчас мы, конечно, не узнаем действительно ли поисковики снижали сайт в выдаче за использование двух и более заголовков первого уровня, но уже даже многие SEOшники признали, что этот фактор малозначителен при ранжировании сайтов.
Блочные теги
<p>
Простой тег для абзацев, именно для разделения текстовых частей. Не используйте <p> для коротких фраз внутри интерфейса. С точки зрения доступности, этот тег очень крут, дает пользователям с ограниченными возможностями «прыгать» между ними с помощью шорткатов.
<figure> и <figcaption>
Это иллюстрация с необязательной подписью. Во многих книгах изображения подписываются как «Рис. 1 — такой-то объект». Вот это и есть <figure>. Но в рамках HTML назначение этого тега гораздо шире. Мы можем разместить внутри цитату (см. ниже), фрагмент кода, какую-нибудь диаграмму. В общем <figure>
<figcaption>, который, в свою очередь, вкладывается в <figure>.<figure> <img src="https://example.com/cat.jpg" alt="Сердитый кот"> <figcaption>Кот, который зол на своего хозяина</figcaption> </figure>
<blockquote>
Тег для вставки длинных цитат.
Может иметь аттрибут cite, в котором указывается URL на источник цитаты, а также хорошо совместим с тегом <figure>, где в <figcaption> можно указать автора и название источника.
<figure> <blockquoute cite="https://www.youtube.com/watch?v=ZXsQAXx_ao0"> Just Do It! </blockquote> <figcaption> Shia LaBeouf, <cite>Motivational Speech</cite> </figcaption> </figure>
<hr>
Одиночный тег для разделения контента. Про него забывают и заменяют на border-bottom, но помимо визуального отображения этот тег несёт семантический смысл — тематическое разделение абзацев.
<pre>
Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.
Списки
Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.
<ul>
Неупорядоченный список применяется в том случае, если мы безболезненно можем поменять порядок элементов. Примеры:
<ul> <li>Удобная оплата</li> <li>Быстрая доставка</li> <li>Гарантия в 1 год</li> </ul>
<ol>
Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:
<ol> <li>Оформляете заявку</li> <li>С вами связывается менеджер для уточнения деталей</li> <li>Совершаете оплату</li> <li>Ожидаете доставку</li> </ol>
<dl>, <dd>, <dt>
Списки описаний применяются для формирования списков терминов.
<dl> <dt>HTML</dt> <dd>Язык разметки гипертекста, с помощью которого формируют контент веб-страницы</dd> <dt>CSS</dt> <dd>Язык для описания стилей веб-страницы</dd> <dt>JS</dt> <dd>Язык программирования, часто применяемый для написания веб-приложений</dd> </dl>
Строчные теги
<b>, <i>, <u>, <s>
Чудесные теги, которые чаще всего используют не по назначению. Они несут исключительно визуальное выделение текста. Если вы сбросите их стили, то они ничем не будут отличаться от обычного текста. В данный момент их можно использовать как теги для дополнительного выделения текста, которое вы оформите с помощью CSS. И да, тег <i> НЕ предназначен для иконок.
<em>
Как и <i> выделяет текст курсивом. Но зачем нам два тега для одного и того же? В том то и дело, что они разные.
<i>, как говорилось выше, не несёт никакого семантического смысла, это просто визуальное выделение, а <em> делает акцент на обёрнутом им тексте, который меняет смысл всего предложения. Например:Я <em>просто обожаю </em>, когда верстальщики используют только дивы.
<strong>
Браузер выделяет текст обёрнутый тегом <strong> полужирным. Но помимо визуального выделения, текст обретает семантический смысл — большую важность по сравнению с остальным текстом вокруг.
<cite> и <q>
Оба тега связаны с цитирований, но применяются в разных случаях. <cite> — тег, в который мы оборачиваем текст, который отсылается к другому документу/произведению/etc.
Больше информации вы сможете найти в стандарте <cite>[ISO-0000]</cite>
<q>
<blockquote>, разница лишь в том, что <q> применяется для строчных цитат.
<q cite="https://russian.rt.com/business/news/966657-rubl-dollar-evro"> Рубль растёт к доллару и евро </q> — сообщает RT со ссылкой на ФАН.
<code>
Применяется для оформления программного кода внутри текста. Если требуется вывести многострочный блок кода, то лучше использовать <code> в связке с тегом <pre>.
<time>
Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.
<time datetime="1995-11-24">24 ноября 1995 года</time>
<sub> и <sup>
Используются для добавления в текст индексов и степеней. Удобны для описания формул.
x<sub>1</sub> + x<sub>2</sub> = y<sup>2</sup> <!-- Икс первый плюс икс второй равно игрек в квадрате -->
<del> и <ins>
Нужны, чтобы показать, что из текста было что-то удалено или добавлено.
При этом они также обозначают факт изменения текста семантически, а не только визуально.
Вася пришёл домой в <del><time>19:00</time></del> <ins><time>23:00</time></ins>
<br>
Простой тег для переноса строки, думаю, все про него знают, потому что альтернативы нет.
Интерактивные элементы
<details>
Нативный дропдаун прямо в HTML! На самом деле не совсем так. <details> применяется, чтобы скрыть часть информации, которую можно получить, кликнув по кнопке, описанной во внутреннем теге <summary>.
Рубль растет на фоне заявлений Запада о введении санкций против России
<details>
<summary>Подробнее</summary>
Согласно данным валютных торгов на Московской бирже, по состоянию
на 22.40 мск курс доллара находился на уровне 78,7 рубля (-1,6%),
курс евро снижался до 89,3 рубля (-0,9%).
</details>Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.
Другие интересные теги
<abbr>
Тег для аббревиатур.
<abbr title="HyperText Markup Language">HTML</abbr> — основной язык разметки веб-приложений
<dfn>
Тег для выделения термина. Элемент<p>, пара <dt>/<dd> или <section>, который является ближайшим предком <dfn> считается определением термина.
<p> <dfn>JavaScript</dfn> — язык программирования, используемый в основных веб-браузерах. </p>
<kbd>
Используется для выделения названия клавиш в клавиатурных сочетаниях.
Чтобы открыть диспечер задач, нажмите сочетание клавиш <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>.
<samp>
Тег для обозначения вывода компьютерной программы. По-умолчанию выводится моноширинным шрифтом.
<p> Приложение упало с ошибкой:<br> <samp>404 Неизвестный ресурс</samp>
<var>
Элемент для вывода математических переменных
Для рассчёта расстояния <var>S</var>, необходимо перемножить скорость <var>V</var> на время <var>t</var>.
<bdi> и <bdo>
Теги, связанные с направлением текста ltr и rtl. Необходимы, когда мы встраиваем в текст, написанный языком в одном направлении, фразу или предложение написанное в другом.
<bdi> изолирует от окружающего текста фрагмент, который может поменять направление (но не обязательно поменяет).
<bdo> в свою очередь, переопределяет направление текста так, что текст внутри тега отображается в другом направлении, нежели чем окружающий.
<p dir="ltr"> Это <bdi>арабское слово</bdi> будет перевёрнуто. </p> <!-- Это оволс еоксбара будет перевёрнуто.
--><mark>
Элемент, выделенный по причине его актуальности в определённом контексте. Чаще всего используется для выделения ключевых фраз, введенных пользователем, в результатах поиска. По умолчанию, на текст внутри этого тега применяется жёлтый фон.
<meter>
Современный компонет, который может показывать шкалу с наполнением разного цвета, в зависимости от указанных значений. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.
Имеет следующие аттрибуты:
min— минимальное значение шкалы;max— максимальное значение шкалы;low— предел, при достижении которого, значение считается низким;optimum— предел, при достижении которого, значение считается оптимальным;high— предел, при достижении которого, значение считается высоким;value— собственно само значение.
<p>Температура воды</p> <meter value="0" max="100" low="10" high="60">Низкая</meter> <meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter>
Текст внутри является фолбэком для браузеров, которые не поддерживают этот тег.
<progress>
Тег для отображения индикатора, показывающего ход выполнения задачи. По простому — прогресс-бар.
<progress max="100" value="70">70%</progress>
<wbr>
Одиночный тег, указывающий, в каком месте можно переносить цельную строку. Является аналогом символа ­, с той лишь разницей, что не добавляет символ переноса в конце строки.
<ruby>, <rt>, <rp>
Теги, в основном используемые для иероглифов.
Не вижу смысла подробно их разбирать. Если интересно, можно почитать здесь.
<big>, <small>, <tt> и прочая эзотерика
Просто забудьте об этих тегах. Стандарт говорит, что они больше не поддерживаются и не рекомендует их использовать. Полный список здесь.
Заключение части 1
В этой статье ничего не сказано про элементы форм, таблицы, всякий медиа-контент, а также теги <a> и <button>. Об этом в следующих публикациях.
Также, я ничего не сказал по <div> и <span>, которые являются базовыми элементами для вёрстки. Их стоит использовать только в том случае, когда ничто из вышеперечисленного не подошло.
Как сверстать страницу, если совсем новичок и никогда не верстал?
Как сверстать, если никогда не верстал
ХТМЛ, структура и содержимое
ЦСС, оформление страницы
Публикация страницы в интернете
Как сверстать, если никогда не верстал
ХТМЛ, структура и содержимое
ЦСС, оформление страницы
Публикация страницы в интернете
Как всё устроено
Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы.
Например, несложный в освоении бесплатный редактор Саблайм Текст
Любая веб‑страница — это просто текстовый файл с особой разметкой. Поэтому чтобы создать страницу, достаточно создать файл с любым именем и расширением .html. Этот файл можно открыть любым текстовым редактором, а можно сразу перетащить в браузер. Если файл пустой, то и в браузере откроется чистый белый лист.
Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор Саблайм Текст
В файл можно написать любой текст. Если после этого сохранить файл и обновить страницу в браузере, текст появится на странице.
ХТМЛ, теги и атрибуты
ХТМЛ‑разметка структурирует содержимое и состоит из тегов — контейнеров, в которые помещается текст. Текст помещается внутри тега, между его открывающей и закрывающей частями:
<h2>Текст внутри тега-заголовка</h2>
<p>
Текст внутри текстового тега p — параграфа
</p>
<small>
Маленький текст в своём специальном теге
</small>Полный список тегов
Теги можно бесконечно вкладывать друг в друга.
Например, сделать жирный текст внутри параграфа или обозначить пункты списка:
Полный список тегов
<p>По-настоящему <b>важные</b> принципы:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>Все атрибуты тегов
У тегов есть атрибуты — параметры для настройки внешнего вида и поведения. Например, атрибут href добавляют к тегу‑ссылке a, чтобы он по клику отправлял на другую страницу. Тег br в примере переносит строку, чтобы ссылки не слиплись.
Все атрибуты тегов
<a>Нерабочая ссылка</a>
<br>
<a href="https://vk.com/">Рабочая ссылка</a>Ещё есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Это картинки и разные интерактивные элементы: видео, поля ввода, кнопки. Поведение и содержимое таких тегов полностью настраивается атрибутами.
Например, у тега‑картинки img ссылку на саму картинку указывают в атрибуте src:
<img src="https://bureau.ru/files/3slova-logo.png">
Служебные теги
В завершение вёрстки минимальной страницы, нужно добавить пару служебных тегов.
Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины
Наличие служебных тегов — это требование стандартов разработки веб‑страниц. Они помогают браузеру и поисковым системам лучше понимать страницу и работать с ней. Современные браузеры крайне терпимы и покажут страницу и без них, но по‑хорошему забывать эти теги нельзя. На старте можно не вникать в детали служеных тегов, а просто запомнить их как некое заклинание.
Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины
Добавим тип документа, корневой тег, обозначение языка страницы и кодировку UTF‑8, контейнер для метаданных head и контейнер для всего видимого содержимого body.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>Моя прекрасная веб-страница</h2>
<p>Я верстаю и сияю как заря!</p>
</body>
</html>Визуально от этих тегов ничего не меняется, но так мы соблюдаем стандарты веб‑разработки и облегчаем работу браузерам и поисковикам.
В тег head обычно помещают много разных служебных тегов. В самом простом варианте, кроме кодировки, будет достаточно тега title. Это заголовок страницы для поисковиков и название вкладки для браузера. Внутри title может быть только чистый текст, никаких вложенных тегов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>😎 Моя прекрасная веб-страница</title>
</head>
<body>
<h2>Моя прекрасная веб-страница</h2>
<p>Я верстаю и сияю как заря!</p>
</body>
</html>Всё! Концептуально это весь ХТМЛ, дальше верстальщик уже изучает разные теги и особенности работы с ними, осваивает смежные технологии: язык стилей ЦСС и язык программирования Яваскрипт.
В следующих советах расскажу как стилизовать теги языком ЦСС и как загрузить страницу в интернет, чтобы сделать доступной для других людей.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
Как создать сайт — Бесплатный конструктор сайтов
Только ограниченное время: получите бесплатный домен с любым годовым планом. Предложение скоро закончится.
×
Создайте свой бренд. Завоевать мир.
Нулевой код или навыки проектирования не требуются.
Нам доверяют миллионы предпринимателей и креативщиков
Создание веб-сайта никогда не было таким простым.
«В течение часа у нас была, вероятно, наша лучшая целевая страница и за небольшую цену. Это потрясающе. С тех пор я создал около 15 сайтов на Strikingly — на данный момент это мой любимый технический инструмент для стартапов.»
«Мы выбрали Strikingly с самого начала нашего проекта, стремясь к простоте и стилю. Сейчас, когда наш проект растет, мы очень рады видеть, что наша любимая платформа расширяет свои функциональные возможности и отвечает нашим потребностям.»
«Не существует формулы того, что такое «круто». Это инстинктивная реакция. Вы просто узнаете это, как только увидите.»
Посмотреть больше клиентов
Рекомендуемые в
Самый простой редактор веб-сайтов
Нажмите что-нибудь, чтобы отредактировать, и сразу же опубликуйте. Абсолютно не требуется код или опыт проектирования.
Мы делаем все просто и целенаправленно. Создайте красивый веб-сайт менее чем за 30 минут.
Встроенная электронная коммерция
Просто добавьте наш Simple Store и подключитесь к PayPal или Stripe.
Начните продавать и получать деньги немедленно.
Поразительно идеально оптимизирован для продажи. Добавьте доставку, купоны, входы в систему и многое другое. Независимо от того, продаете ли вы один продукт или сотню, мы упростим вам задачу.
Превратить посетителей в суперфанатов
Мощные инструменты для развития вашей аудитории. Создавайте и управляйте подписками, формами, чатом и информационными бюллетенями в одном месте. Вы даже можете зарегистрировать членство, чтобы заинтересовать свою аудиторию!
Это не просто статическая страница — она поразительно оживит ваш сайт.
Все необходимые функции
Доменные имена
Зарегистрируйте новое доменное имя или используйте уже существующее. (Доступно после обновления.)
Simple Store
Продавайте товары на своем сайте с полной функциональностью электронной коммерции! Купоны, доставка, цифровые товары и многое другое полностью встроены.
Простой блог
Держите своих посетителей в курсе событий с помощью нашего невероятно простого ведения блога.
Каждое сообщение в блоге получает свою собственную страницу.
Аналитика
Все сайты имеют встроенную аналитику. Посмотрите, кто был в гостях с легко читаемыми диаграммами.
Регистрация и контактные формы
Запускаете новую услугу или хотите получить отзыв? Просто добавьте форму регистрации или контактную форму!
Социальная лента
Показывайте свою ленту Facebook, Twitter и Instagram прямо на своем сайте.
HTTPS Встроенный
Все сайты получают HTTPS автоматически, бесплатно! Повышенная безопасность, усиление SEO и завоевание доверия посетителей.
…и многое, многое другое!
Галереи, видеофоны, слайдеры мультимедиа, пользовательские цвета, защита паролем. Все это интегрировано в наш стильный современный дизайн и интуитивно понятный редактор.
Круглосуточная поддержка
Напишите нам в любое время по электронной почте или в чате. Наша команда счастья всегда готова помочь вам добиться успеха.
О компании Strikingly
Strikingly делает красивые мобильные веб-сайты доступными для всех.
Что такого особенного в сайте Strikingly? Простота, ясность и доступность. Владение профессиональным, оптимизированным для мобильных устройств веб-сайтом важнее, чем когда-либо. Не теряйте посетителей из-за тяжелого и запутанного веб-сайта. То же самое касается редактирования: не зацикливайтесь на микроуправлении своим сайтом и не тратьте время на размышления о том, где что-то изменить. Редактируйте все это на одном экране и делайте это быстро.
Служба поддержки
Если вам нужна помощь в использовании Strikingly, отправьте электронное письмо по адресу [email protected].
Пресса
По вопросам прессы обращайтесь по адресу [email protected].
Социальные сети
Вы также можете связаться с нами через Facebook или Twitter.
×
Запустите свой сайт за считанные минуты
Создайте свой сайт на ходу
СКАЧАТЬ ПОТРЯСАЮЩЕЕ ПРИЛОЖЕНИЕ
Выберите шаблон.
Редактировать. Публиковать.
Все в вашем телефоне.
Как сделать сайт за 5 шагов
Раскрытие информации для рекламодателей и редакторов
В эпоху цифровых технологий наличие собственного веб-сайта необходимо для большинства малых предприятий. Они могут усилить ваш бренд, помочь вам связаться со старыми клиентами и позволить вам привлечь новых клиентов.
Фактически, отсутствие веб-сайта может сделать ваш бизнес архаичным и оторванным от реальности.
Хорошей новостью является то, что установить свое присутствие в Интернете стало проще, чем когда-либо прежде. В этом пошаговом руководстве мы рассмотрим все, что вам нужно знать о том, как создать новый веб-сайт.
Как создать веб-сайт за 5 шагов — Учебное пособие
Вот краткое руководство для начинающих о том, как создать веб-сайт.
1. Определите цель вашего веб-сайта
Сначала решите, чего вы хотите достичь в цифровом виде.
Вот несколько вариантов использования веб-сайтов:
- Повышение узнаваемости бренда путем демонстрации ваших продуктов или услуг
- Сбор электронных писем с помощью регистрационной формы
- Продажа товаров или услуг через ваш веб-сайт
- Обработка запросов в службу поддержки клиентов
- Ведение блога о вашем бизнесе и отрасли, а также объявление о новых продуктах
- Предоставление форума для клиентов в вашей отрасли и/или сообществе в сети
- Направление клиентов в магазины или платформы социальных сетей, которые продают ваши products
Важно определить свои цели, поскольку стоимость создания веб-сайта может варьироваться в зависимости от ваших потребностей.
Например, вы можете использовать бесплатный сервис, если ваша единственная цель — собирать электронные письма.
2. Выберите платформу
Затем выберите конструктор сайтов или платформу. Эти сервисы позволяют вам создавать свой веб-сайт с помощью интерфейсов перетаскивания, что означает, что вам не нужно ничего кодировать самостоятельно. Просто создайте учетную запись, а затем начните настраивать внешний вид своего сайта.
Вот несколько лучших провайдеров веб-сайтов.
- Shopify — Разработанный для интернет-магазинов и предприятий электронной коммерции любого размера, Shopify позаботится обо всех ваших потребностях в обработке платежей. Их удобный интерфейс также позволяет легко создавать красивые страницы продуктов, которые мгновенно сделают ваш бизнес профессиональным. Ценовая шкала зависит от вашего бизнеса.
- Wix.com — Отлично подходит для любого вида бизнеса. Wix, известная своим пользовательским интерфейсом, является одной из самых настраиваемых платформ, доступных с функциями для каждой отрасли. Независимо от того, создаете ли вы сайт электронной коммерции или просто целевую страницу, они упрощают создание и масштабирование потрясающих веб-сайтов.
- GoDaddy — Универсальный магазин для доменов и создания веб-сайтов. GoDaddy поставляется с платформой, которая позволяет настраивать сайт, например Shopify и Wix. У них также есть служба, которая обрабатывает весь процесс проектирования для вас.
- MailChimp — Разработанный для целевых страниц с подпиской и регистрационными формами, Mailchimp в первую очередь является инструментом автоматизации электронного маркетинга для списков адресов электронной почты. Но они также предлагают функцию дизайна сайта, которая идеально подходит, если вашей единственной целью является сбор контактной информации.
- Squarespace — Отлично подходит для любого бизнеса. Squarespace является близким конкурентом Wix и имеет схожие функции, в том числе возможность быстро и легко создавать красивые сайты.
- WooCommerce — Идеально подходит для магазинов электронной коммерции и онлайн-компаний, которым нужны удобные домашние страницы и надежная обработка платежей. WooCommerce — это плагин WordPress, который интегрируется в вашу панель управления WordPress.
- WordPress — WordPress — бесплатная платформа с открытым исходным кодом, разработанная для предприятий и блоггеров, которым требуется еще больше настраиваемости, чем то, что предлагают вышеперечисленные решения. Это идеальный выбор, если поисковая оптимизация (SEO) важна для вашего бизнеса. Это также система управления контентом для некоторых из крупнейших веб-сайтов в мире, и она может отлично подойти для личных веб-сайтов.
Независимо от того, создаете ли вы сайт электронной коммерции или просто целевую страницу, они упрощают создание и масштабирование потрясающих веб-сайтов.
И, конечно же, всегда есть возможность создать собственный код с нуля или нанять веб-разработчика.
3. Получите собственное доменное имя
После того, как вы выбрали платформу, заблокируйте доменное имя для своего веб-сайта. Доменные имена — это адреса, которые пользователи будут вводить для перехода на ваш веб-сайт, например, nav.
com или wikipedia.org.
Большинство провайдеров веб-сайтов теперь предлагают возможность купить доменное имя на платформе, но вы также можете просматривать регистраторов доменов, таких как namecheap.com и domains.google, если вы предпочитаете получать свое имя через третью сторону. Обратите внимание, что домены больше не должны заканчиваться на «.com» или «.org». Существует значительный список других вариантов, включая «.co», «.finance», «.us» и «.biz». Чтобы увидеть полный список того, что доступно, просто введите ключевое слово на сайте вашего провайдера домена.
Доменные имена могут варьироваться от 12 долларов в год до семизначных чисел. Более длинные домены, как правило, дешевле, а идеи, состоящие из одного слова, часто намного дороже.
4. Получить веб-хостинг
«Хостинг» — это технический термин, который переводится как «аренда места для хранения файлов вашего веб-сайта». Вашему сайту нужно где-то хранить свои данные, а провайдеры веб-хостинга предоставляют цифровую недвижимость.
Популярные хостинговые компании включают Bluehost, HostGator и Hostinger. Цены на базовый план хостинга могут начинаться всего с 2,75 долларов в месяц и увеличиваться в зависимости от ваших потребностей.
Вам нужно выполнить этот шаг только в том случае, если вы создаете свой сайт на WordPress или программируете свой собственный код. Другие платформы поставляются со встроенными услугами хостинга.
5. Отметьте все в этом списке
Если вы дошли до этого шага, вы готовы приступить к разработке своего веб-сайта и привлечению посетителей. При разработке убедитесь, что вы учитываете эти важные функции.
- Страница политики конфиденциальности — Из-за определенных формулировок, содержащихся в Законе о Федеральной торговой комиссии, настоятельно рекомендуется наличие политики конфиденциальности на вашем веб-сайте. Google «генератор политики конфиденциальности» для шаблона.
- Политика в отношении файлов cookie — Если ваша веб-страница собирает файлы cookie и принимает посетителей из Калифорнии или других стран, убедитесь, что у вас есть заявление об отказе от использования файлов cookie. Многие сайты структурируют это как всплывающее окно.
- Плагины для аналитики — В какой-то момент вам понадобится возможность анализировать поведение пользователей, в том числе откуда приходят ваши посетители и как они взаимодействуют с вашим сайтом. С бесплатными решениями, такими как Google Analytics, нет причин не начать отслеживать это с первого дня.
- Плагины SEO — Если вы планируете получать трафик из Google и других поисковых систем, убедитесь, что ваш сайт использует оптимизацию для поисковых систем (SEO). Для пользователей WordPress одним из лучших плагинов является Yoast.
- SSL и меры безопасности — Если ваш сайт работает на WordPress.org, вам может потребоваться установить SSL-сертификат, а также другие подключаемые модули безопасности для обеспечения безопасности вашего сайта. Другие платформы, такие как Shopify и Wix, часто имеют встроенные функции безопасности.
- Убедитесь, что ваш сайт загружается быстро — Не тратьте часы на украшение вашего сайта только для того, чтобы обнаружить, что он загружается целую вечность. Периодически проверяйте скорость вашего сайта, особенно на мобильных устройствах.
- Включите подписку по электронной почте или контактную форму — Электронная почта — один из самых эффективных способов превратить посетителей в клиентов. Убедитесь, что у посетителей есть возможность ввести свою контактную информацию где-нибудь на вашем сайте. Вы также можете включить всплывающее окно, которое раздает халяву в обмен на регистрацию по электронной почте.
Многие сайты структурируют это как всплывающее окно.
Периодически проверяйте скорость вашего сайта, особенно на мобильных устройствах.Можете ли вы создать сайт бесплатно?
Есть несколько бесплатных конструкторов веб-сайтов, которые позволяют вам бесплатно создать полноценный бизнес-сайт.
Если вы ищете стандартный сайт с базовыми функциями, такими как возможность разместить домашнюю страницу, страницу контактов, меню навигации и блог, рассмотрите возможность использования WordPress. Есть две версии: WordPress.com и WordPress.org.
Версия .com легко подключается и является отличным выбором, если вы разрабатываете свой первый веб-сайт.
Создайте бесплатную учетную запись и сразу начните строить. Версия .org имеет немного более высокую кривую обучения. Прежде чем вы сможете начать строительство, требуется настроить хостинг и доменное имя. Если ваши цели включают SEO-оптимизацию и настройку HTML и CSS, выберите вариант .org.
Если вам нужен веб-сайт электронной коммерции с такими возможностями, как возможность обработки платежей и создание страниц продуктов с функциями корзины покупок, вам нужно либо купить платные темы и приложения WordPress, либо создать собственный сайт WordPress, либо нанять дизайнера веб-сайта.
Еще одна платформа, позволяющая создать бесплатный веб-сайт, — Mailchimp. Целевые страницы Mailchimp хороши, если вашей единственной целью является сбор адресов электронной почты или другой контактной информации. Имейте в виду, что бесплатный план поддерживает только домены с брендом Mailchimp. Чтобы создать автономный сайт с собственным доменом, вам необходимо перейти на платный план.
Наконец, большинство платформ позволяют бесплатно создать основу для вашего веб-сайта.
Вам нужно будет перейти на платный план, чтобы ваш сайт заработал, но Shopify, Wix, Squarespace и другие подобные сайты позволяют вам копаться и создавать черновой вариант бесплатно.
Как найти лучший конструктор веб-сайтов
Интернет-бизнес рос невероятными темпами за последние несколько лет, и поставщики веб-сайтов росли вместе с отраслью. У провайдеров веб-сайтов нет недостатка в выборе, который может быть ошеломляющим.
Один из способов найти наилучшую платформу — использовать Nav. Наша платформа курирует ведущие услуги по созданию веб-сайтов и регулярно обновляет наш выбор по мере появления новых возможностей.
С учетом сказанного, вот несколько высококачественных вариантов, которые мы рекомендуем. Этот краткий список оптимизирован для обеспечения надежности, настраиваемости и доступности. Некоторые из крупнейших мировых компаний используют эти сайты, и их давняя репутация делает их заслуживающими доверия.
Продавцы используют Shopify в качестве своего коммерческого решения, потому что мы предоставляем продавцам все, что им нужно, чтобы узнать больше
Нужен сайт? Выбирайте из сотен дизайнерских шаблонов и создавайте сами.