Apprenez à créer votre site web !

Comment on fait un site web ? C'est compliqué ? C'est long ? C'est pour les pros ?

Que nenni !
Faire un site web aujourd'hui, c'est facile et passionnant. Pas besoin
d'être un expert pour en faire un, il suffit juste d'avoir un tutoriel
qui vous explique depuis le début comment ça fonctionne, à votre rythme.

Ca tombe bien, car j'ai créé ce tutoriel spécialement pour vous qui n'y connaissez rien.
---------------------------------------------------------------------------
Partie 1 : Les bases du XHTML

Découvrez ce qu'est le XHTML...



Et apprenez à vous en servir pour faire votre site web !






1) avant de commencer

Bonjour et bienvenue à toutes et à tous !
Voici donc le premier chapitre de ce cours pour débutants, qui va vous apprendre à créer votre site web !

Nous allons passer quelques temps ensemble, tout dépendra de la vitesse
à laquelle vous apprendrez. Si vous lisez ce cours régulièrement et à
une bonne vitesse, vous l'aurez terminé en une semaine. Mais si vous
avez besoin d'un peu plus de temps, ne vous inquiétez pas : le
principal est que vous y alliez à votre rythme, en prenant du bon temps.
Ce tutoriel va donc vous apprendre à créer un site web de A à Z.
Vous allez y découvrir 2 langages informatiques, appelés XHTML &
CSS. Ce sont eux qui vous permettront de créer votre site web.

Commençons tout de suite par voir ce que sont ces langages au nom... plutôt imprononçable.
-------------------------------------------------------------------------
XHTML ? CSS ? C'est quoi ça ?

Pour créer un site web, on doit indiquer des informations à
l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y
aura dans son site, il faut aussi savoir placer ce texte, insérer des
images, faire des liens etc...

Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.



Il existe des langages qui servent à créer des programmes, comme le
C++ ou encore le Java. Ces langages sont néanmoins complexes et
destinés à des personnes qui ont déjà quelques connaissances en
informatique.

Les langages XHTML et CSS, eux, servent précisément à créer des
sites web, et ils ont été créés de manière à être simples à utiliser.
Mon rôle sera de vous apprendre à vous en servir.



Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ?


C'est vrai que, quand je vous dis que vous allez apprendre 2
langages à la fois, vous vous demandez si ce n'est pas déjà trop pour
vous.

Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure
que tout a été très bien pensé. Chacun de ces 2 langages sert à faire
quelque chose de précis, et les deux se complètent naturellement pour
au final donner un site web :

XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir
Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques
: vous direz par exemple "Ceci est mon titre, ceci est mon menu, là
c'est le texte principal de la page, là il y a une image etc etc...".

Le XHTML est le langage qui remplace
l'ancien, appelé HTML, dont vous avez peut-être entendu parler. Il y
ressemble assez, mais le fonctionnement du XHTML est beaucoup mieux
pensé. Bref, c'est lui le plus récent, c'est donc lui que nous allons
apprendre.


CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert uniquement à présenter la page web.
C'est en CSS que l'on dira : "Mes titres sont en rouge et sont
soulignés, mon texte est dans la police arial, mon nom est centré, mon
menu a un fond blanc..." etc etc.

Grâce à ce langage, nous allons pouvoir créer rapidement et
simplement la mise en page de votre site. Nous pourrons ainsi lui
donner une belle présentation, sans pour autant être des experts en
graphisme (et ça tombe bien, parce que côté graphisme je suis carrément
nul)


En résumé, on se sert de :

• XHTML pour écrire le contenu de nos pages web.
  
• CSS pour présenter ce contenu.
  

Ces langages sont donc complémentaires, l'un ne va pas sans l'autre. Si
vous retenez que XHTML sert à taper le contenu, et CSS à présenter ce
contenu, alors croyez-moi : vous avez déjà compris 95% du principe !



Dans la première partie de ce cours pourtant, on ne va pas parler
de suite de CSS. On ne va faire que du XHTML, parce que c'est par là
qu'il faut commencer.

Sans CSS, vous allez donc pouvoir faire vos premières pages web.
Elles seront assez moches, mais patience... Une fois que vous arriverez
à la partie II de ce cours, on introduira le CSS, et vous allez voir
tout d'un coup vos pages web s'embellir (presque) sans effort
-------------------------------------------------------------------------
L'éditeur



Une question que vous devez certainement vous être déjà posée, c'est :
"De quel logiciel je vais avoir besoin pour créer mon site web ?"



En fait, des logiciels qui permettent de créer un site web, il y en a des tonnes.

Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?



Eh oui, accrochez-vous bien parce que... il s'agit de Bloc-Notes !


Croyez-moi si vous voulez, mais ce logiciel suffit amplement à créer un site web !

Si vous avez un Mac, vous avez certainement un logiciel similaire : un éditeur de texte tout simple.



Bon, en théorie donc, Bloc-Notes suffit.
Mais avec un peu de recherche, j'ai découvert un logiciel vraiment
utile et qui aide pas mal en colorant automatiquement le code XHTML /
CSS.



Ce logiciel est simple, en français et gratuit. Il s'appelle Notepad++, et je vous invite à le télécharger :

Page de téléchargement de Notepad++

Prenez la version avec installeur (.exe) et non le .zip


Notez qu'il n'est pas indispensable de
prendre Notepad++, si vous gardez Bloc-Notes vous pouvez très bien vous
en sortir. Mais bon, comme Notepad++ est gratuit et qu'il va un peu
vous aider, ça serait dommage de s'en priver.



Si vous êtes sous Mac OS, sachez qu'il existe de nombreux éditeurs du même genre pour les Mac. Je peux vous recommanderSmultron.

Sous Linux, les éditeurs ne manquent pas. Vous avez d'ailleurs sûrement déjà vim ou emacs installé.



Lorsque vous aurez installé Notepad++, je vous conseille de faire la
manipulation suivante : allez dans le menu "Langages" et choisissez
"HTML". Cela permettra au logiciel de savoir que l'on va taper du
XHTML.



Lorsque vous utiliserez le logiciel, il colorera votre code comme ça :


Pour l'instant, ne vous préoccupez pas de savoir ce que signifie tout
ce charabia que vous pouvez voir. C'était juste pour vous donner un
aperçu de ce à quoi servait ce logiciel.



Bien, maintenant que nous sommes au point et que nous avons notre
éditeur de pages web, nous allons pouvoir parler du dernier élément
indispensable (que vous avez déjà là encore) : le navigateur.
--------------------------------------------------------------------------
Les navigateurs



Savez-vous ce qu'est un navigateur ?
Cela peut paraître évident pour certains, mais comme je vous avais
promis qu'on partait de Zér0 (après tout c'est le principe de ce site),
je vais expliquer rapidement ce que c'est pour ceux qui ne seraient pas
sûrs...

Le navigateur, c'est le programme qui vous
permet de voir des sites web. Si vous lisez ces lignes, c'est donc que
votre navigateur est ouvert et que vous l'avez sous les yeux
Le travail du navigateur, c'est de lire le code XHTML / CSS que vous
avez écrit, et d'afficher ce qu'il représente. Si votre code CSS dit
"Les titres sont en rouge", alors le navigateur affichera les titres en
rouge.

Parmi les navigateurs qui existent, citons :

• Internet Explorer
  
• Mozilla Firefox
  
• Opéra
  
• Netscape
  
• Konqueror (pour Linux)
  
• Lynx (pour Linux)
  
• Apple Safari (pour Mac, et depuis peu pour Windows)
  
• etc...
  

La liste est longue, mais je vous ai cité les principaux.
Je vais vous présenter deux d'entre eux:

• Internet Explorer
  
• Mozilla Firefox
  

Vous allez voir que si je prends le temps de vous parler de ces deux-là, c'est qu'il y a bien une raison...

INTERNET EXPLOREUR

Le plus connu et le plus répandu de tous les navigateurs est Internet
Explorer. Et je pense que j'ai très peu de chances de me tromper en
disant que c'est celui que vous êtes en train d'utiliser...
Il y a une raison à cela : c'est le navigateur livré par défaut avec
tous les Windows. Et comme Windows est le système d'exploitation le
plus répandu... bref, pas besoin d'être un génie pour comprendre
pourquoi Internet Explorer est le logiciel le plus utilisé.

Internet Explorer, le navigateur le plus répandu

Oui mais voilà, ce logiciel est à la traîne.
Côté XHTML, ok ça va il suit. Mais dès qu'il s'agit de faire du CSS,
vous allez voir qu'il ne connaît pas tout, et que parfois il l'affiche
différemment des autres navigateurs... ce qui est assez ennuyeux.

La version présentée ci-dessus est la dernière en date (Internet
Explorer 7). Cependant, la version précédente (Internet Explorer 6) est
toujours largement utilisée par de nombreux internautes qui ne se sont
pas mis à jour :

En résumé, les versions les plus utilisées d'Internet Explorer (abrégé "IE") sont :

• IE 6 : livré avec Windows XP
  
• IE 7 : livré avec Windows Vista
  

Les deux ont des lacunes, mais comme vous pouvez vous en douter, IE 6 est le pire parce que c'est le plus vieux.

Seulement voilà, on ne peut pas faire d'un coup de baguette magique que
toutes les personnes qui ont Internet Explorer utilisent un navigateur
plus récent (quoique des fois, on aimerait :p)
Le problème est que IE est le seul navigateur vraiment à la bourre,
tous les autres fonctionnent de la même manière et suivent les mêmes
règles.

Pour pouvoir faire correctement du XHTML / CSS, il est indispensable que vous ayez un autre navigateur en plus d'Internet Explorer.
Je vais vous présenter celui qui, à mon goût, est le meilleur : Mozilla Firefox.

FIREFOX

Mozilla Firefox est un programme gratuit et disponible en français. Il
va nous être aussi utile car, comme tous les autres sauf IE, il est à
jour et va vous permettre de profiter des dernières possibilités du CSS.

En fait, quand on crée un site web aujourd'hui, on a généralement 2
navigateurs ouverts en même temps : Firefox, car il indique comment la
page s'affiche sur tous les autres navigateurs... et Internet Explorer,
qui est un cas particulier, il faut parfois faire des retouches pour
que ça fonctionne aussi sur ce navigateur.
Mozilla Firefox, un navigateur de plus en plus utilisé
Je vous invite vivement à télécharger Firefox. Si vous ne le faites pas
maintenant, vous verrez que vous en aurez besoin après de toute
manière, donc autant prendre les devants

Cliquez sur le lien ci-dessous pour télécharger Firefox équipé de la Google Toolbar pour vos recherches :




Téléchargez Firefox muni de la barre d'outils Google.


Comme vous le voyez, c'est très simple. Vous avez juste à cliquer sur "Télécharger Firefox" et c'est fait.
Le logiciel est bien entendu disponible intégralement en français, mais
vous pouvez aussi choisir une autre langue si vous le désirez
Outre le fait qu'il affiche les pages web correctement (ce qui doit
être une raison à elle seule suffisante pour vous décider à changer de
navigateur), Firefox dispose de fonctionnalités très intéressantes :

• Une barre de recherche Google est en place dès le départ
  
• Il bloque les popups
  
• Il dispose d'un gestionnaire de téléchargements très pratique
  
• On peut changer son apparence à volonté (il dispose d'un système de "skins")
  
• On peut naviguer avec des onglets.
  
• Pour ouvrir un nouvel onglet vide, faites Ctrl + T. Pour ouvrir un
  lien dans un nouvel onglet, cliquez dessus en maintenant Ctrl appuyé.
  C'est très très pratique !
  
• On peut rajouter des plugins pour lui ajouter une infinité de fonctionnalités.
  Je peux déjà vous conseiller de prendre Web Developer qui ajoutera une
  barre d'outils qui vous sera certainement utile lorsque vous créerez
  votre site web.
  
• 
  Bref, en ce qui me concerne j'ai adopté Firefox, et je fais en sorte d'en parler au maximum autour de moi (la preuve).
  Non pas que j'aie une dent envers Internet Explorer, pas du tout. Mais
  vous allez bientôt vous rendre compte dans ce cours du retard qu'il a,
  et de la nécessité d'avoir un navigateur à jour comme Firefox quand on
  crée un site web aujourd'hui.
  
  Vous pouvez installer Firefox sans désinstaller Internet Explorer. Les 2 navigateurs peuvent tourner en même temps sans souci.
  
  N'hésitez pas à parler de Firefox autour de vous. Tous les webmasters (dont moi !xd) vous en seront reconnaissants
  

On n'a fait que se préparer, voir de quoi on allait parler, et télécharger les programmes qui nous seront utiles.
Le blabla s'arrête là, dans le prochain chapitre on commence à rédiger notre première page en XHTML !
-------------------------------------------------------------------------

Votre première page XHTML


C'est bon, vous avez tous les logiciels qu'il faut ?

Alors ne traînons plus, on va maintenant passer à l'attaque et réaliser
notre première page en XHTML. Comme je vous l'ai dit dans le chapitre
précédent, il n'y aura pas de CSS pour le moment
-------------------------------------------------------------------------
Les balises et attributs



Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.

Par exemple, pour écrire "Bienvenue sur mon site !" en XHTML, comment on fait ? Bah, il suffit de le taper :

Bienvenue sur mon site !



Jusque-là, pas trop dur... Oui mais attendez, si c'était ça, ça serait trop simple et forcément ça serait pas rigolo

LES BALISE

En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.

Une balise commence par "<" et se termine par ">". Par exemple :





Les balises sont invisibles pour le visiteur,
elles servent de marqueurs pour indiquer quelque chose au navigateur.
Par exemple, une balise permet d'indiquer que tel texte est le titre de
votre page, cet autre texte est une citation etc etc...



Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.

Les balises existant par paire
: ce sont les plus courantes. On écrit la première balise, on tape du
texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/". Par exemple :

celui qui lit tout sa .....ben c'est bien lol......sinon un vrai site web est payant a cause du nom de domaine donc meme si c'est simple......enfin on s'en fou ^^ ...........(j'ai poster jsais pas pourquoi xD)

EDIT OF DREN.:Ben post pas!xD

xd c est aps encore finit y en a encore plein mais c est super long