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....
Prochain SlideShare
Chargement dans…5
×

Html

363 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

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 ...

×