~Tatchy~
Roi
Offline
Joined: 28 Feb 2007
Posts: 2,982
Localisation: Marseille(Sud) Devise: Psychologiquement ... Jeux:  Réseau Hamachi: 'partiecrucru000' Mot de passe: '000' Point(s): 217
|
 Posted: 28/11/2007 12:00:17 Post subject: Apprenez à créer un site!!! { partie 1 html] " code de bases. XHTML " |
 |
|
Seigneur Licorne / allias "Tatchy" pr3sente...
Apprenez à créer un site web en html: votre première page de XHTML!!!
Attention tout le monde, je vais ici, inspiré du " site du zéro "... Vous apprendre à créer un site web, plus rapidement et plus facilement, en voyant les fonctions de base du langage HTML, vous allez voir, c'est pas si compliqué !!!
Partie 1 ) XHTML - "code de base".
nous allons tout d'abord commencer par commencer le commencement  . Allons, ce n'est pas si compliqué  Nous y voici...
Voilà tout d'abord ce que nous allons apprendre dans cette page :
- Le XHTML. C'est quoi?
- Quels sont les bons outils?
- Heu... Je lui parle comment à mon ordinateur moi?
- Le code minimum en XHTML!
- C'est... Blanc!
Nous allons bien étudier ces 5 chapitres, gardez votre calme... C'est pas si dur 
 I-LE XHTML. C'EST QUOI?
- Le XHTML, pour commencer, est un langage que votre ordinateur comprend, et qui sert seulement sur internet, lors d'une confection d'un site web, visant la structure même du site sur lequel vous naviguez. Bien sur, si on ne peut pas communiquer avec son ordinateur, pour lui demander de créer un site, c'est assez gênant. Donc le XHTML est un langage informatique, qui, comme tout les autres, est spécifiquement destiné à une tache précise, qui est pour dans notre cas, la création d'un site. Ce langage est composé donc, de codes bizarre, que nous allons apprendre à adopter peu à peu, pour bien maitriser le langage XHTML
- Vous ne vous êtes jamais demandé par quel enchantement est ce que les sites web ont été confectionné, c'est surement très dur vous pensiez?Hum... Tenez : dans notre tendre et jeune enfance, lorsque on s'imaginait les tonnes et les tonnes de circuits électroniques animés par une géante machine dans votre écran qui faisait changer votre lieu de navigation de site, lorsqu'on cliquait sur un lien... Absolument pas, créer un site, c'est très facile, vous pouvez l'apprendre en une semaine, et connaitre les bases par cœur en une ou deux heures, grâce aux deux première partie de mes tutos ! D'ailleurs, le mot apprendre est très mal employé de ma part, car si vous êtes un minimum attentif à ce que vous lisez, vous devriez retenir superficiellement la façon de faire un site, ce que je vous conseille d'abord de faire au lieu de vous casser la tête à apprendre les codes , il vous suffit juste d'être attentif!
- En fait je vous ai un peu menti tout à l'heure, Le XHTML ne sert pas seulement à créer un site, ça peut aussi servir à faire un post, par exemple, mais le HTML marche aussi lorsque vous envoyez un e-mail (ça dépend de votre hébergeur de boite e-mail)... Il peut aussi servir à plusieurs autres choses, mais je dirai que 95% est destiné à la création d'un site... *notez que vous pouvez activer / désactiver le HTML les smilles et le BBcode dans vos postes sur des forums de xooit. *
- " C'est bien beau tout ça mais... c'est quoi ces codes? je suis pas là pour lire tes romans Licorne!!! "
Je vous comprend tout à faits, seulement si je vous balance tout d'un coup... Vous n'allez pas tout comprendre... Alors je fait les chose petit à petit... d'abord, vous ne connaissez même pas ce que signifie XHTML  ! D'ailleurs c'est surement le moment de vous en parler  Je vais même en profiter pour vous dévoiler quelque autres acronymes...
- XHTML : e*Xtensible *Hyper*Text *Markup *Language.
- CSS (nous verrons cela plus tard) : *Cadasting *Steel *Sheet ( Feuille de style en cascade { traduction ).
- WWW : *World *Wide *Web (Toile web mondial { traduction ).
- HTTP : *Hyper*Text *Transfert *Protocol ( Protocole hypertext { traduction ).
- FR : *F*Rrance ( France ^^)
- SFH : *Stronghold *French *Heaven (Paradis français de stronghold { traduction ).
- SH (allez un petit effort
 ) : *Strong*Hold ( je ne traduit pas le mot Stronghold puisque c'est un titre  )
- " Super, on va enfin commencer la création du site!!!"
Hé oh!!! Je n'ai rien dit de tels, où on va le mettre notre code???
 II-QUELS SONT LES BONS OUTILS?
- Bien, vous venez juste de vous apercevoir, à la fin du chapitre précédent, qu'il y avait bien une question qui dérangeait beaucoup?
"Où va t-on le mettre notre code?".
Non seulement cela mais aussi d'autre questions tout aussi gênantes s'additionne, et plus on progressera, moins ça changera...
Comment je vais la prévisualiser ma page?
Mais aussi: Et les autres, ils vont pouvoir consulter ma page d'un coup, mais à quel adresse figure t-elle?
Comment changer cette adresse?
Eh bien, je vais d'abord commencer par vous montrer un outil pas nécessaire mais très préférable en code informatique pour internet ( eh oui, il n'y en as pas qu'un  ).
- Ce logiciel, vous le connaissez tous... Mozilla Firefox Pour ceux qui sont vraiment tout nouveau dans le domaine de l'informatique, Mozilla Firefox est un navigateur, qui permet, comme son nom l'indique, de naviguer sur une page web, cela ne veut pas dire une page web internet, car sachez que nous pouvons bien sur lire une page web sans internet - aller quoi! réfléchissez un peu! -, une page web que nous fabriquons nous même par exemple .
"Ben c'est bien beau tout ça, mais moi, j'ai Internet Explorer, et ça me va très bien! Je ne vois pas pourquoi je changerai !"
Oui, c'est vrai, Explorer est lui aussi un navigateur ( il en existe pas mal ! ), sauf qu'il prend en charge beaucoup moins de balises que Mozilla, beaucoup de site s'affichent mieux avec Mozilla. Sachez quand même que IE ( *Internet *Explorer ) marche, même si il y a souvent quelques lags, après... c'est une questions de gout...
- "Alors Tatchy le code, ça vient"? Il est où, ça doit faire deux heures que je lis et j'en voit toujours pas!"
Patience, c'est pour très bientôt, vous verrai vous aller l'adorer le code . On se redirige vers nos questions... Le lieu où on écrira notre code maintenant... eh bien il nous faut juste un éditeur de texte, comme le bloc-note par exemple, ou bien le WordPad
[ pardon M@teo21 pour l'image, j'annonce quelle est "empruntée"  ]
- Bon, revenons à nos patates... Oui, le bloc-note est l'outil classique pour faire un site web .
Hep hep hep, vous croyez pas que je vais vous laisser avec ça? Vous allez me faire exploser votre ordinateur  ( bon d'accord, expression un peu hyperbolique... ), voyons voir...
Descendez un peu plus bas dans la page pour télécharger le programme.
- Ceci est un éditeur de texte, comme le bloc-note, sauf que celui-ci est spécialisé dans les codes informatiques, et colore votre code selon le langage que vous utilisez, vous verrez, c'est très utile pour s'y repérer quand on à un long code de XHTML. Il permet aussi de reconnaitre les erreurs de votre code, en les laissant noir au lieu de les colorer (très utile ). Ce logiciel prend en charge énormément de langage... Mais pour l'instant, restons sur le notre. C'est donc dans un éditeur de texte, comme le bloc-note, que nous allons mettre notre code!
- Attention, je n'ai jamais dis que Mozilla et Notepad++ étaient indispensable à la création d'un site... Il n'est pas impossible de réaliser un site avec IE et le Bloc-Note ; seulement après, vive les lags !
 C'est pour ça que je vous conseille vivement d'adopter ces 2 logiciels, utiles.
 III-HEU... JE LUI PARLE COMMENT A MON PC MOI?
- Et voilà on y est, vous aller enfin voir comment établir un code, mais on passera au chose sérieuse dans le chapitre IV de ce topic... Bien, revenons à nos codes. Tout d'abord, un code ça ne s'écrit pas en signe ou symbole, comme en chinois, non, on fera écrit surtout des mots en anglais ( ou abrégés ) , signifiants des ordres destinés à notre ordinateur, qui - bien exécutés - seront enfin traités par notre ordinateur... Ces mots en anglais, on ne les lâches pas comme ça, il faut insérer autour de ce mots les "petites flèches", tels que: "< "mot en anglais ">" . Prenons par exemple, "a" qui permet de faire un gros titre :
- Ce que je vient de vous montrer s'appelle une balise. La partie XHTML d'un site web compliquée est composée à 40% de balises. pour vous donner une image... Faites " CTRL + U " à la page d'accueil du forum... Eh oui, voilà plein de code...
- Seulement, ça serait un gros bordel pour délimiter la fin et le début de ce titre... c'est pour cela que les informaticiens ont choisis de faire deux types de balises:
- Les balises fonctionnant par paires : il y a donc deux balise pour faire comprendre à votre PC ce que vous voulez pour cette première façon.
1- Une balise ouvrante ; comme celle que j'ai mis plus haut...
2- Une balises fermantes ; on rajoute un "/" ( " slash " ) avant le premier mot de la balise.
3- Nous avons donc:
| Code: |
<h1> "mot que vous voulez mettre en gros caractère" </h1>
|
- Les balises seules : il n'y a qu'une balise pour cette deuxième façon ; elle comporte tout simplement un slash à la fin du dernier mot de la balise. nous avons donc:
- Et voilà, vous en avez du code... enfin bon, il ne faut pas larguer ça comme ça dans le bloc note ça ne marchera jamais, il nous faut une série de code pour indiquer à l'ordinateur notre demande ( en l'occurrence, créer un site ). Ce code, on l'appelle "le code minimum", il est pourtant asser compliqué... Et c'est ce que nous allons voir dans le quatrième chapitre de ce topic .
- Ho hé? revenez, je n'ai pas fini là, nous n'avons pas vus "les attributs" ; ils sont très utiles!!! Mais avant, nous allons localiser l'attribut dans les balises paires "a" , permettent de faire un lien :
| Code: |
<a href="http://strongholdfrenchheaven.xooit.com/index.php"> Stronghold French Heaven </a>
l'attribut est:
href="http://strongholdfrenchheaven.xooit.com/index.php"
|
- C'est pas compliqué ça . Sachez que l'on peut mettre autant d'attribut que l'on veut, comme ne pas en mettre du tout *à noter: il y a des balises ou l'on ne peut mettre d'attributs*. Retenez bien ce système d'attribut, ou sinon vous vous emmêlerai les pinceaux lorsque vous vous trouverez au CSS...
 IV-LE CODE MINIMUM EN XHTML
- Voilà, le sublime, l'étonnant, et l'étrange code minimum:
| 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" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
|
- " Eh bien je pense bien que la partie écrite était mieux... "
Mais non, on reste là et on reste attentif surtout! C'est une phase importante, car si vous commencer à bâtir sur des mauvaises bases, ça se passera mal pour la suite. Je vous conseille vivement d'apprendre ce code, par cœur !
- Commençons par décomposer et analyser notre code afin d'y voir plus clair dans ce bachibouzouk ; Balise par balise.
- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd": La balise DOCTYPE et ses attributs ( à retenir ) sert à indiquer à notre PC que nous allons utiliser le langage XHTML 1.0... Retenez-la, car si un jour vous tombez dessus, vous ne serai pas très à l'aise... Elle est assez compliqué... Heureusement tout cela à un sens, nous ne l'étudierons pas, c'est trop compliqué pour l'instant, et ça ne nous servira pas pour la suite.
- html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" : La balise html est la plus important des balises, car c'est elle qui indique le début de notre page. Les attribut de cette ne sont pas obligatoires, mais si vous êtes vraiment un peu perdu, sachez que " xml:lang="fr" " Sert à dire à votre ordinateur que la page est écrite en français, ça peut servir lors d'une traduction de page via Google... Mais je le redit, ces deux attributs ne sont pas obligatoires.
- head : Cette balise est là juste pour compliqué la tache , non en fait elle regroupe quelques balises, asser spéciale, nous le verrons après.
- title : Pour ceux qui sont asser calé en anglais, vous aurez deveniez que "title" signifie "titre"... Cette balise est formé par paires, vous pouvez voir le "/title" juste après, c'est donc qu'il y a quelque chose à mettre entre les deux, sinon ce serai une balise qui ne sert à rien... Donc ce que nous mettrons entre la balise "title" , et la balise "/title" , sera un titre... Mais où il sera??? On verra ça dans la partie V.
- meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" / : Cette balise, est modifiable, mais ne l'enlevez pas, ses attributs sont assez compliqué, je ne vous l'explique pas, ça nous ferai perdre du temps inutile pour la suite.
- /head : Cette balise indique que l'on ferme la balise "head", et c'est après que l'on passera au choses sérieuses...
- body : Cette balise est une des balise les plus importantes, et comme pour la balise "title", il faudra glisser quelques chose à l'intérieur, enfin, beaucoup plus que quelques chose, car c'est ici que tout aura lieu, et entre cet balise et la balise qui la ferme ( "/body " ) que tout aura lieu, pour l'instant elles sont toutes proches...
- /html : Et voilà la balise qui ferme sa paire ( " html " ), car elle possède un "slash" ( " / " ) après l'ouverture de la balise. En écrivant cela, nous bouclons donc notre site, l'ordinateur comprend ici, que c'est la fin de notre site...
- Reconnaissez que c'est quand même plus clair comme ça, maintenant, nous allons prévisualiser notre page. Je vais d'abord vous expliquer comment faire, puis ensuite vous montrer un vidéo, elle aussi empruntée au site du zéro ...
1- lorsque vous avez votre code sur notepad++ (sautez cette étape si vous avez le bloc-note), faite : " langage " > " HTML " :
afin de colorer votre code. Comme ceci:
- Ensuite, enregistrez le fichier. Enregistrez donc votre fichier en "*.html" [remplacez le "*" par le mot que vous voulez, qui correspond au site bien sur. ]. Faite attention à bien connaitre l'emplacement du fichier dans votre disque dur, vous en aurez besoin par la suite. J'espère que vous suivez bien, il faut surtout bien penser à enregistrer le fichier en : " exemple.html " , et se souvenir du répertoire dans lequel vous l'enregistrez : exemple
 "Mes document\Mes sites\exemple ".
- Pour réouvrir par la suite le fichier, allez, dans le répertoire ou est placé votre fichier " exemple.html " , puis ouvrez le avec notepad++ ou le bloc note :
[*]Voilà donc enfin la vidéo qui récapitule le tout...
[*]Pour essayer le fichier, il vous fait juste faire un double clique, comme dans la vidéo, sur le fichier " exemple.html " . Mais...
 C'est... Blanc! IV-C'EST... BLANC.
[*]Ben oui patate! tu t'attendait à quoi  Un site tout complet avec du code minimum, c'est pas aussi simple de créer un site, c'est pas pour rien que c'est un métier. Enfin... C'est peut-être compliqué de créer un joli site, mais sachez que les informaticiens ont tout fait pour vous faciliter la tache, oui, vous avez bien entendue, le gros bazard que vous voyez en faisant " Ctrl + U" ( sous Mozilla Firefox ) , c'est la manière la plus simple pour " écrire " un site...
[*]Bon, c'est pas tout ça mais comment je fait pour que mon site soit " joli " ?
Du calme, c'est pas en se pressant qu'on ira plus vite, heu quoi que... bon enfin c'est pas grave ... On va commencer par trouver où est-ce qu'on va l'écrire notre site. Enfin bon, si je vous laisse chercher, je pense pas que vous aurez trouvez à la fin de l'année, on va d'abord commencer par écrire dans les balises " title " et " /title " .
| 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" >
<head>
<title> ---------->Bienvenue sur mon site !<----------</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
|
[*]Allez, réessayez un double clique sur le fichier maintenant... regardez un peu en haut...
regardez à coté de l'icône de Mozilla extrême gauche tout en haut
[*]La page et toujours blanche, mais vous avez ajouté un titre à votre site , c'est déjà ça . Bien, attelons nous à marquer quelque chose dans notre joli partie blanche, qui ne veut pas dire grand chose pour l'instant... nous allons une fois de plus souhaiter la bienvenu à notre public... pour cela, il vous faut écrire entre les balises : " body " et " /body " , où se nous ferons 99% de notre site.
| 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" >
<head>
<title>Bienvenue sur mon site !</title> <----------
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body> ---------->
<p>Bienvenue à tous !!!</p>
<---------- </body>
</html>
|
[*]N'oubliez pas de mettre les balises " p " et " /p " qui permet l'insertion du texte (abrégé du mot " paragraphe " ...) On réenregistre, et on actualise notre page [ Remarque : l'adresse est celle du répertoire de votre disque dur dans lequel se trouve votre fichier " exemple.html " ] , et voilà ce qu'on obtient :
Et voilà notre joli page internet.
[*]Magique, n'est-ce pas? Ben en fait non pas du tout, c'est ça le langage informatique, vous venez d'apprendre aujourd'hui grâce à ce tutos une chose de grande importance dans la culture de nos jour, c'est une petite partie de mémoire pour vous, mais un pas de géant pour votre culture. Il se pourrait même que cela fasse basculer votre carrière, vous passionner dans l'informatique, puis en faire votre métier plus tard ... C'est le cas pour moi... Je suis plutôt bien partit à 13 ans... Bon revenons à nos choux fleurs... Vous devrait maintenant savoir comment est-ce que l'on peut faire un site web ( très simplement ) , si ce n'est pas le cas, revenez absolument tout relire, il faut absolument que vous le sachiez...
Postez les comz, svp ... Beaucoup de choses à modifier
[Edit]
_________________
Vive la prog' !
Last edited by ~Tatchy~ on 20/02/2008 15:12:11; edited 34 times in total |
|
Gardien de la Langue
j'avance j'avance... Je me demandait d'où venait ces balise "justify" mdr!!!!
Je te surveille ^^ Je pense que ton tuto risque d'être un peu confus pour un novice pour le moment. On verra comment ça se passe par la suite.
