Construction d'un site web

.

SITE WEB :

.

.

vidéo

.

webm player by EasyHtml5Video.com v4.0

.

La page de départ : index.html

.

Un site démarre par la page index.html, elle dirige vers les autres pages du site.

.

Apparence de la page index.html
images/aaaaa.PNG

<! DOCTYPE html >

<html xmlns = " http://www.w3.org/1999/xhtml " lang = "fr" >

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>Education Numérique</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Le Nom du Site<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="nsi.html#" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-erif'>&#9201;&#9202;</span></p>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

</div>

</body>

</html>

 

.

Explication du code , ce sont des balises.

.

Celle qui débute est incluse dans <…. > et celle qui termine la balise est dans </….>

<html lang=”fr” >

Tout le code de la page est contenu entre ces deux balises html ;

</html>

<head>

head signifie tête de la page, cette balise contient les références des fichiers css et javascripts ainsi que liens pour faire fonctionner la page ;

</head>

<body>

body est le corps de la page, les balises body sont situées au-dessous de head et au-dessus de la balise </html>

</body>

<div>

Balise qui définit une division (div), elle permet de regrouper plusieurs éléments dans la page.

</div>

<ul>

Détermine une liste d’éléments qui peuvent être disposés verticalement ou horizontalement.

</ul>

<li>

Encadre chaque l’élément de la liste.

</li>

<p>

Encadre une partie du texte que l’on veut afficher.

</p>

<strong>

Affiche le texte en gras

</strong>

.

Le fichier style.css

.

CSS sont les initiales de Cascading Style Sheets. C’est un langage destiné à modifier l’apparence des pages et les mettre en forme, c’est un changement de style que l’on peut faire de façon personnelle.Un fichier css contient toutes les modifications que l’on veut avoir sur le site. Pour que le fichier index.html utilise un fifichier css il faut la balise :

<link href=”style.css” rel=”stylesheet” media=”screen”>

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

Ancien langage :

<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen”>

Nouveau langage :

<link href=”style.css” rel=”stylesheet” media=”screen”>

.

Construction du fichier style.css

.

Changer la couleur du fond de la page et l’apparence du Nom du titre

.

style.css

body {

font-family: verdana;

background-color:#F8E0E6;

width:auto;

}

#top{

      height: 100px;

      background: no-repeat top center ;

      font-size:32px;

      color:#046380;

      margin: 50px 0 40px 0;

      text-align:center;

      line-height:80px;

}

#top .petit{

      font-size:12px;

}

#menu{

      background-color:#FFFFFF;

      height:110px;

      width:auto;

}

#container{

      width:auto;

      height: 105px;

      margin:0 auto;

     

}

#menu ul li{

      list-style:none;

      float:left;

      padding:0;

      width:24%;

}

#menu ul li a{

      height:100px;

      width:auto;

      font-size:35px;

      text-decoration:none;

      text-align:center;

      display:block;

      background-color:#FFFFFF;

      background-size: 100% 200%;

      line-height:100px;

      color:#046380;

}

 

#menu ul li a.accueil{

      background-color:#B40404;

}

#menu ul li:hover a.accueil{

      height:100px;

      background-color:#FE2E2E;

}

#menu ul li a.bleu{

      background-color:#2E9AFE;

}

#menu ul li:hover a.bleu{

      height:100px;

      background-color:#A9D0F5;

}

#menu ul li a.jaune{

      background-color:#D7DF01;

}

#menu ul li:hover a.jaune{

      height:100px;

      background-color:#F4FA58;

}

#menu ul li a.vert{

      background-color:#31B404;

}

#menu ul li:hover a.vert{

      height:100px;

      background-color:#BCF5A9;

}

#menu ul li a.rose{

      background-color:#FE2EF7;

}

#menu ul li:hover a.rose{

      height:100px;

      background-color:#F5A9F2;

}

#move0{

      background-color:#8181F7;

}

#move1{

      background-color:#F3F781;

}

#move2{

      background-color:#9FF781;

}

#move3{

      background-color:#F5A9F2;

}

#move4{

     

      background-color:#58FAF4;

     

}

#move5{

      background-color:#FA5858;

}

#gg{

      background-color:#F5D0A9;

}

#hh{

      background-color:#E2A9F3;

}

.

Définition du code css

.

font-family

Police du texte

font-size

Taille de la police du texte

color

Couleur du texte

background-color

Couleur du fond

height

Hauteur

width

Largeur

margin

Taille des marges sur les quatre côtés de l’élément

line-height

Hauteur de la ligne

no-repeat

Afficher une seule fois.

bottom

Afficher jusqu’au bas.

center

Entrer l’affichage

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

.

code des quatre pages html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de NSI<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil">ACCUEIL</a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9977;&#9977;&#9977;&#9977;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

</div>

</body>

</html>

_images/ht008.PNG

.

.

snt.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de SNT<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil" >ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9202;</span></p>

</div>

</body>

</html>

 
images/htsnt.PNG

.

.

html.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de HTML<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="html.html" class="acceuil">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="vert">SNT</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9972;&#9973;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9978;&#9962;</span></p>

 

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

 

</div>

</body>

</html>
images/htmst.PNG

.

python.html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de Python<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="bleu">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

</ul>

</div>

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9878;&#9884;</span></p>

 

</div>

</body>

</html>
images/htpython.PNG

.


snt web



Construction d'un site web

.

SITE WEB :

.

.

vidéo

.

webm player by EasyHtml5Video.com v4.0

.

La page de départ : index.html

.

Un site démarre par la page index.html, elle dirige vers les autres pages du site.

.

Apparence de la page index.html
images/aaaaa.PNG

<! DOCTYPE html >

<html xmlns = " http://www.w3.org/1999/xhtml " lang = "fr" >

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>Education Numérique</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Le Nom du Site<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="nsi.html#" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-erif'>&#9201;&#9202;</span></p>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

</div>

</body>

</html>

 

.

Explication du code , ce sont des balises.

.

Celle qui débute est incluse dans <…. > et celle qui termine la balise est dans </….>

<html lang=”fr” >

Tout le code de la page est contenu entre ces deux balises html ;

</html>

<head>

head signifie tête de la page, cette balise contient les références des fichiers css et javascripts ainsi que liens pour faire fonctionner la page ;

</head>

<body>

body est le corps de la page, les balises body sont situées au-dessous de head et au-dessus de la balise </html>

</body>

<div>

Balise qui définit une division (div), elle permet de regrouper plusieurs éléments dans la page.

</div>

<ul>

Détermine une liste d’éléments qui peuvent être disposés verticalement ou horizontalement.

</ul>

<li>

Encadre chaque l’élément de la liste.

</li>

<p>

Encadre une partie du texte que l’on veut afficher.

</p>

<strong>

Affiche le texte en gras

</strong>

.

Le fichier style.css

.

CSS sont les initiales de Cascading Style Sheets. C’est un langage destiné à modifier l’apparence des pages et les mettre en forme, c’est un changement de style que l’on peut faire de façon personnelle.Un fichier css contient toutes les modifications que l’on veut avoir sur le site. Pour que le fichier index.html utilise un fifichier css il faut la balise :

<link href=”style.css” rel=”stylesheet” media=”screen”>

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

Ancien langage :

<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen”>

Nouveau langage :

<link href=”style.css” rel=”stylesheet” media=”screen”>

.

Construction du fichier style.css

.

Changer la couleur du fond de la page et l’apparence du Nom du titre

.

style.css

body {

font-family: verdana;

background-color:#F8E0E6;

width:auto;

}

#top{

      height: 100px;

      background: no-repeat top center ;

      font-size:32px;

      color:#046380;

      margin: 50px 0 40px 0;

      text-align:center;

      line-height:80px;

}

#top .petit{

      font-size:12px;

}

#menu{

      background-color:#FFFFFF;

      height:110px;

      width:auto;

}

#container{

      width:auto;

      height: 105px;

      margin:0 auto;

     

}

#menu ul li{

      list-style:none;

      float:left;

      padding:0;

      width:24%;

}

#menu ul li a{

      height:100px;

      width:auto;

      font-size:35px;

      text-decoration:none;

      text-align:center;

      display:block;

      background-color:#FFFFFF;

      background-size: 100% 200%;

      line-height:100px;

      color:#046380;

}

 

#menu ul li a.accueil{

      background-color:#B40404;

}

#menu ul li:hover a.accueil{

      height:100px;

      background-color:#FE2E2E;

}

#menu ul li a.bleu{

      background-color:#2E9AFE;

}

#menu ul li:hover a.bleu{

      height:100px;

      background-color:#A9D0F5;

}

#menu ul li a.jaune{

      background-color:#D7DF01;

}

#menu ul li:hover a.jaune{

      height:100px;

      background-color:#F4FA58;

}

#menu ul li a.vert{

      background-color:#31B404;

}

#menu ul li:hover a.vert{

      height:100px;

      background-color:#BCF5A9;

}

#menu ul li a.rose{

      background-color:#FE2EF7;

}

#menu ul li:hover a.rose{

      height:100px;

      background-color:#F5A9F2;

}

#move0{

      background-color:#8181F7;

}

#move1{

      background-color:#F3F781;

}

#move2{

      background-color:#9FF781;

}

#move3{

      background-color:#F5A9F2;

}

#move4{

     

      background-color:#58FAF4;

     

}

#move5{

      background-color:#FA5858;

}

#gg{

      background-color:#F5D0A9;

}

#hh{

      background-color:#E2A9F3;

}

.

Définition du code css

.

font-family

Police du texte

font-size

Taille de la police du texte

color

Couleur du texte

background-color

Couleur du fond

height

Hauteur

width

Largeur

margin

Taille des marges sur les quatre côtés de l’élément

line-height

Hauteur de la ligne

no-repeat

Afficher une seule fois.

bottom

Afficher jusqu’au bas.

center

Entrer l’affichage

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

.

code des quatre pages html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de NSI<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil">ACCUEIL</a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9977;&#9977;&#9977;&#9977;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

</div>

</body>

</html>

_images/ht008.PNG

.

.

snt.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de SNT<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil" >ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9202;</span></p>

</div>

</body>

</html>

 
images/htsnt.PNG

.

.

html.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de HTML<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="html.html" class="acceuil">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="vert">SNT</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9972;&#9973;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9978;&#9962;</span></p>

 

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

 

</div>

</body>

</html>
images/htmst.PNG

.

python.html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de Python<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="bleu">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

</ul>

</div>

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9878;&#9884;</span></p>

 

</div>

</body>

</html>
images/htpython.PNG

.


snt web



Construction d'un site web

.

SITE WEB :

.

.

vidéo

.

webm player by EasyHtml5Video.com v4.0

.

La page de départ : index.html

.

Un site démarre par la page index.html, elle dirige vers les autres pages du site.

.

Apparence de la page index.html
images/aaaaa.PNG

<! DOCTYPE html >

<html xmlns = " http://www.w3.org/1999/xhtml " lang = "fr" >

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>Education Numérique</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Le Nom du Site<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="nsi.html#" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-erif'>&#9201;&#9202;</span></p>

<p class=MsoNormal>

<span style='font-size:180.0pt;line-height:107%;font-family:"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

</div>

</body>

</html>

 

.

Explication du code , ce sont des balises.

.

Celle qui débute est incluse dans <…. > et celle qui termine la balise est dans </….>

<html lang=”fr” >

Tout le code de la page est contenu entre ces deux balises html ;

</html>

<head>

head signifie tête de la page, cette balise contient les références des fichiers css et javascripts ainsi que liens pour faire fonctionner la page ;

</head>

<body>

body est le corps de la page, les balises body sont situées au-dessous de head et au-dessus de la balise </html>

</body>

<div>

Balise qui définit une division (div), elle permet de regrouper plusieurs éléments dans la page.

</div>

<ul>

Détermine une liste d’éléments qui peuvent être disposés verticalement ou horizontalement.

</ul>

<li>

Encadre chaque l’élément de la liste.

</li>

<p>

Encadre une partie du texte que l’on veut afficher.

</p>

<strong>

Affiche le texte en gras

</strong>

.

Le fichier style.css

.

CSS sont les initiales de Cascading Style Sheets. C’est un langage destiné à modifier l’apparence des pages et les mettre en forme, c’est un changement de style que l’on peut faire de façon personnelle.Un fichier css contient toutes les modifications que l’on veut avoir sur le site. Pour que le fichier index.html utilise un fifichier css il faut la balise :

<link href=”style.css” rel=”stylesheet” media=”screen”>

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

Ancien langage :

<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen”>

Nouveau langage :

<link href=”style.css” rel=”stylesheet” media=”screen”>

.

Construction du fichier style.css

.

Changer la couleur du fond de la page et l’apparence du Nom du titre

.

style.css

body {

font-family: verdana;

background-color:#F8E0E6;

width:auto;

}

#top{

      height: 100px;

      background: no-repeat top center ;

      font-size:32px;

      color:#046380;

      margin: 50px 0 40px 0;

      text-align:center;

      line-height:80px;

}

#top .petit{

      font-size:12px;

}

#menu{

      background-color:#FFFFFF;

      height:110px;

      width:auto;

}

#container{

      width:auto;

      height: 105px;

      margin:0 auto;

     

}

#menu ul li{

      list-style:none;

      float:left;

      padding:0;

      width:24%;

}

#menu ul li a{

      height:100px;

      width:auto;

      font-size:35px;

      text-decoration:none;

      text-align:center;

      display:block;

      background-color:#FFFFFF;

      background-size: 100% 200%;

      line-height:100px;

      color:#046380;

}

 

#menu ul li a.accueil{

      background-color:#B40404;

}

#menu ul li:hover a.accueil{

      height:100px;

      background-color:#FE2E2E;

}

#menu ul li a.bleu{

      background-color:#2E9AFE;

}

#menu ul li:hover a.bleu{

      height:100px;

      background-color:#A9D0F5;

}

#menu ul li a.jaune{

      background-color:#D7DF01;

}

#menu ul li:hover a.jaune{

      height:100px;

      background-color:#F4FA58;

}

#menu ul li a.vert{

      background-color:#31B404;

}

#menu ul li:hover a.vert{

      height:100px;

      background-color:#BCF5A9;

}

#menu ul li a.rose{

      background-color:#FE2EF7;

}

#menu ul li:hover a.rose{

      height:100px;

      background-color:#F5A9F2;

}

#move0{

      background-color:#8181F7;

}

#move1{

      background-color:#F3F781;

}

#move2{

      background-color:#9FF781;

}

#move3{

      background-color:#F5A9F2;

}

#move4{

     

      background-color:#58FAF4;

     

}

#move5{

      background-color:#FA5858;

}

#gg{

      background-color:#F5D0A9;

}

#hh{

      background-color:#E2A9F3;

}

.

Définition du code css

.

font-family

Police du texte

font-size

Taille de la police du texte

color

Couleur du texte

background-color

Couleur du fond

height

Hauteur

width

Largeur

margin

Taille des marges sur les quatre côtés de l’élément

line-height

Hauteur de la ligne

no-repeat

Afficher une seule fois.

bottom

Afficher jusqu’au bas.

center

Entrer l’affichage

link

lien avec le fichier.

href rel=”stylesheet” media=”screen”

Adresse du fichier par rapport au fichier index.html Représente la feuille de style Le média est l’écran

.

code des quatre pages html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de NSI<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil">ACCUEIL</a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9977;&#9977;&#9977;&#9977;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

</div>

</body>

</html>

_images/ht008.PNG

.

.

snt.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de SNT<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="accueil" >ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="html.html" class="vert">HTML</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9202;</span></p>

</div>

</body>

</html>

 
images/htsnt.PNG

.

.

html.html

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de HTML<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="html.html" class="acceuil">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="vert">SNT</a></li>

<li><a href="python.html" class="rose">PYTHON</a></li>

</ul>

</div>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9972;&#9973;</span></p>

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9978;&#9962;</span></p>

 

 

 

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9201;&#9200;</span></p>

 

</div>

</body>

</html>
images/htmst.PNG

.

python.html

.

.

programme Résultat

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>

<meta http-equipv="content-Type" content="text/html" charset="UTF-8">

<title>NSI</title>

<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div id="top">Cours de Python<span class="petit"> Un commentaire</span></div>

<div id="container">

<div id="menu">

<ul>

<li><a href="index.html" class="bleu">ACCUEIL</a></li>

<li><a href="nsi.html" class="bleu">NSI </a></li>

<li><a href="snt.html" class="jaune">SNT</a></li>

<li><a href="html.html" class="vert">HTML</a></li>

</ul>

</div>

<p class=MsoNormal><span style='font-size:180.0pt;line-height:107%;font-family:

"Segoe UI Emoji",sans-serif'>&#9878;&#9884;</span></p>

 

</div>

</body>

</html>
images/htpython.PNG

.


education-du-numerique.fr. Tous  droits réservés. D Pérarnaud Limoges.