HTML
le langage HTML
| 
1) HTML, DEFINITION:
HTML signifie HYPER TEXT MARKUP LANGUAGE.
C'est le langage normalisé utilisé pour écrire des pages de WEB qui seront
interprétées par les BROWSERS (en francais les logiciels de navigation ou navigateurs)
Principaux navigateurs :
A l'origine, Mosaic.
Netscape de la société NETSCAPE
Internet Exploreur de la société MICROSOFT
HOTJAVA de la société SUN SYSTEMS
Les plus répandus sont NETSCAPE(ou FireFox) et IE (Internet Exploreur).
Il peut exister des petites différences d'interprétation d'un navigateur
à un autre et il est toujours préférable de tester plusieurs navigateurs.
|
|
le langage HTML est actuellement en version 4.0.
Une page WEB écrite avec HTML se compose de texte apparaissant
à l'écran
et de tags ou balises (commandes HTML) permettant de mettre en forme le document
et de le lier avec d'autres documents pouvant se situer
sur d'autres serveurs.
Exemple :
................ ..............
: Tag de début : : Tag de fin :
:..............: :............:
| |
V V
Appuyer sur la touche <B>Enter</B> pour sortir
|
|
2) COMPOSANTS ET CONSTITUANTS
Si la syntaxe d'un document n'est pas correcte ou n'est pas comprise
par le navigateur il n'y aura pas à proprement dit de "plantage" mais
une présentation "BIZARRE" peut apparaitre
Nous allons étudier la liste des principaux TAGS
A) Les balises (ou TAGS) de structure
<HTML>
Tout le reste du document
</HTML>
Ce TAG indique le début et la fin d'un document HTML.
Tout document HTML sera obligatoirement balisé ainsi.
|
|
<HEAD>
Entête du document
</HEAD>
Cette balise indique le début et la fin d'un entête
<TITLE>
Le titre de document
</TITLE>
Cette balise indique le début et la fin d'un titre,
il sera placé à l'intérieur du TAG <HEAD>,
le texte sera repris par le navigateur et placé dans l'entête de la fenêtre.
|
|
Il existe d'autres TAGS dans l'entête, voici les principaux :
<BASE> Adresse de base du document
<LINK> référence à une feuille de style
Etc.
<BODY>
Le corps du document
</BODY>
Ce TAG indique le début et la fin du corps du document,
en fait toute la partie du document qui doit être affichée
|
|
Il existe des paramètres à la balise BODY :
<BODY BACKGROUND = "URL ou chemin d'accés.GIF ou .BMP">
Sert à indiquer un dessin de fond au format GIF ou BMP
( Attention à ne pas mettre un dessin trop long à charger :
il est conseillé d'utiliser le format GIF qui est le seul reconnu par
JAVA , et qui est plus rapide à charger.)
Il existe de nombreux programmes de conversion qui permettent de
convertir d'un format vers GIF
BGCOLOR = " rrggbb">
rr pour la couleur rouge
gg pour la couleur verte
bb pour le bleu
|
|
Ce tableau représente les principales couleurs utilisées :
Couleur Sombre Moyen Brillant
------------- ----------- ----------- -------------
Rouge #400000 #7F0000 #FF0000
Jaune #404000 #5F7F00 #FFFF00
Vert #004000 #007F00 #00FF00
Cyan #004040 #007F7F #00FFFF
Bleu #000040 #00007F #0000FF
Magenta #400040 #7F007F #FF00FF
Vous composez votre couleur de fond à l'aide des trois couleurs primaires.
<BODY TEXT = "#rrggbb">
Idem que pour la couleur, mais concerne le texte,
pensez à mettre une couleur bien différente de la couleur de fond.
|
|
Commentaires dans un source (non pris en compte par le navigateur)
<!-- mon commentaire ... -->
La structure général d'un document HTML sera donc:
<HTML>
<! entête du document>
<HEAD>
<TITLE>
//
</TITLE>
</HEAD>
<! corps du document>
<BODY>
//
//
</BODY>
</HTML>
|
|
Par exemple :
<HTML>
<HEAD>
<! ceci est mon premier essai HTML>
<TITLE>
MON PREMIER HTML
</TITLE>
</HEAD>
<BODY>
Le texte de mon premier document.
</BODY>
</HTML>
Voyez le résultat, ICI
|
|
B) Les TAGS d'ancrage
<A HREF = «nom-de-ressource»> permet de créer un lien HYPERTEXTE servant à
"surfer" sur Internet.
En effet il va permettre d'accéder à toutes les autres ressources du réseau
et à des parties spécifiques d'un document.
Exemple : .................. ....................
: Nom du serveur : : texte à afficher :
:................: :..................:
| /
V V
<A HREF = «HTTP://WWW.IBM.COM/»> serveur IBM.COM </A>
Cette instruction donnera accès à la page web du serveur IBM.COM
|
|
1) Branchement local
a) On peut brancher à un tag dans un même document
<A HREF="#NOM"> NOM représente le nom du tag
<A NAME="NOM"> Définition du tag de renvoi
Exemple :
<A HREF="#ENTETE">Entête</A>
... plus loin dans le document ...
<A NAME="ENTETE"> Entête</A>
...
|
|
b) On peut brancher à un fichier HTML sur le même serveur
Attention :
Si le fichier ne se trouve pas dans le même répertoire, indiquez le
chemin complet ou utilisez "../" pour remonter d'un niveau (etc...)
|
Exemples, imaginons que vous affichiez la page /documents/html/index.html
, contenant les liens suivants :
- <a href="suite.html">
on
cherche la page dans /documents/html/
- <a href="test/suite.html">
on
cherche la page dans /documents/html/test/
- <a
href="../suite.html"> on
cherche la page dans /documents/
- <a
href="../../autres/suite.html"> on
cherche la page dans /autres/
|
2) Branchement à un serveur distant
<A HREF = "HTTP://..."> Connexion vers un document d'un serveur WWW
<A HREF = "FTP://.."> Connexion vers un site FTP
<A HREF = "MAILTO:.."> Connexion vers une boite aux lettres (e-mail)
<A HREF = "NEWS:.."> Connexion vers un service de nouvelles (News)
<A HREF = "TELNET://.."> Connexion vers un serveur TELNET (session émulée)
|
|
C) Les TAGS de style de texte et de formatage
<Hx> ici le texte </Hx>
x représente une valeur de 1 à 6 qui indique une taille standard de
caractères.
admet 1 paramètre : ALIGN=LEFT
RIGHT
CENTER
<HR> Trait de séparation horizontal
admet 3 paramètres : SIZE = (pixels)
WIDTH = pourcentage
ALIGN= = LEFT | RIGHT | CENTER
ici, <hr width="75%">
<P>... </P> Définit un paragraphe
admet 1 paramètre : ALIGN = LEFT | RIGHT | CENTER
<BR> Fin de ligne (retour chariot)
|
|
<PRE>...</PRE> Texte préformaté, garde la présentation
(police non proportionnelle, c'est le cas de ce cours)
<B>...</B> Gras
<U>...</U> Souligné
<I>...</I> Italique
<SUP>...</SUP> Exposant Haut
2
<SUB>...</SUB> Exposant Bas
3
<BLINK>...</BLINK>
<S>...</S> Texte barré (anciennement STRIKE)
<Q>...</Q> Citation, généralement entre quotes
<CENTER>...</CENTER> Centre un texte
|
|
3) CREATION D'UNE LISTE
A) Liste ordonnée
<OL>
<LI> élément 1
<LI> élément 2
<LI> élément 3
</OL> |
- élément 1
- élément 2
- élement 3
|
B) Liste non ordonnée
<uL>
<LI> élément 1
<LI> élément 2
<LI> élément 3
</uL> |
- élément 1
- élément 2
- élement 3
|
C) Liste avec glossaire
................. .............
:Terme à définir: /----:Définition :
/:...............: / :...........:
V V
<DL>
<DT>A</DT> <DD> Description de A</DD>
<DT>B</DT> <DD> Description de B</DD>
<DT>C</DT> <DD> Description de C</DD>
</DL> |
- A
- Description de A
- B
- Description de B
- C
- Description de C
|
|
|
|
On peut imbriquer des listes,
exemple :
<OL>
<LI> élément 1
<OL>
<LI> élément a
<LI> élément b
<UL>
<LI> élément x
<LI> élément y
<LI> élément z
</UL>
<LI> élément c
</OL>
<LI> élément 2
<LI> élément 3
</OL> |
- élément 1
- élément a
- élément b
- élément x
- élément y
- élément z
- élément c
- élément 2
- élément 3
|
|
|
4) INSERTION D'UNE IMAGE
<IMG >
admet les paramètres :
SRC="Chemin d'accès/fichier.gif"
|
ALT = texte par défaut
ALIGN = LEFT
RIGHT
CENTER
TOP
MIDDLE
BOTTOM
|
 texte avec TOP
texte avec MIDDLE
|
BORDER = pixels
HEIGHT = pixels
WIDTH = pixels
VSPACE = taille de la marge verticale avec le texte
HSPACE = taille de la marge horizontale avec le texte
|
|
Exemple:
..........................
................... : Coordonnées de l'image :
: Référence à une : :........................:
: page HTML : /
:.................: /
| |
V V
<A HREF="SOMMAIRE.html"><IMG SRC="SOMMAIRE.GIF"
ALT="[Retours au sommaire]"></A>
^
|
.........................
: Texte de remplacement :
:.......................:
Dans cet exemple l'image (sommaire.gif) sera réactive :
si on clique dessus on retourne au sommaire (page sommaire.html)
![[retour au sommaire]](../Cpycours.gif)
|
|
5) CREATION D'UN TABLEAU
<TABLE> ... </TABLE> Définition du tableau
admet 4 paramètres BORDER = pixels
WIDTH = pixels
CELLSPACING = pixels d'espacement
CELLPADDING = pixels taille de la bordure
<CAPTION>...</CAPTION> Titre du tableau
admet 1 paramètre ALIGN = TOP
BOTTOM
<TR>... </TR> Ligne d'un tableau
admet 3 paramètres ALIGN = LEFT | RIGHT | CENTER
VALIGN = TOP | MIDDLE | BOTTOM
BGCOLOR="#rrvvbb"
|
|
<TH>... </TH> Entête de cellule d'un tableau
admet les paramètres ROWSPAN = Nombre de lignes occupées
COLSPAN = Nombre de colonnes
ALIGN = LEFT
RIGHT
CENTER
VALIGN = TOP
MIDDLE
BOTTOM
BGCOLOR="#rrvvbb"
<TD>... </TD> Cellule d'un tableau
admet même paramètres que TH
|
|
EXEMPLE :
Nombre d'heures travaillées
| M/A |
LUNDI |
MARDI |
MERCREDI |
JEUDI |
VENDREDI |
SAMEDI |
| Matin |
4 |
4 |
0 |
4 |
5 |
0 |
| Aprés midi |
4 |
4 |
2 |
2 |
2 |
0 |
|
|
<TABLE BORDER = 2 >
<CAPTION ALIGN= TOP> Nombre d'heures travaillées </CAPTION>
<TR>
<TH>M/A</TH>
<TH>LUNDI</TH>
<TH>MARDI</TH>
<TH>MERCREDI</TH>
<TH>JEUDI</TH>
<TH>VENDREDI</TH>
<TH>SAMEDI</TH>
</TR>
<TR>
<TH>Matin</TH>
<TD>4</TD>
<TD>4</TD>
<TD>0</TD>
<TD>4</TD>
<TD>5</TD>
<TD>0</TD>
</TR>
<TR>
<TH>Aprés midi</TH>
<TD>4</TD>
<TD>4</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>0</TD>
</TR>
</TABLE>
|
|
6) CREATION DE CADRES (FRAMES)
le but est d'afficher plusieurs pages sur un seul écran, par exemple :
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° +
+ ° un bandeau fixe sur toutes les pages ° +
+ °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° +
+ °°°°°°°°°° °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° +
+ ° un ° ° une page html qui s'affiche suivant le choix ° +
+ ° menu ° ° effectué par l'utilisateur sur le menu de ° +
+ ° ° ° gauche. ° +
+ ° sur ° ° ° +
+ ° la ° ° ° +
+ ° gauche ° ° ° +
+ ° ° ° nous avons donc ici trois cadres ° +
+ ° ° ° ° +
+ ° ° ° ° +
+ °°°°°°°°°° °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
voyez l'exemple suivant
|
|
Pour réaliser cela vous devez coder une page HTML qui va en fait
créér les cadres et indiquer les pages HTML devant les remplir.
<frameset > indique un ensemble de cadres ainsi que le découpage logique
<frameset cols="x,y,*"> indique un découpage en colonnes
-la première colonne occupe x pixels
ou x% (il faut ajouter "%")
-la deuxième colonne occupe y pixels ou %
-la troisième colonne le reste.
<frameset rows ...> indique un découpage en lignes
les ordres <frameset ..> doivent être terminés par </frameset> et
remplacent <body>,</body> qui sont invalides.
il peuvent être imbriqués
|
|
pour l'exemple qui nous intéresse :
<html>
<head>
<title>titre de la page </title>
</head>
<frameset rows="15%,*">
<frame src="bandeau.html">
<frameset cols="20%,*">
<frame src="menu.html">
<frame src="page1.html">
</frameset>
</frameset>
<noframe>
votre navigateur ne supporte pas les cadres,
cliquez <a href="page1.html"> ici </a> pour voir la page principale
</noframe>
</html>
|
|
Pour référencer un cadre particulier lors d'un lien :
1/ nommer le cadre lors de sa création
<frame src="page1.html" name="principal">
2/ indiquez le nom du cadre avec HREF
<a href="page1.html" target="principal">
ou bien utilisez l'un des mots réservés suivants:
target="_blank" -> nouvelle fenêtre sans nom
"_self" -> le cadre en cours contenant l'ordre HREF(par défaut)
"_parent" -> le cadre parent (père)
"_top" -> la fenêtre principale (annule tous les cadres)
|
|
7) CREATION D'UN FORMULAIRE
Un formulaire est une demande d'informations sous forme de saisie:
zones de texte, cases à cocher, boutons radio, etc ...
(enquête de satisfaction, commande par correspondance etc.)
Le but étant de pouvoir les traiter de manière automatique à la réception
A) Définition de l'action
C'est ce que va faire le navigateur des informations
qu'il a récupéré par la saisie utilisateur.
<FORM METHOD = "post"
ACTION="Adresse URL"
L'adresse URL peut être deux choses :
Un pgm CGI (sur AS/400 , un pgm GAP ou C)
Un script interprété (PHP, NetData, etc...)
Une adresse de courrier électronique
|
|
Exemple :
<FORM METHOD = "post"
ACTION="mailto:infos@volubis.fr"
Enverra le résultat de la saisie à la boite au lettre infos (site Volubis)
B) Définition du masque de saisie
> Zone de saisie simple
<INPUT TYPE="text" NAME="zone" SIZE=n MAXLENGTH=xx value="valeur initiale">
^ ^
/ \
taille affichée nbr de caractères maxi.
Exemple :
|
|
> Zone de saisie cachée
<INPUT TYPE="hidden" NAME = "zone" VALUE="valeur">
> Zone de saisie à plusieurs lignes
<TEXTAREA NAME = "zone" ROWS=n COLS=n>
[ texte initial (facultatif) ]
</TEXTAREA>
Exemple :
Saisissez ici vos remarques :
<TEXTAREA NAME = "remarque" ROWS=6 COLS=50>
</TEXTAREA>
Cela créera une zone de 300 caractères de remarque avec
50 caractères par ligne
|
|
> Zone de choix (cases à cocher)
<INPUT TYPE="checkbox" CHECKED NAME = "zone" VALUE="valeur 1">
<INPUT TYPE="checkbox" NAME = "zone" VALUE="valeur 2">
Exemple :
Région
<UL>
<LI> France <INPUT TYPE="checkbox" NAME="pays" VALUE="FRA" CHECKED>
<LI> Ile de France<INPUT TYPE="checkbox" NAME="pays" VALUE="ILE">
<LI> Paris<INPUT TYPE="checkbox" NAME="pays" VALUE="PAR">
</UL>
si l'utilisateur coche les trois, le serveur recoit:
pays=FRA,ILE,PAR
|
|
> Boutons radio
<INPUT TYPE="radio" NAME = "zone" VALUE="valeur 1">
<INPUT TYPE="radio" NAME = "zone" VALUE="valeur 2" CHECKED>
Exemple :
Donnez moi une note :
<P>
<INPUT TYPE="radio" NAME = "note" VALUE="20" CHECKED > Merveilleux <BR>
<INPUT TYPE="radio" NAME = "note" VALUE="15"> Bon <BR>
<INPUT TYPE="radio" NAME = "note" VALUE="10"> Moyen <BR>
<INPUT TYPE="radio" NAME = "note" VALUE="05"> Peu mieux faire <BR>
<INPUT TYPE="radio" NAME = "note" VALUE="00"> Incurable <BR>
</P>
le serveur recoit note=20 (ou 15, 10, etc...)
Donnez moi une note
|
|
> Liste déroulante
<SELECT NAME="ZONE" [MULTIPLE] >
<OPTION VALUE="texte1">texte1</OPTION>
<OPTION SELECTED VALUE="texte2">texte 2</OPTION>
<OPTION VALUE="texte3">texte 3</OPTION>
</SELECT>
Exemple :
<SELECT NAME="ECRAN">
<OPTION VALUE="V"> VGA </OPTION>
<OPTION SELECTED VALUE="S"> SVGA </OPTION>
<OPTION VALUE="A"> AUTRE </OPTION>
</SELECT>
|
|
> Boutons d'action : Ils sont deux
- Envoyer
<INPUT TYPE="submit" VALUE="Envoi">
- refresh (réaffichage)
<INPUT TYPE="reset" VALUE="Annuler">
Exemple :
Cliquez sur un des boutons
<INPUT TYPE="submit" VALUE="Envoi">
<INPUT TYPE="reset" VALUE="Annuler"> |
|
le bouton envoyer peut-être remplacé par une image :
<INPUT TYPE="image" SRC="../images/ok.gif">
|
|
8) TAG POUR INSERTION JAVA
JAVA est le langage concu par SUN qui permet par l'intermédiaire
d'applets (programmes "compilés" qui sont chargés sur votre ordinateur)
de produire de mouvements d'images et autres traitements.
Ce langage ayant été reconnu par tous les grands acteurs.
le langage JAVA est assez proche du C++ avec certaines
simplifications qui rendront l' apprentissage simple pour un programmeur
connaissant les bases de la programmation orientée objet.
Un applet exécutable dans un document HTML s'appelle une classe
(class en anglais)
Pour intégrer des applets dans un document HTML il faut
les déclarer de la manière suivante:
<BODY>
<APPLET code=nomapplet.class width = 150 height = 150>
<PARAM name = nomvariable value="valeur">
</APPLET>
</BODY>
|
|
Voici le source d'un exemple de classe :
import java.applet.*;
import java.awt.*;
import java.awt.peer.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import java.util.*;
public class nomapplet extends applet
{
public void paint (Graphics g)
{
g.drawRect(10, 10, 120, 120);
g.drawString("Formation sur HTML"), 20, 30);
}
}
|
|
9) QUELQUES CONSEILS
A) Eviter les chargements longs
Abondance de dessins, pages HTML trop grandes, etc.
B) Bien choisir la présentation
La présentation doit être à la fois sobre et personnalisée et
doit tourner de manière correcte sur les différents navigateurs
Il faut voir beaucoup de sites WEB ayant la même activité que vous
et faire une synthèse, et n'oublier pas que si une page HTLM vous intéresse
vous pouvez la charger sur votre disque pour analyser le source.
C) Prévoir un accès rapide par rubrique
Pratiquement toutes les pages WEB ont un sommaire qui vous aiguille vers
les différentes partie du document, ce qui vous évite de lire tout
le document.
|
|
D) Utilisez les frames pour simplifier l'accès
On doit trouver une information en trois clic de souris maxi !
E) Laisser une e-mail pour vous écrire (voir un livre d'or)
On peut vous aider à corriger des BUGS ou vous donner des conseils
judicieux et vous pouvez même obtenir ainsi des informations de type
trucs et astuces.
F) Penser à la maintenance
Avant de vous lancer, prenez des conseils auprès de personnes ayant déja
réalisé des serveurs.
Une des régles essentielles est de faire des petits documents HTML liés
par HYPERTEXTE plutôt qu'un gros document qui deviendra rapidement
ingérable.
Si votre serveur est réussi les documents seront en perpétuelle évolution
|
|
Chaque document peut être maintenu indépendamment et éventuellement
par des personnes différentes.
A terme vos pages pourront même être sur des machines différentes.
Utilisez au maximum des liens relatifs '../../monfichier.htm'
G) Utiliser des outils évolués (et évolutifs)
Pour la saisie du Code HTML, Eclipse ou WDSc/RDI
Pour un Outil WYSIWYG NVU (Open Source) ou Dreamweaver
Les techniques évoluent vite, la norme HTML aussi.
...........................................................................
: Des informations en lignes peuvent être trouvées sur le site : :
: www.ncsa.uiuc.edu :
: particulièrement le Guide du Débutant en HTML à :
: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html :
:.........................................................................:
|
|
9) Liste des principaux TAGS HTML
TAGS DE STRUCTURE
Définition d'un document HTML <HTML>...</HTML>
Définition d'un entête <HEAD>...</HEAD>
Définition d'un titre <TITLE>...</TITLE>
Corps du document <BODY>...</BODY>
TAGS DE SEPARATION
Fin de Paragraphe <P>
Nouvelle Ligne <BR>
Trait Horizontal <HR>
Spécifications d'entête
Plus grand <H1>.. </H1>
<HX> </HX>
Plus petit <H6>... </H6>
|
|
LES ATTRIBUTS DE TEXTE
Gras <B>...</B>
Italique <I>...</I>
Style machine à écrire <TT>...</TT>
Souligné <U>...</U>
Préformaté <PRE>...</PRE>
Addresse <ADDRESS>...</ADDRESS>
Entre quotes <BLOCKQUOTE>...</BLOCKQUOTE>
Citation <CITE>...</CITE>
D'aprés une source <CODE>...</CODE>
Definition <DFN>...</DFN>
Emphase <EM>...</EM>
Entrée clavier <KBD>...</KBD>
Listing <LISTING>...</LISTING>
Exemple <SAMP>...</SAMP>
Forte emphase <STRONG>...</STRONG>
Variable <VAR>...</VAR>
|
|
Liste ordonnée d'éléments
<OL>
<LI> 1er élément
<LI> 2éme élément
</OL>
Liste désordonnée d'éléments
<UL>
<LI>1er élément
<LI>2éme élément
</UL>
Liste descriptive
<DL>
<DT>Titre de la description
<DD>Définition
<DT>Un autre titre
<DD>Une autre définition
</DL>
|
|
Indentation
Pour une liste indentée mettre le tag <DT> par exemple
<DL>
<DT>
<DD>Ce texte apparaitra indenté
</DL>
Références
Sert à définir un nom
<A NAME="MarkName">
(idem)
<PID="MarkName">
Aller à un point d'ancrage
<A HREF="#MarkName">texte associé</A>
Lier à un autre document
<A HREF="chemin d'accès URL">texte</A>
Envoyer un MAIL
<A HREF="mailto:xxxxx@ZZZZZ.COM">Envoyer un mail</A>
Image
<IMG SRC="Chemin d'accès/fichier.gif"">
|
|
Caractères Spéciaux
générer un é , è é , è
générer un â â
générer un à à
générer un & &
générer un > >
générer un < <
générer un " "
générer un blanc non séparé
genérer un caractère ASCII &#asciicode;
# @ |
Caractères étendus :
À À
ï ï
Þ Þ
Ñ Ñ
Commentaires dans un source <! -- ... -->
|
HTML5
Le principe du HTML5 est de proposer une vision plus structurée de la page web permettant s'appuyer presque exclusivement sur les feuilles de style
le document doit commencer par <!DOCTYPE html>
ensuite il a été défini des sous-parties, beaucoup plus fine que <head> et <body> , éviant les balises <div>
<header> définition d'une partie entête
<hgroup> sous-parties dans une entete
<footer> définition d'un pied de page
<nav> partie contenant des liens de navigation (propres à la page en cours)
<article> défintion d'un article (d'une partie) de la page
<section> section d'un article
<aside> éléments séparé de la page principale (par exemple bandeaux publicitaires)
Chacune de ces balises peut se voir attribuer un style propre.
Autres balise du HTML 5 :
<canevas> réceptacle pour des éléments graphiques, eux même implémentés par API javascript
<audio> , <video> réceptacle pour des éléments multi-média
Pour en savoir plus : http://www.ibm.com/developerworks/training/kp/wa-kp-html5/
RDI / RDP
RDI /RDP permttent de saisir du HTML (pour WDSc voir ce cour)
- avec LPEX en standard
- En mode graphique, en installant le Web Page editor
Pour cela, choisissez Aide / installer un nouveau logiciel
Allez sur le lien Sites de logiciels disponibles et cochez le "repository" en fonction de votre version d'eclipse
- Ganymede pour RDi/RDP 7
- Helois pour RDP 8 , 8.5
- Juno pour RDI 9
ici, pour RDP 8.5.1
ici pour RDI 9
Choisissez l'option "Web Page Editor"
Confirmez l'installation
Quand cette dernière est terminée vous devez avoir des options supplémentaires pour un fichier .htm (y compris sous l'IFS)
Voici l'éditeur
La fenêtre structure affiche la hiérarchie des élements HTML
la fenêtre propriété, le détail 
©AF400