1 / 36

Internet, le Web etc…

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

zorana
Download Presentation

Internet, le Web etc…

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet, le Web etc… Benjamin I. LevineNovembre 2002

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

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

  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 ? Nom de la machine DNS Adresse IP Universal Resource Locator : Protocole://nom_du_serveur.domaine/ Ou bien : Protocole://username;password@nom_du_serveur:port/repertoire/nom_de_document.htm Domain Name Server

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

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

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

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

  10. JAVA • 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 » ‘applets’ ApplicationsComplexes (Traitement de texte Tableur, Dessin) Code source non distribué Tests de validité des données lors de remplissage de formulaires

  11. Exemple de code Java : un applet Méthodes pour l’interfaçage de l’objet 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); } } La méthode paint est définiedans la classe PremApplet HTML appelant l’applet : <APPLET CODE="PremApplet.class" WIDTH = 300, HEIGHT=50> Votre navigateur n'est pas compatible Java </APPLET>

  12. Les Formats Graphiques

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

  14. Quand le format JPEG vaut mieuxque le format GIF…

  15. JPEG 85% 341Ko 1500 x 856 pixels

  16. JPEG 35% 47Ko 1500 x 856 pixels

  17. GIF 11 couleurs 189Ko 1500 x 856 pixels

  18. Quand le format GIF/PNG vaut mieuxque le format JPEG…

  19. Fichier PNG 2Ko

  20. GIF 6 couleurs 4Ko

  21. JPEG 80% 15Ko

  22. JPEG 2% 6Ko

  23. Graphiques et Formats Actuellement aucun format vectoriel ne s’est imposé. 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 WebTaux 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

  24. Construire une page HTML…

  25. Construction de base <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  26. En-tête (Header) <HTML> <HEAD> <TITLE> Une page comme &ccedil;a </TITLE> <META NAME="author" CONTENT="Benjamin I. Levine"> <META NAME="description" CONTENT="fichier pour montrer un exemple de HTML"> </HEAD> <BODY> </BODY> </HTML>

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

  28. Lecture dans IE 6

  29. Lecture dans IE 6

  30. Attributs <HTML> <HEAD> <TITLE> Une page comme &ccedil;a </TITLE> <META NAME="author" CONTENT="Benjamin I. Levine"> <META NAME="description" CONTENT="fichier pour montrer un exemple de HTML"> </HEAD> <BODY> <h1 align="left">Titre &agrave; gauche</H1> Le titre est &agrave; gauche.... <h3 align="center">Titre est au centre</H3> Le titre est au centre.... <h4 align="right">Taille h4</H4>Le titre est &agrave; droite.... </BODY> </HTML>

  31. Attributs <HTML> <HEAD> <TITLE> Une page comme &ccedil;a </TITLE> <META NAME="author" CONTENT="Benjamin I. Levine"> <META NAME="description" CONTENT="fichier pour montrer un exemple de HTML"> </HEAD> <BODY background="Images/Aquarium.bmp" text="white"> <h1 align="left">Titre &agrave; gauche</H1> Le titre est &agrave; gauche.... <h3 align="center">Titre est au centre</H3> Le titre est au centre.... <h4 align="right">Taille h4</H4>Le titre est &agrave; droite.... </BODY> </HTML>

  32. Mise en forme du texte <BR ><B> Caract&egrave;res gras gras</B><BR > <I> Caract&egrave;res italiques</I><BR > <BIG> Caract&egrave;res plus grand</BIG><BR > <SMALL> Caract&egrave;res plus petits</SMALL><BR > <U> Caract&egrave;res soulign&eacute;s</U><BR > <BLINK> Caract&egrave;res clignotants</BLINK> <S>Texte barr&eacute;</S> ou <STRIKE>celui-ci fait parti du standart HTML 3.2</STRIKE> et l&agrave; je suis<SUB>Exposant</SUB> <TT> Caract&egrave;res de machine &agrave; &eacute;crire </TT>

  33. Liens vers… un endroit du même document <a name="#C_ici">c’est ici que le lien pointe</a> <a href="#C_ici">lien vers l’autre endroit</a> un autre document <a href="/Image/CV.doc">lien vers mon CV</a> <a href="exemple.html#C_ici">lien ailleurs CV</a> une autre adresse Internet <a href="http://www.lpst.fr">liens vers le LPST</a> <a href="ftp://benivel:mot_de_passe@ftp.ifrance.com">Accès à mon site</a> Vers une adresse mail Pour m’écrire : <a href="mailto:levine@lpst.ups-tlse.fr">levine@lpst.ups-tlse.fr </a>

  34. Les Tableaux et les listes

  35. Les listes <ul type="circle"> <li> puce en cercle </li> </ul> <ul type="disc"> <li> puce en disque </li> </ul> <ul type="square"> <li> puce en carré </li> </ul> <ul> = unordered list Liste à puces <ol> = ordered list Liste numérotée <li> = list item élément de la liste exemples <ol type="a"> <li> liste alphabétique </li> </ul> <ol type="A"> <li> liste ALPHABETIQUE </li> </ol> <ol type="I"> <li> Chiffre Romain </li> </ol> <ol type="I" start="5"> <li> cinquième niveau </li> </ol>

  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…

More Related