Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

aide pour creation de page !


lexgamer

Messages recommandés

  • Modérateurs

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Modifié par lexgamer
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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). :P

Lien vers le commentaire
Partager sur d’autres sites

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)

Lien vers le commentaire
Partager sur d’autres sites

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

testks2.png

 

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

Modifié par lexgamer
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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...

Lien vers le commentaire
Partager sur d’autres sites

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 */

 

:P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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

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

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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... :P

 

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 */
   }

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...