La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours XHTML/CSS » Préparatifs préliminaires

Atelier Webmaster



Sommaire du cours - Cours suivant >

Cours XHTML/CSS : Préparatifs préliminaires

Pour partir sur de bonnes bases il va nous falloir comprendre ce que nous allons apprendre dans ce cours. Mais avant cela, je vais peut-être me présenter : je me fais appeler Bnmaster et c'est moi qui vais vous guider tout au long de ce cours ! Inutile de vous dire que vous aller en baver, hum, hum...

On a vu dans l'introduction que le XHTML dérive du HTML, mais que cela soit clair dès maintenant : ce sont deux langages bien distincts. (quoi que similaire sur la forme) Le XHTML est beaucoup plus strict au niveau de la programmation que le HTML c'est ce qui fait qu'il est le plus utilisé à l'heure actuelle. (jusqu'à un retour du HTML sur le devant de la scène, peut-être plus rapidement qu'on ne le pense)

Pour ne pas perdre trop de temps, si l'HTML vous intéresse, allez lire le cours d'HTML de la Bnbox.


Il faut aussi bien différencier le XHTML du CSS. Présentons les plus précisément tous les deux :

Le XHTML


Le XHTML est le langage qui va nous permettre d'afficher le contenu de nos pages Web. C'est-à-dire que l'on va demander à l'ordinateur les choses suivantes : "affiche ce morceau de texte, affiche cette image, fait un tableau avec tel texte à l'intérieur". En fait c'est exactement comme cela que cela fonctionne : on donne des instructions à l'ordinateur. Mais malheureusement l'ordinateur ne comprend pas très bien notre langue... A vrai dire, il parle en 0 et en 1 ! Alors pour toutes les personnes comme vous (je suppose) et moi qui ne parle pas en 0 et en 1, on a inventé des langages compréhensibles par les humains et par les ordinateurs. Le XHTML est un langage informatique assez simple, il en existe des plus compliqués comme le PHP ou le C par exemple.
Ainsi donc, pour dire à notre ordinateur d'afficher du texte on va lui dire quelque chose du genre :
Code :
<texte>Merci cher ordinateur d'avoir bien voulu affiché ce texte, c'est sympa de ta part !</texte>

Une image :
Code :
<image>Merci cher ordinateur d'avoir bien voulu affiché l'image qui a pour nom image.jpg</image>


Le seul hic dans tout ça c'est que le langage XHTML est un chouille plus compliqué ! (bah sinon j'aurais rien à vous apprendre bn_heureux) A partir de maintenant j'utiliserai le véritable langage XHTML. Je n'expliquererai pas tous les exemples dès le début, mais petit à petit... Comme ça vous aurez le temps de tout assimiler mais vous aurez aussi de l'avance quand j'expliquerai un exemple déjà utilisé bn_tongue

Le CSS


Le CSS quant à lui va nous permettre de faire la mise en page, de concevoir le design de notre page Web. De la même manière qu'avec le XHTML on va dire à l'ordinateur : "Affiches ce texte à tel endroit et colorie-le en bleu. Mets tel en image en fond de tel tableau et centres le texte dans les cellules de ce tableau." Mais bien entendu ce langage n'est pas le même que le XHTML ! (ce serait trop simple bn_tongue) Cependant on va s'appuyer sur les ordres que nous avons donner à l'ordinateur en XHTML pour faire la mise en page. C'est-à-dire que l'on va appliquer le CSS sur les "ordres" du XHTML. Vous verrez cela plus concrètement dans la suite du cours, patience !

Nous n'aborderons pas le CSS dans les premiers chapitres, mais ensuite on l'utilisera tout le temps !

Où travailler ?


C'est vrai que j'ai l'air malin avec mes explications mais cela ne nous dit pas comment est ce que l'on va travailler. Hé bien je vous présente votre plus fidèle compagnon de programmation :
document/atelier/bloc_notes.gif


C'est joli hein ? Comment ça, vous n'aimez pas ! Pourtant cela suffit amplement. Le Bloc-notes qui est fourni par défaut avec Windows (pour y accéder : Démarrer/Tous les programmes/Accessoires/Bloc-notes), où équivalent sur d'autres OS, est l'endroit idéal pour parler avec l'ordinateur afin qu'il puisse interpréter ce que nous lui disons.

Si vous utilisez une autre plate-forme que Windows, fouillez un peu et vous devriez bien trouver quelque chose vous permettant d'écrire du texte.


Mais en fait, un code peut devenir assez rapidement difficile à lire dans le bloc-notes. Pour retrouver une ligne de code précisément sur tout un tas de lettres, le tout sur un fond blanc, lettres noires... disons que ce n'est pas ce qu'il y a de plus pratique ! Voilà pourquoi certains logiciels colorient votre code pour que vous puissiez mieux vous y repérer. (en plus de cela ils possèdent d'autres fonctionnalités comme la fonction de recherche et de remplacement à la volée.)
Pour vous citer deux de ces logiciels qui se valent, je parlerai de : Notepad++ et PSPad Editor. Pour me part, j'utiliserai Notepad ++ pour ce cours puisque c'est celui que je connais le mieux bn_wink Voici donc un petit screenshot de la bête :



Si vous êtes sous Mac, vous pouvez utiliser Smultron.
Si vous êtes sous Linux, vous avez certainement déjà un logiciel approprié comme Emacs ou Vim. Bluefish est particulièrement adapté à la programmation Web.

Où visualiser notre travail ?


Nous allons concevoir un site Internet, non ? Alors nous allons visualiser notre travail sur un navigateur Web. Tout simplement !
Le plus connu d'entres eux est Internet Explorer. Il est fournit par défaut avec Windows et se retrouve aussi sur Mac. La dernière version de ce logiciel est la version 7 mais la 6 reste la plus répandue. (Au passage, la version 8 est en cours de conception) Or cette version 6 date de... de la sortie de Windows XP ! C'est-à-dire il y a très longtemps à l'échelle de l'informatique. Quand on voit la vitesse à laquelle évolue le monde informatique de nos jours, on se demande comment un navigateur aussi ancien peut encore être autant utilisé ! Vous verrez durant ce cours que nous allons être très souvent freiné par l'ancienneté de ce navigateur. (et même la version 7 nous posera quelques soucis) Pourtant il va falloir nous y plier, tout du moins si nous voulons que nos pages Web soient accessible par tous ! (ce qui est le but du XHTML/CSSS rappelons-le bn_heureux)

Il existe plusieurs alternatives à ce navigateur. Le navigateur Firefox, développé par la fondation Mozilla (qui en est actuellement à sa version 2, la version 3 étant en cours de création) est l'une d'elle et trouve de plus en plus d'adeptes sur la toile. Je ne pourrai que vous le conseiller car c'est un très bon navigateur, entièrement gratuit (bien sûr) souvent mis à jour et surtout : récent mini_bn Pour le télécharger : site officiel de Firefox.


Je citerai aussi le navigateur Opéra qui est tout aussi bien (voir mieux sur certains points) que Firefox. Pour le télécharger : site officiel d'Opéra.

Internet explorer, Firefox et Opéra peuvent très bien fonctionner tous les trois ensembles ! Et ces deux derniers peuvent être désinstallés s'ils ne vous plaisent pas ! Je vous conseille de les télécharger dès maintenant (même si vous ne comptez pas les utiliser pour surfer) car si vous voulez que tous les visiteurs puissent accéder à vos pages, il faudra tester votre site sur ces navigateurs ! (eh oui, car l'affichage ne sera pas le même sur Internet Explorer que sur les deux autres navigateurs plus récents.)


Peut-être que vous vous dites que je suis un vieux grincheux qui ne fait que critiquer, une nouvelle fois, le bien connu : Windows ! Que je suis un petit trop abrupt à propos Internet Explorer (abrégé en IE) et que quant même, si Internet Explorer est utilisé par autant de personnes dans le monde c'est que cela ne doit pas être un navigateur aussi nul que ça ! Je vous rassure tout de suite, je ne suis ni vieux (enfin je crois pas) ni grincheux ! (je suis un Bnmaster rappelez-vous ! Et dans Bnmaster y a BN et un BN... bah ça sourit bn_big_smile)
Le W3C qui a pris en charge la création du XHTML/CSS est un organisme qui a pour rôle d'assurer que tout le monde puisse accéder au Web, correctement... Il y a quelques années les navigateurs se livraient une guerre sans merci ! Notamment Internet Explorer et Netscape Navigator. Microsoft et Netscape inventaient des balises HTML que seul leur navigateur pouvait lire, espérant ainsi forcer le ou les concurrents à l'implanter sur leur logiciel, si la dites balise était utilisée par beaucoup de programmeurs. Tout ceci au détriment des usagés bien entendu... Voilà pourquoi des règles ont été créé afin de "standardiser" tout ce joyeux bazar ! Règles créées par le W3C. En plus de ça se sont des bonnes règles, puisque, grâce à elles, les webmasters peuvent programmer avec plus de libertés. (paradoxalement bn_heureux) Mais je m'arrêterai là quant aux standards du Web et au W3C, je vous renvoie par contre vers cet article du Site Du Zéro qui explique cela bien en détails : Allez à l'article du Site du Zéro.

Si vous débutez tout juste dans la programmation, ce lien vous sera foncièrement inutile pour l'instant. Vous pouvez tout à fait le laissez tomber, mais dès que vous aurez avancer un peu plus dans la connaissance du XHTML/CSS, je vous encourage fortement à lire cet article.

Mettre notre site en ligne


En sommes, désormais vous savez à peu près comment nous allons programmer nos pages Web. Vous savez où est ce que nous allons travailler et où est ce que l'on va voir le résultat. Maintenant il faudrait savoir comment faire pour que ce résultat soit accessible par tous ! Plus concrètement : comment "mettre en ligne" notre site Web. Pour répondre à cette question, je vous renvoie à un mini-cours de l'Atelier Webmaster qui vous expliquera tout en détails : utiliser le FTP. (vous n'aurez besoin de lire ce mini-cours que lorsque vous aurez créé un début de site. Donc, si vous êtes du genre "pressé", passez directement au cours suivant, et retournez lire ce mini-cours quand vous en aurez besoin bn_heureux)

Voilà ! Nous avons posé les bases ! Dans le prochain chapitre nous allons attaquer le concret, mais avant il fallait se préparer. On se dit donc à tout bientôt. (le temps que vous cliquiez sur Cours suivant quoi bn_wink)

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

Moi s'exclame : Nb k Hier, 23h12 via Résumé scène par scène - Le...

yuiooyo tergiverse : Jouon ensemble Le 17 décembre, 21h19 via Résumé scène par scène - Le...

7ku554mk griffonne : <a href="http://www.4rj7znph.com/nike-shox-turbo-21-rosa-rosso-scarpee">nike shox turbo 21 rosa rosso</a> <a href="http://www.96mhjpfw.com/air-max-97-og-argento-scarpe-da-ginnastica-kurpesa">air max 97 og argento scarpe da ginnastica</a> <a href="http://www.0uylf89z.com/air-jordan-6-infrar%C3%B8d-23-hvid-kurpesc">air jordan 6 infrar?d 23 hvid</a> <a href="http://www.99exyoex.com/air-jordan-retro-4-royal-blau-silber-obuva">air jordan retro 4 royal blau silber</a> <a href="http://www.gns236sp.com/air-jordan-1-retro-ko-high-og-sport-blau-kaufen-schuhef">air jordan 1 retro ko high og sport blau kaufen</a> <a href="http://www.775mqska.com/nike-wmns-air-max-thea-marina-militare-atomic-rosa-chaussuresg">nike wmns air max thea marina militare atomic rosa</a>
7ku554mk
Le 17 décembre, 11h06

Carla Cristina s'exclame : Qui pue Le 17 décembre, 10h28 via Résumé - Les Fourberies De ...

Carla Cristina chuchote : Je suis une crotte de nez Le 17 décembre, 10h26 via Résumé - Les Fourberies De ...

Carla déclame : Je suis une crotte de nez Le 17 décembre, 10h26 via Résumé - Les Fourberies De ...

Tom déclare : Ça va Le 17 décembre, 10h25 via Résumé - Les Fourberies De ...

Carla proclame : Caca Le 17 décembre, 10h22 via Résumé - Les Fourberies De ...

Moi écrit : Génial ? Le 17 décembre, 10h21 via Résumé - Les Fourberies De ...

yi déclare : Ipmuo Le 16 décembre, 17h45 via Résumé scène par scène - Le...

Moi déclare : Gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg Le 16 décembre, 15h23 via Résumé scène par scène - Le...

Moi chuchote : Bvvgvv Le 16 décembre, 15h22 via Résumé scène par scène - Le...

Moi tergiverse : Bbcgd Le 16 décembre, 15h22 via Résumé scène par scène - Le...

)à)ào$ bafouille : Jiojiij Le 16 décembre, 13h22 via Résumé scène par scène - Le...

7x8rq331 proclame : <a href="http://www.4rj7znph.com/femmes-nike-blazer-vert-violet-kurpese">femmes nike blazer vert violet</a> <a href="http://www.96mhjpfw.com/le-coq-sportif-kvinders-sko-sort-orange-kurpesa">le coq sportif kvinders sko sort orange</a> <a href="http://www.0uylf89z.com/air-jordan-4-sort-and-lyser%C3%B8d-chaussuresb">air jordan 4 sort and lyser?d</a> <a href="http://www.99exyoex.com/nike-internationalist-glacier-blau-xanax-obuve">nike internationalist glacier blau xanax</a> <a href="http://www.gns236sp.com/nike-air-force-1-low-tech-tuff-schwarz-schwarz-chaussuresa">nike air force 1 low tech tuff schwarz schwarz</a> <a href="http://www.775mqska.com/adidas-gazelle-boost-marr%C3%B3n-plata-butya">adidas gazelle boost marr?n plata</a>
7x8rq331
Le 16 décembre, 9h20

atuil dit : Zzeee Le 15 décembre, 21h47 via Résumé scène par scène - Le...

? ??????????????? gribouille : Ugvygvygvyu Le 14 décembre, 15h11

? ??????????????? chuchote : F Le 14 décembre, 15h11

? ??????????????? tergiverse : F Le 14 décembre, 15h11

? déclare : Salut Le 14 décembre, 15h11

Lol murmure : Salut chien Le 14 décembre, 15h10

Chien gribouille : Salut lol Le 14 décembre, 15h10

Lol s'exclame : Bjr Le 14 décembre, 15h10

Bjr gribouille : Bjr et merci ?? Le 03 décembre, 7h49 via Résumé scène par scène - Le...

amel proclame : Bonjour* Le 02 décembre, 13h42 via Résumé scène par scène - Le...

amel scribouille : Boujour Le 02 décembre, 13h41 via Résumé scène par scène - Le...

JADOU scribouille : FGRD Le 02 décembre, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU griffonne : FG Le 02 décembre, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU bafouille : LOVE Le 02 décembre, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU tergiverse : FEA Le 02 décembre, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU écrit : Oiii guk,l;  ; yghbioklllllllllllllllllllllllllllllllllldsffffeyh Le 02 décembre, 12h17 via Résumé - Le Médecin Malgrè ...

Bjr bafouille : Bjr Le 29 novembre, 7h47 via Résumé scène par scène - Le...

7x8rq331 déclare : <a href="http://www.lahjeh.com/plata-blanco-nike-air-max-plus-zapatosw">plata blanco nike air max plus</a> <a href="http://www.mcrocks.net/air-jordan-12-retro-zapatoss">air jordan 12 retro</a> <a href="http://www.moombaki.net/order-new-balance-shoes-online-uk-zapatoss">order new balance shoes online uk</a> <a href="http://www.oyunkafesi.com/football-shoes-for-kids-zapatosr">football shoes for kids</a> <a href="http://www.avoqyd09.com/nike-air-max-93-monochrome-black-zapatosw">nike air max 93 monochrome black</a> <a href="http://www.cumcumshot.com/pink-and-gold-womens-nikes-zapatosr">pink and gold womens nikes</a>
<a href="http://www.7x8rq331.com/" >7x8rq331</a> 7x8rq331
Le 29 novembre, 4h05

binane chuchote : 3+4=7 Le 28 novembre, 15h59 via Résumé scène par scène - Le...

martinus008 bafouille : Hgg Le 25 novembre, 19h48 via Ah les p'tits potes

yutuik dit : Yo! Le 22 novembre, 17h52 via Fiches sur les personnages ...

opopopopopop murmure : Hello Le 10 novembre, 19h49 via Utiliser des liens chronolo...

658392 déclare : =7 Le 07 novembre, 17h23 via Résumé scène par scène - Le...

Pseudo gribouille : mini_bn Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo griffonne : 1+1=11 Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo déclame : 3+4=7 Le 30 octobre, 18h16 via Comment fonctionne le mini-...

sundergirl tergiverse : Les résumés sont un peut cours a m ont avis ! Le 25 octobre, 14h38 via Résumé : L'Avare

bonjour s'exclame : Je bafouille 3+4=7 Le 19 octobre, 18h56 via Résumé scène par scène - Le...

bonjour murmure : Peuple je sus en Stream a partir de 18 heures fortnite epicgames !!!!!! Le 19 octobre, 18h53 via Résumé scène par scène - Le...

omg bafouille : L or Le 19 octobre, 15h58 via Accueil

omg tergiverse : L or Le 19 octobre, 15h58 via Accueil

omg déclare : Omg Le 19 octobre, 15h58 via Accueil

cc s'exclame : Cc Le 16 octobre, 21h31 via Mais qu'est ce qu'un ROC en...

7 murmure : Code noir nul c nul Le 15 octobre, 12h28 via Le Code Noir

lol déclare : Nul Le 15 octobre, 12h26 via Le Code Noir

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