Creation D'un Site Web
Voir au format PDFVous êtes ici : >> HTML-CSS / Creation D'un Site Web
Temps d'étude : 4h30. 
Niveau : Facile.Préparatifs
En entreprise, pour créer un site web, nous aurons besoin d'une créa graphique à suivre.
La plupart du temps cela est fournit pas le designer au format PSD (pour photoshop) mais cela peut également être un fichier illustrator ou encore un mockup wireframe (de balsamik).
Pour l'exemple, nous allons décider de se créer un site CV, cela aura double emploi puisque d'une part vous apprendrez à réaliser un site web de A à Z et d'autre part vous pourriez pourquoi pas vous en reseervir plus tard et ainsi vous démarquer lors d'entretiens d'embauche (pensez à l'améliorer en personnalisant les textes, changer les couleurs, etc. avant de le passer en ligne ;-)).
Nous pouvons également appeler cela un portfolio si vous ajoutez quelques-unes de vos réalisations / créations
Voici la créa graphique :
C'est donc une image à reproduire pour en faire une page web, mais pour cela, il faut prévoir le zoning correspondant ! c'est à dire : deviner les zones avant de les créer.
Pour cela nous pouvons prendre une feuille et un stylo. Combien voyez vous de zones ? Il y'en a plusieurs et il ne faut pas hésiter à en faire !
Voici ce que cela pourrait donner :
Zoning : Pour le moment nos zones possèdent des couleurs et même si cela peut paraitre "étrange", tous les sites se développent de cette manière dans le milieu professionnel, nous mettons d'abord des couleurs de fond pour identifier les zones disponibles et ensuite nous travaillons à l'intérieur.
Et oui cela fait beaucoup de zones à prévoir, mais nous n'avons pas le choix si nous souhaitons être précis il est judicieux de prévoir un maximum de zones.
InformationsIl ne faut pas hésiter à créer des zones pour encapsuler les éléments
Bien entendu, ce zoning représente les zones majeures de la page web mais il y en aura d'autres à prévoir à l'intérieur (des sous zones ou zones secondaires).
Une fois que les texte, images, et autres informations sont intégrées dans ces zones. Nous retirons bien entendu les couleurs petit à petit (pour montrer que nous avons fini de travailler dans la zone en question).
Nos zones principales seront : header, section, footer et nous aurons systématiquement à l'intérieur l'appel de la
<div class="conteneur"> pour centrer le contenu.Nous partons sur un design de site pleine largeur (full width) et non pas avec un conteneur central qui englobe le tout. Nous n'aurons donc pas qu'un seul conteneur mais plusieurs.
Exemple d'une structure de site pleine largeur (notre cas dans le cadre de ce cours) :
Comme vous pouvez le constater, la couleur prend toute la largeur de la page web.
Exemple d'une structure de site avec un conteneur unique et central :
Créons notre arborescence, je vous propose l'architecture suivante :
mon_site-----
css----------
style.css-----
js-----
img-----
index.htmlEtape 1 - Créons nos premières lignes de code et notre structure !
index.html - etape 1 : structure du site web
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> ... </div> </header> <section> <div class="conteneur"> ... </div> </section> <footer> <div class="conteneur"> ... </div> </footer> </body> </html>
Etape 1 Html - Explication
Nous connaissons déjà la plupart de ces lignes de code (étudiées précédemment) : title pour un titre de page, link pour se relier à une feuille de style css, les balises meta pour l'encodage des caractères (utf-8) et initialiser l'affichage de l'écran.
Nous avons juste ajouté une ligne supplémentaire pour charger une google font.
Notre site web se divise en 3 tiers : header (haut), section (milieu), footer (bas).
style.css - etape 1 : structure du site web
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
Etape 1 CSS - ExplicationsNous appelons plusieurs balises pour casser leur héritage (nous aurions également pu faire un reset CSS complet), par exemple nous ne souhaitons pas que les paragraphes
<p> puissent avoir une marge imposée et décaler le reste de notre site. nous préférons dire qu'ils n'auront aucune marge pour gérer cela plus tard manuellement et au cas par cas.La police "Roboto" est ajoutée sur la balise body et html afin de s'appliquer sur toute la page web.
Concernant la balise header, nous lui donnons une couleur de fond (gris), de l'espace intérieur (padding), de la marge en bas (margin, pour décoller header et section) et pour finir une fine bordure en dessous (border). Nous faisons pareil avec la balise footer.
La balise section ne contient qu'une propriété min-height (hauteur minimum) car nous savons que du contenu va rentrer et faire agrandir cette zone. Cela est facultatif mais permet de repousser le footer plus bas en attendant d'avoir du contenu.
La classe conteneur sera ré-utilisée à plusieurs endroits (c'est la raison pour laquelle nous l'avons déclarée sous forme de classe et non pas d'id) : La largeur maximum sera de 1170 pixels.
Pour obtenir l'effet centré, nous avons utilisé
margin: 0 auto; La bordure quant à elle n'est présente que pour la distinguer durant la phase de conception et les tests, nous la retirons à la fin de notre création.
Voici notre résultat (provisoire) :
Etape 2 - Remplissons notre structure avec des zones
index.html - etape 2 : remplissons notre structure
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> ... </div> <div class="haut-droite"> ... </div> <div class="clear"></div> <nav> ... </nav> </div> </header> <section> <div class="conteneur"> <div class="milieu-haut-gauche"> ... </div> <div class="milieu-haut-droite"> ... </div> <div class="clear"></div> <div class="milieu-gauche"> ... </div> <div class="milieu-droite"> ... </div> <div class="clear"></div> </div> </section> <footer> <div class="conteneur"> ... </div> </footer> </body> </html>
Etape 2 Html - Explication
Nous remplissons nos zones principales (header, section, footer) avec des zones secondaires (haut-gauche, haut-droite, milieu-haut-gauche, milieu-haut-droite, milieu-gauche, milieu-droite).
La classe
clear est uniquement présente pour stopper l'effet flottant de certaines zones qui auront la propriété (float: left;).style.css - etape 2 : remplissons notre structure
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
/******************** Etape 2 : Zones ********************/
.clear{
clear: both;
}
.haut-gauche{
float: left;
width: 70%;
background: #074eee;
}
.haut-droite{
float: right;
width: 25%;
height: 75px;
background: #bcbe00;
}
nav{
margin: 0;
text-align: center;
background: #fda500;
}
.milieu-haut-gauche{
float: left;
width: 30%;
background: #074eee;
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
background: #bcbe00;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
background: #074eee;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
background: #bcbe00;
}
Etape 2 CSS - ExplicationNous prévoyons la classe CSS
clear pour stopper les effets flottants float: left;La zone haut-gauche se retrouve à côté de la zone haut-droite, idem pour milieu-haut-gauche avec milieu-haut-droite et les zones milieu-gauche avec milieu-droite.
Les largeurs (width) sont taillées en pourcentage % afin que les zones se redimensionnent automatiquement selon la taille de l'écran (responsive design fluide).
Les couleurs de fond (background) ne sont présentent uniquement dans la phase de construction du site web.
La zone
nav prend toute la largeur et nous prévoyons avec la propriété text-align: center; que les rubriques soient centrées.Pour la zone milieu-haut-droite, les propriétés
vertical-align: middle; display: table; permettront au texte d'être centré verticalement.Certaines zones possèdent un peu de marge pour s'écarter les unes des autres.
Voici notre résultat (provisoire) :
Etape 3 - Un peu de contenu en haut du site
index.html - etape 3 : Un peu de contenu en haut du site
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> <a href="index.html"> <h1>Nom Prenom</h1> </a> <h2><span>C</span>ommunication / <span>M</span>arketing / <span>D</span>igital</h2> </div> <div class="haut-droite"> <a href="">Télécharger mon CV</a> <a href="">Partagez</a> </div> <div class="clear"></div> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="moncv.html">Mon CV</a></li> <li><a href="mesprojets.html">Nos Projets</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <section> <div class="conteneur"> <div class="milieu-haut-gauche"> ... </div> <div class="milieu-haut-droite"> ... </div> <div class="clear"></div> <div class="milieu-gauche"> ... </div> <div class="milieu-droite"> ... </div> <div class="clear"></div> </div> </section> <footer> <div class="conteneur"> ... </div> </footer> </body> </html>
Etape 3 Html - Explication
Nous remplissons le haut de site (balise header) avec des titres, textes et liens.
style.css - etape 3 : Un peu de contenu en haut du site
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
/******************** Etape 2 : Zones ********************/
.clear{
clear: both;
}
.haut-gauche{
float: left;
width: 70%;
/*background: #074eee;*/
}
.haut-droite{
float: right;
width: 25%;
height: 75px;
/*background: #bcbe00; */
}
nav{
margin: 0;
text-align: center;
/* background: #fda500; */
min-height: 30px;
}
.milieu-haut-gauche{
float: left;
width: 30%;
background: #074eee;
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
background: #bcbe00;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
background: #074eee;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
background: #bcbe00;
}
/******************** Etape 3 : Contenu en haut du site ********************/
.haut-gauche h1{
color: #000000;
font-size: 1.7em;
margin: 10px 0 0 55px;
text-shadow: 1px 1px 1px;
}
.haut-gauche h2{
margin: 5px 0 0 0;
font-size: 1.1em;
letter-spacing: 3px;
}
.haut-gauche h2 span{
color: #8daab7;
}
.haut-droite a{
color: #8daab7;
display: block;
text-align: right;
/* border: 1px solid; */
}
.haut-droite a:first-child{
margin: 10px 0 0 0;
}
.haut-droite a:hover{
text-decoration: underline;
}
nav li {
display: inline;
list-style: none;
}
nav a{
display:inline-block;
line-height: 30px;
color: #000000;
padding: 0 5%;
}
nav a:hover{
color: #ffffff;
background: #8daab7;
border-radius: 10px;
transition: padding .2s;
}
Etape 3 CSS - ExplicationNous stylisons la balise h1 et h2 contenue dans la zone
haut-gauche. Idem pour les liens contenus dans la zone haut-droite.Nous mettons également en forme le menu avec un effet de transition lors du hover.
Voici notre résultat (provisoire) :
Notez que nous pouvons retirer les couleurs de fond des zones haut-gauche, haut-droite et nav car nous avons terminé notre haut de site
Etape 4 - Du contenu au milieu du site
index.html - etape 4 : Du contenu au milieu du site
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> <a href="index.html"> <h1>Nom Prenom</h1> </a> <h2><span>C</span>ommunication / <span>M</span>arketing / <span>D</span>igital</h2> </div> <div class="haut-droite"> <a href="">Télécharger mon CV</a> <a href="">Partagez</a> </div> <div class="clear"></div> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="moncv.html">Mon CV</a></li> <li><a href="mesprojets.html">Nos Projets</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <section> <div class="conteneur"> <div class="milieu-haut-gauche"> <img src="img/responsive.png" class="img-responsive" alt="Image d'illustration"> </div> <div class="milieu-haut-droite"> <p><span class="gras bleu">Vous êtes à la recherche d'un développeur pour gérer vos projets web ?</span><br><br> Je peux renforcer votre équipe autant sur la partie graphique que développement<br> Seriez-vous prêt à me doner ma chance ?<br></p> </div> <div class="clear"></div> <div class="milieu-gauche"> <h2>Présentation</h2> <div class="milieu-gauche-profil"> <img src="img/profil.png" class="img-responsive" alt="image de profil"> </div> <div class="milieu-droite-profil"> <p> Vous êtes à la recherche d'une personne compétente et efficace pour gérer vos projets web ?<br><br> Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... <br> </p> </div> <div class="clear"></div> <div class="milieu-bas-competences"> <div class="milieu-bas-competences-design"> <h2>Graphisme</h2><br> <a href=""><img src="img/design.png" class="img-responsive70" alt="service design"></a><br><br> <p>Séduire en offrant à vos visiteurs une navigation et une ergonomie adaptées à leurs habitudes et leurs équipements. </p> </div> <div class="milieu-bas-competences-integration"> <h2>Intégration</h2><br> <a href=""><img src="img/integration.png" class="img-responsive70" alt="service integration"></a><br><br> <p>Intégration responsive design compatible tout navigateur et respectueux du w3c. </p> </div> <div class="milieu-bas-competences-developpement"> <h2>Développement</h2><br> <a href=""><img src="img/dev.png" class="img-responsive70" alt="service developpement"></a><br><br> <p>Développement parfaitement fonctionnel et sécurisé. </p> </div> <div class="milieu-bas-competences-referencement"> <h2>Référencement</h2><br> <a href=""><img src="img/seo.png" class="img-responsive70 rotation" alt="service referencement"></a><br><br> <p>Un maximum de traffic pour votre site web. </p> </div> <div class="clear"></div> </div> </div> <div class="milieu-droite"> <div class="cadre"> <h2>Qui suis-je ?</h2> <p> Description en quelques lignes ... <br> Description en quelques lignes ... <br> Description en quelques lignes ... <br> </p> </div> <div class="cadre"> <h2>Experience</h2> <ul> <li>Experience 1 ... </li> <li>Experience 2 ... </li> <li>Experience 3 ... </li> </ul> </div> <div class="cadre"> <h2>Contact</h2> <form method="post"> <label for="expediteur">Votre email :</label><br> <input type="email" name="expediteur" id="expediteur" title="votre email"><br> <label for="expediteur">Votre message :</label><br> <textarea id="message" name="message" title="votre message"></textarea><br> <input type="submit" value="envoyer le message"><br> </form> </div> </div> <div class="clear"></div> </div> </section> <footer> <div class="conteneur"> ... </div> </footer> </body> </html>
Etape 4 Html - Explication
Nous remplissons le milieu de site (balise section) avec des titres, textes, images, formulaire et liens.
Voici un lien où vous pourrez vous procurer les images : Télécharger les images
style.css - etape 4 : Du contenu au milieu du site
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
/******************** Etape 2 : Zones ********************/
.clear{
clear: both;
}
.haut-gauche{
float: left;
width: 70%;
/*background: #074eee;*/
}
.haut-droite{
float: right;
width: 25%;
height: 75px;
/*background: #bcbe00; */
}
nav{
margin: 0;
text-align: center;
/* background: #fda500; */
min-height: 30px;
}
.milieu-haut-gauche{
float: left;
width: 30%;
background: #074eee;
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
background: #bcbe00;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
background: #074eee;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
background: #bcbe00;
}
/******************** Etape 3 : Contenu en haut du site ********************/
.haut-gauche h1{
color: #000000;
font-size: 1.7em;
margin: 10px 0 0 55px;
text-shadow: 1px 1px 1px;
}
.haut-gauche h2{
margin: 5px 0 0 0;
font-size: 1.1em;
letter-spacing: 3px;
}
.haut-gauche h2 span{
color: #8daab7;
}
.haut-droite a{
color: #8daab7;
display: block;
text-align: right;
/* border: 1px solid; */
}
.haut-droite a:first-child{
margin: 10px 0 0 0;
}
.haut-droite a:hover{
text-decoration: underline;
}
nav li {
display: inline;
list-style: none;
}
nav a{
display:inline-block;
line-height: 30px;
color: #000000;
padding: 0 5%;
}
nav a:hover{
color: #ffffff;
background: #8daab7;
border-radius: 10px;
transition: padding .2s;
}
/******************** Etape 4 : Du contenu au milieu du site ********************/
.bleu{ color: #8daab7; }
.gras{ font-weight: bold; }
.italic{ font-style: italic; }
.milieu-haut-gauche{
float: left;
width: 30%;
/* background: yellow; */
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
/* background: orange; */
}
.milieu-haut-droite p{
display: table-cell;
vertical-align: middle;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
/*background: #f12f65;*/
}
.milieu-gauche h2, .milieu-bas h2 {
color: #8daab7;
padding: 0.5em;
border-bottom: 1px solid;
border-top: 1px solid;
}
.milieu-gauche-profil{ float: left; width: 15%; }
.milieu-droite-profil{ float: left; margin-left: 5%; width: 80%; padding: 1em 0 0 0; }
.milieu-bas-competences{ /*background: green;*/ margin: 3em 0 0 0; }
.milieu-bas-competences-design{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-integration{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-developpement{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-referencement{ width: 21%; float: left; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences img{transition: 0.5s; }
.milieu-bas-competences img:hover{ transform: rotate(-360deg); }
.img-responsive{ width: 100%; }
.img-responsive50{ width: 80%; }
.img-responsive70{ width: 70%; }
.milieu-gauche ul li{
list-style-type: none;
background: url(img/fleche.jpg) left center no-repeat;
padding: 0 0 0 30px;
margin: 3% 0;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
/* background: #3298ff; */
}
.milieu-droite .cadre{
border: 1px solid #c0c0c0;
border-radius: 10px;
margin: 15px 0;
}
.milieu-droite .cadre:first-child{ margin: 0; }
.milieu-droite .cadre h2{
color: #333333;
font-size: 15px;
text-align: center;
padding: 5px 10px;
background: #f2f3f3;
border-bottom: 1px solid #c0c0c0;
border-radius: 10px 10px 0 0;
}
.milieu-droite .cadre p{
padding: 10px;
}
.milieu-droite .cadre form{
padding: 10px;
}
.milieu-droite .cadre ul li{
margin: 10px 0 0 30px;
padding: 5px;
}
input[type="submit"]{
color: #fff;
background-color: #8daab7;
margin: 1em 0 0 0;
border-color: #222;
display: inline-block;
padding: .5em 1em;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: .2em;
text-decoration: none;
}
input[type="submit"]:hover{
background: #000;
}
input { width: 100%; }
textarea{ resize: none; width: 100%; }
Etape 4 CSS - ExplicationNous stylisons tous les éléments dans la partie du milieu.
Voici notre résultat (provisoire) :
Etape 5 - Du contenu dans le bas du site
index.html - etape 5 : Du contenu dans le bas du site
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> <a href="index.html"> <h1>Nom Prenom</h1> </a> <h2><span>C</span>ommunication / <span>M</span>arketing / <span>D</span>igital</h2> </div> <div class="haut-droite"> <a href="">Télécharger mon CV</a> <a href="">Partagez</a> </div> <div class="clear"></div> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="moncv.html">Mon CV</a></li> <li><a href="mesprojets.html">Nos Projets</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <section> <div class="conteneur"> <div class="milieu-haut-gauche"> <img src="img/responsive.png" class="img-responsive" alt="Image d'illustration"> </div> <div class="milieu-haut-droite"> <p><span class="gras bleu">Vous êtes à la recherche d'un développeur pour gérer vos projets web ?</span><br><br> Je peux renforcer votre équipe autant sur la partie graphique que développement<br> Seriez-vous prêt à me doner ma chance ?<br></p> </div> <div class="clear"></div> <div class="milieu-gauche"> <h2>Présentation</h2> <div class="milieu-gauche-profil"> <img src="img/profil.png" class="img-responsive" alt="image de profil"> </div> <div class="milieu-droite-profil"> <p> Vous êtes à la recherche d'une personne compétente et efficace pour gérer vos projets web ?<br><br> Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... <br> </p> </div> <div class="clear"></div> <div class="milieu-bas-competences"> <div class="milieu-bas-competences-design"> <h2>Graphisme</h2><br> <a href=""><img src="img/design.png" class="img-responsive70" alt="service design"></a><br><br> <p>Séduire en offrant à vos visiteurs une navigation et une ergonomie adaptées à leurs habitudes et leurs équipements. </p> </div> <div class="milieu-bas-competences-integration"> <h2>Intégration</h2><br> <a href=""><img src="img/integration.png" class="img-responsive70" alt="service integration"></a><br><br> <p>Intégration responsive design compatible tout navigateur et respectueux du w3c. </p> </div> <div class="milieu-bas-competences-developpement"> <h2>Développement</h2><br> <a href=""><img src="img/dev.png" class="img-responsive70" alt="service developpement"></a><br><br> <p>Développement parfaitement fonctionnel et sécurisé. </p> </div> <div class="milieu-bas-competences-referencement"> <h2>Référencement</h2><br> <a href=""><img src="img/seo.png" class="img-responsive70 rotation" alt="service referencement"></a><br><br> <p>Un maximum de traffic pour votre site web. </p> </div> <div class="clear"></div> </div> </div> <div class="milieu-droite"> <div class="cadre"> <h2>Qui suis-je ?</h2> <p> Description en quelques lignes ... <br> Description en quelques lignes ... <br> Description en quelques lignes ... <br> </p> </div> <div class="cadre"> <h2>Experience</h2> <ul> <li>Experience 1 ... </li> <li>Experience 2 ... </li> <li>Experience 3 ... </li> </ul> </div> <div class="cadre"> <h2>Contact</h2> <form method="post"> <label for="expediteur">Votre email :</label><br> <input type="email" name="expediteur" id="expediteur" title="votre email"><br> <label for="expediteur">Votre message :</label><br> <textarea id="message" name="message" title="votre message"></textarea><br> <input type="submit" value="envoyer le message"><br> </form> </div> </div> <div class="clear"></div> </div> </section> <footer> <div class="conteneur"> <a href="">Informations</a> - <a href="">Mentions Légales</a> - <a href="contact.php">Contact</a> <br> <p>© 2015 Conception et réalisation par Nom Prenom. Tous droits réservés.</p> </div> </footer> </body> </html>
Etape 5 Html - Explication
Le footer contient quelques liens et une phrase de texte.
style.css - etape 5 : Du contenu au milieu du site
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
/******************** Etape 2 : Zones ********************/
.clear{
clear: both;
}
.haut-gauche{
float: left;
width: 70%;
/*background: #074eee;*/
}
.haut-droite{
float: right;
width: 25%;
height: 75px;
/*background: #bcbe00; */
}
nav{
margin: 0;
text-align: center;
/* background: #fda500; */
min-height: 30px;
}
.milieu-haut-gauche{
float: left;
width: 30%;
background: #074eee;
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
background: #bcbe00;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
background: #074eee;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
background: #bcbe00;
}
/******************** Etape 3 : Contenu en haut du site ********************/
.haut-gauche h1{
color: #000000;
font-size: 1.7em;
margin: 10px 0 0 55px;
text-shadow: 1px 1px 1px;
}
.haut-gauche h2{
margin: 5px 0 0 0;
font-size: 1.1em;
letter-spacing: 3px;
}
.haut-gauche h2 span{
color: #8daab7;
}
.haut-droite a{
color: #8daab7;
display: block;
text-align: right;
/* border: 1px solid; */
}
.haut-droite a:first-child{
margin: 10px 0 0 0;
}
.haut-droite a:hover{
text-decoration: underline;
}
nav li {
display: inline;
list-style: none;
}
nav a{
display:inline-block;
line-height: 30px;
color: #000000;
padding: 0 5%;
}
nav a:hover{
color: #ffffff;
background: #8daab7;
border-radius: 10px;
transition: padding .2s;
}
/******************** Etape 4 : Du contenu au milieu du site ********************/
.bleu{ color: #8daab7; }
.gras{ font-weight: bold; }
.italic{ font-style: italic; }
.milieu-haut-gauche{
float: left;
width: 30%;
/* background: yellow; */
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
/* background: orange; */
}
.milieu-haut-droite p{
display: table-cell;
vertical-align: middle;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
/*background: #f12f65;*/
}
.milieu-gauche h2, .milieu-bas h2 {
color: #8daab7;
padding: 0.5em;
border-bottom: 1px solid;
border-top: 1px solid;
}
.milieu-gauche-profil{ float: left; width: 15%; }
.milieu-droite-profil{ float: left; margin-left: 5%; width: 80%; padding: 1em 0 0 0; }
.milieu-bas-competences{ /*background: green;*/ margin: 3em 0 0 0; }
.milieu-bas-competences-design{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-integration{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-developpement{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-referencement{ width: 21%; float: left; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences img{transition: 0.5s; }
.milieu-bas-competences img:hover{ transform: rotate(-360deg); }
.img-responsive{ width: 100%; }
.img-responsive50{ width: 80%; }
.img-responsive70{ width: 70%; }
.milieu-gauche ul li{
list-style-type: none;
background: url(img/fleche.jpg) left center no-repeat;
padding: 0 0 0 30px;
margin: 3% 0;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
/* background: #3298ff; */
}
.milieu-droite .cadre{
border: 1px solid #c0c0c0;
border-radius: 10px;
margin: 15px 0;
}
.milieu-droite .cadre:first-child{ margin: 0; }
.milieu-droite .cadre h2{
color: #333333;
font-size: 15px;
text-align: center;
padding: 5px 10px;
background: #f2f3f3;
border-bottom: 1px solid #c0c0c0;
border-radius: 10px 10px 0 0;
}
.milieu-droite .cadre p{
padding: 10px;
}
.milieu-droite .cadre form{
padding: 10px;
}
.milieu-droite .cadre ul li{
margin: 10px 0 0 30px;
padding: 5px;
}
input[type="submit"]{
color: #fff;
background-color: #8daab7;
margin: 1em 0 0 0;
border-color: #222;
display: inline-block;
padding: .5em 1em;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: .2em;
text-decoration: none;
}
input[type="submit"]:hover{
background: #000;
}
input { width: 100%; }
textarea{ resize: none; width: 100%; }
/******************** Etape 5 : Du contenu en bas du site ********************/
footer{
background: #F2F2F2;
border-top: 1px solid #c0c0c0;
margin: 2em 0 0 0;
text-align: center;
padding: 20px 0;
}
footer a{
color: #8daab7;
}
footer a:hover{
text-decoration: underline;
}
footer p{
margin: 7px 0 0 0;
}
Etape 5 CSS - ExplicationNous stylisons tous les éléments dans la partie du bas.
Voici notre résultat :
Etape 6 - Responsive design pour être compatible tout supports
index.html - etape 6 : Du responsive design
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> <a href="index.html"> <h1>Nom Prenom</h1> </a> <h2><span>C</span>ommunication / <span>M</span>arketing / <span>D</span>igital</h2> </div> <div class="haut-droite"> <a href="">Télécharger mon CV</a> <a href="">Partagez</a> </div> <div class="clear"></div> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="moncv.html">Mon CV</a></li> <li><a href="mesprojets.html">Nos Projets</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <section> <div class="conteneur"> <div class="milieu-haut-gauche"> <img src="img/responsive.png" class="img-responsive" alt="Image d'illustration"> </div> <div class="milieu-haut-droite"> <p><span class="gras bleu">Vous êtes à la recherche d'un développeur pour gérer vos projets web ?</span><br><br> Je peux renforcer votre équipe autant sur la partie graphique que développement<br> Seriez-vous prêt à me doner ma chance ?<br></p> </div> <div class="clear"></div> <div class="milieu-gauche"> <h2>Présentation</h2> <div class="milieu-gauche-profil"> <img src="img/profil.png" class="img-responsive" alt="image de profil"> </div> <div class="milieu-droite-profil"> <p> Vous êtes à la recherche d'une personne compétente et efficace pour gérer vos projets web ?<br><br> Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... <br> </p> </div> <div class="clear"></div> <div class="milieu-bas-competences"> <div class="milieu-bas-competences-design"> <h2>Graphisme</h2><br> <a href=""><img src="img/design.png" class="img-responsive70" alt="service design"></a><br><br> <p>Séduire en offrant à vos visiteurs une navigation et une ergonomie adaptées à leurs habitudes et leurs équipements. </p> </div> <div class="milieu-bas-competences-integration"> <h2>Intégration</h2><br> <a href=""><img src="img/integration.png" class="img-responsive70" alt="service integration"></a><br><br> <p>Intégration responsive design compatible tout navigateur et respectueux du w3c. </p> </div> <div class="milieu-bas-competences-developpement"> <h2>Développement</h2><br> <a href=""><img src="img/dev.png" class="img-responsive70" alt="service developpement"></a><br><br> <p>Développement parfaitement fonctionnel et sécurisé. </p> </div> <div class="milieu-bas-competences-referencement"> <h2>Référencement</h2><br> <a href=""><img src="img/seo.png" class="img-responsive70 rotation" alt="service referencement"></a><br><br> <p>Un maximum de traffic pour votre site web. </p> </div> <div class="clear"></div> </div> </div> <div class="milieu-droite"> <div class="cadre"> <h2>Qui suis-je ?</h2> <p> Description en quelques lignes ... <br> Description en quelques lignes ... <br> Description en quelques lignes ... <br> </p> </div> <div class="cadre"> <h2>Experience</h2> <ul> <li>Experience 1 ... </li> <li>Experience 2 ... </li> <li>Experience 3 ... </li> </ul> </div> <div class="cadre"> <h2>Contact</h2> <form method="post"> <label for="expediteur">Votre email :</label><br> <input type="email" name="expediteur" id="expediteur" title="votre email"><br> <label for="expediteur">Votre message :</label><br> <textarea id="message" name="message" title="votre message"></textarea><br> <input type="submit" value="envoyer le message"><br> </form> </div> </div> <div class="clear"></div> </div> </section> <footer> <div class="conteneur"> <a href="">Informations</a> - <a href="">Mentions Légales</a> - <a href="contact.php">Contact</a> <br> <p>© 2015 Conception et réalisation par Nom Prenom. Tous droits réservés.</p> </div> </footer> </body> </html>
Etape 6 Html - Explication
Le code HTML ne change pas.
style.css - etape 6 : Du Responsive Design
/******************** Etape 1 : Structure ********************/
h1,h2,h2,p,a,ul,li{
margin: 0;
padding: 0;
text-decoration: none;
}
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
}
header{
background: #F2F2F2;
padding: 0 0 0.3em 0;
margin: 0 0 2em 0;
border-bottom: 1px solid #c0c0c0;
}
section{ min-height: 700px; }
footer{ /* zone du bas */
background: #F2F2F2; /* fond */
border-top: 1px solid #c0c0c0; /* bordure en haut */
margin: 2em 0 0 0; /* marge du dessus */
text-align: center; /* centrer le texte */
padding: 20px 0; /* marge intérieur */
}
.conteneur{
max-width: 1170px;
margin: 0 auto;
border: 1px dotted;
}
/******************** Etape 2 : Zones ********************/
.clear{
clear: both;
}
.haut-gauche{
float: left;
width: 70%;
/*background: #074eee;*/
}
.haut-droite{
float: right;
width: 25%;
height: 75px;
/*background: #bcbe00; */
}
nav{
margin: 0;
text-align: center;
/* background: #fda500; */
min-height: 30px;
}
.milieu-haut-gauche{
float: left;
width: 30%;
background: #074eee;
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
background: #bcbe00;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
background: #074eee;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
background: #bcbe00;
}
/******************** Etape 3 : Contenu en haut du site ********************/
.haut-gauche h1{
color: #000000;
font-size: 1.7em;
margin: 10px 0 0 55px;
text-shadow: 1px 1px 1px;
}
.haut-gauche h2{
margin: 5px 0 0 0;
font-size: 1.1em;
letter-spacing: 3px;
}
.haut-gauche h2 span{
color: #8daab7;
}
.haut-droite a{
color: #8daab7;
display: block;
text-align: right;
/* border: 1px solid; */
}
.haut-droite a:first-child{
margin: 10px 0 0 0;
}
.haut-droite a:hover{
text-decoration: underline;
}
nav li {
display: inline;
list-style: none;
}
nav a{
display:inline-block;
line-height: 30px;
color: #000000;
padding: 0 5%;
}
nav a:hover{
color: #ffffff;
background: #8daab7;
border-radius: 10px;
transition: padding .2s;
}
/******************** Etape 4 : Du contenu au milieu du site ********************/
.bleu{ color: #8daab7; }
.gras{ font-weight: bold; }
.italic{ font-style: italic; }
.milieu-haut-gauche{
float: left;
width: 30%;
/* background: yellow; */
}
.milieu-haut-droite{
float: left;
width: 70%;
font-size: 1.2em;
vertical-align: middle;
display: table;
line-height: 1.3em;
text-align: center;
height: 20vh;
/* background: orange; */
}
.milieu-haut-droite p{
display: table-cell;
vertical-align: middle;
}
.milieu-gauche{
float: left;
width: 60%;
margin: 1.5em 0 1.5em 0;
/*background: #f12f65;*/
}
.milieu-gauche h2, .milieu-bas h2 {
color: #8daab7;
padding: 0.5em;
border-bottom: 1px solid;
border-top: 1px solid;
}
.milieu-gauche-profil{ float: left; width: 15%; }
.milieu-droite-profil{ float: left; margin-left: 5%; width: 80%; padding: 1em 0 0 0; }
.milieu-bas-competences{ /*background: green;*/ margin: 3em 0 0 0; }
.milieu-bas-competences-design{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-integration{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-developpement{ width: 21%; float: left; margin-right: 5%; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences-referencement{ width: 21%; float: left; /*background: yellow;*/ text-align: center; min-height: 300px; }
.milieu-bas-competences img{transition: 0.5s; }
.milieu-bas-competences img:hover{ transform: rotate(-360deg); }
.img-responsive{ width: 100%; }
.img-responsive50{ width: 80%; }
.img-responsive70{ width: 70%; }
.milieu-gauche ul li{
list-style-type: none;
background: url(img/fleche.jpg) left center no-repeat;
padding: 0 0 0 30px;
margin: 3% 0;
}
.milieu-droite{
float: right;
width: 30%;
margin: 1.5em 0 1.5em 0;
/* background: #3298ff; */
}
.milieu-droite .cadre{
border: 1px solid #c0c0c0;
border-radius: 10px;
margin: 15px 0;
}
.milieu-droite .cadre:first-child{ margin: 0; }
.milieu-droite .cadre h2{
color: #333333;
font-size: 15px;
text-align: center;
padding: 5px 10px;
background: #f2f3f3;
border-bottom: 1px solid #c0c0c0;
border-radius: 10px 10px 0 0;
}
.milieu-droite .cadre p{
padding: 10px;
}
.milieu-droite .cadre form{
padding: 10px;
}
.milieu-droite .cadre ul li{
margin: 10px 0 0 30px;
padding: 5px;
}
input[type="submit"]{
color: #fff;
background-color: #8daab7;
margin: 1em 0 0 0;
border-color: #222;
display: inline-block;
padding: .5em 1em;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: .2em;
text-decoration: none;
}
input[type="submit"]:hover{
background: #000;
}
input { width: 100%; }
textarea{ resize: none; width: 100%; }
/******************** Etape 5 : Du contenu en bas du site ********************/
footer{
background: #F2F2F2;
border-top: 1px solid #c0c0c0;
margin: 2em 0 0 0;
text-align: center;
padding: 20px 0;
}
footer a{
color: #8daab7;
}
footer a:hover{
text-decoration: underline;
}
footer p{
margin: 7px 0 0 0;
}
/******************** Etape 6 : Du responsive design ********************/
@media (max-width: 768px) {
.haut-gauche{ width: 100%; margin-bottom: 1em;}
.haut-droite{ display: none; } /* on ne propose pas le d/l de cv sur mobile */
nav a{ display: block; }
.milieu-gauche{ width: 100%; /* background: red; */ }
.milieu-droite{ width: 100%; /* background: green; */ }
.milieu-droite .cadre{ width: 100%; }
.milieu-haut-gauche, .milieu-haut-droite{ width: 100%; }
.milieu-bas-competences-design{ width: 40%; }
.milieu-bas-competences-integration{ width: 40%; }
.milieu-bas-competences-developpement{ width: 40%; }
.milieu-bas-competences-referencement{ width: 40%; }
}
@media (max-width: 992px) { }
@media (max-width: 1200px) { }
Etape 6 CSS - ExplicationPour les mobiles : Si l'internaute possède une résolution d'écran inférieur a 768 pixels, nous cacherons la zone en haut à droite et laisserons la zone en haut à gauche prendre 100% de la largeur.
De la même manière les liens du menu prendront toute la place nécessaire en pleine largeur.
Les zones du milieu seront également redimensionnées pour une meilleure qualité de navigation
Pour les tablettes et les ordinateurs portables : nous ne définissons aucune régle d'affichage en particulier.
Pour les ordinateurs de bureau : le style css par défaut s'applique.
Voici notre résultat final sur mobile :
Pour arriver à ce résultat, il est nécesaire de redimensionner la fenêtre pour simuler un petit écran.
Etape 7 - Validation W3C
Pour être sur et certain que notre code est bon, je vous invite à vous rendre sur le site officiel du w3c pour la validation de code
Vous verrez, notre site est bien valide W3C !
C'est bon signe ! en revanche pensez quand même à le tester sur différents navigateurs : Google Chrome, Firefox, Internet Explorer, Safari, Opéra.
Etape 8 - Créer d'autres pages
Comme vous l'avez vu les liens ne pointent nulle part en particulier. N'hesitez pas à créer les autres pages correspondantes et à améliorer ce site !
Par exemple, pour la page moncv.html, voici la strucutre à garder :
moncv.html - nouvelle page
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Web</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="conteneur"> <div class="haut-gauche"> <a href="index.html"> <h1>Nom Prenom</h1> </a> <h2><span>C</span>ommunication / <span>M</span>arketing / <span>D</span>igital</h2> </div> <div class="haut-droite"> <a href="">Télécharger mon CV</a> <a href="">Partagez</a> </div> <div class="clear"></div> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="moncv.html">Mon CV</a></li> <li><a href="mesprojets.html">Nos Projets</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <section> <div class="conteneur"> </div> </section> <footer> <div class="conteneur"> <a href="">Informations</a> - <a href="">Mentions Légales</a> - <a href="contact.php">Contact</a> <br> <p>© 2015 Conception et réalisation par Nom Prenom. Tous droits réservés.</p> </div> </footer> </body> </html>
Et bien entendu, le code CSS ne change pas, ce sera à vous d'ajouter les lignes en fonction du code Html que vous développerez.
Etape 9 - Hebergement & Mise en ligne
Après avoir développé plusieurs pages supplémentaires et vous être assuré que l'affichage correspondait à vos attentes ainsi que compatible (sur chacun des navigateurs couramment utilisés par vos internautes), vous pourriez éventuellement mettre ce site en ligne.
Etape 10 - Partagez votre lien de site web et améliorer votre référencement
Un site c'est bien, mais vous pouvez faire le meilleur site du monde, s'il n'est pas visible vous n'aurez pas de visite.
Créer son site avec l'aide d'un thème graphique
Si malgré toutes les explications et vos efforts, la création d'un site web vous parait fastidieuse, vous pouvez toujours vous rabattre sur l'utilisation d'un thème graphique.
Il s'agit de thème graphique déjà écrit et prêt à l'utilisation (parfois gratuit, parfois payant).
Toutefois les clients ne sont pas toujours d'accord pour avoir le « design de tout le monde » .
Quoi qu'il en soit, il est important de connaitre les langages Html et Css car vous aurez sans doute besoin d'apporter des modifications.
Plusieurs sites regroupant des thèmes pré-conçus existent dont Thème Forest
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web
