Cours de code html

Disponible uniquement sur Etudier
  • Pages : 33 (8062 mots )
  • Téléchargement(s) : 0
  • Publié le : 27 mai 2010
Lire le document complet
Aperçu du document
Leçon 1 : ma première page web
[pic]

Introduction

Objectif : Créer une page du genre de celle-ci.

La mise en page de ce premier "cours" va te sembler très sommaire par rapport à ce que tu as peut-être l'habitude de voir au cours de tes surfs sur le net : c'est normal, je n'utilise ici que les balises de la leçon. Il en sera de même pour les autres cours, leur mise en page évoluera aufil de ta progression, de façon à ce que tu puisses avoir un exemple concret d'application de tes nouvelles connaissances.
Je vais logiquement supposer que tu as lu la leçon 00 (B.A. BA) et que les opérations suivantes ne te sont pas inconnues (au cas où elles le seraient, tu devines où aller piocher le "comment faire" :)....). Tu sais donc :
1) ... te servir du Bloc-notes (ou de son équivalentMac) pour créer un fichier HTML.
2) ... utiliser ton navigateur (Internet Explorer mais il en existe d'autres comme par exemple Netscape Navigator pour ne citer que le plus connu) pour afficher la page que tu viens de créer ou de modifier.
3) ... visualiser le code source d'une page HTML affichée dans ton navigateur.(J'insiste : c'est très utile... cliquer avec le bouton droit de la souris sur unendroit de la page où il n'y a que du texte et de choisir "Afficher la source".)
4) ... envoyer une page web par e-mail.

Sans plus tarder, entrons dans le vif du sujet !

[pic]

Structure de la page

Qu'est-ce qu'une page web ?

Il s'agit en fait d'une page de texte "normale" à laquelle sont ajoutées des balises - encore appelées tags - qui sont autant d'indications pour le navigateurde la mise en forme à appliquer au texte. Plus simplement, ces balises indiquent au navigateur quelle apparence doit prendre le texte sur l'écran de l'internaute. L'ensemble du texte et des balises constitue ce que l'on appelle le code source ou la source de la page.
Une balise s'écrit de la façon suivante:
Elle est toujours accompagnée de sa contre-balise qui s'écrit
La contre-balise indiqueau navigateur qu'il doit cesser d'appliquer la balise.

Je conseille vivement de faire suivre la frappe d'une balise de celle de la contre-balise correspondante et de taper le texte entre les deux pour éviter les oublis.

Une page vide

Le Hyper Text Markup Language impose une structure type aux pages web. Celles-ci sont composées:
- d'un entête (ou tête) qui informe le navigateur et lesmoteurs de recherche, délimité par et
- d'un corps qui grosso modo correspond à ce qui va s'afficher à l'écran et qui est délimité par et .

Ainsi, une page web type et vide de tout texte se présentera de la façon suivante:

  
  

  
  

Assez de bla bla...

Bonjour à tous !

Muni des informations qui précèdent, imaginons que tu souhaites maintenant créer ta première page web(ENFIN !) qui affiche "Bonjour à tous !".
Son code source serait :

  
  

  
Bonjour à tous !
  

Pour créer cette page, il te suffit de taper ce code source dans un nouveau document du bloc-notes et de le sauvegarder (bonjour.html par exemple) attention au .html !!!, avant de visualiser la page avec le navigateur (en cliquant sur le fichier).
Si rien ne s'affiche dans le navigateur, tuas certainement oublié un crochet, ou un mot, ou le ".html" alors.... recommence !
[pic]

Jouons avec le texte (introduction)

En affichant le code source de cette page, tu auras probablement remarqué un certain nombre de balises qui permettent d'en mettre en forme le texte.
Ci-dessous la liste de ces balises et de leurs fonctions:

1) et : c'est la balise de paragraphe, qui comme son noml'indique définit un paragraphe. Un saut à la ligne et une ligne vierge sont insérés à la fin du paragraphe.
Un examen attentif du code source montre que cette balise est employée avec un attribut et quatre valeurs de cet attribut. Un attribut est une option possible pour une balise et cette option peut prendre plusieurs valeurs.

Il peut aussi y avoir plusieurs attributs pour une seule...
tracking img