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

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

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

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

URL ? Universal Resource Locator : Protocole://nom_du_serveur.domaine/ Ou bien : Domain Name Server Nom de la machineAdresse IPDNS

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

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…)

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

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

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’

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

Les Formats Graphiques

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

Quand le format JPEG vaut mieux que le format GIF…

JPEG 85% 341Ko 1500 x 856 pixels

JPEG 35%47Ko 1500 x 856 pixels

GIF 11 couleurs189Ko 1500 x 856 pixels

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

FichierPNG2Ko

GIF 6 couleurs4Ko

JPEG80%15Ko

JPEG2%6Ko

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é.

Construire une page HTML…

Construction de base

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

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

Lecture dans IE 6

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....

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....

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

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 :

Les Tableaux et les listes

=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

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…