HTML - Paragraphes et Hyperliens

Paragraphes

• <p>: Définit un paragraphe dans un document HTML.
• La balise de fin </p> est optionnelle.
• <br>: Insère un saut de ligne.
• La balise de fin n'est pas nécessaire pour <br>.
• <strong>, <em>, <mark>: Désignent du texte important.
• <hr>: Crée une ligne horizontale de séparation.
• La balise <hr> n'a pas de balise de fermeture.

Attributs de la balise <p>

• align: Permet d'aligner le texte (gauche, droite, centre, justifié).
• title: Ajoute des annotations, visibles en survolant le texte avec la souris.
• lang: Spécifie la langue du texte pour les moteurs de recherche et les assistants vocaux.
• style: Permet de définir des styles spécifiques à l'élément.
• class et id: (Voir cours sur les feuilles de style).

Hyperliens (lien hypertexte)

• <a>: Crée un lien hypertexte.
• L'attribut href spécifie l'adresse de destination.
• L'attribut target spécifie où ouvrir la page cible.
• Options pour l'attribut target:
  • _blank: Nouvelle fenêtre.
  • _self: Même fenêtre (par défaut).
  • _parent: Fenêtre parent.
  • _top: Fenêtre principale.

Listes numérotées/listes à puces

• OL: Liste numérotée.
  • start="valeur": Début de la numérotation.
  • compact: Format compact.
• UL: Liste à puces.
  • type="disc/square/circle": Type de puce.
• LI: Entrée de liste.
  • start="valeur": Démarrage de la numérotation de l'entrée.
  • value="valeur": Valeur de la numérotation spécifique à l'élément.

Balises de tableau

• <table ...>: Élément principal du tableau.
  • align: Alignement (gauche, centre, droite).
  • border: Épaisseur de la bordure.
  • bgcolor: Couleur de fond.
  • width: Largeur du tableau (pourcentage ou pixels).
  • cols: Nombre de colonnes.
• <tr>: Ligne du tableau.
• <td>: Cellule de données.
• <th>: Cellule d'entête.
• attributs de cellules :
  • cellspacing: Espacement entre les cellules.
  • cellpadding: Marge interne des cellules.
  • bgcolor: Couleur de fond des cellules.
• colspan: Fusionner plusieurs colonnes.
• rowspan: Fusionner plusieurs lignes.
• Autres balises :
  • , , , , , , tfoot, ,

Images

• <img src="Adresse_image">: Insérer une image.
• width, height: Dimensions de l'image en pixels.
• hspace, vspace: Espacement horizontal et vertical entre l'image et le texte.
• border: Ajout d'une bordure autour de l'image.
• align: Alignement de l'image (haut, milieu, bas, gauche, droite).

Balise <IFRAME>

• <iframe>: Permet d'inclure une page web dans une autre page.
  • name: Identifiant d'une zone.
  • src: URL de la page à inclure.
  • width, height: Dimensions de l'iframe en pixels. - scrolling: Affichage des barres de défilement (oui/non).

Formulaires

• <form>: Conteneur du formulaire.
  • Attributs: method="GET/POST", action="script"
• <input>: Champ du formulaire.
  • type: Type de champ (texte, case à cocher, bouton, etc.).
• Valeurs pour l'attribut type : TEXT, CHECKBOX, RADIO, SUBMIT, IMAGE, RESET.
• <textarea>: Zone de texte multiligne.
• <select>: Liste déroulante.

HTML5: Nouveaux types <input>

• HTML5 introduit de nouveaux types d’inputs
• Ex: color, date, datetime, month, number, range, search, tel, time, url, week, email, file.

HTML5: Balises sémantiques de structure

• <header>: Entête de la page ou d'une section.
• <section>: Section du contenu.
• <article>: Contenu indépendant.
• <nav>: Navigation.
• <aside>: Informations complémentaires.
• <footer>: Pied de page.
• HTML5 améliore la sémantique et la structure des pages web.

HTML5: support des données multimédia

• <audio> et <video>: Intégration de fichiers audio et vidéo sans plugins externes, via des <source>
• <video width="larg" height="haut" controls>: ajout de contrôles.
• <video autoplay loop muted>: auto lecture, boucle et sans son.

HTML5: avantages

• Compatibilité plus élevée.
• Prise en charge de nouvelles fonctionnalités.
• Meilleure gestion des données.