»Primo on va écrire le squelette de notre page, en prenant garde que PSPad (ou NVU) est bien paramètré pour produire de l'utf-8.
- langue utilisée
- charset utilisé est l'utf-8 (il n'y a pas de question à se poser! c'est universel)
- description du contenu affiché par les moteurs de recherche
- renseignements sur l'auteur
- mots-clés associés
- le titre de la page affiché par le navigateur
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="CV de Vincent Mazenod: programmeur web et bases de données" />
<meta name="author" content="Vincent Mazenod" />
<meta name="keywords" content="CV, www, web, bases de données, PHP, JavaScript, PROGRESS" />
<title>CV de Vincent Mazenod :: programmeur web et bases de données</title>
</head>
<body>
<!-- J'en profite pour vous signaler comment faire un commentaire en HTML
(non affiché par le navigateur -->
</body>
</html>
Bon un CV à cela de particulier qu'il présente toujours les mêmes renseignements, rangés par rubriques hiérarchiques. En ce qui me concerne je découperai comme suit:
- Etat civil
- Diplômes
- Expériences
- Compétences
- Réalisations
- Divers
- Hobby
Dernière réflexion, on m'a souvent répété qu'il ne fallait pas intitulé son CV "CV de Vincent Mazenod", donc le mien s'intitulera modestement "Vincent MAZENOD" ;-). C'est incontestablement le grand titre donc la première ligne de mon <body> va être
<h1>Vincent Mazenod</h1>
Ensuite mes sous titres sont clairement les parties que j'ai défini plus haut
<h2>Etat civil</h2>
...
<h2>Diplômes</h2>
...
<h2>Expériences<h2>
..
<h2>Compétences</h2>
...
<h2>Réalisations</h2>
...
<h2>Divers</h2>
..
<h2>Hobby</h2>
Pour ce qui est de la plupart des parties j'aurais clairement une simple liste à la place des (...) et éventuellement un sous titre. Ce qui donnera typiquement pour mes dipômes:
<h3> A l'UFR des Sciences Exactes et Naturelles de Clermont-Ferrand (63)</h3>
<ul>
<li>Maîtrise d'informatique en 2001</li>
<li>Licence d'informatique mention AB en 2000</li>
<li>DEUG mathémathique et informatique en 98</li>
</ul>
<h3> Au Lycée Banville à Moulins (03)</h3>
<ul>
<li>Bac S mention AB en 95</li>
</ul>
Pour l'état civil, en cherchant un peu je me suis apreçu qu'il existait une balise address qui semble tout indiqué pour contenir mon adresse postale.
<address>
65, Boulevard François Mitterand
63000 Clermont Ferrand
</address>
Pour ce qui est du logo de mes employeurs, je les insèrerai à l'intérieur de la balise de titre, afin que l'image et le titre s'affiche sur la même ligne, nous verrons comme affiner un peu tout ça avec CSS.
<h3>
<img src="http://vmazenod.free.fr/Img/cnrs.gif" alt="logo du CNRS" title="logo du CNRS" />
Position actuelle
</h3>
Maintenant, je souhaiterai faire un petit formulaire qui permet de m'envoyer par mail ses impressions à chaud (celles du visiteurs).
Pour ça je vais crééer une simple zone de texte ou l'internaute pourra saisir son texte, avec un bouton pour valider l'envoie. Le tout sera encapsulé dans une balise form avec une balise action qui pointe vers un mail ...
<form action="mailto: mazenovi@caramail.com">
<textarea>Vos impressions!!</textarea>
<input type="submit" value="envoyer" />
</form>
Notez que mon baratin concernant le risque de SPAM des adresses électroniques écrites en toute page dans une page web, tient toujours, donc il faudra en core s'en préoccupé (plutot en JavaScript) pour la protéger. La route est longue ...
Vous pouvez maintenant télécharger ma version de mon CV ici.
Cà na pas beaucoup de sex appeal ok, mais j'ai une structure de document qui correspond parfaitement à l'information que je veux présenter et mettre en évidence.
Je vous propose donc maintenant, d'enjoliver notre oeuvre en utilisant CSS.
