image du bandeau imprimer

[le code html de la page index du cv]

[Créer une page en HTML]

Les balises :

En HTML, chaque instruction est composée d'une balise entrante, et d'une balise sortante.

exemple, la balise "p" qui désigne un paragraphe :
<p>Ceci est un paragraphe</p>
Chaque balise est encadrée par < et > La balise sortante est précédée par le signe /

Les balises doivent être écrites en caractères minuscules.(elles sont écrites en majuscule dans ces pages pour des raisons de lisibilité).

Les balises HTML, TITLE, HEAD et BODY :
Il existe quatre balises essentielles :
- HTML = précise que c'est un document html.
- TITLE = affiche le nom de la page en haut de la fenêtre du navigateur.
- HEAD = délimite l'en-tête du document (qui contient des informations diverses).
- BODY = délimite le corps du document (qui contient le texte, les images, etc.).




Pourquoi un DOCTYPE ?

Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE.

Les DOCTYPEs sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux normes, comme Mozilla, IE5/Mac, et IE6/Win.

Un DOCTYPE récent qui inclut une URI complète (une adresse web complète) commande à ces navigateurs d'afficher votre page en utilisant le "mode conforme" (NdT : "standard-complient mode" , vous pouvez retomber souvent sur le terme), traitant ainsi votre (X)HTML, CSS, et DOM de la manière que vous voulez.



La DOCTYPE ecrite ici sur deux lignes, ne doit être écrite que sur une seule ligne dans votre document pour être valable.
		
<!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" lang="fr" xml:lang="fr">

La balise HEAD :

Les informations qu'elle contient sont lues en premier pour afficher la page.

Quand on débute, il n'est pas nécessaire de s'intéresser au contenu de la balise HEAD.
On peut passer directement au contenu de la balise BODY (voir plus bas).

La balise HEAD contient essentiellement :
- des balises META,
- du code JavaScript,
- des références aux feuilles de style.




<head>

Les balises META :

Elles contiennent des informations sur le contenu de la page

Elles sont destinées essentiellement aux moteurs de recherche qui indexent les sites web.

Elles permettent de :
- donner des informations sur l'auteur, la langue utilisée,
- donner des informations sur le contenu de la page,
- donner des indications aux robots qui parcourent les sites.

Les balises META sont de différentes sortes :
Informations sur la nature du document, les caractères utilisés, l'auteur, la langue.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="votre nom" / >
<meta http-equiv="language" content="fr" />

Informations sur le contenu de la page :
<meta name="description" content="Le contenu de mon site / >
Les mots clefs séparés par une virgule
<meta name=Keywords" content="mot clef1,mot clef2,mot clef3... " / >

Informations destinées aux robots :
<meta name="robots" content="index,follow" />



  <meta http-equiv="Content-Type" content="text/html;
   charset=iso-8859-1"/>

  <title>cv des stagiaires | accueil</title>
</head>
  

La balise BODY :

La balise BODY contient le code HTML de tout ce qui s'affiche à l'écran : textes, images, tableaux, liens hypertexte. C'est là que se situe le véritable travail sur une page web

Composition d'une page web :
- le fond de page,
- le texte,
- les images,
- les liens hypertextes,
- les tableaux.

<body>
 
</body>
</html>

[étape1. organiser ses dossiers]


groupe de calques

Créez un nouveau dossier et nommez le "cv". Ouvrez le et créez à l'intérieur deux nouveaux dossiers que vous nommez "travail" et "site"

Le dossier " travail" servira a ranger tous vos documents servant à la préparation du site (maquettes photoshop, texte word, photos brutes...)

Le dossier "site" ne contiendra que les documents servant à l'affichage de votre site (pages.htm, dossier CSS, images du site, page.php) et rien d'autre.

icone zip telecharger les images de travail de l'interface du cv

Dans le dossier "site " créez un dossier "image_site" ranger toutes les images que vous venez de telécharger (seulement les images pas les dossiers les comportant)

Dans dreamweaver (ou dans un fichier texte en modifiant l'extention ".txt" par ".htm") créez un nouveau document et nommez le "index.htm" enregistez le à côté du dossier "image_site"

[étape2. la DOCTYPE et les métas]

<!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" lang="fr" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="motclef1,motclef2,motclef3... " />
<meta name="robots" content="index,follow" /> <title>cv des stagiaires | accueil</title>
</head> <body></body>
</html>

[étape3. les principales balises]

Le code de base :

		
<!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" lang="fr" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="motclef1,motclef2,motclef3... " />
<meta name="robots" content="index,follow" /> <title>cv des stagiaires | accueil</title> </head> <body> <div id="global"> <div id="bandeau"> bandeau </div> <div id="menu"> menu </div> <div id="contenu> <h1>accueil</h1> <h2 class="titre">paragraphe 1 </h2> <p>paragraphed</p> <p>paragraphe</p> <br/> <h2 class="titre">paragraphe 2</h2> <p>paragraphe</p> <p>paragraphed</p> </div> <div id="pied"> pied </div> </div> </body> </html>

voir le résultat

[étape4. Le code du menu]




<div id="menu"> <ul class="menu"> <li><a href="index.htm">accueil</a></li> <li>|</li> <li><a href="contact.htm">contact</a></li>
<li class="icone"><a href="#" OnClick="window.print();"> <img class="icone" src="image_site/icone.png" alt=" imprimer la page " title=" imprimer la page "/> </a></li> </ul> </div>


[étape5. Ajout du menu et des images d'intreface]

Le code final :

		
<!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" lang="fr" xml:lang="fr">

<head>
  <meta http-equiv="Content-Type" content="text/html;
   charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="motclef1,motclef2,motclef3... " />
<meta name="robots" content="index,follow" /> <title>cv des stagiaires | accueil</title> </head> <body id="accueil"> <div id="global"> <div id="bandeau">

<!-- l'image du bandeau et le titre -->

<img src="image_site/bandeau.png" alt=" image du bandeau " title=" image du bandeau "/> <h1> cv | nom - prenom - age </h1>
</div>

<!-- le menu -->

<ul class="menu"> <li><a href="index.htm">accueil</a></li> <li>|</li> <li><a href="contact.htm">contact</a></li>
<li class="icone"><a href="#" OnClick="window.print();"> <img class="icone" src="image_site/icone.png" alt=" imprimer la page " title=" imprimer la page "/> </a></li> </ul> </div>


<div id="contenu"> <h1>accueil</h1> <h2 class="titre">paragraphe 1 </h2> <p>paragraphed</p> <p>paragraphe</p> <br/> <h2 class="titre">paragraphe 2</h2> <p>paragraphe</p> <p>paragraphed</p> </div> <div id="pied">

<!-- l'image du pied de page -->

<img src="image_site/pied.png" alt=" image du pied " title=" image du pied "/>
</div> </div> </body> </html>

voir le résultat

retour haut de page
http://www.neuro-graph.com
 image du bandeau