Как создать свой первый веб-сайт с HTML, CSS и JavaScript
Создание веб-сайта может показаться сложной задачей, но на самом деле это увлекательный процесс, который можно легко освоить! В этой статье мы покажем вам, как создать простой веб-сайт с использованием трех основных технологий: HTML, CSS и JavaScript. Вы поймете, какой файл за что отвечает и как эти технологии работают вместе. Давайте начнем! 🚀
Сайт в трёх частях: HTML, CSS и JavaScript
Соберите семантическую структуру, форму и ссылки. Проверьте страницу без стилей.
Курс HTMLДобавьте mobile-first сетку, состояния focus и читаемый контраст.
Курс CSSПодключите событие, валидацию и наблюдаемый результат без скрытой ошибки.
Курс JavaScriptПосле каждой части сохраняйте отдельный commit. Так можно открыть рабочий HTML, сравнить слой оформления и локализовать ошибку поведения. Финальный проект должен запускаться из чистой папки по инструкции README.
Что такое HTML?
HTML (HyperText Markup Language) - это основа любого веб-сайта. Он создаёт структуру страницы, указывая, где будут располагаться текст, изображения, ссылки и другие элементы. Представьте, что HTML - это как каркас здания, который задает форму вашему сайту. Без этого "каркаса" сайт просто не будет существовать.
HTML не заботится о том, как будет выглядеть страница или какие действия она будет выполнять. Он просто организует контент и предоставляет структуру для всего остального. В HTML используются различные теги, такие как <h1>, <p>, <div>, <a>, которые помогают создавать контент на странице.
Давайте рассмотрим самые важные элементы, которые вам понадобятся при создании сайта:
<html>: Этот тег указывает, что это HTML-документ. Он оборачивает весь контент страницы.
<head>: В этом разделе указываются метаданные страницы, такие как заголовок страницы, ссылки на стили и скрипты.
<body>: Здесь располагается основное содержимое вашего сайта, которое будет отображаться пользователям.
<h1>, <h2>, <h3> и так далее: Теги заголовков, которые используются для организации текста.
<p>: Этот тег используется для создания параграфов текста.
<a>: Ссылка, которая позволяет пользователю перейти на другую страницу или ресурс.
Пример простого HTML-кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт, и я использую HTML, CSS и JavaScript!</p>
</main>
<footer>
<p>© 2026 Все права защищены</p>
</footer>
</body>
</html>Этот код создаёт простую страницу с заголовком, текстом и футером. Это базовая структура, которая создаёт содержание страницы. Структурируя таким образом ваш сайт, вы создаёте основу, на которой можно строить всё остальное.
Что такое CSS?
CSS (Cascading Style Sheets) - это то, что превращает ваш сайт из простого набора текста в красивую и удобную страницу. Если HTML - это каркас здания, то CSS - это отделка, цвета, шрифты и стили, которые делают ваш сайт привлекательным.
CSS позволяет вам стилизовать элементы, которые вы определили в HTML. Например, вы можете изменить цвет фона страницы, установить шрифт для текста или добавить отступы между элементами. CSS также помогает сделать ваш сайт адаптивным, чтобы он выглядел хорошо на любых устройствах, будь то компьютер, планшет или смартфон.
Основные способы использования CSS:
Inline CSS: Применяется непосредственно к элементу HTML, с помощью атрибута
style.Internal CSS: Стили размещаются внутри тега <style> в разделе <head> вашего HTML-файла.
External CSS: Стили хранятся в отдельном файле, который подключается к HTML-документу через тег <link>.
Пример CSS для стилизации сайта:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}Этот CSS-код изменяет внешний вид страницы: устанавливает шрифт для всего сайта, задаёт цвета для фона и текста, а также делает футер фиксированным внизу страницы.
Что такое JavaScript?
JavaScript - это язык программирования, который добавляет интерактивность на ваш сайт. С помощью JavaScript вы можете обрабатывать действия пользователя, создавать анимации, работать с данными и многое другое.
Если HTML задаёт структуру, а CSS - стиль, то JavaScript добавляет "жизнь" вашему сайту. Например, при помощи JavaScript можно сделать так, чтобы кнопка меняла цвет при наведении мыши или чтобы при клике открывалось новое окно.
JavaScript позволяет сайту реагировать на действия пользователя: клики, ввод текста, прокрутку страницы и другие события.
Пример JavaScript для интерактивности:
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "Вы нажали кнопку!";
};Этот код позволяет изменить текст на странице, когда пользователь нажимает на кнопку. JavaScript обрабатывает это событие и выполняет нужное действие, а также позволяет динамически изменять содержимое страницы.
Как все это работает вместе?
Теперь, когда мы разобрались с каждым компонентом, давайте посмотрим, как HTML, CSS и JavaScript работают вместе. Для этого создадим три файла:
index.html - это файл, который содержит структуру сайта.
styles.css - это файл, который определяет внешний вид сайта.
script.js - это файл, который добавляет интерактивность и действия на сайт.
Пример структуры проекта:
Представьте, что у нас есть следующие файлы:
index.html - основной файл, который будет загружать наш сайт.
styles.css - файл, который задаёт стиль страницы.
script.js - файл для добавления интерактивности.
1. index.html
<!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.css">
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт!</p>
<button id="myButton">Нажми меня!</button>
<p id="message"></p>
</main>
<footer>
<p>© 2026 Все права защищены</p>
</footer>
<script src="script.js"></script>
</body>
</html>2. styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}3. script.js
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "Вы нажали кнопку!";
};Заключение
Поздравляю! Вы только что создали свой первый веб-сайт. Теперь вы понимаете, как HTML, CSS и JavaScript работают вместе, чтобы создать полноценную веб-страницу. Это только начало - с этими знаниями вы сможете создавать более сложные и интерактивные проекты! 🚀
Не забывайте, что практика - это ключ к успеху. Чем больше вы экспериментируете и создаете, тем более опытным разработчиком становитесь. Удачи вам в вашем пути веб-разработки! 😊
Частые вопросы про первый сайт
Чем HTML отличается от CSS и JavaScript?
HTML задаёт структуру страницы: заголовки, абзацы, ссылки, изображения. CSS отвечает за оформление: цвета, шрифты, отступы и вид сайта на разных устройствах. JavaScript добавляет поведение, то есть реакцию на клики, ввод текста и прокрутку, и меняет содержимое страницы на лету.
Какие файлы нужны для простого сайта?
Для простого сайта хватит трёх файлов в одной папке: index.html со структурой, styles.css с оформлением и script.js с интерактивностью. Таблица стилей подключается в разделе head тегом link, а скрипт добавляется тегом script перед закрытием body. Открыть готовую страницу можно прямо в браузере.
Какие теги HTML нужны новичку в первую очередь?
Начинающему хватит небольшого набора: html оборачивает документ, head хранит метаданные и подключения, body содержит видимое содержимое. Дальше идут h1, h2 и h3 для заголовков, p для абзацев и a для ссылок. Этого достаточно, чтобы собрать страницу с шапкой, основным блоком и подвалом.
Как подключить CSS к HTML-странице?
CSS подключают тремя способами: inline через атрибут style у конкретного элемента, internal внутри тега style в разделе head и external отдельным файлом через тег link. Для отдельного файла в head ставят тег link с rel stylesheet и путём к styles.css. Внешний файл удобнее: стили не мешаются в разметке и переиспользуются на других страницах.
Как сделать кнопку, которая меняет текст на странице?
Кнопке в разметке дают id, например myButton, а рядом ставят пустой абзац с id message. В script.js обработчик onclick для элемента с id myButton записывает новый текст в свойство innerText элемента message. Текст меняется по нажатию, страница при этом не перезагружается.