HTML 5 - intro - en francais
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML 5 - intro - en francais

  • 12,115 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
12,115
On Slideshare
8,142
From Embeds
3,973
Number of Embeds
3

Actions

Shares
Downloads
60
Comments
0
Likes
0

Embeds 3,973

http://ipwfils.wordpress.com 3,970
http://www.google.ro 2
https://www.google.ro 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5Introduction dans la Programmation Web
  • 2. Plan du course HTML 5 Structure d’un document Les principales marquages du HTML  Titres  Paragraphes  Links  Tableaux  Formulaires  Images
  • 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. 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. 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. 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. 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. <!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. <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. 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. 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. <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. 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. 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. 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. <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. <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. Example no. 3
  • 19. Contenu et formatage <p>paragraphe</p> <br/> - ligne nouveau <em> - texte souligne <strong> - strong text <small> - small text <sub> <sup>
  • 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. 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. 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. 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. Example no. 4
  • 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. 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. <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. Example no. 5
  • 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. 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. <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. 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. 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