Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Avant de commencer... Informations sur le tutoriel Ajouter à mes tutoriels favo

Avant de commencer... Informations sur le tutoriel Ajouter à mes tutoriels favoris (22 fans) Auteur : M@teo21 Difficulté : Visualisations : 882 416 456 Licence : Plus d'informations Publicité Historique des mises à jour Le 03/04/2010 à 12:09:59 Corrections diverses, tickets n°1916 et 1917 Le 11/02/2010 à 22:16:27 Ticket #1623 Le 02/02/2010 à 12:07:26 Ajoute le temps d'étude estimé 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 quelque 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. Ah, mais je parle, je parle, et je ne me suis pas encore présenté Donc moi, c'est M@teo21 (du moins c'est mon pseudo, vous vous doutez bien que ce n'est pas mon vrai nom ) Je serai votre guide tout au long de ce cours... Je vais essayer de faire en sorte que l'apprentissage soit pour vous un vrai plaisir 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 Sommaire du chapitre : XHTML ? CSS ? C'est quoi ça ? L'éditeur Les navigateurs Q.C.M. 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 suffi ? 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...". Vous avez peut-être entendu parler aussi du HTML. En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML. En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML. C'est pour cela que nous étudierons XHTML dans ce cours. 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. C'est avec lui que j'ai réalisé mon premier site web (en fait, il s'agit de ce site, le Site du Zér0, j'en ai fait qu'un seul ) 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 recommander Smultron. 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 Opera Google Chrome Netscape Konqueror (pour Linux) Lynx (pour Linux) Apple Safari (pour Mac et Windows) etc... La liste est longue, mais je vous ai cité les principaux. Il est conseillé d'installer plusieurs navigateurs pour s'assurer que son site fonctionne correctement sur chacun d'eux. Bien entendu, il y en a beaucoup, mais je vous recommande au minimum d'avoir ces deux-là : Internet Explorer Mozilla Firefox Internet Explorer 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 uploads/Litterature/ xhtml2.pdf