Beruflich Dokumente
Kultur Dokumente
1
06/11/2008
<html><head><TITLE>GED</TITLE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
BODY
<META NAME="AUTHOR" CONTENT="Scanfile France">
<META NAME="OWNER" CONTENT="info@scanfile.fr"> Tout ce qui est contenu entre <BODY>
<META NAME="SUBJECT" CONTENT="gestion electronique de documents"> et </BODY> sera affiché à l'écran, c'est
<META NAME="DESCRIPTION" CONTENT="Scanfile propose des logiciels de gestion
electronique de documents, de dematerialisation et de workflow et des
la partie intégrante de votre document,
scanners de production ged"> c'est là que vous saisirez votre texte,
<META NAME="KEYWORDS" CONTENT="gestion électronique documents, logiciel
ged, logiciel geide, logiciel ged scanfile, logiciel geide filedirector">
insérerez vos images et établirez vos
<META NAME="identifier-url" CONTENT="http://www.scanfile.fr"> liens.
<META NAME="REVISIT-AFTER" CONTENT="7 DAYS">
<META NAME="LANGUAGE" CONTENT="FR">
<META NAME="COPYRIGHT" CONTENT="Scanfile France">
<META NAME="ROBOTS" CONTENT="All">
</head>
2
06/11/2008
BACKGROUND
Permet de mettre une image dans le fond de la page. COULEUR
Attention à la couleur d'écriture et celle des liens, en fonction de la couleur du La couleur que vous voulez obtenir peut être décrite de deux façons:
fond. On peut également choisir une couleur de fond proche de celle de l'image. avec le nom anglais de la couleur, ou beaucoup plus précisément au moyen
<BODY BACKGROUND="nom_de_fichier.ext"> d'un symbole # et de 6 chiffres (en hexadécimal - base16).
Exemple : <BODY BACKGROUND="cahier.gif"> Tout d'abord le format de la commande de couleur est: "#RRVVBB"
# est le symbole qui permet de différencier une valeur d'un nom de
BGCOLOR couleur.
Permet de changer la couleur de l'arrière plan sans avoir à charger une image, là RR la quantité de rouge contenue dans la couleur.
aussi, il faudra veiller à ce que le texte et les liens soient visibles dans tous les VV la quantité de vert contenu dans la couleur.
cas. Par défaut, le fond de page est en blanc, le texte en noir, les liens en bleu BB la quantité de bleu contenu dans la couleur.
souligné, les liens activés en rouge et les liens visités en violet. - La couleur: #000000 correspond au noir (00 de rouge, 00 de vert et 00 de
bleu).
TEXT : Permet de changer la couleur du texte, par défaut cette couleur est en
- La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)
principe le noir, mais elle peut-être changée dans les préférences du browser. - La séquence de numérotation hexadécimale est (de min. à max.): 0 1 2 3
4 5 6 7 8 9 A B C D E F.
LINK : Permet de changer la couleur des liens.
Exemple:
ALINK : Permet de changer la couleur des liens sélectionnés.
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF">
VLINK : Permet de changer la couleur des liens déjà visités. Le fond sera noir, le texte blanc et les liens en rose.
SON
Insérer un son en fond de page
3
06/11/2008
4
06/11/2008
HTML HTML
HTML utilise le jeu de caractères ISO Latin-1 codés sur 8
bits et les caractères ASCII codés sur 7 bits. Avec cette © © ©
dernière codification les caractères accentués sont
représentés par les séquences suivantes : ® ® ®
° ° °
é é
« « «
É É
è è » » »
ê ê
µ µ µ
à à
ï ï ¶ ¶ ¶
ç ç ¼ ¼ ¼
ñ ñ
½ ½ ½
Æ Æ
¾ ¾ ¾
5
06/11/2008
Un lien vers une autre partie du document ou vers un autre document peut
être de plusieurs nature, du texte, de l'image, une partie d'une image voire
même le document tout entier...
<A HREF="xxx">
Début de lien qui finit par </A>
Tout ce qui se trouve entre les deux est considéré comme zone sensible, et
un click sur les objets situé entre ces deux bornes provoquera l'action
contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page)
6
06/11/2008
<STYLE>
A:LINK { color: #000000; text-decoration: none }
Listes simples
A:VISITED { color: #000000; text-decoration: none } Listes numérotées
A:HOVER { color: #ffffff; text-decoration: none } Listes de définition
</STYLE>
7
06/11/2008
Liste de définition
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2
<DL>
<DT> Terme 1 à définir
<DD> Définition du terme 1 Syntaxe, Structure, mise en forme…
<DT> Terme 2 à définir
<DD> Définition du terme 2
<DD> suite du terme 2
</DL>
l'imbrication de listes est bien sûr possible
8
06/11/2008
9
06/11/2008
E-mail est un lien de messagerie. Les titres enseignant, Public et Objectifs représentent une liste
de définition
ISD renvoie à l’adresse URL : http://www.isd.rnu.tn Site de M. Mkadmi est un lien hypertexte qui renvoie à l’adresse http://amkadmi.neuf.fr.
La largeur du tableau est 75%, Pour la photo, la taille est de "84" de largeur et de "81" d’hauteur. Le tableau est de largeur 75%. La marge intérieure des cellules est de 6 et l’espacement entre les cellules est 6
Les formulaires
Formulaires et interactivité
récupérer des données à partir d'une page HTML
dans une boite e-mail (questionnaires, payement
électronique,…)
entrer en communication avec un système ou une
base de données sur le serveur (bases de données,
Structure, Balises… systèmes de recherche documentaires, moteurs de
recherche,…).
Deux objectifs
collecter des informations sur les utilisateurs
transmettre des données à traiter sur le serveur
10
06/11/2008
<form>Formulaire</form>
3 attributs :
ACTION : type d'action à déclencher (adresse é-mail Zone texte 1
par exemple dans laquelle on reçoit les données du
formulaire) <INPUT TYPE="text" NAME="nom" SIZE="n">
METHOD : définit la méthode de transfert des données Nom de famille :
(2 valeurs : GET et POST). Dans le cas de la réception
dans une boite de courrier électronique, la valeur
<input type="text" size="20" name="NFAMILLE">
POST est la seule valeur possible. <P>Nom de famille :
ENCTYPE : définit le format de codage des données si <input type="text" size="80" name="NFAMILLE">
le protocole du serveur n'a pas imposé le sien
(text/plain dans le cas des formulaires classiques).
Liste déroulante
Zone texte 2 <SELECT NAME="nom">
<OPTION>élément1
<OPTION>élément n
</SELECT>
<TEXTAREA NAME="nom" ROWS= "i" COLS= "j" ></TEXTAREA>
11
06/11/2008
12
06/11/2008
Les FRAMES
Frames = cadres = fenêtres
<FRAMESET ROWS="10%,*,10%"></FRAMESET>
<FRAMESET COLS="10%,60%,*"></FRAMESET>
13
06/11/2008
14
06/11/2008
CSS
15
06/11/2008
Le langage informatique CSS (Cascading Style Sheets : feuilles La syntaxe d'un style est toujours la même, elle précise la balise à
de style en cascade) est utilisé pour décrire la présentation d'un laquelle le style va s'appliquer, et les différents attributs du style.
document structuré écrit en HTML ou en XML, et c'est le World Les attributs sont enfermés entre deux accolades ou 2 guillemets
Wide Web Consortium (W3C) qui en a la direction. (précédés de Style=) selon les cas, et chacun des attributs est
séparé par un point virgule. On donne la valeur de l'attribut par la
syntaxe suivante "nom de l'attribut:valeur de l'attribut".
balise { propriété de style: valeur; propriété de style: valeur
}
L'un des objectifs majeurs de CSS est de proposer une stylisation
indépendante de la structure du document. HTML, par exemple,
ne décrit que l'architecture interne, tandis que CSS décrit tous Pour faire le lien entre un fichier html et une feuille de style,
les aspects de la présentation. Cette séparation fournit un c’est dans la partie entête du document HTML qu’on ajoute
certain nombre de bénéfices, permettant d'améliorer cette ligne
l'accessibilité, de changer plus facilement de structure et de <LINK href="fichier.css" type=text/css rel=stylesheet>
présentation, et de réduire la complexité de l'architecture d'un
document.
16
06/11/2008
< xx-small | x-
Nom Description Définition Exemple Remarque
small | small |
P { font-size: 12pt; }
medium | large |
gill et helvetic BLOCKQUOTE {font-size:
x-large | xx-
sont les noms des font-size Taille de la police larger } défaut : medium
large> | < larger
polices, sans-serif EM { font-size:150%}
BODY {font-family: | smaller>
nom et famille de [[<nom> | est la famille. EM { font-size:1.5em}
font-family gill, helvetica, sans- |<taille> |
la police <famille>],*] Si un nom <pourcentage%>
serif }
comprend des
espaces il doit P { font: 12pt/14pt sans-
être coté. serif }
[ <font-style> ||
Permet de P { font: 80% sans-serif }
<font-variant> ||
style normal, regrouper les P { font: x-large/110% défaut : dépend
normal | italic | H1, H2, H3{font- <font-weight> ]?
font-style italique et défaut : normal différentes "new century schoolbook", de la
oblique style: italic } font <font-size>
oblique propriétés de serif } configuration du
[ / <line-height>
polices en une P { font: bold italic large navigateur
style petites ]?
H3 {font-variant: ligne Palatino, serif }
font-variant polices ou normal | small-caps défaut : normal <font-family>
small-caps } P { font: normal small-
normal
caps 120%/120% fantasy }
défaut : normal
normal | bold | P { color: red }
Souvent des noms
bolder | lighter | 100 color couleur d'un texte <couleur> EM{color:rgb(255,0,0)} défaut : black
Epaisseur de la EM {font- logiques
font-weight | 200 | 300 | 400 | EM { color: #f00 }
police weight:bolder } remplacent les
500 | 600 | 700 | 800
nombres donnés background- couleur du fond <color> | H1 { background-color: défaut :
| 900
ici color d'écran transparent #F00 } transparent
17
06/11/2008
18
06/11/2008
permet à un
regroupe toutes
<border-top- défaut :aucune élément d'être none | left |
les propriétés des
width> || <border- H1 { border-left: les valeurs omises
clear H1 { clear: left } défaut : none
border-left bordures gauches: cadré sur le côté right | both
style> || thick solid red } sont égales aux spécifié
épaisseur, style et
<couleur> valeurs par défaut
couleur spécifie où
block | inline | P { display: block
display l'élément est défaut : none
défaut list-item | none }
regroupe toutes <border-width> || affiché
P { border: solid :aucune toutes les
border les propriétés des <border-style> || type d'espace normal | pre | PRE { white-
red } bordures sont white-space défaut : normal
bordures <color> blanc nowrap space: pre }
identiques
permet de donner disc | circle |
<longueur> |
la largeur d'un IMG.icon { width: définit le type square | decimal
width <pourcentage> | défaut : auto OL { list-style-
élément texte ou 100px } de | lower-roman |
auto type: lower-
image list-style-type numérotation, upper-roman | défaut : disc
roman } /* i ii
permet de donner de bullet dans lower-alpha |
iii iv v etc. */
height
la longueur d'un
<longueur> | auto
IMG.icon { height:
défaut : auto
les listes upper-alpha |
élément texte ou 100px } none
image
permet de
IMG.icon { remplacer les
permet de cadrer
float: left;
UL { list-style-
l'élément là où il types de
float left | right | none margin défaut : none list-style-image <url> | none image: défaut : none
apparaît ou à numérotation de
-left: 0; url(ungi.gif) }
gauche ou à droite list-style-type
}
par une image
19
06/11/2008
Corrigé
Style.css
body {background-color:gray;color:blue} Références bibliographiques
A {color:red}
h1 {text-align:left;color:black;font-family:verdana;font-size:15px}
h2 {text-align:center;color:white}
table {width:75%;background-color:yellow}
_______________________________________
Style.html (sans mise en page) http://www.w3.org
<html>
http://www.w3.org/html/
<head><link href="style.css" type="text/css" rel="stylesheet"></head>
<body> http://www.w3.org/Style/CSS/
<h1>
Les feuilles de style CSS</h1>
<h2>Syntaxe</h2>
<table>
<tr><td>Propriétés de style<td>exemple
<tr><td>color, font-family, font-style, font-size...<td>body {background-
color:yellow}
</table>
</html>
20