MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr
ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin d enseignement du module 2h (dont une partie sur table et l autre sur machine) ( 80% de la note terminale) 1 TP «relevé» (20% de la note terminale) Absences justifiées : rattrapage. Absences non justifiées : 0
BIBLIOGRAPHIE / WEBGRAPHIE Bibliographie non exhaustive : Premiers pas en CSS3 et HTML5 de Francis Draillard HTML 5 : Une référence pour le développeur web de Rodolphe Rimelé et Raphaël Goetter HTML5 et CSS3 - Maîtrisez les standards des applications Web (2 ème édition) de Luc VAN LANCKER Sur le Web OpenClassRoom (ancien site du zéro) Alsacreation http://www.w3.org/tr/html5/dom.html#elements caniuse
HTML : hypertext Markup Language Langage de description. interprété par les navigateurs Associé au CSS et javascript : développement front end, intégrateurs Norme W3C Consortium organisme paritaire de normalisation à but non lucratif Fondé en 1994 un seul web partout et pour tous
LES BALISES HTML Langage de balise i.e. suite de descriptions encadrées par des chevrons < et > Toute description s ouvre et se ferme => deux types de balises : les balises par paires : <balise ouvrante> contenu </ balise fermante> Ex : <html> </html> Les balises autofermantes Le / de fermeture se place à la fin de la balise, juste avant le chevron de fermeture. Ex <img. />
EXEMPLE PAGE WEB
EXEMPLE PAGE WEB L ENVERS DU DÉCOR
DTD Une balise «un peu particulière» Déclaration du Type de Document (DTD), également nommée "doctype". o Défini l espace de nommage. Indique à quelles règles d écriture obéit le code de la page o Ne sert pas au navigateurs(en théorie tout au moins). o Sert au W3C => validation d un document conforme. Tout document HTML5 démarre par cette déclaration <!DOCTYPE html>
BALISES DE 1 ER NIVEAU Après la déclaration de la DTD, vient le contenu du document HTML. Le squelette principal est organisé avec 3 balises de premier niveau obligatoires : <html></html> <head></head> <body></body> l
SQUELETTE FICHIER HTML5 HTML5 <!DOCTYPE html> <html> <head> balises d entête </head> <body> balises de structuration du document </body> </html>
LES BALISES ET LEURS ATTRIBUTS Donc deux types de balises suivant leur écriture : Les balises par paires Les balises autofermantes Les attributs Les attributs permettent de préciser certaines propriétés des éléments HTML <balise attribut= valeur >..</balise> ou <balise attribut= valeur /> Par exemple : <img src= image.jpg alt= mon image />
BALISES D ENTETE - METADATA Elles sont placées entre les balises<head> et </head> du document HTML Metadonnées«Lues» par Les navigateurs web Les moteurs de recherche Les outils d indexation
BALISES D ENTETE METADATA - META NAME <meta name="description" content=«description de mon site»> <meta name="keywords" content="mot1, mot2,mot3» /> <meta name="author" content= Nom" /> <meta name="copyright" content=" aaaa/>
BALISES D ENTETE METADATA - HTTP EQUIV <meta charset="utf-8"> Norme d encodage. UTF-8, ISO-8859-1 <meta http-equiv="content-language" content="fr- <meta http-equiv="content-language" content="fr- FR" />
BALISE D ENTETE -METADATA <title>**obligatoire Important pour le référencement Le titre apparaît dans les onglets <link. /> insertion d une feuille de style, ou du javascript Mais aussi un favicon
BALISE D ENTETE -METADATA <style> : insertion de style(i.e. de mise en forme) <script> : insertion de javascript dans la page html.
SQUELETTE FICHIER HTML5 Exemple HTML5 : fichier index.html
HTML5.MAIS RÈGLES XHTML les noms d éléments et d attributs doivent être écrits en minuscule les valeurs d attributs sont entre guillemets simple ou double quote un attribut a toujours une valeur toute balise ouverte doit être fermée tous les éléments doivent être imbriqués correctement.
LES COMMENTAIRES <!-- Document --> <!-- autre commentaire sur plusieurs lignes : <p>bonjour tout le monde</p> --> Exemple :
ATTRIBUTS UNIVERSELS Valables dans TOUTES les balises Id : Identifiant unique utilisation : <p id=«introduction»> Class : Identifiant réutilisable utilisation : <p class=«informations»>
LES CATÉGORIES DE BALISES Suivant leur affichage, les types de balise sont classés en deux groupes. (HTML4) Important pour propriétés CSS et mise en forme. Balises de type «block» Saut de ligne avant et après. Occupe toute la largeur Balise de type «inline» Pas de saut de ligne, s insère dans le texte. HTML5 : une balise de type inline peut contenir une balise de type block mais.
L ORGANISATION DU TEXTE : EN BLOC HTML Balise de type bloc <p> </p> <hn> </hn> Mais aussi : <pre> <blockquote> Rendu navigateur Rq : le saut de ligne <br/> balise autofermante.
LA MISE EN VALEUR DU TEXTE EN LIGNE Balise de type inline em : mise en exergue strong : mise en exergue plus importante abbr : forme abrégée acronym : acronyme mark : surlignage
On ne choisit pas une balise pour son rendu visuel mais pour le sens qui lui est associé. Pour le design CSS s en charge <strong></strong> sémantique. Il doit être utilisé pour signaler un mot (ou des mots) important(s) Et non pas pour obtenir un texte en gras. ( <b> ou CSS) idem pour <em></em> sémantique Et non pas pour obtenir un texte en italique.(<i> ou CSS)
ÉDITEUR Editeurs : Le bloc note mais pas très pratique. WYSIWYG : Dreamweaver, CkEditor, word!...ajoute du code pas forcément «très propre». Editeurs de texte avec coloration syntaxique : Sublim text, Notepad++ : gratuit et open source.
ELÉMENTS STRUCTURANTS HTML5 -SECTIONING Ces éléments apportent un gain sémantique. Attention cependant, les anciens navigateurs ne les reconnaissent pas. <header></header> <footer></footer> <nav></nav> <aside> : informations complémentaires pas forcément sur le côté. La notion de côté est sémantique pas visuelle. <article> : contenu éditorial <section> </section> une section de page (peut contenir un header, footer). Une page peut avoir plusieurs sections.
<header> <nav> <aside> <aside> <aside> <section> <header> <article> <section> <header> <aside> <article> <footer>
LES TITRES - HEADING Balise de titre <hn></hn> Balise de type bloc Balise par paire. n : 1->6 Importance sémantique Conservation de l ordre des titres (pas de titre3 si aucun titre2 n a été défini avant)
L ORGANISATION DU CONTENU - FLOW Les éléments HTML5
L ORGANISATION DU CONTENU - PHRASING correspond à la plupart des éléments pouvant apparaître dans un flux de texte, et qui sont pour la plupart d'entre eux affichés en-ligne le balisage du texte <strong>, <b>, <i>, <audio>, <video>, <iframe>, <canvas>, <img>, les éléments de formulaire tels que <input>, <textarea>, <button>, <select>.
LES LISTES ORDONNÉES - FLOW Ce sont des listes d éléments organisés ( numérotés ). La liste est encadrée par <ol> pour organized list Les éléments de la liste, par la balise <li> HTML Rendu navigateur
LES ATTRIBUTS DES LISTES ORDONNÉES La balise <ol> admet un certain nombre d attributs spécifiques : (HTML5, déprécié en HTML4) type : permet de spécifier les style de la numérotation. Plusieurs valeurs : 1 : decimal ( 1 2 3 valeur par défaut si non précisé) 1 : decimal ( 1 2 3 valeur par défaut si non précisé) a : lower-alpha ( a b c.) A : upper-alpha ( A B C ) i : lower-roman (i ii iii.) I : upper-roman (I II III.) Reversed Ordre décroissant Start Précise la valeur de départ.
EXEMPLES ATTRIBUTS LISTES ORDONNÉES HTML Rendu navigateur
ATTRIBUT DES ITEMS DE LISTES ORDONNÉES Les items de listes ordonnées peuvent admettre comme attribut : value HTML Rendu navigateur
LES LISTES NON ORDONNÉES Liste à puce : Ce sont des listes d éléments non ordonnés. La liste est encadrée par les balises ul pour unorganised list, les éléments de la liste par les balises <li> pour list items. Pas d attribut spécifique ni pour la liste, ni pour les items HTML Rendu navigateur
LES LISTES DE DÉFINITION Les listes de définition <dl> </dl> : ouverture et fermeture de la liste <dt> </dt> ouverture et fermeture de l élément <dd></dd> ouverture et fermeture de la définition. Exemple : HTML Rendu navigateur
LES LISTES IMBRIQUÉES HTML Rendu navigateur Insertion de la seconde liste à l intérieur de l item café, l item café n est fermé qu après fermeture de la sous-liste.
BALISE DE LIEN PHRASING INTERACTIVE Permet d insérer un lien hypertexte Balise en paire <a></a> Balise de type inline HTML Rendu navigateur Attributs spécifiques: Attribut title Pour l accessibilité et le référencement. Rendu navigateur HTML
BALISE DE LIEN ATTRIBUT HREF Attribut de destination href Adresse relative : fichier dans le même dossier fichier dans un autre dossier fichier dans un autre dossier
BALISE DE LIEN ATTRIBUT HREF Attribut de destination href Adresse absolue : protocole + : + adresse : http://www.monsite.fr/bonjour.html ftp://www.telechargement.com/document1.doc mailto:personne@free.fr pour l ouverture d un logiciel de messagerie et l envoi d un mail, mais attention au spam.
BALISE DE LIEN ANCRE Une ancre est un lien dans la même page. Elle se construit en 2 étapes : Déclaration de l ancre, à l aide l attribut id Utilisation de l ancre à l aide d un lien, appel de l id (#)
BALISE IMAGE PHRASING EMBEDDED <img />intégration d une image. Balise de type inline, autofermante. Attributs obligatoires : src : chemin du fichier image (// href des liens) alt : texte qui s affiche si l image n est pas chargée Accessibilité Moteur de recherche Autre attribut : title : affichage d infobulle lors du survol de l'image par le curseur
ATTRIBUT DE LA BALISE IMAGE width, height : permet de donner une largeur et une hauteur à l image usemap : permet de zoner une image. Chacune des zones devient clicable et envoie vers le lien précisé. Pour en savoir plus : http://www.w3.org/tr/html5/embedded-content- 0.html#attr-hyperlink-usemap