Основы веб-разработки

Всеобъемлющее руководство по HTML, CSS и JavaScript для начинающих веб-разработчиков в Азербайджане.

Введение в HTML

HTML (HyperText Markup Language) - это основа любого веб-сайта. Он определяет структуру и содержание веб-страницы. Давайте рассмотрим базовую структуру HTML-документа:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
</body>
</html>

Основы CSS

CSS (Cascading Style Sheets) используется для стилизации HTML-элементов. Вот пример простого CSS-правила:


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #0066cc;
    font-size: 24px;
}

Введение в JavaScript

JavaScript - это язык программирования, который позволяет создавать динамический контент на веб-страницах. Вот простой пример JavaScript-кода:


function приветствие() {
    let имя = prompt("Как вас зовут?");
    alert("Привет, " + имя + "! Добро пожаловать в мир веб-разработки!");
}

приветствие();

Практический проект

Давайте объединим все, что мы узнали, в небольшой проект. Создадим простую страницу-портфолио:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мое портфолио</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .project { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Мое портфолио</h1>
        <div id="projects"></div>
    </div>
    <script>
        const projects = [
            { name: "Проект 1", description: "Описание проекта 1" },
            { name: "Проект 2", description: "Описание проекта 2" },
            { name: "Проект 3", description: "Описание проекта 3" }
        ];

        const projectsContainer = document.getElementById('projects');
        projects.forEach(project => {
            const projectElement = document.createElement('div');
            projectElement.className = 'project';
            projectElement.innerHTML = `<h2>${project.name}</h2><p>${project.description}</p>`;
            projectsContainer.appendChild(projectElement);
        });
    </script>
</body>
</html>

Заключение

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