cours de html - univ-lille.frlagis-vi.univ-lille1.fr/~lo/ens/commun/php/html_cours.pdfmasters génie...
Post on 07-Feb-2020
36 Views
Preview:
TRANSCRIPT
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
Masters Génie Industriel et SMaRT – HTML 2
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
Masters Génie Industriel et SMaRT – HTML 3
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
Masters Génie Industriel et SMaRT – HTML 4
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 5
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 6
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 7
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<!-- commentaire ici -->
Balises (2)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 8
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
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 9
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 10
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 11
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>
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 12
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>
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 13
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
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 14
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>
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 15
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
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 16
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>
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 17
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
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 18
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>
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 19
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 20
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
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 21
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 22
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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 23
É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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 24
É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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 25
É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)
Généralités Éléments de formatage Éléments interactifs
Masters Génie Industriel et SMaRT – HTML 26
É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)
Généralités Éléments de formatage Éléments interactifs
top related