HTML

Статьи о вёрстке — HTML, CSS, Figma, графика, дизайн и другие темы.

15 самых популярных HTML-тегов

15 самых популярных HTML-тегов

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

Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.

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

Читать дальше
HTML
  • 1 февраля 2023
Как сделать кнопку в HTML

Как сделать кнопку в HTML

Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type.

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

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

<button type="button" name="popup-button">Я кнопка</button>

Атрибут disabled блокирует доступ к кнопке.

<button type="button" disabled>Я заблокированная кнопка</button>

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

Полный список атрибутов

Иногда на сайте встречаются элементы вроде кнопок «Перейти в каталог», «Читать далее» или кнопок соцсетей. На самом деле это ссылки. Их создают с помощью <a href="">Какой-то текст</a> и затем стилизуют так, чтобы они стали похожими на кнопки.

Читать дальше
HTML
  • 27 января 2023
Как сделать картинку ссылкой

Как сделать картинку ссылкой

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

Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.

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

Чтобы вставить изображение на сайт, используют тег <img>. У тега есть четыре обязательных атрибута:

  • src — для указания пути до файла с картинкой и его отображения на экране;
  • width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
  • alt — альтернативное описание.
<img src="images/cat.jpg" width="600" height="200" alt="Котик">

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

<a href="https://htmlacademy.ru">
  <img src="images/cat.jpg" width="600" height="200" width="600">
</a>

Адрес ссылки задаётся в формате URL с помощью атрибута href.

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

Читать дальше
HTML
  • 13 января 2023
Готовый шаблон HTML-формы

Готовый шаблон HTML-формы

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

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

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

<form action="#" method="post" target="_blank">
  <h2>Шаблон формы</h2>
  <fieldset>
    <legend>Персональные данные</legend>
    <ul>
      <li>
        <label for="name">Имя:*</label>
        <input type="text" name="name" placeholder="Иван Иванов" id="name" required>
      </li>
      <li>
        <label for="age">Возраст:</label>
        <input type="number" name="age" placeholder="27" id="age" min="0" max="125">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Контакты</legend>
    <ul>
      <li>
        <label for="email">E-mail:*</label>
        <input type="email" name="mail" placeholder="ivanov@gmail.com" id="email" required>
      </li>
      <li>
        <label for="number">Телефон:*</label>
        <input type="tel" name="phone" placeholder="+7 000 000-00-00" id="number" maxlength="21" required>
      </li>
    </ul>
  </fieldset>
  <div>
    <label for="message">Увлечения</label>
    <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно" id="message"></textarea>
  </div>
  <fieldset>
    <legend>Учёба</legend>
    <ul>
      <li>
        <input type="checkbox" name="intensive-courses" id="courses" checked>
        <label for="courses">Прохожу курсы</label>
      </li>
      <li>
        <input type="checkbox" name="books" id="books">
        <label for="books">Читаю книги</label>
      </li>
      <li>
        <input type="checkbox" name="video" id="video">
        <label for="video">Смотрю видео</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Предпочтения</legend>
    <ul>
      <li>
        <input type="radio" name="preference" id="front" value="frontend" checked>
        <label for="front">Фронтенд-разработка</label>
      </li>
      <li>
        <input type="radio" name="preference" id="back" value="backend">
        <label for="back">Бэкенд-разработка</label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Отправить</button>
    <p>* — Обязательные поля</p>
  </div>
</form>
Читать дальше
HTML
  • 2 декабря 2022
Вёрстка сайтов для веб-дизайнеров

Вёрстка сайтов для веб-дизайнеров

Так вышло, что дизайнеров не учат разработке в университете или на курсах — её нет в программе обучения. Могут преподавать информатику, но и здесь студенты изучают лишь основы программирования, слабо связанные с тем, что делают программисты на реальной работе.

Тем не менее, знать разработку надо — эти знания увеличат шансы на повышение и хорошую зарплату в IT.

👉🏻 Есть определённый объём знаний, который необходим разработчику и дизайнеру, чтобы нормально общаться друг с другом.

Читать дальше
HTML
  • 16 ноября 2022
Шаблон простого сайта на HTML

Шаблон простого сайта на 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>
Читать дальше
HTML
  • 8 июля 2022
Что такое ссылки и как их ставить. Тег a

Что такое ссылки и как их ставить. Тег a

Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.

В HTML ссылки создаются с помощью тега <a>. Например:

<a href="https://htmlacademy.ru">HTML Academy</a>

href — это атрибут, в котором мы прописываем адрес для перехода.

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

Тег <a> можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Ссылки-заглушки показывают, что мы находимся на текущей странице, и отсюда не нужно никуда уходить:

<ul>
  <li><a>1 страница</a></li>
  <li><a href="2">2 страница</a></li>
  <li><a href="3">3 страница</a></li>
</ul>

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

Читать дальше
HTML
  • 4 июля 2022
Почему фронтенду нужна дизайн-система

Почему фронтенду нужна дизайн-система

Умение выделять систему из дизайна и переносить её в код — полезный навык. Он экономит ваше время на разработку и поддержку крупных продуктов. С его помощью можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.

Давайте разберёмся, какие ещё преимущества дают дизайн-системы, и как эти системы создавать.

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

Читать дальше
HTML
  • 9 марта 2022
Основы дизайна для верстальщиков

Основы дизайна для верстальщиков

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

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

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

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

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

Читать дальше
HTML
  • 24 февраля 2022
HTML-шаблонизаторы

HTML-шаблонизаторы

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.

Шаблонизаторы для HTML — один из таких способов.

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

Читать дальше
HTML
  • 9 декабря 2021