Webmestre (Conception de sites Web)
|
|
|
- Arlette Cormier
- il y a 8 ans
- Total affichages :
Transcription
1 Webmestre (Conception de sites Web) Support de formation 1 / 17
2 Table des matières I Introduction 3 II - ma première page 3 Exemple Détail et explication du code III - paramètres des balises 4 Qu'est-ce que les paramètres? Exemple Détail et explication du code Le codage des couleurs Les couleurs courantes IV - les liens 5 Qu'est-ce que c'est, un lien? Fonctionnement Exemple Détail et explication du code Liens internes / externes V - les balises de mise en page 6 Balises sans paramètres Balises avec paramètres VI - les balises d'insertion d'objets 8 VII - les tableaux 9 Principe des tableaux Exemple Explication du code Exemples d'utilisation VIII - les listes 10 Listes numérotées Listes non numérotées Listes de définitions IX formulaires 11 Principe et fonctionnement Eléments SELECT - OPTION INPUT (SUBMIT, RESET, RADIO, CHECKBOX, TEXT, HIDDEN)- TEXTAREA X - les cadres 13 Qu'est-ce qu'un cadre? Fonctionnement Exemple Explication du code XI - Exercices (à faire au fur et à mesure) 15 XII - Les logiciels et livres qu'on vous conseille Logiciels d édition HTML Logiciels de graphisme Livres sur le HTML 2 / 17
3 Introduction Cette formation est censée vous apprendre comment concevoir un site web de base. Elle ne se veut en aucun cas exhaustive et reste avant tout une initiation. Nous allons d'abord aborder les bases du langage utilisé sur Internet pour décrire les pages web : le HTML (HyperText Modeling/Markup Language). Il existe plusieurs manière d'apprendre à programmer des pages web, nous n'avons, volontairement, pas choisi la manière la plus simple, avec des logiciels qui génèrent automatiquement le code HTML pour deux raisons : une fois le langage connu, il est facile de passer sur n'importe quel éditeur sans problème, alors que l'inverse est plus difficile, de plus ces logiciels ne produisent pas un code HTML vraiment propre et de bonne qualité. Nous cherchons donc à nous inscrire dans une démarche de recherche de qualité et d'évolutivité vis-à-vis des logiciels. Ma première page Web base : Pour commencer, vous allez regarder ci-dessous comment est composée une page web de <HTML> <HEAD> <TITLE>Ma première page</title> </HEAD> <BODY> Ceci est ma première page Web! </BODY> </HTML> Résultat sous Internet Explorer 5.5 En détail : <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> encadre le début et la fin de la page HTML (page web) toute page web doit impérativement commencer par <HTML> et finir par </HTML>! encadre l'entête de la page. l'entête regroupe tous les paramètres qui ne sont pas affichés dans la fenêtre du navigateur comme le titre de la page. entre ces deux balises 1 se trouve le titre de la page qui sera affiché dans la fenêtre de titre du navigateur. entre ces deux balises se trouve le corps du document, c'est à dire tout ce qui sera affiché dans la fenêtre du navigateur. Un précision importante : dans le langage HTML, les espaces, tabulations et retours à la ligne, si nombreux qu'ils soient entre deux mots ne sont interprétés que comme un espace unique. Il existe des moyens pour passer à la ligne, ou mettre en forme le texte de manière précise que nous verrons plus tard. Pour l'instant, le texte que vous allez taper dans votre page va s'afficher tout à la suite. 1 une balise est un mot clé du langage HTML qui se trouve entre les caractères < et >..Les balises qui commencent par </ > définissent la fin d'application de la balise qui porte le même nom. HTML ne tient ps compte des majuscules / minuscules dans les balises. 3 / 17
4 Paramètres des balises Pour pouvoir personnaliser l'aspect de vos pages, les balises peuvent accepter plusieurs paramètres qui modifient le comportement de la balise. il est ainsi possible de facilement modifier la couleur du fond de la page en ajoutant un paramètre BGCOLOR à la balise BODY de la page. Les paramètres s'insèrent après le nom de la balise, avant le ">". La majorité des paramètres sont des attributs de la balise et peuvent par conséquent prendre plusieurs valeurs. Pour donner une valeur à un des paramètres, il doit être suivi du signe "=" puis de la valeur que vous voulez lui donner. Si cette valeur n'est pas composée exclusivement de chiffres, il faut la mettre entre double cotes ("). exemple : <HTML> <HEAD> <TITLE>Ma première page</title> </HEAD> <BODY BGCOLOR="#FFCCFF"> Ceci est ma première page Web! </BODY> </HTML> Résultat sous Internet Explorer 5.5 Détail : La balise BODY a pris comme paramètre BGCOLOR qui définit la couleur de fond de la page. Ce paramètre prend une valeur une couleur codée selon le principe RVB 2, ici la couleur désignée par #FFCCFF est un mauve clair. Le codage des couleurs (RVB) : les couleurs sont composées à partir de trois couleurs de base servant à l'affichage sur l'écran : le Rouge, le Vert et le Bleu. Le codage RVB (aussi appelé RGB pour Red Green Blue) utilise deux caractères pour chaque couleur de base soit RR VV BB. chaque caractère peut être compris entre 0 et F. le principe est le même que quand on compte normalement : on compte 00, 01, 02,, 09, 0A,, 0F, 10, 11,, 1F, 20,, 9F, A0,, FF. Les chiffres au lieu d'aller de 0 à 9 vont de 0 à F. Le nombre ainsi formé code la luminosité attribuée à chaque couleur. Plus la valeur est élevée, plus la couleur est lumineuse. Les couleurs courantes : #FFFFFF Blanc # Noir #FF00FF Violet #FF0000 Rouge Vif #00FF00 Vert #0000FF Bleu # Rouge Foncé # Vert foncé # Bleu foncé #FF4080 Rose bonbon #FFCC00 Jaune doré #FF8800 Orange #C0C0C0 Gris Clair # Gris Foncé #FFCCFF Mauve 2 Rouge-Vert-Bleu 4 / 17
5 Les liens Pour passer d'une page web à une autre, vous comprenez bien que vos visiteurs ne veulent pas avoir à entrer à chaque fois le nom du fichier dans la barre d'adresse de leur navigateur. Les liens sont, comme leur nom l'indique, le moyen pour passer d'une page à une autre par un simple clic de souris. Fonctionnement : Un lien met en relation une page source avec une page destination. La page source est la page dans laquelle est inséré le lien. La page destination est celle qui sera ouverte par le navigateur lorsque le visiteur aura cliqué sur le lien. La page de destination est passée comme paramètre de la balise de lien. Exemple : <HTML> <HEAD> <TITLE>Ma première page</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> Ceci est ma première page Web! <A HREF="page2.htm">Aller voir ma page 2</a> </BODY> </HTML> Résultat sous Internet Explorer 5.5 Explications Dans la page ci-dessus, on a inséré un lien vers notre page 2 (page2.htm). la balise <A>, qui définit que le texte qui précède la balise </A> est un lien, a pris comme paramètre HREF="page2.htm" qui définit que la page de destination est page2.htm. Ceci est l'utilisation la plus fréquente des liens. il en existe principalement une autre qui permet de se déplacer au sein de la page : un premier lien spécifie la destination et un second spécifie l'emplacement destination : le lien cliquable se compose de la même manière : <A HREF="#nom_destination">texte du lien</a> le lien (aussi appelé Ancre) est invisible et ne sert qu'à indiquer la destination : <A NAME="nom_destination"></A> On remarque que le second lien ne comporte pas de paramètre HREF mais un paramètre NAME qui indique le nom du lien, ainsi que la valeur donnée au paramètre HREF du premier commence par le caractère "#" pour indiquer que le lien fait référence à la page courante et non à une autre page. On appellera donc lien interne un lien qui pointera vers une destination interne à la page et lien externe un lien vers une autre page. Pour créer un lien vers un autre site, il suffit de passer comme paramètre HREF l adresse du site que vous taperiez dans votre navigateur (ex : 5 / 17
6 Les balises de mise en page Pour commencer, nous allons voir les balises courantes de mise en page qui ne prennent pas de paramètres. Ces balises peuvent être combinées pour personnaliser l'affichage de la page. Balise <B> </B> <I> </I> <U> </U> <S> </S> <BIG> </BIG> <H1> </H1> Description affiche le texte en gras affiche le texte en italique affiche le texte souligné affiche le texte barré grossi le texte (possibilité d'imbriquer jusqu'à 6 <BIG>) affiche le texte en tant que titre de niveau 1 <H6> </H6> affiche le texte en tant que titre de niveau 6 <CENTER> </CENTER> centre le texte <PRE> </PRE> affiche le texte mis en forme comme dans votre fichier. <BR /> retourne à la ligne dans la page. Il n'a pas à être fermé (il n'existe pas de </BR>, pas besoin d'une fin de retour à la ligne! exemple : <HTML> <HEAD> <TITLE>Ma seconde page</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>Ceci est ma <I>seconde</I> page Web!</H1><BR /> je sais maintenant <U> souligner</u> du texte,<br /> le mettre en <I>italique</I>, le <S>barrer</S>.<BR /> <CENTER>Je sais le centrer </CENTER><BR /> <PRE> Le mettre en forme de manière simple </PRE> </BODY> </HTML> et pratique le résultat sous Internet Explorer 5.5 La seule difficulté de cette page est l'imbrication de l'italique dans le titre de la page. La balise H1 prend comme caractéristique supplémentaire l'italique sur la portion comprise entre <I> et </I> Vous aurez remarqué : entre le <PRE> et </PRE>, tous vos espaces et retours à la ligne sont pris en compte. iattention, la solution de mettre entièrement votre page entre <PRE> et </PRE> n'est pas conseillée, à utiliser avec modération! 6 / 17
7 Nous allons maintenant aborder les balises de mise en page qui peuvent prendre un ou plusieurs paramètres. BALISE Paramètre Description <FONT> Définit les attributs de la police de caractères SIZE Définit la taille de la police. Il y a plusieurs manières de définir la taille : de manière absolue (size=1, size=4 ) de manière relative par rapport à la taille actuelle (size="+1") <FONT SIZE="+2"> </FONT> COLOR définit la couleur du texte (voir le codage RVB) <FONT COLOR="#004400"> </FONT> FACE définit la police utilisée (Times new roman, Arial, ) <FONT FACE=""> </FONT> <P> Définit un paragraphe ALIGN Définit où le texte doit être aligné (gauche, centre, droite, justifié). ALIGN peut prendre 4 valeurs : LEFT, RIGHT, CENTER ou JUSTIFY Attention, JUSTIFY n'est reconnu que par certains navigateurs. l'utilisation de <CENTER> est plus souple que celle de <P ALIGN="CENTER"> </P> <BODY> voir "Ma première page web" BGCOLOR couleur du fond de la page BACKGROUND Définit l'image de fond (BACKGROUND="NomImage") LINK couleur des liens ALINK couleur des liens pendant qu'on clique dessus VLINK couleur des liens déjà visités Exemple <HTML> <HEAD> <TITLE>Ma troisième page</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FONT SIZE="+2" COLOR="#800000"> Ceci est ma <FONT FACE="Arial"> troisième</font> page Web!</FONT> <P ALIGN="LEFT">Ce paragraphe est à gauche</p><p ALIGN="CENTER">Ce paragraphe est centré</p> <P ALIGN="RIGHT">Ce paragraphe est à droite</p><p ALIGN="JUSTIFY">Ce paragraphe est justifié et j'ai une mise en page impeccable quelle que soit la longueur de mon texte. et <FONT FACE="arial" SIZE="-1"> quelle que soit la police utilisée</font></p> </BODY> </HTML> 7 / 17
8 Les balises d'insertion d'objets Dans ce chapitre, nous étudierons les images, les lignes de séparations, ainsi que les sons et vidéos. Aucune de ces balises n'a de balise de fin (</ >) du fait que ce sont des objets ponctuels ; pour remplacer la balise de fin et permettre au navigateur de comprendre qu il n y a pas de balise de fin, on rajoute à la fin de la balise un caractère «/». BALISE Paramètre Description <IMG /> SRC* Insère une image dans la page web le nom du fichier de l'image est défini dans SRC <HR /> WIDTH HEIGHT BORDER ALIGN ALT* WIDTH SIZE NOSHADE Définissent la taille de l'image en pixels (WIDTH=100) ou en pourcentage de la page (HEIGHT="80%") HEIGHT : hauteur, WIDTH : largeur Définit la taille du bord de l'image (en pixels). Définit où placer l'image dans la page. (Gauche ou Droite), si ce paramètre n'est pas spécifié, l'image est insérée au milieu du texte, à l emplacement actuel. Définit un texte alternatif à l'image pour les navigateurs qui ne savent pas les afficher. Insère un séparateur horizontal Définit la largeur du séparateur (Idem pour les images) Définit la hauteur du séparateur en pixels. Si ce paramètre est présent, le séparateur s'affichera sans effet 3D. Il est alors possible de spécifier un paramètre COLOR.. ALIGN Définit où le séparateur doit être aligné (gauche, centre, droite). Par défaut, ALIGN a pour valeur CENTER <EMBED /> SRC* Insère un élément multimédia (son, fichier MIDI) Nom du fichier à jouer HEIGHT WIDTH Dimensions de la console de contrôle, voir plus haut avec <IMG> HIDDEN Cache le panneau de contrôle du lecteur (boutons lecture, stop, ) MASTERSOUND Paramètre obligatoire pour lire un fichier son, il ne prend pas de valeur VOLUME Indique le volume de lecture (entre 0 et 100) LOOP AUTOSTART Nombre de fois que le fichier doit être joué, si la valeur est "-1", alors, le fichier est joué en boucle jusqu'à ce que le visiteur quitte la page permet de jouer automatiquement le fichier à l'ouverture de la page. Ce paramètre ne prend que la valeur TRUE. Il est nécessaire avec le paramètre HIDDEN. Exemples : <IMG SRC="image.jpg" ALIGN="RIGHT" BORDER=5 ALT="image" /> <HR SIZE=8 NOSHADE WIDTH="80%" COLOR="#ABCDEF" /> <EMBED SRC="son.mp3" AUTOSTART="TRUE" MASTERSOUND /> *Paramètres obligatoires 8 / 17
9 Les Tableaux Nous allons ici étudier le fonctionnement des tableaux en HTML, bien que simple, quelques subtilités subsistent. Il existe 5 balises principales pour gérer les tableaux : <TABLE> le tableau par lui-même <TR> une ligne du tableau (Table Row en anglais) <TD> une cellule du tableau (Table Div) <TH> une cellule de titre (Table Header) <CAPTION> Titre du tableau qui est placé au dessus du tableau, centré sur le tableau. Nous allons maintenant voir les paramètres spécifiques à chacune des 4 balises : BALISE Paramètre Description TABLE CELLSPACING espacement des cellules CELLPADDING espacement entre le bord d'une cellule et son contenu BORDER épaisseur de la bordure ALIGN alignement du tableau dans la page TD, TR, TH ALIGN alignement du texte dans les cellules VALIGN alignement vertical du contenu des cellules (TOP, MIDDLE, BOTTOM) TD COLSPAN Fusionner les cellules sur n colonnes ROWSPAN Fusionner les cellules sur n lignes Les paramètres communs aux 4 balises : BGCOLOR Couleur de fond (du tableau ou des cellules) BACKGROUND Image de fond HEIGHT Dimensions du tableau, fonctionnement identique que pour les WIDTH images. Attention, une ligne ou une colonne du tableau ne peut avoir qu'une seule largeur ou qu'une seule hauteur. Pour donner l'impression de colonnes à largeur variable, il faut se servir de COLSPAN. exemple : <TABLE BORDER=5 CELLPADDING=5 CELLSPACING=2> <TR> <TH BGCOLOR="#FFCCFF">Col 1</TH> <TH>Col 2</TH> </TR><TR> <TD BGCOLOR="#FFFCCC" ALIGN=CENTER COLSPAN=2>Ligne 1</TD> </TR> </TABLE> i Remarque : Il est possible d'insérer un tableau dans une cellule! 9 / 17
10 Les listes En HTML, il existe trois types de listes : Les listes numérotées (<OL>), les listes non numérotées (<UL>), avec un symbole, et les listes de définitions (<DL>). Les deux types les plus utilisés sont les deux premiers. Les listes de définition ne fonctionnent pas de la même manière, c'est pourquoi nous les traiterons à part. Listes numérotées et non numérotées : Chaque élément de la liste à l'intérieur d'une balise <LI> </LI> Pour les listes non numérotées, on peut préciser en paramètre le type de symbole à afficher (CIRCLE, SQUARE, DISC). ex : <UL TYPE="SQUARE"> donne au début de chaque élément. Pour afficher tous les éléments d'une liste à la suite (sur une même ligne par exemple), il suffit de rajouter le paramètre COMPACT à la balise <UL> ou <OL> exemple : <UL TYPE="DISC">Une liste non numérotée <LI>Un élément</li> <LI>Un autre élément</li> </UL> <OL>Une liste numérotée <LI>Un premier élément</li> <LI>Un second élément</li> </OL> Listes de définitions Une liste de définition met en relation une mot ou une abréviation avec une définition. exemple : <DL> <DT>Mot</DT><DD>Mot à définir</dd> </DL> Remarque : <DL> affiche le mot et sa définition sur deux lignes séparées, pour les afficher sur la même ligne, il faut utiliser le paramètre COMPACT. Il est aussi possible de créer ses propres symboles avec une liste de définition : il suffit d'insérer, à la place du mot à définir, une image. <DL COMPACT> <DT><IMG SRC="symbole.gif"></DT><DD>texte</DD> <DT><IMG SRC="symbole.gif"></DT><DD>texte</DD> <DT><IMG SRC="symbole.gif"></DT><DD>texte</DD> </DL> 10 / 17
11 Les formulaires les formulaires et leurs éléments sont utilisés partout sur Internet, pour recueillir les avis, pour envoyer un message, pour faire un sondage, pour passer des commandes en ligne Nous allons aborder ici ce sujet. Pour commencer, nous allons décrire les objets mis à disposition par le langage HTML : OBJET Paramètre Description FORM Formulaire lui-même. cette balise doit impérativement être refermée après le dernier champ du formulaire. ACTION Définit le script ou programme à exécuter après avoir validé l'envoi des données saisies dans le formulaire. En général, on ne donne que trois types de valeurs ici : "script.cgi", " ou "mailto :nom@serveur.com" (pour envoyer par ) ENCTYPE Définit le type de données transmises par le formulaire au serveur. Dans la majorité des cas, la valeur doit être "text/plain" METHOD Définit la méthode de transmission des données au serveur. On a le choix entre GET et POST, l'utilisation de la méthode POST est requise par la majorité des applications. TARGET Définit la page à afficher après avoir exécuté ACTION INPUT Champ du formulaire. TYPE=TEXT Zone de saisie de texte. Prend les sous-paramètres : SIZE : taille en caractères MAXLENGTH : longueur maximale du texte contenu TYPE=PASSWORD Zone de saisie de mot de passe (affiche des étoiles). Mêmes sous-paramètres que pour TYPE=TEXT. TYPE=SUBMIT Bouton de validation TYPE=RESET Bouton de Remise à Zéro du formulaire TYPE=HIDDEN Zone cachée, permet d'envoyer une information constante comme le nom de la page en cours. NAME nom donné à la zone ou au bouton (Unique) VALUE valeur prise par la zone (texte affiché), titre du bouton. <TEXTAREA> Zone saisie de texte multiligne, doit impérativement être refermée. Tout le texte placé avant la fermeture de cette balise est affiché dans la zone de saisie. NAME COLS, ROWS Nom de la zone. nombre de colonnes et de lignes (en caractères) de La zone de saisie. 11 / 17
12 exemple : <FORM ACTION="mailto:copi1@wanadoo.fr"> je m'appelle <INPUT TYPE=TEXT NAME="NOM"><BR> mon adresse est : <INPUT TYPE=TEXT NAME="MAIL"><BR> voici mon message : <TEXTAREA NAME="MSG"></TEXTAREA><BR> <INPUT TYPE=SUBMIT VALUE="Envoyer"> <INPUT TYPE=RESET VALUE="Effacer"> </FORM> Dans cet exemple, ACTION a pour valeur "mailto :copi1@wanadoo.fr", c'est-à-dire que le formulaire envoie un à copi1@wanadoo.frmailto:cybertech@ifrance.com. Un autre élément important des formulaires est la liste de choix : La liste est encadrée par la balise SELECT et chaque élément entre la balise OPTION qui prend un paramètre VALUE qui définit la valeur envoyée au script par le formulaire si l élément est sélectionné. <SELECT NAME="ListeDeroulante"> <OPTION VALUE=elmt1>élément_de_la_liste</OPTION> <OPTION VALUE=elmt2>un_autre_élément_</OPTION> </SELECT> Pour obtenir une liste pouvant prendre plusieurs valeurs, il faut modifier le code comme suit : <SELECT NAME="ListeDeroulante" MULTIPLE SIZE=4> <OPTION VALUE=1>élément_de_la_liste</OPTION> <OPTION VALUE=2>un_autre_élément_</OPTION> <OPTION VALUE=3>encore_un_autre</OPTION> </SELECT> Vous pouvez aussi insérer des cases à cocher : <INPUT TYPE=CHECKBOX NAME="Cocher"> si vous voulez qu'une case soit cochée dès l'affichage, il suffit de lui ajouter le paramètre CHECKED. ou des boutons radio (choix d'une case parmi celles proposées). C'est compris? <INPUT TYPE=RADIO NAME="Choix" VALUE="Oui" CHECKED>Oui <INPUT TYPE=RADIO NAME="Choix" VALUE="Non">Non i Attention, vous devez donner à tous les choix d'une même question le même paramètre NAME. Un seul aura la possibilité d'être coché à la fois. 12 / 17
13 Les cadres (Frames) Les cadres sont utilisés pour mettre en place des pages dont une partie change et une partie reste en place. Le principe est de diviser la fenêtre en colonnes et/ou en lignes de taille différentes. L'utilisation peut être pratique pour un menu qui reste en continu et une page qui change en fonction du choix fait dans le menu. En utilisant des cadres, la structure de base de la page d'accueil est différente : la partie <BODY> </BODY> est remplacée par <FRAMESET> Définition des cadres </FRAMESET> <NOFRAME> <BODY> Affiché si le navigateur n'accepte pas les frames (Netscape 1 et IE 2) version sans cadres ou bien message d'erreur </BODY> </NOFRAME> Ce qui nous intéresse est la balise <FRAMESET> et ce qui est situé avant sa fermeture. BALISE Paramètre Description FRAMESET Décrit un positionnement de cardes COLS taille des colonnes (en pourcentage de la fenêtre ou en pixels). La dernière colonne prendra "*" pour dire que la dernière colonne prend tout l'emplacement restant. ROWS taille des lignes, idem COLS. FRAMESPACING espace entre les cadres (en pixels) FRAMEBORDER taille du bord des cadres (en pixels) BORDER taille du bord des cadres (en pixels) NORESIZE si NORESIZE est présent, alors les cadres ne pourront pas être redimensionnés FRAME Définit le contenu d'un cadre SRC définit, comme pour les images, quel fichier doit être affiché dans le cadre. SCROLLING indique si l'utilisateur peut faire défiler la page et si la barre de défilement peut être affichée par le navigateur. Les trois valeurs possibles sont YES, NO et AUTO NAME Nécessaire! définit le nom du cadre. i Attention : Pour faire afficher une page à partir d'un lien dans un cadre spécifique, il faut ajouter le paramètre TARGET="nom_cadre" au lien. Donc, pour créer une page contenant des cadres, il faut en fait créer au minimum 3 pages. 13 / 17
14 Exemple : Maitre.html : <HTML> <HEAD><TITLE>Page principale</title></head> <FRAMESET COLS="150,*" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 NORESIZE> <FRAME NAME=MENU SRC="menu.html"> <FRAME NAME=PAGE SRC="page.html"> </FRAMESET> <NOFRAME> <BODY>Cette page ne peut pas être affichée sans cadres</body> </NOFRAME> </HTML> menu.html : <HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY bgcolor="#ffcc00"> <a href="toto.htm" target=page> Lien </a> </BODY> </HTML> page.html : <HTML> <HEAD><TITLE>Page</TITLE></HEAD> <BODY> Je suis dans le cadre de droite </BODY> </HTML> Le lien qu on a créé contient un paramètre TARGET=PAGE qui lui permet d afficher la destination du lien dans le cadre de droite et non dans celui de gauche. <A HREF="toto.htm" TARGET=PAGE> 14 / 17
15 Exercices : (faites-les au fur et à mesure) Page 3 - ma première page Ouvrez le bloc notes de Windows Créez une page qui aura pour titre : "Première page de Votre_Nom" Dans la page, vous devez afficher : Ceci est la première page de Votre_Nom. Elle a été créée le Date_du_jour à COPI. Enregistrez votre page sous le nom index.htm (attention au type de fichier dans le blocnotes) dans votre répertoire personnel Ouvrez votre page dans le navigateur internet (Double clic sur l'icône du fichier). Page 4 - paramètres des balises Vous allez modifier votre page index.htm Changez la couleur du fond de votre page (mettez celle que vous voulez) Enregistrez et regardez le résultat Page 5 - les liens Vous allez d'abord créer un nouvelle page que vous appellerez page2.htm (toujours dans le même répertoire), dans laquelle vous mettrez la couleur de fond de votre choix (une autre que sur la page index.htm) et le texte que vous voudrez. Une fois ce fichier enregistré, vous allez modifier votre fichier index.htm et ajouter, à la fin de la page, un lien vers la page que vous venez de créer. Page 6 / 7 - les balises de mise en page Dans votre fichier page2.htm, la couleur de fond doit être noir et le texte en jaune doré. vous allez ajouter au début un gros titre (niveau 1) que vous centrerez dans la page. Dans votre fichier index.htm, la date devra être en italique et soulignée, alors que votre nom devra être en gras et un peu plus gros que le reste du texte. Le lien doit être rose bonbon. Page 8 - les balises d'insertion d'objets Dans page2.htm, on veut créer un petit menu, on va donc insérer pour chaque élément du menu une image (puce.gif) qui précédera chaque élément du menu et qui fera partie du lien. (c.f. liens) Vous devez créer trois autres pages vers lesquelles vont pointer les éléments du menu, chaque page ayant un contenu distinct mais les mêmes couleurs de fond et de texte. Tous les liens doivent être de couleur jaune doré. Chaque page doit contenir un séparateur horizontal centré de couleur jaune doré. 15 / 17
16 Page 9 - les tableaux Le menu que nous avons créé dans l'exercice précédent ne nous convient plus, on voudrait maintenant le mettre dans un tableau, à trois colonnes : la première contient l'image (toujours dans le lien), la seconde le texte du lien, toujours de couleur jaune doré et dans la troisième colonne, une description de la page sur laquelle vous allez aller avec le lien. La description sera écrite en jaune doré sur un fond de couleur # On ne doit pas voir de bordure au tableau, qui doit être centré, sur la page. Les éléments de chaque cellule doivent être alignés au milieu (en hauteur ) à gauche de la cellule. les cellules doivent se toucher mais les descriptions doivent être séparées de 6 pixels l'une de l'autre. le tableau fait 500 pixels de large. Page 10 - les listes Sur la première des trois pages créées lors de l'exercice sur les images (en rapport à la page 8), vous allez insérer une liste numérotée dont les éléments seront chacun des mots simples (de 5 à 10 éléments). Vous créerez, en sous de la première liste, une seconde liste, non numérotée, celle-ci, qui contiendra des explications sur les mot de la première liste. (3 à 15 lignes par élément, il faut que l'on puisse se rendre compte du résultat avec l'opération suivante!) Vous devez ensuite créer avec chaque élément de la première liste, un lien (interne) vers sa définition dans la seconde liste. (souvenez-vous le chapitre sur les liens ) Page 11 / 12 - les formulaires Créer une nouvelle page qui contiendra un formulaire permettant de vous envoyer un de commentaire du site. Le visiteur doit pouvoir mettre une note (Sur 5) grace à une liste déroulante et Dire la page qu il préfère dans votre site grâce à une série de boutons radio. Il doit aussi vous laisser son nom, son adresse et un éventuel commentaire. Page 13 / 14 - les cadres On voudrait finalement que le menu reste disponible en permanence et pouvoir l afficher sur la gauche de la page, alors que les autres pages s afficheront à droite. Récapitulatif final. 16 / 17
17 Les logiciels utiles : Logiciel pour écrire vos pages web : Logiciel Editeur Puissance Simplicité Site web Prix Web Expert Visicom Média **** **** >500 F Ace html Visicom Média *** *** gratuit 1 st Page 2000 EvrSoft **** **** gratuit HTML Tool freedanilab ***** *** gratuit DreamWeaver MacroMedia ***** ***** >2000 F Go Live Adobe **** *** >5000 F Logiciels pour le graphisme Logiciel Editeur Puissance Simplicité Site web Prix PhotoShop Adobe ***** ** > 5000 F Paint Shop Pro Jasc Software **** **** > 1000 F The GIMP G.N.U. / F.S.F. ***** *** gratuit FireWorks Macromédia **** ** >2000 F Corel Draw Corel *** *** >4000 F Livres pour continuer Titre Editeur Collection Prix Javascript DHTML et CSS Campus Press L intro 149 F Tableau des caractères spéciaux en HTML é é è è ê ê à à â â ë ë û û î î ô ô ü ü ï ï ö ö < > > < & & ç ç 17 / 17
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.
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
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
// 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
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
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
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
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
.. 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
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
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
Votre site Internet avec FrontPage Express en 1 heure chrono
1.1. Précautions préliminaires Votre site Internet avec FrontPage Express en 1 heure chrono Le contenu de ce site n'est pas très élaboré mais il est conçu uniquement dans un but pédagogique. Pour débuter,
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
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
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
Traitement de texte : Quelques rappels de quelques notions de base
Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui
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
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?
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...
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,
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)
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
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
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
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
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
Création WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
Navigation dans Windows
Cours 03 Navigation dans Windows Comme je le disais en introduction, notre souris se révèle plus maligne qu'elle n'en a l'air. À tel point qu'il faut apprendre à la dompter (mais c'est très simple, ce
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
1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5
1. Introduction... 2 2. Création d'une macro autonome... 2 3. Exécuter la macro pas à pas... 5 4. Modifier une macro... 5 5. Création d'une macro associée à un formulaire... 6 6. Exécuter des actions en
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
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
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...
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
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
Initiation à linfographie
Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence
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
Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps.
Cours pratique Excel Présentation du classeur cours.xls C est un classeur qui contient 7 feuilles Liste de personnes Calculs simples Solde Listes Auto Relatif Absolu Formats Paye Cours AFM Dans chacune
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
Manuel du composant CKForms Version 1.3.2
Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant
UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE»
UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE» url : http://colleges.ac-rouen.fr/cahingt/partages/ UN PRINCIPE : le stockage est privé, le partage est public > tant que l'on ne partage pas,
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
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
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
Interface PC Vivago Ultra. Pro. Guide d'utilisation
Interface PC Vivago Ultra Pro Guide d'utilisation Version 1.03 Configuration de l'interface PC Vivago Ultra Configuration requise Avant d'installer Vivago Ultra sur votre ordinateur assurez-vous que celui-ci
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
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Cours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
Prise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
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
FAIRE SES COMPTES AVEC GRISBI
FAIRE SES COMPTES AVEC GRISBI Grisbi est un logiciel de comptabilité personnelle sous licence GPL. (logiciel libre) C est un programme écrit par des français et il respecte parfaitement l'esprit de la
Le générateur d'activités
Le générateur d'activités Tutoriel Mise à jour le 09/06/2015 Sommaire A. Mise en route du Générateur d'activité... 2 1. Installation de Page... 2 2. Création des bases du générateur d'activités... 3 3.
Dreamweaver 2. Formation création d un site WEB. Formateur : M. BRECHET Stéphane
Dreamweaver 2 Formation création d un site WEB Formateur : M. BRECHET Stéphane Sommaire Informations générales sur la création de site --------------------------------------- 2 Réserver gratuitement un
Réalisez votre propre carte de vœux Éléctronique
Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.
Tutoriel de démarrage rapide destiné aux EDITEURS
Tutoriel de démarrage rapide destiné aux EDITEURS 2007 Joseph Beeson josephbeeson@gmail.com Sous une licence Creative Commons : Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales.
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
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
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
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
Troisième projet Scribus
Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3
CMS Modules Dynamiques - Manuel Utilisateur
CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage
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
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne
Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Aperçu du Centre de copies et d'impression Bureau en Gros en ligne Pour accéder à «copies et impression Bureau en Gros
Création de site Internet avec Jimdo
Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que
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
I Pourquoi une messagerie?
I Pourquoi une messagerie? Outlook express est un logiciel de messagerie de windows. Il est installé par défaut sur un grand nombre d ordinateurs de la planète, ceux tournant sous Windows, et proposé par
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 :
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
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
TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives
2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
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
Comment mettre en page votre livre
GUIDE - ImprimermonLivre.com Comment mettre en page votre livre www.imprimermonlivre.com 1 V. 20131125 Conseils pour la mise en page de votre ouvrage L objectif de ce guide est de vous aider à réaliser
EXTENSION WORDPRESS. Contact Form 7. Proposé par :
Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Tutoriel TYPO3 pour les rédacteurs
Tutoriel TYPO3 pour les rédacteurs - typo3_tut_fr Tutoriel TYPO3 pour les rédacteurs Tutoriel TYPO3 pour les rédacteurs Clé de l'extension: typo3_tut_fr Langue: fr Mots-clés: foreditors, forbeginners,
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
<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
Comment créer vos propres pages web?
Comment créer vos propres pages web? Vous voulez vous aussi devenir acteur et présenter vos passions et vos envies aux yeux du monde. Présentez-les sur le WEB. Pour cela, il vous suffit de créer vos "pages
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
AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.
Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment
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
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
Trier les ventes (sales order) avec Vtiger CRM
Trier les ventes (sales order) avec Vtiger CRM Dans l'activité d'une entreprise, on peut avoir besoin d'un outil pour trier les ventes, ce afin de réaliser un certain nombre de statistiques sur ces ventes,
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...
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,
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2
La Clé informatique. Formation Excel XP Aide-mémoire
La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles
Installation et paramétrage. Accès aux modèles, autotextes et clip- art partagés
DSI Documentation utilisateurs Installation et paramétrage Accès aux modèles, autotextes et clip- art partagés Auteur : Yves Crausaz Date : 21 septembre 2006 Version : 1.04 Glossaire OOo : Abréviation
Qu'est-ce qu'un moteur de recherche. Moteur de recherche sur Internet
Initiation à la navigation sur Internet avec le moteur de recherches Google 1/ 5 Qu'est-ce qu'un moteur de recherche Moteur de recherche sur Internet Un moteur de recherche est un site Internet comme un
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
Premiers pas avec Dreamweaver
Premiers pas avec Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Dreamweaver permet de créer aisément des pages compatibles avec toute une série