Comment créer un site internet en css et html

Dimension: px

Commencer à balayer dès la page:

Download "Comment créer un site internet en css et html"

Michelle Paré
il y a 7 ans
Total affichages :

1 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

2 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

3 #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

4 #table_menu { border:1px solid ; 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

5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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 id="entete_droite"> <a href=" src="images/modele.jpg" border="0" width="300" height="30" <div id="corps"> <div id="corps_gauche"> <table id="table_menu"> <td class="td1"> <p class="justifier">menu 1</p> <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 class="td1"> <p class="justifier">menu 2</p> <td class="td2"> <ul> <li><a href="#">sous menu 2-1</a></li> <li><a href="#">sous menu 2-2</a></li> <li><a href="#">sous menu 2-3</a></li> <li><a href="#">sous menu 2-4</a></li> </ul> </table> <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 id="pied"> <p>ici, je vais mettre le copyright de mon site : helpclic.net</p> </body> </html>

6 Et voici le résultat de tout ces efforts :

Documents pareils

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?