Programmation client web : cours CSS

Programmation client web : cours CSS

-

Documents
52 pages
Lire
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

Description

Modèles de programmation via le service Web, Protocole HTTP, HTML, BALISES, Cascading Style Sheet, Javascript, Applet java...

Sujets

Informations

Publié par
Nombre de visites sur la page 169
Langue Français
Signaler un problème
Programmationclient web cours5 :CSS
 
Plan
FModèles de programmation via le service Web FProtocole HTTP FHTML lBALISES FCascading Style Sheet FJavascript FApplet java
IPW : programmation côté client
 
2
Langage HTML FLangage à balises : lbalise : une instruction de mise en formeUne lUne balise : contient des textes et/ou des autres balises autorisées lUne balise : structure le texte lAvant : une balise : mise en forme FNavigateur : recherche des balises et interprétation l<NOM_DE_BALISE>….</NOM_DE_BALISE> l& (caractères spéciaux) : "&#code ascii;". Ex : u&lt; / < ; &gt; / >il y a : &amp; /& ; u&eacute; / é (note les caractères s'obtiennent par la &+lettre+accent; les accents étant acute, grave, circ, cedil, tilde et aussi les ligatures avec lig, e.g. &aelig; / æ). FLiens hypertexte : lChaque document HTML peut être représenté par un URL comme une ressource sur Internet. lUn document HTML peut contenir des liens vers les autres documents HTML ou les autres sources de données (multimédia, programme) FOutil de validation : http://validator.w3.org IPW : programmation côté client3
Fichier HTML minimum
FVersion html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML> <HEAD> <TITLE> </TITLE> </HEAD>
<BODY> </BODY> </HTML> 
IPW : programmation côté client
 
4
Propriétés des Balises html
FPropriétés générales (mais pas systématiques)
Fid, class (document-wide identifiers) Flang (language information), dir (text direction) Ftitle (element title) Fstyle (inline style information )
Fonclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
IPW : programmation côté client
 
5
<meta name="xxx" ... >
description
keywords
author
identifier-url
date-creation-yyyymmdd
date-revision-yyyymmdd
reply-to publisher copyright
generator
Balises Meta (entêtes)
Description Description du site en une phrase de préférence.
Liste de mots clés
Auteur du site
URL de votre site
Date de la création de votre site
Date de la dernière modification
Votre e-mail
Celui qui publie votre site
Copyright(s) de votre site
Nb. Car.Exemple <meta name="desciption" content="HTML -200 LePortail dédié à l’option IPW"> <meta name="keywords" content="html, 500 xml,sgml, tags"> <meta name="author" - content="imaginance"> <meta name="identifier-url" - content="http://deptinfo.unice.fr/"> <meta name="date-creation-yyyymmdd" - content="20060525">"> <meta name="date-revision-yyyymmdd" - content="20070717"> <meta name="reply-to" - content="webmaster@allhtml.net"> - <metaname="publisher" content="unice"> - <metaname="copyright" content="unice">
Logiciels utilisés pour la création<meta name="generator" content="vi, de votre site- gedit,openoffice">
IPW : programmation côté client
 
6
Balises Meta (entêtes)
FRobots : outils des moteurs de recherche (référencement) lPour indexer toutes les pages de votre site ( vers lesquels vous avez placé des liens), utilisez la propriétéAll: <META NAME="Robots" CONTENT="All"> lEn interdire l'accès aux robots grâce à l'attributNone. lAvecIndex, votre page sera indexée aussitôt. Tandis que si vous mettezNoindex, elle ne sera pas indexée. lSi le robot rencontreFollow, les destinations des liens sont indexées. Mais si vous écrivezNofollow, le robot ne gardera pas mémoire de vos liens. lAvecNoimageindex, les images d'une page déjà indexée ne le seront pas. Etfreesurveyempêche de suivre les liens pointant vers les images.
<meta name="xxx" ... >Description Nb.Car. Exemple Indique la revisite du robot après<meta name="revisit-after" content="15 revisit-after njours -days"> <meta name="category" category Catégoriede votre site (annuaire)- content="internet"> <meta name="robots" content="index, robots Dirigerle robot- follow">
IPW : programmation côté client
 
7
Balises Meta (entêtes)
FMETA : Le rafraîchissement et la redirection lfaire recharger une page périodiquement (toutes lesPouvoir nsecondes ) <META HTTP-EQUIV="refresh" CONTENT="n"> lRediriger le navigateur vers un autre site : <META HTTP-EQUIV="refresh" CONTENT="n; URL=Mettrez ici l'URL souhaitée"> lHTTP-EQUIV : tout d’une requête http… uexpires :date limite d'expiration de vos pages (cache) <meta http-equiv="expires" content="wed, 06 sept 2006 12:00:00 gmt"> Fdonne la base de l'adresse URL qui sera placée devant<BASE HREF= ...> les références relatives dans le document, de façon à ce que hors contexte les fichiers soient cherchés à l'adresse : BASE adresse relative
IPW : programmation côté client
 
8
Balises Meta (LINK)
FLINK : lien (uniquement dans l’entête) lHREF=adresse lrel et rev = alternate | appendix | bookmark | chapter | contents | copyright | glossary| help | home | index | next | prev | section | start | stylesheet | subsection urelation entre ce document et le document ciblerel : urev : relation entre le document cible et ce document ltype = MIME_TYPE (text/css ou image/gif ou …) ltarget = _blank | _self| _top | _parent (frameset) lmedia = cf transparent suivant lcharset : encodage de la cible (par défaut "ISO-8859-1") lhreflang : définit la langue du document cible Fnon standard ? <link rel="icon" href="ipw.png" type="image/png">
IPW : programmation côté client
 
9
Type de Media Fall lconvient pour tous les appareils ; Faural lparole. Voir les détails fournis dans le chapitre sur les feuilles de style auditivesdestiné aux synthétiseurs de Fbraille laux appareils braille à retour tactile ;destiné Fembossed ldestiné aux appareils à impression braille ; Fhandheld lpetits écrans, monochromes et à bande passante limitée) ;destiné aux appareils portatifs (typiquement ceux avec Fprint ldestiné à un support paginé opaque et aux documents vus sur écran en mode de prévue avant impression. Consulter le chapitre sur les médias paginés pour des informations sur les questions de mise en forme spécifiques à ceux−ci ; Fprojection len projection, par exemple avec des projecteurs ou des impressions pour desdestiné aux présentations transparents. Consulter le chapitre sur les médias paginés pour des informations sur les questions spécifiques à ceux−ci ; Fscreen ldestiné principalement aux moniteurs couleurs ; Ftty lgrille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifsdestiné aux médias utilisant une aux capacités d'affichage réduites. Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média ; Ftv ldestiné aux appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé). IPW : programmation côté client10
Plan
FModèles de programmation via le service Web FProtocole HTTP FHTML lBALISES FCascading Style Sheet FJavascript FApplet java
IPW : programmation côté client
 
11