Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

420-B16-RO : Techniques de développement d’applications hypermédia I 2 – Langag

420-B16-RO : Techniques de développement d’applications hypermédia I 2 – Langage HTML partie 1 Professeur : Sylvain Labranche 1 slabranche@crosemont.qc.ca Page Web, programmation client Langage HTML et CSS Après traduction par le navigateur 2 Pourquoi 2 langages? HTML (HyperText Markup Language) Il décrit le contenu et la structure de la page Web Les paragraphes, les titres et leurs niveaux 1,2… les tableaux, les images, les menus… 3 Pourquoi 2 langages? (2) CSS (Cascading Style Sheets) Il est aussi appelé Feuilles de style. Il décrit la mise en forme ou la présentation de la page Web couleur des paragraphes, couleur des titres, polices de caractères, dispositions des paragraphes On peut changer la forme sans toucher au contenu. 4 Qu’est-ce que le HTML HTML (HyperText Markup Language) Format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte. Un hypertexte est un texte contenant les liaisons directes entre des éléments de d'autres documents. Pensez à un lien d'un site Web vers un autre. HTML permet de décrire le contenu d’un document : Les titres, Les paragraphes, La disposition des images, Les formulaires, etc. 5 Qu’est-ce que le HTML (2) Utilisation conjointe HTML est souvent utilisé conjointement avec: des langages de programmation comme JavaScript, et des formats de présentation (feuilles de style en cascade). 6 HTML et HTML avec CSS 7 Versions du HTML  HTML1: 1991 Première version créée par Tim Berners-Lee .  HTML2:1994-1996 . Les règles et le fonctionnement de cette version sont donnés par le W3C.  W3C est une communauté internationale dont la mission est de développer les standards du web.  HTML3:1996 Rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. 8 Versions du HTML (2)  HTML 4 : 1998 Propose l'utilisation de cadres (frames en anglais), des tableaux plus complexes, des améliorations sur les formulaires, l’exploitation des feuilles de style ou CSS. Exemple de site avec cadres (frames): http://devernay.free.fr/cours/internet/html/sitef.html  HTML 5 : Possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires. 9 Structure d’un document HTML • Pour respecter les standards du HTML, tout document doit débuter par la balise !DOCTYPE pour informer les outils de validation de la version de HTML utilisée. • Un document HTML est délimité par les marqueurs: • <html> et • </html>. • Le document est composé de deux parties: • l’entête et • le corps. 10 Structure d’un document HTML (2) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Titre de la page Web </title> </head> <body> Contenu de la page Web </body> </html> Fichier: exemple1.html La balise DOCTTYPE informe le navigateur de la version du HTML utilisée. Le document HTML est contenu entre les balises <html> et </html> Entête du document: contient les informations qui concernent le document comme le jeu de caractères utilisé et le titre qui sera affiché dans le navigateur. Ces informations, à l’exception du titre, n’apparaissent pas dans le navigateur. Corps du document : informations affichées dans le navigateur 11 Visualiser un document HTML Le résultat de chargement de la page dans le navigateur Google chrome 12 Les fichiers HTML doivent être enregistrés avec l’une des extensions: .html ou .htm (ou en majuscule (HTML ou HTM) Affichage du code HTML d'une page Web dans un navigateur: On utilise le menu contextuel/ Afficher la source (Internet Explorer) ou code source de la page (FireFox) Afficher les extensions des fichiers  Ouvrez l'explorateur Windows (ouvrez un dossier, par exemple)  En haut, cliquez sur Affichage, puis Options, puis Modifier les options des dossiers et de recherche.  Dans la nouvelle fenêtre, cliquez encore sur Affichage, puis décochez Masquer les extensions des fichiers dont le type est connu. 13 Balises HTML  Les commandes HTML sont appelées marqueurs ou balises. Exemples: <html> , <title>, <body>, <p>… La balise <!DOCTYPE> est spéciale, car elle commence par !  Ces marqueurs ont une syntaxe bien particulière: ils sont encadrés par des délimiteurs: < et >.  Pour définir la portée d’un marqueur, on le fait apparaitre en double: le marqueur de fin se différencie du marqueur de début par le signe /. Exemple: <html>…</html>  Les balises qui n'ont pas de portée, ou orphelines, doivent être fermées. Notez le signe / à la fin de la balise. Exemple: < meta charset="utf-8" />  Les marqueurs peuvent indifféremment être écrits en majuscules ou en minuscules. On favorise les minuscules pour une compatibilité avec le XHTML (eXtensible HyperText Markup Language). 14 Attributs Certaines balises ont besoin d’être paramétrées. Par exemple, la balise meta: Exemple: < meta charset="utf-8" /> meta est le nom de la balise. charset est un attribut. Un attribut doit avoir une valeur, que l’on affecte toujours avec ="valeur" ; 1 5 Insérer un commentaire Un commentaire en HTML est un texte qui n'est pas affiché dans la page Web. C'est un mémo.  16 Titres et sous titres  Les balises <h1> à <h6> permettent de définir les titres dans un document html.  h1 étant le premier niveau.  Bien comprendre qu’il peut y avoir plus d’un h1 dans un document, 1 à 6 représentent l’importance du titre.  Exemple: titres.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"\> <title> Les niveaux de titres </title> </head> </body> <h1> Titre1 </h1> <h2> Titre2 </h2> <h3> Titre3 </h3> <h4> Titre4 </h4> <h5> Titre5 </h5> <h6> Titre6 </h6> </body> </html> 17 Titres et sous titres (2) 18 Paragraphe de texte: élément p  La balise <p> permet de définir un paragraphe.  On n’écrit jamais de texte en HTML sans l’encadrer d’une balise.  Elle provoque un saut de ligne et le passage à la ligne suivante. Exemple: paragraphe.html … <body> <h1>Le langage Java</h1> <p>Selon Wikipédia</p> <p> Le langage Java est un langage de programmation informatique orienté objet créé par James Gosling et Patrick Naughton, employés de Sun Microsystems. </p> </body> </html> 19 Paragraphe de texte: élément p (2) 20 Élément de saut de ligne br  La balise <br> force le passage à la ligne (équivalent d’un retour chariot) sans pour autant changer d’élément (ou de bloc).  Pour être compatible XHTML, l’élément vide br doit être codé <br />.  <br /> doit obligatoirement être à l'intérieur d'un paragraphe ou d’un titre. Exemple: br.html … <body> <h1>Voici un titre<br /> et la suite du titre</h1> <p>voici le début du premier paragraphe<br /> et la suite du premier paragraphe. </p> <p> voici un deuxième paragraphe </p> </body> … Attention! Ne choisissez pas votre balise de titre en fonction de la taille du texte, mais plutôt de son niveau hiérarchique.  La taille du texte peut être changée avec le CSS. 21 Élément de saut de ligne br (2) 22 Les listes Il existe 3 types de listes en HTML: Les listes numérotées : <ol>… <ol/> Les listes non numérotées (à puces) : <ul>… <ul/> Les listes de définition: <dl>… <dl/> 23 Les listes numérotées (<ol> pour ordered list) 24 • <ol></ol> délimite toute la liste. • <li></li> délimite un élément de la liste •Exemple : liste-numerotee.html Les listes numérotées (<ol> pour ordered list) (2) 25 Les listes non numérotées (<ul> pour unordered list) 26 • On les appelle également les listes à puces. • <ul></ul> délimite toute la liste. • <li></li> délimite un élément de la liste Exemple : liste-puces.html Les listes non numérotées: ul (<ul> pour unordered list) (2) 27 Les listes de définition (<dl> pour definition list) Le contenu d’une liste de définition est délimité par <dl> dt (definition term) pour délimiter un terme dd (definition description) pour délimiter la définition du terme Exemple: liste-definition.html 28 29 Les listes de définition (<dl> pour definition list) (2) Les liens hypertextes: élément <a> La balise utilisée pour créer un lien est <a> pour anchor balise d'ancrage, le lien est "ancré" vers un autre objet Les liens ou les hyperliens nous permettent d’effectuer un lien entre une partie quelconque de la page et une ressource Web pouvant se trouver n’importe où: sur la même page, sur une page différente du même site, sur une page d’un autre site, vers un fichier ou une image situés à un emplacement quelconque. 30 Lien vers un autre site web 31 • Ce lien est absolu, car on indique l'adresse complète. • Ce lien mène à la page d’accueil du site dont l’URL est http://www.cmontmorency.qc.ca • Exemple: premierlien.html Liens vers une page web locale (du même site) 32 Ces liens sont relatifs, ils dépendent de l’emplacement de la page courante. Exemple: dossier liens Lien vers une adresse de courriel <p> Pour contacter le <a href="mailto:slabranche@crosemont.qc.ca">Webmestre</a> </p> Remarque: Il n'y a pas d'espace entre "mailto:" et l'adresse de messagerie. Exemple: Exemple: dossier liens, fichier liens.html 33 Lien vers une autre section du document Il suffit d'attribuer à l'élément vers lequel on veut pouvoir pointer un identifiant avec l'attribut HTML id, et d'y associer un lien débutant par le caractère dièse # suivi du nom uploads/s3/ 2-html-partie-1 1 .pdf