manque un bout de code

fredwat · 12 Octobre 2004

bonjour

je viens de m'apercevoir qu'il manque

"http://www.w3.org/TR/html4/transitional.dtd" :blink:

après

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

la déclaration de ma page n'est donc pas conforme :?: :!:

Merci de votre contribution

Fred

Ps : Code généré par dreamweaver!

Edité: Oublié de préciser que j'ai rajouté une feuille de style ( ridicule..je débute!)

donc il faudrait remplacer "transitional" par "strict" :?: :?: :blush:

Modifié 12 Octobre 2004 par fredwat

Monique · 12 Octobre 2004

Bonjour,

La déclaration complète du doctype comprend en effet cette URL, qui indique au navigateur (ce qui est nommé agent utilisateur dans les spécifications) l'endroit où il peut trouver la syntaxe dont il doit tenir compte.

S'il est préférable de l'indiquer, elle n'est pas obligatoire (le validateur ne sanctionne pas son absence).

Le fait d'utiliser une feuille de style ne t'oblige pas à remplacer "transitional" par "strict".

Le mode transitional ne t'oblige pas à séparer le contenu de la mise en forme, mais ne t'interdit pas de le faire.

Le mode strict ne t'oblige pas non plus à utiliser une feuille de style... si tu te contentes d'une page brute, sans aucune mise en forme

PS : débuter n'a jamais été ridicule... seraient plutôt ridicules ceux qui trouvent ridicules les questions parfois un peu naïves des débutants, mais qui ne s'en est jamais posé

martin© · 12 Octobre 2004

Bonjour,

S'il est préférable de l'indiquer, elle n'est pas obligatoire

Je crois bon de préciser que néanmoins les navigateurs ne réagiront pas forcément de la même façon suivant que l'URI est présente ou pas dans le doctype.

Voilà un récapitulatif, et un autre, indiquant les cas où les navigateurs basculent en mode "quirk" ou reste en "standard compliant". Sinon, les sites des navigateurs signalent en principe leur fonctionnement.

fredwat · 12 Octobre 2004

Bonjour Monique

je suis un peu rassuré..par ton commentaire

si je peux abuser!?

le w3c m'indique ceci:

Line 212, column 26: there is no attribute "HEIGHT"

<table width="854" height="119" border="1" bordercolor= #999999 bgcolor="#00000.

Line 212, column 56: there is no attribute "BORDERCOLOR"

Line 212, column 56: an attribute value must be a literal unless it contains only name characters

et enfin

Line 214, column 59: there is no attribute "BORDERCOLOR"

En vérifiant dans mon code source ces attributs y figurent bien..

Où aurais je donc commis l'erreur :?:

Encore merci pour tes encouragements et ton aide

A+

Fred

Gribouille26 · 12 Octobre 2004

Salut,

Il faudrait mettre les guillements de partout....

... et aussi les unités de mesure!

fredwat · 12 Octobre 2004

Salut,

Il faudrait mettre les guillements de partout....

... et aussi les unités de mesure!

<{POST_SNAPBACK}>

Salut Gribouille26

Tous les guillemets apparaissent dans mon code source mais ne sont pas visibles sur l'analyse du W3C ???

mais qu'entends tu par unité de mesure?

Merci

A+

Fred

Modifié 12 Octobre 2004 par fredwat

Gribouille26 · 12 Octobre 2004

Je veux dire: px, em, centimètres, pouces, ....

Ton tableau fait 119 px ou 119 cm? C'est pas pareil!!!

Au passage, je pense que le validateur préfère des CSS externe... :whistling:

martin© · 12 Octobre 2004

En vérifiant dans mon code source ces attributs y figurent bien..

Il sont dans ton code, mais pas dans la spécification du W3C

Essaie de passer par les CSS plutôt :la doc.

fredwat · 12 Octobre 2004

Il sont dans ton code, mais pas dans la spécification du W3C

Essaie de passer par les CSS plutôt :la doc.

<{POST_SNAPBACK}>

décidemment je suis une truffe!

trop compliqué pour moi! :yoot:

je laisse tomber,découragé..

merci quand même

Fred :nono:

LaurentDenis · 12 Octobre 2004

le w3c m'indique ceci:
Line 212, column 26: there is no attribute "HEIGHT"

En vérifiant dans mon code source ces attributs y figurent bien..

Où aurais je donc commis l'erreur

L'erreur est que le validateur ne te dit pas qu'il n'y a pas d'attribut height dans ton code : il te dit qu'il n'y en a pas dans la DTD retenue pour ta page, autrement dit que cet attribut est invalide et doit être supprimé de ton code

<edit>fredwat est passé avant moi</edit>

Modifié 12 Octobre 2004 par LaurentDenis

martin© · 13 Octobre 2004

je laisse tomber,découragé..

Surtout pas...Voilà un début de solution.

imaginons un tableau simplissime :

<table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

Voilà des styles css associés à ce tableau, tu mets ce paragraphe dans l'entête de ton document, c'est à dire quelques part entre <head> et </head> :

<style type="text/css">
<!--
table {
	height: 119px;
	width: 854px;
	border: 1px solid #999999;
	background-color: #000000;
}
td {
	border: 1px solid #999999;
}
-->
</style>

Ce devrait correpondre à ce que tu attends (sauf peut être que tu voudrais que les cellules soient "collées", à ce moment là il faut rajouter autre chose).

Ces styles sont appliqués à tous les tableaux de la page, mais il serait possible de l'appliquer qu'à certains.

Essaie, et reviens si tu as d'autres problèmes.

Ah oui, rajoutes l'URI dans ton doctype, afin que les navigateurs ne soient pas en quirk mode, certains styles (mais pas ceux que je viens de te donner) sont mal appliqués sinon.

fredwat · 13 Octobre 2004

Bonjour Martin

c'est très sympa de te préoccuper de mon sort.. :up:

j'ai essayé à l'instant..et ai rajouté le code entre les balises head

ça ne fonctionne que sur une seule ligne

celle qui comporte une séries de liens texte en bas de la page!

Ce qui me semble normal puisque, pas doué,air connu..!, je ne travaille qu'avec des calques que je positionne dans les 2 tableaux.

j'ai essayé en otant les tableaux mais ça fait pareil..

j'ai aussi essayé de rajouter le code dans la css(ridicule) existante,mais..résultat identique!

En fait en clair ce que je tente d'obtenir c'est:

en haut un cartouche assorti d'un bord dans lequel je glisse logo,nom et ce que je fait

et en dessous un autre "cadre ou tableau de la même largeur" toujours assorti du même bord tournant,mais d'une hauteur plus importante comportant les "sections" ou sous titre en H2.chacune de mes pages comporte des images,aucune à la même taille,et selon ce que j'ai à dire cette page"x" ou "y" représente une hauteur différente.En clair,Visuellement le résultat obtenu en regardant la page en ligne.

Voilà,c'est un travail de webdesigner,ce que, tout le monde aura compris, je ne suis pas.Je tente de comprendre sur les différents liens proposés par le Hub,mais ça ne rentre pas! :wacko:

Merci pour ton investissement

Cordialement

Fred

martin© · 13 Octobre 2004

Oups, je comprend pas tout, je trouve ton explication confuse(désolé).

Ce que j'en comprend, tu n'as pas besoin de tableaux. Je te propose un canevas de départ correpondant à ce que tu souhaites.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	margin: 0; /* marges "externes" nulles*/
	padding: 0; /* "marges internes" nulles*/
	background-color: #999999; /*couleur d'arrière plan*/
}
div { /*tous les éléments div du document*/
	background-color: #000000; /*couleur d'arrière plan*/
	margin: 10px auto; /*10 pixel pour les marges haute et basse, automatique pour gauche et droite.*/
	width: 80%; /* l'element div a une largeur égale à 80% de l'élément dans lequel il est contenu*/
	border: 1px solid #CCCCCC; /*epaisseur style et couleur*/
	color: #FFFFFF; /*couleur du texte*/
}
#cartouche { /*element dont l'id est cartouche*/
	text-align:	center; /*alignement du texte*/
}
#cartouche img{ /* toutes les images de l'element dont l'id est cartouche*/
	float:	left; /*les images contenues dans l'élément cartouche flottent à gauche*/
}
-->
</style>
</head>

<body>
<div id="cartouche">
  <img src="images/logo.png" width="109" height="104" alt="mon logo" title="mon logo">
    <h1>fredwat</h1>
  <p>ce que je fais</p>
</div>
<div id="contenu">
  <h2>ma section 1</h2>
  <p>gna gna gna</p>
  <p>et gna gna gna</p>
  
  <h2>ma section 2</h2>
  <p>gni gni gni</p>
  <p>et gni gni gni</p>
</div>
</body>
</html>

Je t'ai annotée abondament les quelques css, çà te fera un bon départ pour comprendre.

fredwat · 13 Octobre 2004

Salut Martin

Pour un canevas de départ, c'est copieux!

le temps que je comprenne tout ça..mais Paris ne s'est pas fait en jour,comme dirait l'autre!

Je vais donc appliquer tout Ton Travail à un nouveau document et tenter de comprendre à ma vitesse le comportement de l'ensemble.

Si j'ai bien compris je peux rajouter à ma convenance les sous rubriques nécessaires

" <h2>ma section N+</h2>

<p>et gni gni gni</p>"

Il n'y a donc pas d'incompatibilité à faire glisser mes différents calques aux endroits qui vont bien..

Je m'y colle dès que possible!

un grand merci pour ta généreuse collaboration :up:

et comme le principe du thread c'est d'en faire profiter tout le monde..

Alors LaurentDenis;Pour info: j'ai réussi à faire valider ma home par le W3C en otant les attributs height et bordercolor qui bloquaient la validation :up:

Pourquoi :?: :?:

Le fait de ne pas renseigner ce qui ,à mon sens,devait l'être a débloqué cette valid :!: Merci ce fut efficace :!:

Allez je sors et je m'y colle..

Cordialement

Fred

LaurentDenis · 14 Octobre 2004

Pour info: j'ai réussi à faire valider ma home par le W3C en otant les attributs height et bordercolor qui bloquaient la validation
Pourquoi

Le fait de ne pas renseigner ce qui ,à mon sens,devait l'être a débloqué cette valid

La validité HTML, c'est simplement le respect d'une norme de syntaxe et de vocabulaire HTML (la spécificiation HTML 4.01). Comme toute norme, elle repose sur des choix justifiés, mais qui peuvent paraître arbitraires.

L'un de ces choix est de séparer autant que possible:

- les données structurelles (l'élément <table>)

- les données de présentation visuelles (les attributs height, bordercolor, etc).

Cette séparation a conduit à déclarer invalides les attributs de présentation que tu utilisais.

Les données de présentation sont effectivement nécessaires, mais elles doivent prendre place au choix :

- dans un attribut style="height: ...; border-color: ...;" de l'élément concerné.

- ou dans un élément de style interne au document HTML, dans la section <head>: <style type="text/css">table {height: ...; border-color: ...;}...</style>

- ou mieux dans une feuille de style externe, la séparation entre contenu structuré et données de présentation étant alors complète.

fredwat · 14 Octobre 2004

Bonjour

et merci pour les informations..

suite aux infos,j'ai donc retravaillé ma home et souhaite obtenir votre sentiment sur cette page "d'essai".

voici l'url: -http://www.photographe-professionnel.fr/essai12.html

liée à une feuille de style.( merci Martin :up: )

Qu'en pensez vous?

Certains diront que la mise ne page ne respecte pas les usages habituels..

menu fondu à gauche en milieu de page!

ce sur quoi je suis assez d'accord,mais que faire lorsque le contenu (images et textes) est aussi dense!

Impatient de vous lire :!:

Cordialement

Fred :unsure:

martin© · 14 Octobre 2004

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 :

#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:

<!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 :

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;
}

fredwat · 14 Octobre 2004

c'est reparti!

:up:

merci Martin

A+

Fred

fredwat · 14 Octobre 2004

la suite.. ( petit à petit )

-http://www.photographe-professionnel.fr/essai13.html

j'ai donc remis en place les "liens texte" en H3 relatifs aux catégories de pdvues

en rajoutant la définition de la discipline

bien qu'il existe un lien depuis chaque imagette et les titres s'y rapportant en H3

(en partie haute du doc )

Bien fondé :?:

merci pour vos critiques..

Fred

Ps: j'ai rajouté les META "description et keywords" Yes or No ?

fredwat · 14 Octobre 2004

Je me suis rendu compte de mes erreurs par le W3C

page validée en html 4.01 strict à l'instant

comme quoi en utilisant de bons outils..!

reste encore du boulot..

qu'en penses tu Martin :?:

Fred

Edité :

Est il possible dans un même site d'avoir une page en html "strict" et les autres en "transitional" :?:

Le temps manquant.. :!:

oups je viens de voir ta réponse avant l'édit

je creuse..

Modifié 14 Octobre 2004 par fredwat

martin© · 14 Octobre 2004

pour les meta keyword et description, oui tu as bien fait, je les avez enlevé juste pour alléger le post.

Sinon, c'est bien tu as allégé ton code. Par contre, soit tu enlèves le div intro (le sens d'un div c'est : un bloc de donnée) que j'avais mis, puisqu'il englobe tout ce qui est dans le bloc "contenu", et tu remets les propriétés qui le concerne à #contenu. Soit, et je pense que c'est ce tu voudrais, tu le laisses, et tu en crée un autre s'appelant par exemple "plan", contenant les liens du site, auquel tu peux affecté une justification à gauche (text-align: left;). Tu peux en créé un troisième contenant le pied de contenu.

Sinon, plutôt que d'utiliser des div, tu peux aussi surement utiliser d'autres balises, qui ont des sens plus précis. Par exemple, ces listes de liens de ton site pourrait être une liste de définition (élément html <dl>) contenant des expressions (élément <dt>) dans lequel sont imbriqués tes liens (<a>), et des définitions d'expressions (élément <dd>).

Ton menu tout en bas pourrait être une simple liste non ordonnée (élément ul) contenant des éléments (li) qui contiennent des liens (a).

Pour ces listes (dl ou ul), la representation par défaut des navigateurs ne va surement pas te plaire, mais de nouveau les css vont te permettre de les afficher comme bon te semblera (en ligne, sans puces ....).

fredwat · 14 Octobre 2004

mon message édité étant en page 1 je le pousse à la suite de la Page 2

"Est il possible dans un même site d'avoir une page en html "strict" et les autres en "transitional"

Le temps manquant..

Martin j'ai vu ta réponse après mon "edit", désolé..!

Pour les options complémentaires je crois que je vais devoir attaquer la colline..il faut donc que je creuse..

Une fois assimilé les premières infos..ce qui prendra du temps, je promets c'est juré, de m'y atteler.

:up:

Monique · 14 Octobre 2004

"Est il possible dans un même site d'avoir une page en html "strict" et les autres en "transitional"
Le temps manquant..

<{POST_SNAPBACK}>

Bonjour Fred,

Je peux te rassurer, pas de problème pour ça

Connexion

manque un bout de code

Sujets conseillés

fredwat

Monique

martin©

fredwat

Gribouille26

fredwat

Gribouille26

martin©

fredwat

LaurentDenis

martin©

fredwat

martin©

fredwat

LaurentDenis

fredwat

martin©

fredwat

fredwat

fredwat

martin©

fredwat

Monique

Veuillez vous connecter pour commenter

Parcourir

Activité