La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours HTML » Chapitre 1

Atelier Webmaster



Sommaire du cours - Cours suivant >

Cours HTML : Chapitre 1


Un peu de théorie et d'histoire


Eh oui, avant de faire la pratique il faut apprendre les bases théoriques, c'est comme tout !

HTML c'est l'abréviation de HyperText Markup Language. (vous avez remarqué c'est de l'anglais bn_tongue Il va falloir vous y habituer tous les tags HTML sont en anglais ! Je vois le regard de certains se tourner très distinctement vers la sortie... Vous inquiétez pas c'est de l'anglais facile! Vous savez dire centre en anglais? "center" Bon bah c'est bon alors...)
Le HTML est donc un langage informatique, son nom veut dire "langage de balises", il s'agit en fait d'une série de code, un programme que l'on écrit quelque part et que l'on peut lire autre part...
Pour programmer en HTML on peut utiliser le bloc-notes. ( Démarrer/ Programmes/ Accessoires/ Bloc-notes ) Voici une image pour savoir comment accéder au bloc-notes :
document/atelier/bloc_notes.gif

Donc pas besoin de télécharger quoi que ce soit, vous l'avez déjà ! (Bien sûr il existe des logiciels qui permettent de programmer plus facilement. Ils colorisent les tags par exemple, ont généralement une banque de données avec tous les tags existant, enfin bref pleins de trucs très utiles pour gagner du temps et mieux se repérer sur sa page. Sur ce cours les codes devraient être assez clair, donc vous ne risquez pas de vous y perdre! Mais si vous voulez télécharger l'un de ces logiciels, je peux vous donner quelques noms: WebExpert (30 jours d'essai) , Dreamweaver (idem), Scriptedit (totalement gratuit, accessible sur la Bnbox) Mais je vais me répéter: le bloc-notes suffit amplement!)
Pour visionner ce que l'on a programmé (dans le bloc-notes) il nous suffit d'avoir un navigateur web. (comme Firefox, Internet explorer, Nestcape Navigator, Opera. Pour ce cours je voyagerez entre les divers navigateurs pour que vous puissiez découvrir leurs différences,  ceci dit je vous conseille fortement d'avoir Firefox de Mozila, mais je m'étendrais plus là dessus dans une autre partie de ce cours.)
En fait programmer en soi, c'est très simple ! On ouvre le bloc-note, on écrit quelque chose dessus et ce quelque chose on va le lire avec un navigateur! ça c'est la théorie!

Je pense que vous avez pas eu trop de mal à comprendre... Si malgré tout vous ne comprenez pas bien, rassurez vous, on va bientôt passer à la pratique et ça devrait se clarifier!
Bon ceci dit, préparez vous, parce que là on part dans les débâcles de l'HTML!

Une première page en HTML


Bon, bah déjà je sais comment écrire sur le bloc-notes, donc je vais écrire "je suis le plus fort", enregistrer et ouvrir sous internet explorer. Gnu ? Pourquoi ça marche pas ? T'avais dit qui suffisait de...

STOP ! Oui, bah oui j'ai dit qu'on écrivait sur le bloc-notes, mais pas n'importe quoi! Bon allez je vous apprend à écrire... Recopiez moi tout ça, vous inquiétez pas dans 2 min tout ça seras devenu plus clair que l'eau de roche!

Je vous encourage vraiment à recopier les exemples que je donne et pas à faire du copier-coller. A certains moments cela vous paraîtra idiot et inutile car vous "savez" déjà. Mais prenez le comme un entrainement, un exercice pour allez plus vite; plus on pratique, plus on maitrise !


Code :
<html>
  <head>
       <title>Vive le HTML!</title>
  </head>
  <body>
Quand j'&eacirc;tais petit j'ai appris à &eacirc;crire avec un stylo et une feuille de papier toute blanche!
Et aujourd'hui j'apprend à &eacirc;crire en HTML!
Peut-être qu'un jour je ferais un site...
  </body>
</html>



Allez, faites pas cette tête là, moi aussi je suis passé par des instructeurs idiots que me font marqué n'importe quoi!

Bon, une fois que vous avez copié ça, vous faites : fichier/enregistrez sous, une boite de dialogue apparait. Donnez un nom au fichier et enregistrez le en .html. Moi je vais choisir comme nom : 001, j'enregistre donc en 001.html ! (vous n'êtes pas obligé de faire pareil!)

Je vous conseil de créer un nouveau dossier sous le nom de "cours html". C'est le nom que j'utiliserai dans mes exemples en tout cas...


Pour mieux visualiser, regardez cette image :
document/atelier/enregistrer.gif


Bon maintenant expliquons un peu ce charabia !
Ça y est j'ai enregistré! Mais heu... c'est quoi .html ?

Bon, si vous venez de débuter dans les aléas de l'informatique est des .machins, vous devez vous dire :
Mais qu'est ce que c'est que ce truc bizarre .html ! pourquoi pas mettre .citrouille pendant qu'on y est ?

Bon si vous êtes habitué, ma foi c'est comme toutes les autres terminaisons. Mais je fais une petite explication quand même !

Tous les fichiers de votre ordinateur ont aussi une terminaison (pour word c'est : .doc, les programmes : .exe, un fichier PHP : .php, une animation flash : .swf, bref il y en a plein!) et notre page HTML c'est pareil, sa terminaison c'est : .html.
En fait on transforme notre fichier bloc-notes (.txt) en un fichier html (.html) qui transcrit les codes qu'on a mis en langage lisible par nous les êtres humains, via notre navigateur! ça va c'est clair comme ça? (y a intérêt ! Sinon vous me relisez ça 2-3 fois en vitesse !)

Bon, maintenant un petit plus pour les curieux:
Pour l'HTML il y a une variante, on peut aussi enregistrer en .htm. Soit .html, soit .htm. Et ça marche pareil! Oui oui!! (vous pouvez essayer) En fait, pour l'histoire, l'HTML marchait avant sous INUX et on mettait .htm. Puis il est passé sous windows, mac et il s'est transformé en .html. Bref, de nos jours, quasiment tout le monde utilise le .html. Mais notez bien que le standart c'est: .html, donc, utilisez le!
(dans ce type du variante, vous trouverez aussi du .dhtml, .xhtml, .xml même .htmls ! mais tout ça, c'est pas vraiment du HTML ! Ce sont d'autres langages de la famille du HTML...)

Dernière précision auquel vous n'avez peut-être pas pensé... Bon, là vous avez votre page .html devant les yeux, peut-être en train de l'admirer en pensant à toutes les choses que vous pourrez bientôt faire et puis tout à coup vous vous dites: Mais mais mais... Ou qu'il est mon fichier bloc-notes! Comment que je le récupère pour continuer ce que j'ai fait? Ehéh... J'vous le dirai pas! Bon allez: sur la page HTML dans internet explorer, clique droit/afficher la source, ou toujours sur la page HTML, affichage/source. Et voilà! N'oubliez pas ça, c'est important...

Plan de la page

Bon voilà ça c'est fait, le reste maintenant...
Regardez votre code source (le fichier bloc-notes quoi) vous allez remarquez deux choses. Y a des mots entre crochets (<body> par exemple. Vous reconnaissez l'anglais!) et même on pourrait dire qu'il y en a un qui ouvre (<html>) et un, avec un slash (/), qui ferme (</html>). On appelle ça des balises ou, des tags. C'est un ou plusieurs mots entre crochets. Il y en a une qui ouvre et une autre qui ferme (certaines balises sont "auto-fermantes", nous verrons cela plus tard) Entre les 2 "bouts" d'une balise, on met ce qu'on veut (ou presque.) Donc <body> blabla </body> est un tag... Ok ?
Bon, on va regarder comment ça se passe dans la page...
  • Une page HTML commence toujours par <html> et finit toujours par </html> C'est comme ça... Entre ces deux balises on met d'autres balises.
  • En premier <head></head>, le front. On y trouve le titre de la page, les métatags (c'est ce qui permet d'être référencer sur les moteurs de recherches) ainsi que des scripts où autre charabia. (c'est pour un peu plus tard ça!)
    Sur vous regardez notre page, vous verrez qu'il y a quelque chose entre <head></head> c'est : Le titre ! Tout ce que vous mettrez entre <title> et </title> s'affichera comme un titre ! Et le titre on le voit... là :
    document/atelier/html_titre.gif
  • On continue la descente. On a vu que dans <html></html> On trouvé <head></head> qui lui même inclue d'autres parties... Entre <html></html> et après <head></head> on trouve <body></body> : Le corps. (vous allez être des crack en anglais après ce cours bn_lol) C'est dans  cette partie que vous allez programmer pour afficher tout ce qu'il va y avoir sur votre page web! Et écrire en HTML, c'est tout simple, il suffit d'écrire du texte entre <body> et </body>. Si c'est pas beau la vie bn_tongue


Apprenez le plan d'une page HTML par coeur ! ça ne change jamais, toujours vous retrouverez les mêmes bases... (même en XHTML/CSS) Seul l'intérieur de <head></head> et de <body></body> va changer! Donc retenez bien cette structure.

Réponse aux dernières questions

Vous avez certainement remarqué avec soulagement que la suite de lettres bizarres (&eacirc;) s'est bien affiché comme un "é" sur votre navigateur ! D'ailleurs peut-être que vous n'avez pas suivi exactement mon exemple, que vous avez mis directement un "é" et que vous êtes, ô combien étonnés en lisant ceci, car sur Internet Explorer ça affiche aussi "é". Vous pouvez essayer les  deux ça marche !
Bon je vous entends raller :
qu'est ce qu'il a ce vieux fou à nous faire copier des lettres compliqués alors qu'on en est qu'au balbutiement et qu'on commence juste à comprendre !

Allez au coin et que je vous reprenne plus bn_mad
Il faut se plier aux lois du HTML qui sont de mettre les caractères accentués (vous savez les : é à è etc) sous la forme de "lettres bizarres". Nous allons d'abord essayer d'expliquer cette bizarrerie, puis nous verrons comment ça marche et nous finirons par voir que c'est très utiles !

Il se trouve que nous avons une langue qui utilise des caractères accentués. Tout comme l'espagnol, l'allemand... Seulement il existe des langues qui elles non pas ces accents ! (l'Anglais par exemple^^) Alors comment est ce qu'un ordinateur Anglais pourrait faire pour afficher des accents, puisque, au début d'Internet, il n'est pas censé les connaître ? C'est pour cette raison qu'on a créé ces suites de caractères qui sont en fait de simples caractères accentués qui sont comme des codes pour expliquer à l'ordinateur, ceci veut dire cela, etc...

Il existe 2 méthodes pour "coder" un caractères accentués:
- En code ISO 5589-1 (aussi appelé ISO-Latin 1! C'est comme si je vous disais que notre langue c'est le Français! Là c'est pareil, sauf que c'est du ISO 5589-1!)
- En code dit: ENTITY. (plus facile à retenir vu que là ce ne sont pas des chiffres, mais des "mots".)
Le premier a avoir été créé est le code ENTITY, mais tous les caractères accentués n'existent pas avec ce type de codage, de plus... disons que ce n'est pas très "universel" voilà pourquoi le ISO 5589-1, beaucoup plus barbare est apparu!
On les ouvre tout deux avec "&" et on les ferme avec une ";". Entre, on met une suite de lettres ou de chiffres et selon la suite de lettres cela donne une lettre accentués différentes. Je ferrais bientôt une liste de tous ces caractères accentués, en attendant voici les principaux:




Carractères accentués...
CarractèresSuite de carractères
é& #233;
è& #232;
ê& #234;
ù& #249;
à& #224;
ï& #239;
ô& #244;
ç& #231;


Voilà! Tout au long de ce cours je vais écrire les caractères accentués comme ça... En HTML c'est la règle ! Ainsi tout le monde peut vous lire... (je vous rassure, les ordinateurs ont depuis longtemps été mis à jour et ils comprennent très bien ce : é et ce : î!)

Ces caractères accentués sont tout de même très utile! Tenez, prenons un exemple, je vous met au défi de faire un "e dans l'eau" (½) pof comme ça! Où bien le signe béta (ß) héhé, vous faites moins vos malins là !
Les caractères accentués permettent d'écrire toutes sortes de lettres et de signes! Le signe copyright (©) mais aussi le début d'une balise ouvrante (< très pratique si vous voulez écrire un code HTML sans qu'il s'affiche en tant que code^^)  bref, un peu tout ce que vous avez envi, génial, non?

Voilà! Le premier chapitre est finit! C'est le premier et franchement c'est le plus dur à faire pour moi, j'espère l'avoir bien réussi! C'est les bases alors y faut que ce soit solide! Vous verrez au début j'explique beaucoup et après, tellement vous serez devenu fort, j'aurais même plus besoin! Tenez bon, on va arriver vite à ce qui est le plus intéressant...

L'heure du bilan

  • Premières explications du HTML standart. (caractères accentués)
  • Plan d'une page HTML.
  • Comment écrire en HTML.

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

Nimabbbhhhhhh proclame : Pamale Le 21 avril, 11h10 via Résumé - Le Médecin Malgrè ...

booba déclame : 7 Le 20 avril, 19h12 via Résumé : La Guerre de Troie...

lolilol écrit : Ca fait 7 Le 19 avril, 11h07 via Résumé du livre : Le Cid de...

sltje suis scribouille : Slt je suis nouvelle sur ce sit esque vous pouver medir si se cite eet bien Le 16 avril, 10h01 via Résumé - Le Médecin Malgrè ...

Latzo 109 écrit : Slt comme rooro l a dit c est pas le bn site mais moi aussi je joue a Fortnite mn compte c est PlayerSarro.
BYE
Le 15 avril, 22h23 via Résumé du livre : Le Cid de...

587564 griffonne : 3+4=7 Le 14 avril, 18h51

92000 scribouille : Trop facile Le 12 avril, 10h36 via Résumé - Le Médecin Malgrè ...

Okee25 bafouille : La réponse est 7 car 1+1+1(3)+1+1+1+1(4)=7.
C'est une logique mathématiques qui revient le plus souvent au classe de CP et GS.
Le 08 avril, 13h08 via Résumé scène par scène - Le...

milena bafouille : ùùmm Le 02 avril, 16h13 via Résumé - Les Fourberies De ...

sdefef" griffonne : Savazf Le 30 mars, 22h58 via Texte intégral - Le Médecin...

linabourhrou écrit : Bonjour Le 30 mars, 13h14 via Résumé - Les Fourberies De ...

Sora dit : Merci j'ai aussi un control tout à l'heure Le 26 mars, 8h09 via Résumé - Les Fourberies De ...

yoan déclare : Lol Le 25 mars, 21h01 via Résumé - Les Fourberies De ...

IKG murmure : GO Le 24 mars, 18h57 via Résumé : L'Avare

Canada griffonne : Qui aime la POUTINE Le 23 mars, 18h45 via Résumé scène par scène - Le...

Vladimir Poutine dit : Essaye Le 23 mars, 18h44 via Résumé scène par scène - Le...

Kim Jong Hun scribouille : Attention je vais envoyer un missile thermo-nucléaire Le 23 mars, 18h44 via Résumé scène par scène - Le...

Mac Gyver scribouille : Bon écoutez faut s'barrer d'ici donnez moi un trombone Le 23 mars, 18h41 via Résumé scène par scène - Le...

Don Diegue proclame : Je suis déshonoré Le 23 mars, 18h39 via Résumé scène par scène - Le...

Anonymous2.0 écrit : Wsh y a u bot Le 23 mars, 18h39 via Résumé scène par scène - Le...

bOTbUG dit : COPY/SITE/ROOM Le 23 mars, 18h38 via Résumé scène par scène - Le...

Yoo0Thy dit : Grace a se cite j ai remonter ma moyenne de 2 ptns franchement merci au createur de se cite merci beaucoup Le 18 mars, 14h32 via Résumé - Les Fourberies De ...

Bnmaster murmure : @Anonymous C'est un moyen simple de se prémunir contre les bots postant (au mieux) de la publicité. Le 16 mars, 12h56 via Résumé : Andromaque

Anonymous 2.0 chuchote : 3+4 est = à 7? Je ne comprend pas pourquoi ils ont mit ça.. Le 15 mars, 16h14 via Résumé - Le Médecin Malgrè ...

* dit : Que font les personnage les personnage dans cette scene 1 Le 13 mars, 17h58 via Résumé - Le Médecin Malgrè ...

* déclare : Rien Le 13 mars, 17h56 via Résumé - Le Médecin Malgrè ...

* griffonne : Je fait 555555 Le 13 mars, 17h55 via Résumé - Le Médecin Malgrè ...

marius déclame : Slt qui joue a last day on earth ? Le 12 mars, 19h57 via Résumé - La Chèvre De M. Se...

marius déclare : C trop bête Le 12 mars, 19h53 via Résumé - La Chèvre De M. Se...

marius s'exclame : Fastoche Le 12 mars, 19h44 via Résumé - La Chèvre De M. Se...

555555 gribouille : 3+4=7
sa va ?
Le 09 mars, 9h30 via Résumé - Les Fourberies De ...

louis s'exclame : Sklt Le 08 mars, 18h38 via Résumé scène par scène - Le...

louis klepak proclame : Salut les gars Le 08 mars, 18h38 via Résumé scène par scène - Le...

lol déclame : 3+4=7 Le 08 mars, 12h07 via Résumé - Les Fourberies De ...

rooro726bf s'exclame : Ca m'a aidé pour ma disertation Le 08 mars, 10h49 via Résumé du livre : Le Cid de...

rooro726bf déclare : Mais sinon très bien le résumé Le 08 mars, 10h49 via Résumé du livre : Le Cid de...

rooro726bf proclame : Ouais je sais que c'est pas le bon site mais si vous voulez jouer avec moi sur fortnite sur xbox one s mon pseudo c'est DemonZero61721 Le 08 mars, 10h44 via Résumé du livre : Le Cid de...

rooro726bf s'exclame : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...

rooro726bf griffonne : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...

nbh scribouille : 7 Le 07 mars, 19h53 via Résumé scène par scène - Le...

5OP s'exclame : 9RT788TY67 Le 07 mars, 17h20 via Résumé - La Chèvre De M. Se...

Mi écrit : Les gars vous me sauvez merci? Le 05 mars, 23h38 via Résumé scène par scène - Le...

Amisko chuchote : Ohh !!! Grace a vous uje sort de la gualere parceque je 'ai pas lu mon livre que je devait lire pour les petit vacance mtn !!OMG ce site est vraiment incroyab els!!! Le 04 mars, 19h20 via Résumé : L'Avare

Amisko écrit : Jadore !!! Oh.. Un père noel !!! Le 04 mars, 19h19 via Résumé : L'Avare

lili scribouille : J'aime beaucoup cette pièce, et elle est encore mieux quand on la joue tout les jours! Le 03 mars, 10h20 via Résumé - Le Médecin Malgrè ...

l gribouille : F Le 27 février, 21h11 via La Compagnie du Saint-Sacre...

Dionisio murmure : Merci Le 25 février, 17h42 via Résumé scène par scène - Le...

Bonjour bafouille : Cette pièce de théâtre est simplement NUL Le 23 février, 13h48 via Résumé : Le Mariage de Figa...

lolman dit : ZZzzZZZZZzzzzzZZzZzz Le 22 février, 17h24 via Résumé - Les Fourberies De ...

cgff bafouille : 22222222 Le 21 février, 19h02 via Résumé scène par scène - Le...

Publicité



Articles précédents

©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS