IPW 2eme course - HTML

2 496 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 496
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 234
Actions
Partages
0
Téléchargements
40
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

IPW 2eme course - HTML

  1. 1. Introduction dans la Programmation Web<br />(X)HTML<br />
  2. 2. Plan du course<br />XHTML et HTML <br />Structure d’un document<br />Les principales marquages du HTML<br />Titres<br />Paragraphes<br />Links<br />Tableaux<br />Formulaires<br />Images<br />
  3. 3. HTML<br />HTML – HyperText Markup Language<br />Langage de marquages – utilise des balises pour decrire des pages web<br />La version du HTML utilise maintenant – 4.01 - http://www.w3.org/TR/html401/ - depuis 1999!!<br />HTML 5 – travail en progrès<br />XHTML - http://www.w3.org/TR/xhtml1/ - mêmes marquages mais utilise des contraintes du XML<br />XML – extension markup language – langage générique pour structurer d’information dans des fichiers texte<br />
  4. 4. Qu’est que c’est un tag html<br />Mots clef entre “<“ et “>”<br />Il ya habituellement une balise de début et une balise de fin<br />exemple:<br /><tag>…</tag><br />Balises vides<br /><tag /><br />Attributs<br />Un attribut est une pair nom=“valeur” <br />Il est dans une balise<br /><tag attribut=“valeur”> … </tag><br />
  5. 5. Caractéristiques des tags<br />Les tags doivent être toujours ferme “/>”<br />Tags doivent être écrites en bas de casse<br />Les tags doivent être correctement emboîtés <br /><tag1><tag2></tag2></tag1><br /><tag1><tag2></tag1></tag2><br />
  6. 6. HTML and XHTML<br />Le navigateur fonctionnes sur « meilleur effort » quand il essaye a interpréter un fichier HTML<br />=> un des raisons les mêmes pages sont représentés dans un façon diffèrent sur navigateurs différents<br />Les navigateurs sont devenu grandes et plus lentes parce que ils doivent représenter tout sortes des documents<br />XHTML – une syntaxe plus stricte que HTML => plus facile a interpréter par les navigateurs<br />
  7. 7. Structure d’un document<br />La structure logique d’un document<br />Le titre du document<br />Les titres des sections<br />Le contenu<br />Les paragraphes<br />L’information qui est dans des tableaux<br />Les listes des items (ordonnées ou non ordonnées)<br />Petit exemple du façon dans lequel nous pouvons structurer un document en utilisant Word<br />
  8. 8. La structure d’un document XHTML<br /><html><br /> <head><br /> <title>le titre du document</title><br /> </head><br /> <body><br /> <!-- le contenu du document --><br /> </body><br /></html><br />
  9. 9. La section « head »<br />Contient information sur le document<br /><title> - le titre du document<br /><link> - le lien vers un resource utilise par la page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />)<br /><meta> - information supplémentaire sur la page – mots clef, type du contenu, description – utilise par des navigateurs et robots<br /><script> - des références aux fichiers javascript<br />
  10. 10. Exemple section “head”<br /><head> <br /><title>W3Schools Online Web Tutorials</title><br /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <br /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <br /><meta name="Keywords" content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP,ADO,VBScript,DOM, " /> <br /><meta name="Description" content="HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples" /> <br /><link rel="stylesheet" type="text/css" href="stdtheme.css" /> <br /></head> <br />
  11. 11. La section « body »<br />Contient les tags qui sont affiches dans le navigateur<br />La section « body » doit contenir SEULEMENT du contenu<br />L’information du style doit être mis en documents extérieurs<br />Nous allons voir les éléments du section « body » et nous allons le tester par construire une page web simple<br />
  12. 12. Headings<br />Les titres des sections<br />H1…H6<br />Utilises par des moteurs de recherche pour comprendre la structure des documents<br />Ne doit pas être utilise pour des raisons de style (pour faire le texte plus gros et plus haut)<br /><h1>titre du document</h1><br /><h2> titre de la première section</h2><br /><h3> titre de la première sous-section</h3><br />
  13. 13. Contenu et formatage<br /><p>paragraphe</p><br /><br/> - ligne nouveau<br /><em> - texte souligne<br /><strong> - strong text<br /><small> - small text<br /><sub> <sup><br />
  14. 14. Listes<br />Listes ordonnées <ol><br />Listes a puces– <ul><br />Eléments du chaque liste - <li><br />Exemple:<br /><ul><br /><li>rouge</li><br /><li>vert</li><br /></ul><br />
  15. 15. Liens<br /><a href=“url absolue ou relative” target=“”>texte ou image</a><br />« target » représente ou le lien doit être ouvert<br />S’il manque – la même page<br />“_blank” – nouvelle fenêtre<br /><a name=“le nom d’une ancre dans le même document> texte ou image </a><br /><a href=“#nom d’une ancre”>text or image</a><br />
  16. 16. Images<br /><img src=“url absolue ou relative” alt=“texte alternative texte pour le cas ou l’image ne peut pas être affichée ou compris”/><br />L’attribut “alt” est obligatoire XHTML!<br /> l’attribut « src » peut être un url complet: http://host/path_to_file ou un chemin relative a la page curent.<br />
  17. 17. Tableaux<br />Les tableaux doivent être utilise seulement pour présenter d’information tabulaire<br />Ils ne doivent pas être utilise pour faire le design de la page<br /><table><br /><tr> <!--table row) --><br /><td > table cell</td><br /></tr><br /></table><br />
  18. 18. Tables<br />colspan<br />Il est utilisé pour avoir une cellule qui s'étend sur plusieurs colonnes<br />Attribut de l’element td<br />rowspan<br />utilisé pour avoir une durée de cellule sur plusieurs lignes<br />Attribut de l’element td<br />Border <br />Si la table a une bordure ou non<br />Attributs de la table de l'élément<br />
  19. 19. Tables example<br /><table border="1"><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </table><br /><table border="1"><br /> <tr><br /> <td colspan="2">&nbsp;</td><br /><!-- only 3 cells because 1 spans on 2 columns--><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td rowspan="2">&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <!-- only 3 cells because 1 above spans on 2 rows --><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </table><br />
  20. 20. Formulaires (form)<br />Nécessaire pour collecter et envoyer data vers le serveur <br /><form action=“script du serveur qui va utiliser le data” method=“la methode HTTP utilise – GET ou POST”><br />Un formulaire contient plusieurs types de « input »<br />
  21. 21. Form Inputs<br />Text input <input type=“text” name=“” /><br />Checkbox <input type=“checkbox” name=“” value=“”/><br />Radio <input type=“radio” name=“” value=“”/><br />Text area <textarea name=“”></textarea><br />Submit <input type=“submit” value=“name on the button”/><br />
  22. 22. Form example<br /><form method="post" action="script.php"><br /> Username: <input type="text" name="username" /><br /><br /> Password:<input type="password" name="password" /><br /><br /> Country: <br /> <select name="country"><br /> <option value="eng">England</option><br /> <option value="fra">France</option><br /> <option value="rou" selected="selected">Romania</option><br /> </select> <br /><br /> Address: <textarea name="address"></textarea><br /><br /> Type of account:<br /> <ul><li>Normal <input type="radio" name="account" value="normal" /></li><br /> <li>Special <input type="radio" name="account" value="special" /></li><br /> </ul><br /> Do you want to subscribe to our newsletter <input type="checkbox" name="subscription"/><br /><br /> <input type="submit" value="Register" /><br /> </form><br />
  23. 23. HTML Special Characters<br />Certains caractères spéciaux <,>,' ', & doivent être représentés de manière différente en HTML<br />Il ne devrait y avoir une confusion entre le contenu de la page et la syntaxe<br />Les caractères spéciaux sont représentées comme: &code;<br />« code » est généralement une séquence de 3-4 lettres qui représente le caractère<br />
  24. 24. HTML Special Characters<br />& - &amp;<br />‘ ‘ (space) - &nbsp;<br />“ - &quot;<br />< - &lt;<br />> - &gt;<br />Others:<br />http://www.w3schools.com/tags/ref_entities.asp<br />http://www.w3schools.com/tags/ref_symbols.asp<br />
  25. 25. Conclusions<br />Dans ce course – seulement les tags les plus importantes; vous allez découvrir plus dans votre travail<br />HTML doit être utilise pour présenter le contenu d’une page web<br />

×