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

8 июля 2022

Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили. Например, такие, через 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> -->

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

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

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

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

Какой формат выбрать — WebP, PNG или JPG

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

В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.

HTML

20 января 2025

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

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

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

Эмодзи	Название	HTML-код
😀	Улыбающееся лицо	😀
😂	Лицо со слезами радости	😂
😍	Лицо с глазами в форме сердца	😍
😎	Лицо в солнцезащитных очках	😎
😭	Плачущий	😭
😊	Смущённая улыбка	😊
😢	Грустное лицо	😢
😅	Лицо с каплей пота	😅
🤔	Задумчивое лицо	🤔
👍	Большой палец вверх	👍
👎	Большой палец вниз	👎
👏	Аплодисменты	👏
🙏	Сложенные руки	🙏
❤	Красное сердце	❤
💔	Разбитое сердце	💔
🔥	Огонь	🔥
💯	Сто баллов	💯
🎉	Конфетти	🎉
🎂	Торт	🎂
🌟	Звезда	🌟
✨	Сияние	✨
🌈	Радуга	🌈
☀	Солнце	☀
☁	Облако	☁
🌧	Дождь	🌧
❄	Снег	❄
🌍	Земной шар	🌍
💡	Лампочка	💡
💤	Сон	💤
🎵	Нота	🎵
🎶	Музыка	🎶
📱	Телефон	📱
💻	Ноутбук	💻
🚗	Машина	🚗
🚀	Ракета	🚀
✈	Самолёт	✈
🚲	Велосипед	🚲
🐶	Собака	🐶
🐱	Кошка	🐱
🐭	Мышь	🐭
🦊	Лиса	🦊
🐻	Медведь	🐻
🍎	Яблоко	🍎
🍕	Пицца	🍕
🍔	Бургер	🍔
🍩	Пончик	🍩
🍉	Арбуз	🍉

HTML

15 ноября 2024

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

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

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

HTML

27 февраля 2024

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

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

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

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

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

HTML

22 ноября 2023

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

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

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

HTML

1 ноября 2023

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

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

HTML

23 октября 2023

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

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

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

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

HTML

18 сентября 2023

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

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

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

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

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>

HTML