Information2 HTML

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.
HTML 4.0

• Historique
– Conçu par Tim Berners-Lee au CERN en 1990
– Suivi de nombreuses extensions diverses
• Novembre 1995: HTML 2.0 défini par IETF
Introduction à HTML • Janvier 1997: HTML 3.2 défini par W3C
• Décembre 1997: HTML 4.0 défini par W3C
• HTML+ (1993) et HTML 3.0 (1995) sont non
standards
• Aujourd’hui: HTML 4.0 ou xHTML ou XML…
1 2
HTML (suite) Exemple


<html>
• SGML - Standard Generalized Markup
Language <head>
– Marquage de documents permettant d'enrichir <title>Document sans titre</title>
le contenu:
<meta http-equiv="Content-Type"
– Séparation contenu et structure d’un côté,
présentation, mise en forme de l’autre content="text/html; charset=iso-8859-1">
– SGML est un langage permettant de définir des </head>
langages de marquage
<body>
• HTML est un exemple de langage de
marquage </body>
</html>
3 4
1
Vérifier la validité de code SGML
HTML 4.0
Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM. ou HTML

• Documents valides = garantie de résultats;
– Internationalisation
• Plus de caractères, spécification de la langue, de la direction
cas d'erreurs non spécifiés
– Accessibilité • Spécification officielle:
• meilleur support d'agents non graphiques http://www.w3.org/TR/REC-html40
– Nouveaux modèles de tableaux
• meilleur contrôle de la structure et du formattage
• Outils et services: nsgmls
– Feuilles de style (séparation structure/présentation) (http://www.jclark.com),
– Scripting (documents dynamiques/interactifs) http://validator.w3.org
– Recommendation W3C depuis le 12 décembre 1997
5 6
Eléments Attributs
• Eléments

• Propriétés associées aux éléments
• Définis par: nom, etiquette "tag" de • Définis par: nom, type de la valeur, valeur par
début, contenu, etiquette de fin défaut
• Les tags peuvent être optionnels (P, • Le nom est "case-insensitive »
HEAD) • La valeur peut-être "case-insensitive" ou "case-
• Si contenu vide, pas de tag de fin sensitive »
(IMG) • NB:
• Structure (chapitre, section, – "Tags" et Eléments ne sont pas synonymes!!!
paragraphe, ...) – La structure d'un document est un arbre

• <I>foo<B>bar</I></B> est invalide
7 8
2
Structure générale d’un document
Commentaires
Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM. HTML

•  • Préambule: Une section de déclaration
•  (HEAD, TITLE, META, ...)
<HEAD>
• <P -- ceci non plus! --> <TITLE>HTML 4.0</TITLE>
<META name="Author" content="Toto">
</HEAD>
• Le corps du document (BODY or
FRAMESET)
… contenant les informations en HTML
9 10
Texte Listes

• Paragraphe <P> • Liste ordonnée et non ordonnée (OL, UL et
• Autres éléments textuels (<EM>, LI)
– Exemple: <OL>
<STRONG>, <CODE>, <ABBREV>, ...) <LI> item 1
• Exemple : <LI> item 2
• <EM> la c’est important </EM> </OL>
• Espaces
1. item 1
– <BR> 2. item 2
–
11 12
3
Listes (suite) Tableaux

• Liste de définitions (DL, DT et DD)
<DL> • Jouent un rôle prépondérant dans la mise en page
<DT>PhP – Servent à positionner les élements sur une grille
<DD>un langage de script pour le www – Peuvent parfois être avantageusement remplacé par
feuilles de style
<DT>MySQL • mais interprétation non certaine
<DD>SGBD relationnel
</DL> • Définir le tableau
-------------------------------------------- – <TABLE> </TABLE>
PhP • Définir des lignes et des cellules
un langage de script pour le www – (TR)
MySQL * Deux types de cellules: données (TD) et entêtes (TH)
SGBD relationnel * Association d'un titre (CAPTION)
* Spécification de propriétés (taille) liées aux colonnes
(COL et COLGROUP)
13 14
Liens hypertextes Images


• Liens externes • Inclusion d'une image (IMG)
– <A href="chapter2.html">chapter two</A>: <P>La photo du siècle est :
• Liens internes <IMG src="everest/arrivee.png"
– See <A href="#section2">Section 2</A> for alt="dommage, vous ne verrez rien!!">
details. • Note:
... alt est obligatoire -> accessibilité
<A name="section2">Section 2</A>
... section 2 ...
15 16
4
Les Images réactives
Les Images • Elements et attributs

– usemap
• Balise IMG – MAP
• attribut de IMG
– attributs • élément définissant une carte

• src, width, height, units,align, alt, usemap • composé d'éléments AREA
• border (épaisseur du trait QUAND imbriquée ds – AREA

• élément définissant une zone active de la carte
balise A)
• Exemple
– Exemple:
<img src="../../../Images/cd2.gif" width="383" <img src="../../../Images/cd2.gif" width="383" height="354"
height="354" border="0" > border="0" usemap="#mapCD" >
<map name="mapCD">
<area shape="rect" coords="72,126,189,149"
href="emprunt.html">
href="ajout.html">
href="recherche.html">
17 </map></p> 18
Formulaires <FORM> … </FORM>


• contient
• Définition d'un formulaire en HTML – n'importe quel champs de saisie
(<INPUT>,<SELECT>,<TEXTAREA>)
– n'importe quel code HTML
• attributs
– action
• référence au programme qui sera éxécuté par le serveur
– method
• mode de transmission des données au serveur GET
(transmises en fin d'url) ou POST(transmises à part)
• Elements HTML concernés: • ->POST le plus souvent
<FORM> • Exemple
<INPUT> <FORM ACTION="registercont.jsp" METHOD="POST">
<SELECT> ....
</FORM>
<TEXTAREA>
19 20
5
Exemple simple <html><head><title>blablabla</title></head>
<body>
Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM. <CENTER>

<FORM METHOD='POST' ENCTYPE='multipart/form-data'
ACTION='InsJeuTest.php' NAME='Form'>
<TABLE BORDER='0' CELLSPACING='2' CELLPADDING='4' >
<TR>
<TD><B>Nom du jeu de test</B></TD>
<TD><INPUT TYPE='TEXT' NAME='titre' VALUE='' SIZE='50'
MAXLENGTH='50' ></TD>
</TR>
<TR>
<TD><B>Nom du responsable</B></TD>
<TD><INPUT TYPE='TEXT' NAME='nomResp' VALUE='' SIZE='50'></TD>
</TR>
<TR>
<TD><B>Descriptif du contenu</B></TD>
<TD><TEXTAREA NAME='resume' ROWS='4' COLS='50'></TEXTAREA></TD>
</TR>
<TR>
<TD><B>Jeu de test(archive .zip, .tgz, ou .tar.gz)</B></TD>
<TD><INPUT TYPE='FILE' NAME='jeuTest' VALUE='' SIZE='20'></TD>
</TR>
</TABLE>
<P><INPUT TYPE='SUBMIT' NAME='valider' VALUE='Valider la saisie'>
</FORM></CENTER>
</body>
21 22
<INPUT ...> <INPUT>

– Objectifs

• définir n'importe champs de saisie de base – type=RESET,
– attributs • <input name="name22" type="reset"
• type value="Effacer">
– type=TEXT,
– type=PASSWD, • <input name="name32" type="submit"
– type=HIDDEN, value="Envoyer">
– type=CHECKBOX,
– type=RADIO,
– type=FILE,
23 24
6
<SELECT>...</SELECT> Exemple

• Objectifs <select
– Faire un menu permettant la sélection d'un name="Prefere">
choix parmi plusieurs <option
– contient des éléments OPTION qui selected>Cliquez
représentent les choix possibles pour
– <OPTION VALUE=1> blablabla choisir</option>
<option>La page
d'accueil</option>
...
<option>Pages
Perso</option>
<option>Assistance
</option>
</select>
25 26

Information2 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Information2 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

HTML (suite) Exemple

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

paragraphe, ...) – La structure d'un document est un arbre

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Liens hypertextes Images

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

– attributs • élément définissant une carte

• border (épaisseur du trait QUAND imbriquée ds – AREA

Formulaires <FORM> … </FORM>

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

<INPUT ...> <INPUT>

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

– type=PASSWD, • <input name="name32" type="submit"

Mountaz Hascoët, mountaz@lirmm.fr, Univ. Montp II, LIRMM.

Vous aimerez peut-être aussi