Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
G.ELGHOUMARI Université ParisII Panthéon-Assas
28/11/2018 Pr. Namar Ydriss Université Paris II Panthéon - Assas Informatique de base Cours 2: Edition HTML 28/11/2018
2
Édition sous HTML Partie II Logiciels Éditeurs
Bloc-Notes (accessoire de Windows) Textpad ( .txt) Word (.doc) Dreamweaver (.htm) Navigateurs Netscape (.htm) Explorer 28/11/2018
3
Éditeurs Code HTML ( 1er exemple)
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=" > L ’Université de berkeley </A> </HTML> 28/11/2018
4
Interprétation du code HTML (1er exemple)
28/11/2018
5
Détails du code HTML (1er exemple)
1°/ Accès aux fichiers <A HREF=" > http (ftp) Serveur ou adresse IP 2°/ Taille des caractères H1, H2, H3 Balise ouvrante <Hi> Balise fermante </Hi> (i=1,2,3) 28/11/2018
6
mise en forme de paragraphe, images, liens hypertextes, tableaux...
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 ...> 28/11/2018
7
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> 28/11/2018
8
Structure d’un document 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 28/11/2018
9
Caractères Code E codé en ASCII (1 octet) Windows vs. Macintosh
Mais é codé par è ou ou Unicode 2 octets Normal, Gras Balise ouvrante <B> Balise fermante </B> 28/11/2018
10
<BR> : saut de ligne
Paragraphes Unité élémentaire <BR> : saut de ligne 28/11/2018
11
Liste ordonnée Liste non ordonnée Listes <UL> <LI> Cas 1
<OL> <LI> Cas 3 <LI> Cas 4 </OL> 28/11/2018
12
Interprétation Ma page Cas 1 Cas 2 1. Cas 3 2. Cas 4 28/11/2018
13
<A HREF="http://www.berkeley.edu" >
Hyper-lien <A HREF=" > L ’Université de berkeley </A> Visualisation Ma page L’Université de Berkeley 28/11/2018
14
Exple: www.berkeley.edu
Notion d’URL Unified Resource Locator Exple: 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 28/11/2018
15
Sur la machine www.upmf-grenoble.fr
Syntaxe d’une URL Accès au document Avec le protocole http Sur la machine Sur le port 9999 (s'utilise assez rarement) Le document est le fichier /ctec/NT/HTML/liens.html 28/11/2018
16
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 28/11/2018
17
URL absolues, URL relatives
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) 28/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
18
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 28/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
19
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 28/11/2018 Les noms de répertoires sont séparés par des "/". ".." signifie le répertoire en amont (celui qui contient le répertoire du fichier d'où part le lien).
20
Microsoft www.w3c.org Nature des fichiers Images …../cs/fichier.gif
…../cs/fichier.jpg Texte f1.txt f2.doc f3.ppt f4.html Microsoft 28/11/2018
21
T.D 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 Liens Hyper-texte Une image comme source de lien Suivre la feuille de T.D. 28/11/2018
Présentations similaires
