Подробное руководство по созданию HTML и CSS файлов

Подробное руководство по созданию HTML и CSS файлов

Содержание

Создание HTML-файла (index.html)

1. Выбор текстового редактора

Для создания HTML-файлов можно использовать:

  • Блокнот (Windows) или TextEdit (Mac) – самые простые варианты
  • Более продвинутые редакторы: VS Code, Sublime Text, Atom, Notepad++
  • Специализированные IDE: WebStorm, PHPStorm

Рекомендация: Начните с VS Code – он бесплатный, мощный и простой в освоении.

2. Создание файла

  1. Откройте выбранный текстовый редактор
  2. Создайте новый файл (File → New File или Ctrl+N)
  3. Сохраните его как index.html (File → Save As…):
    • Важно: в поле “Тип файла” выберите “All Files” или укажите расширение .html вручную
    • Лучше сохранять в отдельную папку для вашего проекта

3. Базовая структура 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>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
</body>
</html>

. Разбор структуры:

  • <!DOCTYPE html> – объявление типа документа (HTML5)
  • <html> – корневой элемент страницы
    • lang="ru" – указывает язык страницы (русский)
  • <head> – служебная информация для браузера
    • <meta charset="UTF-8"> – кодировка символов
    • <meta name="viewport"...> – настройки для мобильных устройств
    • <title> – заголовок страницы (отображается во вкладке браузера)
    • <link rel="stylesheet"...> – подключение CSS-файла
  • <body> – видимое содержимое страницы
    • <h1> – заголовок первого уровня
    • <p> – параграф текста

5. Сохранение и просмотр

  1. Сохраните файл (Ctrl+S)
  2. Откройте его в браузере:
    • Правой кнопкой по файлу → “Открыть с помощью” → Выбрать браузер
    • Или перетащите файл в окно браузера

Создание CSS-файла (styles.css)

1. Создание файла

  1. В том же редакторе создайте новый файл
  2. Сохраните его как styles.css в той же папке, где находится index.html

2. Базовая структура CSS

Добавьте в файл styles.css следующий код:

/* Это комментарий в CSS */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
}

3. Разбор структуры CSS:

  • Селектор (например, body, h1, p) – указывает, к какому элементу HTML применяются стили
  • Фигурные скобки {} – содержат объявления стилей
  • Каждое объявление состоит из:
    • Свойства (например, color, font-size)
    • Значения (например, #333, 16px)
    • Точки с запятой ; в конце
  • Комментарии оформляются как /* текст комментария */

4. Подключение CSS к HTML

Убедитесь, что в вашем HTML-файле есть строка:

<link rel="stylesheet" href="styles.css">

Эта строка должна находиться в разделе <head> вашего HTML-документа.

Советы по работе с HTML и CSS

Для HTML:

  1. Всегда закрывайте теги (например, <p>текст</p>)
  2. Используйте семантические теги (<header>, <footer>, <article> и т.д.)
  3. Проверяйте код на валидность с помощью https://validator.w3.org/
  4. Делайте отступы для вложенных элементов для лучшей читаемости

Для CSS:

  1. Группируйте связанные стили (все стили для заголовков вместе и т.д.)
  2. Используйте понятные названия классов (например, .main-header, а не .div1)
  3. Комментируйте сложные участки кода
  4. Сначала пишите стили для мобильных устройств, затем добавляйте медиазапросы для больших экранов

Пример более сложной структуры

HTML (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 class="main-header">
        <h1>Птицы средней полосы</h1>
        <nav>
            <ul>
                <li><a href="index.html">Главная</a></li>
                <li><a href="species.html">Виды</a></li>
                <li><a href="habitats.html">Обитание</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article class="bird-card">
            <h2>Снегирь</h2>
            <img src="images/bullfinch.jpg" alt="Снегирь">
            <p>Яркая птица с красной грудью у самцов...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2023 Сайт о птицах</p>
    </footer>
</body>
</html>

CSS (styles.css)

/* Основные стили */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

.main-header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.bird-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin: 15px;
    max-width: 300px;
}

.bird-card img {
    max-width: 100%;
    height: auto;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 20px;
}

Теперь можете перейти к следующей статье и создать свой сайт на HTML или скачать шаблон готового сайта ЗДЕСЬ ;))