Citer un message

En vous enregistrant en tant que membre, vous vous assurez d'avoir votre propre pseudonyme réservé, tout en n'ayant plus à saisir de code de sécurité ni de pseudo. En postant un message, vous déclarez accepter nos conditions générales d'utilisation.

Captcha : Combient font 1 + 1 ? Veuillez ne surtout PAS REPONDRE à la question posée ci-dessus. Ce test vise à nous protéger des robots spammeurs.
Pseudo : Saisissez votre pseudonyme.
Adresse email : N'est pas obligatoire. Ne sera pas affichée. Permet juste d'afficher votre Gravatar si vous en avez un.	Enregistrer mon pseudo et email.
Message : Saisissez le contenu de votre message.	Prévisualisation automatique [quote=Elliot][size=15][center][b]Céer son 1er site[/b][/center][/size] [color=#0000FF][b]B[/b][/color]onjour à tous et à toutes. Comme de plus en plus de monde s'intéressent à la création de site web. Beaucoup, ne savent pas comment s'y prendre et utilise des logiciels (ce qui n'est pas le mieux). Enfin Bref ..., j'ai donc décidé de faire un tutoriel pour apprendre à créer sa première page personnalisée en HTML et CSS. [color=#0000FF][u][b]Plan :[/b][/u][/color] [b] [center]Intro : Les logiciels pour créer votre site I - Les balises les plus importantes II - Premier code HTML III - Premier code CSS IV - Assemblage des deux V - Upload et hébergement[/center][/b] [color=#0000FF][u][b]Intro : Les logiciels pour créer votre site :[/b][/u][/color] [u][b]Le bloc note :[/b][/u] Et oui, ce vieux bloc note, il vas enfin servir. Vous pouvez écrire votre code dedans et l'enregistrer en "[b].html[/b]". [u][b]Notepad ++ :[/b][/u] Voilà un éditeur de texte super. [u]Pourquoi ?[/u] Et bien car il vous met les balises en couleurs et vous savez si vous faites des erreurs ou pas ;) En téléchargement : [url=http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29119.html]Notepad ++[/url], cliquez sur "Télécharger". Vous pourrez trouvez d'autres logiciels mais payant dans ce cas ... [url=http://google.com/]Google[/url]. [color=#0000FF][u][b]I - Les balises les plus importantes :[/b][/u][/color] Pour créer un site il y a quelques balises (les plus importantes) qu'il faut connaître obligatoirement : [quote][b]<html>[/b] => Cette balise vous sert essentiellement à contenir tout ce qu'il y a dans votre site. A placer au tout début de votre site. Il faut mettre toutes le reste des balises à l'intérieur de celle-là. [b]</html>[/b] => Elle sert à fermer la balise <html>, donc à mettre fin à votre page. A placer absolument à la fin de votre code. [b]<head>[/b] => Elle contient tout ce qui ne se voit pas sur le site : Le titre de la page, le logo de la page (barre d'adresse), quelques codes pour les webmasters les plus évolués ... [b]</head>[/b] => Elle sert à fermer la balise </head>. [b]<title>[/b] => Elle permet d'ajouter le titre à votre page. [b]</title>[/b] => Permet de fermer votre balise <title>. [b]<body>[/b] => Ah le corps, tout ce que contient votre site est presque là-dedans : Les images, les textes, les formulaires ... TOUT ! ;) [b]</body>[/b] => A mettre quand vous avez fini votre corps.[/quote] [b]Voilà les balises les plus importantes ![/b] [color=#0000FF][u][b]II - Premier code HTML :[/b][/u][/color] [quote] [u][b]Premier code :[/b][/u] [b] [color=#32CD32]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">[/color] <head> <title> [color=#FF0000]Le titre de la page de ton site[/color] </title> </head> [center]<body> (Ne pas mettre les balises au milieu, c'est pour la démarquer) [color=#FF0000]Ici vous mettrez vos textes, images ... Blablabalabvbalablablablablablabblab[/color] </body>[/center] </head> </html>[/b] [/quote] [b]Les textes entre parenthèses ici sont à effacer. Avec l'incrustation du CSS, cette page changera, mais on verra ça tout à l'heure :p[/b] [color=#0000FF][u][b]III - Premier code CSS :[/b][/u][/color] Bon, pour tout vous dire, ça m'embête de refaire tout un code CSS. C'est pourquoi, je vais copier un des mes codes déjà faits : [quote] [b][color=#FF0000]body {[/color] font : normal 83%/1.5em verdana, microsoft sans sherif; color : #6b747b; [color=#32CD32](couleur du texte)[/color] background-image: url("[color=#32CD32]placer l'url de votre image[/color]"); text-align: ; } [color=#FF0000]a {[/color] text-decoration: none; color:#6b747b; } [color=#FF0000]a:hover {[/color] text-decoration:; } [color=#FF0000]#banniere {[/color] [color=#32CD32](Ici c'est pour votre bannière/header)[/color] width: 500px; height: 150px; background-image: url("[color=#32CD32]placer l'url de votre image[/color]"); border-top: 1px black solid; border-left: 1px black solid; border-right: 1px black solid; } [color=#FF0000] #content_menu {[/color] [color=#32CD32](ce qui contient le menu)[/color] width: 500px; height: 40px; background-image: url("[color=#32CD32]placer l'url de votre image[/color]"); margin-top: 100px; } [color=#FF0000]#textmenu {[/color] padding-top: 7px; } [color=#FF0000]#corps {[/color] [color=#32CD32](ce qui contient vos images, textes ...)[/color] width: 500px; height: auto; border-left: 1px black solid; border-right: 1px black solid; border-bottom: 1px black solid; }[/b] [/quote] [b]Informations supplémentaires : width => largeur en pixels ; height => hauteur en pixels ; padding => espace entre la bordure left/right/top/bottom (bas) et le texte ou images ... ; margin => Même chose que padding ; border => bordures ! Le reste vous devez savoir tout de même puisque c'est de l'anglais, et le plus facile en plus ;) Les textes entre parenthèses sont à effacer ![/b] [color=#0000FF][u][b]IV - Assemblage des deux :[/b][/u][/color] Alors, pour commencer il faut rajouter une balise dans la balise [b]<head>[/b] : [quote] [b]<link rel="stylesheet" media="all" type="text/css" title="" href="[color=#32CD32]nom de votre page CSS avec l'extension[/color]" />[/b][/quote] Sur la page HTML, il faut rajouter des balises [b]<div> / </div>[/b]. Voilà, le code html, avec tout ce qu'il faut : Imaginons que notre feuille CSS s'appelle "[b]style.css[/b]" : [quote] [color=#32CD32][b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr"> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <title> Titre de votre page </title> <link rel="stylesheet" media="all" type="text/css" title="" href="style.css" />[/color] </head> <body> <center> [color=#800080]<div id="banniere">[/color] [color=#FFC0CB]<div id="content_menu">[/color] [color=#FFFF00]<div id="textmenu">[/color] <b><a href="index.html">Accueil</a></b> [color=#FFFF00]</div>[/color] [color=#FFC0CB]</div>[/color] [color=#800080]</div>[/color] [center] [color=#32CD32]<div id="corps">[/color] [color=#FFA500]<div id="textmenu">[/color] Ici le texte du menu ! [color=#FFA500]</div>[/color] [color=#FF0000]Ici le texte que vous voulez mettre dans votre corps, les images ...[/color] [color=#32CD32]</div>[/color][/center] </center> </body> </html>[/b] [/quote] [b]Voilà, votre première page est prête, il ne manque plus qu'a mettre ce que vous voulez dedans ;)[/b] [color=#0000FF][u][b]V - Upload et Hébergement :[/b][/u][/color] Voilà, il ne manque plus qu'a uploader votre site sur votre FTP. Pour celà, il vous faut un hebergeur : Je vous conseil le meilleur qui est gratuit => [url=http://olympe-network.com/]Olympe-Network[/url]. Et biensur un client FTP, un simple d'utilisation pour les débutants => [url=http://www.01net.com/telecharger/windows/Internet/ftp/fiches/17966.html]FileZilla[/url], cliquez sur "Télécharger". [b]PS :[/b] Je ne sais pas si c'est ici que l'on poste ses tutoriels, mais bon on parle de programmation donc ... ;) [b]Voilà, ce petit tutoriel. A bientôt et j'espère que ce tuto. vous a plu ;)[/b][/quote]