Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Formation HTML / CSS                       ar dionoea
le HTML   Hyper Text Markup Languagelangage descriptif composé de balises     interprété par le navigateur page HTML = sim...
les déclarations                codage des caractères :<?xml version="1.0" encoding="iso-8859-15" ?>            norme (ici...
le validator !!!!        Il faut respecter les règles de syntaxe !   page valide = même sens pour tous les navigateursUne ...
le principe des balisesbalise = limite dune boîte où lon peut mettre des choses           <balise> chose </balise>      à ...
la strucutre dune page HTML<?xml version="1.0" encoding="iso-8859-15" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
len­tête               <head> ... </head>informations qui ne seront pas affichées sur la page HMTLtitre de la page : <titl...
le corps           <body> ... </body>informations qui vont safficher dans le navigateur
structuration du texte<p>paragraphe</p><hr/> (trait horizontal)<h1>important</h1>...<h6>moins important</h6><div>bloc</div>
structuration du texteles listes non ordonnées :<ul>   <li>amuse</li>   <li>soir</li></ul>les listes ordonnées :<ol>   <li...
structuration du texteles tables :<table>  <tr>    <td>1ère    ligne, 1ère colonne</td>    <td>1ère    ligne, 2ème colonne...
au fil du texte  Il sagit de balises qui doivent être contenues dans celles de                             structuration.a...
au fil du texte                  les liens : <a href="http://via.ecp.fr">page web</a>    <a href="page2.html">autre page</...
au fil du texte                  les images :<img src="ma_photo.jpg" alt="description" />                une image lien : ...
<?xml version="1.0" encoding="iso-8859-15" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR...
<h1>une table un peu plus compliquée...</h1><table border="1"> <tr>  <td colspan="3">   1ère ligne, 1ère colonne  </td>  <...
les CSS ou feuilles de style         CSS : cascading stylesheets                mise en page              dans len­tête :<...
structure dune feuille de style                        notion de classep.pouet{                 balise.nom{  font-size: 12...
autres manières de spécifier un style                  toujours dans len­tête :             <style type="text/css">       ...
quelques propriétéspour le texte:font-family: Garamond, Times New Roman, serif;font-size: taille;font-style: normal | ital...
quelques propriétéspour les listes:list-style-type: upper-alpha | lower-alpha |upper-roman | lower-roman | decimal | circl...
quelques propriétéspour larrière plan:background-color: couleur;background-image: url(image.jpg);pour les bordures:border-...
quelques propriétéspour les blocs / tables :width: taille;height: taille;vertical-align: top | middle | bottom;           ...
quelques propriétéspour les marges :margin: tailleou margin-bottom... margin-top...  margin-left... margin-right...       ...
quelques propriétéspour le positionnement :position: static | relative | absolute | fixed;top: position;left: position;   ...
annexe                   les couleurs :             #RRVVBB en hexadécimal             ou #RVB en hexadécimal         ou r...
<?xml version="1.0" encoding="iso-8859-15" ?> .moche {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0         color: #ff0;Str...
les liens utiles le World Wide Web consortium qui définit les          normes : http://www.w3.orget le validator : http://...
<des questions ? />
Le php et les bases de données ?   Rendez­vous la semaine prochaine
adresses les adresses peuvent être spécifiées de deux manières:                   adresse absolue:     http://www.cti.ecp....
Upcoming SlideShare
Loading in …5
×

Html

393 views

Published on

  • Be the first to comment

  • Be the first to like this

Html

  1. 1. Formation HTML / CSS ar dionoea
  2. 2. le HTML Hyper Text Markup Languagelangage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc­notes, vim, ...)
  3. 3. les déclarations codage des caractères :<?xml version="1.0" encoding="iso-8859-15" ?> norme (ici XHTML 1.0 strict) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
  4. 4. le validator !!!! Il faut respecter les règles de syntaxe ! page valide = même sens pour tous les navigateursUne page HTML valide est une page qui passe  le test du validator (http://validator.w3.org)
  5. 5. le principe des balisesbalise = limite dune boîte où lon peut mettre des choses <balise> chose </balise> à chaque balise ouvrante <balise> ... ... on associe une balise fermante </balise> balises sans contenu : <autrebalise /> <balise attribut1="valeur" attribut2="valeur">...</balise> commentaire : <!-- bla bla bla -->
  6. 6. la strucutre dune page HTML<?xml version="1.0" encoding="iso-8859-15" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <!-- len-tête --> </head> <body> <!-- le corps --> </body></html>
  7. 7. len­tête <head> ... </head>informations qui ne seront pas affichées sur la page HMTLtitre de la page : <title>ma page html</title> informations utilisées par les moteurs de recherche : <meta name="description" content="Formation HTML" />
  8. 8. le corps <body> ... </body>informations qui vont safficher dans le navigateur
  9. 9. structuration du texte<p>paragraphe</p><hr/> (trait horizontal)<h1>important</h1>...<h6>moins important</h6><div>bloc</div>
  10. 10. structuration du texteles listes non ordonnées :<ul> <li>amuse</li> <li>soir</li></ul>les listes ordonnées :<ol> <li>pouquoi</li> <li>banane</li></ol>
  11. 11. structuration du texteles tables :<table> <tr> <td>1ère ligne, 1ère colonne</td> <td>1ère ligne, 2ème colonne</td> </tr> <tr> <td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> </tr></table>
  12. 12. au fil du texte Il sagit de balises qui doivent être contenues dans celles de  structuration.aller à la ligne : <br/>écrire en italique : <i>...</i>écrire en gras : <b>...</b>délimiter une partie du texte : <span>...</span>
  13. 13. au fil du texte les liens : <a href="http://via.ecp.fr">page web</a> <a href="page2.html">autre page</a><a href="mailto:perms@via.ecp.fr">email</a>
  14. 14. au fil du texte les images :<img src="ma_photo.jpg" alt="description" /> une image lien : <a href="http://www.perdu.com"> <img src="lost.png" alt="lost" /></a>
  15. 15. <?xml version="1.0" encoding="iso-8859-15" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>titre</title> </head> <body> <p>Ceci est un paragraphe</p> <hr/> <h1>bonjour!</h1> <h3>moyenjour.</h3> <h6>mauvaisjour.</h6> <p>je vais aller <a href="http://www.via.ecp.fr"> rendre visite à via</a>. via cest bien <img src="smiley.jpg" alt=":)" />.</p> <ul> <li>un élément</li> <li>un autre élément</li> </ul> <ol> <li>premier élément</li> <li>deuxième élément</li> </ol> </body></html>
  16. 16. <h1>une table un peu plus compliquée...</h1><table border="1"> <tr> <td colspan="3"> 1ère ligne, 1ère colonne </td> <td>1ère ligne, 4ème colonne</td> </tr> <tr> <td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> <td>2ème ligne, 3ème colonne</td> <td rowspan="2"> 2ème ligne, 4ème colonne </td> </tr> <tr> <td colspan="2" rowspan="2"> 3ème ligne, 1ère col </td> <td>3ème ligne 3ème colonne</td> </tr> <tr> <td>4ème ligne, 3ème colonne</td> <td>4ème ligne, 4ème colonne</td> </tr></table>
  17. 17. les CSS ou feuilles de style CSS : cascading stylesheets mise en page dans len­tête :<link href="style.css" type="text/css"rel="stylesheet" title="blablabla" />
  18. 18. structure dune feuille de style notion de classep.pouet{ balise.nom{ font-size: 12px; propriété: valeur; background-color: red; propriété: vlaeur;} } Pour appliquer la classe, il suffira ensuite dajouter lattribut  class="nom" dans le code HTML. exemple : <p class="pouet">bla bla bla</p> classe applicable à tout type de balise : .pouet {...}classe appliqué à toutes les balises dun type :  p { ... }
  19. 19. autres manières de spécifier un style toujours dans len­tête : <style type="text/css"> table.truc{ border-width: 2px; background-color: blue; } </style> ou dans la balise elle même :<h1 style="text-decoration: underline;">bla bla</h1>
  20. 20. quelques propriétéspour le texte:font-family: Garamond, Times New Roman, serif;font-size: taille;font-style: normal | italic;font-weight: normal | bold | bolder | lighter;color: couleur;text-align: left | center | right | justify;text-decoration: none | underline;
  21. 21. quelques propriétéspour les listes:list-style-type: upper-alpha | lower-alpha |upper-roman | lower-roman | decimal | circle |disc | square;list-style-image: url(image.jpg);
  22. 22. quelques propriétéspour larrière plan:background-color: couleur;background-image: url(image.jpg);pour les bordures:border-width: taille;border-color: couleur;border-style: none | solid | dotted | dashed |double;ou border: taille couleur style;mais aussi border-bottom... border-top... border-left... border-right...
  23. 23. quelques propriétéspour les blocs / tables :width: taille;height: taille;vertical-align: top | middle | bottom; width top middle height bordure bottom
  24. 24. quelques propriétéspour les marges :margin: tailleou margin-bottom... margin-top... margin-left... margin-right... autreidem avec padding au lieu de margin élément autre élément affichage margin du texte autre border élément padding
  25. 25. quelques propriétéspour le positionnement :position: static | relative | absolute | fixed;top: position;left: position; topbottom: position; left rightright: position; bordure de lélément bottom
  26. 26. annexe les couleurs : #RRVVBB en hexadécimal ou #RVB en hexadécimal ou rgb(255,0,128) en décimal ou encore red, blue, white, green, black... les tailles et positions : en pixels : 12px ou en centimetres : 12cm ou encore en points : 12pt et même en pourcentage de lélément parent : 12%voire parfois par rapport à la taille de la police : 12em
  27. 27. <?xml version="1.0" encoding="iso-8859-15" ?> .moche {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 color: #ff0;Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- background-color: #123456;strict.dtd"> font-weight: bold; border: 4px solid red;<html> } <head> <title>titre</title> h1 { <link rel="stylesheet" type="text/css" font-size: 10px;href="style.css" title="mon style" /> } </head> h3 { <body> font-size: 30px; <p class="moche">Ceci est un paragraphe</p> text-decoration: underline; <hr/> } <h1>bonjour!</h1> ol.truc { <h3>moyenjour.</h3> list-style-type: lower-roman; <h6>mau<span class="moche"> } vais</span>jour. </h6> <ol class="truc"> <li>premier élément</li> <li>deuxième élément</li> </ol> </body></html>
  28. 28. les liens utiles le World Wide Web consortium qui définit les  normes : http://www.w3.orget le validator : http://validator.w3.org un très bon site pour apprendre :  http://www.w3schools.com et encore mieux :http://www.via.ecp.fr/formations
  29. 29. <des questions ? />
  30. 30. Le php et les bases de données ? Rendez­vous la semaine prochaine
  31. 31. adresses les adresses peuvent être spécifiées de deux manières: adresse absolue: http://www.cti.ecp.fr/~goretg6/site/page.html adresse relative: (cest à dire par rapport à lemplacement de la page web) dans le même répertoire: page.html dans un sous répertoire: rep/page.html dans le répertoire parent: ../page.html etc ...

×