Шаблон простого сайта на HTML

  • 8 июля 2022

HTML

Евгений Шкляр

Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили. Например, такие, через awsm.css.

Как может выглядеть сайт по такому шаблону
Как может выглядеть сайт по такому шаблону

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Сайт легко запустится у вас на компьютере по инструкции или откроется сразу в браузере.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="./styles/style.css">

    <meta property="og:title" content="Заголовок страницы в OG">
    <meta property="og:description" content="Описание страницы в OG">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/">
  </head>
  <body>
    <header>
      <h1>Личный сайт</h1>
      <p>Который сделан на основе готового шаблона</p>
      <nav>
        <ul>
          <li><a href="index.html">Эта страница</a></li>
          <li><a href="catalog.html">Другая страница</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h2>Первая секция</h2>
          <p>Она обо мне</p>
          <img src="images/image.png" alt="Человек и пароход">
          <p>Но может быть и о семантике, я пока не решил.</p>
        </section>
        <section>
          <h2>Вторая секция</h2>
          <p>Она тоже обо мне</p>
        </section>
        <section>
          <h2>И третья</h2>
          <p>Вы уже должны были начать догадываться.</p>
        </section>
      </article>
    </main>
    <footer>
      <p>Сюда бы я вписал информацию об авторе и ссылки на другие сайты</p>
    </footer>
    <!-- сюда можно подключить jquery <script src="scripts/app.js" defer></script> -->
  </body>
</html>
Открыть шаблон в браузере

Короткий разбор

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

Доктайп помогает браузеру понять, как отображать страницу.

<!DOCTYPE html>

Внутри тега <html> мы указываем язык страницы, например:

<html lang="ru">

Называем кодировку страницы — для русского языка подходит utf-8.

<meta charset="utf-8">

Дальше идёт магия, которая помогает нашему сайту выглядеть чуть лучше. Она просто нужна, можете пока не задумываться.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про абсолютные и относительные ссылки.

<link rel="stylesheet" href="./styles/style.css">

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

<meta property="og:title" content="Заголовок страницы в OG">
<meta property="og:description" content="Описание страницы в OG">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">

<header> — шапка сайта — блок, который может повторяться на любой странице.

<header>
</header>

Дальше идут <h1> и <h2> — заголовки первого и второго уровня.

<h1>Это мой сайт</h1>
<h2>Первая секция</h2>

Следом навигация. В шаблоне она сделана через верхнюю навигацию <nav>, в которой ссылки сделаны списком <ul> и завёрнуты в тег <li>.

<nav>
  <ul>
    <li><a href="index.html">Эта страница</a></li>
    <li><a href="catalog.html">Другая страница</a></li>
  </ul>
</nav>

Одна из самых важных частей страницы — семантический тег <main>, в нём хранится основное содержимое, которое относится только к этой странице и не повторяется на других.

<main></main>

Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.

<img src="images/myphoto.jpg" alt="Фото автора сайта в профиль крупным планом">

Абзац текста — здесь пишем просто какой-то текст, который хотим показать на странице. Подробнее — в тренажёре.

<p>Но может быть и о семантике, я пока не решил.</p>

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

<!-- сюда можно подключить jQuery <script src="scripts/app.js" defer></script> -->

На этом всё, дорабатывайте шаблон по своему усмотрению.

Без чего ещё верстальщику никак:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

HTML-коды популярных эмодзи

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

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

ЭмодзиНазваниеHTML-код
😀Улыбающееся лицо&#128512;
😂Лицо со слезами радости&#128514;
😍Лицо с глазами в форме сердца&#128525;
😎Лицо в солнцезащитных очках&#128526;
😭Плачущий&#128557;
😊Смущённая улыбка&#128522;
😢Грустное лицо&#128546;
😅Лицо с каплей пота&#128517;
🤔Задумчивое лицо&#129300;
👍Большой палец вверх&#128077;
👎Большой палец вниз&#128078;
👏Аплодисменты&#128079;
🙏Сложенные руки&#128591;
❤Красное сердце&#10084;
💔Разбитое сердце&#128148;
🔥Огонь&#128293;
💯Сто баллов&#128175;
🎉Конфетти&#127881;
🎂Торт&#127874;
🌟Звезда&#127775;
✨Сияние&#10024;
🌈Радуга&#127752;
☀Солнце&#9728;
☁Облако&#9729;
🌧Дождь&#127783;
❄Снег&#10052;
🌍Земной шар&#127757;
💡Лампочка&#128161;
💤Сон&#128164;
🎵Нота&#127925;
🎶Музыка&#127926;
📱Телефон&#128241;
💻Ноутбук&#128187;
🚗Машина&#128663;
🚀Ракета&#128640;
✈Самолёт&#9992;
🚲Велосипед&#128690;
🐶Собака&#128054;
🐱Кошка&#128049;
🐭Мышь&#128045;
🦊Лиса&#129418;
🐻Медведь&#128059;
🍎Яблоко&#127822;
🍕Пицца&#127829;
🍔Бургер&#127828;
🍩Пончик&#127849;
🍉Арбуз&#127817;
HTML
  • 15 ноября 2024
Что писать в атрибуте alt

Что писать в атрибуте alt

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Читать дальше
HTML
  • 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

Читать дальше
HTML
  • 22 ноября 2023
Знакомство с HTML

Знакомство с HTML

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

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

Читать дальше
HTML
  • 1 ноября 2023
Специальные символы в HTML

Специальные символы в HTML

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

Читать дальше
HTML
  • 23 октября 2023
Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023
Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

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

Читать дальше
HTML
  • 8 июня 2023