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
É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
É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="http://www.berkeley.edu" > L ’Université de berkeley </A> </HTML> 28/11/2018
Interprétation du code HTML (1er exemple) 28/11/2018
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> (i=1,2,3) 28/11/2018
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
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
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
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
<BR> : saut de ligne Paragraphes Unité élémentaire <BR> : saut de ligne 28/11/2018
Liste ordonnée Liste non ordonnée Listes <UL> <LI> Cas 1 <OL> <LI> Cas 3 <LI> Cas 4 </OL> 28/11/2018
Interprétation Ma page Cas 1 Cas 2 1. Cas 3 2. Cas 4 28/11/2018
<A HREF="http://www.berkeley.edu" > Hyper-lien <A HREF="http://www.berkeley.edu" > L ’Université de berkeley </A> Visualisation Ma page L’Université de Berkeley 28/11/2018
Exple: www.berkeley.edu 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 28/11/2018
Sur la machine www.upmf-grenoble.fr 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 28/11/2018
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
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).
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).
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).
Microsoft www.w3c.org Nature des fichiers Images …../cs/fichier.gif …../cs/fichier.jpg Texte f1.txt f2.doc f3.ppt f4.html Microsoft www.w3c.org 28/11/2018
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