Ouais
, c'est un bon début.
Alors, tu pourrais continuer à structurer plus ton document. Ton élément "contenu" comporte visiblement des sections, par exemple au début tout tes éléments ont des 'align="center"'. Il me semblent donc formés un bloc cohérent. Tu pourrais les placer tous dans un élément div qui aurait l'id "intro".
Dans la feuille de style tu rajoutes :
CODE
#intro {
text-align: center;
}
Du coup tu vires tous les align="center" de ton code, puisqu'on vient de le définir de manière générique.
Dans ce bloc, seul le premier h2 me semble légitime, puisque tous les autres sont affublés de <font size="2">. Donc, à part le premier, remplace les autres soit par des <p> (paragraphe), soit dans des <h3> (sous titre de niveau 3). J'hésite au vu de la suite de ce bloc, où visiblement tu voudrais des <p> différents. Donc soit ce sont des paragraphes avec une classe particulière (que l'on peut définir dans la css), soit ce sont des h3. Je pencherai plutôt pour les h3. Dans tous les cas tu vires les <font size="2">.
"Industrie et Publicité sont les deux maîtres mots !" semblent devoir être mis en evidence, plutôt que d'utiliser une fois de plus <font ...>, il devrait être placé dans une balise <em>(mise en exergue) ou <strong>(mise en exergue plus forte). Allons y pour strong, çà à l'air important. Si on ne modifie pas la css, les navigateurs afficheront simplement en gras, donc on mettra ce que l'on préfère dans la css.
Je reviens un coup sur le cartouche. Il y est spécifié des polices, c'est bien, mais à priori, c'est pareil, hop dans la css, et dans les propriétés de l'élément body, comme çà le document sera cohérent.
Voilà, le but du jeu c'est d'essayer d'écrire ton document avec du sens, sans te préoccuper du visuel, d'abord un entête (ton cartouche), puis le corps du document, lequel contient l'introduction, qui est composé d'un titre de sous titres, et de paragraphe, lesquels contiennent des mise en exergues, des images...etc.
Puis tu défini ton rendu visuel par les css.
Donc, pour te lancer, je te file le début de ton fichier retouché, et une css qui va avec. Il y 2-3 trucs en plus de ce que je t'ai dis, essaie de comprendre avec les docs filés plus haut. En plus de ces docs, tu peux rechercher le site selfhtml,qui est une doc peut être plus abordable au début (à utiliser conjointement avec celle officielle quand même). Et puis tu continues.
le html:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Photographe professionnel Photographie d'Entreprises</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style11.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="cartouche">
<a href="http://www.photographe-professionnel.fr/"><img src="images/monlogobase.jpg" alt="Photographe professionnel" width="105" height="115" title="Photographe professionnel_Frédéric Watbled"></a>
<h1>Photographe professionnel</h1>
<p>
Une expérience de 25 années dans la réalisation des Photos
de Reportage, photographies Institutionnelles, Visuels pour le Corporate,
Clichés de studio et sur sites pour le Marketing et la Publicité
de l'Industriel et de l'Entreprise.
</p>
<p>Frédéric
WATBLED +33 (0) 1 39 78 11 38 - 06 07 52 66 45 - Membre
de l' U P C et de la Société des Auteurs d'Images Fixes -
<a href="mailto:frederic.watbled-photographe_AT_wanadoo.fr">Me contacter par mail</a>
</p>
</div>
<div id="contenu">
<div id="intro">
<h2>
<a href="http://www.photographe-professionnel.fr/photographe_communication_entreprise.html">
Photographies dédiées à la Communication des Entreprises</a>
</h2>
<h3>
Reportages Officiels <a href="http://www.photographe-professionnel.fr/reportage_evenements.html"><img src="images/vignettesindex/evenements.gif" alt="couverture d'évenements" width="83" height="63"></a>
Visuels Corporate pour l'Institutionnel <a href="http://www.photographe-professionnel.fr/photographe_corporate_professionnel.html"><img src="images/vignettesindex/corporate.gif" alt="Images Corporate et Institutionnelles" width="83" height="63"></a>
Portraits d'Entreprises <a href="http://www.photographe-professionnel.fr/portraits_portraitiste_organigramme.html"><img src="images/pdg.jpg" alt="Portraitiste Organigramme" width="47" height="71"></a>
</h3>
<h3>Photographie Industrielle <a href="http://www.photographe-professionnel.fr/reportages_industriels.html"><img src="images/vignettesindex/industrie.gif" alt="Photos industrielles" width="83" height="63"></a>
Clichés Publicitaires <a href="http://www.photographe-professionnel.fr/photographies_publicitaires.html"><img src="images/vignettesindex/publicite.gif" alt="Illustration pour plaquettes et brochures" width="83" height="63"></a>
Reportages en Numérique <a href="http://www.photographe-professionnel.fr/imagerie_numerique.html"><img src="images/vignettesindex/numerique.gif" alt="le numérique au service de la qualité" width="83" height="63"></a>
</h3>
<h3>Photos en Panoramique <a href="http://www.photographe-professionnel.fr/photographie_panoramique.html"><img src="images/vignettesindex/panoramique.gif" alt="Images d'environnement en panoramique" width="83" height="32"></a>
Studio et Pack-Shot <a href="http://www.photographe-professionnel.fr/prisedevuesen_studio.html"><img src="images/vignettesindex/studio.gif" alt="photographies en studio ou reconstitution sur site" width="83" height="63"></a>
English Version <a href="welcome.html"><img src="images/drapeauanglais.jpg" alt="English version" width="48" height="27"></a>
</h3>
<p>Photographe professionnel du val d'oise basé à
<a href="http://www.photographe-professionnel.fr/photographie_panoramique_de_la_frette.html"><em>La
Frette sur seine</em></a>, spécialiste de la photo technique et illustrateur.
</p>
<p>Production de <a href="http://www.photographe-professionnel.fr/photographe-communication-interne.html"><em>photographies
pour la Communication Interne</em></a> et l'Institutionnel des Entreprises
et Groupes Industriels
</p>
<p><strong>Industrie et Publicité sont les deux maîtres mots !</strong></p>
<p>J'ai voulu en créant ces pages, faire partager au plus
grand nombre l'amour que je porte à mon métier. Vous y trouverez
quelques conseils se rapportants aus techniques de prises de vues et à
la création d'images dans tous les formats et supports existants. Souhaitant
que les informations fournies apportent les réponses à vos questions.
</p>
</div>
</div>
</body>
</html>
Et la css :
CODE
a {
text-decoration: none;
}
a:link {
color: #FFCCCC;
}
a:visited {
color: #CCFF99;
}
a:active {
color: #FFFF66;
}
a:hover {
color: #FF9900;
text-decoration: underline;
}
body {
margin: 0;
padding: 0;
background-color: #999999;
color: #FF9966;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
}
img {
border-width: 0;
}
h2, h2 a {
color: #FFCC99 !important;
}
h3 {
font-size: 100%;
}
h3 img {
vertical-align: middle;
}
em {
color: #FF9966;
font-style: normal;
}
strong {
color: #FFFF99;
font-style: normal;
}
#cartouche, #contenu {
background-color: #000033;
margin: 10px auto;
padding: 0.5em;
width: 80%;
border: 1px solid #CCCCCC;
color: #FFFFFF;
}
#cartouche {
text-align: center;
}
#cartouche img{
float: left;
}
#intro {
text-align: center;
}
