Часто для создания сайтов разработчики используют HTML. Это наиболее доступный и простой способ сформировать любую веб-страницу — от юридических услуг до справочника по ботанике. С помощью этого языка получится сделать страницы с понятной структурой, а также наполнить их любым контентом.
В статье расскажем, как написать простой код на HTML, и разберем инструменты и команды, которые пригодятся в работе.
Какие теги HTML важно знать новичку
HTML расшифровывается как HyperText Markup Language. Это особый язык разметки, который позволяет создавать сайты и просматривать их в интернете. Благодаря HTML можно публиковать разные элементы, например, текст, таблицы, иллюстрации и видеоролики. Также он позволяет расположить контент на странице так, как нужно, выстроить взаимосвязи между его частями и определить их функции.
Чтобы создать любые элементы, нужно использовать HTML-теги. Для простых страниц достаточно таких:
- <!DOCTYPE html>. Обозначение типа документа, который обозначает версию HTML.
- <html>. Основной тег, включающий весь код на странице. Это контейнер для всех остальных элементов: иными словами, он помогает группировать контент.
- <head>. Включает метаданные. В тег <head> можно добавлять ключевые слова для SEO-продвижения и перелинковки со сторонними сайтами.
- <title>. Определяет заголовок страницы: именно в таком виде пользователь видит его в браузере.
- <body>. Включает видимую часть контента. Поэтому все, что будет доступно пользователю, нужно заключить в этот тег.
- <h1> – <h6>. Теги, обозначающие заголовки. Например, <h1> — основной заголовок, обычно это название всей страницы. А <h2> — подзаголовок, название раздела.
- <p>. Тег, который используется для формирования текстовых блоков.
- <a>. Гиперссылка. Позволяет размещать ссылки на другие страницы или сторонние ресурсы.
- <img>. Тег для размещения картинок.
- <ul>, <ol>. Списки — нумерованные и маркированные соответственно.
- <table>. Тег для добавления таблиц.
- <form>. Нужен для вставки форм обратной связи, чтобы пользователи могли отправлять данные на сервер.
Как стилизовать код на HTML с помощью CSS
Чтобы задать определенный внешний вид всем элементам страницы, разработчики применяют язык декодирования и стилизации CSS. Благодаря ему получится менять шрифты, оттенки, габариты и местоположение любых частей страницы. Например, выравнивать блоки текста по центру или устанавливать фиолетовый фон. К тому же с CSS код будет более понятным и простым для поддержки в дальнейшем.
У CSS есть несколько основных свойств, которые нужно знать для работы с HTML-кодом:
- color. Обозначает цвет текстовых блоков.
- background-color. Определяет цвет фона любого элемента страницы.
- font-size. Обозначает размер шрифта.
- margin. Устанавливает внешние отступы — расстояние между разными элементами.
- padding. Добавляет внутренние отступы, то есть расстояние между границей и содержимым элемента.
- border. Определяет границу элемента — ширину, стиль, оттенок.
Как JavaScript делает сайты на HTML удобнее
Чтобы создавать интерактивные и удобные для пользователей страницы, нужно знать JavaScript — язык программирования, благодаря которому интерфейс будет реагировать на команды пользователей. Например, показывать уведомления или открывать всплывающее окно при нажатии на определенную кнопку. Иными словами, JavaScript нужен, чтобы создать видимую часть сайта — фронтенд (frontend).
Для работы с JavaScript важно знать основные концепции этого языка программирования:
- Переменные. Нужны для хранения информации и обозначаются ключевыми словами var, let или const.
- Функции. Блоки с кодом для реализации конкретных команд.
- События. То, что происходит после выполнения пользователем определенных действий. Например, когда человек кликает мышкой на определенный значок, открывается меню сайта.
Среда для разработки сайта на HTML
Чтобы сделать сайт на HTML, понадобится обычный текстовый редактор, например, блокнот, или IDE — интегрированная среда разработки. Чаще всего программисты используют такие инструменты:
- Visual Studio Code. Бесплатный текстовый редактор, который поддерживает разные языки программирования и подходит для создания веб- и облачных приложений. Работает на операционных системах Windows, Linux и macOS. Важно различать Visual Studio Code и Visual Studio, потому что последний — это не текстовый редактор, а IDE. Этот инструмент более масштабный, но тяжеловесный и сложный в освоении.
- Atom. Бесплатный текстовый редактор для Linux, macOS, Windows, который поддерживает плагины, написанные на JavaScript. Инструмент легко настраивать под себя, поэтому его часто выбирают новички.
- Sublime Text. Кроссплатформенный текстовый редактор для написания кода на разных языках, в том числе HTML, CSS и JavaScript. Также с его помощью можно верстать веб-страницы. Инструмент платный, но есть бесплатная ознакомительная версия.
- Notepad++. Один из самых популярных бесплатных текстовых редакторов для Windows. Внешне он напоминает блокнот, но инструмент более функциональный. Важно различать Notepad++ и Notepad. Последний — это обычный «Блокнот», который по умолчанию есть на разных устройствах Windows.
Создание сайта на HTML: основные этапы
Рассмотрим, как создать структуру HTML-документа, стилизовать будущую страницу и сделать ее более интерактивной. Для примера возьмем вымышленный сайт отеля для домашних животных.
Этап 1. Создайте HTML-структуру
Откройте текстовый редактор и добавьте такой код:
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>Отель "Добрые лапки"</title> </head> <body> <div class="wrapper"> <header class="header"> <div> Logo </div> <nav class="menu"> <a class="menu__item" href="#">Главная</a> <a class="menu__item" href="#">Услуги</a> <a class="menu__item" href="#">Контакты</a> <a class="menu__item" href="#">Отзывы</a> </nav> </header> <main class="main"> <section class="about"> <h2>Добро пожаловать в отель для кошек «Добрые лапки»!</h2> <p> В нашем отеле ваши питомцы будут чувствовать себя как дома. Предлагаем круглосуточное наблюдение за хвостиками, полноценное питание, уход и приятную компанию! </p> <p> Также у нас можно купить товары для ваших любимцев — уютные лежанки, безопасные игрушки, вкусный корм и полезные гаджеты: автоматические поилки, станции видеонаблюдения и умные туалеты. </p> </section> </main> <footer class="footer"> <div> Телефон: +7(ххх)-ххх-хх-хх </div> <div> Email: mail@mail.ru </div> </footer> </div> </body> </html>
Это структура сайта. Здесь есть заголовок, описание страницы, контакты и разделы меню. Этот код в будущем легко дополнить любым контентом.
Этап 2. Добавьте стилей с помощью CSS
Чтобы стилизовать страницу, например, придать оттенки тексту и задать нужные шрифты, вставьте такой код в раздел <head>:
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f7f0f0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #000000;
}
.menu {
display: flex;
gap: 15px;
}
.menu__item {
color: #000000;
text-decoration: none;
}
.main {
padding: 20px;
}
.about {
text-align: center;
}
.footer {
margin-top: auto;
padding: 20px;
border-top: 1px solid #000000;
}
</style>
CSS-код помог задать стили сайту: оттенок фона, шрифты, выравнивание абзацев, внешний вид меню и футера. Благодаря этому страница стала более презентабельной, а значит сможет привлекать больше пользователей.
Этап 3. Придайте интерактивности с помощью JavaScript
В раздел <body> вставьте такой JS-код:
<script>
document.addEventListener('DOMContentLoaded', function() {
const linkContacts = document.querySelector('.menu__item_contacts');
const modal = document.querySelector('.modal');
const modalClose = modal.querySelector('.modal__close')
linkContacts.addEventListener('click', function(event) {
event.preventDefault();
modal.classList.add('modal_active');
});
modalClose.addEventListener('click', function(event) {
event.preventDefault();
modal.classList.remove('modal_active');
});
});
</script>
Мы написали код на JS, который показывает окно с контактами при нажатии на пункт меню «Контакты». Также добавили код, который закрывает данное окно при нажатии на крестик.
Как создать сайт на HTML: коротко о главном
- HTML — это язык разметки, который используется для создания веб-страниц. Он позволяет отформатировать код так, чтобы сайт выглядел корректно и структурировано в браузере. Например, можно задать заголовки, абзацы, добавить списки, иллюстрации, таблицы и определить местоположение каждого элемента.
- Кроме HTML, для создания сайта нужно знать основы языка стилизации CSS и уметь писать код на JavaScript. Первый нужен, чтобы задать внешний вид всем элементам страницы — от фона до заголовков. А второй позволяет сделать сайт более удобным для пользователей благодаря интерактивности.
