html css tuto suite

Est-ce que CSS ne concerne que les couleurs et les polices ?


Hormis ajouter une présentation tels que des couleurs, des types de polices, etc.,
CSS peut aussi servir à contrôler la mise en page et la présentation
(les marges, le flottement, l'alignement, la largeur, la hauteur, etc.). La régulation des différents éléments par CSS permet
de présenter ses pages avec élégance et précision.


Exemple 3 :





<p style="padding:25px;border:1px solid red;">J'aime CSS</p>




Dans le navigateur, cela donne :




J'aime CSS



La propriété float permet de faire flotter un élément à droite ou bien à gauche. L'exemple suivant
en illustre le principe :


Exemple 4 :





<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>




Dans le navigateur, cela donne :





Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...



Dans cet exemple, un élément (l'image) flotte à gauche, et l'autre (le texte) remplit l'espace ainsi libéré.

La propriété position permet de placer un élément exactement là où on veut qu'il soit dans la page :


Exemple 5 :




<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

• Afficher l'exemple
  

Dans l'exemple, l'image se place à 50 pixels du bas et à 10 pixels de la droite dans le navigateur. Mais vous pouvez la placer
exactement où vous voulez. Très facile et très cool, n'est-ce pas ?


Super oui ! Mais facile ?


On n'apprend pas CSS en 10 minutes. Et comme annoncé auparavant, cette leçon ne constitue qu'un bref aperçu.
Vous apprendrez beaucoup plus après dans notre tutoriel CSS.

Pour l'instant, concentrons-nous sur HTML et passons à la prochaine leçon où l'on apprendra à mettre en place le site Web sur
Internet sous le regard du monde entier !


Leçon 13 : La mise en place des pages


Jusqu'à présent, vous n'avez eu la satisfaction que de visionner les pages. Il est temps maintenant que le reste du monde puisse
admirer votre chef d'œuvre..


Le monde est-il prêt pour ça ?


Le monde est prêt, et bientôt vous le serez aussi. Pour installer votre site Web sur Internet, vous avez juste besoin d'espace
sur un serveur et d'un programme FTP libre.

Si vous avez un accès Internet, il se peut que vous disposiez déjà
d'un espace serveur gratuit pour votre site.
L'adresse de votre espace serveur est alors probablement quelque chose
comme « http://home.fournisseur.com/~identifiant ».
Il faudra peut-être l'activer d'abord. Renseignez-vous à ce sujet dans
les documents fournis par votre fournisseur d'accès Internet,
ou dans leurs pages d'assistance.

Une autre option consiste à prendre un espace serveur gratuit sur Internet. Comme pour la mise en place d'un compte e-mail
(par exemple, chez Hotmail), vous pouvez vous inscrire pour de l'espace serveur libre sur Internet.
Plusieurs sociétés proposent un tel service, entre autres 000webhost.com (cliquez sur
« Order » et sélectionnez l'adhésion gratuite), cela prendra seulement quelques minutes pour s'inscrire.

Pour accéder au serveur, vous aurez besoin de connaître son nom d'hôte (N.d.T. Host Name), par exemple ftp.htmlnet.site50.net,
et d'avoir votre nom d'utilisateur (N.d.T. username) et votre mot de passe (N.d.T. password) sous la main.


C'est tout ce qu'il faut ?


Pour accéder au serveur et mettre en place vos pages, vous aurez
également besoin d'un logiciel FTP. Il se peut que vous n'ayiez pas
encore de logiciel de ce type, mais heureusement on peut en télécharger
des gratuits.

Il existe beaucoup de logiciels FTP différents. L'un des meilleurs est FileZilla, qui est entièrement gratuit.
Vous pouvez ainsi télécharger FileZilla à filezilla.sourceforge.net.


Et comment est-ce que j'installe les pages ?


On décrit ci-dessous comment charger les pages sur un compte gratuit chez 000webhost.com avec FileZilla. Toutefois,
la procédure est plus ou moins la même pour tous les fournisseurs d'accès et tous les logiciels FTP.

Lancez le logiciel FTP une fois connecté sur Internet. Inscrivez le
nom d'hôte ("ftp.htmlnet.site50.net" à « Address »),
le nom d'utilisateur (à « User ») et le mot de passe (à « Password »)
puis cliquez « Connect ». Vous devriez maintenant avoir accès
au serveur. D'un côté de la fenêtre du logiciel, vous pouvez voir le
contenu de votre ordinateur (« Local Site »), et de l'autre côté,
le contenu du serveur (« Remote Site ») :




Repérez les documents HTML et les images sur votre ordinateur (côté « Local Site ») et transférez-les sur le serveur
(côté « Remote Site ») en double-cliquant sur eux. Maintenant le monde entier peut les voir ! (Par exemple, à l'adresse
http://htmlnet.site50.net/page1.htm).

Nommez une des pages "index.htm" (ou "index.html") et elle deviendra
automatiquement la page d'entrée, c'est-à-dire que si vous tapez
http://htmlnet.site50.net (sans nom de fichier), vous ouvrirez en
réalité http://htmlnet.site50.net/index.htm.

À plus long terme, il sera peut-être préférable d'acquérir un nom de domaine propre
(tel que www.votre-nom-de-domaine.com) pour éviter les adresses longues
et compliquées attribuées par votre fournisseur d'accès,
ou des fournisseurs d'espace serveur gratuit. On peut trouver et
acheter des noms de domaines, par exemple, chez
Speednames ou NetworkSolutions.


Leçon 14 : Les standards du Web et la validation



Dans cette leçon, vous renforcerez un peu plus votre connaissance théorique de HTML.


Qu'y a t-il d'autre à connaître à propos de HTML ?


On peut coder en HTML de plusieurs façons. Et les navigateurs peuvent interpréter HTML d'autant de façons. On pourrait dire que
HTML comporte beaucoup de dialectes. C'est la raison pour laquelle les sites Web semblent différents sur des
navigateurs différents.

Presque dès le début d'Internet, il y a eu des tentatives pour élaborer un standard commun de HTML par le biais du
World Wide Web Consortium (W3C) fondé par Tim Berners-Lee (oui ! le type formidable
qui a inventé HTML). Mais le chemin fut long et difficile.

À l'époque, quand les navigateurs étaient payants, le navigateur
Netscape dominait. Les standards HTML s'appelaient alors
2.0 et 3.2. Mais avec une part de marché de plus de 90 %, Netscape
n'était pas obligé de tant se soucier (et ne se soucia pas)
de standards communs. Au contraire, Netscape inventait ses propres
éléments étranges, qui ne fonctionnaient pas sur d'autres navigateurs.

Longtemps, Microsoft ignora presque complètement Internet. Après un temps, la société entra en compétition avec Netscape et
introduisit un navigateur. Les premières versions du navigateur de Microsoft, Internet Explorer, n'étaient pas meilleures que
Netscape dans le respect des standards HTML. Puis Microsoft choisit de distribuer son navigateur gratuitement
(une option toujours très acclamée) et Internet Explorer devint bientôt le navigateur le plus populaire.

À partir des versions 4 et 5, Microsoft chercha à soutenir de plus en plus les standards HTML du W3C.
Netscape n'entreprit pas de développer de nouvelle version de son navigateur et continua à en distribuer la version 4 dépassée.

Le reste appartient à l'histoire. Aujourd'hui, les standards HTML se nomment 4.01 et XHTML. Et c'est au tour d'Internet Explorer
d'avoir une part de marché de 90 %. Internet Explorer a toujours ses propres éléments étranges mais utilise aussi les
standards HTML du W3C. Tout comme d'autres navigateurs tels que Mozilla, Opera et Netscape.

Donc si votre code HTML respecte les standards du W3C, vous rendez vos sites Web lisibles par tous les navigateurs,
que ce soit aujourd'hui et à l'avenir. Et par chance, ce que vous avez appris dans ce tutoriel est une version de HTML
nouvelle plus stricte et plus propre appelée XHTML.


Super ! Puis-je l'annoncer à chacun ?


Avec tous les types différents de HTML, il est nécessaire de dire au
navigateur quel « dialecte » HTML est utilisé, dans ce cas XHTML.
Pour ce faire, on utilise une déclaration de type de document. La
déclaration de type de document se place toujours en haut du document :


Exemple 1 :





<!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" lang="fr">

<head>
<title>Titre</title>
</head>

<body>
<p>texte texte</p>
</body>

</html>




Hormis la déclaration de type de document (la première ligne dans
l'exemple précédent), qui indique au navigateur votre choix de XHTML,
il est nécessaire de fournir des informations spéciales dans la balise html au moyen des deux attributs xmlns
et lang.

Le terme « xmlns » est l'abréviation de « XML-Name-Space »
(N.d.T. espace de nommage XML), et il devrait toujours avoir la valeur
http://www.w3.org/1999/xhtml. C'est tout ce qu'il faut savoir. Si vous êtes assoifé de connaissances compliquées,
vous pouvez lire plus à propos des espaces de nommage sur le
site Web du W3C.

Dans l'attribut lang, vous indiquez la langue dans laquelle le document est écrit. À cet effet, on utilise le
standard ISO 639, qui liste les codes de toutes les langues du monde.
Dans l'exemple ci-dessus, la langue indiquée est le français ("fr").

Avec la définition de type de document (DTD) de la déclaration, le
navigateur sait exactement comment interpréter et afficher votre
code HTML. De fait, utilisez l'exemple précédent comme gabarit pour
tous vos futurs documents HTML.

La définition de type de document revêt également de l'importance pour la validation des pages.


Valider !? Pourquoi le faire et comment ?


Insérez une déclaration de type de document dans vos pages afin de toujours pouvoir corriger les erreurs de votre code HTML
à l'aide du validateur gratuit du W3C.

Pour un test, fabriquez une page et mettez-la en place sur Internet. Ensuite allez à validator.w3.org
et tapez l'adresse (URL) de votre page et validez-la. Si votre HTML est
correct, vous obtiendrez un message de félicitation. Sinon
vous aurez un rapport d'erreurs indiquant exactement en quoi et où vous
vous êtes trompé. Faites exprès des erreurs pour voir
ce qui arrive.

Le validateur n'est pas seulement utile pour trouver les erreurs.
Certains navigateurs compensent les défaillances
des développeurs Web en essayant de réparer les erreurs du code HTML et
en affichant les pages comme ils estiment qu'elles devraient
apparaître.
Avec eux, il se peut que vous ne voyiez jamais d'erreurs dans le
navigateur. Par contre, les autres navigateurs feront peut-être
des estimations différentes et n'afficheront pas du tout la page. Le
validateur peut vous aider à trouver des erreurs
dont vous ignoriez même l'existence.

Validez toujours vos pages pour vous assurer qu'elles s'afficheront toujours correctement.




Leçon 15 : Les dernières astuces


Félicitations, vous êtes à la dernière leçon.


Donc maintenant je sais tout ?


Vous avez beaucoup appris et vous êtes capable de fabriquer vos propres sites Web ! Néanmoins, vous ne connaissez que les bases
et il y a encore beaucoup à maîtriser. Mais les fondations sont solides.

Dans cette dernière leçon, vous trouverez quelques astuces finales :

• Premièrement, c'est une bonne idée que de conserver l'ordre et la
  structure dans vos documents HTML. En chargeant des documents
  bien arrangés, vous montrerez non seulement votre maîtrise de HTML
  mais aussi faciliterez considérablement votre vision d'ensemble.
  
• Collez aux standards et validez vos pages. On ne le dira jamais assez : toujours écrire du XHTML propre,
  utiliser une déclaration de type de document et valider vos pages à validator.w3c.org.
  
• Donnez du contenu à vos pages. Rappelez-vous que HTML est un outil qui vous permet de présenter des informations sur Internet,
  donc assurez-vous qu'il y ait de l'information à présenter. Les belles pages peuvent être jolies mais la plupart des personnes
  utilise Internet pour y trouver de l'information.
  
• Évitez de surcharger vos pages avec des images lourdes et autres
  fantaisies trouvées sur Internet. Cela ralentit le chargement
  des pages et pourrait embrouiller les visiteurs. Les pages qui mettent
  plus de 20 secondes à charger sont susceptibles de perdre
  jusqu'à 50 % des visiteurs.
  
• Rappelez-vous d'ajouter votre site Web dans les moteurs de
  recherche/annuaires pour que les personnes n'appartenant pas à votre
  famille proche
  puissent les trouver et les apprécier. Sur la page d'accueil de tous
  les moteurs de recherche, vous trouverez un lien pour ajouter
  de nouvelles pages (le plus important est Google, mais il y en a d'autres tels que
  DMOZ, Yahoo, AltaVista,
  AlltheWeb et Lycos).
  
• Dans ce tutoriel, vous avez employé « Bloc-notes », qui est un
  éditeur simple d'utilisation très facile,
  mais il sera peut-être pratique d'utiliser un éditeur plus évolué
  offrant une meilleure vue d'ensemble et plus de possibilités.
  Vous trouverez un résumé et des critiques de plusieurs éditeurs sur Download.com.
  

Comment s'améliorer ?


Avant tout, il importe de continuer à travailler et expérimenter avec les choses apprises dans ce tutoriel. Étudiez les sites
d'autres personnes et, si besoin, voyez comment ils sont faits avec « Voir source » (cliquez « Affichage » dans le menu de
votre navigateur et sélectionnez « Source »).




Cherchez sur Internet des exemples et articles sur HTML. Il y a beaucoup de sites avec un bon contenu sur HTML.


Lisez et posez des questions dans la rubrique Forums. Vous y rencontrerez les vrais experts et vous apprendrez beaucoup auprès d'eux.

Enfin, et non la moindre, dès que vous vous sentirez prêt(e), vous devriez poursuivre avec l'apprentissage de CSS dans notre
tutoriel CSS.

Une dernière chose : nous vous souhaitons des heures d'amusement avec votre nouvel ami HTML.

À bientôt sur Internet :-)

---