Créer un site perso
22 août 2008
Créer un site perso est toujours utile pour un blogueur, il permet de donner des renseignements ou encore tout les endroits où les internautes peuvent vous retrouver sur le net, un peu comme une page “à propos”, plus personnelle.
De plus pour vos cartes de visites, il est plus simple de mettre l’adresse de son site perso que 26 liens différents.
Tout d’abord énumérons ce qui est essentiel, un logo, une description, un header et des liens. Bien sûr, vous pourrez y incorporer d’autres choses, à vous de voir selon vos besoins et objectifs.
Nous allons donc créer un site ressemblant à la maquette ci-dessous qui n’est en réalité que mon propre site perso.
Premièrement créons le header, qui regroupe le logo, le header et la description en mot clé. Ouvrez Photoshop (ou logiciel similaire) et créez votre header comme vous le désirez, vous n’êtes pas obligé de faire la même chose que moi, comme je le disais plus haut c’est personnel, il faut que ce soit le reflet de votre personnalité.
Une fois la tache accomplie il est temps de coder le tout. Créez donc un fichier index.html et un fichier style.css. Dans le fichier index.html , insérez :
<div id="header"> <p align="right">Votre description (sur la maquette : étudiant - blogueur etc ...)</p> </div>
et dans le fichier style.css :
#header
{
width: 915px;
height: 373px;
background-image: url(images/header.png);
background-repeat: no-repeat;
color: #fff;
padding-top: 44px;
font-style: bold;
font-size: 20px;
}
Maintenant il faut coder les liens, bien sur mettez ce que vous voulez et créez une icône pour chaque lien. On met donc dans le fichier index.html :
<p>Retrouvez moi sur : </p> </div> <div id="left_links"> <a href="Lien 1"><img src="icone 1" alt=""/> Site 1</a><br/><br/><br/> <a href="Lien 2"><img src="icone 2" alt=""/> Site 2</a><br/><br/><br/> <a href="Lien 3"><img src="icone 3" alt=""/> Site 3</a><br/><br/><br/> </div> <div id="right_links"> <a href="Lien 4"><img src="icone 4" alt=""/> Site 4</a><br/><br/><br/> <a href="Lien 5"><img src="icone 5" alt=""/> Site 5</a><br/><br/><br/> <a href="Lien 6"><img src="icone 6" alt=""/> Site 6</a><br/><br/><br/> </div>
et dans le fichier style.css :
#find
{
font-style: bold ;
font-size: 20pt ;
}
#left_links
{
float: right;
padding-left: 132px;
margin-right: 136px;
width: 459px;
height: auto;
font-style: bold ;
color: #fff;
}
#left_links
{
float: left;
width: 321px;
height: auto;
font-style: bold ;
color: #fff;
}
Maintenant il ne reste plus qu’à styler les liens et le body au début de style.css :
body
{
width: 913px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
color: #FFF;
background-color: #000;
font-family: verdana, sans-serif ;
}
a:link
{
border-width: 0px ;
color: #FFFFFF ;
text-decoration:none ;
font-style: bold ;
font-size: 15pt ;
}
a img
{
border: none;
}
a:visited
{
border-width: 0px ;
color: #FFFFFF ;
text-decoration:none ;
font-style: bold ;
font-size: 15pt ;
}
a:hover
{
border-width: 0px ;
color: #FFFFFF ;
text-decoration:none ;
font-style: bold ;
font-size: 16pt ;
}
et à insérer les balises essentielles en tête de index.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Le titre de votre site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="css" href="style.css" /> </head>
Et voilà votre site perso est prêt ! Bien sur n’hésitez pas à modifier à votre guise ce code et ces images, intégrez plus de fonctions comme le flux RSS de votre blog ou encore un formulaire de contact, faites parler votre personnalité !
Sur ce, à lundi 
Abonnez vous par 
Très bel article !
Mais ça n’a pas d’importances ici je pense.
En tout cas comme tu le dis c’est un réel atout à mettre rapidement de son côté. Par contre niveau programmation, j’aurais des choses à dire …
Moi je reste sceptique sur le but d’un tel site, tu peux facilement mettre l’ensemble de tes liens “web 2.0″ sur ton blog. Je trouve qu’il n’apporte aucune information sur le bloggeur que tu es et c’est dommage.
@Julien : je me doute que niveau programmation c’est pas top, faut dire … je suis assez … bourrin ^^
@Tony : bien sur on peut mettre tout ces liens sur son blog, mais sur ta carte de visite ou quand tu veux donner des liens à des gens, c’est un peu plus simple que de leur dire “tu va sur mon blog et après tu va dans à propos et puis t’aura les liens”, de plus l’inconvénient quand tu le met sur ton blog, c’est que le design reste celui du blog, ici tu fais ce que tu veux
Cela dit en passant, j’ai aussi un reproche à formuler sur les pages “a propos” blogs. En avoir une, c’est essentiel - cela permet au lecteur de mieux identifier le bloggeur, cependant je trouve que ce genre de page manque souvent de précision…
A force de visiter des blogs autours de thèmes similaires, on tombe toujours sur “le blog d’un geek qui aime le web, les blogs…etc”, ou alors “le webdesigneur/graphiste/illustrateur freelance”. Attention, je ne dénigre ni les geek ni les créatifs (étant dans les deux catégories), c’est juste que j’ai souvent l’impression que tous nos profils se ressemble.
Je ne suis pas d’accord avec Tony, effectivement on peut mettre ce genre de liens sur un blog, mais il est toujours plus professionnel et adéquate d’avoir une page (sobre) qui les regroupe. Il faut garder en tête que ton futur employeur peut un jour tomber sur ton blog/site : il faut lui faciliter la vie !
Ne faut-il pas justement se différencier des autres ? Pas forcément dans le sens “je suis meilleur que le voisin”, mais plutôt “voici mes passions, mes références, et voila ce que j’en fais, voila ce qui fait de moi un geek, ou un webdesigneur/graphiste/illustrateur différent des 250 autres. C’est ce que j’essaye de faire, en tout cas.
En effet la page “à propos” est quelque chose de TRÈS TRÈS difficile à bien faire, car elle doit être dans le même style que le blog, d’où l’intérêt d’un site perso qui vous reflétera vraiment. Personnellement je n’ai pas décidé de me décrire, j’ai décidé de mettre des mots-clés qui montrent ce que je suis.
Pour le reste, monsieurT résume bien la chose …
Je tiens quand même à rajouter que le site perso doit rester très sobre et léger, il ne doit pas être chargé, rappelons que sont but est d’aider les visiteurs
Je pense que quitte à faire une telle page, autant l’optimiser (puisqu’on a plus la main sur le code que dans un simple billet) au niveau SEO et CSS, l’intégrer de façon sémantiquement correcte, c’est à dire en utilisant le plus possible les balises html ayant du sens (ul, li, h1, h2, acronym …) pour les navigateurs ainsi que pour les moteurs de recherche.
Sur ta page, tu peux mettre tes 6 liens dans à l’intérieur d’une balise liste puis la mettre en forme ensuite avec css.
@Monsieur T : Je suis d’accord avec toi, les page “à propos de l’auteur” sont souvent remplies très succinctement par leur auteur et finissent par se ressembler toutes alors que lorsque l’on lit un blog, on a quand même envie de savoir qui on lit …
A ce compte là, n’est-il pas plus intéressant de faire un portfolio en plus du blog ? (ça prend plus de temps !) ou en tout cas, comme le dit Tophe, de faire un code beaucoup plus optimisé html/css.
@Tony : pour ce qui est du portfolio ça prends énormément de temps :s
Ensuite pour ce qui est du code, je ne code effectivement pas très propre ^^ (pas du tout même :p) alors je fait du mieux que je peux :s, si vous l’avez optimisé n’hésitez pas à l’envoyer
Il serai judicieux également de l’optimiser pour le référencement, mais c’est une autre histoire !
@MonsieurT : Oui mais est-ce réellement le but de l’optimiser pour le référencement, l’unique but est d’être premier quand on tape ton nom à la limite, ce qui est le cas pour moi
Et hop, on met tout ça de côté, on ne sait jamais ça peut toujours servir
Excellent Billet, bravo,
Amitiés A+,
Hugues