Cours Html et CSS

---

Le nom "cours html et CSS" est usurpé, car il sagit ici, avant tout, d'un aide-mémoire destiné à cristalliser mon apprentissage...
La page évoluera ainsi, au rythme de mes leçons...
Si un simple éditeur de texte aurait pu faire l’affaire, personnellement, j'ai opté pour un logiciel facilitant l’écriture.
Ainsi, j'utilise : Visual Studio Code pour la partie écriture, GitHub pour la gestion et partage du code, Netlify pour l'hébergement, Claude AI pour déloger les éventuelles erreurs de code, et un ami adepte de la dicipline, pour une meilleure vision d'ensemble.
Et puisqu'il me fallait un fil conducteur, j'ai suivi le cours de 71 lecons de Pierre Giraud sur youtub lien vers la video du cours.
L'information disponible sur le net est abondante et de qualité, Merci !

✨ Introduction

Le code HTML sert à construire le contenu d’une page web : les titres, les textes, les images, les liens, etc. (le squelette)
Le code CSS, sert à mettre en forme ce contenu : couleurs, polices, tailles et disposition des éléments. (l’habillage)

Quelques humbles conseils pour bien débuter ?
1️⃣ Code HTML : pour apprendre le langage HTML, il faut taper du code, encore et encore !
2️⃣ Code CSS : pour apprendre langage CSS, il faut taper du code, encore et encore !

Liste des sujets

1. Comment créer une page de base en HTML
2. Comment inscérer une image
3. Faire apparètre le texte comme dans l'éditeur
4. Accentuer l'importance d'une partie de texte avec HTML
5. les listes en html
   les liste non-ordonnées
   les listes ordonnées
   les listes de définitions
   les listes imbriquées
   Modifier l'apparence de la liste
6. les différents liens HTML
   les liens externes simples
   Les liens internes
7. Les ancres en HTML
8. incerer un lien vers mon email
9. Telecharger, incerer un PDF
10. Contrôler si le code HTML est valide
11. Les tableaux en hTML
12. Créer un Fichier CSS lié
13. Créer un nouveau dossier sous le nom "style css
14. Modifier la tailler et la couleur d'un titre
15. Modifier la couleur de la page
16. Comment donner un effet à un titre
17. Modifier couleur des titres h4
18. Comment appliquer à plusieurs balises un code couleur
19. Modifier le style d'un paragraphe avec "id et class"
20. Modifier le style d'un bloc
21. Modifier la police de mon texte
22. Les propriétés de type "Font
23. Modifier l'apparence du texte avec la fonction "text"
24. le model des boites en CSS
25. Les bordures en CSS
26. Propriété CSS Display
27. Propriété CSS Position
28. Redimentionner des images avec css
29. incerer une image de fond sur toute la page
30. incerer de l'audio en HTML
31. incerer de la video en HTML
32. Les selecteur CSS avancés (*) modifie tout le texte
33. Comment ajouter des styles à des liens HTML (les pseudo classes CSS)
34. Les pseudos éléments en HTML
35. Les transistions en CSS
36. les animation en CSS
37. Bouton inscription, contact, et faire un don
    Configurer le bouton inscription
    Configurer le bouton don
38. Bulle de recherche en haut de page
39. Comment adapter automatiquement la page à la taille de l'écran
40. Personnaliser l'icone qui apparait à coté du nom de domaine

Note de cours

lien vers la video du cours 1 à 71 lecons

Comment créer une page de base en HTML

La structure HTML de base est la suivante :

La structure CSS de base est la suivante:

(Avec image de fond dégradé)

Comment inscérer une image

(pour redimentionner utilise CSS)

img div class="imm1" src="assets/IMG_9499.JPG" alt=" une image de chat">

Faire apparèaitre le texte comme dans l'éditeur,

           
                pourquoi ne pas donner 
                de l'or en lingot à la 
                moitier du monde ? 
    

utiliser "pre" au début et fin de texte.

Accentuer l'importance d'une partie de texte
utiliser "strog" avant et après le mot

Strong = mot en gras, sert à orianter le navigateur

Mon teste est des plus banal même si la rouge ne le désir pas

la lettre B avant et après le mot sert à mettre en gras un mot

les lettres "em" avant et apres le mot met en italique

les listes en html

les liste non-ordonnées en utilisant ul

• saumon frais aux érelles
• lait de brebis fermenté
• cartouche d'ancre HP noir
• maison aux confétis rouges

les listes ordonnées en utilisant OL

1. partie 1 aspiration verte
2. partie 2 compression rouge
3. partie 3 détente bleu

les listes de définitions

maison

maions est un lieu agréable

lune

la lune est un astre

les listes imbriquées

1. partie 1.....
   sous partie....
   sous partie 2.....
2. partie 2.....
sous partie.....
3. partie 3......
sous partie.....
sous partie......

Modifier l'apparence de la liste, par exemple en mettant des chiffres romain

Par défaut : 1,2,3... sinon I pour chiffre romain, ou A pour a,b,c,d...

1. partie 1.....
2. partie 2.....
3. partie 3.....

1. partie 1.....
2. partie 2.....
3. partie 3.....

Les liens HTML

les liens externes simples

cliquer ici pour aller à l'acceil de wikipedia

Les liens internes

lien vers la page milieu de ma biblio

liens vers la page sous de ma biblio

liens vers la page parent de ma biblio

Si la page doit s'ouvrir dans un nouvel onglet il faut utiliser "target"

lien vers la page milieu de ma biblio

Les ancres en HTML

accès direct au début de page début de page

accès direct au milieu de page milieu de page

incerer un lien vers mon email

M'envoyer un mail

Telecharger, incerer un PDF

Telecharger Les principales balises HTML

Contrôler si le code HTML est valide

Tester son code avec Markup validation service

Les tableaux en hTML

Ajouter des éléments TD à l'intérieur d'éléments TR en commencant par élément table

L'entète du tableau doit porter l'attribut TH

nom	Prénom	age
Sierro	frederic	54 ans
belle	aimente	lunaire
sommes	2540	387

Créer un fichier CSS lié

Modifier la tailler et la couleur d'un titre h1

Dans la page CSS liée, inscrit le code suivant:
voir le code clique ici

Modifier la couleur de la page

Dans la page CSS liée, inscrit le code suivant:
voir le code clique ici

Comment donner un effet à un titre

voilà le code pour mon titre H1 de début de page.

Voir le code HTML clique ici

Voici le code CSS:

Modifier couleur des titres h4 et mettre en gras, et en italique

Dans la page CSS liée, inscrit le code suivant:
voir le code clique ici

Comment appliquer à plusieurs balises un code couleur

Dans la page CSS liée, inscrit le code suivant:
voir le code clique ici

Modifier le style d'un paragraphe avec "id et class"

Quand utiliser quoi ?

id → Pour un élément unique (navigation, logo, footer principal)

class → Pour styliser plusieurs éléments similaires (boutons, cartes, titres)

Conseil : En général, utilisez plutôt class car c'est plus flexible et réutilisable !

Dans la page HTML, après la balise, écrire "id= ou class=" suivi d'un attribu comme : "p1", puis dans le CSS, modifier les style de l'attibut.

avec l'utilisation de "id" il faudra mettre le code suivant dans la css : #p1

avec l'utilisation de "class" il faudra mettre le code suivant dans la css : .p1

Modifier le style d'un bloc avec "div" ou d'un morceau de texte avec "span"

Dans HTML, avant et après des balises incérer : div classe="div1"

Fonction DIV :

Élément de niveau bloc : prend toute la largeur disponible et commence sur une nouvelle ligne Pour structurer : sections, conteneurs de mise en page, groupes d'éléments.

Exemples d'usage :
- Créer des sections de page (header, footer, sidebar)
- Conteneurs pour la mise en page CSS
- Regrouper plusieurs paragraphes ou éléments

Fonction Span :

Élément en ligne : ne crée pas de nouvelle ligne, reste dans le flux du texte Pour cibler : petites portions de texte ou éléments inline.

Exemples d'usage :
- Styler quelques mots dans une phrase
- Appliquer des styles à une partie de texte
- Manipuler du texte spécifique en JavaScript

voir le code div dans HTML clique ici

voir le code div dans CSS clique ici

voir le code span dans HTML clique ici

voir le code div dans CSS clique ici

Modifier la police de tout mon texte

Dans Body, inscrire : font-family: century, Verdana, Tahoma, sans-serif

voir le code CSS clique ici

Les propriétés de type "Font"

font size

Régler la taille du texte soit avec % soit avec px, avec % le texte s'adapte à la page.

font style

Permet de mettre le texte en : oblique, italique, etc...

Font-weight

Permet d'augmenter l'aipaisseur du trait 400 est la valeur normal.

Modifier l'apparence du texte avec la fonction "text"

text-aligne-center

Permet de positionner le texte à gauche, droite, pour l'exemple je l'ai centré

voir le code CSS clique ici

Text-transforme

1. capitalize, met la première lettre de chaque mot en majuscule
2. non: ne fait rien " comme dans le HTML"
3. Uppercase: tout en majuscule
4. lpowercase: tout en minuscule

Text-decoration

text-decoration: nonepermet de suprimer les décorations

text-decoration: underline Ajoute un soulignement au texte

text-decoration: overline Ajoute une ligne au-dessus du texte

text-decoration: line-through Ajoute une ligne barrée au texte

text-indent: permet de définir un retrait du texte sur la première ligne d'un bloc de texte

text-indent: 20px; /* Indente la première ligne de 20 pixels /

text-indent: 2em; / Indente la première ligne de 2 ems /

text-indent: 5%; / Indente la première ligne de 5% de la largeur du conteneur

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo libero, nobis sequi
necessitatibus, cupiditate quisquam reiciendis ab molestias tenetur obcaecati repellat? Assumenda
dolores modi dicta iure, esse dignissimos porro error.

Text-shadow : permet de créer une ombredans le texte

Voila un exemple d'ombre dans le texte

il faut donner 4 valeurs: 1: déplacement horisontale de l'ombre, 2 ème déplacement: vertical,
3 ème: rayon de propagation, puis la couleur de l'ombre.

Gestion des espaces en CSS avec line-height

Valeur par défaut qui est dépendante de la police de caractères.
Multiplie la taille de la police. Par exemple, line-height: 1.5;
signifie que la hauteur de la ligne sera 1.5 fois la taille de la police. avec une valeur de 1.5

Vous pouvez définir une hauteur de ligne précise en utilisant des unités telles que
px, em, rem, etc. Par exemple, line-height: 20px;
Définit la hauteur de la ligne en pourcentage de la taille de la police.

Par exemple: line-height: 1.5avec une valeur de 2

Voila le code CSS pour mettre en application cela

le model des boites en CSS

Le modèle des boîtes en CSS est un concept fondamental qui décrit la structure des éléments HTML. Chaque élément est considéré comme une boîte rectangulaire, et ce modèle permet de contrôler la disposition, les marges, les bordures et le rembourrage de ces éléments.

Voici les principales propriétés du modèle des boîtes :

• margin: définit l'espace extérieur de la boîte, créant une distance entre elle et les autres éléments.
• border: définit la bordure de la boîte, qui entoure le contenu et le rembourrage.
• padding: définit l'espace intérieur de la boîte, créant une distance entre le contenu et la bordure.
• width et height: définissent la taille de la boîte.

visuel : ici

Pour le test, voilà un peu de texte

Les bordures en CSS

La bordure se place entre le padding et l'extérieur

Avec l'élement "border" il faut défine 3 valeurs

• largeur du trait
• puis style de la bordure
• couleur de la bordre

Propriété CSS Display

Propriété CSS Position

utiliser la fonction "POSITION"

• static = normal
• relative = décalé mais garde sa place
• absolute = hors flux, attaché à un parent
• fixed = collé à l’écran
• fixed = normal → devient fixé quand on scrolle

Propriété Float et clear

float = colle un élément à gauche ou à droite, le reste du contenu s’adapte autour.

clear = casse le flot et remet l’élément en dessous des floats.

Redimentionner des images avec CSS

utiliser width ou utiliser la fonction DIV class "imma5 et définir "imma5" dans le CSS

Incérer une image de fond sur toute la page

Avec background-image dans le css dans le Body

Incérer de l'audio en HTML

Dans le body de la page HTML incérer : audi controls

Incérer des videos DANS html

Dans le body de la page HTML incerer : video contrôls

Les sélecteurs CSS avancés (étoile)

ce selecteur CSS * applique a tous les éléments de la page la configuration ou au DIV seulement

Comment ajouter des styles à des liens HTML (les pseudo classes CSS)

Donner un style aux liens "ancres" avec, dans l'ordre : over, link, visited,

Voilà le résultat en video

La partie : controls autoplay muted loop sert à lancer la vidéo de manière automatique et
la partie Loop à répeter la lecture de la vidéo en boucle

Voici le codes HTML:

Voici le codes CSS:

Les pseudos éléments en HTML

En bref : Les pseudo-éléments permettent de décorer et styliser sans toucher au HTML ! 🎨

::before - Ajoute du contenu avant l'élément (icônes, décorations)

::after - Ajoute du contenu après l'élément (flèches, badges)

::first-line - Style la première ligne de texte (chapô, introduction)

::first-letter - Style la première lettre (lettrine, style magazine)

::selection - Style le texte sélectionné par l'utilisateur (personnalisation)

::placeholder - Style le texte d'indication dans les champs de formulaire

::marker - Style les puces des listes "li"

::backdrop - Style l'arrière-plan des éléments en plein écran (modales, vidéos)

Pour l'exemple, je modifie l'apparence des liste avec la fonction marker

Les transistions en CSS

Les transitions CSS permettent d'animer les changements de propriétés de manière fluide.

Les 4 composantes d'une transition :

Voici le codes HTML:

Voici le codes CSS:

les animation en CSS

Les 8 propriétés principales

L'espace entre les parragraphe peut être diminué avec la fonction "line-height" dans le CSS

Voici le codes HTML:

Voici le codes CSS:

Boutons inscription, contact, et fair un dont

Comment créer la zone de début de page avec les boutons: inscription, contact, et faire un don

Telecharger le code complet Code HTML et CSS

Voila le résultat en video

A ce stade, le bouton inscription et faire un don ne fonctionnent pas encore.
la partie "contact" est traitée dans la chapitre : incérer un lien vers mon email

Pour que le bandeau reste en haut de page lors du défilement, ajouter la fonction : position: sticky dans le css;

Configurer le bouton inscription

Il y a différentes manières de la faire, mais la plus simple (moins performente) est de la faire par le biais de la section "formulaire ou forms" de votre hébergeur.

1. 1: Créer un fichier : (inscription.html) dans le même dossier que : index.html
2. 2: Coller le code suivant : Code HTML uniquement
3. 3: Créer un fichier (merci-inscription.html) dans le même dossier que : index.html
4. 4: Coller le code suivant : Code HTML uniquement

Avantages d'une inscription côté serveur avec PHP: (sera intégré au cours plus tard)

🔒 Sécurité renforcée
Validation sécurisée : Les données sont vérifiées côté serveur, impossible de contourner avec les outils de développement du navigateur Protection des données sensibles : Les mots de passe peuvent être hashés (bcrypt, Argon2) avant stockage Protection contre les injections SQL : Utilisation de requêtes préparées (PDO, mysqli) Fichiers de configuration cachés : Les identifiants de base de données restent invisibles pour l'utilisateur

🛡️ Contrôle et fiabilité
Validation côté serveur obligatoire : Même si JavaScript est désactivé, les vérifications fonctionnent Règles métier complexes : Vérifier si l'email existe déjà, appliquer des règles de validation avancées Logs et traçabilité : Enregistrer les tentatives d'inscription, détecter les abus.

💾 Gestion de la base de données
Connexion directe à la BDD : Insertion sécurisée des données dans MySQL/PostgreSQL Transactions : Garantir l'intégrité des données (tout réussit ou tout échoue) Pas d'exposition des credentials : Les accès BDD restent sur le serveur

📧 Fonctionnalités avancées
Envoi d'emails : Confirmation d'inscription, validation du compte Génération de tokens : Pour la vérification d'email ou la réinitialisation de mot de passe Intégrations tierces : APIs de paiement, services externes

🌐 Compatibilité
Fonctionne sans JavaScript : Accessible même avec JS désactivé Support universel : Tous les navigateurs, même anciens

Configurer le bouton don

1: Créer un fichier : (don.html) dans le même dossier que : index.html

2: Coller le code suivant (paypal et payem,ent crypto) : Code HTML uniquement

3: Remplacer les champs peronnels par vos infos (Paypal et liens de votre portefeuille crypto) La partie remerciements est inclue dans la code.

Bulle de recherche en haut de page

Voici le codes HTML:

Voici le codes CSS:

Comment adapter automatiquement la page à la taille de l'écran

Le responsive design (ou design adaptatif) est une approche de conception web qui permet à un site internet de s'adapter automatiquement à la taille de l'écran sur lequel il est consulté - que ce soit un smartphone, une tablette, un ordinateur portable ou un grand écran de bureau.

1: Le viewport meta tag dans le head de ton HTML :

Voici le codes HTML:

Cette balise indique au navigateur d'adapter la largeur de la page à l'écran de l'appareil.

Personnaliser l'icone qui apparait à coté du nom de domaine

Afin d'afficher l'icone de votre choix à coté du nom de domaine, il faut incérer le code suivant dans le body (head)

Pour modifier le non du titre affiché, modifiez le titre dans le body (head)

Pour l'exemple je suis passé de "document" à "Cours HTML/CSS"