Notes de cours Technologie et programmation Web
|
|
|
- Bertrand Landry
- il y a 8 ans
- Total affichages :
Transcription
1 Notes de cours Technologie et programmation Web Mohamed BENJLAIEL Maître-assistant en Informatique L3I Informatique, Images et Intéraction Université de La Rochelle, Avenue Michel Crépeau, La Rochelle, France Faculté des sciences de Gafsa REGIM Groupe de REcherche sur les Machines Intelligentes Université de Sfax, Ecole Nationale d Ingénieurs de Sfax BP. W Sfax Tunisie
2 HTML HTML (Hyper Text MarkUp Language) C est est un langage de balisage hypertexte servant à la publication de pages web sur Internet. Permet la description des pages web Structure Affichage Et liens Mis au point par Tim Berners-Lee en 1989 HTML est basé sur SGML(Standard Generalized Markup Language) Evolution du HTML HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML 5.0 Texte de base, images, liens hypertextes Formulaires de saisie Justification (gauche, centre, droite) -Tableaux Équations mathématiques Feuilles de style Plus de performance avec de nouvelles fonctionnalité 2
3 Modèle client serveur requête Client Web internet Serveur réponse Affichage de la page URL? Socket TCP/IP «connecteur réseau» ou «interface de connexion» Recherche du fichier sur le disque Préparation de la réponse utilisateur Disque Document Html 3
4 Structures principales d un document HTML Document HTML <HTML> <HEAD> <TITLE>Exemple de document HTML</TITLE> </HEAD> <BODY> <H1>Mon 1er document HTML</H1> <P> Ceci est un document HTML avec un lien hypertexte <A HREF=" site</a> </P> </BODY> Entête Corps </HTML> 4
5 HTML : Exemple 5
6 Entête : <HEAD> </HEAD> Rôle Fournir des informations au sujet du document Position en début de document (après la balise <HTML> et avant la balise <BODY>) Contenu <TITLE> </TITLE> Titre de la fenêtre dans laquelle la page s'affiche <META NAME="..." CONTENT="..."> Permet de spécifier des méta-données sous la forme de couple attribut-valeur (NAME- CONTENT) Ces méta-données peuvent être exploitées, par exemple, par les moteurs de recherche pour effectuer des recherches sur le contenu effectif du document 6
7 Entête : <META > <META NAME="auteur" CONTENT="benjlaiel"> <META NAME="keywords" CONTENT="page personnelle, informatique"> <META HTTP_EQUIV="Content-Type" CONTENT="text/html; charset=iso "> Permet de spécifier le type de contenu : Type de document Codage des caractères <META HTTP-EQUIV="Content-language" CONTENT="fr"> permet d indiquer la langue du contenu du document <META HTTP-EQUIV="refresh" CONTENT="Délai;url=AdressePage"> permet de passer automatiquement à une autre page après un certain délai : Délai = temps (en seconde) avant l appel d une autre page AdressePage = adresse de la page à charger 7
8 Corps du document : <BODY>... </BODY> Rôle Délimiter le corps du document Permet de définir l'apparence du fond de l'écran et la couleur des éléments textuels Position Placé immédiatement après la balise </HEAD> Remarques 1 seule balise <BODY> par page SAUF pour les pages comprenant des frames La balise peut s'employer seule ou avec des options </BODY> est placé immédiatement avant la balise </HTML> 8
9 Les options du BODY <BODY BGCOLOR="#RRVVBB" BACKGROUND= "Adresse_Image" LINK="#RRVVBB" VLINK="#RRVVBB" TEXT="#RRVVBB" ALINK="#RRVVBB"> BGCOLOR : couleur de fond de la fenêtre BACKGROUND : image de fond (répétée sous forme de mosaïque) TEXT : couleur du texte ordinaire * LINK : couleur du texte/de la bordure d'une image qui est un lien * VLINK : couleur du texte/de la bordure d'une image qui est un lien amenant sur une page déjà vue * ALINK : couleur prise par un lien tant qu'on clique dessus (peu utilisé) * = si omis, utilisation des couleurs standards (définies dans les préférences utilisateur) Les couleurs de base : 9
10 Mise en forme de titres <h1> </h1> (de 1 à 6) <html> <head> </head> <body> </body> </html> <h1>titre 1</h1> <h2>titre 2</h2> <h3>titre 3</h3> <h4>titre 4</h4> <h5>titre 5</h5> <h6>titre 6</h6> 10
11 Mise en forme des caractères Les styles Gras : Italique : Souligné : <B> </B> <I>... </I> <U> </U> Possibilité de fixer la taille de police d une page web <BASEFONT SIZE="taille"> (avec 1 taille 7) Si cette balise n'est pas utilisée, la taille par défaut des caractères est fixée à 3. 11
12 Mise en forme des caractères Spécification d une police locale <FONT FACE="police" COLOR="#RRVVBB" SIZE="s +s -s" "> </FONT> Exemple <FONT FACE=" Arial " COLOR="#0000dd"> SIZE="4"> </FONT> SIZE : taille de la police 1 7 (taille absolue) +1, (taille relative par rapport à la valeur par défaut) 12
13 Mise en forme des paragraphes <P ALIGN="LEFT CENTER RIGHT JUSTIFY"> </P> <BR> Alignement des paragraphes situés <P ALIGN= > et </P> Pour passer (ou sauter) une ligne, utiliser des <BR> Retour à la ligne Pas de balise fermante! <BR><BR> : 2 retours à la ligne = 1ligne d'espacement <html> <head> </head> <body> <p>lorem ipsum... egestas</p> <p>aenean eleifend... ornare.</p> <p>aenean odio neque... id.</p> </body> </html> 13
14 Le codage des caractères spéciaux De la forme : &entité; Espace insécable ± ± Ø Ø ² 2 ³ 3 & ¼ ¼ ½ ½ ¾ ¾ à à À À œ œ é é É É ë ë î î Î Î ç ç " " ß ß ñ ñ < < > > µ µ & 14
15 Les listes Il y a deux types de liste Les listes ordonnées : liste numérotée (<OL>... </OL>)) Les listes non-ordonnées :liste à puces(<ul>... </UL>) <LI> Marqueur des éléments d une liste Syntaxe : <ul> <li>élément 1</li> <li>élément 2</li> <li>élément 3</li> </ul> <ol> <li>élément 1</li> <li>élément 2</li> <li>élément 3</li> </ol> Option TYPE="disc circle square" dans <UL> Permet de choisir la forme de la puce 15
16 La balise Div La balise <div> est un conteneur (à appréhender comme un cadre) qui peut inclure tous les balises html (tels que les paragraphes les tableaux, les listes, les images..., et également d'autres divisions). Exemple d'une div de hauteur fixe contenant une liste entrainant l'apparition d'une scrollbar : <div style="width:300px; height:120px; overflow:auto; border:solid 1px black;"> <ul> <li>elémént 1</li> <li>elémént 2</li> <li>elémént 3</li> <li>elémént 4</li> <li>elémént 5</li> <li>elémént 6</li> <li>elémént 7</li> <li>elémént 8</li> <li>elémént 9</li> <li>elémént 10</li> <li>elémént 11</li> <li>elémént 12</li> </ul> </div> 16
17 Création de lignes horizontales <HR SIZE="s" WIDTH="w w%" ALIGN="LEFT CENTER RIGHT" COLOR="#RRVVBB" NOSHADE > SIZE : épaisseur en pixel de la ligne WIDTH : largeur de la ligne. ALIGN : alignement à gauche au centre à droite dans la fenêtre <HR> : Utilisée sans option, cette balise produit une ligne grise ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre COLOR="#RRVVBB" :Option valable avec Internet Explorer Permet de spécifier la couleur de la ligne NOSHADE : Permet de désactiver l'ombrage de la ligne 17
18 Les liens hypertextes (hyperliens) Donnent accès à une autre page html, une photo, un document, une adresse de courriel, un fichier exécutable sur serveur. Syntaxe : <a href= > </a> Exemple : <html> <head> </head> <body> Sur le site du cours <a href=" vous y trouverez... </body> </html> 18
19 Les liens hypertextes (hyperliens) suite Liens absolus Un lien absolu indique l'adresse complète du fichier. Il est généralement utilisé pour afficher une page d'un autre site. Exemples : <a href=" encyclopédie vraiment géniale</a> <a href="mailto:benjlaiel@yahoo.fr">mon mail</a> Liens relatifs Un lien relatif indique l'adresse du fichier par rapport à la page actuelle. Il est vivement conseillé de l'utiliser le plus souvent dans son site web, car cela permet de changer d'hébergeur sans devoir rééditer chaque lien. Exemples : <a href="exemple.html">lien vers le fichier «exemple.html» se trouvant dans le même répertoire que la page actuelle</a> <a href="/images/logo.png">lien vers le fichier «logo.png» se trouvant dans le sous-répertoire images du répertoire courant</a> 19
20 Les liens hypertextes Les noms de fichiers Les fichiers HTML ont des extensions précises :.htm,.html, Première page d'un site (ou d'un dossier du site) En général : index.html. Dans 99% des cas, cela permet d'atteindre le site ou le dossier. Les fichiers images Images de qualité photographique : JPEG (extension :.jpg) Images de type dessin, ayant au maximum 256 couleurs (dont une éventuellement transparente) ou les images animées : GIF (extension.gif) Les images de type.png 20
21 Liens hypertextes dans les images 21
22 Les images Syntaxe : <IMG SRC="url" WIDTH="w w%" HEIGHT="h h%" ALT="texte" BORDER="b"> SRC="url" Adresse du fichier image à insérer. WIDTH="w w%" Largeur de l'image affichée. Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle. On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l'image HEIGHT="h h%" Hauteur de l'image affichée (mêmes remarques que pour WIDTH). NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l'autre est automatiquement calculée en proportion. NB2 : toujours indiquer au moins un des deux paramètres pour accélérer l'affichage ALT="texte" Texte apparaissant dans une info-bulle quand la souris est positionnée pendant 1 à 2 secondes sur l'image. BORDER="b" BORDER : taille en pixel de la bordure autour de l'image. Si l'image est un lien et qu'on ne veut pas voir de bordure de la couleur spécifiée dans l option LINK du BODY, mettre 0. 22
23 Les images Syntaxe : <img src="" alt="" /> Exemple : 23
24 Les images et les hyperliens Syntaxe : <a href=""> <img src=""> </a> Exemple <a href="faculté.html"> <img src="image4.jpg"> </a> 24
25 Les cartes cliquables Permettent d'atteindre un URL précis Suivant la zone où l on clique sur une image Zone cliquable <MAP NAME="valeur"> <AREA SHAPE="valeur" COORDS="valeur coordonnées" HREF="URL"> <AREA SHAPE="valeur" COORDS="valeur coordonnées" HREF="URL"> <AREA SHAPE="valeur" COORDS="valeur coordonnées" HREF="URL"> </MAP> <AREA SHAPE="rect circle poly default"> <AREA COORDS="valeur coordonnées"> rect : est défini par ses coins opposés (x-gauche, y-haut, x-droit, y-bas), circle : est défini par son centre et son rayon (x-centre, y-centre, rayon), poly : est défini par un ensemble de points (x1, y1, x2, y2,, xn,yn), default : est défini par les points non définis précédemment. 25
26 Les cartes cliquables Exemple 26
27 Les tableaux 27
28 Les tableaux 3 types d éléments imbriqués <TABLE> </TABLE> <TR> </TR> <TD> </TD> Remarques : ouverture et fermeture du tableau : ouverture et fermeture de ligne (Row) : ouverture et fermeture de cellule (Data) Ne jamais oublier les balises de fermeture le tableau pourrait être désordonné, voire ne pas s'afficher. Les tableaux sont imbricables Exemple simple : <table border= 1 > <tr> <td>division 1</td> <td>division 2</td> </tr> </table> 28
29 <TABLE>... </TABLE> <TABLE WIDTH="w w%" BORDER="b" CELLPADDING="cp" CELLSPACING="cs"> WIDTH="w w%" Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la fenêtre (à utiliser avec prudence). BORDER="b" Largeur de l'encadrement du tableau et des cellules exprimée en pixels. Si une cellule est vide, il n'apparaît pas. CELLPADDING="cp" Marge intérieure de chaque cellule (en pixels). CELLSPACING="cs" Espacements horizontal et vertical entre les cellules du tableau 29
30 Les lignes : <TR> </TR> <TR ALIGN="LEFT CENTER RIGHT JUSTIFY" VALIGN="TOP MIDDLE BOTTOM"> ALIGN="LEFT CENTER RIGHT JUSTIFY" Alignement horizontal du contenu de toutes les cellules de la ligne : VALIGN="TOP MIDDLE BOTTOM"> Alignement vertical du contenu de toutes les cellules de la ligne <TD ALIGN="LEFT CENTER RIGHT JUSTIFY" VALIGN="TOP MIDDLE BOTTOM" COLSPAN="c" ROWSPAN="r" WIDTH="w w%"> ALIGN="LEFT CENTER RIGHT JUSTIFY" Alignement horizontal cellule par cellule (cf. <TR> </TR>). VALIGN="TOP MIDDLE BOTTOM" Alignement vertical cellule par cellule (cf. <TR> </TR>). 30
31 Les cellules : <TD> </TD> WIDTH="w w%" Largeur de la cellule en pixels ou en pourcentage de la largeur du tableau. A spécifier une seule fois dans le tableau (ie pour une seule ligne) car elle détermine la largeur de la colonne dont fait partie la cellule. Remarques Veiller à avoir le même nombre de cellules pour chaque ligne du tableau (en fusionner éventuellement). Si une cellule sur une ligne est vide, y mettre quand même un espace insécable ( ) COLSPAN="c" Nombre de cellules fusionnées à l'horizontal. Permet de disposer du texte au dessus de plusieurs colonnes. ROWSPAN="r" idem pour les fusions à la verticale <TD ROWSPAN=3> <TD COLSPAN=2> 31
32 Les tableaux (suite) Exemple avec plusieurs lignes: <table border= 1 > <tr> <td>division 1</td> <td>division 2</td> </tr> <tr> <td>division 3</td> <td>division 4</td> </tr> </table> 32
33 Les tableaux (suite) Exemple avec un titre pour chaque colonne: <table border= 1 > <tr> <th>numéro d usager</th> <th>note globale</th> </tr> <tr> <td>684</td> <td>40 %</td> </tr> <tr> <td>685</td> <td>83 %</td> </tr> </table> 33
34 Les tableaux (suite) Exemple avec fusion de cellules : <table border= 1 > <tr> <th>numéro d usager</th> <th>note globale</th> <th>diplôme obtenu?</th> </tr> <tr> <td>684</td><td>40 %</td><td>non</td> </tr> <tr> <td>685</td> <td colspan= 2 >Non disponible...</td> </tr> <tr> <td>686</td><td>83 %</td><td>oui</td> </tr> </table> 34
35 FRAME 35
36 Les frames (ou cadres) Permettent d'obtenir une ou plusieurs divisions horizontales et/ou verticales de la fenêtre du navigateur, et ainsi de disposer "virtuellement" de plusieurs fenêtres. Pour créer une page contenant des frames <FRAMESET Définir le découpage (FRAMESET). Définir le contenu des cadres (pages HTML classiques). ROWS COLS="d1[,d2,d3 ],*" ROWS COLS="d1[,d2,d3 ],*" BORDER="b" FRAMEBORDER="YES NO" FRAMESPACING="fs"> ROWS division en lignes (horizontale) COLS pour une division en colonnes (verticale) d1[,d2, d3 ] : indique la hauteur (largeur) en pixel de chaque ligne (colonne) ; le séparateur de valeurs est la virgule. * permet d'attribuer à la dernière ligne (colonne) tout l'espace restant. Possibilité d'indiquer une valeur en pourcentage de la taille de la page. Attention : l'affichage dépendra de la taille de la fenêtre du navigateur! 36
37 Exemple de découpage en frame Fichier frame.html <FRAMESET cols="70,424"> <FRAME name="menu" src="fichier1.html"> <FRAMESET rows="69,487"> <FRAME name="titre" src="fichier2.html"> <FRAME name="contenu" src="fichier3.html"> </FRAMESET> </FRAMESET> titre Fichier2.html Fichier1.html menu contenu Fichier3.html 37
38 <FRAME > <FRAME NAME="nom de la frame" SRC= "url" SCROLLING="YES NO AUTO NORESIZE FRAMEBORDER="YES NO" BORDER="b" FRAMESPACING="fs" MARGINWIDTH="mw" MARGINHEIGHT="mh"> SRC= "url" URL de la page chargée dans la fenêtre SCROLLING="YES NO AUTO" Gère l'affichage des ascenseurs YES : toujours présents NO : jamais AUTO : affichés si nécessaire 38
39 <FRAME > NAME="nom de la frame" Désignation utilisée pour identifier chaque cadre. Sert à désigner le cadre dans lequel va s afficher un document pointé par un lien hypertexte. Option TARGET (dans un élément A) utilisée avec HREF. < A TARGET="nom du cadre de destination" HREF="url" > L absence de TARGET dans un élément A provoque l affichage dans le cadre qui contient le lien. Nom de cadre prédéfinis : _parent, _top, _blank,... Exemple < A HREF="lien.html" TARGET="contenu">lien</A> NORESIZE Empêche le redimensionnement d un cadre. FRAMEBORDER, BORDER et FRAMESPACING Mêmes fonctions que pour la balise FRAMESET mais leur action est prioritaire s'ils sont ajoutés à la balise FRAME. MARGINWIDTH="mw" Espace vide laissé à gauche du cadre (en pixels). MARGINHEIGHT="mh" Espace vide laissé en haut du cadre (en pixels). 39
40 Découpages multiples Exemple de découpages multiples Deux façons de faire Découpages imbriqués dans un seul fichier Découpages dans plusieurs fichiers 40
41 Découpage unique imbriqué Découpages imbriqués dans un seul fichier <FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" FRAMESPACING="2"> <FRAME NAME="1" SRC="1.html" SCROLLING="yes"> <FRAMESET ROWS="33%,33%,*"> <FRAME NAME="2" SRC="2.html" SCROLLING="auto"> <FRAME NAME="3" SRC="3.html" SCROLLING="auto"> <FRAMESET COLS="50%,*"> <FRAME NAME="4" SRC="4.html" SCROLLING="auto"> <FRAME NAME="5" SRC="5.html" SCROLLING="auto"> </FRAMESET> <FRAMESET> </FRAMESET> 41
42 Découpages en plusieurs fois Découpages imbriqués dans plusieurs fichiers frameset.html <FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" > <FRAME NAME="1" SRC="f1.html" SCROLLING="yes"> <FRAME NAME="2" SRC="f2.html" > </FRAMESET> 21 f2.html <FRAMESET ROWS="33%,33%,*"> <FRAME NAME="21" SRC="f21.html"> <FRAME NAME="22" SRC="f22.html"> <FRAME NAME="23" SRC="f23.html"> </FRAMESET> f23.html <FRAMESET COLS="50%,*"> <FRAME NAME="231" SRC="4.html" > <FRAME NAME="232" SRC="5.html" > </FRAMESET> 42
43 Découpage unique vs. découpages en plusieurs fois Découpage unique Avantage : Facilite la maintenance car il n'y a qu'un seul fichier FRAMESET. Inconvénient : impossibilité de remettre simultanément à jour plusieurs cadres. Intérêt du découpage en plusieurs fois Avantage : souplesse de mise à jour des cadres car il est possible de désigner des cadres isolés ou des ensembles de cadres. Inconvénient : lourd à maintenir. 43
44 Définition d une fenêtre dans une page IFRAME: Inline Frame: Permet d'afficher une page HTML dans une autre page. Ces deux pages peuvent être stockées sur des serveurs différents. Elle est, par exemple, souvent utilisée afin d'insérer des bandeaux publicitaires hébergés sur des serveurs dédiés. <IFRAME NAME="nom de la frame" SRC= "url" HEIGTH="h" WIDTH="w" ALIGN="left center right justify" SCROLLING="YES NO AUTO" FRAMEBORDER="YES NO" MARGINWIDTH="mw" MARGINHEIGHT="mh"> NAME="nom de la frame" Identifiant de la fenêtre pour l'utiliser dans les TARGET SRC= "url" URL de la page chargée dans la fenêtre 44
45 Définition d une fenêtre dans une page HEIGTH="h" : Hauteur de la fenêtre en pixel WIDTH="w" : Largeur de la fenêtre en pixel ALIGN="left center right justify" :Alignement de la fenêtre dans le document qui la contient SCROLLING, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT Idem que dans FRAME 45
46 Les formulaires 46
47 Formulaires Objectif Balise Interagir avec l utilisateur Permet d'obtenir des réponses de l'utilisateur <FORM METHOD="GET POST" ACTION="Programme" > </FORM> Les éléments du formulaire sont répartis en 3 classes : Input Champs de saisie de texte et de diférents types de boutons Select Listes (menus déroulants et ascenseurs) Textarea Zone de saisie de texte libre 47
48 Formulaires METHOD : GET envoie les paramètres dans l'url. POST les renvoie sous forme de données postées après l'entête HTTP. ACTION : Programme = méthode de traitement des informations recueillies dans le questionnaire. Dépendant des possibilités offertes par l'hébergeur des pages. Les valeurs à indiquer pour ces options sont à remplir suivant les indications de l'hébergeur. Exemple : Utilisation de mailto comme programme de traitement Permet, en général, d envoyer directement le résultat d'un formulaire par . Syntaxe : <FORM METHOD="POST" ACTION="mailto:benjlaiel@yahoo.fr" ENCTYPE="text/plain"> 48
49 <INPUT > Rôle Permet de définir les différents types de champ d un formulaire : zone de saisie, case à cocher, bouton radio, bouton de confirmation, bouton de remise à zéro des champs. Différentes syntaxes Le contenu des attributs est dépendant du type de champ. <INPUT NAME="nom de la zone" TYPE="TEXT CHECKBOX RADIO SUBMIT IMAGE RESET" VALUE="valeur" CHECKED SRC="url" SIZE="taille" MAXLENGTH="nb" > 49
50 <INPUT TYPE="TEXT" > VALUE="valeur" : valeur correspond au : au contenu initial de la zone de saisie (si TYPE="TEXT") au libellé du bouton (si TYPE="SUBMIT" ou "RESET") à la valeur retournée (si TYPE="CHECKBOX" ou "RADIO") CHECKED : Dans le cas d un bouton à cocher, indique qu il apparaît coché par défaut SRC="url" : Utilisé avec TYPE="IMAGE" Adresse d une image à afficher, celle-ci jouant le rôle de bouton de validation SIZE="taille" : Utilisé avec TYPE="TEXT" Correspond à la taille de la zone de saisie. MAXLENGTH="nb" : Utilisé avec TYPE="TEXT" Nombre maximum de caractères qu il est possible de saisir. Exemple <INPUT TYPE="TEXT" NAME="case_texte_1" VALUE="Texte par défaut" SIZE="20" MAXLENGTH="80" > Texte par défaut 50
51 <INPUT TYPE="TEXT" > Exemple <HTML> <HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT> </SCRIPT> <BODY> <INPUT TYPE="TEXT" NAME="case_texte_1" VALUE="Texte par défaut" SIZE="20" MAXLENGTH="80" > <INPUT TYPE="TEXT" NAME="case_texte_2" VALUE="" SIZE="4" MAXLENGTH="4" > </BODY> </HTML> 51
52 <INPUT TYPE="CHECKBOX" > Exemple Choix 1 <INPUT TYPE="CHECKBOX" NAME="case_1" VALUE="1" CHECKED><BR> Choix 2 <INPUT TYPE="CHECKBOX" NAME="case_2" VALUE="1"><BR> Choix 3 <INPUT TYPE="CHECKBOX" NAME="case_3" VALUE="1"><BR> Choix 4 <INPUT TYPE="CHECKBOX" NAME="case_4" VALUE="1"> Principes Plusieurs cases peuvent avoir l'option CHECKED Les 4 cases n'ont pas le même nom VALUE indique la valeur qui sera retournée en fonction des la(les) cases cochées. Peux être décoché 52
53 <INPUT TYPE="RADIO" > Principes Une seule case peut avoir l'option CHECKED Les 4 cases ont le même nom VALUE indique la valeur qui sera retournée en fonction de la case cochée. Exemple Ne peux être décoché 53
54 Bouton de validation et de mise à zéro <INPUT NAME="validation" TYPE="SUBMIT" VALUE="Valider"> <INPUT NAME="Effacement" TYPE="RESET" VALUE="Effacer"> Bouton de validation avec image : <INPUT TYPE="IMAGE" NAME="validation" TYPE="SUBMIT" SRC="valider.png"> (L'image valider.png doit être dans le même dossier que la page). 54
55 Liste de choix: <SELECT > <SELECT NAME="nom de la liste" SIZE="1 s"> <OPTION >texte de la ligne 1</OPTION>... </SELECT> SIZE="1 s" SIZE="1" liste déroulante SIZE "1" liste défilante. <OPTION >texte de la ligne</option> 3 attributs possibles : DISABLED, SELECTED et VALUE (même rôle que pour les boutons radios) 55
56 Liste de choix: <SELECT > Exemple de liste défilante <SELECT NAME="liste1" SIZE="3"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> <OPTION>Ligne 4</OPTION> <OPTION>Ligne 5</OPTION> <OPTION>Ligne 6</OPTION> </SELECT> Exemple de liste déroulante <SELECT NAME="liste1" SIZE="1"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> 56
57 Liste de choix: <SELECT > Exemple de liste déroulante <HTML> <HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT> </SCRIPT> <BODY> <SELECT NAME="liste1" SIZE="1"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> <SELECT NAME="liste2" SIZE="4"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> </BODY> </HTML> 57
58 Liste de choix: <SELECT > Exemple de liste déroulante On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>. Pour faire afficher d'entrée Vendredi au lieu de lundi : 58
59 < TEXTAREA > </ TEXTAREA...> <TEXTAREA NAME="nom de la zone" ROWS="r" COLS="c"> Rôle: Permet de définir une zone de texte pour saisir des données de taille plus importante que dans une case de texte. ROWS="r" : Taille de la zone de saisie en nombre de lignes COLS="c": Taille de la zone de saisie en nombre de colonnes. 59
60 Feuille de style: CSS CSS (Cascading Style Sheets) Ensemble de mises en forme génériques (position des éléments, aspect des textes à afficher, ) associés à des balises. HTML sert à structurer le contenu, CSS sert à formater un contenu structuré Syntaxe Balise {propriété: valeur [; propriété: valeur ]*} Exemples H1 {font-size: 20pt; font-weight: bold ; color: red} H2 {font-size: 16pt; font-weight: bold ; color: #080000} P {margin-left: -20px; margin-right: -20px; margin-top: 30px} BODY {background: URL(.); text-indent: 2cm} Déclaration de la feuille de style ou de son utilisation dans l entête : ( < HEAD > </ HEAD > ) Définition: Trois méthodes pour appliquer le style CSS à un document HTML - Définition locale : Dans un élément de la page - Définition Globale: Globalement pour la page - Définition externe: Dans un fichier séparé 60
61 Définition de styles Définition locale Exemple: Mettre l'arrière plan en rouge: <html> <head> <title>exemple</title> </head> <body style="background-color: #FF0000;"> <p>cette page est rouge</p> </body> </html> Possibilité de définir des sous-classes 61
62 Définition de styles Définition globale ( Consiste à inclure le code CSS avec la balise HTML <style> dans l entête < HEAD > </ HEAD >) <html> </html> <head> </head> <body> </body> <title>exemple</title> <style type="text/css"> </style> body {background-color: #FF0000;} <p>cette page est rouge</p> 62
63 Définition de styles Définition externe Utilisation d'une feuille de style externe (Un lien Link vers une feuille de style.css) <link rel="stylesheet" type="text/css" href="style.css" /> Fichier HTML <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>introduction</h1> <h1>html</h1> <h2>les CSS</h2> <h3>définition Externe</h3> <h2>utilisation d'un fichier CSS externe</h2> </body> </html> /* sélecteur { attribut: valeur } */ body { Feuille de style: style.css background: blue; font-family: Arial, Verdana; } /* sélecteur universel */ * { color: #cccccc; } /* sélecteur multiple */ h1, h2, h3 { font-style: italic; font-family: Georgia, sans-serif; } /* sélecteur unique */ h3 { color: red; } 63
64 Les sélecteurs de classe HTML <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="select.css" /> </head> <body> <p class="normal">la tunisie </p> <p class="citation"> km2 avec plus de 1200 kilomètres de côtes </p> </body> </html> CSS body { background: #0000ff; color: #cccccc; } p.citation { text-align: center; color: white; background: black; border-style: solid; }.normal { font-size: 120%; } Select.css 64
65 Les sélecteurs d identifiant <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="css_selecteur.css" /> </head> <body> HTML <p id="normal">la tunisie </p> <p id="citation"> km2 avec plus de 1200 kilomètres de côtes </p> CSS body { background: #0000ff; color: #cccccc;} p#citation { width: 50%; border-style: solid; background: blue; } #normal { font-size: 220%; } </body> </html> 65
66 Les sélecteurs contextuels <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="selecteur_cont.css" /> </head> <body> HTML <ul> <li>de <em>titre</em></li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body> </html> CSS selecteur_cont.css /* Met les "em" en vert dans les items */ li em { color: green; font-weight: bold; } /* diminue la taille du texte des listes imbriquées */ ul ol, ol ul, ul ul, ol ol { font-size: 80%; } NB : "titre" est en vert mais pas "Les balises" 66
67 Les pseudo-éléments et les pseudo-classes HTML CSS pseudo.css <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="pseudo.css" /> </head> <body> <p>comme le disait <a href="./napo.html">napoléon </a> :</p> <p>le doute est l'ennemi des grandes entreprises</p> </body> </html> /* Met la 1ère lettre de chaque paragraphe en très gros */ p:first-letter { font-size: 250%; } /* Colore les liens en rouge */ a:link { color: red; text-decoration: none; } 67
68 Positionnement Positionnement normal : static Le navigateur positionne les éléments en fonction de leurs types (block-level : Div ou inline: SPAN) et de leurs ordres d apparition dans le code source de la page <html> <body> <div> <h1>menu</h1> </div> <br> <div> Cet exemple montre l'utilisation de <span style="color:blue;text-decoration: underline;" >DIV et SPAN</span>. </div> </body 68
69 Positionnement (relatif) Décalage par rapport au positionnement static HTML CSS pos_relatif.css <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="pos_relatif.css" /> </head> <body> Ceci est un exemple avec <span class="haut">du texte en haut</span> et <span class="bas">du texte en bas</span> </body> </html> span.haut { position: relative; bottom: 8px; background-color: #ffff00; } span.bas { position: relative; bottom: -8px; background-color: #5555ff; } 69
70 Positionnement (absolu) Position arbitraire. L ordre dans le code source n a plus d importance Pour le positionnement des autres éléments : comme s il n existait pas HTML <html> <body> <div class="menu"> Ici se trouve le menu </div> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> </body> </html> CSS div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; } 70
71 Marges et bordures border (bordure) height margin (marge externe) padding (marge interne) contenu width Tailles : Height width Bordures : border border-left, border-right, border-top, border-bottom Marges externes: margin margin-left, margin-right, margin-top, margin-bottom Marges internes : padding padding-left, padding-right, padding-top, padding-bottom 71
72 Marges HTML <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="marge.css" /> </head> <body> <div class="menu"> Ici se trouve le menu </div> <div class="contenu"> Cette page l'uilisation de la position absolue. </div> </body> </html> CSS div.menu { position: absolute; top: 0px; left: 0px; width: 10%; padding-top: 30px; padding-left: 2px; border-style: solid; } div.contenu { position: absolute; margin-left: 15%; border-style: solid; border-color: red; } 72
73 Bordures HTML <html> <body> <span class="i1"> Peu important </span><br /><br /> <span class="i2"> Important </span><br /><br /> <span class="i3"> Vital </span> </body> </html> CSS span.i1 { border-style: dotted; border-color: #888888; border-width: thin; } span.i2 { border-style: dashed; border-color: blue; border-width: medium; } span.i3 { border-style: solid; border-color: red; border-width: thick; } ou une valeur numérique 73
74 Polices font-family. Police ou famille de police (serif, sans-serif, cursive, fantasy, monospace). Attention, les polices supportées dépendent fortement du navigateur! Déclarez une famille générique après la police (séparées par une virgule) pour substituer une police non trouvée par une autre. font-size. Taille de la police : valeur numérique ou xx-small, x-small, small, medium, large, x-large, xx-large. font-style. Style de la police : italic, oblique, normal. font-variant. Casse des caractères : normal, small-caps. font-weight. Graisse des caractères : normal, bold, bolder, lighter. line-height. Espace interligne (ex. : 150% ou 1.5em). text-decoration. Ornement du texte : none, underline. (souligné), overline (surligné), blink (clignotant), line-through (barré). 74
75 Couleurs et fond HTML <html> <body> <div class="contenu"> Contenu </div> <div class="pub"> Partez au soleil! </div> </body> </html> CSS body { background-color: purple; }.contenu { color: rgb(200, 250, 0); height: 400px; background-image:url("piece.gif"); background-repeat: repeat; } no-repeat, repeat,.pub { repeat-x, repeat-y float: right; width: 470px; height: 300px; color: white; background-image:url("plage.jpg"); background-repeat: no-repeat; background-position: right top; } ou des valeurs numériques 75
76 Blocs: flottement Un objet flottant est positionné à un endroit précis et le reste du contenu s'écoule autour de lui. Le flottement est défini par la propriété float : left : l'écoulement se fera par la droite right : l'écoulement se fera par la gauche none La propriété clear (none, left, right, both) empêche que l'élément ne se colle au précédent de son côté gauche, droit ou les deux. 76
77 Blocs: flottement HTML <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" ref="flottement.css" /> </head> <body> <img id="img1" src="benjlaiel.jpg"/> <img id="img2" src="image4.jpg" /> <img id="img3" src="tunisie.jpg" /> <img id="img4" src="screen1.jpg" height="42" width="42"/> <img id="img5" src="tunisie_golfe.jpg" /> La faculté des sciences de gafsa est située au campus universitaire sidi ahmed Zarroug- Gafsa. </body> </html> CSS #img1 { float:left; } #img2 { float:right; } #img3 { float:left; } #img4 { float:left; clear: left;} #img5 { float:left; clear: left;} 77
78 Blocs: Sans flottement 78
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
// HTML, Javascript XHTML & CSS
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Introduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Luc Brun. Création de pages Web Dynamiques p.1/75
Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75 Place du HTML GET http://www. monssite.com HTTP 1.0 Content type: text/html ... Création de pages Web Dynamiques
101 Réaliser et publier un site WEB
101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1
MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Création de formulaires interactifs
SESSION 16 Création de formulaires interactifs Programme de la session Lancer un sondage en utilisant divers éléments d'entrée de formulaire Traiter les entrées utilisateur Activer un script à partir d'un
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Un mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Automatisation d'une Facture 4. Liste Déroulante Remises Case à cocher Calculs
Dans la série Les tutoriels libres présentés par le site FRAMASOFT Automatisation d'une Facture 4 Liste Déroulante Remises Case à cocher Calculs Logiciel: Version: Licence: Site: OpenOffice.org Calc :
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
NAMEBAY PRO. votre site de revente de noms de domaine en marque blanche. Documentation technique
NAMEBAY PRO votre site de revente de noms de domaine en marque blanche Documentation technique SOMMAIRE 1. PRÉSENTATION... 3 2. FONCTIONNEMENT... 4 2.1. ETAPE 1 : Devenir revendeur de noms de domaine...
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
GUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale
Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10
Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
<Créer un site Web. avec/> Suzanne Harvey
aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons
Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4
FrontPage Support d apprentissage septembre 2000
FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
Activités HTML. Code: act-html
Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
Guide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
Formulaire pour envoyer un mail
Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer
Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.
1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,
OneDrive, le cloud de Microsoft
OneDrive est le cloud mis à disposition par Microsoft. Pour en profiter, il suffit de disposer d'un compte Microsoft (Tutoriel), Microsoft offre 10 Go de stockage (Dont 3 Go pour sauvegarder des photos).
Creation d une page Web
Création des pages web 1 Creation d une page Web Par Romica TRANDAFIR Table des matières 4. Création des pages web... 2 4.1. Présentation générale du langage HTML...2 4.2. Les principales balises du langage
Stage «Créer et animer un site Web en équipe»
Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Le service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET
DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée
Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz mqwertyuiopasdfghjklzxcvbnmqwert
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz INITIATION à Word 2007 xcvbnmqwertyuiopasdfghjklzxcvbn Cours informatiques Année 2009/2010 mqwertyuiopasdfghjklzxcvbnmqwert
Publier un Carnet Blanc
Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de
Chapitre 2 Créer son site et ses pages avec Google Site
Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,
FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères
FORMATION PcVue Mise en œuvre de WEBVUE Journées de formation au logiciel de supervision PcVue 8.1 Lieu : Lycée Pablo Neruda Saint Martin d hères Centre ressource Génie Electrique Intervenant : Enseignant
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC
Optimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Mise en forme d'un document écrit sous Word - quelques rappels pour consolider ses connaissances -
Mise en forme d'un document écrit sous Word - quelques rappels pour consolider ses connaissances - Le Brevet Informatique et Internet (B2i) a pour objectif de faire acquérir un ensemble de compétences
L informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
Mon aide mémoire traitement de texte (Microsoft Word)
. Philippe Ratat Mon aide mémoire traitement de texte (Microsoft Word) Département Ressources, Technologies et Communication Décembre 2006. Sommaire PRÉSENTATION DU DOCUMENT 1 Objectif principal 1 Deux
Parcours FOAD Formation EXCEL 2010
Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT Animé par A.COMLAN ADCOSOFT 14/02/2014-15H 1 Programme du webséminaire : Introduction Partie I Optimisation des Balises TITLE et META Partie II Optimisation du
1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information
TP Numéro 2 CRÉER ET MANIPULER DES TABLEAUX (Mise en forme, insertion, suppression, tri...) 1 CRÉER UN TABLEAU 1.1 Présentation Pour organiser et présenter des données sous forme d un tableau, Word propose