Cours de HTML - univ-lille.frlagis-vi.univ-lille1.fr/~lo/ens/commun/php/html_cours.pdfMasters Génie...

Masters Génie Industriel et SMaRT – HTML 1

HTMLOlivier Losson

Master GI, Spécialités PM et II, UE Systèmes d'Information pour le Pilotage des Entreprises et Génie Logiciel Industriel 2

http://lagis-vi.univ-lille1.fr/~lo/ens/giMaster ASE, Spécialité SMaRT, UE Gestion des Données Industrielles

http://lagis-vi.univ-lille1.fr/~lo/ens/ase/#GDI

http://lagis-vi.univ-lille1.fr/~lo/ens/gi

http://lagis-vi.univ-lille1.fr/~lo/ens/ase/#GDI


Plan du cours

1 – Généralités

BalisesStructure d'un documentRègles d'édition

2 – Éléments de formatage

TexteTableauxGraphiques

3 – Éléments interactifs

LiensFormulaires


Introduction (1)

Internet et le WWWRéseau ARPA (fin 60s)

Protocole TCP/IP (Transmission Control Protocol/IP)

Adresse IP=URL=n° réseau+n°hôte (ex. 134.207.20.1)

Technologie client-serveur

DNS (Domain Name Service)adresse alphabétique adresse IP numérique

Services : Email, Telnet, SSH, FTP, Chat, News, www

WWW (World Wide Web)protocole HTTP (Hypertext Transfer Protocol)adressage fichier/donnée URL (Universal Resource Locator)langage de description des docs=HTML

Généralités Éléments de formatage Éléments interactifs


HTML (HyperText Markup Language)Développé par le fondateur du Web Tim Berners-Lee

Langage de structuration de document

titres, listes, tableaux, (hyper)liens, formulaires

graphiques et autres contenus multimedia

interfaces pour langages complémentaires (Javascript, PHP)

Fichier texte (.HTM ou .HTML)

contenu, dont liens hypertextuels (hyperlinks)

+ mise en forme hiérarchique : balises=marques=repères

Spécifications (W3C)

1995 : HTML 2.0 aboutie (5.0 auj.), basé sur SGML

extensions XHTML basée sur XML

Introduction (2)



Analyse et affichage d'un document

requête

résultatclient

serveur

www.domaine.fr/page.htm

Navigateur du client :

Interpréteur

(parser)

page.htm

page.htm reçue affichage

<html>

<head>

<title>Titre</

...

Titre

Bienvenue sur ma page

Bla bla bla ...

Introduction (3)



Principe

Notation <…>

Marque un élément HTML

1 balise d'ouverture <x> 1 balise de fermeture </x>

Domaine de validité: entre les 2 balises

Quelques balises autonomes

Insensible à la casse, mais préférer minuscules

Imbrication possible

Ex. <h1>Ceci est un <i>titre</i></h1>

Et ça un passage à la ligne<br> Suit une seconde ligne.

Balises (1)


Attributs

Données additionnelles ("paramètres") de la balise

Syntaxe: nom_attribut="valeur"nom_attribut liste d'attributs possibles pour la balise

valeur liste de valeurs permises ou libre, mais typée :

<h1 align="center"> ou <img border="0">

Quelques attributs universels (ex. id)

Couleurs (en hexa)

Commentaires

Balises (2)


type de doc

début de doc

en-tête

corps

fin de doc

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Texte du titre</title>...</head><body>...</body></html>

Structure d'un document



Saisir l'ossature d'abord

Caractères spéciaux

Pour un fichier : jeu de caractères Latin-1<meta http-equiv="content-type"content="text/html; charset=ISO-8859-1">

Caractères isolés: code€ ou € ou €

et masquer > en > < en < & en & " en "

Contrôle du passage à la ligne: <br> et

Gestion des espacesPlusieurs espaces ou tabulations 1 espace

Règles d'édition (1)



Ne pas écrire de pages spécifiques

à navigateur ou plate-forme (tester sur plusieurs)

à résolution d'écran

Utilisation des graphiques

à bon escient (nécessaires ?)

petits et avec un faible nombre de couleurs

réemploi (cache)

Adressage (URL)

complet si source extérieure

relatif à l'intérieur du projet web

Règles d'édition (2)



Attributs (pour le doc complet)

bgcolor="couleur" : couleur d'arrière-plan

text ="couleur" : couleur par défaut du texte

link="couleur" : couleur des liens non visités

vlink="couleur" : couleur des liens visités

alink="couleur" : couleur des liens actifs

background="url" : image d'arrière-plan

Balise <body>



6 niveaux de titres <h1..6> hiérarchisation

Paragraphes <p>..</p>

attribut commun: align="left|center|right|justify"

Listes

à puces<ul><li>elt 1</li>…</ul>

Texte préformaté (en Courier) : <pre>..</pre>

Ligne de séparation : <hr> attr.: width, size, align

Texte (1)

numérotée<ol><li>elt 1</li>…</ol>



Mise en forme de caractères

<b>..</b> : gras

<i>..</i> : italique

<u>..</u> : souligné

<strike>..</strike> : barré

Fonte : balise <font>

attribut size="taille absolue|relative" ex. 5,+2,-1

attribut face="police" ex. Arial, Times

attribut color="couleur"

Texte (2)

<small>..</small> : + petit

<big>..</big> : + grand

<sup>..</sup> : exposant

<sub>..</sub> : indice



Tableaux (1)

Utilité

Présenter des données sous forme tabulaireAligner des éléments (tableau non quadrillé)

Balises

Table : <table>Ligne : <tr>Cellule <th> (entête)ou <td> (donnée)

Remarques

Même nombre de colonnes pour toutes les lignesPossibilité d'utiliser <thead>, <tfoot> et <tbody>



Tableaux (2)

Attributs de <table>

border (0=aucun quadrillage)width (ds contenant, pixels|%)

Colonnes

largeur non spécifiée adaptée au contenudéfinition : <colgroup>... </colgroup>

largeur explicite (pixels) : <col width="100">largeur relative : <col width="4*">

attributs de <td> et <th>align : alignement horizontalvalign (top|middle|bottom|baseline) : alignement vertical



Tableaux (3)

Contenu de cellules

quelconque (texte, graphique, tableau, …)vide <td> </td>

Fusion de cellules (attribut de <td> ou <th>)

rowspan=nb_lignes : étendre sur plusieurs lignescolspan=nb_colonnes : étendre sur plusieurs colonnes<table border="1" width="200"> <tr>

<th colspan="2">Avec colspan</th> </tr><tr> <td rowspan="2">Avec<br>rowspan</td> <td align="right">1</td> </tr><tr> <td align="right">2</td> </tr>

</table>



Balise <img> : attributs

src="chemin_fichier" (formats gif, jpg ou png)

alt="contenu_alternatif"

width="valeur", height="valeur"

border="valeur"

align="top|middle|bottom|left|right" (alignement txt)

hspace="valeur", vspace="valeur"

Rem. : pour l'alignement, on utilise svt des tableaux

hspacehspace

vspace

border=2

align=left

Graphiques



Cadres

Jeu de cadres<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head>...</head><frameset cols|rows="valeur[%], valeur[%], ..."> <frame src="fichier.htm" name="nom"> (n fois)

<noframe>Ceci est affiché qd le navigateur nesupporte pas les cadres

</noframe></frameset></html>

dans rows ou cols, * = "le reste" (ex. rows="100,*,60")imbrication possible: <frameset cols="30%,70%"> ... (déf cadre ) <frameset rows="90%,10%"> ... (déf cadres et ) </frameset></frameset>


http://www.w3.org/TR/html4/frameset.dtd


Propriétésdéfilement : <frame scrolling="yes|no">marges : <frame marginwidth|height="pixels">largeur fixe : <frame noresize>bordure : <frameset [frame]border="0|1">

Liens à des cadres

target="_parent" ferme le jeu de cadres en courstarget="_top" ferme tous les jeux de cadrestarget="_blank" affiche dans nouvelle fenêtre

Lien1Lien2

name="gauche"

name="droite"

<a href="page1.htm" target="droite">Lien1</a>

Cadres (2)



Balise <a>

contenu: entre <a> et </a> (texte, image, ...)

attribut name="nom_ancre" définit une ancre

attribut href="url" crée un lienatteindre ou télécharger un fichier du projet : href="fichier"

atteindre une ancre : href="[fichier.htm]#nom_ancre"

atteindre un site extérieur : href="http://site[/fichier.htm]"

rédiger un courrier href="mailto:nom@adresse"

page1.htm

page2.htm

<a href="#position2">

<a name="position1">

<a name="position2">

<a href="page2.htm#position1">

<a href="page2.htm">

Liens



Cartes cliquables (imagemaps)

Principegraphique avec zones sensibles (liens)

formes possibles: rectangulaire, circulaire ou polygonale

Création<map name="nom">

<area href="..." shape="rect|circle|poly" coords="x1,y1,x2,y2|xc,yc,r|{xn,yn}" alt="...">

...

</map>

Utilisation<img src="fichier" width="…" height="…" usemap="#nom">

Liens (2)



But

interaction avec l'utilisateur (recherche, avis, …)

Principe<form action="url_script|mailto:..." method="GET|POST">

... (éléments de formulaire)

</form>

attribut action : que faire avec les données saisies : envoyées par mail ou traitées par programme script

attribut method : méthode de transmission httpGET = données jointes comme paramètre de l'adresse

POST = données envoyées directement au script

Rem. Envoi d'email : method="POST" et enctype="text/plain"

Formulaires (1)



Éléments de formulaireattribut commun : name="nom"champs de saisie (attribut readonly=lecture seule)

à une ligne : <input type="text"size="taille" maxlength="nb_max_car" value="valeur_défaut">cryptée (mdp) : <input type="password" size="taille" maxlength="nb_max_car" value="valeur_défaut">à plusieurs lignes : <textarea size="taille" rows="nb_lignes" cols="nb_cols">... (texte par défaut)</textarea>pour transmission de fichier : <input type="file" size="taille" maxlength="octets_max" value="valeur_défaut" accept="extensions_ok">

Rem. noter alors <form enctype="multipart/form-data">

Formulaires (2)



Éléments de formulaire (suite)

liste de choixliste : <select name="n" size="t">...(items)</select>ajouter attribut multiple si choix multiple

item de liste :

<option [selected] [value="valeur"]> texte </option>si value omis, c'est texte qui est transmis

éléments d'optionsattr. nom (name) identique pour toutes les options du groupe

boutons radios (1 seul choix possible) : <input type="radio" value="valeur" [checked]> texte

case à cocher (0|1|plusieurs choix possibles) : <input type="checkbox" value="valeur" [checked]> texte

Formulaires (3)



Éléments de formulaire (suite)boutons cliquables

classique : <input name="n" type="button" value="légende" onclick="action">ex. d'actions : "history.back()", "self.location.href='url' "

moderne : <button name="n" type="button" value="légende" onclick="action"> contenu </button>

boutons d'action sur formulaire

envoi : <input type="submit" value="légende">réinitialisation : <input type="reset" value="légende">autres moyens :

<button type="submit"> ... </button>

<button type="reset"> ... </button>

Formulaires (4)



Éléments de formulaire (suite)

champ cachéutilité : transmission de données non affichées

balise : <input type="hidden" name="n" value="">...<script type="text/javascript"> document.NomForm.n.value=expression;

</script>

Compléments

l'attribut disabled désactive l'élément de formulaire

Exploitation du formulaire : scriptCGI (Common Gateway Interface), Perl

PHP

Formulaires (5)


Cours de HTML - univ-lille.frlagis-vi.univ-lille1.fr/~lo/ens/commun/php/html_cours.pdfMasters Génie...

Documents

Transcript of Cours de HTML - univ-lille.frlagis-vi.univ-lille1.fr/~lo/ens/commun/php/html_cours.pdfMasters Génie...