[Tutoriel] Créer son premier site web.

Index du forum >> Informatique >> Sujet : [Tutoriel] Créer son premier site web.

n°1 - Ecrit par Elliot, le 22 octobre 2008, à 20:35.

Profil
4 messages postés

Céer son 1er site

Bonjour à 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.
Plan :

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

Intro : Les logiciels pour créer votre site :

Le bloc note : Et oui, ce vieux bloc note, il vas enfin servir. Vous pouvez écrire votre code dedans et l'enregistrer en ".html".

Notepad ++ : Voilà un éditeur de texte super.
Pourquoi ? Et bien car il vous met les balises en couleurs et vous savez si vous faites des erreurs ou pas

En téléchargement : Notepad ++, cliquez sur "Télécharger".

Vous pourrez trouvez d'autres logiciels mais payant dans ce cas ... Google.

I - Les balises les plus importantes :

Pour créer un site il y a quelques balises (les plus importantes) qu'il faut connaître obligatoirement :

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

=> Elle sert à fermer la balise , donc à mettre fin à votre page. A placer absolument à la fin de votre code.

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

=> Elle sert à fermer la balise .

 => Elle permet d'ajouter le titre à votre page.  => Permet de fermer votre balise . <body> => Ah le corps, tout ce que contient votre site est presque là-dedans : Les images, les textes, les formulaires ... TOUT ! <img src="http://www.net-actuality.org/forum/img/emoticones/emot5.gif" alt="" /> </body> => A mettre quand vous avez fini votre corps.</div></div></div> Voilà les balises les plus importantes ! II - Premier code HTML : <div class="citation0"><div class="citation1"><div class="citation2"> Premier code : <!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> <title> Le titre de la page de ton site

(Ne pas mettre les balises au milieu, c'est pour la démarquer)
Ici vous mettrez vos textes, images ...
Blablabalabvbalablablablablablabblab

Les textes entre parenthèses ici sont à effacer. Avec l'incrustation du CSS, cette page changera, mais on verra ça tout à l'heure

III - Premier code CSS :

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 :

body {
font : normal 83%/1.5em verdana, microsoft sans sherif;
color : #6b747b; (couleur du texte)
background-image: url("placer l'url de votre image");
text-align: ;
}

a {
text-decoration: none;
color:#6b747b;
}

a:hover {
text-decoration:;
}

#banniere { (Ici c'est pour votre bannière/header)
width: 500px;
height: 150px;
background-image: url("placer l'url de votre image");
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}

#content_menu { (ce qui contient le menu)
width: 500px;
height: 40px;
background-image: url("placer l'url de votre image");
margin-top: 100px;
}

#textmenu {
padding-top: 7px;
}

#corps { (ce qui contient vos images, textes ...)
width: 500px;
height: auto;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
}

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 !

IV - Assemblage des deux :

Alors, pour commencer il faut rajouter une balise dans la balise :

nom de votre page CSS avec l'extension" />

Sur la page HTML, il faut rajouter des balises /
.
Voilà, le code html, avec tout ce qu'il faut : Imaginons que notre feuille CSS s'appelle "style.css" :

Titre de votre page

Accueil

Ici le texte du menu !

Ici le texte que vous voulez mettre dans votre corps, les images ...

Voilà, votre première page est prête, il ne manque plus qu'a mettre ce que vous voulez dedans

V - Upload et Hébergement :

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 => Olympe-Network.

Et biensur un client FTP, un simple d'utilisation pour les débutants => FileZilla, cliquez sur "Télécharger".

PS : Je ne sais pas si c'est ici que l'on poste ses tutoriels, mais bon on parle de programmation donc ...

Voilà, ce petit tutoriel.
A bientôt et j'espère que ce tuto. vous a plu

[ Ce message a été modifié pour la dernière fois le 22 octobre 2008, à 20:53 ]

n°2 - Ecrit par Trent, le 23 octobre 2008, à 01:06.

Profil
180 messages postés

Salut et bienvenue sur Net-Actuality

Je ne sais pas vraiment quoi dire, le tuto est plutôt intéréssant même si pas assez détaillé à mon goût sur plusieurs points (Notament le CSS, tu ne dit même pas ce que c'est

), en réalité c'est plus un tuto pour les gens qui connaissent déjà un peu le machin ?

En tout cas, c'est beau de voir que la catégorie Programmation voit encore quelques sujets de temps en temps

n°3 - Ecrit par Elliot, le 23 octobre 2008, à 18:27.

Profil
4 messages postés

Merci pour tes remarques sur le tutoriel.
Je pense que je vais faire un tutoriel spécialement pour les feuilles de style CSS, c'est à voir

Flux RSS des derniers messages du sujet [Tutoriel] Créer son premier site web..

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.

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
Captcha : Quel est le troisième caractère de "agitée" ? N'est pas sensible à la casse. Afin de nous protéger des robots spammeurs, veuillez répondre à la question posée ci-dessus.