La toile mondiale. Réseau TCP/IP. Qu'est-ce qu'un réseau? Protocole TCP/IP. WWW (World Wide Web) HTTP = HyperText Transfer Protocol.

Transcription

1 HTML Miguel Tomasena Références : La toile mondiale html Doctor WWW (World Wide Web) Réseau Qu'est-ce qu'un réseau? Un réseau est un ensemble d'ordinateurs et périphériques connectés les uns avec les autres. Il permet de faire circuler des données selon des règles bien définies. WWW = HTTP + URL + HTML HTTP = HyperText Transfer Protocol. URL = Uniform Ressource Locator HTML = HyperText Markup Language HTTP Communication entre navigateur et serveur : Le navigateur effectue une requête HTTP Le serveur traite la requête puis envoie une réponse HTTP TCP/IP Protocole TCP/IP. TCP (Transmission Control Protocole), assure que les paquets de données arrivent à destination dans le bon ordre, IP (Internet Protocole), assure de l'adressage. Adresse IP Ce sont ces adresses que connaissent les ordinateurs pour communiquer entre eux. Numéros de bits, composé de nombres entre à ( fois bits). Par exemple :...

2 TCP/IP DNS - Domain Name Service Correspondance : adresses IP noms de domaine "fr.wikipedia.org" correspond à "..." Les noms de domaines sont construits de façon analogue à ceux des adresses IP : des hiérarchies séparées par points. Le niveau le plus élevé se trouve à la fin d'un nom de domaine. Il s'agit d'abréviations qui désignent un pays ou un type. Exemples : "fr", "de", "com", "net". Un domaine peut avoir des sous-domaines. Exemples : "java.page.net", "javascript.page.net". Uniform Resource Locator L'URL répond à questions: où? quoi? Adresse Universelle comment? Où? Dans le serveur www du dre/index.html domaine : sebsauvage.net. Comment? Avec le protocole http dans le répertoire /comprendre/ Quoi? On va chercher le fichier index.html. Quelques dates SGML+DTD (recom. ISO en ) HTML (Tim Berners au CERN) Web WC Netscape JavaScript Internet Explorer. CSS XML Contenu et Forme XHTML HTML pour Firefox le contenu CSS pour la forme Google Chrome - HTML Tendance : séparer le contenu de forme. Deux langages : Séparer le contenu (HTML) la forme (CSS) permet : une meilleur organisation du contenu, facilite la mise à jour généralise la diffusion vers divers périphériques Progression du nombre de serveurs Nombre de serveur entre et

3 HTML Qu'est ce que le HTML? Langage de balisage, sous-ensemble de SGML. Ensemble d'éléments (balises) dont le nom est défini. Balises structurés sous forme d'arbre. Langage de description d'un contenu. Ce n'est pas un langage de programmation. Caractéristiques de HTML : Nouvelle balises «structurantes» Travaille avec CSS Vidéo et audio Graphiques D et D Contrôle de formulaires Stockage locale de valeurs Le balisage : HTML Permet de délimiter clairement des parties de texte pour qu'elles puissent être reconnues. On peut associer à chaque balise des informations additionnels sous la forme d'attributs. Premier langage de balisage : SGML Standard Generalised Markup Language en HTML HTML Le balisage en détail : Le balisage en détail : Les balises ont un nom. Elles sont constituées d'une balise ouvrante et d'une balise fermante. Les balises sont délimitées par < et > Exemple de balise ouvrante : <body> et une balise fermante : Les balises encadrent soit d'autres balises appelés fils, soit du texte. <phrase>cette phrase <verbe>est</verbe> un exemple.</phrase> Les balises peuvent contenir des attributs composés d'un nom, du signe = et d'une valeur entre guillemets. <phrase> Cette phrase <verbe personne="" nombre="singulier">est</verbe> un exemple. </phrase> Pour représenter certains caractères spéciaux, on utilise des entités. Une entité commence par & et se termine par ; Par exemple, < à la place de < Exemple document HTML : HTML Source Affichage : <html> <head> <title>titre du document</title> </head> <body> <h>titre du document</h> <p>du texte <img src="photo.jpg" alt="image" /> <ul> <li>un <em>item</em> de liste</li> <li>un autre item de liste</li> <li>un troisième item de liste</li> </ul> </html> Exemple document HTML : Source HTML <html> <head> <title>titre du document</title> <meta charset="utf-" /> </head> <body> <h>titre du document</h> <p>du texte <img src="photo.jpg" alt="image" /> <ul> <li>un <em>item</em> de liste</li> <li>un autre item de liste</li> <li>un troisième item de liste</li> </ul> </html> Vue arborescence :

4 Règles d écriture d un document bien formé (conforme à XML) : On cherche à écrire des documents HTML :. Bien Formés et. Valides Les balises fermantes sont obligatoires. Les balises uniques, ou mono balises, se terminent par /> Les valeurs d'attributs sont toujours encadrées par des guillemets. Les balises et les attributs sont en minuscules L'imbrication doit être "bien faite". Exemple d'erreur : <section> cette division contient un titre <h> Important! </section> </h> Intérêt d avoir un document Bien Formé : Simplification de l'analyse. XHTML : combinaison de HTML et XML Impose une rigueur dans l'écriture du document. Suivi de la syntaxe de XML Exemple d'un document bien formé. <!DOCTYPE html> <html> <head> <meta charset="utf-" /> <title>titre de ma page</title> </head> <body class="principale"> <p>paragraphe <h>titre</h> </html> Est-il valide? Document valide : Exemple de Validateur ( : Les balises et leur imbrication doivent être conformes à la grammaire sous-jacente de HTML. Le validateur du WC ( permet de vérifier si le code est bien formé et valide.

5 Editeurs visuels : Dreamweaver (payant) Environnement de travail Nvu ("concurrent" gratuit de Dreamweaver) Amaya (gratuit) Editeurs classiques : Notepad++ (windows) Gedit (linux) TextWrangler (MacOS) génération automatique de code Document html minimal : Structure d'un document HTML début document racine Plus précisément XHTML head html body meta title Dans le corps il y a deux types de balises : Bloc et En-Ligne. Bloc : Deux grandes familles de balises parties entières du document (notion de boîte). peuvent contenir : du texte, des balises En-Ligne et des balises Bloc. les balises Bloc ont une structure avec une dimension (hauteur, largeur), des marges internes (padding) et externes (margin), et surtout une position. elles sont précédée et suivie d'un saut de ligne. En-Ligne (au fil du texte) mettent en valeur du texte (span, a). Elles peuvent contenir du texte et d'autres balises En-Ligne, mais pas de balises de type Bloc. paragraphe Attributs génériques (peuvent être utilisés dans toutes les balises) : id class style title La balise <body> contient la partie visible du document HTML. Paragraphe : la balise <p> délimite un paragraphe Exemple, fragment de la page : <body>  <p>premier paragraphe <p>deuxième paragraphe Exemple paragraphe Saut de ligne Texte A l'affichage? <body> <p>premier paragraphe paragraphe.html Le texte (#PCDATA ) est tapé en ligne. La fin de ligne est gérée par le navigateur. Les multiples espaces, sauts de ligne et les tabulations ne sont pas interprétés (affichés) textuellement. Saut de ligne : <br/> Exemple <body> <p>premier <br/>paragraphe paragraphe.html Entités caractères permettent le codage de caractères spéciaux : < permet d'afficher un "<" > idem pour le signe supérieur ">" & permet de coder le et commercial "& " " sert aux guillemets insère un blanc insécable

6 Les titres Titres de hiérarchie différente : <h>, <h>, <h> jusqu'à <h>. Les titres <h> signifié "titre très important". Le choix du niveau du titre doit être fait en fonction du sens pas de la taille. Attention : ne confondez pas avec la balise <title> avec <h> titres.html Titre et Paragraphe Mise en valeur du texte Exemple fragment du code : Marquer et faire ressortir du texte. Balises En-ligne : <em> (emphasis) et <strong> marquent l'importance d'une partie de texte. <q> (quote) marque du texte entre guillemets. <cite> marque une citation. <abbr> marque une abréviation ou un acronyme. <dfn> une définition. Exemple paragraphe Exemple fragment du code : Mise en valeur du texte em.html Balises En-ligne : Mise en valeur du texte <sub> (subscript) et <sup> (superscript) permettent d'écrire en indice et en exposant. <code> permet d'introduire du "code". <span> est un élément générique pour marquer du texte. Nous pouvons lui attribuer une mise en page spécifique à travers les styles CSS. <hr/> (mono-balise) trace une ligne horizontale entre deux bloc.

7 Mise en valeur du texte Exemple fragment du code : enligne.html Bloc - Division de page La balise générique <div> sert à regrouper des objets afin de leur attribuer une mise en forme commune à travers les styles CSS. Balise de type Bloc précédée et suivie d'un saut de ligne. ligne horizontale <div> peut contenir toute sorte de balises (contrairement à <p>). Se prête bien à la création de la structure d'une page en grands blocs. Dans html div perd d'intérêt au profit de header, footer, nav, section. Bloc - Bloc de citation <blockquote> sert à insérer une citation en retrait d'un paragraphe. Balise de type Bloc précédée et suivie d'un saut de ligne. Exemple fragment du code : <div> <h>grande maxime</h> <p>comme dirait un grand philosophe du XHTML : <blockquote>  <p>to be xhtml or not to be xhtml? </blockquote> </div> Bloc - Texte préformaté <pre> affiche le texte tel qu'il a été tapé, les espaces, tabulations et retours chariot sont respectés avec une police à pas fixe. Balise de type Bloc précédée et suivie d'un saut de ligne. et hr (horizontal line) permettent de couper le texte à l'horizontale. Exemple fragment du code : <h>texte préformaté</h> <pre> /== ====\ / \ /============\ _ _ </pre> pre.html blockquote.html <hr /> mono balise de type Bloc affiche une ligne horizontal. Récapitulatif balises Balises Bloc : header, footer, nav, section, h, h, h, h, h, h, p, div, blockquote, pre, hr. Balises En-Ligne : em, strong, q, cite, abbr, dfn, acronym, sub, sup, code, br, span. Balises génériques : div et span. Liens hypertexte La puissance de HTML vient du fait qu'il est possible de donner des liens vers d'autres sections du texte, vers d'autres pages HTML, ou encore vers d'autres services. Les liens sont notés avec la balise a. Exemple d'un lien : Avant de prendre la route cliquez <a href="... "> ici </a> Les liens hypertexte sont de trois types : Liens relatifs Liens absolus Ancres

8 Liens relatifs Le chemin pour aller vers le document relié est calculé par rapport au document lui-même. Exemple de lien vers une autre page située dans le même répertoire : <p>cliquer <a href="exemple.html">ici</a> pour voir l'exemple. Exemple de lien vers une page dans un sous-répertoire : <p>cet <a href="exemples/ex.html">exemple</a> est le premier. Les liens relatifs Exemples de liens relatifs : "./" répertoire actuel "couleurs.html" identique à "./couleurs.html" "images/graphique.gif" identique à "./images/graphique.gif" "../" répertoire père du répertoire actuel L'avantage des liens relatifs : ils sont plus courts et ils facilitent le déplacement d'un groupe de documents vers un autre serveur. Les liens restent valides. lien.html "../../../../ailleurs/fichier.html" répertoire ancêtre. Liens absolus On utilise des URL (liens absolus) pour indiquer la localisation des fichiers dans d'autres serveurs. Un URL inclut le où? Le quoi? Et comment? de la ressource à accéder. Exemples : <p>aller sur le <a href=" <p> <a href=" Web Building Tutorials</a> Liens vers des sections Les ancres servent de pointeur sur une partie précise d'un document HTML. Le nom de l'ancre est indiqué par l'attribut id (obligatoire). <h id="conclusion">pour conclure</h> Les liens vers les ancres sont préfixés par le caractère #. <p>aller directement à la <a href="#conclusion">conclusion</a> lien.html Attributs de <a> Quelques autres attributs de la balise <a> : accesskey tabindex type title Exemples : lien.html <a href=" accesskey="a" tabindex="" title="référence XHTML. (alt+a)" > Référence XHTML. </a> <a href="lien.pdf" type="application/pdf" accesskey="b" tabindex="" title="document pdf (alt+b)" > ici </a> Les images La plupart des navigateurs Web peuvent afficher des images de certains formats. Formats bitmap : JPEG (Joint Photographic Experts Group) GIF (Graphical Interchange Format) PNG (Portable Network Graphics) Formats vectoriels : SVG (Scalable Vector Graphics) PDF (Portable Document Format) FLA/SWF (Flash) Chaque image prend du temps à être traitée et ralentit considérablement l'affichage initial du document.

9 Les images Les images sont insérées avec la mono-balise en-ligne <img /> Attributs obligatoires : Le lien vers le fichier contenant l'image : src. Texte alternatif : alt. Attributs optionnels : height et width. <img src="photo.jpg" alt="belle image avion" width="" /> par défaut : pixels Les images, les sons, les animations On peut faire apparaître les images ou les animations dans une fenêtre différente lorsque l'utilisateur active un lien. Ceci correspond à une image externe et est utile si vous ne souhaitez pas ralentir le chargement du document initial avec des images importantes en ligne. Pour inclure un tel lien, il suffit d'ajouter un lien de ce type : <a href="photo.jpg"> une jolie image </a> Le placement de l'image : par défaut, l'image est insérée de sorte que la partie inférieure (bottom) de l'image soit à la même hauteur que texte. image.html On utilise la même syntaxe pour les liens sur des animations et des sons externes. La différence se fait uniquement sur l'extension du fichier lié. Les images hypertexte L'image peut être un lien hypertexte. Il suffit d'entourer l'image avec la balise <a href= Pour voir mon cv cliquez sur ma photo <a href="cv.html"> <img src="simile.png" alt="ma photo" /> </a> Définition d'une carte avec des zones réactives La balise <map></map> sert à définir des zones sensibles d'une image. <map name="macarte"> <area shape="rect" href="gauche.html" coords=",,," alt="gauche"/> <area shape="rect" href="droite.html" coords=",,," alt="droite" /> </map> <img src="smile.gif" usemap="#macarte" alt="carte'" /> imagea.html Attributs de area : alt : texte alternatif obligatoire shape : nature de la zone décrite ("rect", "circle", "poly") href : URL appelée lorsqu'on clique sur la zone coords : coordonnées de la zone décrite image.html Définition d'une carte avec des zones réactives Autre alternative avec un programme CGI. L'attribut ismap de la balise img, permet de repérer la position de la souris sur le graphique pour exécuter des actions selon le point du click. <a href=" <img src="smile.jpg" ismap="ismap" /> </a> appelle fourniss.php?x,y où x et y sont les coordonnées pointées. Attention : attribut obsolète. Image, balise object Autre alternative pour insérer une image. La balise <object> </object> sert à insérer un objet (image, animation, fichier audio, applet java...) image.html <object data="avions.bmp" type="image/bmp" width=""> <h>texte à afficher si pbs</h> On donne explicitement </object> le type du fichier à insérer Vous pouvez incorporer n'importe quel type de fichier (texte, vidéo, applet java, musique) si le navigateur peut l'afficher. object.html

10 Listes Balise de type Bloc précédée et suivie d'un saut de ligne. Listes Exemple de fragment de code : Les listes d éléments sont très facile à définir. Trois sont d'usage courant : listes.html <ul> </ul> : liste non numérotée (UNORDERED) <ol> </ol> : liste numérotée (ORDERED) <dl> </dl> : liste de définitions Les items eux-même sont entourés par <li> (list item) </li> Les listes peuvent être imbriquées les unes dans les autres. Balise : Les Tableaux <table> </table> Il faut utiliser <tr> </tr> pour chacune des rangées. Balise pour spécifier les cellules de chaque rangée: <td> </td> Exemple fragment de code : Les Tableaux notez l'attribut border Illustration des balises : tableau.html Tableaux Cellules d'entête est mis en valeur (la plupart du temps en gras et centré): <th> </th> Exemple Tableaux tableau.html Exemple tableau.html

11 Tableaux La balise <caption> </caption> sert à définit le titre d'un tableau. <h>tableau avec titre</h> <table border=""> <caption><strong>associations</strong></caption> <tr><th>france</th> <th>belgique</th> <th>suisse</th> </tr> <tr> <td>quatre-vingts</td> <td>octante</td> <td>huitante</td> </tr> <tr> <td>serpillière</td> <td>wassingue</td> <td>panosse</td> </tr> </table> tableau.html Tableaux - groupement lignes <thead> <tfoot> et <tbody> permettent de créer des groupes de lignes. Ces balises doivent être utilisées dans l'ordre thead -> tfoot -> tbody thead et tfoot ne peuvent être placés qu'une seule fois dans un tableau. tbody plusieurs fois si nécessaire. Tableaux - groupement lignes tableau.html Tableaux "Fusion" de cellules (<td> ou <th>) Cellule sur plusieurs colonnes : Attribut colspan Ex. <table border=""> <tr><td>c</td><td>c</td></tr> <tr><td colspan="">c</td></tr> </table> Cellule sur plusieurs lignes : Attribut rowspan Ex. <table border=""> <tr><td rowspan=""> L</td> <td>l</td> </tr> <tr> <td>l</td> </tr> </table> tableau.html Exemple tableau