Expose : Initiation complete HTML5 et CSS
Seance 1 : Les bases de HTML5
HTML (HyperText Markup Language) est le langage de base utilise pour creer des pages web.
HTML5, sa derniere version, ameliore la compatibilite avec les navigateurs modernes.
HTML structure la page, tandis que CSS soccupe de la mise en forme.
On peut coder avec des editeurs comme VS Code ou Sublime Text.
Les navigateurs (Chrome, Firefox...) lisent les fichiers HTML.
Seance 2 : Les balises HTML et structure de page
Une page HTML5 contient :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<!-- Contenu -->
</body>
</html>
Le doctype signale qu'on utilise HTML5. Les balises <head> et <body> contiennent respectivement
les metadonnees et le contenu visible.
Seance 3 : Organisation et mise en forme du texte
Les balises de texte incluent :
- <p> pour les paragraphes
- <h1> a <h6> pour les titres
- <br> pour un saut de ligne
- <strong> pour le texte en gras
- <em> pour litalique
Les commentaires HTML sont ecrits avec <!-- commentaire -->.
Seance 4 : Les listes et les liens
Deux types de listes : <ul> pour les puces, <ol> pour les numeros. Chaque element est dans <li>.
Les liens se creent avec <a href="...">Texte</a> vers d'autres pages, fichiers ou emails.
Seance 5 : Les images
Les images sintegrent avec :
<img src="image.jpg" alt="Description" width="300">
- src : chemin de limage
- alt : texte alternatif
- width/height : dimensions
Formats : .jpg, .png, .gif, .svg.
Seance 6 : Introduction a la mise en forme avec CSS
CSS permet de styliser les elements HTML. Trois facons dajouter du CSS :
1. En ligne : <p style="color: red;">Texte</p>
2. Interne : dans <style> dans le <head>
3. Externe : fichier .css lie avec <link>
Exemple :
<head>
<link rel="stylesheet" href="style.css">
</head>
Seance 7 : Appliquer un style avec CSS (suite)
Pour styliser plusieurs balises :
- Selecteurs : p, h1, div
- Classes : .nomClasse { }
- IDs : #identifiant { }
- Universel : * { }
On peut commenter avec /* commentaire */.
Exemple :
<style>
p { color: blue; }
.important { font-weight: bold; }
#titre { font-size: 24px; }
</style>
Seance 8 : Selecteurs avances et mise en forme du texte
Les selecteurs avances permettent de cibler les elements plus precisement :
- p span : span dans un p
- p > span : span enfant direct
- a:hover : effet au survol
Pour le texte :
- font-size : taille
- font-family : police
- font-style : italic, normal
- font-weight : bold
- text-decoration : underline, none
Seance 9 : Alignement, couleurs, transparence et bordures
Alignement avec text-align: left, center, right.
Les flottants : float: left/right pour positionner.
Couleurs : color et background-color (hex, nom, rgb).
Heritage : les styles peuvent etre herites dun parent.
Transparence : avec opacity ou rgba().
Bordures :
- border: 1px solid black;
- border-radius: pour les coins arrondis.
Ombres : box-shadow.
Seance 10 : Mise en page du site
Structure dune page :
- Balises de structure : <header>, <nav>, <main>, <section>, <footer>
- block vs inline : div/p = block, span/a = inline
- Dimensions : width, height
- Marges : margin / padding
- Centrage : margin: auto
Seance 11 : Fonctionnalites evoluees
Les tableaux :
<table><tr><td></td></tr></table>
Formulaires :
<form><input type="text"></form>
Champs : texte, email, mot de passe, bouton, checkbox, radio.
Multimedia :
- <video src="fichier.mp4" controls></video>
- <audio src="fichier.mp3" controls></audio>
Seance 12 : TP - Creation dun site web
Creer une page complete avec HTML et CSS.
Structuration de la page, insertion de texte, images, liens, formulaire, tableau, videos.
Derniere etape : publier avec Netlify ou GitHub Pages.
Aller plus loin
- Mise en page avec Flexbox : flexible, adaptative.
- display: flex; justify-content: center; align-items: center;
- Autres techniques : Grid, position, z-index
- Media Queries pour rendre le site responsive :
@media (max-width: 600px) { ... }
- Utiliser display: none/block/inline-block pour organiser laffichage.
