Informatique de base Pr. Namar Ydriss Cours 1: Introduction Université Paris I

Download Report

Transcript Informatique de base Pr. Namar Ydriss Cours 1: Introduction Université Paris I 

Université Paris I
Panthéon - Assas
Pr. Namar Ydriss
Informatique de base
Cours 1: Introduction
24/05/2016
1
Partie II
Édition sous HTML
Logiciels
•Éditeurs
–Bloc-Notes (accessoire de Windows)
–Textpad ( .txt)
–Word (.doc)
–Dreamweaver (.htm)
•Navigateurs
–Netscape (.htm)
–Explorer
24/05/2016
2
Éditeurs
 Wysiwyg
– What you see is what you get
 A balisage
– HTML (HyperText Markup Language)
– TEX, LATEX
Code HTML ( 1er exemple)
<HTML><TITLE> Ma page </TITLE>
<H1>Chapitre 1 </H1>
La taille des caractères est déterminée par des balises.
<H2>Section 1 </H2>
<A HREF="http://www.berkeley.edu" >
L ’Université de berkeley </A>
</HTML>
24/05/2016
3
Interprétation du code HTML (1er exemple)
24/05/2016
4
Détails du code HTML (1er exemple)
1°/ Accès aux fichiers
 <A HREF="http://www.berkeley.edu" >
 http (ftp)
 Serveur www.berkeley.edu ou adresse IP
2°/ Taille des caractères
 H1, H2, H3
 Balise ouvrante <Hi>
 Balise fermante </Hi>
24/05/2016
(i=1,2,3)
5
Balises
 Permettent d'ajouter de l'information qui n'est
pas du texte pur :
mise en forme de paragraphe, images, liens hypertextes,
tableaux...
 Peuvent être écrites en majuscules ou en minuscules
Les syntaxes possibles:
• <balise> texte </balise>
• <balise attribut=valeur> texte </balise>
• <balise attribut1=valeur1 attribut2=valeur2 ...> text</balise>
• <balise>
• <balise attribut=valeur ...>
24/05/2016
6
Document HTML
commence par la balise <HTML> et se termine par </HTML>
2 parties :
•Entête
Commence par <HEAD> et se termine par </HEAD>
Contient des informations générales sur le document
Titre est défini entre les balises <TITLE> et </TITLE>
•Corps commence par <BODY> et se termine par </BODY>
24/05/2016
7
Structure d’un document HTML
<HTML>
<HEAD>
<TITLE> titre du document </TITLE>
</HEAD>
<BODY>
texte du document avec balises de mise en page,
de mise en forme, de liens hypertextes, d'images, ...
</BODY>
</HTML>
Application
Choisissez un document WWW relativement simple avec votre
navigateur et visualisez son fichier source.
Netscape, dans le menu déroulant Edit, choisissez View Source
24/05/2016
8
Caractères
• Code
– E codé en ASCII
– Mais é codé par &egrave; ou &#x8F; ou &#143;
• Normal, Gras
– Balise ouvrante <B>
– Balise fermante </B>
24/05/2016
9
Paragraphes
• Unité élémentaire
• <BR> : saut de ligne
24/05/2016
10
Listes
• Liste ordonnée
• Liste non ordonnée
24/05/2016
<UL>
<LI> Cas 1
<LI> Cas 2
</UL>
<OL>
<LI> Cas 3
<LI> Cas 4
</OL>
11
Interprétation
Ma page
• Cas 1
• Cas 2
1. Cas 3
2. Cas 4
24/05/2016
12
Hyper-lien
<A HREF="http://www.berkeley.edu" >
L ’Université de berkeley </A>
Visualisation
Ma page
L’Université de Berkeley
24/05/2016
13
Notion d’URL
Unified Resource Locator
Exple: www.berkeley.edu
Suite de caractères (sans espace)
Définit l'endroit (locator) où se trouve un
document (resource)
Champ Location du navigateur
Appelée aussi adresse d'une page WWW
24/05/2016
14
Syntaxe d’une URL
http://www.upmf-grenoble.fr:9999/ctec/NT/HTML/liens.html
Accès au document
Avec le protocole http
Sur la machine www.upmf-grenoble.fr
Sur le port 9999 (s'utilise assez rarement)
Le document est le fichier /ctec/NT/HTML/liens.html
24/05/2016
15
Pour les documents HTML
protocole est presque toujours http
Exemples de domaines
• Suffixes .com
– wanadoo.com
– aol.com
• Suffixes .edu
– berkeley.edu, stanford.edu
• Suffixes .fr
– u-paris2.fr, lri.fr
24/05/2016
16
URL absolues, URL relatives
 URL absolues : http://www.urec.fr
 URL relative à la machine: /ctec/NT/coursHTML.html
 URL relatives au répertoire du document
./balises.html :
"." signifie le répertoire courant
(le même que le fichier d'où part le lien)
../EUDORA/index.html
".." signifie le répertoire en amont
(qui contient le répertoire du fichier d'où part le lien)
24/05/2016
17
URL absolues, URL relatives
 URL absolue utilisée lors de la création d’ un
lien vers un autre site WWW
 URL relative au répertoire d'un document
lors de la création d’un lien vers un document
du même site
24/05/2016
18
Vérification des hyper-lien
 Dreamweaver permet de vérifier si tous les liens
d'une page pointent sur des documents existants
Vérification:
File puis Check links...
Les liens sont alors vérifiés un à un
24/05/2016
19
Nature des fichiers
• Images
– …../cs/fichier.gif
– …../cs/fichier.jpg
• Texte
– f1.txt
– f2.doc
– f3.ppt
– f4.html
24/05/2016
Microsoft
www.w3c.org
20
Applications
TD 1 /II
• Édition d’un fichier (AliceMac.txt), code des
caractères : ASCII et Unicode
• Édition HTML manuelle et sous Dreamweaver,
Caractères, paragraphes, Images, Ancres, Listes
24/05/2016
21