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
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
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
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 http:// www.obspm.fr /aim/infomm/ InfoMM.html ftp:// telnet:// gandalf.obspm.fr mesioq.obspm.fr file:// /disk/repertoire/ texte.html http://www.obspm.fr/aim/infomm/infomm.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
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
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 : http://www.ccim.be/ccim328/trucs/ http://www.creaweb.fr/dhtml/kit/ 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 : 1. 2. 3. 4. 5. 6. 7. 8. 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
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
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-8859-1" /> 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" />
</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
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 http://nvu.com 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
Paramètres des sites de publication
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).
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
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
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
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>
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.
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
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
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 : http://www.imcce.fr/fr/ephemerides/astronomie/promenade/pages1/166.html) Créer une nouvelle page Title : Le système solaire Enregistrer sous index.html dans le dossier "planetes"
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"
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.
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>
<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
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"
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"
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 : #000000 Alignement : justifié
Fond Couleur : #FFFFFF Bordure Utiliser le même style pour tous canelure 2px vert
Boite Son
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
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
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
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
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
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
Légende champ : vchamptexte champ mot de passe : ****
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 : 10 9 8 7 6 5 4 3 2 1
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 http://fr.selfhtml.org/index.htm http://www.framasoft.net/img/nvu-standard-v0.8fr.pdf http://www.quirksmode.org/
http://fr.selfhtml.org/index.htm http://www.htmlcodetutorial.com/