Chapitre 2 Les adresses dans internet

Mohamed Mediouni( Ecole Nationale d’Ingénieurs de Tunis (ENIT)). ([email protected]) Téléphone :+21622582534

Les adresses IP: Définition • Sur Internet, les ordinateurs doivent avoir une adresse IP • Des valeurs sur 32 bits, écrits sous forme de 4 numéros allant de 0 à 255

• C'est l'IANA (Internet Assigned Numbers Agency) qui est chargée d'attribuer ces numéros.

Les adresses IP Déchiffrage • une partie des nombres à gauche désigne le réseau (netID) • Les nombres de droite désignent les ordinateurs de ce réseau (host-ID) Réseau 194.28.12.

Ordinateurs allant de 194.28.12.1 à 194.28.12.4

Réseau 178.12.77.

Ordinateurs allant de 178.12.77. 1 à 178.12.77. 6

Les adresses IP Adresses particulières

• host-id = 0 : l'adresse réseau.

• Netid =0 : , l'adresse machine. • Tous les bits de la partie host-id sont à 1: adresse de diffusion (broadcast) • L'adresse 127.0.0.1 est appelée adresse de boucle locale (en anglais loopback), car elle désigne la machine locale (en anglais localhost).

Les adresses IP Les classes de réseaux 0

Classe A

0

Classe B

10

Classe C

110

8

16

Net-id

24

31

Host-id

Net-id

Host-id Net-id

Host-id

Les adresses IP Attribution •But : faciliter la recherche d'un ordinateur sur le réseau. •rechercher dans un premier temps le réseau puis chercher un ordinateur sur celui-ci. •l'attribution des adresses IP se fait selon la taille du réseau. Classe

Nombre de réseaux possibles

Nombre d'ordinateurs maxi sur chacun

A

126

16777214

B

16384

65534

C

2097152

254

Les adresses IP IPV6 •L'apparition de nouveaux utilisateurs provenant de pays aussi peuplés que la Chine • De nouvelles technologies avec des dispositifs connectés de façon permanente •problèmes à résoudre : l'épuisement des adresses IP IP •le nouveau protocole doit permettre d'adresser un espace plus grand •Adresse sur 128 bits

Les noms de domaine • La technologie de base (TCP/IP) permet l’accès aux machines par leur adresse IP, • Il est pratiquement devenu impossible aux humains de connaître les adresses (IP) des machines auxquelles ils veulent accéder (tables de conversion manuelle ) • Le système DNS permet d’identifier une machine par un (des) nom(s) représentatif(s) de la machine et du (des) réseau(x) sur le(les)quel(s) elle se trouve ; exemple : www.centralweb.fr : identifie la machine www sur le réseau centralweb.fr • Le système est mis en œuvre par une base de données distribuée au niveau mondial • Les noms sont gérés par un organisme mondial : l’interNIC et les organismes délégués : RIPE, NIC France, NIC Angleterre, etc.

Les noms de domaine Principe www.centralweb.fr

client

Demande de résolution www.centralweb.fr Réponse 193.148.37.201

DNS serveur DNS

serveur DNS

193.148.37.201

serveur

serveur DNS

Les noms de domaine Principe fr

centralweb inria

www

Les noms de domaine racine La

classification du domaine, parfois appelées TLD (Top Level Domain, soit domaines de plus haut niveau), correspond généralement a une répartition géographique. 7

domaines racines prédéfinis : com

: organisations commerciales

edu

: organisations concernant l’education

gov

: organisations gouvernementales

mil :

organisations militaires

net

: organisations réseau Internet

org

: organisations non commerciales

int

: organisations internationales

organisations nationales : Nouveaux

fr, uk, tn, etc.

domaines racine en cours de normalisation: firm, store, web, arts, rec, info, nom

Les noms de domaine Acquisition et déposition Il

existe des outils (fournis par les organisations en charge des noms de domaine), appelés Whois, permettant de vérifier l'existence d'un nom de domaine : Network Solutions Le

nom de domaine se dépose auprès d'un organisme international (l'Internic) ou de l'un des sous-organismes Certains

internautes prennent actuellement un malin plaisir à acheter un grand nombre de noms de domaines. Ce procédé, appelé grabbing

Les URL Une URL (Uniform Resource Locator) est un format de nommage universel pour désigner une ressource sur Internet. 

Le

nom du protocole

Identifiant

et mot de passe : permet de spécifier les paramètres d'accès à un serveur sécurisé. Cette option est déconseillée car le mot de passe est visible dans l'URL Le

nom du serveur : Il s'agit d'un nom de domaine

Le

numéro de port : il s'agit d'un numéro associé à un service permettant au serveur de savoir quel type de ressource est demandée. Le port associé par défaut au protocole est le port numéro 80. Le

chemin d'accès à la ressource

Les URL Protocole

Mot de passe (facultatif)

Nom du serveur

Port (facultatif si 80)

Chemin

http://

user:password@

www.commentcama rche.net

:80

/glossair/glossair .php3

• •<mailto:[email protected]> • •: un fichier sur le disque dur

Chapitre 3 Les services internet

Les services Internet • Le world wide web •Le courrier électronique • Les news • Le transfert de fichiers par FTP • Le Telnet

• La visio-conférence • Le Chatting

Le world wide web Le Web

 World Wide Web ( «toile [d'araignée] mondiale») ou encore W3  Contribution à l'explosion de l'utilisation d'Internet par le grand public, grâce à sa facilité d'emploi. L’hypertexte Le web se base sur ce que l'on appelle l'hypertexte. C’est un ensemble de documents liés les uns aux autres à l'aide de liens ou hyperliens .  Il se différencie d'un texte habituel, par le fait qu'il ne se lit pas linéairement.

Le world wide web Les liens d'un hypertexte sont en général soulignés et de couleur différente dans le texte.

L'hypertexte est donc un support idéal pour le multimédia. L'outil permettant d'utiliser l'hypertexte, notamment sur le Web, s'appelle un navigateur Les documents hypertextes publiés sur Internet ont en commun le langage dans lequel ils sont écrits: HTML (HyperText Markup Language). • Les navigateurs ou Browsers • Les moteurs de recherche

Le world wide web Moteurs de recherche et catalogues

Les moteurs de recherche ( «search engines») sont des ordinateurs qui parcourent et indexent le Web 24 heures sur 24, 365 jours par an : robots Ils construisent de la sorte une base de données des mots se trouvant sur les pages Web du monde entier.  Ils permettent de faire une recherche ciblée sur un ou plusieurs mots-clef, par le biais de sites spécialisés. Altavista, Lycos.

Le world wide web Moteurs de recherche et catalogues

Un catalogue est un site contenant des liens sur le WWW, classés par sujets. Ils sont composés par des rédacteurs (humains) à l'aide de moteurs de recherche. Le plus célèbre des catalogues est Yahoo. En général, un moteur de recherche permet d'affiner le résultat d'une recherche dans un catalogue.

Les Services Mail ou E-Mail • l'un des services les plus connus • Adresse : nom_user@DNS de la machine • 2 serveurs concernant la messagerie : les serveurs "SMTP" et ceux qualifiés de serveurs "POP" ou "POP3"

Les Services Mail ou E-Mail : serveur SMTP • SMTP (Simple Mail Transfer Protocol) est un protocole qui est chargé d'assurer l'envoi et la distribution des messages sur le réseau. • Envoyer un message sur Internet revient en fait à le soumettre à un serveur SMTP qui fera le nécessaire pour assurer la bonne distribution du message. • Tout fournisseur Internet dispose d'un serveur SMTP, utilisé par ses clients pour l'envoi de messages. On dit parfois que le serveur

Les Services Mail ou E-Mail : serveur POP3 • Le serveur POP ou POP3 permet d'effectuer l'opération "inverse" : lire son courrier. • Le protocole POP (Post Office Protocol ) "protocole de bureau de poste") permet d'aller récupérer son courrier sur un serveur distant (le serveur POP). • Il est nécessaire pour les personnes n'étant pas connectées en permanence à Internet afin de pouvoir consulter les mails reçus hors connexion.

Les Services Mail ou E-Mail

Les Services Mail ou E-Mail : Multidiffusion • Plusieurs adresses séparées par des virgules ou point virgule • un champ appelé Carbon Copy et généralement noté CC • Un champs appelé Blind Carbon Copy, Bcc (pour copie carbone aveugle ) (parfois traduit "copie cachée"). Le contenu n'apparaît jamais dans l'en-tête du message reçu par chacun des destinataires. L'avantage est double – Personne ne peut savoir à qui d'autre le message a été envoyé, – Si le nombre de destinataires est important, la liste

Les Services Mail ou E-Mail

Les Services Transfert de fichiers • Le protocole FTP (File Transfer Protocol) est, comme son nom l'indique, un protocole de transfert de fichier. • La mise en place du protocole FTP date de 1971, date à laquelle un mécanisme de transfert de fichiers (décrit dans le RFC 141) entre les machines du MIT (Massachussetts Institute of Technology) avait été mis au point. De nombreux RFC ont ensuite apporté des améliorations au protocole de base, mais les plus grandes innovations datent de juillet 1973.

Les Services Transfert de fichiers • Le protocole FTP définit la façon selon laquelle des données doivent être transférées sur un réseau TCP/IP. • Le protocole FTP a pour objectifs de : • permettre un partage de fichiers entre machine distante • permettre une indépendance aux systèmes de fichiers des machines clientes et serveur • permettre de transférer des données de manière efficace

Chapitre 4 Les phases de publication d’un site web

Publication d’un site Web Phase analyse : • But de la publication du site: présentation, informations, commerce,… • Identification du groupe cible du site: élèves, clients, professeurs,… • Ressources disponibles : - Disponibilité des données : publiées, électronique, textuelles,… - Existence d’éléments

- Disponibilité des

graphiques : charte graphique, images,…

ressources humaines : Infographistes, rédacteurs de

contenu, développeurs,…

• Analyse des coûts : estimation du temps, de l’espace,…

Publication d’un site Web Phase de conception • Structuration du contenu: Découpage en petites unités, hiérarchisation, planification de l’ordre

• Conception de la structure du site • Conception de la navigation au sein du site

Publication d’un site Web Phase de conception  Structure linéaire: utilisée pour les démarches à suivre

 Structure linéaire bidirectionnelle

Publication d’un site Web Phase de conception  Structure rayonnante

Publication d’un site Web Phase de conception

Structure hiérarchisée

Publication d’un site Web Phase de conception

Structure en réseau

Publication d’un site Web Phase de conception

En pratique

Publication d’un site Web Phase de conception • Conception de la page d’accueil : Elaboration d’une maquette • Conception des autres pages écran

 Respect de l’identité du site : fond, symboles, logo, couleur dominante, mise en page,… • Organisation en dossiers • donner le nom « index.html » à la page d’accueil

Publication d’un site Web Phase de production 1- Développement

2- Test et évaluation 3- référencement 4- Hébergement

Publication d’un site Web Phase de production : référencement •un contenu original et attractif, •un titre bien choisi, •une URL adaptée, •un corps de texte lisible par les moteurs, •des balises META décrivant précisément le contenu de la page, •des attributs ALT pour décrire le contenu des images.

Publication d’un site Web Phase de production : référencement La commande META associe au document HTML des informations d'en-tête qui seront lues par le serveur http.

Les meta-tags se placent entre et juste après <TITLE> et et se présentent Certains moteurs de recherche indexent les pages avec le contenu de cette balise et fourniront cette description dans les résultats des requêtes : <META NAME="Description" CONTENT="Le descriptif de votre page web">

Publication d’un site Web Phase de production : référencement Les mots clés qui définissent votre page HTML, le moteur de recherche renverra sur votre page si une personne utilise un ou plusieurs de ces mots clés : <META NAME="Keywords" CONTENT="mot1 mot2 mot3 mot4">

attributs ALT :

Publication d’un site Web Règles générales de composition • Respect de la capacité d’affichage

• Optimisation du site pour tous les navigateurs • Vérification de l’orthographe et la syntaxe • Choix des couleurs • Signature du site • Mention de la date de la dernière mise à jour du site

Publication d’un site Web Utilisation des tableaux Optimisation des images • format GIF (Graphic Images Format) :  compression des images sans perte de qualité graphiques contenant de grandes plages de la même couleur • format JPEG (Joint Photographic Experts Group)

 destructif Utilisé pour les photos

Publication d’un site Web Interactivité •Commentaires

• Contact •Discussion • Java, PHP, ASP, Java Script,…

Publication d’un site Web Outils nécessaires pour la gestion d’un site • Logiciels de création de page

Macromédia Dreamwaver Microsoft Frontpage • Logiciels de retouche et de compression d’images Adobe Photoshop Macromédia Fireworks PaintShop Pro

Chapitre 5 Le langage HTML

Le langage HTML • HTML – HyperText Markup Language - est un langage simple utilisé pour créer des documents hypertextes pour le Web. • C’est un langage de balisage (utilisant des balise) • Un navigateur Internet (Browser) est un logiciel qui interprète ces balises et ne les affiche pas, cependant il les utilise pour modifier les apparences du texte, pour afficher des images, des liens hypertextes ou d'autres données.

Structure d’un document HTML : entête du document Corps du document



Les titres en HTML texte du titre. n varie entre 1 et 6

H1 Titre de rang 1 H2 Titre de rang 2 H3 Titre de rang 3 H4 Titre de rang 4 H5 Titre de rang 5 H6 Titre de rang 6

Les titres en HTML EXEMPLE

<TITLE> SITE HTML

Le langage HTML

HTML est un langage à balises permettant de créer des pages web. Un navigateur ou Browser permet d’interpréter le code HTML et les afficher sous la forme de pages web

Les Divisons d'un document •
Cette balise provoque le passage à la ligne suivante. •

---

Cette balise trace une ligne horizontale séparatrice sur toute la largeur de la fenêtre du Browser. Elle possède plusieurs attributs : ALIGN : Indique l'alignement de la ligne (LEFT, RIGHT, CE.NTER). COLOR : Indique la couleur de la ligne. SIZE : Indique la hauteur de la ligne. WIDTH : Indique la largeur de la ligne en pixels ou en pourcentage. •

et

- Ces balises provoquent le passage à un nouveau paragraphe tout en insérant une ligne vide entre le paragraphe précédant et le nouveau paragraphe. La balise

reçoit le même paramètre que .

Les Styles texte Permet d’écrire un texte en gras. texte Permet d’écrire un texte en italique. texte Permet souligner un texte.

texte Permet de centrer un texte <SUB> texte Permet d’écrire un texte en indice. <SUP> texte Permet d’écrire un texte en exposant. texte Agit sur la police, la couleur et la taille des caractères du texte. La balise possède 3 attributs: SIZE : définit la taille du caractère. Vous pouvez préciser une valeur. Soit vous augmentez ou diminuez par rapport à la taille par défaut (size="+I") soit vous donnez une taille absolue (size="2"). COLOR : spécifie la couleur des caractères (format RGB). La couleur est exprimée à l’aide d’un code précédé par le signe # FACE : indique le nom de la police de caractère.

Les Tableaux et

Définition d'un tableau.

et

Une Cellule du tableau.

et

Une ligne du tableau.

et et centré).

Une Cellule En-tête du tableau (gras

et Titre du tableau.

attributs des balises du tableau Attributs

Description BORDER X Indique si une bordure est dessinée. La valeur indique la largeur de la bordure CELLSPACING X Espace entre les colonnes en pixels CELLPADDING X Espace entre la bordure d’une cellule et son contenu en pixels WIDTH X X X ALIGN X X X X Alignement horizontal ; peut être LEFT , RIGHT ou CENTER VALIGN X X X X Alignement vertical ; peut être TOP ou BOTTOM BACKGROUND X X X X Image d’arrière plan BGCOLOR X X X X Couleur du fond BORDERCOLOR X X X X Couleur de la bordure ROWSPAN X X Indique sur combien de lignes s’étend la cellule COLSPAN X X Indique le nombre de colonnes sur lesquels s’étend la cellule NOWRAP X X Indique que le texte de la cellule s’étend sur la même ligne Largeur en pixels ou en pourcentage Inclusion d'images Cette balise permet l’insertion d’une image ou d’une séquence vidéo. Cette balise est toujours complétée par l’attribut SRC suivie du nom de la source. La balise possède plusieurs attributs qui sont: SRC ALIGN : Adresse du fichier graphique (.GIF ou.JPG). : Permet l'alignement de l'image par rapport à la ligne du texte courante. Cet attribut peut être suivi de l’une des valeurs suivantes : TOP, MIDDLE, BOTTOM, LEFT, RIGHT. WIDTH : Largeur de l'image. HEIGHT : Hauteur de l'image. BORDER : Pour mettre un cadre au tour de l'image. ALT : Texte qui va servir d'aide (hint). Exemple Les liens Liens externes : Dans HTML une zone active peut correspondre à un caractère, un mot, un groupe de mots, une image ou une portion d 'Image. Le principe sera toujours identique: Associer à cette zone active l’URL du document qui se substituera au document affiché lorsqu’on cliquera sur cette zone. Les liens activables sont automatiquement mis en couleur et soulignés. Forme générale : texte ou image représentant la zone cliquable Exemple : La zone cliquable est un texte : Cliquez ici la zone cliquable est une image : Les liens Liens internes : Le interne fait référence à une partie se trouvant dans le même document. HTML définit la notion d'ancre pour spécifier l'arrivée d'un lien interne. L’ancre d'arrivée est La zone inactive spécifiant le point d'arrivée d 'un lien hypertexte. C 'est donc une adresse de destination. Pour créer le lien interne il faut tout d’abord définir l’ancre, ensuite spécifier le lien vers cette ancre dans le même document HTML que l’ancre. Forme générale : Définition de l’ancre : texte ou image en guise de point d’arrivée Lien interne vers une ancre : texte ou image en guise de lien Les liens . Lien interne externe : L’ancre d’arrivée d’un lien peut être dans un autre document ; dans ce cas, il s’agit d’un lien interne externe qui permet d’atteindre une partie précise d’un autre document. Dans ce cas, on commence par définir l’ancre d’arrivée, ensuite spécifier le lien dans un autre document. Forme générale : Définition de l’ancre dans le document d’arrivée: texte ou image en guise de point d’arrivée Lien externe vers une ancre dans le document de départ: texte ou image en guise de lien Exemple : Définition de l’ancre : texte ou image en guise de point d’arrivée Lien interne vers une ancre : texte ou image en guise de lien Les liens . Lien Exécutable : Fait référence à un programme exécutable ou à un service de l'Internet (FTP, E-Mail ... ). Exemple : . texte ou image en guise de lien : ce lien permet l’accès au site de la FAO . texte ou image en guise de lien : ce lien permet l’accès au logiciel de messagerie électronique et l’envoi de messages. Les cadres (Frames) Les cadres permettent la mise à jour de plusieurs document HTML dans un même écran du navigateur. La structure générale d'un document divisé en plusieurs zones diffère de celle d'un document classique. Dans un document classique, le corps est inséré dans des balises et Dans le cas des cadres, le corps du document est inséré dans les balises et Attributs de la balise ROWS :Division de la zone en sous-zones horizontales. ROWS= "20%,30%…" COLS : Division de la zone en sous-zones verticales. COLS="40%, 5%, * « Dans une balise on trouve soit l'attribut ROWS, soit l'attribut COLS, mais pas les deux en même temps. BORDER : Modifier l'épaisseur des barres de délimitation. FRAMEBORDER : Pour dessiner des bordures entre les frarnes. Cet attribut peut prendre les valeurs (YES ou NO). FRAMESPACING : Espace entre les cadres en pixels Attributs de la balise La balise caractérise les sous-zone définies par la balise • SRC : URL du document qui va être affiché dans la zone en question • NAME : Pour donner un nom à la zone. Ce nom sera utilisé dans l'attribut TARGET pour indiquer la cible d'un lien. • MARGINWIDTH : Marge gauche et droite, en pixels. • MARGINUEIGHT: Marge du haut et du bas, en pixels. • NORESIZE : Pour empêcher toute éventuelle modification de la taille lors de l'exécution (à l'aide de la souris). • SCROLLING : Spécifie si la zone doit posséder une barre de défilement. Les valeurs peuvent être: YES, NO ou AUTO. Les frames : Exemple L’attribut TARGET sert à spécifier quel cadre un lien hypertexte doit à jour. Le fichier désigné par le lien, s’affichera dans ce cadre. Les liens affichables dans un cadre ont la forme suivante : ’’ Les formulaires • Déclaration d'un formulaire • Attributs principaux ( – ACTION :URL vers laquelle envoyer les données saisies – METHOD: commande HTTP à utiliser pour effectuer l'envoi POST – NAME : nom du formulaire – TARGET : nom de la frame dans laquelle le résultat doit être affiché • toutes les balises HTML sont permises entre  images, tableaux, ... peuvent être inclus dans un formulaire • des formulaires peuvent être insérés à l'intérieur d'un autre formulaire web Les formulaires Déclaration des champs de saisie (exclusivement entre ) NAME : nom du champ de saisie (unique à l'intérieur d'un formulaire) TYPE : type du champ de saisie Types possibles ( TYPE=... ) - TEXT : zone de saisie texte (type par défaut en cas d'omission de TYPE) – SIZE : taille de la zone – RADIO : bouton radio tous les boutons ayant même nom (NAME)  au même groupe dans ce cas, les attributs (VALUE) permettent de les différencier – CHECKBOX : boîte à cocher – SUBMIT : bouton d'envoi des données au serveur – RESET : bouton d'effacement du formulaire Les formulaires • TEXT : nom et prénom a. : Résultat a. nom et prénom • Texte déroulant : TEXTAREA NAME="Impressions" ROWS="5" COLS="30"> Résultat Les formulaires • CHECKBOX Quelle est votre langue maternelle ? Français Anglais Autre Résultat : Quelle est votre langue maternelle ? Français Anglais Autre • RADIO Femme Homme Les formulaires • SELECT La balise SELECT permet de mettre en place des menus déroulant. Avec l'attribut SIZE="nombre d'options du menu", le menu est présenté déjà déroulé Exemple : De quel continent êtes-vous ? <SELECT NAME="CONTINENT" SIZE="3"> Afrique Amérique Asie Europe Océanie Les formulaires • SUBMIT La balise SUBMIT crée un bouton qui sert à déclencher l'action associée au formulaire, en général l'envoyer au serveur pour traitement. L'attribut VALUE="Message" indique le texte à placer dans le bouton. Exemplea. : Envoyer RESET La balise RESET crée un bouton qui sert à effacer ce que vous avez rempli dans un formulaire, sans l'envoyer. Exemple : Résultat : Effacer Les formulaires Chapitre 6 Les CSS : Cascading Style sheets Avantages • dissocier le contenu d'un document de sa forme • un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ; • la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ; • plusieurs mises en forme différentes peuvent être proposées pour un même document sans que celuici ne soit répliqué en autant d'exemplaires ; • le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence ; Avantages • les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent) ; • les balises donnent une indication sur la nature du contenu et cette indication pourra être utilisée par un moteur de recherche. • Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations et ainsi augmenter la créativité des écrivains du Web. Trois localisations possibles pour les définitions de styles • A l‟intérieur de , dans une balise, avec l'attribut STYLE • Pour une page HTML : dans l'en-tête, après la balise TITLE • Pour un ensemble de pages, dans un fichier externe Définition du style : A l'intérieur des balises Faculté des Sciences Faculté des Sciences peu conforme à l'esprit des feuilles de style (définir un style déterminé valable pour la globalité du document Définition du style : A l'intérieur des balises <STYLE TYPE="text/css"> <STYLE type= "text/css" > Faculté des Sciences Faculté des Sciences Définition du style : Fichier externe avertit le browser qu'il faudra réaliser un lien l'information est du texte et du genre cascading style sheets (css). précise qu'il y trouvera une feuille de style externe. le chemin d'accès et le nom du fichier à lier Définition du style : Fichier externe Définition de monstyle.css html,body,p,ul,li,td { font-size : 10pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } h1 { font-size : 20pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : navy; text-align: center; } h2 { font-size : 14pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : blue; } a:link {color: green; textdecoration:underline;} a:visited {color: gray; textdecoration:underline;} Notion de classe • Définition de la classe .Style1 {font-size : 20pt; font-family : Verdana; color : navy; text-align: center; } .Style2 { color: green; } .Style3 { color: blue; } • Dans le document HTML Texte Texte Texte Pseudo-classe Un ensemble d'éléments qui répondent à un même critère de contexte forme  Applicable concrètement à la balise A Celle ci peut connaître plusieurs contextes de formes selon que le lien est inactif, visité, ou en train d'être visité.  on peut définir alors pour chacun des états de la balise une mise en forme particulière. Exemple: A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;} A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;} A:active {color:red;} A:hover {color:red; text-decoration:none;} Les ID Les ID servent à remplacer les classes lorsqu'il y a du JavaScript dans la page, car le JavaScript emploie lui aussi la syntaxe nom.nom (nom-point-nom). La syntaxe est alors: #nom_ID { propriété de style: Valeur; propriété de style: Valeur ...} On l'appellera de la manière suivante: ... On ne peut faire appel qu'à un seul même ID par page! Déf : #essentiel{ ... } Appel texte Les balises SPAN et DIV Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <SPAN> et La balise <SPAN> La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS. <SPAN class=Nom_de_la_classe> Texte La balise L'idée est la même pour la balise DIV, cependant au lieu de s'appliquer à quelques mots dans un paragraphe, elle s'applique sur plusieurs paragraphes. paragraphes • Les feuilles de style en cascade En cas de concurrence entre plusieurs éléments de style  notion de "cascade" ou d'ordre de priorité. • La concurrence provient des différentes possibilités de localisation de feuilles de style : – CSS importée (dans un fichier externe avec l'extension css) – CSS Globale (dans la balise HEAD du document) – CSS Intra-lignes (dans le BODY du document) Règle de priorité appliquer pour la présentation du document la feuille de style la plus proche de l'élément. un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe. Chapitre 7 Le langage Javascript Script CGI • Un CGI (Common Gateway Interface) est un programme exécuté du côté serveur, permettant de cette façon l'affichage de données traitées par le serveur (exemple : envoie de formulaires). • La plupart de ces scripts sont écrits en Perl, java, C ou C++. • Le serveur peut traiter des centaines de scripts CGI alors que l’ordinateur du client reste passif. Java et Javascript Javascript Java Langage interprété Langage pseudo-compilé (chargement d'une machine virtuelle) Code intégré au HTML Code (applet) à part du document HTML, appelé à partir de la page Langage peu typé Langage fortement typé (déclaration du type de variable) Liaisons dynamiques: les références des objets sont vérifiées au chargement Accessibilité du code Liaisons statiques: les objets doivent exister au chargement (compilation) Sûr: ne peut pas écrire sur le disque dur Sûr: ne peut pas écrire sur le disque dur Confidentialité du code Javascript • JS est un langage de programmation structurée qui concourt à enrichir le HTML, à le rendre plus "intelligent" et interactif. • Le code JS est intégré complètement dans le code HTML, et interprété par le navigateur client • JS contient des gestionnaires d'événement : il reconnaît et réagit aux demandes de l'utilisateur, comme un clic de la souris, une validation de formulaire, etc... Javascript • Mais c'est un langage limité : • ce n'est pas un langage de programmation à part entière, indépendant. • c'est un langage de script, dépendant de HTML, c'est une extension de HTML. Sa syntaxe ressemble à Java, car elle reprend celle du langage C, mais il est en fait très différent. Java est un langage complet , compilé et complètement autonome du langage HTML • ce n'est pas véritablement un langage orienté objet (pas d'héritage de classe , ni de polymorphisme ..) Le modèle objet de document • Définition d’un modèle objet de document (DOM) Les méthodes • Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire exécuter à un objet. Les méthodes des objets du navigateur sont des fonctions définies à l'avance par les normes HTML, on ne peut donc pas les modifier. • Ce sont des commandes dont les comportement sont rattachés à un objet particulier. • Exemple : document.write("bonjour") Les événements • Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. • L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. • Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ... • Exemple : onClick=" window.alert(‘bonjour’)" Gest. événement onBlur Les événements provoqué par l'utilisateur qui ... sur les objets ... text, textarea, select onClick enlève le focus du composant change la valeur d'un texte ou d'un composant à options clique sur un composant ou un hyperlien onFocus donne le focus au composant onLoad charge la page dans le navigateur onMouseOut la souris quitte un lien ou une ancre onMouseOver bouge la souris sur un lien ou une ancre onReset efface les saisies d'un formulaire balises BODY, FRAMESET balises , balises , bouton reset onSelect sélectionne une zone d'édition d'un formulaire text, textarea onSubmit soumet un formulaire bouton submit onUnload quitte la page balises BODY, FRAMESET onChange text, textarea, select button, checkbox, radio, reset, submit text, textarea, select L’emplacement des scripts • Dans la balise script <SCRIPT language="Javascript"> Placé à l’intérieur de .. ou .. • Dans un fichier externe <SCRIPT LANGUAGE="Javascript" SRC="fichier.js"> • Grâce aux événements L‟objet Window Création d‟une fenêtre <script language="JavaScript"> window\openwindow.html L‟objet Window Création d‟une fenêtre <script language="JavaScript"> window\openwindow2.htm L‟objet Window Création d‟une fenêtre (options) option description directories = yes/no Affiche ou non les boutons de navigation location = yes/no Affiche ou non la barre d'adresse menubar = yes/no status = yes/no Affiche ou non la barre de menu (fichier, edition, ...) Définit si la taille de la fenêtre est modifiable ou non Affiche ou non les ascenceurs (barres de défilement) Affiche ou non la barre d'état toolbar = yes/no Affiche ou non la barre d'outils width = largeur (en pixels) height = hauteur (en pixels) Définit la largeur resizable = yes/no scrollbars = yes/no Définit la hauteur L‟objet Window Boites de dialogue : Message d‟alerte <TITLE> Voici une page contenant du Javascript <SCRIPT language="Javascript"> window\alert.htm L‟objet Window Boites de dialogue • confirm("Chaîne de caractères") • Exemple 1: Affichage du message avec l’ouverture de la page <TITLE> Voici une page contenant du Javascript <SCRIPT language="Javascript"> L‟objet Window Boites de dialogue • confirm("Chaîne de caractères") • Exemple 2: Affichage du message avec l’ouverture de la page et ouverture d’une nouvelle fenêtre à la validation <TITLE> Voici une page contenant du Javascript <SCRIPT language="Javascript"> L‟objet Window Boites de dialogue • prompt("Posez ici votre question", "chaîne par défaut") • Exemple: Poser une question à l’ouverture de la page <TITLE> Voici une page contenant du Javascript <SCRIPT language="Javascript"> L‟objet Window Boites de dialogue Exemple 3: <SCRIPT language="Javascript"> Bonjour ") } // --> L‟objet Window Boites de dialogue • prompt("Posez ici votre question", "chaîne par défaut") • Exemple: Poser une question à l’ouverture de la page <TITLE> Voici une page contenant du Javascript <SCRIPT language="Javascript"> L‟objet Window Boites de dialogue prompt("Posez ici votre question", "chaîne par défaut") Exemple 2: <SCRIPT language="Javascript"> L‟objet Document [window.]document.propertyName [window.]document.methodName([parameters ]) • La méthode document.write( ) Ceci est du Html <SCRIPT LANGUAGE="Javascript"> Et ceci du Javascript"); //--> BODY> <SCRIPT LANGUAGE="JavaScript"> po = document.title document.write(po) L‟objet Document Propriétés action alinkColor() couleur des liens activés vlinkColor() couleur des liens visités linkColor couleur des liens qui ne sont pas encore visités URL du document actif URL referrer lastModified URL du document qui a appelé le document actif date de la dernière modification du document links[] tableau de toutes les balises images[] tableau de toutes les balises forms[] tableau de toutes les balises applets[] tableau de toutes les balises <APPLET> Les formulaires zone de texte Accès : window.document.forms[0] window.document.nom_du_formulaire Accès à un objet du formulaire : window.document.nom_du_form.nom_du_champ <SCRIPT LANGUAGE="javascript"> function controle(form1) { var test = document.form1.input.value; alert("Vous avez tapé : " + test);} Les formulaires Bouton radio <SCRIPT language="javascript"> function choixprop(form3) { if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) } if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + form3.choix[1].value) } if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + form3.choix[2].value) } } Entrez votre choix : Choix numéro 1 Choix numéro 2 Choix numéro 3 Les formulaires Les boutons case à cocher (checkbox) <script language="javascript"> function reponse(form4) { if ( (form4.check1.checked) == true && (form4.check2.checked) == true && (form4.check3.checked) == false && (form4.check4.checked) == true) { alert("C'est la bonne réponse! ") } else {alert("Désolé, continuez à chercher.")} } Entrez votre choix : Choix numéro 1 Choix numéro 2 Choix numéro 3 Choix numéro 4 Utilisation des variables •Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un programme. •On y fait référence par le nom de cette variable. •Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe_ et se composer de lettres, de chiffres et des caractères _ et $ (à l'exclusion du blanc). • Le nombre de caractères n'est pas précisé. •Javascript est sensible à la casse. Attention donc aux majuscules et minuscules! Related Documents Mohamed Mediouni 11 June 2020 8 Mohamed Mediouni 4 June 2020 10 Mohamed Mediouni 13 June 2020 2 Mohamed Ben Ali Mediouni April 2020 12 Mohamed Mediouni 7 June 2020 8 Mohamed Mediouni 5 June 2020 5 More Documents from "Bryan Gross" Mohamed Mediouni 9 June 2020 6 Mohamed Mediouni 14 June 2020 3 Mohamed Mediouni 6 June 2020 4 Mohamed Mediouni 15 June 2020 6 Mohamed Mediouni 11 June 2020 8 Mohamed Mediouni 7 June 2020 8 Copyright © 2024 PDFCOKE.