Information1 HTML

HTML
• Balises et structure des documents

Informatique de l’Internet: le HTML
langage HTML • Formulaires
• Cadres
Joël Quinqueton
• Feuilles de style
Dépt MIAp, UFR IV
UPV − Université Montpellier III
HTML Navigateur
• Navigation
• Hyper Text Mark-up Language
– Caractère dynamique de la consultation
– Accès aux documents « en ligne » des documents
– Documents actifs • Navigateurs
• Il est possible d’accéder à d’autres documents – NCSA Mosaic
dynamiquement
– IE Explorer (Microsoft)
– Réseaux de liens entre les documents:
– Netscape
web
– Opera
–…
Structure (1) Balises (1)

• La mise en page est prise en charge
• Le contenu est cerné par des balises
par le navigateur
(« zones »)
– Nécessité d’insérer dans le document les
– <html> : marque le début du document
informations la précisant
– <head> : (méta) information sur le
– Difficulté de fixer la mise en page
document
• Taille de la fenêtre inconnue
• Jeu de polices de caractères variables
– <title> : …
• Dépendance sur les plates-formes (Win, Mac – <body>
OS, Linux, etc.)
• …
1
Balises (2) Liens hypertextes (1)
• La balise
• <h1> : titre de rang 1
<a> permet
– <h2>, <h3> , …
de définir un
• <p> : simple paragraphe hyperlien
• <table> – Un lien vers
– <tr> : table row, <td>, … un autre
• <blockquote> : citation document
ou section
• Listes
d’un
– <ul> : unordered list, <li> : items document
– <ol> : ordered list, <li> : items
Liens hypertextes (2) Structure (2)

<h1>Références bibliographiques.</h1> • Chaque balises annonce une portion
<p><a href="http://www.urec.fr" target="_blank">Site web de du document
l'UREC</a> (Unité Réseaux CNRS). Tous les
polycopiés des formations destinées aux agents CNRS – Des données (du texte) qui ne seront pas
y sont accessibles.</p> analysées par le navigateur et rendue ou
<p><a href="http://www.ungi.com" target="_blank">Un nouveau utilisée telles quelles
guide internet</a> (UNGI) propose une introduction aux
réseaux accessible aux non spécialistes.</p> • Chaque balise définit un bloc
– La fin est marquée par une balise
fermante correspondante
• Ouverture d’une nouvelle page – </html>, </body>, </p>, </h1>, …
Exemple Structure (3)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> • Les balises
<meta name="Author" content="Guy Melançon">
<title>Materiel du cours</title> constituent les html
<link rel="stylesheet" href="../../../Communs/Style.css" type="text/css"> éléments d’une
</head>
<body bgcolor="#ffffff"> arborescence
<h1>Un questionnaire sur le cours ! <a href="./Questionnaire.php"
target="_blank">Remplissez-le</a> et faites passer le mot.</h1>
head body
<h1>Objectifs du cours</h1>
<p>Aborder tous les aspects des réseaux informatiques, tout en se
concentrant ...</p>
… meta link title h1 h1 p
</body>
</html>
2
Liens hypertextes (4) Ancres nommées (1)
<h1>Cours / <a href="#TD">TD</a></h1>
• Les liens vers des pages sur le même
<p>(Certains fichiers sont compressés pour …
serveur peuvent être désigner de
manière relative ...
– Opérateurs ../ et ./ <h1><a name="TD"></a>TD</h1>
<p>Testez-vous avec ces exercices "fill-in the blank" sur <p><a href="./TDs/TCP_Internet/index.htm" target="_blank">TD
<a href="./Exercices/Routage.htm" target="_blank"> 1. Protocole TCP/IP. HTML.</a></p>
le routage</a>.</p>
• Déplacement dans la même page
Ancres nommées (2) Attributs (1)

• On peut combiner • Chaque élément peut être accompagné
– Ouverture d’une nouvelle page d’attributs
– Désignation d’une ancre nommée – Attributs de mise en page
<body bgcolor="#ffffff"> Précise la couleur de
(positionnement initial) fond de la page
<p>
<a href="../MatérielCours.htm#TD" target="_blank">Retour au <p><font color="#FF8080">

cours.</a> Dernière mise
à jour: vendredi
</p> 26/9/2003, 10h</font></p>
Attributs (2) Balise <a>

• Chaque élément peut être accompagné • target : attribut qui permet de définir
d’attributs la cible d’un hyperlien
– Attributs de données
<h1><a href="./Evaluation.htm" target="_blank"> – _blank : dans une nouvelle fenêtre
URL de redirection
– _parent : dans la fenêtre mère (cadres)
<img src="../../../Communs/Icones/fishy.gif" width="45"
height="35" border="0"> –…
Insertion d’une image
Mode d'évaluation du cours</a></h1>
3
Formulaires (1) Formulaires (2)
• Inclusion d’objets de
questionnaire dans • La balise <form> marque le début et la
une page fin<form
d’unname="form1"
formulaire method="post" action="">
– Champ de texte <p>Remarque
<input type="text" name="remarque" size="30">
– Cases à cocher (une </p>
ou plusieurs cases) …
– Liste de choix (simple </form>
ou multiple)
– Choix unique (bouton • Les objets de formulaires sont introduits
radio)
avec la balise <input>
Champ de texte Cases à cocher

• Largeur des colonnes • Les cases sont cochées de manière
• Nombre de ligne indépendante
• Texte initial <p>
<textarea name="remarque" cols="30" rows="5">
Le champ peut contenir un texte placé par défaut pour <input type="checkbox" name="techno">
l'utilisateur ... Techno
</textarea>
<input type="checkbox" name="jazz">
Jazz
</p>
– Tous les objets de formulaires portent un nom (de

manière à pouvoir être post-traités)
Liste de choix Boutons radios

• On choisit une ou plusieurs options • Un choix parmi N
<p>Homme
<p> <input type="radio" name="homme">
<select name="nombre" size="6" multiple>
Femme
<option>Disco</option>
<option>Techno</option> <input type="radio" name="femme" checked>
<option>Jazz</option> </p>
<option>Classique</option>
<option>Rap</option>
<option>Brésilien</option>
</select>
</p>
4
Cadres (1) Cadres (2)
• Navigation par menus • On<html>
définit une page virtuelle décrivant
<head>
– On souhaite maintenir le menu en place l’assemblage des cadres

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
– On compose une page en plusieurs <frameset cols="388,*" border="4" framespacing="0" rows="*">
<frameset rows="243,*" border="4 framespacing="0" cols="*">
régions rectangulaires <frame name="topFrame" scrolling="NO" noresize src="./Menu.htm" >
<frame name="bottomFrame" noresize src="Annuaire.htm">
</frameset>
<frame name="mainFrame" src="./Introduction.htm">
Menu
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
Liste Cadre principal </noframes>
défilante </html>

<frameset cols="388,*" border="4" framespacing="0" rows="*">
<frameset rows="243,*" border="4 framespacing="0" cols="*">
<frame name="topFrame" scrolling="NO" noresize src="./Menu.htm" >
<frame name="bottomFrame" noresize src="Annuaire.htm">
</frameset>
<frame name="mainFrame" src="./Introduction.htm">
</frameset>
388
topFrame
243
Pages initialement
mainFrame
placées dans les
cadres bottomFrame

<h1>Répertoires des lieux et gens de ...</h1>
• Navigation dans la page <h2><a href="./Introduction.htm" target="mainFrame">Introduction</a></h2>

<h2><a href="./Annuaire.htm" target="bottomFrame">Personnes</a></h2>
– Les cadres sont nommés <p>
<a href="./Annuaire.htm#A" target="bottomFrame">A</a>
– On peut désigner un cadre comme cible <a href="./Annuaire.htm#B" target="bottomFrame">B</a>
d’un hyperlien (attribut target)
– La nouvelle page est alors affiché dan ce
cadre
– On peut aussi désigner la page mère pour
abandonner le cadre courant
5
Feuille de style (1) Style
body, p, td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
font-style: normal; font-weight: normal; font-variant: normal; text-transform:
• Renforce la structure none; color: #333333}
body { background-color: #FFFFFF }
– Les attributs de mise en page sont extraits h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-
weight: bold; color: #333333; font-style: normal; line-height: normal}
de la page elle-même et stockées h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-
indépendamment style: normal; font-weight: bold; font-variant: normal}
.date { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-
– Reprend une idée commune aux éditeurs style: italic; color: #FF8080}
de textes
<h1><a name="TD"></a>TD</h1>
<p><a href="./TDs/TCP_Internet/index.htm"
target="_blank">TD 1. Protocole TCP/IP.
HTML.</a></p>
<p class="date">Dernière mise à
jour: vendredi 26/9/2003, 10h </p>
Editeurs/Générateurs HTML
Feuille de style (2)
(1)
• L’inclusion d’une feuille de style se fait • On n’édite pas dans le code HTML lui-même
au niveau de l’entête (sauf exception)
<!DOCTYPE doctype PUBLIC "-//w3c//dtd html 4.0 transitional//en">

• Générateurs de page HTML (à partir
<html> d’autres sources
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
– Word (enregistrez en tant que page web)
<meta name="Author" content="Guy Melançon"> – LaTeX2html
<title>Materiel du cours</title>
<link rel="stylesheet" href="Style.css" type="text/css">
</head>
Editeurs/Générateurs HTML
(2)
• Editeurs HTML (WYSIWYG, dans la
mesure du possible)
– Macromedia Dreamweaver
– Netscape Composer
– ...

Information1 HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Information1 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

• Balises et structure des documents

Structure (1) Balises (1)

Liens hypertextes (2) Structure (2)

Exemple Structure (3)

• Déplacement dans la même page

Ancres nommées (2) Attributs (1)

<a href="../MatérielCours.htm#TD" target="_blank">Retour au <p><font color="#FF8080">

Attributs (2) Balise <a>

Mode d'évaluation du cours</a></h1>

Champ de texte Cases à cocher

– Tous les objets de formulaires portent un nom (de

Liste de choix Boutons radios

– On souhaite maintenir le menu en place l’assemblage des cadres

Cadres (3) Cadres (4)

Cadres (5) Cadres (6)

• Navigation dans la page <h2><a href="./Introduction.htm" target="mainFrame">Introduction</a></h2>

<!DOCTYPE doctype PUBLIC "-//w3c//dtd html 4.0 transitional//en">

Das könnte Ihnen auch gefallen

Information1 HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Information1 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

• Balises et structure des documents

Structure (1) Balises (1)

Liens hypertextes (2) Structure (2)

Exemple Structure (3)

• Déplacement dans la même page

Ancres nommées (2) Attributs (1)

<a href="../MatérielCours.htm#TD" target="_blank">Retour au <p><font color="#FF8080">

Attributs (2) Balise <a>

Mode d'&eacute;valuation du cours</a></h1>

Champ de texte Cases à cocher

– Tous les objets de formulaires portent un nom (de

Liste de choix Boutons radios

– On souhaite maintenir le menu en place l’assemblage des cadres

Cadres (3) Cadres (4)

Cadres (5) Cadres (6)

• Navigation dans la page <h2><a href="./Introduction.htm" target="mainFrame">Introduction</a></h2>

<!DOCTYPE doctype PUBLIC "-//w3c//dtd html 4.0 transitional//en">

Das könnte Ihnen auch gefallen

Mode d'évaluation du cours</a></h1>