Les sites web avec NVU

Dimension: px
Commencer à balayer dès la page:

Download "Les sites web avec NVU"

Transcription

1 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 le Web Cycle de Vie d'un logiciel Structure d'un site web Comment créer un site web Organiser l'arborescence du site TP 1 : structure du site Structure d'une page web!doctype en-tête : <head> corps : <body> Organiser la description des pages TP 2 : Installation et configuration de Nvu Téléchargement Configuration Edition / Préférences Paramètres des sites de publication Sites de publication Utilisation Edition d'une page web TP 3 : Premières pages web Edition d'un fichier html Création d'un fichier Code source TP 4 : les planètes Le langage HTML Balises Attributs Mise en forme d'une page Intégrée dans le corps TP5 : mise en forme classique Feuilles de style CSS Feuille de style incorporée Général Texte Fond Bordure Boite Son TP6 Mise en forme CSS

2 Compléments Feuille de style exportée Feuille de style liée TP Créer une feuille de style pour l'impression TP créer une barre de navigation entre les 3 pages ou plus Modèles TP 7 Calques TP 8 Orthographe TP 9 Javascript TP 10 Formulaires Définir un formulaire Les champs Image Zone de texte Liste de sélection Bouton Etiquettes Index de recherche TP 11 Références Déroulement sur 3 jours : Introduction Installation et configuration Utilisation Mise en forme d'une page avec et sans feuilles de style CSS Modèles Formulaires Calques Les bases du web Le web est basé sur l'échange de fichiers html à travers le réseau. Les fichiers html (hypertexte markup language sont des fichiers textes écrits en html qui peuvent être envoyés depuis une machine serveur vers un ordinateu client et interprétés localement par des navigateurs. Pour cela, il faut mettre en oeuvre différents services d l'internet : le transfert de fichier, l'interprétation du code html. Les protocoles réseaux ftp http mailto Fonctionnement du web client-serveur Page web, site web et w3c Langage html Les protocoles réseaux

3 Les services de l'internet sont basés sur des protocoles. Un protocole est un ensemble de règles qui régissent le échanges entre des ordinateurs dans le monde des télécommunications et des réseaux. Internet est un résea mondial d'interconnexion d'ordinateurs basé sur la pile de protocoles TCP/IP. TCP (Transmission Control Protocol) : régit l'échange physique des paquets d'octets HTTP (HyperText Transmission Protocol) : le protocole du World Wide Web : FTP (File Transfert Protocole) : le protocole de transfert de fichiers SMTP (Simple Mail Transfert Protocol) : courrier électronique POP (Post-Office Protocol) : courrier électronique IMAP (Internet Message Access Protocol ) : courrier électronique NNTP (Network News Transport Protocol) : le protocole des News ou groupes de discussion. TELNET Pour l'usage du web des pseudos-protocoles ont été ajoutés : JAVASCRIPT MAILTO FILE IP (Internet Protocole) Pour permettre les communications entre les machines, TCP/IP utilise un numéro d'identification des machines c'est le "numéro IP" de la forme x.x.x.x où x est compris entre 0 et 255. Ce numéro doit être unique sur le réseau il est attribué de façon statique (cas des réseaux locaux) ou dynamique (cas des fournisseurs d'accès DHC Dynamic Host Configuration Protocol). La correspondance entre les numéros et les noms des machines es obtenue grâce au "service de noms" DNS. Pour pouvoir accéder à l'internet, un ordinateur a besoin : d'une connexion physique (réseau local ou modem) d'un numéro IP du numéro IP d'un serveur de noms que la machine doit pouvoir atteindre physiquement du numéro IP d'un routeur que la machine doit aussi pouvoir atteindre physiquement. Le routeur ou gateway est une machine qui établit les chemins (les routes) entre les numéros des machines (en fait entre les numéros des réseaux) Le Web Le Web (la toile, www) s'est développé très rapidement car son mode de fonctionnement est très souple et don très robuste. C est un des services de l Internet le plus connu. Le Web permet d'échanger des informations au moyen de http, protocole qui fonctionne en mode client/serveur. Le mode client/serveur est un mode de fonctionnement dissymétrique dans lequel deux logiciels différents son nécessaires pour permettre les communications : un logiciel serveur (appelé daemon) nécessaire sur une seul machine et un logiciel client, nécessaire sur toutes les machines. Client Réseau Serveur

4 Navigateur httpd Daemon La souplesse de http ne provient pas spécifiquement de ce mécanisme qui est assez répandu dans le mond TCP/IP (ftp fonctionne aussi en mode client/serveur). Elle provient de la mise en œuvre du mécanisme : la machin serveur transfère uniquement le code "source" qui est interprété sur chaque machine cliente. Avantage : le code source est léger : il contient les indications pour faire la mise en page mais pas la mise e page elle-même. Inconvénient : la machine cliente doit être suffisamment puissante pour interpréter le code source. Le résulta est (légèrement) différent selon l'interpréteur présent sur la machine cliente. Le mécanisme client/serveur est déclenché par l'appel à une ressource "hypertexte" sur la machine cliente ; ce appel est fait au moyen du localisateur uniforme de ressources : URL (Uniform Resource Locator). Uniform Resource Locator Structure d'une URL : protocole nom de serveur répertoire fichier /aim/infomm/ InfoMM.html ftp:// telnet:// gandalf.obspm.fr mesioq.obspm.fr file:// /disk/repertoire/ texte.html ftp://gandalf.obspm.fr telnet://mesioq.obspm.fr file:///disk/repertoire/texte.html Le nom du serveur est de la forme : machine.domain.tld. (tld : top level domain) aux Etats-Unis, par type d'activités com, edu, gov, mil, net, org ailleurs, par pays ca, fr, uk, be, de, dk... en France asso.fr, gouv.fr, tm.fr

5 Le nom du répertoire est de la forme /nom_du_disque/dossier1/dossier2 (syntaxe type Unix) Le nom de fichier est en général nom.html ou nom.htm Le chemin qui suit le protocole est le chemin absolu menant au fichier en question : il part de la racine et décr tout le chemin à suivre pour atteindre le fichier cible. Un chemin relatif sera un chemin commencant "à l'endroit où on se trouve déjà" par exemple la page web affiché et allant jusqu'au fichier cible ex : "../images/web.jpg" Note : attention aux caractères accentués, aux blancs... dans les noms de fichiers et de répertoire!!! Par exemp : /Mon Disque Dur/Pages_Web/Présentation.html devient /Mon%20Disque%20Dur/Pages_Web/Pr%8Esentation.html Recherche d'informations google msn yahoo et voila Création et gestion d un site Web Utiliser le Web Créer un site web nécessite la prise en compte des éléments suivants : Système hypertexte (texte non linéaire) Multimédia (texte, images, son, animations, vidéo) Navigateur Multi-plateforme (Amiga, Mac, PC, Unix) : images, sons, java, tests Distribué sur des milliers de sites Interactif (clic, affichage d'une animation, formulaires) Multi-services (URL : ftp,mail,news,http) et l'utilisation de moyen techniques : Localisation de l'information : URL Protocole de communication : HTTP Langage : HTML Client serveur Vocabulaire : Page Web, Site Web, Page d'accueil, homepage, (front page), Webmaster, Internet, Intranet e Extranet : pas de différence de structure, les différences se situent dans la restriction d'accès. SGML : Standard Generalized Markup Language : norme ISO fondée sur la distinction fondamentale entr contenu et présentation physique ou structure. DTD : Document Type Definition (décrit la structure et le type des balises utilisés dans le document) XML : extensible Markup Language HTML : Hyper Texte Markup Language ou Langage hyper texte à balise

6 DHTML : Dynamic HTML. Permet d introduire du dynamisme dans les pages, de se démarquer des pages statique illustrées des débuts du web. L utilisation de JAVA et JAVASCRIPT y est pour beaucoup! Exemples parlants : XHTML : extensible HTML Cycle de Vie d'un logiciel Un site Web se conçoit comme un logiciel (software). Du début de sa conception à sa réalisation finale, il évolu (maléable). Modèle web : Etude préliminaire Conception du site Réalisation du site Tests de chaque page Tests du site Mise en ligne Promotion du site Gestion du site Structure d'un site web Comment créer un site web Ecrire la structure générale du site sur papier, arborescence des dossiers Pour chaque page structure détaillée, et sa place dans l'arborescence. Organiser l'arborescence du site Un site web est constitué d'une arborescence de dossiers et fichiers d'autant plus complexe et lourde que le sit est gros. Si on peut se contenter de tout mettre dans un même dossier quand on réalise une ou deux pages htm

7 cela devient difficile à maintenir quand le site possède une centaine de pages, autant d'images et qu'il s'agit de maintenir en allant corriger une faute par ci, remplacer une image par là, compléter une page pour la mettre jour,... Plusieurs choix sont possibles en fonction de l'organisation du site. On peut, par exemple, décider d'avoir dans son dossier "racine" : le fichier index.html, un dossier (et sous-dossiers pour toutes les autres pages web, un dossier pour les images, un pour les styles, un pour les modèles et un pou les scripts. Comme nous allons gérer plusieurs sites en parallèle nous choisirons l'arborescence suivante : christian index.html images styles templates scripts systemesolaire fichier1.html fichier2.html fichier3.html systeme.html Portrait_de_famille.jpg planetes index.html mercure.html venus.html... pluton.html images monsiteweb index.html images mercure.png venus.gif... pluton.jpg La navigation dans le site : quels sont les éléments clés du site? page d'accueil, définition de parcours types (scénarios de tests) permettant de parcourir tous les liens entre éléments TP 1 : structure du site Créer un dossier à votre nom dans mes documents Y créer les éléments suivants : dossier images dossier styles dossier scripts dossier systemesolaire dossier planetes dossier monsiteweb

8 sitedistant Dans le dossier systemesolaire copier systeme.html Dupliquer ce fichier 3 fois et nommer les copies : fichier1.html fichier2.html fichier3.html Copier l'image Portrait_de_famille.jpg dans systemesolaire Structure d'une page web Du point de vue code html, le squelette d'une page web est toujours le même : une déclaration de type de document, puis une balise de début de document <HTML>, une balise en-tête <HEAD>... /HEAD> une balise corps de la page <BODY> et une fin de document </BODY></HTML>!DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/tr/html4/loose.dtd"> type de document HTML 4.01 Strict Transitional Frameset en-tête : <head> Le titre <title> Des meta-données concernant des informations sur le document : type de caractères utilisés, auteur, description, mots-clés (robots) les feuilles de styles, les langages de scripts <HEAD> titre auteur description modeles scripts, styles mots-cle <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> ou charset=utf-8 <meta name="keywords" content="système solaire, Astronomie, Planètes, Ceinture de Kuiper"> <meta name="author" content="christian"> <meta name="robots" content="index,follow"> ou "noindex,nofollow",... <title>système solaire - Wikipédia, l'encyclopédie libre et gratuite</title> <script type="text/javascript" src="skins/common/wikibits.js"></script> <style type="text/css" media="screen,projection"> "/skins/monobook/main.css"; </style> <link rel="stylesheet" type="text/css" media="print" href="/skins/common/commonprint.css" />

9 </head> corps : <body> Ce qui sera affiché par le navigateur Il contient du texte brut, formaté ou mis en page, des images ou autres media, des tableaux, des listes, des liens. Ce texte et ces images seront affichées par le navigateur client en appliquant les balises aux textes qu'elle encadrent. Cette interprétation dépend du navigateur et de la machine cliente. Organiser la description des pages Comme il y aura plusieurs pages, il est important de les structurer de façon à ce que l'internaute ne soit pas perd et se retrouve dans l'interface que vous lui proposez. Par exemple s'il y a une barre de navigation elle doit être + au même endroit et avoir le même aspect d'une page à l'autre. Les titres de niveau 1, 2, 3 doivent avoir la mêm taille, une même couleur (ou pas!). Le fond des pages participe aussi au look et à l'identité du site. Un aparté sur les couleurs : c'est très important pour le côté look, emballage, agréable du site sans préjuger d contenu. Il faut équilibrer ses inspirations artistiques et la lisibilité du document. On pourra faire ce que l'on voudra le meilleur confort de lecture est atteint pour du texte écrit en noir sur fond blanc, et la lecture sur papier bien plu rapide qu'à l'écran. On en déduira des règles de présentation : Pas trop de texte à l'écran Répartition de l'information sur l'écran (50% d'occupation maximum) 3, 5 ou 7 blocs L'écran de base est en 640x480 ou 800x600, mais il en existe aussi de 1280x854. Faire un gabarit de ces pages permet de bien répartir toute l'information sur la page. Pour gérer le site vous devez pouvoir facilement retrouver chaque page dans le site et avoir répertorié tous le éléments de pages susceptibles d'être modifiés (les images, du texte, des liens,...) Chaque page doit être caractérisée pour la gestion du site Nom de fichier : venus.html Titre de la page : La planète Vénus Titre H1 : VENUS Images, Media : venus.jpg Liens sortants : index.html Blocs : Paragraphes : Tableaux : Listes : Gabarit : Place de la navigation : Nvu est un éditeur de texte wysiwyg orienté pour la publication de pages html. Nvu est gratuit et est l'héritier d célèbre Composer de Netscape. Il est issu de la suite Mozilla (Firefox, Thunderbird, Nvu). Il est basé sur le moteu Gekko, très puissant. Nous allons dans ce cours nous attacher à dissocier la structure de la page et sa présentation, c'est-à-dire l format texte brut et les styles. Nvu est un éditeur et parfaitement adapté à la création de pages web san

10 maîtriser le code html, mais nous verrons que certaines notions sont indispensables pour rester maître de l situation. TP 2 : Installation et configuration de Nvu Téléchargement Télécharger la version appropriée sur ici version 0.81 en français Windows : installer Nvu dans Program Files Linux : dans Home Mac : dans Applications Configuration Lancer Nvu Nous allons configurer les préférences de Nvu une fois pour toutes et les paramètres des sites de publication Edition / Préférences Outils / Préférences Règler comme indiqué les 4 panneaux des préférences suivants : Général Polices Paramètres de pages Avancées

11

12 Paramètres des sites de publication

13 Sites de publication Nom du site : référence locale adresse http du site web adresse ftp du serveur d'édition Nous allons créer des paramètres de sites de publication vers un premier dossier "sitedistant" qui représentera un dossier distant virtuel qui existerait sur la machine serveur. Cela nous permettra de tester la publication des pages en local. Puis nous créerons des paramètres pour un dossier réellement distant et situé sur aim-18.obspm.fr Choisir Edition / Paramètres des sites de publication ou Edition des sites depuis la fenêtre Gestionnaire de sites (F9) Cliquer sur nouveau site Nom du site nvu0. Créer les paramètres de publication vers le dossier "sitedistant" en renseignant les champs indiqués (les chemins indiqués dans adresse HTTP et ftp seront différentes que celles indiquées ici) Cliquer dans parcourir pour choisir le dossier ftp.../sitedistant puis copier coller cette adresse dans le champ HTTP Cliquer sur nouveau site Créer nvuaim18 comme indiqué ci-dessous. Renseigner les rubriques indiquées pour obtenir une configuration qui vous permettra d'envoyer vos pages et dossiers sur le serveur de publication (en ftp) et de les voir à l'adresse http (sous réserve que le serveur soit actif).

14 Vous venez de créer 2 sites de publications : nvu0 et nvuaim18. Sélectionner nvu0 et cliquer Site par défaut. Quand on cliquera sur l'icône "Publier", ce sont ces paramètres qu seront utilisés. Quand on voudra publier sur aim18, il faudra revenir dans Edition / Paramètres des sites de publication ou Edition des sites depuis la fenêtre Gestionnaire de sites et changer le site par défaut. Quitter Nvu pour sauvegarder les préférences, puis le relancer. Vos préférences sont actives. Utilisation Edition d'une page web Nvu s'ouvre avec une page blanche

15 Barre d'outils concernant les fichiers : Nouveau Ouvrir Enregistrer Publier : envoie la page sur le serveur du site sélectionné par défaut. Navigateur : teste la page ouverte en cours dans le navigateur définit par défaut (page locale si non publiée ou page distante sur le serveur si elle a été publiée) On peut avoir plusieurs fichiers ouverts en même temps, on passe de l'un à l'autre par les onglets fichiers. Barre d'outils permettant d'insérer des objets dans la page (définition avec interface graphique) : Ancre : permet de créer une cible de lien à l'intérieur d'une page Lien : crée un lien entre le texte ou l'élément sélectionné et une cible qui doit exister. (page externe, ancre, liens relatifs ou absolu) Image : insère une image existante dans un dossier du site. (emplacement / vignette / texte alternatif / dimensions / espacement / adaptation au texte / map / lien) Tableau : insère un tableau (rapide / précision / cellules / bordure) Formulaire : insère un formulaire Barres de mise en forme : Format paragraphe Titre 1 Titre 2

16 Paragraphe Menu Gestionnaire de sites : F9 Remarquer en bas de l'écran les onglets : "Normal" : édition wysiwyg de la page html "Balises HTML" : montre les balises entrantes "HTML Source" : édition directe dans le code html "Aperçu" : à peu de chose près montre le même aspect qu'en mode Normal. Il vaut mieux utiliser l'icône Navigateur pour avoir un aperçu avec un navigateur. On peut ainsi voir la même page dans chacun de ces 4 formats d'affichage. A gauche de cette barre, un peu plus bas, se trouvent affichées les balises concernant la zone (le bloc) de l page où est positionné le curseur d'édition. Clic gauche dessus permet de sélectionner tout le bloc. Clic droit donne accès à un menu contextuel notamment pour attribuer des styles. Affichage mise en évidence des blocs Insertion caractères et symboles Table des matières Outils (valider, CSS, nettoyeur) TP 3 : Premières pages web Nous avons défini l'arborescence des sites, installé et configuré Nvu. Nous allons maintenant créer des pages we avec Nvu. Pour insister sur la structuration de l'information indépendamment des styles, voyons d'abord l'exemp de la page systemesolaire/fichier1.html. Nous créerons ensuite les premières pages des deux autres sites planete et monsiteweb. Edition d'un fichier html Dans le dossier systemesolaire, ouvrir avec Nvu fichier1.html Affichage/Mise en évidence des blocs Pour sélectionner un bloc, cliquer dedans puis cliquer sur la dernière balise affichée dans la barre bas gauche de nvu : tout le bloc est sélectionné. Un clic droit au même endroit permet d'affecter un style à la balise sélectionnée. Sélectionner les blocs suivants, repérer le nom des balises titres paragraphe image tableau liste Essayer les différents modes d'affichage Création d'un fichier Créer maintenant le premier fichier de votre site personnel. Il est recommandé d'avoir défini sur le papier la page avant de la créer (texte, images, structure de l'information). Ouvrir un nouveau fichier

17 Taper du texte au kilomètre sans se soucier de la présentation Titre et propriétés de la page Format / Titre et propriétés de la page / Renseigner le titre et la description. Ces informations seront écrites dans le header mais ne s'afficheront pas dans la page (sauf le titre --> bookmarks, signets) Enregistrer sous "monsiteweb/page1.html" Ajouter la structure du texte Mettre un titre en h1, faire des paragraphes Listes Essayer les 3 types de listes : ordonnées <ol>, à puces <ul>, de définition <dl>

18 type=1 start=1 ou A, a, I, i type="circle" ou squarre, disc Tableaux Insérer un tableau avec une bordure de 1 pixel, un espacement des cellules de 2 px et une marge de 2px dans les cellules.

19 Image Commencer par créer un dossier images dans votre dossier monsiteweb et y copier l'image Portrait_de_famille.jpg qui existe dans systemesolaire. Insérer l'image Portrait_de_famille.jpg dans votre page Donner d'abord la localisation de l'image sur le disque. Il vaut mieux avoir déjà copié l'image dans le dossier images. Cliquer URL relative pour éviter une URL absolue qui contient le chemin depuis la racine de votre disque dur. Le cas risque de se produire si l'image est située ailleurs sur votre disque. Nvu vous proposera de copier l'image avec la page. Il faudra ensuite revenir sur l'image pour remettre le chemin en relatif. Donner un texte alternatif à afficher en cas de problème avec l'image. On peut changer les dimensions en pixels ou en pourcentage de la page

20 On peut ajouter un espace de quelques pixels autour de la page et spécifier comment doit s'afficher du texte autour de l'image. L'image peut être cliquable si on spécifie un lien

21 Enregistrer Code source Regardons le <HTML> Source et essayons de retrouver les blocs d'informations <!DOCTYPE> <HTML> <HEAD> titre auteur description </HEAD> <BODY> Retrouver le texte brut et les balises </BODY> </HTML> TP 4 : les planètes On commence un nouveau site que l'on gèrera en parallèle avec les 2 autres Dans le dossier "planetes" créer un dossier "images" y copier une image de chaque planète du système solaire (utiliser google ou le site : Créer une nouvelle page Title : Le système solaire Enregistrer sous index.html dans le dossier "planetes"

22 Taper du texte paragraphe h1 h2 Liste : Mercure Vénus Terre Mars Jupiter Saturne Uranus Neptune Pluton Tableau Image Enregistrer Tester dans le navigateur Créer une nouvelle page Format / Titre et propriétés de la page / Title : Mercure enregistrer sous mercure.html dans le dossier "planetes"

23 taper du texte Paragraphes Titres h1 h2 image texte lien vers la page index tableau enregistrer Ouvrir la page index.html lien vers la page mercure.html enregistrer Tester dans le navigateur enregistrer 9 fois sous les noms venus.html mars.html... pluton.html Il ne reste plus qu'à ré-ouvrir ces pages et y remplacer les images et textes correspondants Faire la page venus.html Format > Titre et propriétés de la page : changer le titre Changer le H1, l'image, le texte enregistrer Ouvrir index.html Faire les liens vers les 9 pages Tester dans le navigateur Publier en local il faut recréer l'arborescence du TP1 Publier sur aim-18 Il faut d'abord créer les dossiers (reproduire l'arborescence de votre site) sur aim-18, puis publier les pages une à une en spécifiant le dossier d'arrivée sur aim-18 pour la page html et pour les images incluses.

24 Le langage HTML lien sur site Le langage HTML est un langage à balise <B> balise ouverte </B> balise fermée Le texte situé entre les balises sera affiché avec la mise en forme correspondant aux balises qui l'encadrent; i bold=gras. Les balises admettent des attributs qui précisent leur fonctions Balises <HTML> <HEAD> <BODY> <P> <DIV> <BR>

25 <HR> <TABLE> <TR><TD> <UL> <LI> <OL> <LI> <DL> <DT> <DD> Attributs <IMG href="image.gif" width="100%"> <A href="http://www.obspm.fr"> <A name="ancre1"> Mise en forme d'une page Une fois le contenu structuré il reste à faire l'emballage Intégrée dans le corps Méthode classique avec interface graphique de la mise en forme de tout traitement de texte. On peut modifier le polices, taille des caractères, couleur. Menu "Format" ou Barre d'outils "Format" Corps de texte Largeur variable Couleur (caractères / fond) Stabylo Taille caractère (+/-) Bold Italique Underline Liste : sélectionner la liste puis modifier son style (à puce, numérotée, alphabétique) Alignement des paragraphes : gauche centre droit justifié Indentation Styles définis : Classes Calque Premier plan / arrière plan Style texte gras Elémént de liste de définition Attacher aux bords de la page (gauche, centre droit, en haut, au milieu, en bas) en html??? TP5 : mise en forme classique Mettre en forme

26 dossier systemesolaire/fichier1.html Couleur de fond de page Titre en rouge Police Arial Helvetica Verdana Sans-serif Couleur RVB #FF0000, #00FF00, #0000FF, #000000, #FFFFFF ou la palette Regarder le html produit enregistrer systemesolaire/fichier1.html Feuilles de style CSS Feuille de style incorporée Affichage mise en évidence des blocs On peut attribuer aux blocs des propriétés générales ou des propriétés particulières grâce aux feuilles de style e cascade ou Cascading Style Sheet CSS. Les propriétés générales sont définies dans le bloc conteneur général <body> Les propriétés particulières peuvent être définies dans d'autres conteneurs comme p, ul,... Nvu propose une interface graphique pour définir les CSS. Création d'une feuille de style interne ou incorporée à la page html en cours Ouvrir systemesolaire/fichier2.html Outils / Editeur CSS Choisir "Feuille incorporée"

27 Dans Liste des média : taper "screen" pour écran (autres : presentation, print, all) Titre : nommer votre feuille de style "style1-ecran" Cliquer sur "Créer la feuille de syle" La feuille de style interne est sélectionnée dans la partie gauche de la fenêtre. Exporter la feuille et utiliser la version exportés sera vu plus tard Pour l'instant, créons des règles pour cette feuille. Créer une règle de style On a le choix entre 3 type de règles. Style nommé :.class pour les styles généraux pouvant concerner tous les types par exemple.rouge qui met les caractères en rouge Style type : pour renommer les balises existantes par exemple h1 Style sélecteur : pour des styles particuliers qui ne peuvent être appliqués qu'une seule fois dans le document par exemple #titre Cliquer sur "Règle"

28 Choisir le style sélecteur Taper le texte : body Créer la règle de style On a maintenant accès aux onglets qui nous permettront de définir la mise en page : Général Texte Fond Bordure Boite Audio Général Texte Famille de Police : Personnaliser / Arial, Helvetica, Verdana, Sans-serif Couleur : # Alignement : justifié

29 Fond Couleur : #FFFFFF Bordure Utiliser le même style pour tous canelure 2px vert

30 Boite Son

31 Ajout Règles... Cliquer sur "Règle" Choisir le style type Taper le texte : h1 Créer la règle de style Caractères en rouge, fond, bordure 4 Ajout Règles... Cliquer sur "Règle" Choisir le style type Taper le texte : h2 Créer la règle de style Caractères en rouge, fond, bordure 2 Ajout Règles... Cliquer sur "Règle" Choisir le style nommé Taper le texte : bigblue Créer la règle de style Caractères en gros, bleu, bordure enregistrer le fichier

32 TP6 Mise en forme CSS systemesolaire/fichier2.html Créer une nouvellle feuille de style Règles.class p h1 h2 #para voyez les modifs en direct enregistrer systemesolaire/fichier2.html Feuille de style exportée Ouvrir systemesolaire/fichier2.html Sélectionner la feuille de syle exporter la feuille de style et utiliser la version exportée sélectionner le chemin./style export1.css fermer fichier2.html Feuille de style liée Ouvrir systemesolaire/fichier3.html CSS Feuille liée URL : style/export1.css media : screen titre export2 Créer une feuille de style enregistrer TP Créer une feuille de style pour l'impression (pas de fond, tous les liens de la même couleur, soulignés. a:link a:visited a:active

33 TP créer une barre de navigation entre les 3 pages ou plus Créer une feuille de style : jaune sur fond bleu avec xx en pointillés rouge et une autre : blanc sur noir Compléments Modèles Calques Orthographe Javascript Formulaires Modèles Les modèles sont des pages webs qui fixent certaines parties de la page les autres pouvant être modifiées Nouveau Fichier plus d'options Modèle vide

34 enregistrer sous modele1.mzt dans le dossier templates Titre : écrire TITRE Paragraphe 1 : écrire MODIFIABLE Paragraphe 2 : écrire MODIFIABLE Paragraphe 3 : écrire NON - MODIFIABLE enregistrer sélectionner un paragraphe1 en entier activer insertion modèles zone modifiable idem Paragraphe 1 et 2 enregistrer Nouveau fichier selon modèle enregistrer sous essaimodele1.html TP 7

35 Calques Les calques sont TP 8 ddd Orthographe copier fr_fr.aff fr_fr.dic extraits de fr_fr1.0.1.zip dans le répertoire de nvu puis components/myspell/ TP 9 ddd Javascript ddd TP 10 ddd Formulaires Définir un formulaire Insertion Formulaire

36 puis Définir un formulaire Nom du formulaire : livredor URL de l'action : adressehttpaim-18.obspm.fr/cgi-bin/traitement.cgi Méthode : POST Les champs

37 Légende champ : vchamptexte champ mot de passe : ****

38 QCM champ case à cocher : champ bouton radio : champ fichier : Parcourir champ valide : vvalide champ efface : raz champ bouton : vchampbouton Image image de formulaire : Zone de texte zone de texte : zone de texte Liste de sélection Liste de sélection - Note sur 10 :

39 liste2 gpe1 Opt11 opt12 opt13 gpe2 opt21 opt22 opt23 liens internes mapage1 Bouton Bouton de validation : Bouton : Etiquettes Etiquettes : sdjkhfjkqsdfv : fdbdfbsdf Index Index de recherche Index de recherche - entrer les mots-clés : fin du formulaire TP 11 ddd Références

40

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

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

Plus en détail

CREATION DE SITE WEB

CREATION DE SITE WEB CREATION DE SITE WEB 2010 - INFORMATIQUE Pharmacie Dijon, LCE I. PRESENTATION DE MACROMEDIA DREAMWEAVER 1 I-2. DEMARRAGE DE MACROMEDIA DREAMWEAVER 2 II. CONCEPTION ET GESTION D UN SITE WEB 4 II-1. BASES

Plus en détail

Chapitre 1. Présentation générale de l Internet

Chapitre 1. Présentation générale de l Internet Chapitre 1. Présentation générale de l Internet Sommaire Chapitre 1. Présentation générale de l Internet... 1 1. Vue d ensemble d Internet... 2 1.1. Introduction... 2 1.2. Définition de l Internet... 2

Plus en détail

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 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

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Introduction à Expression Web 2

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

Plus en détail

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

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

Plus en détail

Suzanne Harvey

<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

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Les outils de création de sites web

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

Plus en détail

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 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

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

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...

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entré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

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

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

Plus en détail

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. 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

Plus en détail

PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7

PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7 BIEN VIVRE A SAINT ALBAN LEYSSE PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7 Les Réseaux Un réseau est constitué de plusieurs ordinateurs pouvant communiquer ensemble. Un réseau commence avec 2 ordinateurs

Plus en détail

Gérer des sites avec Dreamweaver

Gérer des sites avec Dreamweaver Gérer des sites avec Dreamweaver La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter

Plus en détail

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006

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

Plus en détail

Cours Web - HTML (1 partie)

Cours Web - HTML (1 partie) Cours Web - HTML (1 partie) Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Introduction Se familiariser avec le codage HTML et acquérir une pratique minimale. Être capable de mener à bien

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

Bernard Lecomte. Débuter avec HTML

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.

Plus en détail

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

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

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

Chapitre 2 Créer son site et ses pages avec Google Site

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

Plus en détail

Utilisation de l éditeur.

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

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Gestion du Serveur Web

Gestion du Serveur Web Gestion du Serveur Web Console de gestion du Serveur Web Une console de gestion est disponible dans l'outil de l'administrateur. Cette console de gestion vous permet de configurer les services JetClouding

Plus en détail

Les services usuels de l Internet

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

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

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. 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

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Guide de base WordPress

Guide de base WordPress Guide de base WordPress Pour créer et gérer votre blogue ou site Internet 1- La création du blogue Wordpress Créez votre propre compte Wordpress.com en quelques secondes. C est gratuit. Entrez cette adresse

Plus en détail

WebShare v0.6.2 UTILISATION

WebShare v0.6.2 UTILISATION WebShare v0.6.2 UTILISATION Version française Utilisation du logiciel Entrez vos identifiants (login et mot de passe correspondants à ceux entrés dans l'administration) pour vous connecter. En cas d'erreur,

Plus en détail

Optimiser pour les appareils mobiles

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...

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Le compte courriel 23 L historique 25 La gestion des adresses brûlées 35 Utilitaires 38 Utilisation

Plus en détail

Notes pour l utilisation d Expression Web

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

Plus en détail

Table des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires...

Table des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires... Manuel utilisateur Table des matières 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5 1.2 Public visé... 5 1.3 Commentaires... 5 2 Généralités sur les applications web... 7 3 Module

Plus en détail

Inspiration 7.5. Brève description d Inspiration. Avantages d Inspiration. Inconvénients d Inspiration

Inspiration 7.5. Brève description d Inspiration. Avantages d Inspiration. Inconvénients d Inspiration Inspiration 7.5 Brève description d Inspiration Langue : Français et anglais. Coût : 109$. Une version d essaie gratuite de 30 jours est disponible à l adresse suivante : http://inspiration.demarque.com/applicationweb/pages/publique/index.php

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

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

Plus en détail

Langage HTML (2 partie) lt La Salle Avignon BTS IRIS

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

Plus en détail

Freeway 7. Nouvelles fonctionnalités

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

Plus en détail

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

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

Plus en détail

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. 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

Plus en détail

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

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.

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

Plus en détail

Service de certificat

Service de certificat Service de certificat Table des matières 1 Introduction...2 2 Mise en place d une autorité de certification...3 2.1 Introduction...3 2.2 Installer le service de certificat...4 3 Sécuriser un site web avec

Plus en détail

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement

Plus en détail

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 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

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une Introduction : On appelle «Web», contraction de «World Wide Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.

Plus en détail

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

Plus en détail

Que désigne l'url donnée au navigateur?

Que désigne l'url donnée au navigateur? Que désigne l'url donnée au navigateur? http://www-poleia.lip6.fr/~jfp/istm/tp6/index.html Le protocole : pourquoi? Parce que la manière d'indiquer une adresse dépend du service postal utilisé... Le serveur

Plus en détail

Initiation à html et à la création d'un site web

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

Plus en détail

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

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

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

Plus en détail

Publier dans la Base Documentaire

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

Plus en détail

UTILISATION DE L'APPLICATION «PARTAGE DE FICHIERS EN LIGNE»

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,

Plus en détail

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? 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

Plus en détail

TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE

TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE Etape 1. Ouvrir FrontPage et créer un site Web vide...2 Etape 2 ajouter des pages...3 Etape 3 : donner un titre et renommer les 2 pages...5

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

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

Plus en détail

Le générateur d'activités

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.

Plus en détail

Dévéloppement de Sites Web

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

Plus en détail

Création d un site web avec Nvu

Création d un site web avec Nvu Création d un site web avec Nvu sources principales d'informations: http://www.framasoft.net/article2656.html http://info.sio2.be/nvu/index.php http://www.anseladams.com Pensez à sauvegarder fréquemment

Plus en détail

Gérer, stocker et partager vos photos grâce à Picasa. Janvier 2015

Gérer, stocker et partager vos photos grâce à Picasa. Janvier 2015 Gérer, stocker et partager vos photos grâce à Picasa Janvier 2015 Sommaire 1 - Découverte de Picasa 2 - Gestion des dossiers et des photos 3 - Trier, filtrer et rechercher 4 - Retoucher une image 5 - Création

Plus en détail

Comment utiliser mon compte alumni?

Comment utiliser mon compte alumni? Ce document dispose d une version PDF sur le site public du CI Comment utiliser mon compte alumni? Elena Fascilla, le 23/06/2010 Sommaire 1. Introduction... 2 2. Avant de commencer... 2 2.1 Connexion...

Plus en détail

Logiciels de référencement

Logiciels de référencement Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.

Plus en détail

Publier un Carnet Blanc

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,

Plus en détail

Fiche n 4. Fichiers utilisés : Lexique_1, Lexique_2

Fiche n 4. Fichiers utilisés : Lexique_1, Lexique_2 Fiche n 4 Fichiers utilisés : Lexique_1, Lexique_2 A l aide de l explorateur Windows, sélectionnez en une seule manœuvre les fichiers Lexique_1 et Lexique_2 (cliquez sur les deux fichiers en maintenant

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

É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

Plus en détail

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

Tutoriel : Feuille de style externe

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?

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

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

Plus en détail

Support de cours de la formation izi-media

Support de cours de la formation izi-media Support de cours de la formation izi-media Préambule Ce support de cours s'adresse aux participants du module de formation «izi-media». Il n'a pas pour but de se substituer à la formation présentielle,

Plus en détail

Introduction ASP.NET

Introduction ASP.NET 1 Sommaire Introduction... 1 1 Framework... 2 1.1 Général (.NET)... 2 1.2 ASP.NET... 2 2 Prérequis... 2 3 Présentation des bases d un projet ASP.NET... 3 3.1 Création d un projet... 3 3.2 Site Web : Les

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Le WEB: présentation

Le WEB: présentation Le WEB: présentation Introduction: définition(s), historique... Principes d'utilisation:. le système Hypertexte. le fonctionnement pratique Naviguer sur le Web, les bases. les principales fonctions d'un

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

0.1 Mail & News : Thunderbird

0.1 Mail & News : Thunderbird 0.1 Mail & News : Thunderbird 1 0.1 Mail & News : Thunderbird Thunderbird est le lecteur de mail, de newsgroup et de flux RSS de la fondation Mozilla. Il est disponible pour Linux (en version gtk2), pour

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

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

Plus en détail

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 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

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

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

Plus en détail

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. 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

Plus en détail

Formation HTML / CSS. ar dionoea

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

Plus en détail

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005 MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par

Plus en détail

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source JOOMLA Introduction Joomla est un système de gestion de contenu CMS open source Il permet la conception rapide de sites Web avec une présentation soignée et une navigation très simple C est l outil idéal

Plus en détail

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 Sommaire 1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 3 POUR DEMARRER UN PROGRAMME...4 4 POSITION ET DIMENSION DES FENETRES...5 POSITION...5 DIMENSION...5 UTILISER LES BARRES DE DEFILEMENT...7 POUR AFFICHER

Plus en détail