HTML Enseignements dinformatique 1 Plan Master 1 LEA

  • Slides: 26
Download presentation
HTML Enseignements d’informatique 1

HTML Enseignements d’informatique 1

Plan • • • Master 1 LEA Semestre 1 Introduction Premier fichier HTML Les

Plan • • • Master 1 LEA Semestre 1 Introduction Premier fichier HTML Les balises Listes Font Caractères spéciaux Liens hypertextes (hyperliens) Insertion d’image Adresse absolue / relative Les tableaux Enseignements d’informatique 2

Introduction Master 1 LEA Semestre 1 • Page Web • Affichée dans un navigateur

Introduction Master 1 LEA Semestre 1 • Page Web • Affichée dans un navigateur (Firefox, Internet Explorer, Safari, …) • Langage du fichier principal : HTML • Hyper Text Markup Language • Existe des éditeurs spécifiques comme Dreamweaver, Mozilla Composer ou Bluefish Enseignements d’informatique 3

Introduction : Un fichier HTML Master 1 LEA Semestre 1 • Format texte (vous

Introduction : Un fichier HTML Master 1 LEA Semestre 1 • Format texte (vous pouvez par exemple utiliser notepad++ pour le créer) • L’extension doit être. htm ou. html • Le nom ne doit contenir ni espaces, ni caractères accentués, ni caractères spéciaux ( / ? : * " > < |) • Les majuscules comptent (Ma. Page. html est différente de mapage. html) Enseignements d’informatique 4

Introduction : Le langage HTML • • Master 1 LEA Semestre 1 Texte balisé

Introduction : Le langage HTML • • Master 1 LEA Semestre 1 Texte balisé Balises pour mettre en forme le texte Interprétées par le navigateur Exemple 1 : définition d’un paragraphe <p>Le texte de votre paragraphe</p> • Exemple 2 : insertion d’une image <img src="votre. Image"/> Enseignements d’informatique 5

Premier fichier HTML Master 1 LEA Semestre 1 • Exemple d’un fichier bonjour. html

Premier fichier HTML Master 1 LEA Semestre 1 • Exemple d’un fichier bonjour. html • Dans un éditeur de texte : <html> <head> <title>Bonjour</title> </head> <body bgcolor="#E 6 E 6 FA"> <!–- Mon premier fichier --> Bonjour le monde ! </body> </html> Enseignements d’informatique 6

Premier fichier HTML Master 1 LEA Semestre 1 • Dans votre navigateur : Enseignements

Premier fichier HTML Master 1 LEA Semestre 1 • Dans votre navigateur : Enseignements d’informatique 7

Les balises : exemple précédent Master 1 LEA Semestre 1 • Balises imbriquées :

Les balises : exemple précédent Master 1 LEA Semestre 1 • Balises imbriquées : – <html> L’ensemble du code </html> – <head> L’en-tête </head> – <title> Le titre de la page </title> – <body bgcolor="couleur. Du. Fond"> Le corps de la page </body> – <!–- Les commentaires qui ne s’afficheront pas à l’écran --> Enseignements d’informatique 8

Les balises : principe Master 1 LEA Semestre 1 <nom. De. La. Balise attribut

Les balises : principe Master 1 LEA Semestre 1 <nom. De. La. Balise attribut 1="valeur 1" att 2="val 2". . . > Le texte sur lequel la forme est appliquée </nom. De. La. Balise > Enseignements d’informatique 9

Les balises : exemples • • Master 1 LEA Semestre 1 <p> Texte du

Les balises : exemples • • Master 1 LEA Semestre 1 <p> Texte du paragraphe </p> <h 1> Titre de niveau 1 </h 1> <h 2> Titre de niveau 2 </h 2> <h 3> Titre de niveau 3 </h 3> • <em> texte mis en valeur </em> (souvent mis en italique, selon navigateur) • <strong> texte sur lequel on insiste </strong> (souvent mis en gras, selon navigateur) Enseignements d’informatique 10

Les balises : exemples Master 1 LEA Semestre 1 • <q> citation courte </q>

Les balises : exemples Master 1 LEA Semestre 1 • <q> citation courte </q> • <blockquote> citation longue </blockquote> • <cite> source de la citation </cite> • (nouvelle ligne) Enseignements d’informatique 11

Listes non ordonnées Master 1 LEA Semestre 1 <ul> <li> item 1 </li> <li>

Listes non ordonnées Master 1 LEA Semestre 1 <ul> <li> item 1 </li> <li> item 2 </li> … </ul> Enseignements d’informatique 12

Listes non ordonnées Master 1 LEA Semestre 1 Principales œuvres de Flaubert <ul> <li>

Listes non ordonnées Master 1 LEA Semestre 1 Principales œuvres de Flaubert <ul> <li> Madame Bovary </li> <li> Salammbô </li> <li> L’éducation sentimentale </li> <li> Trois contes </li> <li> Bouvard et Pécuchet </li> </ul> Enseignements d’informatique 13

Listes non ordonnées Enseignements d’informatique Master 1 LEA Semestre 1 14

Listes non ordonnées Enseignements d’informatique Master 1 LEA Semestre 1 14

Listes ordonnées Master 1 LEA Semestre 1 Principales œuvres de Flaubert <ol> <li> Madame

Listes ordonnées Master 1 LEA Semestre 1 Principales œuvres de Flaubert <ol> <li> Madame Bovary </li> <li> Salammbô </li> <li> L’éducation sentimentale </li> <li> Trois contes </li> <li> Bouvard et Pécuchet </li> </ol> Enseignements d’informatique 15

Listes ordonnées Enseignements d’informatique Master 1 LEA Semestre 1 16

Listes ordonnées Enseignements d’informatique Master 1 LEA Semestre 1 16

Caractères spéciaux Master 1 LEA Semestre 1 • Caractères codés par un ensemble de

Caractères spéciaux Master 1 LEA Semestre 1 • Caractères codés par un ensemble de 0/1 • HTML : caractères ASCII non accentués • Codes pour les caractères spéciaux : – é : é – à : à – ô : ô – © : © –. . . Enseignements d’informatique 17

Caractères spéciaux Master 1 LEA Semestre 1 • Pour ne pas taper les codes

Caractères spéciaux Master 1 LEA Semestre 1 • Pour ne pas taper les codes • Ajouter dans la partie head une balise meta permettant d’indiquer les caractères mis « en clair » dans le texte • <meta http-equiv="Content-Type" content="text/html; charset=UTF -8" /> • Attention, le charset de meta doit correspondre à l’encodage du fichier Enseignements d’informatique 18

Liens hypertextes (hyperliens) Master 1 LEA Semestre 1 • <a href="Ma. Page. html" target="_blank">

Liens hypertextes (hyperliens) Master 1 LEA Semestre 1 • <a href="Ma. Page. html" target="_blank"> Texte cliquable </a> • L’attribut href = page cible du lien • L’attribut target = où le lien doit être ouvert : – Par défaut à la place de la page courante – _blank dans un nouvel onglet ou une nouvelle fenêtre selon le navigateur Enseignements d’informatique 19

Liens hypertextes (hyperliens) Master 1 LEA Semestre 1 Site de l’ <a href="http: //www.

Liens hypertextes (hyperliens) Master 1 LEA Semestre 1 Site de l’ <a href="http: //www. univ-montp 3. fr" > Université Montpellier 3 </a> Enseignements d’informatique 20

Insertion d’image Master 1 LEA Semestre 1 • <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="http: //www. univmontp 3. fr/miap/ens/Logoupvc.

Insertion d’image Master 1 LEA Semestre 1 • <img src="http: //www. univmontp 3. fr/miap/ens/Logoupvc. gif" /> • L’attribut src = page cible du lien Enseignements d’informatique 21

Insertion d’image avec hyperlien Master 1 LEA Semestre 1 Vous pouvez cliquer sur ce

Insertion d’image avec hyperlien Master 1 LEA Semestre 1 Vous pouvez cliquer sur ce logo pour aller sur le site de l’Université : <a href="http: //www. univ-montp 3. fr" > <img src="http: //www. univmontp 3. fr/miap/ens/Logoupvc. gif" /> </a> Enseignements d’informatique 22

Adresse absolue / relative Master 1 LEA Semestre 1 • Par exemple pour l’attribut

Adresse absolue / relative Master 1 LEA Semestre 1 • Par exemple pour l’attribut href de la balise a ou pour l’attribut src de la balise img • Absolue : adresse complète de la forme http: // … – Ex. : http: //www. univ-montp 3. fr • Relative : à partir de l’emplacement de la page courante Enseignements d’informatique 23

Adresse absolue / relative Master 1 LEA Semestre 1 • Exemples d’adresses relatives dans

Adresse absolue / relative Master 1 LEA Semestre 1 • Exemples d’adresses relatives dans page. html : <a href=". . /page 1. html" > Page 1 </a> <a href="page 2. html" > Page 2 </a> <a href="B/page 3. html" > Page 3 </a> Enseignements d’informatique 24

Les tableaux Master 1 LEA Semestre 1 • <table> … </table> : début et

Les tableaux Master 1 LEA Semestre 1 • <table> … </table> : début et fin du tableau • Attribut border de table : épaisseur des bords • <tr> … </tr> : ligne • <th> … </th> : case titre d’une ligne • <td> … <td> : case d’une ligne Enseignements d’informatique 25

Les tableaux Master 1 LEA Semestre 1 <table border="1"> <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr>

Les tableaux Master 1 LEA Semestre 1 <table border="1"> <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> <td>Carmen</td> <td>33 ans</td> <td>Espagne</td> </tr> <td>Michelle</td> <td>26 ans</td> <td>États-Unis</td> </tr> </table> Enseignements d’informatique 26