Fiche de révision : HTML et CSS fondamentaux

📋 Plan du Cours

1. Environnement et normes du Web
2. Structure et imbrication HTML
3. Balises et sémantique HTML
4. Règles et propriétés CSS
5. Sélecteurs et priorités CSS
6. Listes et tableaux HTML
7. Formulaires et champs HTML

📖 1. Environnement et normes du Web

★ À maîtriser

• Le W3C (World Wide Web Consortium) établit les normes du Web, tandis que MDN (Mozilla Developer Network) fournit de la documentation.

📌 Un programme stocké en local et un programme stocké sur un serveur peuvent produire des effets respectivement locaux et distants.

Compléments

• Une documentation peut contenir des erreurs ; il faut donc savoir retrouver et vérifier les erreurs dans son propre programme.

• Les fichiers du cours sont accessibles sur le disque Z du serveur de l’IUT et sur cloud.iut-orsay.fr, qui utilise Nextcloud de l’IUT.

💡 Astuce mémo

W3C fixe les normes, MDN documente leur usage

📖 2. Structure et imbrication HTML

🔑 Notions clés & Définitions

• Élément HTML : Comprend une balise et le contenu qu’elle contient.
• DOM : Représente les imbrications des éléments HTML sous la forme d’une structure arborescente.

★ À maîtriser

• Le document HTML commence par la déclaration <!DOCTYPE html>.

📌 Une balise ouvrante, comme <html>, ouvre un élément, tandis qu’une balise fermante, comme </html>, le ferme.

Compléments

📌 Dans l’arbre DOM, html est la racine, head et body sont ses enfants, un élément peut être un ancêtre ou un descendant d’un autre, et un élément sans enfant est une feuille.

💡 Astuce mémo

L’arbre DOM part de html, se ramifie vers head et body, puis aboutit aux feuilles

📖 3. Balises et sémantique HTML

★ À maîtriser

📌 head contient les informations techniques du document, tandis que body contient le contenu destiné à l’utilisateur.

• La balise meta peut déclarer l’encodage avec un attribut tel que charset="utf-8" ; les caractères sont représentés par des bits et UTF-8 n’est pas synonyme d’Unicode.

📌 Une balise binaire possède une balise ouvrante et une balise fermante, tandis qu’une balise unaire est vide et peut s’écrire avec une barre oblique finale.

• Dans body, p sert aux paragraphes, h1 à h6 aux titres, a aux liens avec l’attribut href, img aux images avec l’attribut src, ol et ul aux listes ordonnées et non ordonnées, et table aux tableaux.

• Les balises sémantiques de structure comprennent : header pour l’en-tête, main pour la partie principale, section pour organiser la partie principale, article pour contenir du contenu, nav pour la navigation, aside pour les informations complémentaires, footer pour le pied de page, address pour les informations d’adresse, généralement placées dans le pied de page

Compléments

• Les attributs HTML s’écrivent généralement en minuscules et leur nom et leur valeur sont séparés par un signe égal dans la balise.

• Dans head, title détermine le nom de l’onglet, style permet d’écrire des styles mais est présenté comme ancien, et script sert aux scripts, hors du sujet du cours.

📖 4. Règles et propriétés CSS

★ À maîtriser

• Une règle CSS associe un sélecteur à une ou plusieurs déclarations de propriété et de valeur, sous la forme sélecteur { propriété : valeur; }.

📌 CSS décrit la mise en forme et peut être lié à HTML par une balise link avec rel="stylesheet" et un attribut href indiquant le fichier CSS.

Compléments

• Les propriétés de texte citées sont :

  • font-family
  • color
  • text-decoration
  • text-indent
  • text-align
  • font-size
  • text-shadow

• Les propriétés de boîte citées sont : margin pour l’espace entre les boîtes, padding pour l’espace autour du contenu, border pour le bord, background-color pour la couleur d’arrière-plan, background-image pour l’image d’arrière-plan

• Les couleurs CSS peuvent être désignées par un nom, par une valeur RGB hexadécimale ou par une valeur RGBA qui inclut la transparence.

• Le sélecteur universel * vise tous les nœuds ciblables par la règle et peut notamment servir à fixer margin et padding à zéro.

📖 5. Sélecteurs et priorités CSS

★ À maîtriser

• Les sélecteurs terminaux peuvent viser un élément par son tag, par son identifiant avec # ou par sa classe avec . ; un identifiant est unique, contrairement à une classe qui peut être partagée.

• Un sélecteur composé décrit un chemin dans l’arbre HTML jusqu’aux nœuds visés, et un sélecteur descendant comme main p peut sauter des niveaux intermédiaires.

📌 En cas de conflit entre règles, le sélecteur le plus précis l’emporte : on compare le nombre d’identifiants, puis le nombre de classes, puis le nombre de tags, et la dernière règle écrite gagne en cas d’égalité complète.

Compléments

• Un sélecteur composé peut combiner un tag et une classe, comme p.toto, ou plusieurs classes, comme a.toto.titi.

• Les sélecteurs d’attribut utilisent des formes telles que [href="valeur"] et peuvent aussi employer les opérateurs $=, ~=, *= et ^=.

• Les pseudo-classes citées comprennent :hover, :first-child, :last-child et :nth-child(...), tandis que les pseudo-éléments ::before et ::after peuvent ajouter du contenu.

• Le combinateur > vise un enfant direct, ~ un frère situé à gauche du second sélecteur, et + ce même type de frère adjacent.

💡 Astuce mémo

En cas d’égalité : identifiants, puis classes, puis tags, puis dernière règle écrite

📖 6. Listes et tableaux HTML

★ À maîtriser

• Une liste ordonnée ou non ordonnée contient des éléments li ; les styles de liste peuvent notamment régler le type, la position et l’image des marqueurs.

• Un tableau HTML peut contenir caption, colgroup, thead, tbody et tfoot ; tbody peut être ajouté automatiquement par le navigateur lorsqu’il est omis.

• Un tableau contient des lignes tr composées de cellules th d’en-tête et de cellules td de données ; rowspan et colspan permettent à une cellule de s’étendre sur plusieurs lignes ou colonnes.

Compléments

• Les éléments enfants d’un tableau doivent respecter un ordre imposé, mais les lignes peuvent avoir des nombres de cellules différents et le tableau n’est alors pas nécessairement rectangulaire.

📖 7. Formulaires et champs HTML

🔑 Notions clés & Définitions

• Formulaire HTML : Envoie des paires clé-valeur au format texte, et il faut définir la clé et la valeur des données envoyées.

★ À maîtriser

📌 La méthode GET est plus légère que POST et le cours indique que les données envoyées avec GET doivent totaliser moins de 3 kilo-octets ; POST peut utiliser enctype="multipart/form-data".

• Un contrôle de formulaire peut être associé à un label par l’attribut for correspondant à l’id du champ ; name et value servent à décrire la paire envoyée, et required indique qu’un champ est requis.

Compléments

• input de type reset réinitialise le formulaire et input de type submit déclenche son envoi.

• input type="text" peut utiliser list pour proposer des valeurs d’un datalist, et pattern permet de filtrer les caractères au moyen d’une expression régulière.

• Les types de champs cités comprennent password, search, tel, url, email, week, month, time, date, color, number, range, checkbox, radio, file et hidden.

• Le modèle de boîte HTML/CSS distingue margin-box, border-box, padding-box et content-box ; la propriété width dépend de la boîte considérée.

💡 Astuce mémo

GET est limité et léger ; POST accepte notamment multipart/form-data