HTML et CSS sont des langages permettant la structuration et mise en forme de page web.
Les
dernières évolutions nous conduisent à HTML 5 et CSS 3.
Pour observer un code HTML, il suffit de se rendre sur une page web quelconque et d'effectuer un
clic droit > code source de la page. Il s'agit d'une suite d'instructions qui forme un Code Source.
Le code-source forme une suite de lignes qui sera interprétée et donnera le rendu que vous voyez
à l'écran.
L’organisation W3C (World Wide Web Consortium) concepteur de language de programmation
Le W3C est une organisation chargée de standardiser et faire évoluer le langage HTML.
Le W3C dicte des normes d'interprétation que les navigateurs doivent suivre (un peu comme le
code de la route). L'objectif recherché est qu'un même code s'affiche de la même manière sur tous
les moteurs de rendus.
Le W3C met à disposition un espace de validation pour savoir si le code que l'on écrit respecte
bien les régles. Un code totalement valide (dit « code propre ») permet une meilleure
interprétation des navigateurs et peut contribuer à un meilleur positionnement sur les moteurs de
recherche (référencement).
Pendant sa création et lorsque le site est terminé, il est important de « le tester » sur tous les
navigateurs et sur l'espace de validation W3C.
Comment créer un fichier avec notepad ?
Pour créer un nouveau fichier, vous devez vous rendre dans le logiciel notepad (accessible par le
bouton démarrer de windows) :
Ensuite vous vous retrouvez dans un nouvel onglet (vous pouvez aussi en ouvrir un nouveau avec
ctrl+n ou fichier > nouveau)
Vous pouvez écrire ce que vous voulez à l'intérieur :
Cliquez sur l'icône en forme de disquette pour enregistrer et choisissez un emplacement pour
votre nouveau fichier :
Choisissez l'extension .html afin de créer votre toute première page web !
Vous pouvez double-cliquer sur votre fichier pour le lancer dans le navigateur.
A tout moment, vous pouvez reconsulter et éditer votre fichier :
QU’EST-CE QU’UN LANGUAGE ?
Un langage c'est comme une langue, si vous partez en vacances et que voulez vous faire
comprendre en Espagne il faudra apprendre et parler Espagnol !
Et bien, si vous souhaitez créer un site web il faudra apprendre et parler html / css. (à la différence
que ce sera une langue écrite uniquement)
QU’EST-CE QU’UN CODE
Un code est un morceau de texte suivant des normes et les conventions d'un langage, introduit à
l'intérieur d'un fichier possédant l'extension du langage (exemple : .html, .css, etc.).
l'ensemble de ces lignes de code sont exécutées et lues (par un navigateur ou l'interpréteur d'un
serveur) et permettent d'obtenir un affichage en retour.
QU’EST-CE QU’UNE BALISE
Une balise est un mot entre chevron.
Les principales balises Html
Structure Html
Structure de base :
<HTML><HEAD><TITLE>…</TITLE>…</HEAD><BODY>…</BODY></HTML>
<HTML>…</HTML> Début et fin de fichier Html
<HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> Titre affiché par le navigateur (élément de HEAD)
<BODY>...</BODY> Début et fin du corps du fichier Html
<BODY bgcolor=colcod> Couleur d'arrière-plan
<BODY background=urlimg> Image d'arrière-plan
Mise en forme des caractères
<B>...</B> Texte en gras
<BIG>...</BIG> Agrandissement de la taille des caractères
<BLINK>...</BLINK> Texte clignotant (Netscape seul)
<EM>...</EM> Texte en italique
<FONT color=colcod>...</FONT> Texte en couleur
<FONT size=X>...</FONT> Taille des caractères où X est une valeur de 1 à 7
<I>...</I> Texte en italique
<NOBR>...</NOBR> Empêche les ruptures automatiques de ligne des navigateurs
<PRE>...</PRE> Texte préformaté, affichage des espaces et des sauts de ligne
<SMALL>...</SMALL> Réduction de la taille des caractères
<STRONG>...</STRONG> Mise en gras du texte
<SUB>...</SUB> Texte en indice
<SUP>...</SUP> Texte en exposant
<U>...</U> Texte souligné
Mise en forme du texte
<!--...--> Commentaire ignoré par le navigateur
<BR> A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un retrait du texte)
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<DIV align= halign> ...</DIV> Aligne l'élément (center, left, right, justify)
<Hx>...</Hx>
<Hx align=halign>...</Hx>
Titre où x a une valeur de 1 à 7
halign peut avoir les valeurs center, left, right, justify
<P>...</P>
<P align=halign>...</P>
Paragraphe
halign peut avoir les valeurs center, left, right, justify
Listes
<UL [type=type]>
<LI>… </LI><LI>…</LI>…
</UL>
Liste non numérotée (dite à puces)
Eléments de liste
(type peut être "disc", "square" ou "circle")
<OL [type=type]>
<LI>…</LI><LI>…</LI>…
</OL>
Liste numérotée
(type peut être "1" (1,2,3), "a" (a,b,c), "A" (A;B;C), "I"
(I,II,III,IV) ou "i" (i,ii,iii,iv))
<DL>
<DT>...</DT>
<DD>...</DD> </DL>
Liste de glossaire
Terme de glossaire (sans retrait)
Explication (DETAIL) du terme (avec retrait)
Ligne de séparation
<HR> Trait horizontal (centré par défaut)
<HR width="x%"> Largeur du trait en %
<HR width=x> Largeur du trait en pixels
<HR size=x> Hauteur du trait en pixels
<HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite
<HR noshade> Trait sans effet d'ombrage
Hyperliens
<A href="[Link] Lien externe vers une page Web
<A href="[Link] Lien vers une adresse Email
<A href="[Link]">...</A> Lien vers la page locale [Link] située dans le même
dossier
<A name="xyz">...</A> Définition d'une ancre
<A href="#xyz">...</A>
<A href="[Link]#xyz">...</A>
Lien vers une ancre dans le même fichier.
Lien vers une ancre dans le fichier [Link].
Images
<IMG src=urlimg> Insertion d'une image au format gif, jpg ou png
<IMG ... width=x height=y> Mise à l'échelle de l'image en pixels
<IMG ... border=x> Définition de la bordure d'une image
<IMG ... alt=text> Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=valign> Alignement de l’image par rapport à la ligne de texte.
<IMG ... align=halign> habillement de l’image par le texte (center n’est pas possible)
<IMG ... hspace=x>
<IMG ... vspace=y>
Espacement horizontal entre l'image et le texte
Espacement vertical entre l'image et le texte
<IMG ... usemap=#map> Indication de la carte de définition des zones
<MAP name=mapname>…</MAP> Carte de définition des zones avec zones suivantes :
<AREA href=url shape="rect" coords="x1,y1,x2,y2" alt=text>
<AREA href=url shape="circle" coords="x,y,radius " alt=text>
<AREA href=url shape="poly" coords=" x1,y1,x2,y2…xn,yn" alt=text>
<AREA href=url shape="default" alt=text>
rectangle
cercle
polygone
défaut
Tableau
<TABLE>...</TABLE> Définition d'un tableau
<TABLE width="x%"> Largeur du tableau en %
<TABLE width=x> Largeur du tableau en pixels
<TABLE border=x> Largeur de la bordure
<TABLE cellpadding=x> Espace entre la bordure et le texte
<TABLE cellspacing=x> Epaisseur du trait entre les cellules
<TR>...</TR> Ligne du tableau
<TD>...</TD> Cellule du tableau
<TD bgcolor=colorcod> Couleur d'une cellule de tableau
<TD width="x%">
<TD width=x>
Largeur de colonne en %
Largeur de colonne en pixels
<TD align=halign> Contenu centré ou aligné à gauche/à droite
<TD valign=valign> Contenu aligné verticalement en haut, au milie, en bas
<TD colspan=x>
<TD rowspan=x>
Nombre de cellules à fusionner horizontalement
Nombre de cellules à fusionner verticalement
C
Frames
<FRAMESET>...</FRAMESET> Définit une structure de frames(remplace alors le tag
BODY)
<FRAMESET rows="x%,y%,..."> Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> Division verticale de la fenêtre en %
<FRAME src="[Link]"> Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> Contenu pour les browsers non prévus pour les frames
attributs
colcod code couleur hexadécimal RGB "#RRGGBB" (RR, GG et BB sont des bytes en
notation
hexadécimale pour coder les composantes rouge, verte et bleue de la couleur.
000000=noir, FFFFFF=blanc, FF0000=rouge etc.
urlimg URL d’une image. Ex. : "[Link]", "[Link]
url URL d’une page web ou d’une image. Ex. : "[Link]", "[Link]
halign alignement horizontal, peut avoir les valeurs center, left et right.
Pour les tags autres que HR et IMG, la valeur justify est également possible.
valign alignement vertical, peut avoir les valeurs top, middle et bottom
align alignement, peut avoir les valeurs top, middle et bottom, left et right
text texte entouré de guillemets
QUELQUES CODES COULEURS
Les caractères spéciaux
Voici ces caractères en code ISO 5589-1 (=ISO-Latin 1), ainsi que leur abréviation ENTITY.
