0
HTML5Introduction dans la Programmation Web
Plan du course HTML 5 Structure d’un document Les principales marquages du HTML     Titres     Paragraphes     Links...
HTML HTML – HyperText Markup Language Langage de marquages – utilise des balises pour decrire des  pages web La version...
Qu’est que c’est un tag html Mots clef entre “<“ et “>” Il ya habituellement une balise de début et une balise de fin e...
Des lignes directrices pour les tags Document a des:   Marquages / tags     Vides <br/>     Qui contient du texte ou d...
Structure d’un document La structure logique d’un document   Le titre du document   Les titres des sections   Le conte...
La structure d’un document HTML5<!DOCTYPE html><html>  <head>        <title>le titre du document</title>  </head>  <body> ...
<!DOCTYPE html> Un DOCTYPE est un préambule nécessaire. DOCTYPE sont nécessaires pour des raisons historiques.  Quand i...
<html> La racine du document Contient un élément <head> (qui contient des  métadonnées) Contient un élément <body> (qui...
La section « head » Contient information sur le document <title> - le titre du document <link> - le lien vers un resour...
La section « body » Contient les tags qui sont affiches dans le navigateur La section « body » doit contenir SEULEMENT d...
<section> Lélément section représente une section générique  dun document ou une application. Une section, dans ce  conte...
Example no. 1<!DOCTYPE html><html><head><title>The first example</title></head><body ><section> About the course </section...
Headings Les titres des sections H1…H6 Utilises par des moteurs de recherche pour comprendre  la structure des document...
Example no. 2<!DOCTYPE html><html><head><title>The second example</title> </head><body ><section><h2>About the course</h2>...
<header> Lélément <header> représente un  groupe daides dinitiation ou de navigation. Un élément <header> peut contenir ...
<footer> Lélément footer représente un footer de son ancêtre le plus  proche de lélément racine. contient des informatio...
Example no. 3
Contenu et formatage <p>paragraphe</p> <br/> - ligne nouveau <em> - texte souligne <strong> - strong text <small> - s...
<nav> Lélément nav représente une section dune page avec des  liens de navigation. Liens sont vers   Des pages du meme ...
Listes Listes ordonnées <ol> Listes a puces– <ul> Eléments du chaque liste - <li> Exemple:   <ul>     <li>rouge</li>...
Liens <a href=“url absolue ou relative” target=“”>texte ou  image</a> « target » représente ou le lien doit être ouvert ...
Absolute vs urls relatifs Url absolue: http://www.google.com ./images/1.jpg Url relative - se réfère à la 1.jpg fichier ...
Example no. 4
<figure> Lélément figure représente une partie du contenu,  éventuellement avec une légende, qui est autonome et est  gén...
Images <img src=“url absolue ou relative” alt=“texte alternative  texte pour le cas ou l’image ne peut pas être affichée ...
<video> A video element is used for playing videos or movies, and audio  files with captions. some attributes:    src =...
Example no. 5
Tableaux Les tableaux doivent être utilise seulement pour présenter  d’information tabulaire Ils ne doivent pas être uti...
Formulaires (form) Nécessaire pour collecter et envoyer data vers le serveur <form action=“script du serveur qui va util...
<label> The label represents a caption in a user interface. can be associated with a specific form control, known as the...
Form Inputs Text input <input type=“text” name=“” /> Checkbox <input type=“checkbox” name=“” value=“”/> Radio <input ty...
Conclusions Dans ce course – seulement les tags les plus importantes;  vous allez découvrir plus dans votre travail HTML...
Upcoming SlideShare
Loading in...5
×

HTML 5 - intro - en francais

12,604

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,604
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML 5 - intro - en francais"

  1. 1. HTML5Introduction dans la Programmation Web
  2. 2. Plan du course HTML 5 Structure d’un document Les principales marquages du HTML  Titres  Paragraphes  Links  Tableaux  Formulaires  Images
  3. 3. HTML HTML – HyperText Markup Language Langage de marquages – utilise des balises pour decrire des pages web La version du HTML utilise maintenant – 4.01 - http://www.w3.org/TR/html401/ - depuis 1999!! HTML 5 – travail en progrès - premier version 2008 idées clés  moins besoin de plugins externes (comme Flash)  Plus de etiquetes  lindépendance de périphérique
  4. 4. Qu’est que c’est un tag html Mots clef entre “<“ et “>” Il ya habituellement une balise de début et une balise de fin exemple:  <tag>…</tag> Balises vides  <tag /> Attributs  Un attribut est une pair nom=“valeur”  Il est dans une balise  <tag attribut=“valeur”> … </tag>
  5. 5. Des lignes directrices pour les tags Document a des:  Marquages / tags  Vides <br/>  Qui contient du texte ou d’autres marquages <h1>texte</h1>  Marquages contient des attributs <img src=“http://...”/>  Marquages doivent être écrites en bas de casse  Les tags doivent être correctement emboîtés  Les tags doivent être toujours ferme  texte
  6. 6. Structure d’un document La structure logique d’un document  Le titre du document  Les titres des sections  Le contenu  Les paragraphes  L’information qui est dans des tableaux  Les listes des items (ordonnées ou non ordonnées) Petit exemple du façon dans lequel nous pouvons structurer un document en utilisant Word
  7. 7. La structure d’un document HTML5<!DOCTYPE html><html> <head> <title>le titre du document</title> </head> <body> <!-- le contenu du document --> </body></html>
  8. 8. <!DOCTYPE html> Un DOCTYPE est un préambule nécessaire. DOCTYPE sont nécessaires pour des raisons historiques.  Quand il est omis, les navigateurs ont tendance à utiliser un mode de rendu différent qui est incompatible avec certaines spécifications.
  9. 9. <html> La racine du document Contient un élément <head> (qui contient des métadonnées) Contient un élément <body> (qui contient le contenu) Peut avoir des attributs globaux comme "lang" <html lang="fr"> qui précise le contenu du document est en francais
  10. 10. La section « head » Contient information sur le document <title> - le titre du document <link> - le lien vers un resource utilise par la page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />) <meta> - information supplémentaire sur la page – mots clef, type du contenu, description – utilise par des navigateurs et robots <script> - des références aux fichiers javascript
  11. 11. La section « body » Contient les tags qui sont affiches dans le navigateur La section « body » doit contenir SEULEMENT du contenu L’information du style doit être mis en documents extérieurs Nous allons voir les éléments du section « body » et nous allons le tester par construire une page web simple
  12. 12. <section> Lélément section représente une section générique dun document ou une application. Une section, dans ce contexte, est un regroupement thématique de contenu, généralement avec un titre. Des exemples de sections:  chapitres,  les sections numérotées dune thèse.
  13. 13. Example no. 1<!DOCTYPE html><html><head><title>The first example</title></head><body ><section> About the course </section><section> About the lab </section> </body></html>
  14. 14. Headings Les titres des sections H1…H6 Utilises par des moteurs de recherche pour comprendre la structure des documents Ne doit pas être utilise pour des raisons de style (pour faire le texte plus gros et plus haut) <h1>titre du document</h1>  <h2> titre de la première section</h2>  <h3> titre de la première sous-section</h3>
  15. 15. Example no. 2<!DOCTYPE html><html><head><title>The second example</title> </head><body ><section><h2>About the course</h2><p>Some information about the course</p></section></body></html>
  16. 16. <header> Lélément <header> représente un groupe daides dinitiation ou de navigation. Un élément <header> peut contenir un titre (un élément h1-h6 ou un élément HGroup), Lélément en-tête peut également être utilisé pour envelopper le tableau dune section de contenu, un formulaire de recherche, ou les logos pertinents.
  17. 17. <footer> Lélément footer représente un footer de son ancêtre le plus proche de lélément racine. contient des informations sur sa section, comme qui la écrit, des liens vers des documents connexes, les données le droit dauteur, et autres. Lorsque lélément footer contient des sections entières, ils représentent annexes, index,  accords de licence, et dautres contenus tels.
  18. 18. Example no. 3
  19. 19. Contenu et formatage <p>paragraphe</p> <br/> - ligne nouveau <em> - texte souligne <strong> - strong text <small> - small text <sub> <sup>
  20. 20. <nav> Lélément nav représente une section dune page avec des liens de navigation. Liens sont vers  Des pages du meme site  Des pages des autres sites  Des points dans la meme page
  21. 21. Listes Listes ordonnées <ol> Listes a puces– <ul> Eléments du chaque liste - <li> Exemple:  <ul>  <li>rouge</li>  <li>vert</li>  </ul>
  22. 22. Liens <a href=“url absolue ou relative” target=“”>texte ou image</a> « target » représente ou le lien doit être ouvert  S’il manque – la même page  “_blank” – nouvelle fenêtre <a name=“le nom d’une ancre dans le même document> texte ou image </a> <a href=“#nom d’une ancre”>text or image</a>
  23. 23. Absolute vs urls relatifs Url absolue: http://www.google.com ./images/1.jpg Url relative - se réfère à la 1.jpg fichier qui se trouve dans les dossier qui s’appelle images et qui est fils du dossier du base / en cours Si la page comporte un élément de base - lURL relative commence à partir de ladresse de base Si la page na pas un élément de base lURL relative commence à partir de lURL de la page en cours
  24. 24. Example no. 4
  25. 25. <figure> Lélément figure représente une partie du contenu, éventuellement avec une légende, qui est autonome et est généralement référencé comme une seule unité à partir du flux principal du document. Habituellement contient des images, des vidéos Peut contenir du texte / code / <pre> <figcaption> - Lélément figcaption représente une légende pour le reste du contenu de lélément parent
  26. 26. Images <img src=“url absolue ou relative” alt=“texte alternative texte pour le cas ou l’image ne peut pas être affichée ou compris”/> L’attribut “alt” est obligatoire XHTML! l’attribut « src » peut être un url complet: http://host/path_to_file ou un chemin relative a la page curent.
  27. 27. <video> A video element is used for playing videos or movies, and audio files with captions. some attributes:  src = the address of the file  poster = the address of an image to show if the video is not available  autoplay= boolean; if present the video will be played as soon as it is available  controls = boolean; if present the controls will be displayed  muted=boolean; if present the sound will be muted  width, height = the dimensions of the video frame
  28. 28. Example no. 5
  29. 29. Tableaux Les tableaux doivent être utilise seulement pour présenter d’information tabulaire Ils ne doivent pas être utilise pour faire le design de la page <table>  <tr> <!--table row) -->  <td > table cell</td>  </tr> </table>
  30. 30. Formulaires (form) Nécessaire pour collecter et envoyer data vers le serveur <form action=“script du serveur qui va utiliser le data” method=“la methode HTTP utilise – GET ou POST”> Un formulaire contient plusieurs types de « input »
  31. 31. <label> The label represents a caption in a user interface. can be associated with a specific form control, known as the labeled control  Can use the for attribute for specifying the labeled control  Can put the form control inside the label element itself.
  32. 32. Form Inputs Text input <input type=“text” name=“” /> Checkbox <input type=“checkbox” name=“” value=“”/> Radio <input type=“radio” name=“” value=“”/> Text area <textarea name=“”></textarea> Submit <input type=“submit” value=“name on the button”/ >
  33. 33. Conclusions Dans ce course – seulement les tags les plus importantes; vous allez découvrir plus dans votre travail HTML doit être utilise pour présenter le contenu d’une page web
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×