aide pour creation de page !

Dylav · le 14 décembre 2006

Je veux bien continuer à faire le travail pour toi, ça m'intéresse, mais je crois que tu passes à côté de plaisirs que tu sembles ne pas soupçonner, en n'essayant pas de te battre un peu toi-même avec l'élaboration de ta page web...

Pour être sûr qu'on parte sur les mêmes bases, pourrais-tu poster ici le code complet de ta page HTML, au point où il en est rendu ?

KewlCat · le 15 décembre 2006

Juste un truc : sur [un] certains navigateurs le style n'est pas appliqué si l'élément est vide. Je t'invite donc à mettre un commentaire ou un caractère à l'intérieur de tes balises <td> si tu veux voir apparaître quelque chose.

... et au passage je rejoins l'avis de Dylav : tu n'apprendras rien et retiendras encore moins, si tu te contentes de faire du copier/coller des conseils que l'on va te fournir ici.

lexgamer · le 15 décembre 2006

j'ai compris a peu prés tout se que tu essai de m'apprendre , mais il me manque juste quelques informations pour pouvoir comprendre complétement j'ai compris a quoi servais un fichier php ainsi qu'un fichier css par contre mon gros probléme je n'arrive pas a relier tout ca dans une page html donc je pense laisser tous sa en php , en tout cas la page principal pour l'instant .

Sinon tout ceci m'interresse beaucoup j'ai commencer il y a quelques mois a apprendre le html qui est tres simple , mais on ma rediriger vers le php qui est plus puissant et le css qui est mieux pour mettre en forme sa page (couleurs , arrire plan ,police ...)

Mais je te rassure tous sa me plait et j'ai hate vraiment d'attaquer un vrai site , ceci pour l'instant n'est qu'une page d'apprentissage , voila !

voici ma page html qui ne fonctionne pas , par contre quand je met ce fichier au format php il fonctionne est ce normal ?

<html>
<head>

<link rel="stylesheet" type="text/css" href="format.css">

<body>

<?php

include("test2.php"); //

?>

</body>

</html>

comment je peu faire pour qu'elle fonctionne ? (mon fichier php se nomme TEST2 et mon fichier css FORMAT)

je viens de remarquer que lorsque je supprime cette ligne "<link rel="stylesheet" type="text/css" href="format.css">" mes tableaux sont toujours colorés alors que sa devrait pas l'être ! donc (désolé si je suis un gros noob ) la ligne que tu ma donné pour les colorés fonctionne a partir du fichier php et le php fait donc pas appel au fichier css pour faire cette tache !

Modifié le 15 décembre 2006 par lexgamer

Dylav · le 15 décembre 2006

On m'a redirigé vers le PHP qui est plus puissant et le CSS qui est mieux

Tout d'abord, qu'est-ce que le PHP ?

Le PHP, "Personal Home Page" devenu "Hypertext Preprocessor", est principalement un langage de programmation web côté serveur ce qui veut dire que c'est le serveur (la machine qui héberge le site web en question) qui va interpréter le code PHP et générer du code qui pourra être interprété par un logiciel. Le plus souvent, le code généré est le HTML afin d'être lu par un navigateur mais il peut être utilisé pour d'autres langages ou formats tels que WML, GIF, PDF, etc. © Wikipédia

En d'autres termes, en fonction de données fournies par le client, PHP permet au serveur de construire dynamiquement une page HTML circonstanciée. Dans l'immédiat, tu ne sembles pas en être à un tel niveau de sophistication. Donc PHP ne te sert à rien. Je te suggère alors, dans un premier temps, d'apprendre à construire, à l'aide de HTML et CSS, des pages web dites statiques, c'est-à-dire entièrement prédéterminées avant d'être appelées par le client.

Ensuite, qu'est-ce que CSS ?

CSS, pour "Cascading Style Sheets", ou "Feuilles de style en cascade", est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. © Wikipédia

Lorsque je supprime cette ligne <link rel="stylesheet" type="text/css" href="format.css"> mes tableaux sont toujours colorés alors que ça ne devrait pas l'être !

Eh bien oui, j'ai choisi, dans le message #10 ci-dessus, une solution de facilité qui te permette d'obtenir rapidement le résultat souhaité (compte tenu de ta difficulté à appréhender mon message #8 ci-dessus), et je t'ai donc proposé de décrire la couleur de fond d'une table directement dans la clause style de la balise <table>. Du coup, la feuille de style ne jouait aucun rôle dans cette problématique, ce qui explique que sa suppression n'a effectivement aucun effet sur la coloration du tableau.

En réalité, une volonté de bonne normalisation de ta page web nécessite de séparer contenu et présentation, donc d'indiquer les caractéristiques de tes tables dans la feuille de style. Je t'invite donc à relire le message #8, dont la solution n°1 résoud en partie le problème. Dans cet esprit, pour élaborer les débuts de ta maquette du message #11, il faut écrire dans la feuille de style :

body {
background: #FFFFFF url(UrlImageFondBody); /* image sur fond blanc */
font: 14px sans-serif; /* Style et taille de la police de la page */
margin: 1em; /* Marge du document HTML */
}
#tab1 {
background: #990000 url(UrlImageFondTableau1); /* image sur fond rouge */
margin: 3em; /* marge extérieure autour du tableau */
padding:3em; /* marge intérieure dans le tableau */
text-align: left; /* dans le tableau, alignement du texte à gauche */ 
width: 200px; /* largeur du tableau en pixels */ 
height: 50px; /* hauteur du tableau en pixels */
border:  1px; /* largeur de la bordure du tableau en pixels */
}
#tab2 {
background: #D5DEEC url(UrlImageFondTableau2); /* image sur fond bleu clair */
margin: 3em; /* marge extérieure autour du tableau */
padding:3em; /* marge intérieure dans le tableau */
text-align: left; /* dans le tableau, alignement du texte à gauche */ 
width: 200px; /* largeur du tableau en pixels */ 
height: 50px; /* hauteur du tableau en pixels */
border:  1px; /* largeur de la bordure du tableau en pixels */
}

et, dans ta page HTML, pour l'ouverture des tableaux, respectivement :

...
<table id="tab1">
...
<table id="tab2">
...

C'est, comme je te l'expliquais dans mon message #8, les étiquettes tab1 et tab2 qui font la liaison entre HTML et CSS pour appliquer les styles souhaités respectivement aux tableaux 1 et 2. On verra plus tard comment ajuster éventuellement les différentes dimensions (margin, padding, width, height, border).

Maintenant, si tu veux qu'on aille plus loin ensemble, il est nécessaire que tu me fournisses le code de tes fichiers TEST2 et FORMAT, puisque ce sont eux qui décrivent le véritable contenu de ta future page web.

En tout état de cause, comme cela t'a déjà été conseillé plus haut, consulte des tutoriels pour t'imprégner des caractéristiques de HTML (relativement simples à appréhender) et CSS (qui peuvent être utilisées de façon très simple, mais également avec des niveaux de sophistication étonnants). Tu dois passer le cap de la compréhension de mes messages #6 et #8 (et accessoirement #10).

KewlCat · le 16 décembre 2006

voici ma page html qui ne fonctionne pas , par contre quand je met ce fichier au format php il fonctionne est ce normal ?

Qu'on soit bien clairs : les scripts php ("fichiers php" ou "pages php", comme tu préfères) sont, à cause de leur extension .php, interprétés par php.exe avant d'être "envoyés" par le serveur Web au navigateur qui demandait à voir la page.

Ce que fait php.exe, c'est un remplacement de toutes les sections <?php (...) ?> par le résultat obtenu lorsqu'on exécute le code "(...)". Cela permet de mettre dans une page html (parce que la finalité du truc, c'est de générer du HTML) du contenu qui change en fonction du code exécuté.

Ca explique pourquoi quand tu nommes ton fichier "toto.html" le serveur te l'envoie tel quel, et quand tu le nommes "toto.php" le code php est exécuté.

Le fait de changer le nom de ton fichier n'est pas une "mise au format" php ou html...

En fait, le php sert à fabriquer du html. Le navigateur Web qui demande une page ".html" ou ".php" se fiche pas mal de ce qui se passe côté serveur du moment que le contenu qu'on lui envoie est composé de balises HTML (et uniquement HTML ! Les balises <?php (...) ?> ne font pas partie du langage HTML)

lexgamer · le 16 décembre 2006

donc je peu laisser mon fichier final en .php sa change rien ?

j'ai refait mon fichier php le "test2.php"

<html>
<head>

<meta http-equiv="content-type"

content="text/html; charset=ISO-8859-1">

<title></title>

</head>

<body>

<table style="text-align: left; width: 917px; height: 178px;"

border="1" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="text-align: justify;"><img

style="width: 903px; height: 144px;" alt=""

src="file:///C:/Documents%20and%20Settings/Alexandre/Mes%20documents/site/banniere.jpg"></td>

</tr>

</tbody>

</table>

<br>

<br>

<br>

<table style="text-align: left; width: 105px; height: 223px;"

border="1" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

<br>

<table

style="text-align: left; margin-left: 0px; margin-right: auto; width: 906px; height: 123px;"

border="1" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

<br>

<br>

</body>

</html>

voila le résultat

j'ai incorporer dans mon premier cadre du haut de la page une image , par contre je voudrais la mettre dans mon fichier css .

voici mon fichier "format.css"

body {
font: 14px sans-serif; /* Style et taille de la police de la page */

margin: 1em; /* Marge du document HTML */

}

j'espere que sa va pouvoir t'aider a comprendre

Modifié le 16 décembre 2006 par lexgamer

Dylav · le 16 décembre 2006

Bonjour Lexgamer,

Voici un résultat qui répond globalement à tes attentes. Il te restera à peaufiner les détails. Je commence par te livrer les sources. Les explications viendront ensuite.

Le fichier test2.php (qui pourrait d'ailleurs être directement test2.html, puisque PHP n'aura rien à interpréter) :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>
<div id="bloc1">
</div>
<div id="bloc2">
<br><a href="http://www.zebulon.fr/astuces/astuces-windows.html">Astuces</a>
<br><a href="http://www.zebulon.fr/bidouilles/index.php">Bidouilles</a>
<br><a href="http://telechargement.zebulon.fr/">Téléchargements</a>
<br><a href="http://forum.zebulon.fr/">Forums</a>
<br><a href="http://www.zebulon.fr/annuaire/index.php">Annuaire</a>
</div>
<div id="bloc3">
</div>
</body>
</html>

et la feuille de style format.css :

body   {font:14px sans-serif; /* Style et taille de la police de la page */
	margin:1em;		   /* marge du document HTML */
   }
a	  {color:#000000;		/* couleur lien actif */
	text-decoration:none; /* lien actif non souligné */
   }
a:hover{color:#990000;		/* couleur lien actif survolé */
	font-weight:bold;	 /* lien en gras au survol */
   }
#bloc1 {width:754px;		  /* largeur du bloc 1 */
	height:120px;		 /* hauteur du bloc 1 */
	background:red url(http://www.hiboox.com/images/5006/48448beb.jpg) no-repeat;
						  /* couleur et image de fond */
   }
#bloc2 {width:140px;		  /* largeur du bloc 2 */
	height:223px;		 /* hauteur du bloc 2 */
	border:1px solid silver;/* bordure du bloc 2 */
	margin-top:20px;	  /* marge extérieure imposée au-dessus */
	padding-left:10px;	/* marge intérieure imposée à gauche */ 
	text-align:left;	  /* texte cadré à gauche */
	line-height:1.5em;	/* espacement entre les lignes de texte */
   }
#bloc3 {width:754px;		  /* largeur du bloc 3 */
	height:120px;		 /* hauteur du bloc 3 */
	border:1px solid silver;/* bordure du bloc 3 */
	margin-top:20px;	  /* marge extérieure imposée au-dessus */
   }

La feuille de style externe

Tout d'abord, j'ai rétabli, dans le header de la page, la balise <link> qui fait la jonction avec la feuille de style. Rien de nouveau, tu connaissais déjà.

Les tableaux et les blocs

En HTML, la balise <table> a été créée pour formater les tableaux énumératifs, les listes de données.

Aux débuts des navigateurs, il n'existait guère de solution satisfaisante pour mettre en forme une page, et de petits malins ont eu l'idée de détourner l'utilisation de cette balise pour élaborer des pages web attractives. Ils ont hélas été très copiés.

Mais les temps ont changé, les recommandations et les spécifications aussi.

Dans ton cas, tu utilises la balise <table> pour créer des tableaux qui ne contiennent qu'une ligne et une colonne, c'est-à-dire une case unique. Tu ne gagnes donc rien à cette utilisation, par rapport à celle de la balise <div>, faite pour ça et beaucoup moins lourde à "écrire".

C'est pourquoi je te propose une solution basée sur trois blocs <div> qui remplacent avantageusement les tableaux, on peut le constater d'un coup d'oeil... il n'y a pas photo !

à suivre...

lexgamer · le 16 décembre 2006

merci beaucoup , par contre j'ai quelques questions : le fichier test2 que tu as ecrit est bien en php ?

je ne comprend pas trop ces lignes , a quoi servent elles exactement ?

a {color:#000000; /* couleur lien actif */
text-decoration:none; /* lien actif non souligné */

}

a:hover{color:#990000; /* couleur lien actif survolé */

font-weight:bold; /* lien en gras au survol */

Dylav · le 16 décembre 2006

Les blocs <div>

A partir du moment où tu sépares contenu (page HTML) et présentation (feuille CSS), tu peux constater que tes 3 blocs étaient vides.

Le bloc 1

Le bloc 1 est vide, puisque l'image est traitée en image de fond, donc décrite dans la feuille de style.

Rappel : j'ai étiqueté ce bloc "bloc1", et c'est cette étiquette qui fait la liaison entre page HTML <div id="bloc1"> et feuille de style #bloc1 {...}

Remarques : j'ai capturé l'image dans ton post, où elle a les dimensions 754x120. J'en ai fait, pour des raisons esthétiques, les dimensions des blocs 1 et 3. Si ton image réelle n'a pas ces dimensions, il te suffira de réajuster les dimensions du bloc 1 à celles de l'image. Au cas où le bloc aurait des dimensions supérieures à celles de l'image, on verrait, sur le reste de sa surface, la couleur de fond (ici red=rouge, comme tu le souhaitais dans ton message #11).

Il te restera à remplacer l'adresse de ma capture par celle de ton image d'origine.

Le bloc 2

Il est "écarté" du bloc 1 par une marge avant (margin-top).

Il possède une marge intérieure à gauche (padding-left).

La bordure est d'épaisseur 1 pixel, de type trait, et de couleur argent.

L'interligne est légèrement augmenté (line-height), proportionnellement à la taille de la police (em).

Dans ta maquette, ce bloc aussi était vide. Pour la démonstration de la mise en oeuvre des liens actifs, j'ai construit un petit menu qui, clin d'oeil, branche sur des sections de Zébulon : attention au ©opyright !

Tu remarqueras que, dans la présentation que j'ai adoptée, les liens actifs ne sont pas soulignés, et qu'ils changent de couleur et deviennent gras lorsque le curseur les survole. Il existe bien entendu des tas d'autres possibilités.

Le bloc 3

Encore un bloc vide.

Marge avant et bordure : même chose que pour le bloc 2.

Si tu souhaites y mettre une image de fond, il te suffira de faire comme pour le bloc 1.

Même remarque pour le corps de l'écran : pour y mettre une image de fond (qui sera partiellement masquée par tout ce que tu inséres dans ta page), il suffit d'ajouter un attribut background dans body {...} dans la feuille de style.

Conclusion

Cette page HTML fonctionne telle quelle. A toi de l'aménager habilement pour en faire exactement ce que tu veux

Dylav · le 16 décembre 2006

Merci beaucoup, par contre j'ai quelques questions : le fichier test2 que tu as écrit est bien en php ?
Je ne comprend pas trop ces lignes, a quoi servent elles exactement ?

Le fichier que je t'ai envoyé pourra sans problème porter l'extension .php, afin que l'interpréteur PHP l'analyse pour en faire une page HTML. Ce que tu ne sembles pas comprendre, en revanche, c'est qu'il est totalement inutile de le faire interpréter par PHP, puisqu'il ne contient aucune instruction PHP. Ce fichier peut donc, également sans problème, porter l'extension .html. Pour t'assurer de cela, teste avec les deux extensions...

Pour l'autre question, je t'ai répondu juste ci-dessus. Il s'agit du comportement des liens actifs.

a	  {color:#000000;		/* couleur lien actif */
	text-decoration:none; /* lien actif non souligné */
   }
a:hover{color:#990000;		/* couleur lien actif survolé */
	font-weight:bold;	 /* lien en gras au survol */
   }

Connexion

Pas encore inscrit ?

aide pour creation de page !

Messages recommandés

Dylav

KewlCat

lexgamer

Dylav

KewlCat

lexgamer

Dylav

lexgamer

Dylav

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer