Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы HTML и CSS верстка для начинающих

Основы HTML на примере index.html с комментариями

<!--HTML: Основы-->

<!--HTML: язык гипертекстовой разметки -->
<!--HTML это стандартный язык разметки, используемый для создания веб-страниц-->

<!-- Для добавления контента, вы должны использовать HTML теги -->
<!-- Все теги бывают открывающими и закрывающими. -->


<!-- <!DOCTYPE> тег -->
<!-- Определяет HTML-версию, которую браузер будет использовать для отображения HTML тегов-->
<!-- При написании - <!DOCTYPE html> и не указывая его версию, браузер будет использовать последнюю-->
<!DOCTYPE html>


<!-- <html> тег -->
<!-- Все HTML теги размещены внутри <html> тега -->
<!-- Вы должны использовать его для организации всех других тегов веб-страницы -->
<html>

<!-- <head> тег -->
<!-- Весь неотображаемый контент веб-страницы должен содержаться в теге <head> -->
<!-- Вы можете использовать этот тег для загрузки скриптов таких как CSS и Javascript -->

<!-- Вложенные теги: HTML теги могут содержать в себе другие теги -->
<head lang="en"><!-- тег <head> называется родительским (для тега <meta> и <title>) -->
    <meta charset="UTF-8">
    <!-- тег <meta> называется дочерним ( для тега <head>)-->
    <title>HTML Основы</title><!-- тег <title> называется дочерним (для тега <head>) -->
</head>

<!-- <link> тег -->
<!-- Позволяет ссылаться на другие файлы, которые работают вместе с этим файлом -->

<!-- Атрибут type определенный как text/css даёт браузеру понять, что вы загружаете CSS файл  -->
<!-- Атрибут rel сокращение от relationship(связь)-->
<!-- CSS селекторы и правила содержатся в CSS файле --> 
<link rel="stylesheet" type="text/css" href="basics.css"><!-- <link> - пустой, у него нет закрывающего тега -->


<!-- <body> тег -->
<!-- Весь отображаемый контент веб-страницы должен быть в теге <body> -->
<body>  

<!-- <h*> Заголовки -->

<!-- Вы можете использовать теги заголовков для определения иерархии контента. -->
<!-- Высокие номера заголовков означают, что содержимое, которое появляется между тегами, менее важно -->

<!-- <h1> является открывающим тегом -->
<h1>Заколовок H1</h1>
<!-- </h1> является закрывающим тегом и имеет косую черту перед именем тега-->
<h2>Заголовок H2</h2>

<h3>Заголовок H3</h3>
<h4>Заголовок H4</h4>

<!-- <p> Параграфы -->

<!-- Вы можете использовать теги параграфов для текста без заголовка -->
<p>Это параграф</p>
<p>Это другой параграф</p>

<!-- <ul> Неупорядоченный Список -->
<!-- Вы можете использовать теги неупорядоченного списка для отображения списка элементов -->
<ul>
    <!-- <li> Элемент списка -->
    <!-- Каждый элемент списка должен быть вставлен в тег <li> -->
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
</ul>

<!-- Вы можете использовать тег упорядоченного списка для отображения списка элементов в определенном порядке -->
<ol>
    <!-- <li> элемент списка -->
    <!-- Каждый элемент списка должен быть вставлен в тег <li> -->
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
</ol>

</body>
</html>

Основы CSS на примере basics.css с комментариями

/* CSS */

/* Набор правил для стилей HTML-элементов */
/* Он используется для изменения внешнего вида HTML элементов */

/* Селекторы*/
/* CSS элементы, которые позволяют вам находить HTML-элементы */

/* Селекторы: Типы*/
/* Вы можете создать тип селектора, написав имя тега без <> скобок */
p {
    text-overline: 3;/* Вы можете изменить любое свойство тега */
}

/*Selector: Syntax*/
/*
имяСелектора {
    свойство: значение;
}
*/

/* Один селектор может иметь несколько свойств*/
p {
    text-overline: 3;
    text-underline: dot-dash;
    color: red;
}

/* Селекторы будут находить все соответствующие теги на странице и применять указанные свойства*/

/* Селекторы Потомки */
/* Они могут использоваться только в том случае, если являются дочерними элементами другого тега*/

ul li {
    font-size: 30px;
    color: darkgreen;
}

/* Псевдо-Селекторы*/
/* Псевдо-селекторы это модификаторы, которые можно добавить в селектор
только когда произошло определенное условие */ ul li:hover{ color: pink; } /* Псевдо-селектор: ":first-child"/ /* Псевдо-селектор ":first-child" применяется для первого дочернего элемента своего родителя, задаёт ему стиль*/ ol li:first-child{ color: lightcoral; }