Service de Formation Continue Technologie Web HTML et sémantique Gagner en simplicité et efficacité avec un code HTML respectueux des standards G. Chagnon
Service de Formation Continue Technologie Web Plan Introduction Passage en revue des éléments HTML et de leurs possibilités Séparation fond/forme Conclusion
Service de Formation Continue Technologie Web Introduction Buts de ce cours : Connaître les possibilités de balisage sémantique offertes par le langage HTML ; Aborder des principes de séparation du fond, de la forme et des comportements dynamiques d'une page ; Créer des pages Internet dont le code source est porteur de sens.
Service de Formation Continue Technologie Web Qu'est-ce que HTML? HyperText Markup Language = langage de balisage hypertexte Balisage : le texte est structuré par des « éléments » Élément : (...) Chaque élément a une signification
Service de Formation Continue Technologie Web Historique HTML était à l'origine un langage destiné à la structuration de l'information Dans les années 90, développement d'Internet « Guerre » des navigateurs (IE et NN) Apparition de balises propriétaires Aujourd'hui : rationalisation
Service de Formation Continue Technologie Web Structure de la page HTML Squelette de la page Codage de caractères Type de document <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" " ict.dtd"> Langue principale <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" " ict.dtd"> Titre de la page <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" " ict.dtd"> Titre de page Il ne reste plus qu'à remplir avec du contenu...
Service de Formation Continue Technologie Web Liens dans l'entête Éléments link : Permettent d'implémenter une navigation propre à un site (utilisé par Opera, Lynx...) : Valeurs possibles : next, prev, up, toc, contents, help, copyright...
Service de Formation Continue Technologie Web Éléments de groupage - div div est un élément de type bloc qui regroupe d'autres éléments par unités contextuelles ; Exemples : Un titre et des paragraphes ; Un tableau de données et le diagramme correspondant ; Un entête ou un pied de page...
Service de Formation Continue Technologie Web Éléments de groupage - span span est un élément en ligne qui regroupe des contenus en ligne (texte et/ou éléments) par unités contextuelles ; Exemples : Une image et sa légende ; Des dates ; Un titre de livre...
Service de Formation Continue Technologie Web Structure du texte : titres et paragraphes HTML propose 6 niveaux de titres. Du plus élevé au plus bas : h1, h2, h3, h4, h5, h6 ; Un paragraphe est indiqué par un élément p.
Service de Formation Continue Technologie Web Listes à puces et ordonnées Trois types de listes : à puces, ordonnées, de définitions Listes à puces : éléments ul et li ; Listes ordonnées : éléments ol et li ; (...) (...) (...)
Service de Formation Continue Technologie Web Listes de définitions Pour des définitions : élément dl Terme à définir : élément dt et définition (pas forcément unique) : élément dd maison Une maison est une habitation. château Grande maison. palais Château somptueux. Paroi supérieure de la bouche.
Service de Formation Continue Technologie Web Tableaux : Structure générale D'après le W3C, les tableaux devraient (should) être réservés à des tableaux de données ; Informations sur le tableau : attribut summary et élément caption ; Entêtes : thead et tfoot ; Corps : tbody.
Service de Formation Continue Technologie Web Tableaux : Structure générale Légende du tableau (Entêtes) (Pied de tableau) (Premier corps d'informations) (Deuxième corps d'informations)
Service de Formation Continue Technologie Web Tableaux : Cellules Structure en lignes (élément tr) ; Chaque ligne est constituée de cellules : Cellules d'entête (éléments th ) ; Cellules de données (éléments td ). On associe une cellule de données à une ou plusieurs cellules d'entête par les attributs id, headers ou scope.
Service de Formation Continue Technologie Web Tableaux : Structure en lignes Légende du tableau Titre de colonne 1 Titre de colonne 2 Titre de colonne 3 Titre de colonne 4 Titre de ligne 1 Données 1 Données 2 Données 3
Service de Formation Continue Technologie Web Formulaires Un champ de formulaire peut être commenté à l'aide de l'élément label ; Des champs de formulaires peuvent être associés à l'aide de l'élément fieldset couplé à l'élément legend.
Service de Formation Continue Technologie Web Formulaires : exemple Adresse de facturation Nom Numéro et rue Code postal Ville Adresse de livraison Nom Numéro et rue Code postal Ville
Service de Formation Continue Technologie Web Images et liens Partagent des critères de pertinence ; Image : l'attribut alt permet de lui donner une alternative textuelle ; Lien : l'attribut hreflang permet d'indiquer la langue du document vers lequel pointe le lien.
Service de Formation Continue Technologie Web Cadres (frames) Posent de nombreux problèmes (accessibilité, référencement...) L'élément noframes permet de fournir un contenu aux navigateurs ne les supportant pas. Ne doit pas être utilisé pour insérer des mots- clés à destination des moteurs de recherche.
Service de Formation Continue Technologie Web Emphase On utilise les éléments em et strong : em pour une emphase normale ; strong pour une emphase forte. Ne pas utiliser ces éléments pour des mises en italique ou en gras !
Service de Formation Continue Technologie Web Citations Noms des éléments en anglais ; or citation est un faux ami (sens double en anglais) ; Citation = référence bibliographique : élément cite ; Citation = extrait d'une œuvre : éléments q et blockquote, avec attribut cite.
Service de Formation Continue Technologie Web Marques de mises à jour Éléments del et ins : del pour une suppression ; ins pour une insertion. Date spécifiée par l'attribut datetime.
Service de Formation Continue Technologie Web Abréviations et acronymes Les deux sont des sigles ; Abréviation : Ne se prononce pas (par exemple UPMC) ; Élément abbr. Acronyme : Se prononce (par exemple OTAN) ; Élément acronym.
Service de Formation Continue Technologie Web Informatique HTML trahit ses origines : code : morceau de code source ; var : variable ; kbd : saisie au clavier ; samp : sortie d'un programme.
Service de Formation Continue Technologie Web Divers Objet multimédia : élément object et ses paramètres param ; dfn permet d'indiquer une définition ; address donne l'adresse de l'auteur ; hr ; i et b ; sup et sub pour les mises en exposant et en indice.
Service de Formation Continue Technologie Web Feuilles de style Séparation du contenu et de sa mise en forme ; Permet de respecter les souhaits de l'utilisateur (personnalisation de l'affichage) ; Utiliser les balises adaptées simplifie l'écriture de la feuille de style ( au lieu de )
Service de Formation Continue Technologie Web Utilisation des feuilles de style But : séparation stricte fond/forme ; CSS ne doit pas ajouter d'information : Images non décoratives (exemple : logo en fond de page) ; Contenu informatif essentiel (exemple : utilisation inappropriée de la propriété content )
Service de Formation Continue Technologie Web JavaScript Seulement si sa désactivation n'entrave pas l'accès au contenu ; L'élément noscript doit donc être utilisé correctement : Pour fournir une alternative au script ; Pas pour donner une liste de mots-clés.
Service de Formation Continue Technologie Web Conclusion Conception tournée vers l'utilisateur final Profite aux outils : Applications (moteurs de recherche, applications spécifiques de traitement de l'information) ; Outils de consultation (navigateurs graphiques et textuels, lecteurs d'écran) ; Surtout, profite aux humains : Information extraite puis transmise par les outils ; Personnalisation de l'apparence