Fiche récap : Créez votre site web avec HTML5 et CSS3 Développement
Syntaxe HTML 💻 Syntaxe CSS 💻
<!DOCTYPE html> body { Bonnes pratiques
<html lang="fr"> font-family: Arial;
<head> color: black; Commenter des lignes de code
<meta charset="utf-8"> } pour donner une indication sur
<title>Le titre de ma page web</title> leur fonctionnement, si besoin.
<link href="[Link]" rel="stylesheet"> .gros-titre { Un commentaire en HTML :
</head> font-size: 30px; <!-- commentaire -->
<body> } Un commentaire en CSS :
<h1 class=”gros-titre”>Bienvenue !</h1> /* commentaire */
<p>Mon paragraphe de texte</p> p:hover {
</body> text-decoration: underline; Structurer du contenu de texte
</html> } avec des balises de titre, en
commençant toujours par le
niveau 1 : <h1> </h1>
Définitions
Rédiger le texte alternatif d’une
image avec l’attribut alt :
Balise HTML : <balise> <img src=”….jpg” alt=”…”>
Élément de structure en HTML qui indique la nature d’un contenu, encadré par des chevrons : < >.
➔ Une balise en paire s’ouvre avant et se ferme après le contenu de l’élément. Ex. : <body>…</body> ;
➔ Une balise orpheline est auto-fermante et contient l’élément dans la même ligne. Ex. : <input> ou <img>.
Erreurs classiques
Attribut : attribut=”valeur”
Option d’une balise donnant une indication complémentaire. Situé dans la balise ouvrante, l’attribut est suivi
du signe égal et précise entre guillemets la valeur à prendre en compte. Ex. : <html lang="fr">. Utiliser des balises universelles
<span> (inline) et <div> (block)
Propriété CSS : sélecteur {propriété: valeur;} quand d’autres balises, plus
Instruction en CSS, située entre accolades : { }. Elle se termine toujours par un point-virgule : ;. adaptées, existent :
Selon la valeur qu’on lui associe, une propriété CSS caractérise le style d’un élément HTML. Cet élément HTML <span class="important">
est appelé en amont de la propriété via un sélecteur (il s’agit du nom de la balise, sans les chevrons). …au lieu de <strong> ;
On peut appliquer plusieurs propriétés à un élément HTML et une propriété à plusieurs éléments HTML.
<div class="titre">
Classe : .classe {propriété: valeur;} …au lieu de <h1> par exemple.
Marquage créé avec l’attribut class pour isoler un élément HTML. On l’appelle dans le CSS avec un point : ..
Cela permet d’appliquer un style à cet élément HTML en particulier : un seul titre de niveau 1 par exemple. Utiliser systématiquement des
position: absolute; pour
Pseudo-classe : sélecteur:pseudo-classe {propriété: valeur;} positionner des éléments pose
Option en CSS qu’on ajoute à la suite d’un sélecteur pour appliquer un style dynamique à un élément HTML. des problèmes d’affichage : le
Ex. : :hover désigne le survol de la souris. On peut lister plusieurs pseudo-classes pour un sélecteur. contenu ne sera pas responsive.
