docComment créer un site internet en css et html
download 
Plainte Transcription
Comment créer un site internet en css et html
Comment créer un site internet en css et html
Avant de commmencer à programmer en css et en html, je vous présente le design de votre futur site internet :
Ce site est composé de plusieurs partie : (pour distinguer, suivez les couleurs)
Maintenant que nous avons le contour de notre design, nous allons commencer à programmer en css. Nous allons commencer
par la balise body. Cette balise définit les éléments principaux du site comme la taille, la police ...
●
L'entête : L'entête est composée de 2 parties (entete_gauche en rose, entete_droite en bleu). Comme l'entête est un objet uni
●
Le corps : Le corps est lui aussi composé de 2 parties (corps_gauche en bleu clair, corps_droit en blanc). Tout comme l'entête
Le pied : Le pied est composé d'une seule partie (pied). Etant aussi un objet unique dans une page html, on on utilisera un
attribut id avec la balise
Exemple : le code css
body {
width:1000px;
margin:auto;
margin-top:20px;
font-family:Arial, Tahoma, "MS Sans Serif", "Times New Roman";
font-size:14px;
background-color:#FFFFFF;
text-align:right;
}
Pour la balise body, on définit :
●
●
●
Une largeur de 1000px
Une marge gauche, droite et d'en bas qui s'adaptera en fonction de la taille de votre écran
Une marge du haut à 20 pixels
●
●
●
●
Une police de caractère qui est soit Arial, Tahoma, MS Sans Serif ou Times New Roman
Une taille de police de 14 pixels
Un fond blanc. Si dans l'entête, le corps ou le pied rien n'est précisé, tout le site sera en blanc
Un alignement du texte sur la droite
Maintenant, nous allons créer, l'entête du site
Lorsque nous passerons à la programmation en html, nous utiliserons les balises
. Cette balise s'écrit toujours avec un dièse (#). Nous verrons plus tard que les balises s'écrivent toujours avec un point (.). Ici, nous
#corps {
width:1000px;
margin:0px auto;
}
#corps_gauche {
float:left;
width:250px;
background-color:#99FFFF;
min-height:400px;
}
#corps_droit {
float:right;
width:750px;
min-height:400px;
}
Tout comme pour l'entête, je définit une largeur de corps à 1000 pixels. Maintenant, regardons les deux autres balises :
La balise corps_gauche :
●
●
●
●
Positionnement sur la partie gauche de la page html
Largeur de 250 pixels
Couleur de fond bleu clair (#99FFFF
Hauteur minimum pour le menu de 400 pixels
La balise corps_droit :
●
●
●
Positionnement sur la partie droite de la page html
Largeur de 750 pixels
Hauteur minimum pour le menu de 400 pixels
Ici, vous voyez je n'ai pas définit de couleur de fond pour la balise corps_droit car cette balise est déclarée dans la balise body
.
Et pour finir, finissons par la balise pied
#pied {
width:1000px;
margin:0px auto;
font-size:10px;
background-color:#FFCC00;
text-align:center;
}
La balise Pied :
●
●
●
●
●
Largeur de 1000 pixels
Aucune marge
Taille des caracteres de 10 pixels
Couleur de fond jaune (#FFCC00)
Alignement horizontal du texte
Et voici le reste de mon css. Cette partie du css crée un tableau avec bordure pour le menu. Pour chaque tableau, je crée une
ligne d'entête que j'ai nommé td1 et une ligne de corps que j'ai nommé td2. Vous verrez dans le code html suivant, que j'ai
utilisé des attributs id pour les tableaux et des attributs class pour les lignes du tableaux
#table_menu {
border:1px solid 000000;
width:95%;
margin:auto;
text-align:center;
background-color:#FFFFFF;
color:#000000;
}
.td1 {
background-color:#CCFFCC;
text-align:center;
font-size:9px;
}
.td2 {
background-color:#99FF99;
}
Pour le code HTML, j'ai utilisé le logiciel Dreamweaver car c'est avec ce logiciel que je travaille mais vous pouvez travailler avec
Notepad++ qui fonctionne très bien.
Voici le code HTML que j'ai saisi pour faire le design de ma page HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mon premier modele</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="entete">
<div id="entete_gauche">
<p>ici, je peux rajouter l'image ou le texte que je veux.</p>
<p>Mon texte est centré </p>
</div>
<div id="entete_droite">
<a href="http://www.helpclic.net"><img src="images/modele.jpg" border="0" width="300" height="30"
</div>
</div>
<div id="corps">
<div id="corps_gauche">
<table id="table_menu">
<tr>
<td class="td1">
<p class="justifier">Menu 1</p>
</td>
</tr>
<tr>
<td class="td2">
<ul>
<li><a href="#">Sous menu 1-1</a></li>
<li><a href="#">Sous menu 1-2</a></li>
<li><a href="#">Sous menu 1-3</a></li>
</ul>
</td>
</tr>
<tr>
<td class="td1">
<p class="justifier">Menu
</td>
</tr>
<tr>
<td class="td2">
<ul>
<li><a href="#">Sous menu
<li><a href="#">Sous menu
<li><a href="#">Sous menu
<li><a href="#">Sous menu
</ul>
</td>
</tr>
</table>
</div>
2</p>
2-1</a></li>
2-2</a></li>
2-3</a></li>
2-4</a></li>
<div id="corps_droit">
<p>Comme vous avez pu le voir, dans le code css, dans la partie <b>body</b>, j'ai ajouté u
<p>Pour cela, le css c'est génial, on fait ceux que l'on veut ...</p>
</div>
</div>
<div id="pied">
<p>Ici, je vais mettre le copyright de mon site : 2007 - © helpclic.net</p>
</div>
</body>
</html>
Et voici le résultat de tout ces efforts :
