HTML 5 et CSS 3
Les fondamentaux
Les prérequis
Avant de commencer cette formation assurez-vous d'avoir d'installer VSCode
C'est un éditeur de code qui nous permettra d'écrire du HTML et CSS plus simplement !
Vous pouvez dès lors télécharger le projet de formation qui nous servira de base ici
Vous pouvez extraire le répertoire et ouvrir le dossier extrait avec VSCode (Fichier > Ouvrir un dossier)
Présentation
HTML est un language de balisage qui nous permet de créer des pages web
CSS quand à lui est un langage qui permet de "styliser" ou bien "designer" notre page web
Ces pages seront affiché dans un navigateur web comme "Google Chrome" ou bien "Safari"
HTML veut dire Hyper Text Makup Language
CSS veut dire Cascading Style Sheets
HTML: La balise
Un balise HTML se présente sous cette forme :
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>HTML: La balise
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>Ceci est le nom de notre balise. "p" veut dire paragraphe !
HTML: La balise
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>Ceci est un attribut. Ils sont utilisés pour donner plus d'information à notre balise.
HTML: La balise
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>Ceci est le texte de notre balise "p"
HTML: La balise
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>Ceci est une autre balise "strong" qui veut dire "important" et permet de mettre un texte en gras !
HTML: La balise
<p class="paragraph">Bonjour <strong>tout le monde !</strong></p>Une balise s'ouvre et se referme avec la syntax suivante: <balise></balise>
HTML: La balise
Exercice :)
Dans le fichier "index.html" ajouter une balise "paragraph" à la ligne, après la balise "h1", avec le texte : "Ici, nous aimons les chats"
HTML: La balise
Correction
<!DOCTYPE html>
<html>
<head>
<title>CatLove - Nos amis les chats</title>
<link type="text/css" href="./style.css" />
</head>
<body>
<h1>Bienvenu sur CatLove !</h1>
<p>Ici, nous aimons les chats</p>
</body>
</html>HTML: Les commentaires
HTML: Les commentaires
Les commentaires permettent de rajouter des informations dans notre code HTML sans que cela ne soit affiché ou ne produise quoi que ce soit sur notre page web !
HTML: Les commentaires
<!-- Je suis un commentaire, je ne suis affiché que dans le code -->Voici la syntaxe !
HTML: La balise simple et double
HTML: La balise double
La balise double s'ouvre et se referme. Elle peut aussi contenir du texte ou d'autres balises :
<p>
Je suis une balise double. Je m'ouvre, je
contient du texte et me referme.
</p>HTML: La balise simple
La balise s'imple s'ouvre et se referme diréctement après l'ouverture. Cette dernière ne contient rien :
<img src="/lien/vers/une/image.png" alt="Je suis une image" />HTML: Les balises célébres
HTML: Les balises célébres
Il existe d’innombrables balises en HTML avec toutes un rôle particulier !
Vous pouvez retrouver la liste complète des balises sur le site de mozzilla
Mais voici une liste succincte des balises les plus célèbres
HTML: Les balises célébres
Textuelle
<!-- Affiche un titre -->
<h1>Je suis un titre</h1>
<!-- Affiche un sous titre -->
<h2>Je suis un sous-titre</h2>
<!-- Affiche un sous sous titre -->
<h3>Je suis un sous sous titre</h3>
<!-- Affiche un paragraphe -->
<p>Je suis un paragraphe</p>
<!-- Affiche un texte important (en gras) -->
<strong>Je suis important</strong>
<!-- Affiche un texte emphasé (en italique) -->
<em>Je suis une emphase</em>HTML: Les balises célébres
Textuelle
<!-- Affiche un titre -->
<h1>Je suis un titre</h1>
<!-- Affiche un sous titre -->
<h2>Je suis un sous-titre</h2>
<!-- Affiche un sous sous titre -->
<h3>Je suis un sous sous titre</h3>
<!-- Affiche un paragraphe -->
<p>Je suis un paragraphe</p>
<!-- Affiche un texte important (en gras) -->
<strong>Je suis important</strong>
<!-- Affiche un texte emphasé (en italique) -->
<em>Je suis une emphase</em>HTML5/CSS3
By David Jegat
HTML5/CSS3
- 102
