HTML
Статьи о вёрстке — HTML, CSS, Figma, графика, дизайн и другие темы.
15 самых популярных HTML-тегов
Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 1 февраля 2023
Как сделать кнопку в 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>
и затем стилизуют так, чтобы они стали похожими на кнопки.
- 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
.
Часто изображения-ссылки используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерную версию картинки или на отдельную страницу с этим изображением и подписью к нему.
- 13 января 2023
Готовый шаблон 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>
- 2 декабря 2022
Вёрстка сайтов для веб-дизайнеров
Так вышло, что дизайнеров не учат разработке в университете или на курсах — её нет в программе обучения. Могут преподавать информатику, но и здесь студенты изучают лишь основы программирования, слабо связанные с тем, что делают программисты на реальной работе.
Тем не менее, знать разработку надо — эти знания увеличат шансы на повышение и хорошую зарплату в IT.
👉🏻 Есть определённый объём знаний, который необходим разработчику и дизайнеру, чтобы нормально общаться друг с другом.
- 16 ноября 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>
- 8 июля 2022
Что такое ссылки и как их ставить. Тег 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
. Подсказка появится, когда курсор задержится над ссылкой некоторое время.
- 4 июля 2022
Почему фронтенду нужна дизайн-система
Умение выделять систему из дизайна и переносить её в код — полезный навык. Он экономит ваше время на разработку и поддержку крупных продуктов. С его помощью можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.
Давайте разберёмся, какие ещё преимущества дают дизайн-системы, и как эти системы создавать.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 9 марта 2022
Основы дизайна для верстальщиков
Где-то в параллельной вселенной существуют идеальные процессы и идеальные инструменты, которые позволяют создавать дизайн-макеты без единого недочета и упущения.
Наверное, это прекрасная вселенная. Но пока ученые не изобретут способы путешествий между мирами, верстальщикам придется иметь дело с макетами, в которых есть недочёты.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Дизайнер может что-то забыть, не перепроверить проект по чек-листу, не подумать о редких сценариях, ошибиться или просто чего-то не знать.
И не всегда у верстальщика есть возможность обратиться к дизайнеру за комментарием. Поэтому мы разберем, какие проблемы встречаются чаще всего, и как их решать самостоятельно.
- 24 февраля 2022
HTML-шаблонизаторы
Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.
Шаблонизаторы для HTML — один из таких способов.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 9 декабря 2021