Comme dans l'image ci dessous,tout fichier html commence par "!DOCTYPE html" qui a pour job de seulement definir le document comme étant de type HTML5.
Ensuite il y a " html lang="en" " qui indique seulement la langue de la webpage,ça aide les navigateurs internet et moteurs de recherches.
Par la suite vous allez trouver le tag head dans lequel vous trouverez des metadonnées(ne sont pas affichés dans le site) qui servent à définir le titre du document, le jeu de caractères, les styles, les scripts et d'autres méta-informations.
On y met(dans head) souvent des liens vers des bibliothéques d'icons(font-awesome par exemple) mais aussi un lien vers le fichier css!

Les headings sont définis par des balises(tags) h1..h6
h1 est celle qui est la plus grande et h6 est la plus petite.
Ces tags servent pour les titres et sous titres de notre page!

Définis par la balise p,les paragraphes servent comme son nom l'indique à y mettre des paragraphes(long textes).

Les liens sont définits par la balise <a> ,dans cette balise on y trouve differents attributs(parametres) dont le plus important est href dans lequel on met le lien souhaité.

Les images HTML sont définies avec la balise <img>
Le fichier source src (path de l'image) et texte à afficher si l'image ne s'affiche pas alt sont fournis en tant qu'attributs.

Le tag <br> sert à sauter la ligne,quant à <hr> :c'est un tag servant à tracer une ligne fine montrant que l'on change de sujet (ou bien section),vous comprendrez mieux en voyant l'exemple ci dessous

<ul>sert à déclarer une liste qui contient des elements,ces derniers sont declares à l'interieur de la balise <ul> par des balises <li>.
On l'utilise beaucoup dans les navbars!

Comme son nom l'indique cela sert à mettre un boutton.On met à l'interieur de la balise le texte qui doit etre affiché dans le boutton.

Il sert à colorier ou souligner un mot ou une phrase particulière dans un paragraphe.Il est aussi utilisé pour d'autres fonctions d'ailleurs il ressemble beaucoup à l'élément div mais div est de niveau bloc et span de niveau ligne.

Sert à diviser et mieux structurer notre HTML afin de pouvoir réaliser le style que l'on veut.Parfois on veut appliquer un style spécial sur notre site et pour cela vous allez devoir diviser votre site principalement en divs.
Ne vous inquiétez pas si vous n'avez pas compris du 1er coup il faut de la pratique.

Attribut que l'on peut donner à tout nos tags HTML,sert à appliquer un effet css sur un tag qui porte ce nom ci.En gros à appeler le tag dans le fichier css et y donner des parametres(couleur,size,...) vous allez encore plus comprendre ici.

Même chose que pour class sauf qu'il peut être utilisé pour créer des liens internes,c'est à dire des liens dans une page qui t'emmennent à un autre endroit dans la même page.

Sert à afficher un site ou une video ytb ou une map ou tout autre page html extérieure utilisable dans notre page courante comme cette video youtube par exemple:

La semantique c'est un peut comme le plan de votre site,sa structure,son squelette.
Une semantique est formé de plusieurs tags comme vous le voyez ci dessous.
Elle doit être respectée non seulement pour aider le navigateur mais aussi apprendre à bien organiser son html.

On ne peut pas faire plus simple comme syntaxe,on choisit ce que l'on veut modifier(selector),vous allez voir les 3 principaux types de selector par la suite.
Ensuite on ouvre le bloc de déclarations dans lequel on donne les propriétés(properties) souhaités,voici un exemple ci dessous:

Ici nous allons vous montrer les 3 selecteurs les plus utilisés et les plus simples:
En fonction du nom(type) de tag:par eg nav,p,ul,....
En fonction de l'identifiant(id) en commancant par un # suivit du nom de l'id par eg : #home
En fonction de la classe en commencant par un point suivi du nom de la classe comme par eg: .titre

Pour que votre css soit appliqué à votre html et fonctionne correctement il est impératif de les lier et ce par une ligne de code simple qui doit être mise dans le head du html concerné.

Il y a 2 types d'unités:
Absolues(la taille ne change pas qlq soit la taille de l'écran)et sont :
cm,mm,in(inches = 96px = 2.54cm),px(pixels est le plus utilisé),pt(points),pc(picas)
Relatives(la taille est relative à une autre taille(celle du parent ou de l'ecran par exemple)et sont :
em(relative au fontsize de l'element,soit la taille du texte de l'element),ex(rarement utilisé),ch,rem(relative au font size à l'element root),vw(1vw = 1% du width du viewport(taille de l'ecran fans lequel vous etes)),vh(1vw = 1% du height du viewport),vmin,vmax,%(relative au parent)

Pour appliquer une couleur à un texte il suffit d'utiliser la property color dans votre bloc de properties et de donner soit le nom de la couleur soit le code hexadécimal de la couleur.

color blue color green

Même chose que pour la couleur sauf que cette fois c'est pas appliqué au texte mais au background(la surface).

background blue background green

On peut styliser les borders(limites de notre div ou autre tag html),il y a plusieurs properties pour cela,vous trouverez ci dessous quelques exemples.

with border without border

Les margins sont utilisées pour créer de l'espace autour des éléments, en dehors de toute bordure définie.Vous comprendrez mieux avec l'exemple ci dessous!

with margin without margin

Il est utilisé pour créer de l'espace autour du contenu d'un élément, à l'intérieur de toute bordure définie.Beaucoup le confondent avec margin mais ce n'est pas la même chose:
Le padding crée de l'espace à l'interieur de l'element spécifié et le margin applique de l'espace à l'extérieur!!!!

without padding with padding

Ces deux propriétés servent à spécifier la longueur(width) et largeur(height).

H=200px w=100px H=100px w=200px

On peut donner plusieurs properties à notre texte,vous trouverez les plus importantes dans l'exemple ci dessous.

text 1

text 2

text 3

Il y a plusieurs properties pour donner un style spécifique aux ul ,nottament pour enlever les "markers/bullets"voici les plus importantes ci dessous:

css off

• home
• about

Les liens peuvent être stylisés avec n'importe quel propriété CSS.

css off

resumily