Всем привет!

С вами IdMaincraft! Сегодня я вам расскажу как создавать текст на главной странице экрана и сам стиль. Погнали!
   Сначала давайте создадим саму папку на рабочем столе. Создается она очень легко,всего лишь нужно правой кнопкой мыши кликнуть по пустому месту, и выбрать кнопку "Создать" после чего нужно будет выбрать "Создать Папку". Давайте ее назовем "Программа" или"Programm".
   Потом нужно зайти (или скачать у кого нет) в VisiolStudioCode, ну это типо Java. После того как зашли (или скачали) нужно выбрать папку. Это делается так:
Этап 1: Найдите в левом верхнем углу кнопку "File" нажмите ее.
Этап 2: У вас откроется табло и там нужно выбрать "Рабочий стол".
Этап 3:Найдите и выберите папку которую создали.
Этап 4: Ура! Все получилось! теперь мы можем спокойно програмировать!
   Теперь начинается немного посложнее. Вы должны найти небольшую табличку под названием "Exploler". ТАМ именно ТАМ нужно найти маленькую кнопку в виде листка с зогнутым краем. Если вы наведете то там будет надпись "New file..." , это название кнопки. Нажмите. У вас в первой табличке появится строчка выделенная синим цветом. Там нам нужно написать название внутреннего файла. Назовем его "Programm.html" или "Программа.html".
ОБЯЗАТЕЛЬНО нужно написать html иначе ничего не сработает. После нажмите "Enter"  и...           Та-Дам! У нас появился внутренний файл! Ура! Теперь мы можем писать сам скрипт.
    Он будет не большой но со стием нужно будет постараться. Вам можно просто скопировать и ничего не писать, но лучше чтобы вы все писали чтобы понять.
 Script:

<html>
<head>
    <meta charset="UTF-8">
     <title>Главная страница -- Название страницы </title>
     <link rel="stylesheet" href="style.css">
</head>
 <body>
Ну вот, первая часть кода!Поздравляю, это уже прогресс!
Видите эту строчку  <link rel="stylesheet" href="style.css">? Она нас связывает со стилем страницы. Давайте создадим еще один внутренний файл, и называется он " Style.css". Он будет указывать наш стиль и цвет заднего фона на сайте. Но мы к нему перейдем чуть позже...
 Давайте лучше перейдем ко второй части кода в ней уже будет сама надпись на сайте.
Script:
  <h1></h1>
  <p></p>
  <P></P>
</body>
</html>
Да, эта часть кода очень маленькая. Но заодно последняя! Все это, нужно вписать в часть, на конце кода после последних строчек в первой части кода. Но я еще не объяснил зачем эти пропуски между елочек в 3 первых строчках. Вот в эти пропуски нужно написать надписи которые будет на экране.
<h1>Сюда</h1>,
<p>Сюда</p> ,
<P>Сюда</P>
Давайте сделаем тест! Чтобы запустить нужно свернуть VisiolStudioCode и все остальное и в папке у вас появился листочек с зогнутым уголком запустите его. Если не работает то вам нужно сохранить код, а этов кнопочке"File".Там нужно найти кнопочку "Safe"  и нажать ее.
Теперь можно тестировать!
  Посмотрели? Да, соглашусь если будут претензии по красоте. Надписи будут в левом верхнем углу, но, мы можем это исправить и сделать так чтобы надписи были по середине, и сам фон был красивее. Мы переходим к "Style.css"!
   Давайте сразу к коду. Вы ведь создали внутренний файл? Если нет то создавайте скоре ведь мы идем дальше! Вот этот скрипт вставте в самое начало без "DOCTUPE" и прочего.
Script:
body {
background-color: #ADD8E6; /* Голубой цвет */
height: 100vh; /* Высота на всю высоту экрана */
margin: 0; /* Убираем отступы браузера */ }
Впишите этот мини-код в внутренний файл "Style.css". У вас теперь будет голубой фон экрана! Вы можете сделать под свой любимый цвет! Этот параметр меняется во второй строчке:  background-color: #ADD8E6; /* Голубой цвет */.
    А тпеперь сделаем чтобы надписи были посередине! Для этого понадобится этот-же код, но его нужно немного изменить...
Script:
/* Задаем общий синий фон */
body {
  background-color: #ADD8E6; /* Цвет фона */
display: flex;              /* Используем Flexbox для выравнивания содержимого */
  justify-content: center;   /* Горизонтальное выравнивание по центру */
  align-items: center;       /* Вертикальное выравнивание по центру */
min-height: 100vh;          /* Минимальная высота равна высоте окна браузера */
margin: 0;                 /* Обнуляем стандартные поля */
font-family: Arial, sans-serif; /* Шрифт текста */}
h1, p {
  text-align: center;     /* Выравнивание текста по горизонтали */
}
P {
    text-transform: lowercase;
}
Готово! Но если вы протестируете то увидите, что надписи будут все рядом без пробелов, но нам этого не нужно поэтому последний раз изменяем скрипт.
Script:
/* Общий дизайн страницы */
body {
    background-color: #ADD8E6;      /* Голубой фон */
display: flex;                  /* Используем Flexbox */
flex-direction: column;         /* Элементы располагаются столбцом */
  justify-content: center;       /* Центрирование по вертикали */
align-items: center;           /* Центрирование по горизонтали */
min-height: 100vh;              /* Минимальная высота равна высоте окна браузера */
margin: 0;                     /* Удаляем стандартную границу браузера */
font-family: Arial, sans-serif; /* Тип шрифта */
}
/* Форматируем заголовок H1 и абзацы */
h1, p {
   text-align: center;               /* Текст выровнен по центру */
margin-bottom: 1rem;             /* Небольшое расстояние между элементами */
}
/* Преобразование элемента P в нижний регистр */
P {
   text-transform: lowercase;
}
Ну вот и все! Фухх... Но наконец мы это сделали! Теперь можете тестировать и дорабатывать скрипт и сайт дальше!
                                                     Ну а с вами был IdMaincraft!
                                                                     !ВСЕМ ПОКА!