18073 sujets

Questions générales et questions de débutants

Réalisation d'un design complet (XHTML / CSS) en 5 étapes

Bonjour, je débute et j'aimerais créer ma page web et non pa un blog qui n'apprend pas grand chose Smiley smile

Donc voila j'ai suivi le Tuto Réalisation d'un design complet (XHTML / CSS) en 5 étapes

Mais j'ai une question : la base, tous ces codes commencant par "body" , on met ca dans quoi ? un " index.php/html" ?

A l'étape n°3 il disent : " Ci-après le code css correspondant à cette page, celui-ci est inséré en utilisant la balise <style type="text/css"> (</style>) à insérer entre les balises <head> et </head>. " On met ou ce code ? Smiley decu

En dessous ya des codes qui commencent par " body " on met ou tout ca ?

Merci ! Smiley cligne

ps : avant javais crer un petit site mais javais des problemes car c'était avec des tableaux etc... et c'était dans un index.php..
Salut,

woula, il y a des lacunes à combler là Smiley cligne
Ce n'est pas de l'ordre de la comparaison mise en page tableau/mise en page CSS, c'est plutôt des bases sur la création qu'il te manque je pense.

Grosso modo ça marche comme ça :
* Un doctype (<!DOCTYPE .... >), c'est l'élément qui indique au navigateur quelle version de HTML tu utilises
* <html> là tu met tout ce qui concernera ta page, ceci séparé en 2 zone principales (<head> et <body> voir après)
* <head> dans cette zone, c'est tout ce qui concerne la partie qui sera interprétée par le navigateur en lui même (grosso modo hein !), rien ou pas grand chose qui sera affiché à l'écran, mais c'est très important Smiley cligne il y a le <title> qui sera affiché (mais pas dans la page, dans le haut de la fenetre)
* <body> dans cette zone, c'est le contenu de ta page, donc tout ce qui sera affiché à l'écran. Tes titres (<h1>, <h2>, ..<h6>), tes paragraphes (<p>) tes liens (<a>) etc

Donc, ça c'est pour la base, ce qui concerne le contenu et la structure générale de ton document.

Ensuite, la partie mise en forme/style/couleur/graphisme etc, c'est ce qui concerne les styles CSS comme expliqué dans le tuto. Donc, là tu as 2 solutions.
Dans les 2 cas, ça se passe dans la partie <head> (souviens toi, c'est ce qui concerne les informations à donner au navigateur principalement), il va falloir faire appel à une feuille de style externe (un fichier *.css) ou bien directement indiquer les propriétés de style dans la balise appropriée à savoir <style type="text/css"> (</style>)

Dans le tuto, les propriétés de style affichées à l'écran ne sont pas interprétée, c'est juste du contenu affiché à l'écran pour expliquer en même temps, les styles qui sont interprétés, ce sont ceux qui se trouvent dans la partie <head> comme expliqué ci dessus.

C'est plus clair ? ou bien je t'ai encore plus embrouillé ?

<edit>J'oubliais un truc !
Tes fichiers, index.html etc, c'est là que tu met l'ensemble de la page, c'est à dire <!DOCTYPE> + <html><head></head><body></body></html>
Ne t'occupe pas du PHP pour l'instant Smiley cligne chaque choses en son temps.
Modifié par Olivier (08 Jun 2005 - 17:37)
Non ca va, ca pe aller lol Smiley smile

Oui, donc alors, tout ce patoi on le met dans un fichier portant quel nom ? et le fichier en .css ? quel nom aussi ?

Doit on changer quelque chose a cette ligne <style type="text/css"> (</style>) ?

Et ou la placer ? Dans quel fichier ?

Sinon, apres pr les body et les head, je pense que ca devrait aller Smiley smile merci ! Smiley biggrin
Tes fichiers, tu les nommes comme tu veux, classiquement on utilises "index" pour la racine du site. En général (99.9% des cas Smiley langue ) index.* sera la page affichée directement si on ne précise pas de page particulière.

Donc, appelle une page index.html
Dedans tu y met tout ce patoi comme tu dis.

Pour ce qui est de la partie <style type="text/css">, ça se place dans la partie <head> comme je te l'expliqué avant.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>ton titre</title>
[#red]
<style type="text/css">
/* Tes styles CSS */
</style>
[/#]
</head>

<body>
TON CONTENU
</body>
</html>


Pour ce qui est de la partie <style type="text/css">, il est bon de mentioner en plus media="screen" pour une feuille de style destinnée à l'affichage sur écran.
Donc, ça donne
<style type="text/css" media="screen">
ok ! c plus clair... Smiley cligne

Et donc quand tu dis " TON CONTENU " c'est tous les listes de codes du tuto commencant par " body " c ca no ? ( je pense que oui Smiley langue )

Merci ! Smiley smile
Un moment je vois le " apple.gif " qui corespont a limage de la pomme dans la banniere.. si on le change par une foto de mon choix que jorais placé a la racine du ftp c bon ?

Merci Smiley smile !
A priori oui c'est bon comme ça.

En gros, tu place ta nouvelle image au même endroit que le apple.gif et tu modifie le chemin de apple.gif dans les styles CSS et ça roule.

(si tu utilises le tuto tel quel ou presque en modifiant quelques éléments, n'oubli pas de respecter la licence creative commons qui est dessus
http://css.alsacreations.com/Comment-soutenir-Alsacreations

Ni ceci Smiley cligne merci
le tuto a écrit :

Nota : Le support du tutoriel (graphisme (sauf le logo) et code) est libre d'utilisation à condition de préciser l'auteur (Olivier Patry) et la source (Alsacreations). Ceci veut dire que vous n'êtes pas autorisé à vous approprier le travail d'autrui.

Modifié par Olivier (08 Jun 2005 - 18:02)
Administrateur
Salut,

Pour toute question sur les CSS, je rappelle qu'il existe un Sujet à lire absolument et qui se trouve en annonce dans le salon CSS

Dans ce sujet :
a écrit :
2- Si vous êtes complètement débutant dans le monde des styles CSS, si vous ne connaissez pas très bien les termes de classe, id, sélecteur, position absolue, relative, flottante, flux courant ou si vous ne savez pas bien utiliser les CSS en général, je vous recommande vivement un excellent cours pour débutants : http://www.tuteurs.ens.fr/internet/web/html/css.html .
Bah je t'ai dit tu met tes propriétés de style. Mais là tout dépend de la méthode que tu utilises.

Je t'ai expliqué (1er post) que tu avais 2 méthodes.

Soit tu met tes propriétés de style dans un fichier externe style.css (par exemple, et tu l'appelle dans la partie <head> (tu as 2 méthodes là aussi Smiley langue :
http://blog.alsacreations.com/2004/09/25/64-link-ou-import )
Soit tu met directement les propriétés de style dans la partie <style ..> comme dans le tuto et là tu n'as pas besoin de fichier *.css
ok ! c'est de plus en plus clair... mais on parle de " style " quels sont les styles qui existent ?

ps : raphael , g bien lus les tuto pr css Smiley smile
Administrateur
Lukan a écrit :
ok ! c'est de plus en plus clair... mais on parle de " style " quels sont les styles qui existent ?
A ma connaissance il n'existe pour l'instant que les styles CSS.
Pensais-tu à autre chose ?

Lukan a écrit :
ps : raphael , g bien lus les tuto pr css Smiley smile
Mais tu as dû survoler les bases qui expliquent comment on lie une feuille de style CSS j'ai l'impression Smiley ohwell
ok ! ben quand je parlais de " style " c'était le style "menu" dont parlait Olivier Smiley smile Bon j'ai de la lecture...merci
Administrateur
Lukan a écrit :
ok ! ben quand je parlais de " style " c'était le style "menu"
Non là désolé mais je ne vois pas du tout de quoi tu parles.
Tu parles peut-être des règles de styles CSS appliquées au sélecteur d'id #menu ?
Si oui, quelle est la question précisément ?
Sujet clos
Aller à