Cours HTML Partie 1
Un peu d'histoire....
Le W3C (World Wide Web Consortium, http://www.w3c.org) a été créé à l'occasion du premier standard du HTML : HTML 1.0. Le W3C a été créé pour développer des protocoles communs pour l'évolution du World Wide Web.
C'est un consortium industriel piloté par le MIT/LCS (le Laboratoire de Recherches en Informatique du Massachusets Institute of
Technology) aux États-Unis, par l'INRIA (Institut National de Recherche en Informatique et en Automatique) en France, et l'Université de Keio au Japon.
C'est un organisme non officiel. Le W3C n'émet que
des recommandations : les concepteurs de navigateurs restent libres de s'y conformer.
Entrons dans le vif du sujet ! Le HTML (Hyper Text Markup Language) est composé de BALISES qui s'écrivent de cette manière : <balise>
La plupart de ces balises sont par paires.Lorsque vous "ouvrirez"
une balise il faudra également la "refermer".
C'est un peu comme si vous ouvrez une porte...si vous ne la refermez pas, attention aux courants d'air !:-)
La manière de fermer une balise est donc la suivante : </balise>
Pour créer une page HTML basique c'est on ne peu plus simple. Il faut en tout et pour tout 6 balises !
Certains me diront: "si c'était aussi facile tout le monde le saurait !"
Il est vrai que hormis ces 6 balises de nombreuses autres
viendront se "greffer" pour mettre notre page en forme, mais nous n'en sommes pas encore là...
Voilà donc les 6 balises en question :
<html> est la première balise qui ouvre le document html
<head> est la balise dite de tête du document
</head>on referme la balise de tête du document
<body> on ouvre la balise dite du corps du document
</body> on referme le corps du document
</html> et on referme la balise html du document
Premier exercice
Si vous êtes sous windows cliquez sur demarrer puis sur executer et tapez notepad puis tapez la touche entrée.
Un simple éditeur de texte nous suffira pour le moment pour taper nos lignes de code.
Tapez le code suivant :
<html>
<head>
</head>
<body>
Ceci est ma première page HTML.
</body>
</html>
Enregistrez votre document en choisissant "tous les fichiers" dans la liste déroulante "type" et en le nommant page1.html ou tout autre nom, mais n'oubliez pas le .html a la fin !!
Double cliquez sur votre document sauvegardé et oh miracle ! Le navigateur internet s'ouvre et affiche votre texte Ceci est ma première page HTML.
Vous venez de créer votre première page HTML ...Facile non ? :-) La plupart du temps une balise supplémentaire vient de greffer entre les balises <head></head>, c'est la balise <title></title>
qui permet de donner un titre à la page comme ici Cours HTML débutant PART 1 qui est affiché dans la barre supérieure de votre navigateur préféré.
Vous pouvez dès a prèsent ajouter ces balises entre lequelles vous pouvez mettre un titre, ici "Ma première page":
<html>
<head>
<title>Ma première page</title>
</head>
<body>
Ceci est ma première page HTML.
</body>
</html>
Vous noterez que les balises :
<title>Ma première page</title>
sont sur la même ligne. Vous pouvez tout aussi bien noter ce code ainsi :
<title>
Ma première page
</title>
Ca ne changera strictement rien mis à part que votre code sera plus lisible sur une ligne que sur 3....
Il ne s'agit pas non plus de mettre tout votre code sur la même ligne, celà deviendrait vite illisible sur de gros document !!
Le texte que vous voulez voir apparaitre dans votre page devra toujours etre tapé entre les balises <body></body>.
Entrainez-vous à créer quelques pages en respectant ces règles, rien ne vaut la pratique !!
LES BALISES DE TEXTE
De nombreuses autres balises existent pour mettre en forme le texte votre document ce sont les balises de texte
En voici une liste non exhaustive:
BALISE
DEBUT BALISE FIN EXPLICATION
<adress› ‹/adress› Pour mettre une adresse (généralement en bas de page)
<strong› ‹/strong› Gras
‹blink› ‹/blink› Texte clignotant
‹blockquote› ‹/blockquote› Introduit une citation longue
‹br› Passer à la ligne suivante
‹center› ‹/center› Centrer le texte au milieu de la ligne
‹cite› ‹/cite› Introduit une citation
‹code› ‹/code› Texte au format "code source"
‹dfn› ‹/dfn› Introduit une définition
‹font› ‹/font› ‹font size=?› taille du texte de 1 à 7
‹font color="#$$$$$$"› Couleur du texte Bleu
#0000FF Blanc #FFFFFF Rouge #FF0000
‹hx› ‹/hx› Titre (avec x = de 1 a 6)
‹em› ‹/em› Italique
‹li› ‹/li› Élément ligne d'une liste
‹ol› ‹/ol› Afficher le texte sous forme d'une liste ordonnée.
‹p› ‹/p› Paragraphe
‹Q› ‹/Q› Introduit une citation court
‹s› ou
‹strike› ‹/s›
ou‹/strike› Texte souligné
‹samp›
ou‹xmp› ‹/samp›
ou‹/xmp› Formatage "exemple"
‹sub› ‹/sub› Indices
‹sup› ‹/sup› Exposant
‹tt› ‹/tt› Format "machine à ecrire"
‹u› ‹/u› Souligne le texte
‹ul› ‹/ul› Afficher le texte sous forme d'une liste non- ordonnée.
‹!-- TEXTE --› Commentaires Exemple & résultat
‹B›‹/B› Texte en gras
‹U› ‹/U› Texte souligné
‹I›‹/I› Texte Italique
‹H1›‹/H1›
TITRE 1
‹H2›‹/H2›
TITRE 1
‹H3›‹/H3› TITRE 1
‹H4›‹/H4› TITRE 1
La balise Font
La balise ‹Font› est très utile car elle sert partout. Elle permet de changer la taille, la couleur, l'alignement et la police d'impression.
Exemple :
<FONT SIZE="3" FACE="Times New
Roman" COLOR="#FF0000" ALIGN="center"> Mon texte doit sortir en taille 3, en times New Roman et de couleur Rouge et au centre</FONT>
SIZE ="10px" : défini une taille de 10px
FACE ="Times New Roman" : défini la police utilisée COLOR ="#FF0000" : défini la couleur
ALIGN ="center" : défini l'alignement horizontal Résultat :
Mon texte doit sortir en taille 3, en times New Roman et de couleur Rouge et au centre
