TD07-6diaposParPage

Transcription

TD07-6diaposParPage

INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
2006-2007
Plan
• 1. Rappel : Réseaux et Internet
• 2. Le Web
– notion d’hypertexte et HTML
– butineur
– URL
MODULE INF112
• 3. Introduction à HTML
–
–
–
–
–
TD 7
2006 – 2007
principes généraux
balises simples
listes
liens
Insertion d’images
1
INF112 - TD7
2006-2007
2
INF112 - TD7
2006-2007
Qu'est ce qu'un réseau ?
• Définition
1. Rappels :
réseaux et Internet
– Ensemble d'entités reliées qui peuvent communiquer
selon un certain protocole.
• Exemple : le réseau téléphonique
– Appareils divers (téléphone, fax, …) avec identifiant
(numéro de téléphone)
– Moyens de communication (fils téléphoniques, fibre
optique, cable, satellite, …)
3
INF112 - TD7
2006-2007
INF112 - TD7
Internet
2006-2007
Internet aujourd'hui
• Qu'est ce que le réseau Internet ?
• Pour quoi ?
– réseau mondial connectant des ordinateurs
selon un protocole qui lui est propre : IP
– IP = Internet Protocol
• Réseau de réseaux
• Intérêt : pas de structure centrale
– fonctionne en cas de problème local
– évite la saturation due au passage par un
point central
4
– web, mail, telnet, ftp, chat IRC, news, etc..
• Par qui ?
– universitaires, entreprises, particuliers.
• Quelques chiffres
– ~110 00 000 internautes en Europe déc. 2006
– ~1 100 000 000 dans le monde en déc. 2006
5
6
1
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
2006-2007
Définition : Le Web
• Web = "toile d'araignée"
• Web = "World Wide Web"
2. Le Web
• Définition :
– document virtuel considérable constitué de
pages d'informations (page web).
7
INF112 - TD7
2006-2007
8
INF112 - TD7
2006-2007
Principes du Web
Définition : hypertexte
• Pages Web :
– documents HTML (HyperText Markup Language)
• définition :
– document non linéaire constitué de pages
permettant de passer de l'une à l'autre par
des liens (liens hypertexte)
– Créé au CERN en 1989
• Web = hypertexte + réseau
• Web ≠ Internet !!
9
2006-2007
INF112 - TD7
2006-2007
Architecture client/serveur
Butineur(s)
• Outils qui permettent de lire des documents sur
Internet (surtout des documents web)
• Exemples : Netscape, Internet Explorer, Safari ...
T
http://java.sun.com/jdk1.3/demo/applets/Clock/example1.html
Butineur
4. Affichage
ER
NE
1. Demande de chargement d ’une
page web
Client
http
Example1.html
Serveur
http
INT
INF112 - TD7
• Fichiers créés
• avec un éditeur de textes,
• avec un logiciel de création de sites Web
• Documents dynamiques générés par des programmes
• ex : pages de l’annuaire France Telecom,
résultats moteurs de recherche
10
3. Chargement de la page html
<HTML>
<HEAD>
<TITLE>A Clock (1.1)</TITLE>
</HEAD>
<BODY>
<h1>A Clock (1.1)</h1>
<hr>
<applet code="Clock2.class"
width=170 height=150>
<param bgcolor="C0C0C0">
</applet>
....
</BODY>
2. Recherche locale
du document
HTML
HTML
HTML
HTML
HTML
HTML
HTML
11
12
2
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
2006-2007
URL
• URL = Uniform Ressource Locator
• Localisation d'un document :
•
•
•
•
3. Introduction à HTML
par le nom du protocole permettant d ’y accéder,
le nom de la machine,
le chemin pour accéder au document (répertoires),
nom du document.
• principes généraux
• balises simples
• listes
• liens
• Syntaxe:
méthode://nomserveur/répertoires/fichier
• méthode : http, mailto, ftp, file, news
• nomserveur : nom d’identification de la machine
• fichier : nom de fichier
INF112 - TD7
13
2006-2007
14
INF112 - TD7
Principes généraux
2006-2007
Principes généraux (2)
• Web = ensemble de documents hypertexte
(fichiers) répartis sur Internet
• Hypertexte = texte contenant des liens vers
d'autres documents
• Documents = documents textuels écrits dans
le langage HTML = HyperText Markup
Language
• Documents textuels
– peuvent être produits par un simple éditeur (ex:
bloc note )
– pas de mise en forme
– consignes de présentations avec des « balises »
• HTML = langage de balisage
• C'est le CLIENT http qui interprète les balises
et réalise mise en forme et les liens
• Client HTTP = butineur / navigateur / browser
15
INF112 - TD7
2006-2007
Structure d'un document HTML
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<H1 ALIGN="CENTER">Ma page HTML</H1>
<HR>
<p><b>DUPONT</b> Laurent</p>
<p><i>filière : DEUG SV-ST</i>
à l'<a href="http://www.ujfgrenoble.fr">université
Joseph Fourier</a></p>
<p>Mes moteurs de recherche préférés
:</p>
<ol>
<li>Altavista</li>
<li>Google</li>
<li>Hotbot</li>
</ol>
</body>
</html>
<UneCommande> Avec ici un texte </UneCommande>
17
<UneCommande DesParamètres> Avec un texte </UneCommande>
16
INF112 - TD7
2006-2007
Document standard HTML
• doit obligatoirement :
– commencer par <HTML> et finir par </HTML>
– comporter une en-tête
• délimitée par <HEAD> et </HEAD>
– avoir un corps contenant le document à publier
(même si la page est totalement vide)
• délimité par <BODY> et </BODY>.
<HTML>
<HEAD>
<TITLE>La page à toto</TITLE>
</HEAD>
<BODY>
Bienvenue dans la page a toto.
</BODY>
</HTML>
18
3
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
L’entête
L’entête
• contient des informations qui ne sont pas
affichées dans la fenêtre
• contient un titre (même vide)
Exemples de balises META :
– délimité par <TITLE> et </TITLE>
– titre =
• ce qui apparaît dans la barre de titre
• utilisé pour nommer la page lorsque l'on fait un "favori" (ou
"signet")
• parfois utilisé par les moteurs de recherches
• contient parfois des informations « meta »
– information qui décrit le contenu du document
– date création, auteur, mots-clefs…
INF112 - TD7
2006-2007
19
2006-2007
<HEAD>
<TITLE>Guide pratique et progressif du langage
HTML</TITLE>
<META NAME="description" CONTENT="Guide pratique et
progressif du langage HTML pour les nuls, explique comment
créer facilement de belles pages WEB avec un simple éditeur Point d'entrée du guide.">
<META NAME="keywords" CONTENT="guide, pratique,
progressif, langage, html, editeur, faire, créer, creer,
création, creation, conception, facile, belles, page, web,
site, homepage, simple, pour, les, nul, nuls, frontpage,
dreamweaver, homesite, webexpert, webedit, hotdog, golive,
activex, entrée, entree, guide" LANG="fr">
<META NAME="author" CONTENT="[email protected]
(Richard R. BAUD)">
<META NAME="copyright" CONTENT="© 1998-2000 Richard R.
BAUD">
20
</HEAD>
INF112 - TD7
Balises de styles simples - 1
2006-2007
Balises simples - 2
Niveaux de titre (Headers)
<H1> … </H1> :
Exemple de header de niveau 1
Paragraphe : <P> … </P>
insère automatiquement une ligne blanche
Retour à la ligne (break row) : <BR>
<H2> … </H2> : Exemple de header de niveau 2
Trait horizontal occupant la largeur de la fenêtre
(horizontal row) : <HR>
<P>, <BR> et <HR> n'ont pas besoin d'être fermées.
<H6> … </H6> :
Exemple de header de niveau 6
Il n'y a pas de niveau inférieur à H6
INF112 - TD7
21
2006-2007
C'est au concepteur de pages HTML d'imbriquer
correctement les marqueurs.
La vérification par le client n'est pas assurée.
INF112 - TD7
Balises simples - 3
22
2006-2007
Balises simples - 4
<BIG> … </BIG> : caractères de grande taille
<SMALL> … </SMALL> : caractères de petite taille
<BLINK> … </BLINK> : texte clignotant (spécificité de Netscape)
<TT> … </TT> : police non proportionnelle, dite à
chasse fixe (teletype)
<PRE> … </PRE> : maintient une mise en forme
préétablie d'un texte (police à chasse fixe,
respect des espaces,
tabulations et retours-chariots),
par exemple pour présenter un programme.
<B> … </B> : texte en gras
<STRONG> … </STRONG> : texte en gras également
<I> … </I> : texte en italique
<EM> … </EM>: également un texte en italique (emphasis)
<ADDRESS> … </ADDRESS> : aussi un texte en italique
<CITE> … </CITE> : encore un texte en italique (citation)
<U> … </U> : soulignés (underline)
<S> … </S> : caractères barrés (strike)
<BLOCKQUOTE> … </BLOCKQUOTE> : présente un paragraphe
tel une citation en alinéa (retrait) comme dans l'exemple cidessous:
<SUB> … </SUB> : indices (subscript)
<SUP> … </SUP> : exposants (superscript)
23
Ce texte a été analysé par plusieurs auteurs dont Messieurs DeLaRoche,
Dupuis et Dumont. Ils en sont tous venus à la conclusion que le grand…
24
4
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
Types de Marqueurs - 1
Types de Marqueurs - 2
• Marqueurs physiques :
– contraint le client à modifier l'aspect physique des
caractères
– inconvénient: si le client ne possède pas la police
demandée, il n'a pas d'alternative
• Exemples de marqueurs physiques :
•
•
•
•
•
•
•
• Marqueurs sémantiques :
– dépendent du contexte
– permettent un plus large choix pour la « programmation » par
feuilles de style
– laissent au client une possibilité de s'adapter
• Exemples de marqueurs sémantiques :
•
•
•
•
•
•
•
<B> et </B> caractères gras
<I> et </I> italiques
<U> et </U> soulignés
<TT> et </TT> police à chasse fixe
<S> et </S> caractères barrés
<SUB> et </SUB> indices
<SUP> et </SUP> exposants
INF112 - TD7
2006-2007
<DFN> et </DFN> définition
<CITE> et </CITE> source de citation
<BLOCKQUOTE> et </BLOCKQUOTE> citation
<ADDRESS> et </ADDRESS> adresse, habituellement en italique
<EM> … </EM> (emphasis) met en valeur, hab. en italique
<STRONG> et </STRONG> met en valeur, hab. en gras
<PRE> et </PRE> mise en forme préétablie
25
2006-2007
26
INF112 - TD7
À propos des accents...
les signes diacritiques
2006-2007
Signes diacritiques
• Quelques exemples:
•
•
•
•
•
•
•
â
é
&
>
<
"
 
â
é
&
(ampersand) "et" commercial
>
(greater than)
<
(less than)
"
(quotation) double guillemet
(non-breaking space) espace insécable
Fichier html écrit avec des caractères accentués, et lu par
un navigateur non prévu pour cela.
• Marqueurs & et ;
• Pour les accents, on indique
– la lettre accentuée (a,e,i,o,u)
– puis le type d'accent (circ,acute,grave,…)
27
INF112 - TD7
2006-2007
Exercice 7-1: texte
Représentez la page web qui sera produite par le butineur avec le code html
suivant :
<html>
<head>
<meta name="auteur" content="Monsieur P.">
<title>MrPresse</title>
</head>
<body text="#000000" bgcolor="#CEF0F0">
<h1>Carnet d'adresses :</h1>
Ce paragraphe ne présente <b> pas grand intérêt </b>
si ce n'est celui d'être constitué de suffisamment de caractères
pour dépasser la <i> longueur standard </i>
d'une ligne.
<br>
<hr WIDTH="100%">
<p>
abra
cada
bra
<br>
<br>
</body>
29
</html>
Le même texte, lu par le même navigateur, avec des
caractères accentués correctement codés.
INF112 - TD7
28
2006-2007
Listes non ordonnées <UL>
(listes sans numérotation)
Titre de la liste
• premier point
• deuxième point
<LH> Titre de la liste </LH>
<UL>
<LI>premier point
<LI>deuxième point
</UL>
• premier point
• deuxième point
<UL>
<LI>premier point
<LI>deuxième point
– premier point sec.
<UL>
– deuxième point sec.
<LI>premier point sec.
<LI>deuxième point sec.
</UL>
</UL>
30
5
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
suivant :
• Numérotation réalisée automatiquement par le
client
1. premier point
2. deuxième point
1. premier point sec.
2. deuxième point sec.
2006-2007
Exercice 7-2 : liste
Listes ordonnées <OL>
(listes avec numérotation)
<OL>
<LI>premier point
<LI>deuxième point
<OL>
<LI>premier point sec.
<LI>deuxième point sec.
</OL>
</OL>
<ul>
<li>Chapitre 1 : geometrie
<ol>
<li>le carre</li>
<li>le losange</li>
<li>le rectangle</li>
</ol></li>
<li>Chapitre 2 : algebre
<ol>
<li>les entiers</li>
<ul>
<li>naturels</li>
<li>relatifs</li>
</ul>
<li>les reels</li>
</ol></li>
</ul>
31
INF112 - TD7
2006-2007
32
INF112 - TD7
Attributs d'une balise
2006-2007
Principe des liens
<H1 align = center> Ce titre est au centre </H1>
Ce titre est au centre
<H2 align = left> Cette ligne est justifiée à gauche </H2>
Cette ligne est justifiée à gauche
<P align = right> Ce paragraphe justifié à droite. Bla
bla bla bla bla bla bla. Ce paragraphe justifié à
droite. Bla bla bla bla bla bla bla. Ce paragraphe
justifié à droite. Bla bla bla bla bla bla bla. </P>
exemple2.html
Ce paragraphe est justifié à droite. Bla bla bla bla bla bla
bla. Ce paragraphe est justifié à droite. Bla bla bla bla bla
bla bla. Ce paragraphe est justifié à droite. Bla bla bla bla
bla bla bla.
un lien sur
l’<a href= "http://www.ufjgrenobel.fr/index.html">
Université Joseph Fourier
</A>
index.html
<BODY background="le_chemin_unix/mon_image.jpeg" >
permettra d'utiliser comme fond d'écran un pavage constitué à partir de
l'image indiquée.
INF112 - TD7
33
2006-2007
34
INF112 - TD7
Les liens (ou pointeurs) :
<A> … </A>
2006-2007
Insertion d'image dans une page html
<A HREF="adresse_cible"> texte ou image cliquable </A>
texte du lien ou image cliquable
<IMG SRC="image"
ALIGN="attribut" height=xx width=yy>
• L'adresse cible peut être:
• un document distant :
image = adresse d'une image
<a href="http://www.ujf-grenoble.fr">
Les attribut facultatifs :
"MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT"
La taille imposée de l’image est donnée par xx, yy en pixels.
<a href="http://www-valence.ujfgrenoble.fr/~girod/COURS_INTERNET">
<a href="http://www.grr.ulaval.ca/grrwww/manuel/
manuelhtml.html">
• un document local (sur le même serveur)
<a href="../repertoire/monFichier.html">
35
36
6
INF 112 - TD7
INF112 - TD7
2006-2007
INF112 - TD7
Exemples
2006-2007
Exemples
<IMG ALIGN=BOTTOM SRC="chouette.gif"> La chouette
<IMG ALIGN=TOP SRC="chouette.gif"> La chouette
<IMG ALIGN=RIGHT SRC="chouette.gif"> chouette <BR>
nom par lequel on désigne couramment<BR>
certains oiseaux rapaces nocturnes.<BR>
<I>Le Petit Robert</I>
<IMG ALIGN=LEFT SRC="chouette.gif"> chouette <BR>
nom par lequel on désigne couramment<BR>
certains oiseaux rapaces nocturnes.<BR>
<I>Le Petit Robert</I>
37
INF112 - TD7
2006-2007
38
INF112 - TD7
Exercice 7-3 :
Web Expert
2006-2007
suivant :
<html>
<head>
<title>arbres</title>
</head>
<body>
<h1>Arbres de nos forêts</h1>
<a href="Feuillus.html">Feuillus</a>
<a href="ArbresMorts.html">Arbres morts</a>
<a href="Resineux.html">Résineux</a>
<br>Les <b>arbres</b> seuls ne sont pas toute la forêt mais ils en forment
la <i>voute</i>, modèlent les <i>sous-bois</i>, dessinent les
<i>lisières</i>, habillent les <i>vallées</i>. <br>Les 2/3 de la forêt
sont composés de <i>feuillus</i>, et 1/3 de <i>résineux</i>.
<br><center><img SRC="frisePin.jpg" height=50 width=300></center><br>
<hr WIDTH="100%">
</body>
</html>
39
INF112 - TD7
40
2006-2007
A faire pour le TP 7
• Dans le Guide de l'environnement, des
logiciels et des langages utilisés, lire :
• Le chapitre 8 : « Web Expert »
• Le chapitre 12 (lexique HTML) jusqu’à
« Les images ».
41
7

TD07-6diaposParPage

Transcription

Documents pareils

Télécharger fiche produit

calendrier modules de recherche 2015-2016

J`irais cracher sur vos tombes

Classement Blind Test avril 2012

programme d`activites des mercredis et samedis

Le projet de loi portant sur la fusion privatisation de l`ANPE

Rattrapage du bac professionnel : Sud Education

EARIA 2016 – Lyon

Pourquoi j`aime la France, même en 2016 Des réponses