На фото всё правильно: у тебя открыты два файла. Писать нужно отдельно.

1. В файл index.html

Сейчас у тебя открыт именно index.html. Кликни в пустое поле под строкой Generate code и вставь:

<!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="style.css">
</head>
<body>
    <h1>Мой первый сайт</h1>
    <p>Это моя веб-страница.</p>
    <button>Нажми на меня</button>
</body>
</html>

Нажми Ctrl + S, чтобы сохранить.

2. В файл style.css

Сверху нажми на вкладку style.css и вставь туда:

body {
    background-color: lightblue;
    text-align: center;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
    font-size: 40px;
}

p {
    color: #333;
    font-size: 20px;
}

button {
    background-color: darkblue;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
}

Снова нажми Ctrl + S.

3. Открытие сайта

Нажми правой кнопкой по index.html и выбери:

Open with Live Server

Если такого пункта нет, установи расширение Live Server через значок Extensions слева. Строку Generate code... писать не нужно — это только подсказка пустого редактора.

Да, можно писать видимый текст на армянском. HTML-теги (html, head, body, h1) оставляются на английском — это команды языка HTML.

Вставь в index.html:

<!DOCTYPE html>
<html lang="hy">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Իմ առաջին կայքը</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Իմ առաջին կայքը</h1>

    <p>Սա իմ վեբ-էջն է։</p>

    <button>Սեղմիր ինձ</button>
</body>
</html>

lang="hy" означает, что основной язык страницы — армянский.

• lang="hy" — армянский;
• lang="ru" — русский;
• lang="en" — английский.

Этот параметр помогает браузерам, поисковикам и программам для чтения экрана правильно определить язык. Он не переводит текст автоматически. Кодировку UTF-8 оставь обязательно — она нужна для правильного отображения армянских букв.

Да. Сделаем готовую презентацию про Армению только на HTML и CSS: слайды будут автоматически меняться примерно каждые 6 секунд, а картинки будут плавно появляться.

1. Структура папки

Создай такую структуру:

armenia-presentation/
├── index.html
├── style.css
└── images/
    ├── yerevan.jpg
    ├── ararat.jpg
    ├── garni.jpg
    ├── sevan.jpg
    ├── echmiadzin.jpg
    └── lavash.jpg

В папку images положи 6 фотографий и назови их точно так же. Если фотографии имеют формат .png, в CSS тоже замени .jpg на .png.

2. Что написать в index.html

Открой файл index.html, удали всё содержимое и вставь:

<!DOCTYPE html>
<html lang="hy">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Հայաստան</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <main class="presentation">

        <!-- Слайд 1 -->
        <section class="slide slide-1">
            <div class="slide-content">
                <p class="eyebrow">ՃԱՆԱՊԱՐՀՈՐԴՈՒԹՅՈՒՆ ԴԵՊԻ ՀԱՅԱՍՏԱՆ</p>
                <h1>Հայաստան</h1>
                <p>Հին պատմություն, գեղեցիկ բնություն և հարուստ մշակույթ</p>
            </div>

            <span class="slide-number">01 / 06</span>
        </section>

        <!-- Слайд 2 -->
        <section class="slide slide-2">
            <div class="slide-content">
                <p class="eyebrow">ՄԱՅՐԱՔԱՂԱՔ</p>
                <h2>Երևան</h2>
                <p>
                    Երևանը Հայաստանի մայրաքաղաքն է։
                    Այն հայտնի է վարդագույն տուֆից կառուցված շենքերով,
                    Հանրապետության հրապարակով և գեղեցիկ փողոցներով։
                </p>
            </div>

            <span class="slide-number">02 / 06</span>
        </section>

        <!-- Слайд 3 -->
        <section class="slide slide-3">
            <div class="slide-content">
                <p class="eyebrow">ՀԱՅԱՍՏԱՆԻ ԽՈՐՀՐԴԱՆԻՇԸ</p>
                <h2>Արարատ լեռը</h2>
                <p>
                    Արարատ լեռը հայ ժողովրդի կարևոր խորհրդանիշներից է։
                    Այն մեծ նշանակություն ունի հայ մշակույթի և պատմության մեջ։
                </p>
            </div>

            <span class="slide-number">03 / 06</span>
        </section>

        <!-- Слайд 4 -->
        <section class="slide slide-4">
            <div class="slide-content">
                <p class="eyebrow">ՊԱՏՄԱԿԱՆ ՀՈՒՇԱՐՁԱՆՆԵՐ</p>
                <h2>Գառնի և Գեղարդ</h2>
                <p>
                    Գառնու տաճարը Հայաստանի հայտնի հուշարձաններից է։
                    Գեղարդի վանքը ժայռափոր համալիր է և ընդգրկված է ՅՈՒՆԵՍԿՕ-ի ցանկում։
                </p>
            </div>

            <span class="slide-number">04 / 06</span>
        </section>

        <!-- Слайд 5 -->
        <section class="slide slide-5">
            <div class="slide-content">
                <p class="eyebrow">ԳԵՂԵՑԻԿ ԲՆՈՒԹՅՈՒՆ</p>
                <h2>Սևանա լիճ</h2>
                <p>
                    Սևանա լիճը Հայաստանի ամենամեծ լիճն է։
                    Այն գտնվում է ծովի մակերևույթից մոտ 1900 մետր բարձրության վրա։
                </p>
            </div>

            <span class="slide-number">05 / 06</span>
        </section>

        <!-- Слайд 6 -->
        <section class="slide slide-6">
            <div class="slide-content">
                <p class="eyebrow">ՀԱՅԿԱԿԱՆ ՄՇԱԿՈՒՅԹ</p>
                <h2>Մշակույթ և խոհանոց</h2>
                <p>
                    Լավաշը հայկական հայտնի հացատեսակներից է։
                    Հայկական խոհանոցը հայտնի է նաև տոլմայով, խորովածով և հարիսայով։
                </p>
            </div>

            <span class="slide-number">06 / 06</span>
        </section>

    </main>

</body>
</html>

lang="hy" означает, что язык страницы — армянский.
HTML-команды при этом всё равно пишутся на английском: html, head, body, h1.

3. Что написать в style.css

Открой файл style.css, удали всё содержимое и вставь:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: #111827;
    color: white;
    font-family: Arial, "Noto Sans Armenian", sans-serif;
}

.presentation {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background-color: #1f2937;
}

.slide {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: clamp(30px, 8vw, 100px);

    background-size: cover;
    background-position: center;

    opacity: 0;
    transform: scale(1.08);

    animation: showSlide 36s linear infinite;
}

/* Затемнение фотографий, чтобы текст хорошо читался */
.slide::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.5) 45%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.7) 0%,
            transparent 60%
        );
}

/* Тонкая рамка */
.slide::after {
    content: "";

    position: absolute;
    inset: 20px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.slide-content {
    position: relative;
    z-index: 1;

    max-width: 760px;
}

.eyebrow {
    margin-bottom: 18px;

    color: #facc15;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
}

h1,
h2 {
    margin-bottom: 20px;
    line-height: 1.05;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: clamp(60px, 13vw, 150px);
}

h2 {
    font-size: clamp(42px, 8vw, 92px);
}

.slide-content p:not(.eyebrow) {
    max-width: 700px;

    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.55;
}

.slide-number {
    position: absolute;
    top: 45px;
    right: 55px;
    z-index: 2;

    color: #facc15;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Фотографии слайдов */
.slide-1 {
    background-image: url("images/yerevan.jpg");
    animation-delay: -10s;
}

.slide-2 {
    background-image: url("images/ararat.jpg");
    animation-delay: -4s;
}

.slide-3 {
    background-image: url("images/ararat.jpg");
    animation-delay: -34s;
}

.slide-4 {
    background-image: url("images/garni.jpg");
    animation-delay: -28s;
}

.slide-5 {
    background-image: url("images/sevan.jpg");
    animation-delay: -22s;
}

.slide-6 {
    background-image: url("images/lavash.jpg");
    animation-delay: -16s;
}

/* Плавное появление, увеличение и исчезновение слайдов */
@keyframes showSlide {
    0%,
    4% {
        opacity: 0;
        transform: scale(1.08);
    }

    7%,
    14% {
        opacity: 1;
        transform: scale(1);
    }

    17%,
    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* Удобное отображение на телефоне */
@media (max-width: 600px) {
    .slide {
        padding: 30px 24px 70px;
    }

    .slide::after {
        inset: 12px;
    }

    .slide-number {
        top: 30px;
        right: 30px;
        font-size: 14px;
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }
}

В CSS картинки подключаются такими строками:

background-image: url("images/yerevan.jpg");

Это означает: взять файл yerevan.jpg из папки images.

4. Как запустить

1. Сохрани оба файла: Ctrl + S.
2. Проверь, что фотографии лежат в папке images.
3. Нажми правой кнопкой по index.html.
4. Выбери Open with Live Server.
5. Откроется Google Chrome.

Слайды будут автоматически переключаться. В этом варианте отдельный файл JavaScript не нужен: смена слайдов и переходы сделаны с помощью CSS-анимации.

Извини за задержку. Вот готовая презентация про Армению: слайды автоматически меняются каждые 5 секунд, есть кнопки, точки навигации и плавный переход.

1. Структура папки

Создай в VS Code:

armenia-presentation/
├── index.html
├── style.css
└── images/
    ├── armenia.jpg
    ├── sevan.jpg
    ├── yerevan.jpg
    ├── ararat.jpg
    ├── garni.jpg
    └── food.jpg

В папку images положи 6 картинок и назови их точно так. Можно взять фотографии Армении, Севана, Еревана, Арарата, Гарни и армянской кухни.

2. Что написать в index.html

Полностью удали старый код и вставь этот:

<!DOCTYPE html>
<html lang="hy">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Հայաստան</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <main class="presentation" id="presentation">

        <section class="slide active">
            <img src="images/armenia.jpg" alt="Հայաստան">
            <div class="dark"></div>

            <div class="slide-text">
                <span>01 / 07</span>
                <h1>Իմ Հայաստան</h1>
                <p>
                    Հայաստանը հին պատմություն, գեղեցիկ բնություն
                    և հարուստ մշակույթ ունեցող երկիր է։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/sevan.jpg" alt="Սևանա լիճ">
            <div class="dark"></div>

            <div class="slide-text">
                <span>02 / 07</span>
                <h1>Հայաստանի բնությունը</h1>
                <p>
                    Սևանա լիճը Հայաստանի ամենահայտնի բնական
                    տեսարժան վայրերից մեկն է։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/yerevan.jpg" alt="Երևան">
            <div class="dark"></div>

            <div class="slide-text">
                <span>03 / 07</span>
                <h1>Երևան</h1>
                <p>
                    Երևանը Հայաստանի մայրաքաղաքն է։
                    Այն հայտնի է իր գեղեցիկ ճարտարապետությամբ
                    և հյուրընկալ մարդկանցով։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/ararat.jpg" alt="Արարատ լեռ">
            <div class="dark"></div>

            <div class="slide-text">
                <span>04 / 07</span>
                <h1>Պատմություն և մշակույթ</h1>
                <p>
                    Հայաստանն ունի հազարավոր տարիների պատմություն,
                    յուրահատուկ այբուբեն և հարուստ մշակութային ժառանգություն։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/garni.jpg" alt="Գառնիի տաճար">
            <div class="dark"></div>

            <div class="slide-text">
                <span>05 / 07</span>
                <h1>Տեսարժան վայրեր</h1>
                <p>
                    Գառնիի տաճարը և Գեղարդի վանքը Հայաստանի
                    ամենահայտնի պատմական հուշարձաններից են։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/food.jpg" alt="Հայկական խոհանոց">
            <div class="dark"></div>

            <div class="slide-text">
                <span>06 / 07</span>
                <h1>Հայկական խոհանոց</h1>
                <p>
                    Լավաշը, դոլման և խորովածը հայկական խոհանոցի
                    հայտնի ուտեստներից են։
                </p>
            </div>
        </section>

        <section class="slide">
            <img src="images/armenia.jpg" alt="Հայաստանի բնությունը">
            <div class="dark"></div>

            <div class="slide-text">
                <span>07 / 07</span>
                <h1>Շնորհակալություն ուշադրության համար</h1>
                <p>
                    Հայաստանը փոքր, բայց շատ գեղեցիկ և հետաքրքիր երկիր է։
                </p>
            </div>
        </section>

        <button class="arrow previous" id="previous" type="button">
            &#10094;
        </button>

        <button class="arrow next" id="next" type="button">
            &#10095;
        </button>

        <div class="dots">
            <button class="dot active" type="button"></button>
            <button class="dot" type="button"></button>
            <button class="dot" type="button"></button>
            <button class="dot" type="button"></button>
            <button class="dot" type="button"></button>
            <button class="dot" type="button"></button>
            <button class="dot" type="button"></button>
        </div>
    </main>

    <script>
        const presentation = document.getElementById("presentation");
        const slides = document.querySelectorAll(".slide");
        const dots = document.querySelectorAll(".dot");
        const nextButton = document.getElementById("next");
        const previousButton = document.getElementById("previous");

        let currentSlide = 0;
        let timer;

        function showSlide(number) {
            if (number >= slides.length) {
                number = 0;
            }

            if (number < 0) {
                number = slides.length - 1;
            }

            slides[currentSlide].classList.remove("active");
            dots[currentSlide].classList.remove("active");

            currentSlide = number;

            slides[currentSlide].classList.add("active");
            dots[currentSlide].classList.add("active");
        }

        function startTimer() {
            clearInterval(timer);

            timer = setInterval(function () {
                showSlide(currentSlide + 1);
            }, 5000);
        }

        nextButton.addEventListener("click", function () {
            showSlide(currentSlide + 1);
            startTimer();
        });

        previousButton.addEventListener("click", function () {
            showSlide(currentSlide - 1);
            startTimer();
        });

        dots.forEach(function (dot, number) {
            dot.addEventListener("click", function () {
                showSlide(number);
                startTimer();
            });
        });

        presentation.addEventListener("mouseenter", function () {
            clearInterval(timer);
        });

        presentation.addEventListener("mouseleave", function () {
            startTimer();
        });

        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowRight") {
                showSlide(currentSlide + 1);
                startTimer();
            }

            if (event.key === "ArrowLeft") {
                showSlide(currentSlide - 1);
                startTimer();
            }
        });

        startTimer();
    </script>

</body>
</html>

Внизу HTML уже есть JavaScript. Он нужен, чтобы слайды переключались. Отдельный файл script.js создавать не надо.

3. Что написать в style.css

Открой файл style.css, удали старый код и вставь:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #101827;
    font-family: Arial, "Noto Sans Armenian", sans-serif;
}

.presentation {
    position: relative;
    width: min(1100px, 100%);
    height: min(680px, 90vh);
    min-height: 520px;
    overflow: hidden;
    background: #111;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.slide.active {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 6s ease;
}

.slide.active img {
    transform: scale(1);
}

.dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78),
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.15)
    );
}

.slide-text {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 17%;
    max-width: 650px;
    color: white;
    animation: textAppear 0.8s ease;
}

.slide-text span {
    color: #ffd166;
    font-size: 18px;
    font-weight: bold;
}

.slide-text h1 {
    margin: 12px 0;
    font-size: clamp(36px, 6vw, 78px);
    line-height: 1.05;
}

.slide-text p {
    max-width: 600px;
    margin: 0;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.5;
}

.arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    color: white;
    background: rgba(0, 0, 0, 0.45);
    font-size: 30px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: 0.3s;
}

.arrow:hover {
    background: #e63946;
    transform: translateY(-50%) scale(1.1);
}

.previous {
    left: 22px;
}

.next {
    right: 22px;
}

.dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    width: 30px;
    border-radius: 10px;
    background: #ffd166;
}

@keyframes textAppear {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .presentation {
        width: 100%;
        height: 100vh;
        min-height: 520px;
        border-radius: 0;
    }

    .slide-text {
        left: 7%;
        right: 7%;
        bottom: 18%;
    }

    .slide-text h1 {
        font-size: 40px;
    }

    .slide-text p {
        font-size: 18px;
    }

    .arrow {
        top: auto;
        bottom: 22px;
        transform: none;
    }

    .arrow:hover {
        transform: scale(1.1);
    }

    .previous {
        left: 20px;
    }

    .next {
        right: 20px;
    }

    .dots {
        bottom: 42px;
    }
}

4. Как запустить

1. Сохрани оба файла: Ctrl + S.
2. Нажми правой кнопкой на index.html.
3. Выбери Open with Live Server.
4. Сайт откроется в Chrome.
5. Слайды будут меняться автоматически, а стрелками можно переключать их вручную.

Если картинка не появляется, проверь, что имя файла совпадает с кодом, например sevan.jpg, а не Sevan.png.

1. В index.html вставь HTML-код презентации.
2. В style.css вставь CSS-код.
3. Картинки положи в папку images.
4. Сохрани → ПКМ по index.html → Open with Live Server.

index.html

<!DOCTYPE html>
<html lang="hy">
<head>
    <meta charset="UTF-8">
    <title>Հայաստան</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section class="slide one">
            <h1>Հայաստան</h1>
            <p>Գեղեցիկ երկիր հարուստ պատմությամբ</p>
        </section>

        <section class="slide two">
            <h1>Երևան</h1>
            <p>Հայաստանի մայրաքաղաքը</p>
        </section>

        <section class="slide three">
            <h1>Սևանա լիճ</h1>
            <p>Հայաստանի գեղեցիկ բնությունը</p>
        </section>
    </main>
</body>
</html>

style.css

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    padding: 15%;
    color: white;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: show 15s infinite;
}

.one {
    background-image: linear-gradient(#0008, #0008),
    url("images/armenia.jpg");
}

.two {
    background-image: linear-gradient(#0008, #0008),
    url("images/yerevan.jpg");
    animation-delay: 5s;
}

.three {
    background-image: linear-gradient(#0008, #0008),
    url("images/sevan.jpg");
    animation-delay: 10s;
}

@keyframes show {
    0%, 28% { opacity: 1; }
    33%, 100% { opacity: 0; }
}

h1 {
    font-size: 70px;
}

p {
    font-size: 25px;
}

Картинки положи в папку images и назови: armenia.jpg, yerevan.jpg, sevan.jpg.