Мы используем файлы cookie, чтобы обеспечить максимальное удобство использования нашего веб-сайта.

Как дизайнеру создать HTML-страницу пошагово: практика

Не страшные основы HTML и CSS

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

Содержание:

Часть 1. Подготовка: зачем дизайнеру знать HTML и CSS?

Дизайнеры, не пугаемся: становиться программистами вам не понадобится. Но понимание того, как устроен «каркас» сайта, может стать вашей суперсилой.
Редактирование без паники. Например, вам прислали задачу: «Поменяй текст в двух абзацах на лендинге». Вы заходите в админку (Tilda, WordPress, и т.д.), открываете редактор и видите два режима: `Rich Text` (визуальный) и `HTML`. Теперь вы не испугаетесь, откроете `HTML`, найдете нужные куски кода и аккуратно поменяете текст.

Точная коммуникация с верстальщиком. Вместо «сделай отступ побольше» вы сможете дать четкое ТЗ: «Добавь margin-bottom для этого блока».

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

Что это за инструменты?

HTML (HyperText Markup Language) — это язык разметки, а не программирования. Он создает структуру (скелет) страницы: вот заголовок <h1>, вот абзац <p>, вот кнопка <button>, а вот изображение <img>. Без них страница будет простым текстом, как в «блокноте». Это главное. Представьте, что это каркас здания.

CSS (Cascading Style Sheets) — это каскадные таблицы стилей. Они отвечают за оформление (фасад) нашего здания: этот заголовок сделай синим и шрифтом Arial, у этой кнопки — скругленные углы и красный фон. CSS оживляет структуру.

Браузер — это умный «переводчик». Он читает инструкции (HTML и CSS) и рисует по ним готовую страницу, которую видит пользователь.

Тимоти Джон Бернерс-Ли — создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо).

Часть 2. Практикум: создаем свою первую страницу

Шаг 1: Создаем HTML-документ

  1. Откройте любой текстовый редактор на компьютере (Блокнот на Windows или TextEdit на Mac). Убедитесь, что форматирование отключено (в TextEdit: «Формат» → «Конвертировать в простой текст»).
  1. Скопируйте и вставьте этот базовый каркас любого HTML-документа. Текст внутри <!–> необязателен, это пояснительные комментарии:
<!DOCTYPE html>

<html>

<head>

<!-- Здесь будет служебная информация -->

</head>

<body>

<!-- Здесь будет весь видимый контент -->

</body>

</html>
  1. Сохраните файл на рабочий стол с именем `моя-страница` и расширением .html. Кодировка — UTF-8 (обычно стоит по умолчанию).
  2. Найдите этот файл на компьютере и откройте его двойным кликом. Он запустится в вашем браузере. Пока вы увидите только пустую страницу, но она уже работает!
  3. Для редактирования этой  html-страницы все дальнейшие изменения нужно будет вносить в .html файл на вашем компьютере (откройте его в текстовом редакторе).

Что мы только что сделали?

  • <!DOCTYPE html> — сообщили браузеру, что это документ HTML5.
  • <html> — корневой тег, внутри которого живут все остальные.
  • <head> — «голова» документа. Здесь служебная информация (заголовок, кодировка, будущие стили), которая не отображается на странице.
  • <body> — «тело» документа. Всё, что вы напишете внутри этого тега, появится в окне браузера.

Шаг 2: Наполняем страницу контентом

Теперь добавим жизнь в <body>. Все команды в HTML называются тегами. Они обычно парные: открывающий <тег> и закрывающий </тег>. Обязательно закрывайте теги, иначе они не будут работать!

Вернитесь в текстовый редактор и добавляйте код последовательно внутрь <body>. После изменений сохраняйте файл (Ctrl+S/Cmd+S) и обновляйте страницу в браузере.

1. Заголовки и абзац:

<body>
<h1>Про погоду</h1>
<h2>Про погоду</h2>
<h3>Про погоду</h3>

<p>
погодой управлять не сложно
для солнца нужно заболеть
затеять стирку чтобы ливень
а хочешь град помыть окно
</p>
</body>
  • <h1> — главный заголовок (самый крупный, должен быть один на странице).
    <h2>, <h3> и так далее — подзаголовки, создающие иерархию.
  • <p> — параграф (абзац текста).

2. Выделение текста и перенос строки:

<p>Этот текст <strong>очень важен</strong>, а этот <em>с акцентом</em>.</p>
<p>Это первая строка.<br>А это вторая строка после принудительного переноса.</p>

<body>
<h1>Про погоду</h1>
<h2>Этот текст <strong>очень важен</strong>, а этот <em>с акцентом</em></h2>
<h3>Про погоду</h3>

<p>
погодой управлять не сложно<br>
для солнца нужно заболеть <br>
затеять стирку чтобы ливень<br>
а хочешь град помыть окно<br>
</p>
</body>
  • <strong> — делает текст жирным по умолчанию.
  • <em> — делает текст курсивным по умолчанию.
  • <br> — тег принудительного переноса строки. Он одиночный (не требует закрывающего тега, самозакрывающийся). К слову говоря в общении с профессиональными кодерами вы можете столкнуться с мнением, что корректно писать <br />, однако это дискуссионный вопрос. В современной HTML-верстке встречаются оба варианта и оба работают корректно.

3. Ссылка и изображение:

<body>
<p>Вы можете посмотреть <strong>видео-лекцию</strong> с разбором данной html-верстки. Этот и другие уроки доступны при оформлении <a href=“https://universe.courses/oformlenie-zakaza/”>пробной подписки Universe</a> за 100 рублей.</p>
<img src="https://example.com/my-image.jpg" width="500px">
</body>
  • <a href=”…”> — создает кликабельную ссылку. Адрес пишется в кавычках внутри `href`.
  • <img src=”…”> — вставляет картинку, где`src` — это адрес изображения на вашем компьютере/в браузере, а `width` задает ширину в пикселях.

Шаг 3: Добавляем цвета и шрифты с CSS

Теперь займемся стилями (CSS). Самый наглядный способ для начала — добавить их прямо в тег с помощью атрибута style=”…” .

1. Стили прямо внутри тега (inline-стили):

<body>
<h1 style="font-size: 20px; color: #2758aa; font-family: arial, helvetica, sans-serif">Про погоду</h1>
</body>
  • color — цвет текста. Мы используем HEX-код (как в палитре Figma). Но можно обозначать словами “color: blue“ или через RGB “color: rgb (39 88 170)”.
  • font-family — семейство шрифтов. На странице будет использоваться тот шрифт из предложенных, что есть на компьютере пользователя.

2. Общие стили для всего документа:

Прописывать стили для каждого тега утомительно. Давайте вынесем их в раздел <head> и добавим несколько новых элементов в код.

  1. Перед этим не забудьте удалить атрибуты style из <h1> из предыдущего примера.
  2. Добавьте описание класса (название стиля) внутри тега <style>…</style> внутри тега <head>…</head>, это служебная информация, она не будет отображаться при просмотре страницы.
  3. Самый простой вариант описания стиля состоит из имени, которое всегда начинается с точки, далее в фигурных скобках мы описываем свойства объекта строго определенным образом. В сети есть множество справочников, например HTML Book, также большинство профессиональных редакторов имеют сервис подсказок, в общем всегда можно подсмотреть. В итоге описание класса выглядит как-то так: .blue{color: #2758aa;}
  4. Свойства всегда описываются так: название свойства, двоеточие, значение, точка с запятой — color: #2758aa;
  5. Чтобы применить это оформление в теге просто пишем свойство class, а далее в скобках имя, вот так: class=”blue”. Свойств в одном стиле может быть сколько угодно. Для удобства кодеры пишут их в столбик, так проще и хорошо видно, не пропустили ли вы точку с запятой — без этого свойство работать не будет.
  6. Можно также задать свойства сразу для каждого из структурных элементов (всех абзацев, заголовков, таблиц, кнопок и тп). Для этого вместо названия класса нужно написать имя тега: p, H1, table, button и тд. Мы сейчас попробуем и так и так: оформим текст через класс, а свойства кнопок пропишем сразу для тега.
  7. Нам еще понадобится сама кнопка — в HTML это небольшой блок, внутри которого находится какая-то информация: обычно просто текст, но может быть и иллюстрация или еще что-то. Плюс кнопка работает по логике ссылок — нажатие на нее переводит на какую-то страницу или на место в странице или запускает какой-то процесс. Добавьте тег <button> внутри <body>. По сути кнопка
  8. Распишите код вот так:
<html> 
<head> 
<style> 
.blue{
color: #2758aa;
font-family: arial, helvetica, sans-serif;
}

button{
margin: 40px 0 110px 0; 
border-radius: 200px;
border-style: solid;
background-color: transparent;
border-color: #2758aa;
border-width: 1px; 
padding: 10px; 
color: #2758aa; 
}

</style> 
</head>

<body>
<h1>Про погоду</h1>
<h2 class="blue">Про погоду</h2>

<p class=”blue”>
погодой управлять не сложно<br>
для солнца нужно заболеть<br>
затеять стирку чтобы ливень<br>
а хочешь град помыть окно<br>
</p>

<button>Пусть всё будет хорошо!</button>
</body>
</html>

Теперь вы можете “назначать” стили тому или иному тегу: <p class=”blue”>Этот абзац автоматически получил стили класса .blue.</p>

Ключевые свойства для дизайнера:

  • margin — внешние отступы (отодвигают элемент от других).
  • padding — внутренние поля (отступ от содержимого до границы элемента).
  • border — рамка и все вытекающие.  

Шаг 4: Проверяем результат

Сохраните итоговый HTML-файл. Это делается точно так же как и сохранение обычного текстового документа, только вместо .txt наберите .html

Вот полный код из нашего примера:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.blue{
color: blue;
font-family: arial, helvetica, sans-serif;
}

button{
margin: 40px 0 110px 0; 
border-radius: 200px;
border-style: solid;
background-color: transparent;
border-color: #2758aa;
border-width: 1px; 
padding: 10px; 
color: #2758aa; 
}

</style> 
</head>

<body> 
<strong>Hello, <em>World!</em></strong>
<h1 style="font-size: 20px; color: #2758aa; font-family: arial, helvetica, sans-serif">Про погоду</h1>
<h2 class="blue">Про погоду</h2>
<h3 class="blue">Про погоду</h3>
<h4>Про погоду</h4>

<p class=”blue”>
погодой управлять не сложно<br>
для солнца нужно заболеть<br>
затеять стирку чтобы ливень<br>
а хочешь град помыть окно<br>
</p>

<p>Вы можете посмотреть <strong>видео-лекцию</strong> с разбором данной html-верстки. Этот и другие уроки доступны при оформлении <a href=“https://universe.courses/oformlenie-zakaza/”>пробной подписки Universe</a> за 100 рублей.</p>
<img src="https://example.com/my-image.jpg" width="500px">

<a href="https://universe.courses/”> 
<button>Что такое школа Юниверс?</button>
</a>
<body> 
</html>

Откройте этот файл в браузере. Готово! 

Важно: Эта страница пока живет только на вашем компьютере. Чтобы выложить её в интернет, понадобится хостинг (специальный сервер). Но для прототипов, практики и демонстрации работ этого файла вполне достаточно.

Что дальше? Где применять

Поздравляем, коллега, вы разобрались с основами HTML и CSS и собрали свою первую страницу! Теперь эти знания можно применить:

  1. В конструкторах сайтов (Tilda, Readymag): Смело заглядывайте в режим редактирования HTML/CSS для тонких настроек блоков.
  2. В работе с верстальщиками: Используйте точные термины (`margin`, `padding`) в постановке задач.
  3. Для саморазвития: Нажмите `F12` в браузере на любом сайте. Откроются «Инструменты разработчика» — ваш лучший тренажер. Вы сможете «инспектировать» код и сразу видеть, как он работает.

Выводы

  • Всегда закрывайте теги, иначе они не будут работать. 
  • Синтаксис очень важен! Проверяйте каждую запятую, двоеточие и пробел, иначе потом устанете искать ошибку в коде. 
  • Если вы не знаете какой-то команды/тега — не бойтесь гуглить! Или проверять библиотеку htmlbook.ru

Удачи в освоении нового инструмента!

Статья основана на лекции Александра Серакова, основателя школы графического дизайна «Юниверс». Смотрите урок и другие материалы школы, оформив пробный период всего за 130  ₽.

Редактор: Полина Бобышева