SlideShare une entreprise Scribd logo
1  sur  29
Présenté Par : Khouloud GHARBI
Evolution du nombre de sites web

20000000
18000000
16000000
14000000
12000000
10000000                         nombre de sites
80000000                         web
60000000
40000000
20000000
       0
           1996 2000 2005 2008
PAR OU COMMENCER?
I. LES LANGAGES:
1.HTML

 Sert à taper le contenu de votre site web.
 contient des informations logiques.
2.CSS

   Sert à personnaliser votre site web
II. L’EDITEUR:
III. LES BALISES
Une balise commence par "<" et se termine par ">"
   Les balises existant par paire :


              <title> titre du site </title>


   Les balises seules :

                        <img />
   Les commentaires

                 <!-- Commentaire -->
   Dans la balise <head>

       <title> Mon titre</title>

       <link href =``infocept.ico`` rel=``icon`` / >

       <meta />
   Dans la balise <body>

       <p> Un paragraphe </p>

       <br /> Saut de ligne

       <strong> texte en gras </strong>


       <h1> Titre   très important </h1>

       <h6> Titre moins important </h6>
IV. LES ATTRIBUTS
   Donner des précisions sur une balise



   Essentiels ou optionnels



   Utilisables avec tout type de balise

       Par paires

       Seules
   <img src="images/infocept.jpg" alt="infocept"
    />

       Src : attribut

       "images/infocept.jpg" : sa valeur
IV. LES LIENS
   <a href=``http:infocept.ept``> infocept </a>

   <a href=``dossiermapage.html``> texte </a>

   <a href="mailto:infocept@ept.tn"> nous
    contacter </a>
   <a href=‘‘#infocept’’ > infocept </a>

   <a href=‘‘monsite.html#infocept’’ > infocept
    </a>
CSS
   Stylesheet

       Création d’un fichier d’extension .css



       <link rel="stylesheet" media="screen" type="text/css"
        href="cheminmon style.css" />
   Le CSS plus simple plus efficace



        body
        {
          background: url("data/infocept.jpg") no-repeat top
          center;
        }
CSS
   Class
    

Contenu connexe

Similaire à Html CSS

HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. Cesar Gelvez
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vfThabet Chokri
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-videogueyebaba
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2Nicolas BYKOFF
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web SémantiqueYounesOuladSayad1
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...ssuser1a62e1
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-videogueyebaba
 

Similaire à Html CSS (20)

HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité.
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-video
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
cours Php
cours Phpcours Php
cours Php
 
Seo les bases module 2
Seo les bases module 2Seo les bases module 2
Seo les bases module 2
 
Html css
Html cssHtml css
Html css
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Programmation web
Programmation webProgrammation web
Programmation web
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-video
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 

Html CSS

  • 1. Présenté Par : Khouloud GHARBI
  • 2. Evolution du nombre de sites web 20000000 18000000 16000000 14000000 12000000 10000000 nombre de sites 80000000 web 60000000 40000000 20000000 0 1996 2000 2005 2008
  • 5. 1.HTML  Sert à taper le contenu de votre site web.  contient des informations logiques.
  • 6. 2.CSS  Sert à personnaliser votre site web
  • 7.
  • 9.
  • 10.
  • 11.
  • 12.
  • 14. Une balise commence par "<" et se termine par ">"
  • 15. Les balises existant par paire : <title> titre du site </title>  Les balises seules : <img />  Les commentaires <!-- Commentaire -->
  • 16.
  • 17. Dans la balise <head>  <title> Mon titre</title>  <link href =``infocept.ico`` rel=``icon`` / >  <meta />
  • 18. Dans la balise <body>  <p> Un paragraphe </p>  <br /> Saut de ligne  <strong> texte en gras </strong>  <h1> Titre très important </h1>  <h6> Titre moins important </h6>
  • 20. Donner des précisions sur une balise  Essentiels ou optionnels  Utilisables avec tout type de balise  Par paires  Seules
  • 21. <img src="images/infocept.jpg" alt="infocept" />  Src : attribut  "images/infocept.jpg" : sa valeur
  • 23. <a href=``http:infocept.ept``> infocept </a>  <a href=``dossiermapage.html``> texte </a>  <a href="mailto:infocept@ept.tn"> nous contacter </a>
  • 24. <a href=‘‘#infocept’’ > infocept </a>  <a href=‘‘monsite.html#infocept’’ > infocept </a>
  • 25. CSS
  • 26. Stylesheet  Création d’un fichier d’extension .css  <link rel="stylesheet" media="screen" type="text/css" href="cheminmon style.css" />
  • 27. Le CSS plus simple plus efficace body { background: url("data/infocept.jpg") no-repeat top center; }
  • 28. CSS
  • 29. Class 