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

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

Créer des pages web avec Front Page 2000

Créer des pages web avec Front Page 2000 Créer des pages web avec Front Page 2000 1 - Préparation Préparer le plan du site que l'on souhaite créer avec les liens reliant les différentes pages. Structure du site Structure pour le stockage des

Plus en détail

World Wide Web (WWW) cours@urec.cnrs.fr

World Wide Web (WWW) cours@urec.cnrs.fr World Wide Web (WWW) cours@urec.cnrs.fr Contributions Création: Claude Gross Modifications: Bernard Tuy, J.P Gauthier Objectifs du Web Aboutissement d un projet du CERN en Mars 1989. Espace d'information

Plus en détail

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

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

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

Manuel d utilisation du logiciel

Manuel d utilisation du logiciel Manuel d utilisation du logiciel Sommaire : - I Description générale Page 2 - II Création d'une Page / d'un Site Page 3 - III Renseignement des Pages Page 6 - IV Lier les Pages avec des liens hypertextes

Plus en détail

> Table des matières. Gestion des pages courantes... 4

> Table des matières. Gestion des pages courantes... 4 I N T E R FA C E A D M I N I S T R AT I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 5 W W W. B R I G N O L E S. F R STRATIS NOVEMBRE 2011 > Table des matières Gestion des pages courantes............................................................................................................

Plus en détail

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

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

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

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

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

Plus en détail

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr Web HTML Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 1 Plan Fonc-onnement du web Le langage HTML 2 Web : Introduc;on Réseau : mise en commun de ressources (données, imprimantes, ) Internet : Interconnexion

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

CRÉATION DE SITE INTERNET TD 1

CRÉATION DE SITE INTERNET TD 1 Création de pages Internet avec le logiciel libre Nvu - 1/7 CRÉATION DE SITE INTERNET TD 1 I LANCEMENT DE NVU ET CRÉATION DU SITE. 1) Liminaire : Créez en premier, un sous-dossier consacré au travail avec

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

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

Langages du Web. Que savez vous???

Langages du Web. Que savez vous??? Langages du Web Que savez vous??? Le WEB World Wide Web ouwww ouweb Toile d'araignée mondiale ou la toile Le Web utilise le réseau Internet pour relier des serveurs qui, grâce aux protocoles HTTP, HTTPS,

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

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

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

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

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes.

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes. Licence Creative Commons Jean-Philippe Verdu Réaliser la présentation de ses travaux en présentiel et en ligne Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

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

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

Historique et éléments du WEB.

Historique et éléments du WEB. Historique et éléments du WEB...1 1. Internet...2 1.1. Adresse IP...2 1.2. DNS...2 1.3. Approche client-serveur...3 2. Web...3 2.1. CERN (Conseil Européen pour la Recherche Nucléaire)...3 2.2. URL : Uniform

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

Pré-requis pour une utilisation efficace et sécurisée du web

Pré-requis pour une utilisation efficace et sécurisée du web Pré-requis pour une utilisation efficace et sécurisée du web Dominique Lachiver Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales à l'identique : http://creativecommons.org/licenses/by-nc-sa/4.0/fr/

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

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

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

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Carrefour de l information. Université de Sherbrooke. Création de sites Web à l aide de. Dreamweaver CS3. Par :

Carrefour de l information. Université de Sherbrooke. Création de sites Web à l aide de. Dreamweaver CS3. Par : Carrefour de l information Université de Sherbrooke Création de sites Web à l aide de Dreamweaver CS3 Par : Josée Martin Édition revue et augmentée par Marc-André Dulude Édition revue et augmentée par

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

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

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

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

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

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

Naviguer CHARGER ET QUITTER INTERNET EXPLORER

Naviguer CHARGER ET QUITTER INTERNET EXPLORER Naviguer UTILISER UN NAVIGATEUR CHARGER ET QUITTER INTERNET EXPLORER Pour pouvoir travailler avec votre application Internet Explorer il est indispensable de l'ouvrir. Pour réaliser cette opération plusieurs

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

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

Mozilla Thunderbird. 1. Configuration de base 2. Options 3. Paramètres des comptes 4. Ajout d'un compte de messagerie 5. Ajout d'un compte de flux

Mozilla Thunderbird. 1. Configuration de base 2. Options 3. Paramètres des comptes 4. Ajout d'un compte de messagerie 5. Ajout d'un compte de flux Thunderbird est le logiciel de messagerie développé par la Fondation Mozilla qui développe également le navigateur Firefox. Le téléchargement peut se faire sur ce lien. 1. Configuration de base 2. Options

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

Site internet du CREPS Aquitaine

Site internet du CREPS Aquitaine Site internet du CREPS Aquitaine Documentation de Mise à Jour 8 juillet 2010 Monsieur Pixel / Coop'Alpha page 1/22 GESTION D'UN SITE AVEC L'ENVIRONNEMENT SPIP Le site du CREPS Aquitaine fonctionne avec

Plus en détail

1- PRESENTATION D'INTERNET

1- PRESENTATION D'INTERNET TECHNOLOGIE 1- PRESENTATION D'INTERNET Dans les années 1960, l'arpa (U.S. Defense Departments Advanced Research Porjects Agency) crée le réseau ARPANET. Ce réseau reliait entre eux les sites informatiques

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin...

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

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

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage HTML / XHTML Laurent Tichit Janvier 2011 Laurent Tichit 2005-2010 1 Comment fonctionne le Web? C'est un mécanisme client-serveur. Logiciel serveur : programme qui a pour

Plus en détail

Gérer un site avec Nvu 1.0 http://www.nvu.com. d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur

Gérer un site avec Nvu 1.0 http://www.nvu.com. d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur Gérer un site avec Nvu 1.0 http://www.nvu.com d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur Plan du cours Préliminaire : Description de la fenêtre de travail

Plus en détail

Conception de pages HTML sous FrontPage Express

Conception de pages HTML sous FrontPage Express Conception de pages HTML sous FrontPage Express Le logiciel utilisé sera l'éditeur de Frontpage Express livré gratuitement avec Internet Explorer 4 et 5, il possède un tronc commun de fonctionnalités partagées

Plus en détail

Présentation de documents en ligne

Présentation de documents en ligne CENTRE DE RESSOURCES PEDAGOGIQUES Université Paris 2 Présentation de documents en ligne 2012-2013 Partie théorique : Internet... 3 Les services d Internet... 3 Telnet... 3 Ftp (File Transfer Protocol)...

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

Des pages web avec KompoZer

Des pages web avec KompoZer Des pages web avec KompoZer S Patrice NADAM, Lycée La Tour de Dames Rozay-en Brie (77) et Médialog KompoZer est un nouvel éditeur HTML libre et gratuit. Nous vous proposons d aller pas à pas à sa découverte.

Plus en détail

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50.

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50. Le guide complet pour créer sites web Vous verrez ensuite comment gérer les pages qui constituent la structure du site : créer les pages, les paramétrer pour la publication, les modifier, les supprimer

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

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

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010 Manuel du rédacteur Dernière mise à jour : le 14/04/2010 Table des matières 1 PRÉSENTATION GÉNÉRALE... 3 2 L INTERFACE DE GESTION... 3 2.1 ACCÈS À L INTERFACE DE GESTION... 3 2.2 PRÉSENTATION GÉNÉRALE...

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

UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000)

UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000) UTILISER le TRAITEMENT de TEXTE WORD 97 (ou 2 000) 1. Démarrer l ordinateur et attendre l affichage du bureau Le bureau L image du bureau peutêtre changée : tous les ordinateurs n ont pas la même! 2. Double

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

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

Direction Informatique 02/11/2010

Direction Informatique 02/11/2010 Microsoft Word 2007 Direction Informatique 02/11/2010 Contexte de la formation: - Interface Ms Word 2007 - L utilisation des fonctions de Ms Word 2007 Objective: -Maîtriser le Ms Word 2007 Page 2/36 Introduction

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

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert.

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Internet - un site web Le web est une des applications principales du

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

ultisites S.A. module «services»

ultisites S.A. module «services» M ultisites S.A. module «services» TP N 3 : Installation du serveur WEB Nom : Prénom : Classe : Date : Appréciation : Note : Objectif : Être capable d'installer le serveur WEB, et de créer une page HTML

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

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

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Td3 M r Castanet - Année scolaire 2007/2008 - page 1 Exercice 1 Dans cet exercice, nous allons appréhender les méthodes pour transférer notre site chez un hébergeur. Mais nous déplacerons notre

Plus en détail

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Page 1 /8 Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Section 1 Utilisation de l ordinateur Identification de l utilisateur o Ctrl+alt+suppr

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

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

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

Tutoriel CK Editor TABLE DES AUTEURS/LECTEURS. Nom Société Fonction. Auteur(s) : Anne-Sophie LOGIPRO Formation

Tutoriel CK Editor TABLE DES AUTEURS/LECTEURS. Nom Société Fonction. Auteur(s) : Anne-Sophie LOGIPRO Formation Tutoriel CK Editor LOGIPRO : 2 rue Pierret Cité Négocia 43000 Le Puy Tél. : 04 71 09 15 53 Fax : 04 69 96 06 25 E-mail : logipro@logipro.com Site web :www.logipro.com TABLE DES AUTEURS/LECTEURS Nom Société

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Créer un site à l aide de Google Site

Créer un site à l aide de Google Site Créer un site à l aide de Google Site N Vanassche www.nathalievanassche.be Ifosupwavre Mise en contexte www.nathalievanassche.be Blog ou Google Site? La réalisation d un blog à l aide de Blogger (non traité

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

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

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

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

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

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

Cours n 3 : Microsoft WORD

Cours n 3 : Microsoft WORD Cours n 3 : Microsoft WORD I. Introduction Il y a longtemps que l ordinateur a remplacé la machine à écrire, pour la saisie du texte. En effet, les gens on vite compris les apports et avantages que cela

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