Internet, le Web etc… Benjamin I. Levine Novembre 2002.

Présentation au sujet: "Internet, le Web etc… Benjamin I. Levine Novembre 2002."— Transcription de la présentation:

1 Internet, le Web etc… Benjamin I. Levine Novembre 2002

2 Internet, le Web etc… Benjamin I. Levine Novembre 2002 Brève introduction au réseau des réseaux HTML, Java et Javascript Les Formats Graphiques Construire une page Web

3 Nombre de Serveurs Bulle “nouvelle économie” 1 Sept., 2002 Croissance des Serveurs Internet Sept. 1969 – Sept. 2002

4 Un peu d’Histoire Paul Barran commutation de paquets 1961-64 Vint Cerf et Bob Khan "Internet Protocol" (IP) 1973-74 1983 : Création d’internet 1989 : Création du Web (Tim Berners-Lee) au CERN

5 URL ? Universal Resource Locator : Protocole://nom_du_serveur.domaine/ Protocole://username;password@nom_du_serveur:port/repertoire/nom_de_document.htm Ou bien : Domain Name Server Nom de la machineAdresse IPDNS

6 HTTP, FTP et HTML HTTP : HyperText Transfer protocol HTML : HyperText Markup Language Ce n’est pas un langage de programmation au sens de Turing (impossible de calculer ) FTP :File Transfer Protocol ftp.ifrance.com ftppersonne.free.fr

7 Exemples de commandes HTML Utilisation de balises Nécessité de balises appariées (ouverture/fermeture) Ce texte est normal Ce texte est en valeur Ce texte n’est pas en valeur Ce texte est normal Ce texte est en valeur Ce texte n’est pas en valeur correct haha incorrect haha (Ça marche en HTML pas en XHTML) Pas d’imbrication Les espaces ne comptent pas (au delà de un…)

8 Créé par Netscape Langage interprété et exécuté localement Gère les évènements et permet d’effectuer des opérations localement. Javascript Applications Simples (calculettes, etc.) Aspects Graphiques (modifications au passage de la souris) Tests de validité des données lors de remplissage de formulaires

9 Exemple de Javascript <!-- document.onmousedown=clicdroit function clicdroit() {if (event.button==2) {event.button==1 } // -->

10 Conçu par Sun. Langage compilé indépendant de la plate-forme et très différent du HTML. P-code exécuté localement sur une « JAVA machine » Applications Complexes (Traitement de texte Tableur, Dessin) Code source non distribué Tests de validité des données lors de remplissage de formulaires JAVA ‘applets’

11 Exemple de code Java : un applet import java.awt.*; public class PremApplet extends java.applet.Applet { public void paint (Graphics g) { g.drawString("Première tentative d'affichage d'une applet",50,20); } Méthodes pour l’interfaçage de l’objet Votre navigateur n'est pas compatible Java HTML appelant l’applet : La méthode paint est définie dans la classe PremApplet

12 Les Formats Graphiques

13 JPEG Qualité 80% 2750 octets JPEG Qualité 50% 1654 octets JPEG Qualité 20% 825 octets GIF 256 couleurs 2087 octets Gif ou Jpeg ? Pour le Web : écran PC :96 dpi écran Mac :72 dpi

14 Quand le format JPEG vaut mieux que le format GIF…

15 JPEG 85% 341Ko 1500 x 856 pixels

16 JPEG 35%47Ko 1500 x 856 pixels

17 GIF 11 couleurs189Ko 1500 x 856 pixels

18 Quand le format GIF/PNG vaut mieux que le format JPEG…

19 FichierPNG2Ko

20 GIF 6 couleurs4Ko

21 JPEG80%15Ko

22 JPEG2%6Ko

23 Graphiques et Formats Graphics Interchange Format (GIF) de Compuserve Le format actuel inclus la transparence, l’animation et l’entrelacé. Limité à 256 Couleurs/pixel. (255 si transparence) Pas de perte de qualité. Taux de 3:1 à 5:1 Joint Photographic Expert Group (JPEG) Meilleur respect des couleurs (16,7 millions couleurs/pixel) 30% de taux de perte est suffisant pour le Web Taux de 10:1 à 50:1 Portable Network Graphic (PNG) Combine les propriétés de GIF et JPEG (permet transparence) PNG8, PNG16, PNG24 etc… Taux de 4:1 à 7:1 Actuellement aucun format vectoriel ne s’est imposé.

24 Construire une page HTML…

25 Construction de base

26 En-tête (Header) Une page comme ça <META NAME="description" CONTENT="fichier pour montrer un exemple de HTML">

27 Corps (Body) Une page comme ça <META NAME="description" CONTENT="fichier pour montrer un exemple de HTML"> Voici une image d’un grand physicien. <IMG alt="Une image de Feynman" align="right" src="Images/feynman.jpg" width=200 border=0> Taille h2 Taille h3 Taille h4

28 Lecture dans IE 6

29

30 Attributs Une page comme ça Titre à gauche Le titre est à gauche.... Titre est au centre Le titre est au centre.... Taille h4 Le titre est à droite....

31 Attributs Une page comme ça Titre à gauche Le titre est à gauche.... Titre est au centre Le titre est au centre.... Taille h4 Le titre est à droite....

32 Mise en forme du texte Caractères gras gras Caractères italiques Caractères plus grand Caractères plus petits Caractères soulignés Caractères clignotants Texte barré ou celui-ci fait parti du standart HTML 3.2 et là je suis Exposant Caractères de machine à écrire

33 Liens vers… une autre adresse Internet liens vers le LPST Accès à mon site un autre document lien vers mon CV lien ailleurs CV un endroit du même document c’est ici que le lien pointe lien vers l’autre endroit Vers une adresse mail Pour m’écrire : levine@lpst.ups-tlse.fr

34 Les Tableaux et les listes

35 =unordered listListe à puces =list itemélément de la liste puce en cercle puce en disque puce en carré =ordered listListe numérotée Les listes liste alphabétique liste ALPHABETIQUE Chiffre Romain cinquième niveau exemples

36 Pour la prochaine fois Réfléchir à la disposition de votre page Réunir des Images (CD, disque ou adresses internets) S’inscrire sur free ou ifrance ou…