Home

Manuel N|vu Standard - version 1pr

1. lt head gt lt body SiyleWlirections iiti Dackground color Go 204 204 2041 color rgb 0 0 0 lt hi style 4packground color T ro 20A mO one ran Bitstream vera Seams gt Le langage html lt h1 gt lt h2 style font family Bitstream Vera Sans gt Pr amp eacute sentation lt h2 gt lt p style font family Bitstream Vera Sans gt lt span style background color rgb 255 255 0 gt HTML lt span gt sigle de HyperText Markup Language litt amp eacute ralement langage de marquage hyper texte est le langage con ccedil u pour cr amp eacute er les pages du World Wide Web C est un langage de description de document bas amp eacute Sur SGML lt p gt lt body gt lt html gt 2 3 Fin du second exercice Nous arrivons la fin du second exercice Il vous a permis de voir comment modifier l aspect d une page avec les outils graphiques qui int grent la mise en forme directement dans le code HTML N oubliez pas d enregistrer les modifications de votre page Gardez la pour plus tard elle servira de page t moin avec les deux autres pages Ouvrez la deuxi me page htm mapage2 htm et commen ons par d cou vrir les autres possibilit s tonnantes et efficaces de Nvu Maintenant nous allons s parer la mise en forme du code HTML Nous utiliserons pour cela le Graal du concepteur Web moderne les feuilles de style Http www framasoft net 37 106 E 2e
2. Dans la s rie Les tutoriels libres pr sent s par le site FRAMASOFT Fichier Edition Affichage Insertion Format Tableau Outils Aide gi 0 ho a 0 a A e S Nouveau Ouvrir Enregistrer Publier Navigateur Ancre j Orthographe Imprimer Launchy Source uper diteur Corps de texte E KA B 1 U i sans classe B Largeur variable a OK Add B META TIME D META S stve souvenirs Normal fol Balises HTML Source Q Aper u lt body gt Standar ZelN tutoriel Logiciel Nvu Auteur s Lindows Inc Plateformel s Linux Windows Mac Version 1 Licence mpl gpl Ilgpl Site http nvu com Framasoft Partir de Windows pour d couvrir le libre http www framasoft net Tutoriel Framasoft souvenirs file csouyenirs htmI SNvus D 6 7 CE abc TE a P A s A OA dJ m lt u Source Couper diteur Copier X 3 Ouvrir Enregistrer Publier Navigateur Ancre Lien Image Tableau Formulaire Orthographe a aj moy Corps de texte E LI AA B U sans classe El Largeur variable a N add META TITLE a META STYLE Imprimer Launchy Nouveau fea lim x Hi ex ea Normal fo Balises HrmL Source C4 Aper u lt body gt Par JeaN MarC JuiN FUN
3. De toute fa on la meilleure aide dont vous disposerez est votre motivation c est elle qui vous aidera le mieux transformer un obstacle d apparence infranchissable en une chose simple et parfaitement ma tri sable Un tutoriel vous donnera quelques directives tout au plus Notes pour cette version du tutoriel Ce tutoriel a t r alis par un amateur s int ressant l dition Web ses moments perdus des moments perdus qui prennent de plus en plus de temps Ceci pour dire que je ne suis pas omniscient et sujet des erreurs donc Si vous trouvez certains passages mal expliqu s ou si vous estimez que j ai crit une grosse nerie n h sitez pas le signaler Des neries il y en a et elles ne sont pas relev es bien souvent L exp rience grandissant avec le temps pass sur la publication Web r v le que la r alisation d un site Web n est pas aussi simple que cela Un programme comme Nvu montre la fois son utilit afin d viter certains cueils pour les d butants et aussi ses limites pour un travail plus pouss Http www framasoft net 11 106 B Installation et configuration Tutoriel Framasoft B Installation et configuration Site officiel de Nvu http nvu com gt Adresse de t l chargement de Nvu version fran aise http frenchmozilla sourceforge net nvu gt Communaut fran aise consacr e Nvu http Www geckozone org forum viewforum php f 20 1 Insta
4. UN 9 4 2 orientation choisie du tutoriel TES CUS EMIN OMS re en E A nee nn en annee eee ee 0 12 12 SOUS INURE e a aa A aE EEEE De an anne dns nn E E AA ee RER nee nn mn neue 13 13 nstallation de NVLSOUS KART Enr e A sara Pen nn AA een A A nes sta A ie Teens 15 4 nstallationdeNVUrSoUS MICOS DORE mener riens annees ne Rene nan den sente nu Dents e se ennemie eee 16 125 Mise ar Our eANVUN MIN GO OWS TE LINUX Eee e ee ri ttes inst E E AEA AAAA nnn is een en 1L7 22 Configuration Aa ee Aa E A RAA ee Ie 18 CV Utilisation oee a a A a E E a a a R LO 1 Exemple de texte reproduire tel quel la Main rrnnnannnnnnennnnennens 19 LMD DUEAUIDrEE MIE exercice ninoio re e e A DIR eee ne nee PAR rente E E n en eeeeeeene e 19 2 Edition d ne page MEDEF run ennemen eee e annee sem miennes Un ne nDe ess ani en eme eue 22 2 1 Premi re tape param tres g n raux d une page HTML annnnnnneaannnnnnnnmmneereeasennnnn 22 2 2 Pourquoi d finir ces param tres Est ce utile 7 2 3 Deuxiemer ta peritrans Grip Ei0 NEAURLE Xe nee ne nn en nee E eee 2 3 Mika structurerduitexte 1252207 ne Teese sante EE care e Da ner en eee INT EAEE E EA A coter AE date E a entrer sec ne 24 2 3 2 Les l ments structurels listes liens tableau images table des mati res 27 PDA DST UT QUI SNCO ALU LA LEA 0e Lo Lo BA ere Peer eee ne en eee 2m 2 5 Exembpleide Code MMM es rnnenneen mes a aaan EEA AAE
5. Une mani re encore plus simple est de garder le concept g n ral dans le nom de la page etoiles htm gt Auteur Http www framasoft net 23 106 2 Edition d une page Web Tutoriel Framasoft Votre nom ou votre pseudo il doit normalement tre d j pr inscrit gt Description Une courte description du contenu de la page Par exemple une br ve introduction au langage HTML gt Internationalisation gt Langue Choix de la langue utilis e pour la page web gt Sens d criture Choix du sens d criture De gauche droite ou de Droite gauche gt Encodage Si l encodage n a pas t d termin dans vos pr f rences par d faut vous pouvez le faire ici L encodage par d faut pour l Europe Latine est ISO 8859 15 2 2 Pourquoi d finir ces param tres Est ce utile L ensemble de ces param tres contribuent une lecture optimale de votre page C est aussi simple que cela Ce sont des param tres g n raux d identifica tion qui renseignent sur la nature de cette page et comment le navigateur doit r agir en fonction x C est donc penser l utilisateur visiteur de votre site et lui assurer un confort de navigation non n gligeable 2 3 Deuxi me tape transcription du texte 2 3 1 La structure du texte Pour retranscrire le texte vu plus haut nous allons utiliser les codes d crits ci dessous pour la structure s mantique de la page Vous travaillerez avec l onglet des p
6. text decoration none style pour les liens colors rgo 255 2565 255 athover color rgb 51 51 51 style quand le lien est activ 1 4 R soudre le probl me du positionnement pour les navigateurs bas s sur Internet Explorer Voici un probl me un tantinet technique qui n cessite une petite explica tion Partons du point de vue de l utilisateur Il est souvent appr ciable d avoir un menu fixe qui ne bouge pas lors du d filement ou du changement de la page Ce qui se traduit en termes CSS par donner une position fixe notre menu et un positionnement gauche par exemple Nous ajoutons le code suivant pour balise lt dl gt gt dl Mporder4Apx double rgb 255 255 255 SE Vle g n ral Ta liste de d finition padding SPE packoground s color mego SSO color Irgo 2557 255 255 background image url file C tutoriel Nvu acrose img fleur png il faudra transformer l adresse physiqu n adresse relative background position center width 9em gt position fixed top 5 left 1 Si cette solution est tr s bien accept e par les navigateurs supportant cor rectement les feuilles de styles nous retrouvons notre couple Internet Explorer Http www framasoft net 77 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft versions 5 et 6 qui ne connaissent pas la position fixe Le r sultat n est pas satisfai sant pour ces navi
7. 0 lt style gt lt head gt lt body gt lt h1 gt Le langage html lt h1 gt lt h2 gt Pr amp eacute sentation lt h2 gt lt p gt lt span id surligne gt HTML lt span gt sigle de HyperText Markup Language litt amp eacute ralement langage de marquage hyper texte est le langage con sccedil u pour cr eacute er les pages du World Wide Web C est un langage de description de document bas amp eacute sur SGML lt p gt lt body gt lt htnml gt 2 8 Fin du troisi me exercice Ouf Un gros morceau vient de passer et pourtant il reste encore de nom breuses choses voir Mais reposons nous 5 minutes avant de replonger dans la suite de ce tutoriel La bonne nouvelle si vous avez suivi toute cette partie consacr e la pr sentation et l utilisation de l diteur Cascades la derni re partie sera encore plus simple puisqu il suffira de changer un seul param tre pour exporter une feuille de style Enfin nous verrons encore quelques outils bien pratiques puis ce tutoriel Http www framasoft net 60 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft sera quasi fini Astuce Attention 1 Cette astuce est valable lorsqu est utilis e une pr sentation respectant les principes g n raux des standards du w3c il n est pas prouv ni affirm que cette astuce fonctionne dans le cas d une mise en page avec des tableaux ou des frames Elle
8. Comme vous pouvez le voir il y a l tout une s rie de codes qui correspondent au format du document alors que notre phrase est tout en bas Passons sur le sens de ce codage Vous remarquerez trois choses essen tielles les caract res du texte ne poss dent aucun signe diacritique accents et c dilles en tout genre accompagnant voyelles ou consonnes suivant les langues On dit alors que le format du texte est UTF 8 comme vous pouvez le lire dans la premi re ligne Quant nous nous utiliserons le terme de texte brut vous remarquerez aussi les signes lt gt et lt gt qui repr sentent ce que nous appellerons des balises Ces balises servent distinguer le texte que vous crivez de l l ment code qui sp cifie la forme stylistique et l aspect typogra phique La structure des fichiers abiword est tr s proche de la structure d un fichier HTML Vous y retrouvez une section Doctype qui correspond la d finition du type de document pour les pages HTML une section metadata qui correspond au m ta donn es en HTML une section styles que vous retrouvez aussi en HTML une sec tion pagesize qui correspond l l ment body en HTML et aussi des balises que vous allez tr s vite rencontrer comme p qui d finissent un paragraphe 1 3 Le format texte brut On pourrait presque dire que c est le format d criture natif tout ordina teur Il ne demande aucun style typographique n accepte aucun accent et a besoin de
9. Http www framasoft net 70 106 G tude de cas Cr ation d un menu de navigation Tutoriel Framasoft G tude de cas Cr ation d un menu de navigation Maintenant que nous avons un peu d exp rience essayons de r soudre un probl me qui tracasse bon nombre de webmestres la cr ation d un menu de navi gation Beaucoup utilisent la version simplifi e avec un tableau deux colonnes La colonne de gauche servira de menu la colonne de droite de contenu Bref c est une utilisation simplifi e l extr me des cadres ou frames Voyons ce que nous pouvons faire avec Nvu et quels sont les outils mis notre disposition 1 Toujours la m me id e mais avec de la structure et du style Nous allons garder toujours la m me id e avec un menu de navigation pla c gauche de notre page et un contenu droite En comprenant bien le syst me de structuration des blocs o chaque l ment d une page HTML repr sente un bloc que ce soit un paragraphe ou lt p gt lt p gt un titre lt h1 gt lt h1 gt etc auxquels seront attribu es des propri t s de mise en page place dans l espace de la feuille ou flux attribution d une couleur de fond de bordures etc nous pouvons facilement ranger au placard la mise en page avec des cadres ou des tableaux De plus nous savons qu avec les conteneurs g n riques calques ou div nous pouvons assembler plusieurs l ments d crivant une m me structure et les retirer du flux de
10. es titre informatif Nvu g n re automatiquement tout cela Structure hi rarchique d une page HTML Structire du document DOCTYPE S html head body Image 7 Structure g n rale d une page HTML Structure de l en t te ou head Dans l ent te vous placez le titre de la page l encodage g n rique ISO 8859 15 le nom de l auteur les informations de style la direction d criture Bref ce Http www framasoft net 27 106 2 Edition d une page Web Tutoriel Framasoft Structure du document DOCTYPE hml head emen title page exemple L Sbody border 3px solid rgb 255 255 255 body mage 8 Structure de l en t te d une page HTML Structure du document html h1 Le langage html E h2 Pr amp eacute sentation P HTML sigle de HyperText Markup La h2 Explication du langage html B Les documents HTML sont g amp eacute E i Il y a trois types de balises HTML ul H o es li Paiga L ians LE osssesseosses mage 9 Structure du corps d une page HTML Http www framasoft net 28 106 2 Edition d une page Web Tutoriel Framasoft Le corps de la page quant lui est l endroit o vous placez le contenu de votre page Voici les principales balises avec lesquelles vous risquez de travailler le plus souvent Chaque balise est double une pour l ouverture lt gt et une autre pour la fermeture lt gt Pour les titres il exi
11. gt lt html lang fr gt lt head gt lt meta http equiv Content Type concent uee C E ehars ee ece o5 RE lt title gt mapagel lt title gt lt meta content votre nom ou pseudo name author gt lt head gt lt body gt lt h1 gt Le langage html lt h1 gt lt h2 gt Pr amp eacute sentation lt h2 gt lt p gt HTML sigle de HyperText Markup Language litt amp eacute ralement langage de marquage hyper texte est le langage con amp ccedil u pour Cr eacurerer les pages Cu Morlel Wide Web C est un langage de description de document bas amp eacute SUE SGML lt p gt lt body gt lt html gt Http www framasoft net 31 106 2 Edition d une page Web Tutoriel Framasoft 2 6 Fin du premier exercice Ce premier exercice vous a permis de vous familiariser avec Nvu ainsi qu avec la structure s mantique simple d une page Web sans aucune forme de d coration uniquement du texte des paragraphes des titres et une liste Dans les prochaines parties nous allons voir comment nous pourrons mettre en forme une page Web chaque nouvel exercice nous irons un peu plus loin dans la sophistication de la mise en forme Elle se d roulera en trois tapes principales gt mise en forme int gr e au code HTML gt mise en forme avec une feuille de style interne gt mise en forme avec une feuille de style externe Http www framasoft net 32 106 D ire tape mise en forme i
12. pour PARAgraphelNFOrmation Astuces 1 Les sigles g n riques d attribution de classe et d identification Le sigle est un sigle g n rique et vous servira pour tous les identifiants id de m me que le sigle g n rique pour les classes est un point Sur la feuille HTML le code suivant sera report lt p id parainfo gt soit ce paragraphe j applique une seule fois les r gles comprises dans l identificateur parainfo de la feuille de style Notez ceci cependant vous pouvez appliquer cet identificateur sur plusieurs pages HTML diff rentes mais qu une seule fois seulement si vous souhaitez attribuer ses r gles plusieurs fois dans une seule et m me page choisissez plut t une classe d attribution dans la feuille de style parainfo au lieu de parainfo et elle sera report e dans la feuille HTML avec le code suivant lt p class parainfo gt Ne vous inqui tez pas tout cela se r alise tr s facilement avec Nvu 2 Comprendre la diff rence entre attribution d une classe un ou plusieurs l ments HTML et attribution d un style un ensemble de marqueurs HTML Dans une page HTML la balise que vous rencontrerez le plus souvent est la 5 si vous lisez ce tutoriel avec OpenOffice org activez le styliste en appuyant sur la touche F11 et s lectionnez styles personnalis s Http www framasoft net 46 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft balise
13. tape utilisation des styles internes Tutoriel Framasoft E 2 tape utilisation des styles internes 1 Au paradis des extensions NON NVU Je dois signaler cette extension qui vous aidera mieux comprendre com ment est structur e une page Web Si vous poss dez le navigateur Firefox n h si tez pas installer l extension Aardvark Une fois lanc e gr ce au menu contextuel elle vous montrera quels sont les blocs que vous survolez En appuyant sur la touche v du clavier vous pouvez voir la source correspondante Vous pouvez aussi isoler l l ment s lectionn avec la touche i Une extension tr s p dagogique qui vous montrera l envers du d cors Elle vous aidera mieux saisir la relation entre balises d une page et leur stylisation puisque qu une r gle de style ne fait qu appeler telle ou telle balise de la page Vous trouverez l adresse de t l chargement sur le site de framasoft Il existe de plus en plus d extensions pour Firefox consacr es au d veloppement Web Consultez le tutoriel D veloppement Web avec Firefox disponible sur Framasoft il Vous pr sentera un panel des meilleures extensions dans le genre 2 Mise en forme avec une feuille de style Pourquoi travailler ainsi pouvez vous vous demander D abord afin d apprendre s parer clairement contenant et contenu ou structure d un texte et sa mise en forme Ensuite en respectant cette forme de mise en page vous ouvr
14. Auquel cas l adresse enti re s inscrit genre file Users MonDisque Docu ments monsite Dossierlmages image jpg Ensuite il faut effacer le d but de l a dresse garder donc Dossierlmages image jpg et alors seulement la case adresse relative se coche automatiquement Il faut tre vigilant et v rifier que dans le code l adresse est bien relative De m me pour les images de fond et pour Http www framasoft net 16 106 1 Installation Tutoriel Framasoft les feuilles de style je suis oblig e d aller rectifier les adresses dans le code Ce point r gl les liens fonctionnent parfaitement Comme navigateur j utilise par d faut Safari qui est le navigateur propre de mac et qui fonctionne tr s bien mais occasionnellement j utilise IE car il arrive que Safari n affiche pas certaines pages correctement Pour Nvu j ai donc aussi pris Safari comme navigateur par d faut En g n ral il affiche mes mises en page de fa on tr s satisfaisante mais j ai pu remarquer que ce n est pas toujours exacte ment la m me chose que dans la fen tre de Nvu et cela je ne me l explique pas 1 5 Mise jour de Nvu windows et linux Les nouvelles versions de Nvu sortent tr s souvent et par habitude nous aimons avoir la derni re version qui est cens e tre meilleure que la pr c dente Sous windows pour installer une nouvelle version Il faudra enlever l an cienne version compl tement Pour la version francis e il existe
15. EAA E 101 1 5 Pourapprofondinlaiconnaissance dullangageiAmMU A nnna E E 102 2 iles struct res dtune page Webietdiun site is renas aeea E EEEE ERER eee 102 2 1 R diments dela str ct re logique d une page Webim Anaan a e EEA 102 2 2 R diments dellaistr ct re logique diun site Web i iein areatan anA EEEE EEEa E AETAT E EE 103 2 3 Leidesign des pages Web r Voirdou lirei ir narinari a E E E E E E a ATA 104 2 4 Outils d aide suppl mentaires pour le design des pages Web eesseseenresssssnnnrinrrrnnsrnnnnnnnrrrnnnnnnnnnnrnnnna 104 25 Commenticr eruntsite MED an ere mme Dern E nn ant nn einen ses 105 Http www framasoft net 6 106 A Introduction Tutoriel Framasoft A Introduction 1 Pr sentation Depuis la version 0 7 le programme est devenu modulaire Il accepte des extensions qui incluent des options non pr sentes dans la version standard Il m a sembl juste en cons quence de revoir aussi la conception du tutoriel en fonction de cette nouvelle approche Vous trouverez d sormais deux types de tutoriels gt N vu Standard celui ci qui se consacrera l interface standard sans extensions et gt NJvu modulaire qui tudiera et ou pr sentera telle ou telle extension particuli re et approfondira quelques points techniques 2 Changements Aujourd hui le centre d aide de Nvu tant bien traduit en fran ais il n est plus n cessaire de garder la partie descriptive de ce tutoriel partie qui
16. EEA EARE ARAETA a EAE AAA EEA E AA EEA Ea ROE EA mines eds EEE 31 226 EIMIAUIPrEMIC EXC CICR a e E E A E E E E 32 D Ire ta e mise en forme int reee ne ie ae 33 2 t ToutsSavoir surla mise entformeiNt gr e nn dr eines rene EE eee ne ee den ni nn 35 2 2 Exemple de code HTML pour une mise en forme int gr e nanas 35 273 EINEAUrSECON EXC CIE ma ioia ans red esse ar aies na E E ne ne Rime Sn 2e See DEN Te Mie Lre sde 37 E 2e tape utilisation des styles interneS assunssnsnnnnnnnnnnnnnnnne DO Http www framasoft net 4 106 Tutoriel Framasoft D butiduitroisi mereXe CIC AITAN E Tnt en en en nm en en een 39 2AD 2 2 D couverte de l diteur CSS Cascades 223 2 41 Premier exercice mise en forme SIMple imien meisi erer rean Aeae EA EE EAEE PARERE TETE SEAE PETTEE Ee EEEE EEE 47 24 2 De xieme exercice mise en forme Complexe neei ar aea aa aae EE EAE ee eee 50 2 4 2 1 Transformer rapidement un hyperlien en OuUtoOn ssssesssssssssssssssssrsrtrttrtrtrrtrnrrrtirirsrreseneseerernnenen 2 42 2 Mise enforme des calques eona eE AEE T EAEE P EAEE TE ARETE EEE Ea se E EREE TE 2 4 2 3 Modification des param tres d un calque avec l diteur CSS 2 4 2 4 Modification des param tres du sous titre du calque 2 5 Une autre m thode le conteneur g n rique lt div gt 216 R CA DIEU A EEE san pare tn Da E nn anne Mana nan E en laine de E E E E F 3e tape
17. La galerie de photos stylis e Galerie de photos Image 34 galerie photos stylis e Les photos utilis es sont tir es du domaine public et libres de droits pour une utilisation non commerciale sauf une publi e sous licence art libre celle de l abeille adresse de l auteure http www saij copyleft net Voici le code css excessivement simple qui a servi rendre cette galerie agr able l oeil Paima 1 borcers Apr double zgo Sl Bl 51 7 margini 5HE Http www framasoft net 88 106 3 tude de cas gestion d une galerie de photos Tutoriel Framasoft Comme nous savons que chaque marqueur HTML est consid r comme un bloc il suffit d utiliser cette propri t au bloc HTML lt img gt pour image auquel j ai attribu une bordure double de quatre pixels d paisseur et de couleur grise Pour cr er la s paration entre chaque photos j ai attribu sur chaque bord du bloc lt img gt une marge de 5pt d paisseur Bien s r il est souhaitable de mieux organiser cette galerie en ajoutant un nom sous chaque photo par exemple auquel cas il faudra utiliser des l ments l g rement plus complexes mais que nous avons vus avec la cr ation d un menu de navigation je parle des listes de d finition 3 3 Publication de la page Une fois votre page termin e pour la publier il suffit d utiliser et de cliquer sur le bouton Publier A Le souvents Ge
18. Nvu puis lancer la commande gt cd c net Nvu cd pour Change Directory Changer de r pertoire Di recteur si vous avez plac Nvu l installation dans le r pertoire net la racine de Ci c net Nvu gt nvu edit c documents and settings nomutilisateur mes documents mapage htm 1 3 Installation de Nvu sous Kde Demande d aide Quelqu un a t il essay avec les nouvelles versions du programme Merci de d indiquer les modifications s il y a lieu J ai trouv dans le forum sur framasoft consacr Nvu cette explication pour installer Nvu sous kde Je suppose que le mode d installation est le m me pour la version 1pr que pour la version 0 6 Je remercie Fidipat pour cette explica tion Je l ins re ici parce qu elle y a toute sa place J ai essay plusieurs packages mais le seul qui vous permet de ne pas avoir de messages d erreur au lancement est celui ci http cvs nvu com download nvu 0 60 pc fedora2 kde tar bz2 C est bien une version pour fedora mais elle marche aussi pour Mandrake ou aller directement sur la page de download du site officiel nvu com http nvu com download html 1 D compresser l archive dans le dossier opt Clic droit sur le fichier gt Actions gt Extraire dans 2 Prendre le nouveau dossier Nvu et maintenir le clic droit dessus jusque sur le dossier usr bin Choisir Lier ici 3 Ic ne de Nvu sur l cran bureau Http www framasoft net 15 106 1 Installation
19. SuN 14 05 04 premi re version pour Nvu 0 2 24 06 04 corrections mise jour 0 3 25 08 04 gt 19 10 04 am lioration g n rale enfin je l esp re Nvu 0 5 janvier 2005 Nvu Standard et Modulaire Nvu 0 8 mai 2005 version plus l g re presque Nvu 1pr ao t 2005 r vision et adaptation la version 1 finale d cembre 2005 quelques r visions ajout extension urlcleaner changement du type de licence Http www framasoft net 2 106 Tutoriel Framasoft 5 EA Nyu abc es pti 7 n zP Publier Navigateur 5 n Tableau Formulaire Orthographe Imprimer Launchy Source Couper diteur Copier aB U Largeur variable AUN fee fe ra pa e3 lt meta content jean marc juin name author gt lt style title galerie media screen type text css gt img border 4px double 333333 margin Spt oy lt style gt lt head gt lt body style direction itr gt kbr gt lt img style width 150px height 100px alt 3j srce mesphotos photol jpg gt lt img style width 150px height 100px alt ad srce mesphotos photo2 jpg gt lt img style width 150px height 100px alt ad sre mesphotos photo3 ijpg gt lt img style width 150px height 100px alt ad sre mesphotos photo4 ijpg gt lt img style width 150px height 100px alt ad sre mesphotos photos jpg gt lt img style width 150px height 100px alt ad sre mesphotos photo6 jpg gt lt
20. avec l diteur puis pour le prochain exercice vous passez en mode expert par exemple gt Les onglets gt G n ral D finition g n rale de votre feuille de style son nom quel m dia elle s applique cran d un ordinateur screen imprimante print ou tous les m dias all m dias cran d ordinateur cran de t l vision cran d une console de jeu d un t l phone portable etc Tel est l avantage des feuilles de style pouvoir d finir un style soit pour un m dia pr cis avec chaque fois une feuille diff rente soit plusieurs m dias dif f rents mais avec une seule et m me feuille cette solution sera un peu plus contraignante que la pr c dente pour de bonnes raisons imaginez l impression d une page Web en couleurs pas vident Attention Ces onglets s appliquent aussi bien pour le conteneur g n ral lt body gt ou corps de la page HTML que pour un bloc particulier titre de hauteur 1 ou lt h1 gt paragraphe ou lt p gt etc gt Texte Vous d finissez tout ce qui se rapporte au texte Famille de police Taille de la police Couleur de la police et D coration du texte gt Fond Http www framasoft net 42 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Vous d finissez tout ce qui se rapporte au fond Couleur ajout d une Image Doit elle ou non d filer avec le texte l image d file avec la page Doit elle tre r p t e sur toute la
21. d compacter l archive gt cd nvu validez avec entr e aller dans le r pertoire nvu gt nvu validez et c est parti lancer nvu Note pour les utilisateurs trices de Linux Pensez au fait que l installation avec une archive tgz n installe pas le programme dans le Path Donc n oubliez pas de modifier votre fichier Bash profile en exportant le chemin de Nvu De la sorte le programme pourra tre d marr de n importe o partir de la ligne de commande au lieu d aller chaque fois dans le r pertoire propre de Nvu En dessous de la ligne suivante ins rez le chemin de votre archive et enregistrez les modifications User specific environment and startup programs export PATH S SPATH opt nvu 1 0PR pc linux2 6 10 fr J ai install l archive nvu dans le r pertoire opt ou opt nvu 1 0PR II suffit de taper nvu et le programme se lance automatiquement gt Ouverture d une page pr cise avec un terminal Vous pouvez aussi utiliser nvu edit l url de votre page HTML url adresse dans l arborescence du syst me de fichiers Imaginons que votre page Http www framasoft net 14 106 1 Installation Tutoriel Framasoft HTML mapage htm se trouve dans le r pertoire Documents Il suffit d inscrire la ligne de commandes suivante nvu edit home nomutilisateur Documents mapage htm Pour les utilisateurs sous windows il faudra d abord vous placer dans le r pertoire o vous avez install
22. du texte et passez la couleur du texte cOcOc0 Et voil la couleur de votre titre de paragraphe chang e facile non Voici le code correspondant pour un style interne gt lt h2 style color rgb 192 192 192 gt explication lt n2 gt Ce style est interne cet l ment pr cis Nous allons voir comment extraire ce style interne pour le transformer en style g n rique et l ins rer dans une feuille de style Activez et Cliquez sur la balise h2 avec un clic droit re s lectionnez Styles internes un nouveau dialogue s active Extraire et cr er un style g n rique Cli quez dessus et extrayez le style interne vers un style g n rique Http www framasoft net 82 106 3 Ajouts de styles en ligne Tutoriel Framasoft Creer un style generique cor pour moi Image 31extraction d un style Cette bo te de dialogue fabrique des styles g n riques que vous appliquerez soit l l ment int ress cet l ment uniquement soit tous les marqueurs de type h2 tous les l ments et en plus vous pourrez l appliquer aux l ments ayant une classe du m me type ou encore provoquer un changement quand le pointeur passe dessus j aime beaucoup cette option Enfin vous avez la possibilit de choisir un nom pour identifier ce style ou de laisser Nvu choisir pour vous choisir pour moi Malheureusement ce style g n rique ne s appliquera qu cette feuille comme un style interne
23. est valable uniquement pour Internet Explorer 6 Avec Internet Explorer 5 il faudra mettre la main dans le cambouis un peu plus longuement 2 Ce travail sert d introduction une mise en page d finie comme suit menu de navigation contenu Nous verrons plus bas comment pallier tr s facilement ce probl me d int gration des feuilles de style pour Internet Explorer Nous n avons pas vu la fonction Navigateur Essayons de voir le r sultat dans un navigateur externe Si vous poss dez Mozilla ou un navigateur de la famille Gecko Mozilla Firefox Nvu et et si vous tes sous Windows le r sultat est fid le Cependant si Internet Explorer est votre navigateur par d faut a e a e aie vous risquez d avoir quelques surprises dans la mise en forme Vous avez d maugr er en voyant que le r sultat n tait pas le m me entre Nvu et Internet Explorer D o cela provient il D une chose trange que l on appelle la dtd soit d finition de type de document Si vous souhaitez obtenir le m me r sultat que sous Nvu il va falloir l g rement modifier la dtd pour qu Internet Explorer lise correctement vos sp cifications C est dire modifier le balisage par d faut de Nvu qui est d fini comme HTML 4 de transition La seule chose faire est de passer en mode strict Malheureusement ce changement n est pas dynamique et nous oblige cr er un nouveau document Trop lent Donc passons par l onglet Source Cliqu
24. gt Donc il va falloir prendre le probl me l envers Pour cr er un conteneur g n rique il faut d abord cliquer dessus Puis tapez la structure de votre texte en titres sous titres paragraphes liste etc Http www framasoft net 58 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft C est une autre mani re de cr er un conteneur g n rique 2 6 R capitulatif Il n est certainement pas vident de comprendre du premier coup les propri t s CSS C est pour cela que l diteur cascades est vraiment d une tr s grande qualit et utilit Il ne servira pas comprendre pr cis ment telle ou telle propri t mais en sentir l effet en l utilisant Ce qui pour des d butants n est nullement n gligeable surtout si l dition Web est pour eux plus un hobby qu un m tier ce qui est mon cas Les propri t s des feuilles de style ont cette qualit tonnante chaque balise HTML est consid r e comme un bloc lequel peut tre enti rement param tr Largeur et Hauteur du bloc sa couleur de fond la couleur du texte ou couleur de premier plan son emplacement par rapport la feuille suivra t il le flux de lecture relation de d pendance relative ou en sera t il ind pendant fixe absolue Il est possible de pousser encore plus loin certaines propri t s en choisissant de changer l aspect du bloc suivant certains v nements l instar du bouton hyperlien que nous avons vu Enfin
25. img style width 150px height 100px alt ad sre mesphotos photo7 ijpg gt lt img style width 150px height 100px alt ad srce mesphotos photos jpg gt lt img style width 150px height 100px alt ad srce mesphotos photo9 ijpg gt lt img style width 150px height 100px alt dad sre mesphotos photo10 5jpg gt lt img style width 150px height 100px alt ad sre mesphotos photoi1 ijpg gt lt img style width 150px height 100px alt ad src mesphotos photo1i2 jpg gt lt br gt lt br gt lt body gt lt html gt Normal o Balises HTML E Source R Aper u Correcteurs Christian Choul Goofy Bas sur la version francis e 1 CEST Publi sous licence Creative Commons By ShareAlike V2 http creativecommons org licenses by sa 2 0 fr Ce document sera mieux lu avec la police bitstream la t l charger cette adresse http ftp gnome org pub GNOME sources ttf bitstream vera 1 10 Aux utilisateurs de Mac os x Il y a un petit bug de lecture pour le format pdf Si j ai bien compris n utilisez pas le mode aper u de votre lecteur pdf C est ce dernier qui cr e les d sormais c l bres hi roglyphes du tutoriel Http www framasoft net 3 106 Tutoriel Framasoft Table des mati res A introd ction raae aa ea a E a a E aa E A aE a A ae a 4 1 L orientation choisie du programme conformit aux recommandations du W3
26. lt p gt pour paragraphe Avec l diteur CSS vous reportez la lettre p et lui attribuez plusieurs r gles de styles Cependant vous souhaitez attribuer des r gles diff rentes quelques uns des paragraphes c est ce moment o la r gle class intervient et vous permet d attribuer plusieurs l ments HTML identiques une m me classe d attribution Ainsi vous obtenez plusieurs styles diff rents pour vos paragraphes pratique Par exemple un paragraphe sur deux doit tre de couleur diff rente du pr c dent 3 Comment conna tre la balise laquelle je vais appliquer une r gle Rien de plus simple Cliquez sur l onglet Balises HTML de la barre d dition o toutes les balises HTML sont indiqu es Il suffit de relever celles qui vous int ressent et de les reporter directement dans l diteur Cascades gt Pour l exercice Passons la cr ation des r gles de mis n forme en appuyant sur le bouton Cr er une feuille de style Body s affiche dans la fen tre de gauche et maintenant vous avez acc s aux onglets 2 4 Un peu de pratique 2 4 1 Premier exercice mise en forme simple Le but de l exercice je vous donne les propri t s CSS pour la mise en page retranscrivez les avec l diteur et observez les changements qui se pro duisent au fur et mesure N oubliez pas de cr er une r gle nouvelle pour chaque nouvelle balise en cliquant sur R gle chaque fois N oubliez pas de cliquer sur
27. mettre jour la galerie il se suffit de lancer le gestionnaire de sites Puis de s lectionner la page qui vous int resse Celle ci se chargera automatique ment dans le programme et vous n aurez plus qu ajouter vos photos et deman der une publication Un petit d faut tout de m me Le gestionnaire de publication ne prend pas en charge les photos d j publi es sur votre site Lorsque vous demanderez la pu blication il va automatiquement tout recharg Ce d faut n est pas tr s important si votre page ne contient pas beaucoup de photos Dans le cas contraire il vous mieux s parer les photographies et la page en question et passer par un gestionnaire de publication externe Ceci est d au fait que Nvu consid re le syst me de publication des pages comme un tout ce qui est logique puisque c est un diteur de pages web en mode WYSIWYG Http www framasoft net 90 106 J Personnalisation Tutoriel Framasoft D Personnalisation 1 Ajouter des outils compl mentaires Cette Version vous permet d sormais d ajouter des modules externes Vous disposez de deux types de modules les Extensions et les Th mes gt Les extensions Les extensions sont des archives au format xpi qui est un format propre aux programmes qui se rattachent au moteur de rendu Gecko Mozilla firefox Nvu pour les plus connus et apportent des fonctionnalit s suppl mentaires au pro gramme O trouver les extensions Elles sont r
28. page R p tition Quelle sera sa Position La fonction de r p tition d une image est utile pour une image de type papier peint accordable gt Bordures Vous d finissez le Style des bords de vos blocs soit la vol e pour les quatre c t s du bord Utiliser le m me style pour tous soit un par un ainsi que leur paisseur leur Couleur auquel cas vous d cochez Utiliser le m me style pour tous gt Bo te Voici une autre notion importante la notion de bo te Fa tes une associa tion de ce style bo te d un bloc La bo te est la forme ext rieure de votre bloc forme laquelle vous allez donner une taille hauteur et largeur un emplacement pr cis dans le corps de la page flottement de votre bo te sur la droite sur la gauche une Position absolue avec un emplacement au pixel pr t une d pendance relative par rapport aux autres bo tes soit une Position relative Vous indiquerez aussi l espacement par rapport aux marges du corps de la page Marges l espacement l int rieur du bloc afin que le texte ne colle pas trop au bord du bloc Remplissage un Excentrage par rapport la page dans les cas d une Position relative ou absolue de votre bo te gt Son Vous d finissez des r gles de lecture de vos pages Web afin d aider les personnes rencontrant certains handicaps en d finissant le d bit de lecture la Pro nociation Http www framasoft net 43 106 2 Mise en forme avec une feuille de styl
29. ral rente Fond Bordes eote audo Descendre _ Recharger 5 JpprImer import media Feuille li e Feuille incorpor e R gle Mode Expert Image 13L diteur CSS l ouverture gt Boutons Feuille li e et Feuille incorpor e Le premier vous servira lier une m me feuille de style pour plusieurs pages HTML nous verrons cela plus en d tail dans le prochain exercice Le bouton Feuille incorpor e est celui qui nous int resse pour cet exercice il d signe un nou veau groupe de r gles CSS incorpor la page HTML Cette incorporation se fait g n ralement dans l ent te de la page gt Fen tre Feuilles et r gles La fen tre au dessous de Feuilles et r gles est une vue en arbre de votre feuille de style feuilles avec les s lecteurs auxquels vous avez attribu des pro pri t s ou r gles gt Boutons Monter Descendre Recharger Supprimer gt Ces boutons sont essentiellement des gestionnaires pour vos r gles gt Case cocher Mode expert Http www framasoft net 41 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Case non coch e Mode non expert votre feuille de style sera automati quement li e dans l ent te de la page Case coch e Mode expert vous autorise l utilisation des r gles media une meilleure gestion des feuilles de style Remarque Pour vous aider vous pouvez r aliser cette partie de l exercice en mode non expert afin de vous familiariser
30. ration interm diaire 2 num ration interm diaire Lancez la liste choisie et appuyez sur la touche Tabulation Tab Pour revenir une section sup rieure appuyez sur la combinaison shift Tab Pour une insertion de liens lt a href http www framasoft net gt framasoft lt a gt S lectionnez le mot lier activez la bo te de dialogue liens ink et ins rez l adresse Pour une insertion d image lt img src alt gt Option utiliser selon la pertinence du propos de la page si ce n est qu un papier peint utilisez de pr f rence une feuille de style d di e sp cialement cela Http www framasoft net 30 106 2 Edition d une page Web Tutoriel Framasoft 2 5 Exemple de code HTML chaque fin d exercice o nous voyons une fonctionnalit majeure de l di teur nous allons observer ce qui s inscrit dans le code le HTML Nous ne garderons pour les exemples que les premi res phrases afin d all ger le code Vous pourrez ainsi mieux faire la relation avec ce qui a t d crit dans l annexe La double face du langage HTML Les conventions d criture sont les suivantes valables pour les exemples HTML et CSS Couleur bleue pour la description d une propri t couleur rouge pour la valeur attribu e cette propri t Voici le code HTML correspondant votre frappe en mode WYSIWYG lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN gt
31. sera sa structure Comment la concevoir gt Quelle sera sa charte graphique Qu est ce qui doit tre vu et qu est ce qui sera lu gt Qui va crire le code moi Quelqu un d autre plusieurs Http www framasoft net 105 106 2 Les structures d une page Web et d un site Tutoriel Framasoft gt Qui va maintenir le site et le mettre jour Quelle sera sa fr quence de mise jour Si aucune de ces questions ne rencontre de difficult s alors vous tes pr t partir l aventure Http www framasoft net 106 106
32. son texte Ce qui est plut t normal lorsque le processus interne de transcription du programme vous est d lib r ment cach Le cach est le codage qui n appara t pas Ce codage qui n appara t pas est prot g par une li cence de type propri taire Avec un programme prot g par une licence libre vous avez acc s ce codage 1 1 Petite explication Il ne sera jamais assez dit qu un ordinateur est compl tement stupide son intelligence provient de la mani re dont l tre humain l utilise et non l inverse sauf pour le cin ma et les livres d anticipation Un ordinateur ne sait rien dans l absolu il faut tout lui dire Lorsque nous lisons un livre un passionn de livres est un liseur et non un lecteur le lecteur lit le journal o un magazine nous savons faire la dif f rence entre le titre le sous titre un paragraphe une image un tableau etc L or dinateur quant lui ne sait rien distinguer et il n a ni connaissance pr alable ni connaissance intuitive de la structure qui organise un texte Lorsque dans un traitement de texte nous d sirons un titre g n ral nous utilisons un titre de hauteur 1 ou titre 1 pour la plupart des suites bureautiques Ce format correspond par une convention explicite ou implicite des caract res gras accompagn s d une certaine hauteur des lettres qui va permettre de le dif f rencier du texte par exemple Il suffit d observer la structure de ce texte pour le comprendr
33. tiens esse 86 6 2 lLestllensirelationmels RE den demnr nn amener e nn ere E dar en nee NT es nee US 86 l G rez votre site en ligne sans quitter Nvu ssnsnunnnnnnnnnnnnnnnnnn OZ Http www framasoft net 5 106 Tutoriel Framasoft 3 0 Pr paration de lai age an nan manne TO Ann ame iles rain 87 32 Lagalerie dephotosistyli s e a maman net etes ne a seen E E E 88 3 3 PUblication de laipage roris ia enie DEAA e EEA a aE AE EE EAE RAA aAA AAE AE E aaa 89 3 4 Miseajourdeilaigaleriesdeipho tO SR ae annee E Ea EE E A EE 90 Personnalisation ne A a OE I Ajo terdes outils compl mentaires ernan eeaeee E e e aee e EE A RREA 91 1lhiinstallation diner extensioN ti rn iiirariia rn EEA aAA ATAA OA AAEE ne Eea A a EE AEE a 91 EARE Eno AU DA AE EEEa EAEE EE E E 92 1 3 Gestion des erreurs 0ULBUJS et SUggeEsStioNS ninri iiaea aae AE EE A A A A E 92 VA PourallerplusNoiNenNcore ria nee E a E E E etes seen 93 ast EEE EAA N A E E A E E E 93 K C ncluUsSi o Massin E a E E a a a aa JD N Ene E E E E E anUe see A tte l ne er o rene 96 LP ANNE NES tannins De Sean nee te san eu eme un din ns de tata este en DT TIY Petiterexplhica tiOn n an nirean AA EEEE AAAA AE aan n tes AAA reste A A AAE s diner sons 97 2Y Savoir fairelardiff rene nn E A A E E A ann nes 98 T3 letormat texte Drut oirra a A S A a a T A A A E 100 T4telangagerdespages Web arr aae a a e a a E a E E E
34. un menu de d sinstallation dans la ver sion originale il faudra aller dans le r pertoire o se trouve Nvu et cliquer sur uninstall Ce n est pas tout il faudra enlever par la suite un autre r pertoire li Nvu Sous windows xp le chemin est le suivant C Documents and Settings votre nom d utilisateur Application data Vous trouverez dans ce r pertoire un dossier Nvu qu il faudra effacer Sous linux jusqu pr sent il n y a pas de version installer puisque Nvu est livr en un seul bloc Donc il n y aura pas de d sinstallation sauf pour les pa quets pr compil s avec les extensions rpm deb Normalement un d sinstallateur doit tre inclus il faudra seulement effacer le dossier cach Pour cela lancez kon queror aller dans le menu Affichage puis cochez afficher les dossiers cach s Le r pertoire Nvu devrait appara tre il suffit de l effacer l aide du menu contextuel Cette op ration effectu e vous pourrez lancer votre nouvelle version de Nvu sans aucun probl mes Http www framasoft net 17 106 2 Configuration Tutoriel Framasoft 2 Configuration Vous trouverez dans la section Aide Contenu de l aide une aide compl te et pr cise concernant la configuration du programme Pr f rences de Nvu reportez vous Toutefois lors de la configuration du programme et pour l utilit de ce tuto riel vous configurerez la section Balisage des Param tres de page comme suit Lang
35. Le bonheur serait d avoir la possibilit de pouvoir l exporter vers une feuille de style externe 4 S lection des classes et des identificateurs la vol e Nvu s est enrichi d une s lection des styles de classe et d identificateurs Classes et ID Aller dans la barre des t ches en bas droite s lectionnez une ba lise et par un clic droit est ajout Classes et ID Vous avez une vue directe de tous les Http www framasoft net 83 106 4 S lection des classes et des identificateurs la vol e Tutoriel Framasoft identificateurs et classes qui se rapportent la feuille HTML en cours Un point vous indique quel style de classe ou quel identificateur est en cours d utilisation Vous pou vez ainsi attribuer un style n importe quel marqueur HTML ou en changer Plut t pra tique S lectionner Supprimer la balise Modifier la balise Styles internes Mod les ID Classes Propri t s avanc es Image 32 identificateurs et classes la vol e 5 Cr er et G rer des pages mod les Une des fonctionnalit s pratiques de Nvu est de pouvoir g n rer des pages mod les Une page mod le sert r aliser un squelette qui vous servira de base pour l ensemble des pages de votre site A l int rieur de ce squelette vous pouvez ins rer des zones ditables Les zones ditables sont des parties que vous autorisez la modification Elles seules seront modifiables Le reste ne pourra p
36. Tutoriel Framasoft a Clic droit sur le bureau gt Cr er un nouveau gt Fichier gt Lien vers une application b dans l onglet Application mettre le chemin vers l application Nvu qui se trouve dans le dossier opt en cliquant sur parcourir c dans l onglet g n ral cliquer sur l ic ne puis choisir Autres ic nes gt Parcourir gt choisir Mozicon50 xpm dans le dossier icons de Nvu Voil c est ok PS il y a un bug avec l ic ne xpm pour la mettre dans l arborescence de menu via l diteur de menu de KDE 1 4 Installation de Nvu sous Mac os x Un grand merci Larmandie qui fournit enfin une explication pour l installa tion et l utilisation de Nvu sous Mac os x Pour installer Nvu c est tr s simple Une fois Nvu t l charg sur le bureau il suffit de glisser l application dans le dossier Application du disque dur et le tour est jou comme pour n importe quelle autre application d ailleurs Ensuite pour l utilisation de Nvu il suffit de suivre ton tutoriel qui se trans pose tr s bien pour mac J ai donc cr le site sur le disque dur en l occurence dans le dossier Document du mac II me semble n anmoins qu il y a quelques diff rences avec ce que propose le tutoriel qui sont peut tre dues mac Par exemple pour les adresses relatives des images il est impossible de cocher la case adresse relative pr alablement II faut faire parcourir choisir l image sur le disque dur
37. age HTML 4 Param tres de page uteur Ealisage Langage iH 4 O XHTML 1 DTD de transition stricte Image 2 Section Balisage des Param tres de page DTD de transition Http www framasoft net 18 106 C Utilisation Tutoriel Framasoft C Utilisation Pour cr er des pages Web nous allons garder exactement la m me m thode que celle qui nous sert cr er des documents avec un traitement de texte Cette m thode consiste diff rencier le fond de la forme le texte brut sans la pr sentation Le grand avantage d un traitement de texte est de pouvoir taper d abord un texte tel quel on parle de frappe au kilom tre et ensuite d appliquer la mise en page Cette m thode est si pratique qu elle en est devenue le standard pour la publication des pages Web Nous continuerons donc utiliser cette bonne vieille m thode mais en l appliquant la cr ation de pages destin es Internet Le texte tel quel correspondra au langage HTML La pr sentation cor respondra une feuille de style nomm e CSS L int r t de Nvu est de pouvoir utiliser plusieurs m thodes Quelles que soient ces m thodes commencez toujours par crire votre texte tel quel en pr ci sant seulement les formats relatifs la structure d un texte titres paragraphes listes tableaux insertion de liens d images etc 1 Exemple de texte reproduire tel quel la main 1 1 D but du p
38. aleur relative par exemple gt Nous pouvons d finir d autres param tres Ici les marges de remplissages pour un meilleur confort de lecture gt Remplissages Gauche et Droite 5 px 56 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft 2 4 2 4 Modification des param tres du sous titre du calque Il va falloir modifier l aspect pas trop r ussi du sous titre pr sentation et r p ter les op rations pr c dentes gt Activez l diteur Cascades cr ez une nouvelle r gle avec les param tres vus ci dessus et inscrivez presentation h2 presentation h2 L une des qualit s des styles est de pouvoir les appeler selon l organisation logique de la structure de votre page Nous avons cr un conteneur g n rique ou calque lt div gt lt div gt l int rieur de ce calque nous avons deux l ments qui structurent le texte lt h2 gt lt h2 gt et lt p gt lt p gt Ce qui donne lt div id presentation gt B lt h2 gt Pr sentation lt h2 gt E HTML sigle de HyperText Markup Language lt div gt litt ralement langage de Si je souhaite modifier l ensemble du marquage hyper texte est lt p gt HTML sigle de lt p gt conteneur je noterai dans l diteur le langage con u pour cr er les pages du World Wide Web C est un langage de atteindre la balise lt h2 gt lt h2 gt du conteneur description de document presentation il englobe tout Je souhaite ma
39. ans forme automatiquement la valeur hexad cimale en valeur rgb pour le code HTML Le titre Le langage HTML re oit la valeur h1 Titre 1 Laissez le curseur c t en cliquant et r it rez la m me op ration que pour le corps de page Le rouge que j ai choisi correspond en valeur hexad cimale cc0000 soit en valeur rgb 204 0 0 Le sous titre Pr sentation la valeur h2 Titre 2 Le texte HTML sigle de HyperText Markup Language litt ralement lan gage de marquage hyper texte est le langage con u pour cr er les pages du World Wide Web C est un langage de description de document bas sur SGML re oit la valeur p paragraphe Pour surligner en jaune le sigle HTML s lectionnez le et utilisez le pe tit marqueur c t des rectangles J ai aussi utilis un jaune pr d fini soit ffff00 en valeur rgb 255 255 0 Voici le code HTML complet qui s est inscrit automatiquement au fur et mesure de vos choix 2 RGB se dit en anglais Red Green Blue soit Rouge Vert Bleu en fran ais qui repr sentent les trois couleurs primaires Http www framasoft net 36 106 2 Int grer la mise en forme au code HTML Tutoriel Framasoft gt lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN gt lt html lang fr gt lt head gt lt meta content text html charset IS0 8859 1 http equiv content type gt lt title gt exemple lt title gt
40. aragraphes qui se situe en haut gauche avec Corps de texte inscrit par d faut voir l image ci apr s Vous pouvez galement y ac Http www framasoft net 24 106 2 Edition d une page Web Tutoriel Framasoft c der par le menu Format Paragraphe Vous avez le choix de la proc dure gt Vous s lectionnez d abord Titre 1 et vous inscrivez le texte ensuite gt Vous crivez d abord le texte laissez le curseur texte la fin du mot et s lectionnez ensuite Titre 1 Corps de texte v Corps de texte brie gt Le titre surlign en turquoise correspondra la Paragraphe l s lection Heading 1 ou titre de hauteur 1 Titre 1 Titre 2 Titre 3 gt Les titres de chaque paragraphe surlign en rouge correspondront la s lection Heading 2 Titre 4 Titre 5 Titre 6 Adresse Pr format Conteneur g n rique div Image 4 Les diff rentes options gt Les paragraphes correspondront la s lection Paragraph de format de texte Astuce Nous allons voir une propri t tr s utile pour le d butant avec Nvu Reportez vous la barre d dition par onglets et choisissez Balises HTML Normal TO Balises HTML HTML Source XX Aper u lt body gt Image 5 L onglet Balises HTML en particulier L int r t de cet onglet r side dans le fait que vous allez pouvoir visualiser en direct au fur et mesure de l avanc e de votre travail les balises HTML en j
41. as l tre Lorsque vous avez modifier le mod le selon vos souhaits il suffit d aller dans le menu dition puis de glisser jusqu Dissocier du mod le Votre page se d tache du mod le et est pr te tre enregistr e au format HTML Consultez dans le centre d aide la section Travailler avec des mod les Http www framasoft net 84 106 6 Liens et relations Tutoriel Framasoft 6 Liens et relations Je ne rentrerai pas dans une d finition exhaustive de cette notion de rela tion N anmoins il est possible aujourd hui d enrichir le sens d une balise HTML Une balise HTML ne contient pas de sens et c est ce qui est l int rieur g n ralement du texte compr hensible par l humain qui donne sens La tentative actuelle tente de donner un sens aux balises que vous utilisez sens qui pourra mieux tre rep r par un moteur de recherche ou un syst me de r f rencement Exemple lt ul gt tn Ale lt li gt deux lt 11i gt li rrons lt 11 gt lt li gt quatre lt 1i gt lt liSciner ili gt lt ul gt Potentiellement ce bout de code n a de sens que pour nous et nous com prenons que l auteur de ce code les cinq premiers chiffres d une certaine base on sous entendra que c est la base 10 Les balises relationnelles offrent une possibilit de transf rer une meilleure compr hension de ce sens implicite et compr hensible pour nous aux balises Exemple lt ul rel math matiques g
42. aune Ceci vous aidera grandement la compr hension de la structure d une page HTML Http www framasoft net 25 106 2 Edition d une page Web Tutoriel Framasoft Le langage html EPr sentation E HTML sigle de HyperText Markup pour cr er les pages du World Wide Image 6 La structure d un page web avec Balises HTML vous de voir lequel des deux modes d dition vous convient le mieux Normal sans les marqueurs ou Balises HTML avec les marqueurs Notez que dans ce mode d dition les images n apparaissent pas Http www framasoft net 26 106 2 Edition d une page Web Tutoriel Framasoft 2 3 2 Les l ments structurels listes liens tableau images table des mati res Pour r aliser les diff rents l ments de notre exercice reportez vous au centre d aide de Nvu aux paragraphes suivants e Mise en forme de vos pages Web e Ajouter des tableaux votre page e Ajouter des images votre page Web e Travailler avec des tables de mati re sur votre page Web 2 4 Structure d une page HTML La structure s mantique et hi rarchique ou squelette d une page HTML s crit sans aucune mise en forme uniquement le texte accompagn de ses balises distinctives Elle comporte deux l ments essentiels l ent te ou Head et le corps ou Body lesquels sont englob s dans la structure de d finition g n rale HTML La structure hi rarchique et les quelques balises d crites ci apr s sont donn
43. aux plus exp riment s et qu il est orient vers une utilisation professionnelle Dans un cadre non professionnel il est possible et m me souhaitable de prendre des liber t s par rapport au contenu ergonomique d un site Web Cependant si on parle tou jours de charte graphique pensez la charte typographique Faites en sorte que votre site soit lisible et que la lecture soit adapt e au m dium utilis 2 4 Outils d aide suppl mentaires pour le design des pages Web gt Principles of Graphic Design gt par Andrew Mundi est une superbe animation tout en flash et en anglais qui vous livre les principes de base du design En 5 tapes vous pourrez comprendre tester et interagir avec cette animation De plus vous pouvez t l charger l animation et la consulter chez vous hors ligne gratuit gt Les tapes gt 1 Introduction qu est ce que le design gt 2 La th orie des couleurs gt 3 Mise en page gt 4 Perspective gt 5 Typographie gt Chromoflash en fran ais Pour tester en ligne l harmonie des couleurs sur une Http www framasoft net 104 106 2 Les structures d une page Web et d un site Tutoriel Framasoft page web fictive le r sultat peut tre envoy par courriel C est gratuit gt Chroma en fran ais Un dictionnaire complet sur les couleurs et la th orie des couleurs Possibilit de le t l charger pour le consulter hors ligne gt color blender en anglais par le c l b
44. avigation devrait lui aussi ne pas tre une source de discrimination Le HTML est un standard du W3C l organisme responsable de la standardisation du Web La version la plus r cente est le HTML 4 01 et date du 24 d cembre 1999 Aujourd hui le langage n est plus d velopp m me s il est toujours le plus utilis sur le Web Un autre langage le XHTML est maintenant la version 1 1 et remplace progressivement le HTML CSS est principalement utilis pour d finir les couleurs les polices le rendu et d autres caract ristiques d un document et a t cr pour effectuer la s paration entre sructure crit en HTML ou similaire et pr sentation en CSS Cette s paration fournit un certain nombr de b n fices permettant d am liorer l accessibilit de changer plus facilement de structure et de pr sentation et de r duire la complexit de l architecture d un document Enfin CSS permet de s adapter aux caract ristiques du r cepteur HTML ne d crit que l architecture interne et CSS d crit tous les aspects de la pr sentation CSS peut d finir couleur police alignement de texte taille mais aussi le formatage non visuel comme la vitesse laquelle un texte doit tre lu par des lecteurs de texte non graphique Ainsi les avantages des feuilles de style sont multiples gt Toute l architecture visuelle d un document r side dans un seul fichier et peut tre donc mis j
45. ayons de voir ce que d habitude nous ne voyons pas Pour obtenir ce r sultat il suffit d ouvrir le fichier abw l aide de n importe quel diteur en mode texte comme notepad sous windows ou mieux notepad2 toujours sous windows le dernier bijou en date et libre qui plus est par exemple 6 Il existe des langages pour pr senter des textes stylis s et typographi s non automatis s comme LaTeX ou pour ce qui nous concerne HTML 7 L exemple ne se r f re plus Openoffice org Pourquoi D abord le fichier source abiword est beaucoup plus l ger et se rapproche plus dans sa structure de l criture d une page au format HTML Les fichiers sxw d Openoffice org sont plus complexes dans leur architecture L exemple abiword est par cons quent plus pertinent pour l objet de ce tutoriel Http www framasoft net 98 106 1 La double face du langage WYSIWYG Tutoriel Framasoft lt xml version 1 0 encoding UTF 8 gt EIDOCIVMPE abiword PUBLIC ABISOURCE DTD AWML 1 0 Strict EN http www abisource com awmil dtd gt lt abiword template false styles unlocked xmins fo http www w3 org 1999 XSL Format xmins svg http www w3 org 2000 svg xmins dc http purl org dc elements 1 1 fileformat 1 1 xmins math http www w3 org 1998 Math MathML xmins awml http www abisource com awmil dtd xmins http www abisource com awml dtd xmins xlink http www w3 org 1999 xlink version 2 0 6 xml space preserve p
46. bre acc s internet avec beaucoup de patience sans ce dernier ce manuel n existerait pas Je remercie Framasoft www framasoft net et toute son quipe qui a su ac cueillir mes contributions multiples et mes humeurs Correcteurs du pr sent manuel qu ils soient remerci s Christian Choul liseur et correcteur attentif de ce tutoriel qui a effectu un travail de grande qualit et peu agr able relecture corrections Goofy autre liseur qui lui aussi a effectu ce travail peu agr able relec ture corrections et avec une m me qualit Liseur Le liseur est au livre ce que le hacker est l informatique Le mot liseur est d finit dans le Littr Je remercie galement tous ceux qui laissent des messages au sujet de ce tutoriel dans les forums d di s de framasoft et parfois ailleurs Toutes ces rencontres enrichissent le tutoriel et me servent prendre conscience de cette r alit propre au Libre le travail collaboratif et le partage des connaissances Que cela devienne une r alit pour chacun chacune Http www framasoft net 96 106 L Annexes Tutoriel Framasoft L Annexes 1 La double face du langage WYSIWYG Tout le monde a au moins une fois dans sa vie tap du texte l aide d un traitement de texte MS Word le plus souvent Les traitements de texte de ce type sont nomm s traitements de textes en mode WYSIWYG Nul ne s imagine ce qui se passe pendant qu il tape
47. che du milieu quant elle rendra le positionnement relatif par rapport au bord droit et gauche de la page donc le positionnement du calque s a daptera en fonction de la r solution d cran 800x600 1024x768 Idem pour les fl ches haut bas choix du positionnement par rapport aux bords haut et bas de la page Http www framasoft net 72 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft 1 2 La cr ation du menu Jusqu ici vous ne voyez pas tr s bien comment assembler ces l ments ni comment ils vont r pondre notre besoin La cr ation d un menu de navigation L id e est de g n rer une liste de d finition qui nous servira de menu Par la suite nous transformerons en calque cette liste que nous positionneront suivant nos besoins 1 2 1 Une liste de d finition Une liste de d finition est une combinaison de trois l ments HTML hi rarchis s et imbriqu s l un dans l autre 1 La liste en elle m me liste de d finition ou lt dl gt lt dl gt 2 le terme g n ral qui d finit va d finir liste d finition de terme lt dt gt lt dt gt 3 et les l ments de d finitions ou lt dd gt lt dd gt L avantage de ce type de liste est de produire automatiquement une liste en arbre 1 3 Passons l exercice pratique Cr ez une nouvelle page ou reprenez une page existante Cette page devra avoir au minimum Un titre paragraphe et un court paragraphe S lection
48. codes sp ciaux pour r tablir l accentuation des lettres Le format texte brut est l entit d criture la plus simple qui existe pour un ordinateur Elle n a pas besoin d interface graphique pouss e Ainsi ce format d criture peut tr s bien fonctionner sans interface gra phique Les plus attentifs d entre vous auront compris pourquoi Linux est r put pour son double fonctionnement graphique et non graphique et pourquoi il utilise autant de fichiers Scripts au format texte brut qui vous permettent de le configu rer comme bon vous semble Lorsqu il y a plantage de l interface graphique il vous suffit alors de choisir une console virtuelle en mode non graphique Le syst me fonctionne toujours vous pouvez faire absolument tout ce que vous voulez hormis Http www framasoft net 100 106 1 La double face du langage WYSIWYG Tutoriel Framasoft bien videmment utiliser les applications qui n cessitent une interface graphique pouss e 1 4 Le langage des pages Web Pour crire une page Web vous utilisez ni plus ni moins que du texte brut agr ment de codages sp ciaux qui transforment votre texte au format brut en un texte au format graphique donc avec un style et une typographie propres et li sibles par n importe quel navigateur Web et compr hensibles intuitivement Ce langage propre la publication des pages Web est appel HTML pour Hyper Text Markup Language Autrement dit c est un langage de balises qui trans fo
49. des de balisage XHTML 1 0 de transition stricte Par ce choix le code HTML produit par Nvu respecte une criture standardi s e de HTML qui n inclut pas du code propri taire inclusion d l ments multim dias comme le flash par exemple ou difficilement compr hensible par des naviga teurs non graphiques frames images map es Une telle orientation n cessite une adaptation qui n est en aucun cas une restriction mais bien une ouverture l autre Vous vous assurez que vos pages seront lisibles par n importe quel naviga teur qu il soit graphique ou non qu il n y aura aucune restriction suivant le syst me d exploitation et ou le type de navigateur Par exemple une grande cha ne de ma gasin de disques m emp che d acc der son site parce que le syst me d exploita tion que j utilise n est pas propri taire 4 2 orientation choisie du tutoriel Dans cette partie du tutoriel nous envisageons un travail en html 4 01 de transition Dans la partie modulaire nous aborderons la mise en forme XHTML 1 Le World Wide Web Consortium ou w3c est un organisme charg de d finir et d tablir des r gles pour une utilisation universelle des langages du web Ceci tant dit rien ne vous emp che d utiliser un code propri taire particulier Http www framasoft net 9 106 4 Cr ez des pages Web et un site complet Tutoriel Framasoft 4 3 Outils suppl mentaires et compl ments scolaires gt Pour une pr sentation g
50. dessus les anciennes propri t s tout au moins il y aura une modification Astuce Il va de soi que nous ne verrons que les propri t s g n rales de mise en page avec Nvu Pour une exploration plus en profondeur de toutes les possibilit s offertes par une mise en page CSS reportez vous au site fran ais OpenWeb comme son nom ne l indique pas adresse http Wwww openweb eu org Visitez avec profit ce site qui est en train de devenir une autre r f rence en la mati re avec des tutoriels progressifs et th matiques je parle bien entendu d Alsacr ations un superbe site avec un forum o vous pourrez poser toutes les questions possibles et imaginables sur les css adresse http www alsacreations com La consultation d un chapitre extrait d un ouvrage de Daniel Glazman celui qui est derri re le code de Nvu quoiqu un peu technique consacr aux feuilles de style vous apportera des renseignements compl mentaires Adresse CSS2 des feuilles de styles pour le Web Apr s cette courte description de la fonction des styles entrons dans le vif du sujet avec l diteur de styles CSS Cascades Http www framasoft net 40 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft 2 2 D couverte de l diteur CSS Cascades Pour l activer menu Outils diteur CSS Voici la page d accueil d un outil qui va plus que vous simplifier la vie Feuilles de style CSS Feules et r gles Monter G n
51. e Cette distinction est pertinente pour nous humains mais pour l ordinateur elle ne l est absolument pas Pour lui ce sont des param tres techniques qui ont t programm s et attribu s en m moire attendant que l utilisateur d clenche Http www framasoft net 97 106 1 La double face du langage WYSIWYG Tutoriel Framasoft par une commande sp cifique l utilisation de ces param tres pr programm s l aide d un logiciel d aide au traitement automatis du texte comme OpenOffice org ou Microsoft Word par exemple pour obtenir une pr sentation de texte honn te 1 2 Savoir faire la diff rence Donc lorsque nous crivons un texte l aide d un traitement de texte il se produit deux choses simultan ment gt la premi re fait appara tre le texte tel que nous le souhaitons avec une structure organis e et pertinente pour l humain ce qui appara t sur la feuille blanche gt la seconde transcrit en un langage interne toute une s rie de param tres techniques pr alablement mis en m moire et qui correspondent au format d sir par l auteur du texte ce qui n appara t pas sur la feuille blanche mais qui constitue un dialogue interne avec le programme Exemple l envers du d cors Utilisons le traitement de texte Abiword traitement de texte libre est il en core besoin de le pr ciser et crivons ce simple texte Une phrase d exemple Enregistrons ce document au format natif abw puis ess
52. e Tutoriel Framasoft 2 3 Cr ation d une feuille de style interne Cliquez sur le bouton Feuille incorpor e La fen tre suivante appara t rea e fn Eure fee fau Nouvelle feuille de style Type textjcss Liste des m dia Titre Cr er la Feuille de style Image 14Feuille incorpor e activ e L onglet G n ral s active Dans le champ Liste des m dias vous pr cisez le ou les m dias pour lesquels cette feuille de style est activ e par exemple screen pour cran Titre donnez un nom votre feuille par exemple essai Puis cliquez sur le bouton Cr er la feuille de style Nous venons de cr er une feuille de style interne Elle est directement attri bu e la page HTML avec laquelle vous travaillez et les r gles et propri t s que vous d finirez ne s appliqueront qu cette page Au contraire une feuille de style externe attribuera un m me style voire plusieurs un ensemble de pages HTML diff rentes votre site par exemple Ceci fera l objet du prochain exercice Le dialogue se d cline comme suit gt J ai cr une feuille de style pour une sortie cran screen d ordinateur et je l ai nomm e essai pour une sortie imprimante je l aurai nomm e print gt Vous remarquerez que d autres boutons se sont activ s import media et R gle La r gle import permet l importation d une autre feuille de style dans celle en cours la r gle media signale quel m dia prin
53. e cette page est mise en relation avec une feuille de style externe et qu un lien link est cr avec l adresse exacte href style export css Enfin cette feuille de style cible plus par Http www framasoft net 69 106 1 D but du quatri me exercice Tutoriel Framasoft ticuli rement les crans d ordinateur media screen lt link media screen rel stylesheet href style export css type text css gt Voici le code HTML complet gt lt html lang fr gt lt head gt lt meta http equiv Content Type content text html charset iso 8859 1 gt lt title gt mapagel lt title gt lt meta content votre nom ou votre pseudo name author gt lt link media screen rel stylesheet href style export css type text css gt lt head gt lt body gt lt h1 gt Le langage html lt h1 gt lt h2 gt Pr eacute sentation lt hn2 gt lt p gt HTML sigle de HyperText Markup Language litt amp eacute ralement langage de marquage hyper texte SE le langage con amp ccedil u pour CECESCULE SEE les pages du World Wide Web C est un langage de description de document bas amp eacute sur SGML lt p gt 1 5 Fin du quatri me exercice Ce dernier exercice vous aura montr comment produire une feuille de style et comment r aliser une page mod le pour votre site Nous avons avons survol l essentiel de Nvu Il ne vous reste plus qu vous entra ner encore et encore
54. e en forme au code HTML Tutoriel Framasoft c est souvent par ce biais que le d butant apprend mettre en forme ses pre mi res pages Chargez votre premi re page mapagel htm peu de choses pr s votre page devrait ressembler cela Hypertext markup language Pr sentation HTML sigle de HyperText Markup Language litt ralement langage de marquage hyper texte est le langage con u pour cr er les pages du World Wide Web C est un langage de description de document bas sur le SGML Explication du langage HTML Les documents HTML sont g n ralement stock s sur un serveur Web et sont affich s par un navigateur Web Le document lui m me est constitu de balises c est dire un nom de marqueur plac entre un signe plus petit lt et plus grand gt Par exemple la balise br s crit lt br gt Il existe aussi des balises de fin qui repr sentent la fin d une balise apparue plus t t dans le document et qui sont marqu es par une barre oblique Par exemple lt li gt ferme une balise pr c dente lt li gt Il y a trois types de balises HTML un marqueur de structure d crit la fonction du texte Exemple lt h1 gt Titre lt h1 gt e un marqueur de pr sentation d finit la fa on dont un texte doit tre pr sent Exemple lt b gt Texte en gras lt b gt e un marqueur hypertexte tablit des liens avec d autres documents au sein d une page d un site ou entre des pages de sites di
55. e quatre lt a gt lt dd gt lt dal1 gt Comprendre comment styliser le menu de navigation est simple Il suffit d attribuer une couleur de fond ou une image la liste de d finition ou lt dl gt lt dl gt Puis la m me chose pour menu ici une image transparente qui correspond lt dt gt lt dt gt Ensuite il suffit d activer la couleur du texte pour les liens soit lt a href gt lt a gt et d indiquer ce qu il doit se passer quand le curseur passe dessus a hover Voici le code css complet pour le dernier style dl border 4px double rgb 255 255 255 style g n ral la liste de d finition padding 5pt Hacikorounmeecolless ga ilsS 07 0 Color rdgo 255 255 255 background image url file C tutoriel Nvu acrose img fleur pngj i1 faudra transformer l adresse physique en adresse relative background position center width 9em dLMborcer br SOIT NS epee men font size lem font family Verdana text align left packground image urlifile C t toriel Nvu acrose img trans pna idem pour cette image Http www framasoft net 76 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft padding left S5pt Colors rao 255 204 5il 2 font weight bold dd border 1px none rgb 51 51 51 style pour les l ments d finis pading enk rape Colors rcolol255 7 2597 255 font weight bold a
56. e site web est compos par Un r pertoire racine qui contiendra toutes vos donn es il aura le m me nom que votre site ici acrose Dans ce r pertoire vous glisserez toutes vos pages HTML Si votre site n est pas volumineux inutile de les ins rer dans un nouveau r pertoire Le contraire sera vrai en cons quence Ins rez toujours plusieurs autres r pertoires un pour vos images que vous nommerez img images o comme vous voulez un autre pour vos feuilles de styles CSS si toutefois vous les utilisez un troisi me pour vos scripts etc Http www framasoft net 103 106 2 Les structures d une page Web et d un site Tutoriel Framasoft 2 3 Le design des pages Web voir ou lire C est certainement le point le plus crucial tudier en profondeur tant la plupart des sites Web sont quasi illisibles pour les raisons suivantes gt soit il y a une utilisation excessive de l utilisation graphique et le site est alors fait pour tre vu et non pour tre lu gt soit le site est orient vers la lecture mais la pr sentation n est absolument pas ma tris e et est pens e comme si l on avait affaire un livre en papier ce qui est absurde en soi gt Consulter sur le sujet le Guide pratique de conception et d valuation ergonomique de sites Web http wWww crim ca files documents services rd publications ERG MilFal 0108 Gardez en m moire que ce guide est destin tant aux d butants qu
57. e type titre de hauteur 1 ou lt h1 gt par exemple ou tous les l ments paragraphe ou lt p gt etc Pour notre exercice il faut cocher cette case et inscrire dans le champ dessous body qui correspond l attribution de r gles g n rales pour le corps de la page 4 L attribut id fonctionne exactement de la m me mani re except qu il ne s applique qu une seule fois dans la page On le retrouve tr s souvent rattach aux calques sous l expression lt div id nom de l identifiant gt div calque id attribution de propri t s particuli res ce calque comme la couleur de fond la taille du bloc son emplacement la couleur de police de caract res etc Http www framasoft net 45 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft style appliqu tous les l ments concernant le s lecteur suivant Imaginons que vous souhaitiez appliquer un style particulier un type de paragraphe l instar de ce tutoriel j ai cr un style particulier que j ai nomm paragraphe info nvu Ce style je l attribue aux paragraphes d information At tention et Astuces j cris le paragraphe tel quel comme les autres et je lui ap plique par la suite un style qui le diff rencie des autres paragraphes Vous allez pouvoir faire la m me chose avec Nvu en cochant cette option Cependant n oubliez pas de sp cifier un nom et juste devant le nom le sigle suivant parainfo
58. ela nous servira plus tard si nous souhaitons ajouter des valeurs CSS Nous allons reprendre la suite du pr c dent exercice Le but sera de faire ressortir par rapport la mise en page le premier paragraphe contenant le sous titre h2 pr sentation et le paragraphe p qui l accompagne Pour la commodit de l exercice nous allons commencer par d caler le bloc le plus grand celui qui est entour de blanc si vous avez suivi les instructions pr c dentes ou d une autre couleur si vous avez choisi la v tre Lancez l diteur CSS Outils diteur CSS Ouvrez l arborescence et s lec Http www framasoft net 52 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft tionnez Body puis choisissez l onglet Bo te et allez jusqu Excentrages o il de vrait y avoir inscrit sur Gauche 15 passez cette valeur 25 Vous devriez ob tenir un espace plus grand sur la gauche Nous allons nous servir de cet espace pour y ajouter notre calque avec une mise en forme diff rente de la mise en forme g n rale Fermez l diteur et revenez votre page s lectionnez l onglet Balises HTML et dans le menu Affichage choisissez Mise en vidence des blocs Pour la s lection commune de deux ou plusieurs blocs appuyez sur la touche shift la touche shift correspond la touche du clavier avec une fl che la pression sur la touche Shift sera l ch e lorsque les s lections mul tiples seront termin es Soit
59. erve au d butant par habitude Amaya prouve tout comme Nvu que le mode graphique ou WYSIWYG n est pas p nalisant mais s av re tre un mode d dition tout aussi efficace que le mode dition au format texte Http www framasoft net 94 106 K Conclusion Tutoriel Framasoft K Conclusion Avec ce tutoriel j ai souhait pr senter Nvu selon une double mani re descriptive et pratique C est dire partir de la description pour aller vers un exercice pratique Cr er des pages Web ce n est pas plus difficile que cela Les r aliser avec un diteur HTML en mode graphique qui vous offre autant de possibilit s c est en core plus simple Si vous vous en tenez la m thode que j ai tent de vous faire d couvrir gt cr ation d une page simple uniquement avec le texte et les formats li s au texte gt ensuite diff rentes mani res de mettre en forme cette page nue soit d une mani re classique avec un code ins r automatiquement dans le code HTML le plus simple mais au r sultat peu pratique Par exemple vous tes oblig pour chaque nouvelle page de refaire toute la mise en forme soit en cr ant une feuille de style interne soit en cr ant une feuille de style externe qui facilitera la mise en place de votre site Tel aura t le but de ce tutoriel de vous d montrer cela par la pratique Cette m thode tant ce qu elle est je l esp re aussi claire que possible J ai voulu viter la r in
60. exes repose sur une utili sation plus fine des propri t s CSS 2 4 2 1 Transformer rapidement un hyperlien en bouton Nous allons lier cette page mapage2 htm avec la premi re page mapagel htm Pour cela nous allons utiliser un hyperlien Pour conna tre la mo dalit de cr ation d un lien hypertexte reportez vous au centre d aide de Nvu sec tion Cr er des liens avec Nvu puis Cr er des liens vers d autres pages La position de l hyperlien d pend d une logique de lecture de la page Il sera g n ralement plac soit au d but soit la fin de chaque page si ce dernier n est pas l int rieur du texte Avec le positionnement CSS il est possible de cr er des mises en page pour les liens beaucoup plus sophistiqu es notamment par la combinaison de listes et de liens voir l excellent site sur ce sujet http CSSmax design com au malheureusement r serv aux anglophones Ouvrez l diteur CSS Outils diteur CSS Ouvrez l arborescence en cliquant sur feuille de style interne fen tre gauche cliquez sur R gle pour g n rer une nouvelle r gle CSS Cochez style appliqu tous les l ments de type et inscrivez a dans le champ en dessous Le sigle HTML pour hyperlien est un minuscule Nous allons donner des r gles ce pour que ce simple lien se transforme en un bouton qui lorsque le visiteur le survolera donnera l impression visuelle que ce dernier s enfonce Nous allons appliquer des r gles diff
61. exporter une feuille de style sssmmmmmnsmansnnnssuus 3 TiD butd igq atriemerexercicen ea rerna nn ne ne see ee nn en een R EEE men 63 1 1 Export dela feuille de style avec diteur cascades eee esse dede eee ie ere 63 Ra OVA a E EAE N E A O A A E A A A E E E N A di sn Attacher plusieurs pages avec une meme feuilleiCSS neuint neriie berne nenna EEE 12 T3yR capit latif n ee A nn ae nn 1 4 Exemple de code HTML et CSS feuille de style export e 15 Finiduiquatri me exXercicen nran eien E AAA EE EE Ea Eaa EAR SNS a aE AAE G tude de cas Cr ation d un menu de navigation 71 1 Toujours la m me id e mais avec de la structure et du Style MMennnnnnnnns 71 T1 labarre descalgueS rrr ruren E a E a A M2 12y atcr ationidutmentk Kiar A E a a E A eine Cet e ne 73 A E a de A O a E E 73 T3 Passons alliexercice pratique riua o E e ser nn ee aA E se 13 1 3 1 Code HTML du menu de navigation et explication du style 76 1 4 R soudre le probl me du positionnement pour les navigateurs bas s sur Internet Explorer 77 V SJCONCIUSIOM irie a E aE a A EE A E AAA E E S E E S E 78 H Outils d aide la cr ation des pageS r n ns221222222222rrrrr 29 Giliensretire ations re en men te E nn ne one een nn ne nn me 85 GDS tags TECNNOCTATIEE M rss ern semer es ess siens ns sneenn mimi a nanas ns sans s ass nes s eme Rs amies te seen ten eea eines s
62. ez l acc s de vos pages aux personnes ayant un ou plusieurs handicaps sans compter qu aujourd hui et encore plus demain il n y aura pas que l cran de l ordinateur qui servira visualiser les sites Internet Autant commencer s initier d s aujourd hui Http www framasoft net 38 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Voici en extrait ce que pr conise la r f rence absolue en mati re de cr a tion de pages Web respectant les standards du Web le c l bre W3C L objectif du Web est de permettre l change d informations quelque soit le support opposer l approche Word En g n ral la description d un document Word se limite la pr sentation essentiellement l usage de fontes polices de caract res Si le destinataire ne dispose pas des m mes fontes le document peut tre illisible La solution pr conis e est d utiliser un mod le de description clairement d fini et ouvert C est ce que permet de faire le HTML en d finissant un mod le de document Web standard Avec les CSS Cascading Style Sheets il y a m me s paration entre la structure contenu et la pr sentation L auteur d un document Web doit distinguer ce qui est du ressort de la structure titres paragraphes listes etc de ce qui n est que de la pr sentation taille de caract res couleurs etc 2 1 D but du troisi me exercice gt Chargez votre deuxi me page mapage2 htm gt A
63. ez sur ce dernier et vous devriez avoir tout en haut ceci lt Doctype HTML public w3c dtd HTML 4 01 Transitional en gt L op ration est simple il faut supprimer le mot Transitional et le remplacer par Http www framasoft net 61 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Strict pour transformer votre HTML 4 01 transitional en HTML 4 01 strict et hop Tout redevient normal Vous retiendrez ceci pour une construction simple sans passer par les styles utilisez par d faut le langage HTML 4 01 de transition Si vous souhaitez travailler avec des styles je vous conseille de configurer Nvu directement en langage HTML 4 01 Strict Cela vous vitera quelques probl mes s rieux L id al tant de pouvoir utilisez le langage XHTML mais nous n en sommes pas encore l Ce n est pas le seul probl me avec Internet Explorer et ses diff rentes versions Par exemple si vous attribuez une taille votre corps de page de 70 IE5 ne la reconna t pas Le texte occupera la fen tre enti re Si vous voulez avoir un corps de page 70 il va falloir ajouter un conteneur g n rique qui aura la taille de 70 L IE5 lira correctement la page Le code html suivant lt body id miseenpage gt et la css correspondante misenpage width 70 ne sera pas compris par IE5 Cependant le code html suivant lt body gt lt div id miseenpage gt avec la CSS correspondante sera lu sans probl mes Ht
64. f renc es sur le site Geckozone http extensions geckozone org Nvu Il faudra au pr alable les t l charger gt Les th mes A ce jour il existe deux th mes sp cifiques pour Nvu Smoke et System Unk nown 1 1 Installation d une extension Allez dans le menu Outils et glissez jusqu Extensions Un dialogue s ouvre cliquez sur Installer Un nouveau dialogue s ouvre S lectionnez l emplacement o se trouve l extension et confirmez Un nouveau dialogue vous avertit de l installation d un nouveau programme et attend la confirmation ou l infirmation de son int gration au programme Confirmez Http www framasoft net 91 106 1 Ajouter des outils compl mentaires Tutoriel Framasoft wI Extensions Launchy 3 9 0 Open links and mailto s with external applications like Internet Explorer Netscape Opera Outlook etc YiewSourceWith 0 0 6 Voir le code source de la page avec l diteur externe de votre choix source Eu boutConfig 0 4 about config lu htmlheader 0 0 1 Installer D sinstaller J Mise jour Options V Image 36dialogue des extensions L extension sera activ e au prochain d marrage du programme L exten sion htmlheader sera tudi e plus en d tail dans un tutoriel s par Nvu Modulaire 1 2 Installation d un th me La proc dure est identique except qu il faut s lectionner Th mes du menu Outils 1 3 Gestion des erreurs ou Bugs et Suggestions O
65. ff rents Exemple lt a href http www wikipedia org gt Wikipedia lt a gt Astuce Avant de vous lancer dans la mise en forme de votre page Web regardez bien ce qui se passe en bas gauche de l cran dans la barre des t ches lorsque vous cliquez sur certaines parties du texte Cliquez sur le langage HTML et vous devriez voir appara tre en bas les balises correspondantes lt body gt lt h1 gt Maintenant glissez vers elles et vous verrez qu elles s activent lorsque vous d placez le curseur Cliquez sur lt body gt et le corps entier de votre page est s lectionn Cliquez sur lt h1 gt et Http www framasoft net 34 106 2 Int grer la mise en forme au code HTML Tutoriel Framasoft le titre de votre page le langage HTML est s lectionn Normal Z Balises HTML Image 11 Mise en relief des l ments HTML Ces s lections deviendront tr s vite indispensables tant pour une mise en forme simple que pour une mise en forme plus complexe faites un clic droit pour voir les menus contextuels Non seulement ces balises vous indiquent la structure logique d une page Web mais en plus gr ce elles vous allez pouvoir leur donner tr s rapidement une forme ind pendamment des autres balises et cela en un seul clic vous de jouer 2 1 Tout savoir sur la mise en forme int gr e Dirigez vous vers le centre d aide Nvu et allez dans la section Tutoriel Nvu Cette sec
66. gateurs Que faire Il existe plusieurs solutions plus ou moins complexes Quant nous nous allons utiliser un script crit en Javascript pr par par Dean Edwards Ce dernier s occupe d assurer la compatibilit des feuilles de style pour Internet Explo rer versions 5 et 6 Si vous souhaitez r soudre ce probl me de positionnement et de compati bilit je vous renvoie au tutoriel Nvu Modulaire qui vous expliquera en d tail la d marche suivre fort simple Cette partie du tutoriel traitant plus particuli rement de l insertion de scripts l aide du module htmlheader Sinon vous pouvez le laisser tel quel le menu suivra le flux de la page et en sera pas fix G n ralement c est l option par d faut de beaucoup de sites car elle n implique pas de tracasseries avec d autres navigateurs 1 5 Conclusion Nous venons de cr er un menu de navigation fiable il respecte la structure d une page HTML et que nous pouvons le styliser comme bon nous semble En combinant ce menu l aide d un peu de Javascript il serait possible d en am liorer la pr sentation et le r sultat avec un menu en cascade par exemple Je vous renvoie aux tutoriels d alsacr ations pour approfondir le sujet Http www framasoft net 78 106 H Outils d aide la cr ation des pages Tutoriel Framasoft H Outils d aide la cr ation des pages 1 Petits assistants utiles l laboration d une page gt Dans le menu dition gt vou
67. hyper texte est le langage con u pour cr er les pages du World Wide Web C est un langage de description de document bas sur SGML Les documents HTML sont g n ralement stock s sur un serveur Web et sont affich s par un navigateur Web Le document lui m me est constitu de balises c est dire un nom de marqueur plac entre un signe plus petit lt et plus grand gt Par exemple la balise br s crit lt br gt Il existe aussi des balises de fin qui repr sentent la fin d une balise apparue plus t t dans le document et qui sont marqu es par une barre oblique Par exemple lt li gt ferme une balise pr c dente lt li gt Il y a trois types de balises HTML Http www framasoft net 20 106 1 Exemple de texte reproduire tel quel la main Tutoriel Framasoft Tel qu il a t pens ses origines par Tim Berners ee le HTML ne sert pas d crire le rendu visuel des pages Web contrairement la PAO mais plut t le sens des diff rentes parties du texte titre liste mise en vidence Son ambition tait d avoir un langage de description de documents au format ouvert qui soit ind pendant de l architecture des ordinateurs qui serviraient lire les pages Par cons quent il n est pas pr vu que telle ou telle police de caract re soit utilis e explicitement ni que le moniteur du client utilise telle ou telle r solution Le logiciel exploit pour la n
68. installation vous pouvez choisir l emplacement du raccourci de Nvu 1 2 Sous Linux gt Il existe d sormais plusieurs paquets pour les multiples distributions existant sous linux R f rez vous au mode d installation correspondant votre distribution Je ne traite ici que l archive g n rique au format tgz gt Il faut t l charger l archive l installer dans le r pertoire destin aux applications optionnelles opt et la d compacter tar xzf nom de l archive gt Vous pouvez effectuer ces op rations selon deux modes ligne de commandes et graphique gt Mode graphique Utilisez un utilitaire d archivage pour d compacter l archive votre disposition Ark Gnozip ou File roler Ils sont tous tr s simples utiliser Http www framasoft net 13 106 1 Installation Tutoriel Framasoft Pensez aussi aux permissions accord es vos fichiers gt Ensuite utilisez konqueror pour vous d placer dans l arborescence des fichiers La touche F9 fera appara tre l arborescence des fichiers Ouvrez le r pertoire nvu et cliquez sur l executable nvu Note aux utilisateurs trices de Linux Pensez cr er un lien vers l ex cutable dans le bureau gt Mode ligne de commandes Lancez un terminal puis tapez gt cd opt validez avec entr e direction les archives gt tar xzf nvu 1 0 utilisez la touche de tabulation pour la compl tion automatique des noms puis validez avec entr e
69. ique Http www framasoft net 86 106 I G rez votre site en ligne sans quitter Nvu Tutoriel Framasoft I G rez votre site en ligne sans quitter Nvu 1 Introduction Ce n est pas tout Le programme dispose d outils suppl mentaires qui vont vous permettre de publier votre page fra chement r alis e Nous allons voir dans cette section comment param trer le gestionnaire de sites et comment publier modifier les pages de votre site en ligne 2 Le gestionnaire Nvu site Manager Pour le faire appara tre appuyez sur la touche F9 de votre clavier Pour savoir comment configurer le gestionnaire et la connexion votre site reportez vous Publiez vos pages Web du centre d aide Nvu 3 tude de cas gestion d une galerie de photos Comment g rer une galerie de photos avec Nvu Cela se fait plut t tr s simplement l aide des outils de publication int gr s 3 1 Pr paration de la page Cr ez une page vierge Nommez la Galerie de photos Ins rez vos images l aide du bouton Image Ne vous pr occupez pas de la disposition des images lais sez les telles quelles Pourquoi La r ponse est simple un petit coup de css et voil nos images correctement dispos es sans m me utiliser un tableau Http www framasoft net 87 106 3 tude de cas gestion d une galerie de photos Tutoriel Framasoft Galerie de photos Image 33 galerie photos non stylis e insertion brute des images 3 2
70. is je ne veux que ce soit uniquement cette bas sur SGML balise et pas un autre de la page qui re oive des r gles alors j inscris dans l diteur mage 21Balises descedantes presentation h2 Il en va de m me pour la balise lt p gt lt p gt du conteneur Il faudra inscrire presentation p On parle de s lection descendante Si ce n est pas clair reportez vous l onglet Balises HTML et observez l organisation des balises Http www framasoft net 57 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft gt onglet Texte gt Couleur ffffff Onglet Fond gt Couleur 80888a Onglet Bordures gt Style Cannelure Y paisseur 2px gt Couleur 000000 gt Onglet Bo te gt Position relative Largeur 80 YRemplissages 5px Excentrages Gauche 8 Le r sultat final doit ressembler l image 21 de l astuce ci dessus 2 5 Une autre m thode le conteneur g n rique lt div gt Dans le barre de mise en forme et plus particuli rement dans le menu Corps de texte est apparu un nouveau s lecteur conteneur g n rique lt div gt Quelle est son utilit Sa premi re utilisation intuitive serait de s lectionner plu sieurs parties d un texte et de cliquer dessus en esp rant que les parties s lection n es soient effectivement englob es par un conteneur g n rique Le r sultat n est pas satisfaisant Chaque balise pour chaque paragraphe est remplac e par lt div gt lt div
71. l alourdis sait un peu Cette version all g e ne s int resse plus qu au c t pratique mais conserve quelques descriptions n cessaires Vous trouverez dans le partie modulaire quelques pistes suppl mentaires pour approfondir votre travail avec Nvu J esp re que vous continuerez savourer de la m me fa on ce tutoriel Http www framasoft net 7 106 3 Avertissement Tutoriel Framasoft 3 Avertissement Ce tutoriel n a pas pour but de vous apprendre les langages HTML CSS Javascript etc Il a pour but de vous faire d couvrir comment on peut utiliser ces langages avec un programme particulier nomm Nvu Vous trouverez dans ce tutoriel quelques exemples sp cifiques qui visent expliciter certaines difficult s li es au langage HTML ou CSS en lien avec Nvu Ce ne sont pas des solutions cl s en main et pr tes l emploi en ce qui concerne une technique ou un design De toute fa on pour approfondir ces technologies il n y a qu une seule chose faire apprendre Pendant votre apprentissage des sites comme Openweb Alsacr ations ou le site du z ro sont l pour vos aider et vous pauler dans votre d marche de Webmestre Si c est une question d ordre technique li e Nvu allez consulter le forum d di Nvu du d sormais incontournable Geckozone Merci pour votre attention 4 Cr ez des pages Web et un site complet Un diteur de pages Web comme Nvu se pr sente sous la forme d un si
72. l onglet Balises HTML pour bien rep rer les balises auxquelles je fais r f rence ici Amusez vous avec les param tres ceux que je vous donne ne sont l qu Http www framasoft net 47 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft titre indicatif et d couvrez ainsi la puissance des CSS pour le corps de la page ou Body apr s avoir cr une r gle body vous r glerez les param tres suivants gt Dans Personnaliser les familles de police inscrivez arial verdana sans serif gt Dans Taille de police appliquez une longueur relative de 0 9em par xemple L em st une taille dite relative c est dire proportionnelle par rapport au type de r solution d cran 800x600 1024x768 gt Dans Hauteur de ligne appliquez un espacement de 16pt gt Dans Alignement appliquez un texte justifi droite et gauche justifi Fond gt Appliquez une couleur de fond de page de valeur hexad cimale adb7b1 gt Appliquez une bordure Pleine commune aux quatre c t s de 3px d paisseur et de couleur blanche valeur hexad cimale ffffff gt onglet Bo te gt Sur Position appliquez relative Sur Largeur donnez une largeur de 70 par habitude la hauteur n est pas pr cis e elle s adapte automatiquement en fonction de la longueur du texte Sur Remplissages Haut Gauche et Bas 3px gt Sur Excentrages Gauche 15 gt Puis c
73. la page pour les positionner o nous le souhaitons par exemple un titre de paragraphe lt h1 gt lt h1 gt et un paragraphe lt p gt lt p gt formant un article soit Http www framasoft net 71 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft gt lt div id monarticle gt lt h1 gt Titre de paragraphe lt h1 gt lt p gt Blah blah blah lt p gt lt div gt C est partir de cette id e de structuration du texte que nous allons pou voir cr er tr s facilement et confortablement un menu de navigation avec Nvu et plus sp cialement la barre des calques 1 1 La barre des calques HEE Image 25Barre des calques Voici un outil complet qui va plus que nous faciliter la vie tudions chaque partie en d tail En vert La fameuse punaise qui attribue dynamiquement un calque un ou plusieurs l ments HTML avec le r glage en couche dessus ou dessous par rapport un autre conteneur ou calque Normal Mise en vidence d l ment particulier italique ou gras En rouge Cr er une liste de d finition bouton gauche Cr ation d un l ment d finir bouton droit activ ici En jaune Positionnement du calque dans la page Les fl ches droite et gauche rendront le positionnement du calque fixe par rapport au bord droit ou gauche de votre page et ce quel que soit la r solution de l cran 800x600 1024x768 La fl
74. lectionnez un paragraphe l aide de la balise lt p gt en bas gauche de la fen tre Le paragraphe est enti rement surlign Maintenant cliquez sur la punaise des calques Vous devriez obtenir quelque chose de similaire l image suivante Le langage html TML sigle de HyperText Markup Language P our cr er les pages du World Wide Web C est un langage d xplication du langage html Image 16 Mise en relief des propri t s graphiques pour g rer les calques Vous venez de transformer votre paragraphe en une feuille de papier calque Ce qui veut dire que si vous le d s lectionnez le texte viendra se m langer aux autres textes Imaginons que nous travaillons sur un dessin lorsque nous ajoutons une feuille de calque sur un papier blanc la feuille transparente laisse le contenu du calque se m langer avec le reste du dessin Pensez y sinon vous risquez d avoir quelques surprises Deux objets essentiels retenir la rose des vents et les poign es La rose des vents vous permet de placer le calque n importe o dans la page les poign es servent le redimensionner comme bon vous semble Tant qu il est en mode s lection vous pouvez lui donner un aspect diff rent de votre mise en page en lui donnant par exemple une couleur de fond et une couleur de caract res sp cifiques Enfin vous remarquerez que la balise correspondant au calque est lt div gt pour le retenir pensez division C
75. les calques ou DIVision vous offrent encore plus de souplesse pour une mise en page tr s styl e Apr s avoir pass le temps du balbutiement vous allez lentement d couvrir la puissance de Nvu et les possibilit s qu il peut vous offrir afin d obtenir une mise en page plus r ussie N h sitez pas vous entra ner encore et encore 2 7 Exemple de Code HTML et CSS Nous poursuivons nos petits exemples de code avec toujours le m me texte et les m mes valeurs Sauf qu ici nous utilisons pour la mise en forme une feuille de style interne Voici le code HTML avec l insertion d une feuille de style CSS Comparez les deux codes sources et vous remarquerez toute la diff rence qu il y a avec une Http www framasoft net 59 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft feuille de style Par exemple en CSS le type de police de caract res est d fini une seule fois alors que dans notre exemple pr c dent il tait d fini pour chaque l ment de la page titres de hauteur 1 de hauteur 2 paragraphes lt html lang fr gt lt head gt lt meta content text html charset I1S0 8859 1 http equiv content type gt lt title gt exemple lt title gt lt style type text css gt body chre crions iee background color rgb 204 204 204 color edo d 07 Die font family Bitstream Vera Sans ME Hackgrounecolors rad 204 0 D e HeltmbinmesNbhackoroundecolorrcbrteE EE
76. liquez sur R gle pour lancer une nouvelle r gl gt Pour le titre g n ral ou hl apr s avoir cr la r gle h1 Http www framasoft net 48 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft gt Vous sp cifiez uniquement la Couleur du texte soit 006600 Laissez le tel quel gt D s lectionnez Utilser le m me style pour tous Et sur Haut et Bas sp cifiez pour Style plein Hpoisseur 2px Couleur 660000 Changez uniquement les valeurs de Remplissages Haut et Bas et mettez les 5px gt Cliquez ensuite sur R gle pour lancer une nouvelle r gl gt Pour les sous titres ou h2 apr s avoir cr la r gle h2 A Modifiez uniquement la couleur ffcc33 et l Alignement CEmienere Couleur 336666 gt Laissez coch Utiliser le m me style pour tous puis pour Style choisissez En relief paisseur 1px Couleur 000000 gt Modifiez TPOS ELOm 3 Felacive gt Largeur 55 gt Remplissages Haut et Bas 2px Http www framasoft net 49 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft 2 Excentrages Gauche 10 Pour les paragraphes apr s avoir cr la r gle p gt Vous intervenez uniquement dans l onglet Bo te o vous assignez Remplissages Gauche et Droite 3px 2 4 2 Deuxi me exercice mise en forme complexe Une mise en forme avec des l ments plus compl
77. llation gt Vous trouverez cette adresse un manuel d installation compl mentaire en anglais pour plusieurs syst mes d exploitations windows linux mac linspire fedora gt http glazman org nvu NvuUserManual html 1 1 Sous windows Le fichier est sous la forme d un fichier ex cutable La proc dure d installa tion est automatis e et suit les tapes suivantes gt lecture et accord de la licence gt choix du dossier de destination pour installer Nvu gt Choix de l installation du raccourci Nvu N oubliez pas que vous pouvez sp cifier un r pertoire d installation diff rent de c Program Files Http www framasoft net 12 106 1 Installation Tutoriel Framasoft rl Installation Nvu Dossier de destination O Nyu doit il tre install Fe _J L assistant va installer Nvu dans le dossier suivant Pour continuer cliquez sur Suivant Si vous souhaitez choisir un dossier diff rent cliquez sur Parcourir C AnetiNvu Le programme n cessite au moins 21 5 Mo d espace disque disponible lt Pr c dent Image 2 installation sous windows gt Par exemple vous pouvez cr er un r pertoire un dossier jaune portant le nom suivant Net pour Internet et installer Nvu dans ce r pertoire gt Le bouton Parcourir vous permet de choisir le r pertoire de destination voulu ou d en cr er un selon votre convenance gt Notez aussi que dans la version fran aise de l
78. llez dans le menu Affichage et s lectionnez Mise en vidence des blocs Cette s lection entoure des parties bien sp cifiques lesquelles appara tront surlign es si vous cliquez sur les s lecteurs en bas gauche Ces parties sont ap pel es blocs En CSS ces blocs peuvent tre compar s en quelque sorte des conte neurs bien que cette appellation soit plus souvent rattach e aux calques ces blocs nous pouvons leur attribuer soit des propri t s g n rales soit 3 Extrait tir de la documentation interne du navigateur Amaya Http www framasoft net 39 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft des propri t s particuli res Les propri t s g n rales sont d finies dans la mention de style correspon dant au bloc d fini par une balise HTML Par exemple lt h1 gt Le langage HTML lt h1 gt est un bloc et ce dernier doit tre entour de pointill s si vous avez activ la mise en vidence des blocs Dans une mention de style vous reportez le nom de la balise correspon dant au bloc h1 sans les balises lt gt qui sont des propri t s propres au langage HTML D sormais vous pouvez d finir les propri t s g n rales pour l ensemble des blocs h1 de votre page savoir la taille du bloc la couleur des caract res la couleur de fond etc Les propri t s particuli res viendront prendre le dessus sur les propri t s g n rales et se rajouteront comme des calques par
79. mple traitement de texte avec toutes les fonctions relatives au traitement de texte sauf qu ici elles sont orient es vers la publication de pages pour Internet On parle alors d diteur en mode WYSIWYG c est dire que vous cr ez votre page Web enti rement en mode graphique vous voyez l cran ce que vous faites et ce que vous avez fait sera ce que tout le monde regardera sur son cran Nul besoin de conna tre parfaitement le langage HTML il vous suffit de conna tre les bases de l dition avec Nvu pour laborer tr s facilement un site Web et mettre en ligne avec le m me programme vos pages ou pour effectuer une maintenance de votre site en ligne Http www framasoft net 8 106 4 Cr ez des pages Web et un site complet Tutoriel Framasoft Nvu s adresse aussi bien au d butant qu au plus confirm Le programme offre un large ventail d outils natifs ainsi que de nombreuses extensions qui vous laisse un libre choix pour la cr ation de vos pages HTML Ce tutoriel vous expliquera pas moins de trois mani res diff rentes pour cr er des pages Web 4 1 L orientation choisie du programme conformit aux recommandations du w3c tant un projet libre Nvu respecte une certaine forme d criture pour le code HTML qui correspond la sp cification du w3c HTML 4 01 de transition dans sa version par d faut II est possible avec cette version de choisir le mode de bali sage stricte pour HTML 4 01 ou un des nouveaux mo
80. n rer un paragraphe notre plus mauvaise habitude qui cause bien du souci aux programmes charg s d interpr ter cette mise en page approximative alors que la s paration entre titres et paragraphes s effectue d une mani re beaucoup plus pr cise l aide des styles du traitement de texte combin s aux outils de format des paragraphes gt Dans le menu Insertion gt glissez jusqu Autres insertions et Cliquez sur Bouton Made with Nvu button Vous installez un bouton qui indique que votre site a t r alis avec Nvu Vous pouvez choisir la version francis e Fait avec Nvu Ce bouton ne sera toutefois visible qu une fois votre site en ligne car il s agit d un lien vers une image du site nvu com Il existe aussi un calendrier dans le m me menu 2 La correction orthographique Nvu incorpore un correcteur orthographique classique N anmoins je vous conseille vivement de faire relire vos travaux par une personne humaine Il est des erreurs que le plus fiable des correcteurs ne saurait d tecter Dans la version actuelle la correction orthographique peut tre automati s e Si ce n est d j fait allez dans Outils Pr f rences Avanc es et cochez la case Souligner les mots mal orthographi s Lorsque le mot mal orthographi est soulign en rouge fa tes un clic droit pour voir les suggestions propos es la cor rection Si c est un mot inexistant dans le dictionnaire mais que vous utilisez sou vent utilisez le menu con
81. n rique de nvu consultez G rer un site avec Nvu 0 7 par Isabelle Motte http www framasoft net article3200 html Ce tutoriel est un v ritable Manuel de prise en main de Nvu A lire si vous souhaitez conna tre les bases de l interface graphique de Nvu gt Si vous tes au Coll ge ou au Lyc e consultez Les cours adapt s d Yves Mairesse Mon premier site web avec Nvu Les feuilles de style avec Nvu Il existe aujourd hui plusieurs tutoriels consacr s au programme tant en langue fran aise qu en langue anglaise quand ce ne sont pas des tutoriels consa cr s une technique particuli re associ e Nvu 5 Connaissances requises Dois je conna tre au pr alable le langage HTML pour pouvoir utiliser Nvu Non Mais conna tre quelques bases est indispensable gt Vous trouverez en annexe une courte pr sentation du langage de balisage HTML ainsi qu une introduction la conception de sites Web gt Au mieux si vous l habitude de travailler avec un traitement de texte vous ne serez pas compl tement d pays gt Je pr suppose donc que vous ma trisez quelques fonctions de base dans l utilisation d un ordinateur gt Savoir se servir d un ordinateur gt Savoir cr er un r pertoire ou un dossier les fameux dossiers jaunes sous Http www framasoft net 10 106 5 Connaissances requises Tutoriel Framasoft Windows dans un endroit sp cifique de l arborescence du syst me de fichiers
82. n bas gauche avec d autres onglets de la barre d outils Barre d dition par onglets activ e par d faut que nous verrons au fur et mesure de notre avan c e dans l laboration d une page Web Vous pouvez l enlever ou l ajouter en al lant dans le Menu Affichage Barres d outils Modes d dition Normal TO Balises HTML lt HTML gt Source 2R Aper u lt body gt Image 3 Les diff rents onglets d dition Vous devriez trouver ceci lt meta content votre nom ou pseudo name author gt Nous allons configurer quelques donn es suppl mentaires Cliquez sur l on glet Normal qui est la page de travail par d faut Maintenant allez dans le menu Format et glissez jusqu Titre et Propri t s de la page Cette bo te de dialogue vous permet d inscrire quelques donn es suppl mentaires gt Titre le titre de votre page qui doit normalement correspondre au contenu de la page Pour notre exemple de travail nous inscrirons le langage HTML Attention Le titre de la page servira de titre par d faut pour votre page lorsque vous l enregistrerez C est pratique mais risqu si vous laissez des espaces entre les mots ou des accents Rappelez vous que nombre de serveurs ne reconnaissent que le codage UTF 8 c est dire sans accent et si possible sans espace vide Donc un titre de page les toiles du soir devra tre traduit au moment de l enregistrement en les etoiles du soir html
83. n ne le dira jamais assez mais un programme sous licence libre ce n est pas juste un programme que l on peut obtenir gratuitement C est aussi une invi tation pour participer l volution de ce dernier et ce de plusieurs mani res La premi re et la plus simple est de renvoyer les erreurs ou bugs de Nvu ou pourquoi pas de sugg rer une am lioration une extension possible si comme moi le mot programmation ne vous dit rien de particulier gt Comment faire Dirigez vous vers le menu Aide et glissez jusqu Bugs et suggestions Ce lien vous connectera un site de gestion des erreurs ou de suggestions consacr au programme Http www framasoft net 92 106 1 Ajouter des outils compl mentaires Tutoriel Framasoft Cette option est bien pratique et est l un des fondements de la communau t du libre donc n h sitez pas l utiliser Cela servira tout le monde et n en vou lez pas l auteur s il ne tient pas forc ment compte de vos suggestions Vous n tes pas seul au monde et n avez pas toujours la bonne id e Mais vous contri buez son am lioration en marquant l int r t que vous portez au programme ce qui est d j beaucoup 1 4 Pour aller plus loin encore Ce tutoriel est quasi termin Mais le programme volue toujours Une des derni res nouveaut s est l ajout d extensions qui tendent les fonctionnalit s du programme Je vous invite suivre l aventure de ce tutoriel s il vous l avez trou
84. nal This means that the resource in question identified itself as HTML 4 01 Transitional and that we successfully performed a formal validation using an SGML or XML Parser depending on the markup language used w show your readers that you have taken the care to create an interoperable Web page you may display this icon on any page that validates Here is the HTML you should use to add this icon to your Web page Image 30 Page valid e avec Nvu gt gt La page a t valid e HTML 4 01 Transitionnel Vous pouvez ins rer un code HTML qui fera appara tre le logo du w3c gt Dans le m me menu Outils diteur CSS gt un outil complet pour g rer les feuilles de style II sera tudi plus en d tail dans la quatri me section gt Toujours dans ce m me menu Outils D veloppement Web pour utilisateurs avanc s gt Dans la version actuelle seule subsiste la console Javascript Les autres outils sont pass s en modules suppl mentaires installer Http www framasoft net 80 106 1 Petits assistants utiles l laboration d une page Tutoriel Framasoft gt Toujours dans le m me menu Nettoyeur de balises gt Cet outil bien pratique marque aussi les limites d un diteur WYSIWYG qui a tendance produire plus de code qu il n en faut Ce probl me vient du fait que nous avons appris utiliser les traitements de la plus mauvaise mani re qui soit Tout le monde utilise la touche entr e pour g
85. nez les l aide la souris puis cliquez sur la punaise afin de les int grer dans un calque com mun Redimensionnez le calque l aide des poign es de telle sorte qu il reste un espace sur la gauche Vous pouvez le styliser votre convenance Voici une re pr sentation graphique de la description crite Http www framasoft net 73 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft Image 26calque activ Une fois le calque cr saisissez l aide du clavier le menu de navigation comme suit menu ma page un gt ma page deux gt ma page trois gt ma page quatre S lectionnez le tout l aide la souris et cliquez sur le bouton gauche voir image 24 ci dessus la partie surlign e en rouge pour cr er la liste de d finition Maintenant s lectionnez uniquement les items de liste savoir ma page un ma page deux ma page trois ma page quatre et cliquez sur le bouton droit de l image vue ci dessus Vous devriez obtenir quelque chose de similaire l image suivante Respectez ce protocole pour obtenir un code html propre Http www framasoft net 74 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft Image 27 Menu de navigation brut Et le tour est jou Il ne nous reste plus qu donner un peu de style pour am liorer la pr sentation Si vous souhaitez inclure le menu de navigation l int rie
86. nique racine le disque dur ou la lettre C pour Windows et pour Linux Reprenons la construction en arbre de notre site virtuel Consid rons une page test essai htm l int rieur de laquelle les adresses relatives seront crites que nous allons placer dans plusieurs endroits de l arborescence du site virtuel et observons comment s crit une adresse relative en fonction de sa place et du r pertoire racine de notre site acrose Pour la commodit de l exercice j ai ajout une pseudo page HTML titre comparatif T e rOSS gt essai htm adresse htm ajout htm amis htm ano htm Fine 5Cr iot SELLES cZ pOr EN OSS export htm Premier cas La page test est enregistr e avec les autres pages HTML du r pertoire acrose et nous cherchons lier les deux fichiers suivants export css et export htm qui se trouvent dans le r pertoire style L adresse relative est gt style export css pour une feuille de styl gt lt linkmedia screen rel stylesheet href style export css type text css gt gt style export htm pour une page HTML gt lt a href style export htm title une page lien gt une page lien lt a gt Http www framasoft net 66 106 1 D but du quatri me exercice Tutoriel Framasorft gt ce qui correspond bien m Style SAPOL o GCSE export htm gt Deuxi me cas La page HTML est l ext rieur du r pertoire acrose et nous souhaitons lier le
87. ns le champ dessous presentation pour le sigle g n rique reportez vous Astuces 1 Les sigles g n riques d attribu tion de classe et d identification p 42 Http www framasoft net 55 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Nouvelle r gle de style style nomm entrez un nom de classe ci dessous Cr er un nouveau O style appliqu tous les l ments d un type entrez le type ci dessous style appliqu tous les l ments correspondant au s lecteur ci dessous presentation Cr er la r gle de style Image 20Cr ation de l identificateur pr sentation Cliquez sur Cr er une r gle de style Appliquez les r gles suivantes Http www framasoft net gt alignement Gauche gt Onglet Fond gt Couleur ffffcc Onglet Bordures Style plein gt paisseur 2px gt Couleur 000000 gt Onglet Bo te Notez Bien gt tant donn que nous avons utilis la m thode graphique pour d placer et appliquer un calque il ne nous est pas possible d intervenir dans l onglet Bo te pour placer le bloc ailleurs Il est automatiquement plac en Position absolue Cependant en activant la bo te de dialogue Propri t s avanc es li e au calque un double clic suffit il est possible de modifier ce param tre Dans l onglet Style interne vous remplacez la valeur de positionnement du calque reportez vous l attribut Position s lectionnez le et changez sa v
88. nt gr e Tutoriel Framasoft D 1 tape mise en forme int gr e 1 Les diff rentes mises en forme avec Nvu 1 1 D but du deuxi me exercice En ayant suivi les instructions d crites ci dessus vous avez d obtenir une simple page blanche avec un titre g n ral des titres de paragraphes des para graphes deux listes et un tableau Les trois mani res de mise en forme sont les suivantes gt Une mise en forme classique et graphique la plus rapide conseill e aux d butants gt Une mise en forme particuli re avec une feuille de style int gr e dans la page gt Une mise en forme g n rale pour toutes les pages de votre site avec une feuille de style externe Pour les deux derni res mises en forme Nvu met votre disposition un ou til tr s performant l diteur Cascades Vous verrez il fait plus que vous faciliter la vie Cr ez trois pages HTML diff rentes Il suffit d enregistrer trois fois la m me page avec un nom diff rent chaque fois mapagel htm mapage2 htm mapage3 htm Ainsi vous disposerez de trois exemples de r f rence l avenir 2 Int grer la mise en forme au code HTML Cette mise en forme est la plus ancienne et la plus lourde utiliser puis qu elle oblige pour chaque marqueur r p ter plusieurs fois une m me chose M me si elle a tendance dispara tre son utilisation reste toujours d actualit et Http www framasoft net 33 106 2 Int grer la mis
89. our facilement Un m me document peut donner le choix plus feuilles de style impression ou Http www framasoft net 21 106 1 Exemple de texte reproduire tel quel la main Tutoriel Framasoft HTML 2 0 1995 XHTML 1 1 2001 lt DOCTYPE HTMT HTML 2 0 EN gt RUBIM uoy y TETE DLD lt title gt Hello World lt title gt lt p gt Hello World CD CHNAEIE HTML PUBLIC XHTML 1 1 EN IL lee lt HTML xmins http www w3 0rg 1999 xHTML gt lt head gt lt title gt Hello lt head gt World lt title gt lt body gt lt p gt Hello World lt p gt lt body gt lt HTML gt W3C DTD http www w3 org TR xHTML11 DTD xHTM 2 Edition d une page Web 2 1 Premi re tape param tres g n raux d une page HTML Prenons de bonnes habitudes Nvu s ouvre directement avec une page vierge Avant de commencer quoi que ce soit commen ons par fournir quelques donn es essentielles pour la compr hension de votre page HTML par un naviga teur Il s agit de ce que l on appelle les donn es m ta Ces donn es se situent dans l en t te de la page HTML vous en connaissez au moins une votre nom qui a t sp cifi e lors de la configuration g n rale de Nvu Vous pouvez le v rifier en cliquant sur l onglet lt HTML gt Source qui se Http www framasoft net 22 106 2 Edition d une page Web Tutoriel Framasoft trouve e
90. ous dans la barre de t ches en dessous de Balises HTML l l ment lt div gt doit tre activ mis en relief l aide du clic droit s lectionnez Propri t s avanc es ou plus simplement cliquez deux fois dans le calque et la bo te de dialogue s ouvrira Http www framasoft net 54 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft l diteur des propri t s avanc es Attributs courants pour lt DIY gt ttributs HTML Style interne v nements JavaScript Attribut Valeur id presentation Cliquez sur un item ci dessus pour modifier sa valeur Supprimer Attribut Valeur presentation Annuler Image 19 Cr ation de l identificateur presentation avec l diteur de propri t s avanc es Dans l onglet Attributs HTML s lectionnez dans Attribut l aide du menu d roulant l identificateur id et inscrivez dans Valeur presentation qui correspond au nom qui identifie le calque Puis cliquez sur ok Nous venons d identifier ce calque auquel est adress un nom en propre Pour terminer l op ration nous allons faire la m me chose avec l diteur CSS Gr ce cet identificateur nous pourrons presque faire tout ce que nous d sirons Activez l diteur Outils diteur CSS cliquez sur Feuille de style interne puis sur le bouton R gle et s lectionnez style appliqu tous les l ments concer nant le s lecteur suivant et inscrivez da
91. que les pages sont publi es avec un autre programme Cependant si vous publiez vos pages directement avec Nvu le programme transforme en adresses relatives les adresses physiques au moment de la publication Un grand merci Kaze qui n en est pas sa premi re extension pour Nvu Je m explique Ce dernier a crit une extension qui vient corriger ce probl me Plac e dans le nettoyeur de balises une fois install e il suffit de cocher la case Relativiser les urls locales et ce petit programme transformera automatiquement les adresses physiques en adresses relatives De plus une seconde option vous permet de transformer le code de couleur de valeur rgb rouge vert bleu en code de couleur de valeur hexad cimale Nettoyeur de b Action R sultat R parer les listes imbriqu es Supprimer les lt br gt superflus Supprimer les blocs vides L Supprimer l alignement dans les cellules vides L Transformer les couleurs RGB en H xa Nettoyer Annuler Image 23 relativiser les urls locales l aide du nettoyeur de balises Http www framasoft net 65 106 1 D but du quatri me exercice Tutoriel Framasoft 1 1 1 Adresses relatives Nous allons aborder le probl me des adresses relatives Les adresses rela tives sont des liens en relation avec des r pertoires consid r s comme racines Elles sont diff rentes des adresses compl tes qui elles se r f rent toutes une seule et u
92. que vous tes en train de taper sur votre feuille blanche Vous observerez qu il n existe pas de style typographique gras soulign italique Tout est crit au format texte brut sans aucun style typographique Une page Web est partag e en deux sections essentielles gt l en t te de la page ou head et gt le corps de la page ou body Http www framasoft net 102 106 2 Les structures d une page Web et d un site Tutoriel Framasoft L en t te de la page ou head Dans l en t te sont inscrits toutes les donn es n cessaires la bonne com pr hension de la page par le navigateur On y trouve gt la d claration de type de document DTD savoir quelle version du langage HTML vous utilisez 3 2 4 01 xHTML 1 0 XHTML 1 1 etc gt les m ta donn es qui pr cisent le nom de l auteur l encodage des caract res europ ens asiatiques arabes par exemple gt les langages de scripts ext rieurs ou internes auxquels vous faites appel JavaScript CSS etc Le corps de la page ou body C est l int rieur de cette section que vous crivez vos pages Ne vous inqui tez pas de ces sections Nvu se chargera de les remplir au tomatiquement pour vous Elles vous sont pr cis es titre indicatif 2 2 Rudiments de la structure logique d un site Web i S acrose scripts B S S i D Ne B amis htm ano htm Image 37 Arborescence simplifi e d un site web Un
93. r hension de l exercice AU bout du compte vous devriez avoir quelque chose de ressemblant ceci Http www framasoft net 63 106 1 D but du quatri me exercice Tutoriel Framasoft acrose Sgt img scripts style adh htm i adresse htm il amis htm if ano htm Image 22 simplifi e d un site web Arborescence gt Un dossier g n ral comportant le nom de votre site Plusieurs sous dossiers et plusieurs pages HTML gt Bien Maintenant ouvrez Nvu puis mapage3 htm et enfin l diteur cascades l ouverture de l diteur votre feuille de style interne appara t dans la fen tre de gauche Cliquez dessus gt Cliquez sur Exporter la feuille de style et passer la version export e Un dialogue s ouvre vous demandant o enregistrer la feuille de style gt S lectionnez votre dossier contenant le site virtuel puis ouvrez le dossier style et inscrivez dans le champ Nom du fichier export css Puis sauvez le tout Et voil votre feuille de style externe est cr e Pas plus dur que cela Http www framasoft net 64 106 1 D but du quatri me exercice Tutoriel Framasoft Astuce Attention Ce probl me est un d faut sans l tre v ritablement II l est si vous pr parez comme moi Vos pages non pas sur le poste qui est en ligne mais sur un autre auquel cas nous sommes oblig s de tenir compte de ce probl me d adresses physiques et relatives puis
94. r t qu il y a travailler avec des feuilles de style Vous d finissez une bonne fois pour toutes un style puis vous l appliquez toutes les autres pages HTML de votre site et voil Comme on dit 1 3 R capitulatif L avantage d une feuille de style externe est de pouvoir assigner une m me mise en forme plusieurs pages Le plus pratique est de g n rer directement une page HTML mod le avec la feuille de style en question Le reste n est plus qu un jeu d enfant Ceci doit vous rappeler l importance de la pr paration d un site Toutes ces astuces pratiques qu offre Nvu ne peuvent tre r ellement exploitables qu partir du moment o l ensemble du site a t pens auparavant Il doit exister sur papier ou au moins vous devez avoir une repr sentation mentale suffisamment claire pour que l laboration du site se fasse sans trop de mal en exploitant le potentiel d un diteur HTML comme Nvu L essentiel d un site repose sur cela Par la suite le choix du langage de la mise en forme est affaire de go t vous connaissez trois mani res diff rentes pour cr er vos pages d sormais vous de voir celle qui vous va le mieux 1 4 Exemple de code HTML et CSS feuille de style export e La feuille de style identique l exemple vu plus haut est export e l ext rieur de la page HTML Les changements s op rent dans l adressage de l en t te Dans le code HTML est apparue une nouvelle ligne qui indique qu
95. re Eric Meyer Permet d obtenir un chantillon de plusieurs couleurs par d grad partir de deux couleurs choisies par l utilisateur gt colorMatch Remix en anglais Un superbe outil similaire CHROMOFLASH mais diff rent dans son traitement des couleurs Il est possible de t l charger une archive et de l installer chez soi n cessite quelques connaissances le programme est livr brut de chez brut gt Ncolor en fran ais et en anglais Un superbe outil que vous pouvez consulter en ligne ou chez vous hors ligne Tr s bien crit tout en javascript Hormis le classique choix des couleurs pour le fond de page bloc de texte et couleur du texte son principal atout est de tenir compte des principaux d fauts de perception des couleurs li au daltonisme gt selfhtml en fran ais Vous trouverez dans la section Petits assistants un outil nomm choix des couleurs Simple mais efficace couleur de fond couleur du texte gt Je vous conseille comme outils de r f rence si vous h sitez gt Principles of Graphic Design gt Ncolor 2 5 Comment cr er un site Web La proc dure pour cr er un site Web se d roule en quelques tapes essen tielles et n cessaires il est imp ratif que la structure g n rale du site existe au pr alable sur papier elle vous servira de guide pour l laboration ult rieure du site gt Quel type de site Web est ce que je veux Quels sont mes moyens gt Quelle
96. remier exercice Notez bien la m thode de travail Pour le bon d roulement de l exercice il est pr f rable de ne pas copier coller le texte de travail ci dessous la raison en est simple Le code HTML produit par un texte copi coll est souvent tr s al atoire et ce dernier ajouterait la confusion si vous ma triser mal ce langage Si vous ne souhaitez pas copier le texte enti rement reproduisez au moins une ligne par paragraphe Http www framasoft net 19 106 1 Exemple de texte reproduire tel quel la main Tutoriel Framasoft Le texte est tir de l encyclop die coop rative libre wikipedia Cette ency clop die est non coop rative chacun peut y mettre son grain de sel mais en plus elle autorise la libre copie modification et r utilisation de son contenu Adresse de la page http fr wikipedia org wiki HTML Adresse de la page d o est extrait le texte sur les CSS http fr wikipedia org wiki CSS Il nous servira de r f rence de base pour la cr ation d une page Web gt La partie surlign e en turquoise correspond au titre g n ral gt Les parties surlign es en rouge correspondent aux titres de paragraphes gt Les parties surlign es en jaune correspondent aux liens gt Les parties surlign es en vert correspondent une liste gt Je rajoute une partie sur les CSS et un tableau de comparaison au texte HTML sigle de HyperText Markup Language litt ralement langage de marquage
97. rentes aux deux instances de D a bord au lien en tant que tel et ensuite au lien lorsqu il est survol soit a ho ver Http www framasoft net 50 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft gt R gles pour a apr s avoir cr er la r gle a gt Onglet Texte gt Couleur 3366ff gt D coration du texte Normale gt onglet Fond gt Couleur cOcOc0 Onglet Bordures Style En relief gt paisseur 1px gt Couleur 000000 gt Onglet Bo te Largeur 8em la taille em se trouve dans le menu d roulant gt R gles pour a hover apr s avoir cr la r gle a hover gt Onglet Bordures gt Changez le Styl n EnCart Et voil notre bouton cr Le seul l ment chang est le comportement des bords du bloc Ce changement de comportement donnera l impression que le bouton s enfonce r ellement Pour tous les autres onglets nous laissons pr valoir les r gles pr c dentes d finies avec a Astuce Pour un travail plus labor encore reportez vous aux sites openweb http www openWeb eu org et alsacr ations http www alsacreations com En anglais consultez les excellents didacticiels du site CSSmaxdesign http CSSmaxdesign com au Http www framasoft net 51 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft 2 4 2 2 Mise en forme des calques Exemple d utilisation d un calque S
98. rme du texte brut en un hypertexte destin au format lectronique L hypertexte se distingue du texte normal en cela qu il peut contenir des liens de connexions avec d autres textes quelque part sur le Web ou l int rieur d un site Chose impossible obtenir physiquement avec un livre On peut dire d une certaine mani re que les appels de notes et autres renvois bibliographiques sont les pr d cesseurs des liens lectroniques actuels donc de l hypertexte Le langage HTML tablit l ensemble des balises qui transforment un texte brut en un texte stylis et typographi avec paragraphes tableaux images etc C est une convention universelle dont le World Wide Web Consortium http www w3 org est le coordinateur principal C est lui qui d finit ce qui est ap pel les standards du Web Nous y reviendrons plus tard Exemples de texte brut avec leurs balises de transformation lt h3 gt Le langage des pages Web lt h3 gt Les balises sont toujours les m mes et signifient lt gt pour ouverture d une balise qui transformera le texte brut lt gt pour fin de la transformation du texte brut l int rieur de ces balises vous glissez toutes les commandes de styles et de typographies possibles et imagi nables dans la limite de la possibilit du langage HTML bien s r Dans notre exemple j ai demand un titre de hauteur 3 ou h3 parce que je suis la convention suivante titre g n ral avec un titre de ha
99. rops dom diriltr lang en US E lt EEE gt lt This file is an AbiWord document gt lt AbiWord is a free Open Source word processor gt lt More information about AbiWord is available at http www abisource com gt lt You should not edit this file by hand gt lt gt 5 5 aS S 5 a a a 5 S 5 a gt lt metadata gt lt m key dc format gt application x abiword lt m gt lt m key abiword generator gt AbiWord lt m gt lt m key abiword date_last_changed gt Tue Oct 19 22 14 26 2004 lt m gt lt s type P name Normal followedby Current Settings props text indent 0in margin top 0pt margin left 0pt font stretch normal line height 1 0 text align left bgcolor transparent lang en US dom dir ltr margin bottom 0pt text decoration none font weight normal font variant normal color 000000 text position normal font size 12pt margin right 0pt font style normal widows 2 font family Times New Roman gt lt styles gt lt P dESZE pagetype Letter orientation portrait width 8 500000 height 11 000000 units in page scale 1 000000 gt lt section props page margin footer 0 5in page margin header 0 5in gt lt P style Normal gt Une phrase d exemple lt gt lt section gt lt abiword gt Http www framasoft net 99 106 1 La double face du langage WYSIWYG Tutoriel Framasoft lt office document content gt Remarques
100. s lection gt Shift gt nouvelle s lection Une fois le titre et le paragraphe s lectionn s appuyez sur l pingle des calques Bien l aide de la rose des vents et des poign es on de redimensionnement arrangez vous pour que le calque vienne se glisser dans la partie gauche de votre page o il m29e 17 pingle calque reste un espace vide Ne vous inqui tez pas du sort du titre pr sentation qui risque de modi fier son aspect ceci est d aux r gles CSS qui s appliquent toujours malgr le redi mensionnement du calque Voici une image pour vous donner une id e du r sultat Http www framasoft net 53 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft Image 18 R sultat de la cr ation du calque presentation Le sous titre h2 nomm pr sentation ainsi que le paragraphe qui l accompagne p sont d sormais d pendants d un calque nomm div Qu avons nous fait si ce n est exactement cela g n rer une DlVision dans la mise en page Afin de pouvoir mettre en forme ce calque ou div et uniquement celui ci nous allons lui donner un IDentificateur personnel en quelque sorte Pour le re conna tre facilement nous lui donnerons le nom de presentation sans accent sur le e soit id presentation 2 4 2 3 Modification des param tres d un calque avec l diteur CSS Cliquez dans le calque pour l activer Reportez v
101. s m mes caract res au clavier serait plus utile dans le cas d un clavier bilingue par exemple gt Toujours dans le menu Insertion Table des mati res gt Ins re une table des mati res gt Depuis la version 0 7 deux nouvelles entr es sont apparues dans le menu nsertion Http www framasoft net 79 106 1 Petits assistants utiles l laboration d une page Tutoriel Framasoft gt Commentaire et Code php Respectivement vous ins rez un commentaire l aide du dialogue Commentaire qui ne sera pas lisible sur votre page HTML mais visible dans le code source ou des l ments de codage en langage php l aide du dialogue Code php Langage tr s connu et utilis Le support php par Nvu a t demand depuis longtemps voil qui est fait gt Dans le menu Outils Valider le code HTML gt Ce lien vous connecte un service de validation de votre page HTML Ceci vous permet de v rifier que votre page est conforme aux standards ouverts non propri taires Ce qui est le but de l dition avec Nvu Voici une page nomm e validator html valid e par le service de validation du w3c vuy MARKUP VALIDATION SERVICE 067 Rats LP CM HELP amp FAQ FEEDBACK LINK CHECKER File validator html Content Type text html Encoding jiso 8859 1 Doctype HTML 4 01 Transitional THIS PAGE IS VALID TRANSITIONAL Results Tir Or THE Day GIF or PNG The uploaded file was checked and found to be valid HTML 4 01 Transitio
102. s disposez d outils de recherche et de remplacement de texte Rechercher et remplacer Rechercher nouveau Rechercher le pr c dent gt Dans le menu Affichage Barres d outils Personnalisation de barre d outils gt vous pouvez ajouter ou retirer les ic nes des deux barres d outils principales Mise en forme et Composition gt Dans le m me menu Affichage gt La s lection de Mise en vidence des blocs fera appara tre les blocs auxquels appartiennent chaque balise Cette propri t est particuli rement int ressante pour comprendre la notion fondamentale de bloc avec les CSS En CSS chaque balise correspond un bloc qui va permettre de lui attribuer de nombreuses propri t s Cette fonction vous sera grandement utile au d but si vous n avez jamais travaill avec des feuilles de style CSS gt Toujours dans le menu Affichage gt Taille du texte est un zoom de texte pour travailler mais il ne grossira pas le texte de vos page en lignes c est une fonction utilisateur gt Dans le menu Insertion HTML gt une bo te de dialogue vous offre la possibilit d ajouter du code HTML N anmoins elle peut tre utile pour vous aider apprendre les bases du codage HTML pur gt Dans le m me menu Insertion Caract res et symboles gt La fen tre de dialogue ins re les diphtongues de type les majuscules accentu es quelques symboles grecs et de nombreux caract res non francis s L attribution de ce
103. s m mes pages l adresse relative sera alors gt acrose style export css pour une feuille de sty gt lt linkmedia screen rel styllesheet href acrose style export csslt ype text CSS gt gt acrose style export htm pour une page HTML gt lt a href acrose style export htm title une page lien gt une page lien lt a gt gt ce qui correspond bien essai htm acrose T 5ty le eXporc css export htm gt Troisi me cas la page test se trouve l int rieur d un r pertoire nomm html qui lui m me appartient l arborescence du site acrose acrose ic i essai htm i adresse htm ajout htm amis htm ano htm Sel SCrLBES M etyle XPOMEICEIS export htm Pour retrouver les adresses relatives il va falloir remonter d un r pertoire c est dire sortir du r pertoire html pour pourvoir retrouver la bonne adresse Ce qui donnera Http www framasoft net 67 106 1 D but du quatri me exercice Tutoriel Framasoft style export css L l ment d chappement indique qu il faut remonter d un r pertoire pour retrouver la bonne adresse S il y avait deux r pertoires remonter il y aurait style export css gt style export css pour une feuille de styl gt lt linkmedia screen rel Mstyllesheet href style export css type Mer ICS EME gt style export htm pour une page HTML gt lt a href style export h
104. ste plusieurs hauteurs diff rentes de la plus grande la plus petite h1 h2 h3 h4 h5 h6 Pour un paragraphe les marqueurs sont respectivement lt p gt et lt p gt d but et fin de paragraphe Pour un tableau les marqueurs correspondant sont table td tr thead th tbody et tfoot Ce tableau a t inspir par le tutoriel selfHTML lt table gt lt thead gt lt tr gt lt th gt lt th gt lt th gt lt n gt lt th gt lt lth gt lt tr gt lt thead gt lt tr gt SNS CSN C lt tr gt ads t t ho i ho na totay r gt s este ve ee lt table gt Image 10 Les l ments de construction d un tableau lt table gt d but du tableau et fin du tableau lt table gt lt thead gt en t te du tableau lt tr gt rang e du tableau lt th gt cellule d en t te du tableau lt tbody gt corps du tableau lt tr gt rang e du tableau lt td gt cellules du corps de tableau lt tfoot gt pied du tableau lt tr gt rang e du tableau lt td gt cellules du pied de tableau Pour une liste d items Http www framasoft net 29 106 2 Edition d une page Web Tutoriel Framasoft liste ordonn e lt ol gt lt li gt lt li gt lt ol gt liste non ordonn e lt ul gt lt li gt lt li gt lt ul gt lt ol gt et lt ul gt marqueurs de listes lt li gt items de liste autant de fois que vous en avez besoin Liste d items imbriqu s exemple 1 num ration 1 num
105. stionnaire de sites Publier une page _ 687 Voir Tous les fichiers v dition dition des sites MN c3 C Nomdusite TE nouveau sie Nom E tutoriel Nvu Titre de la page souvenirs Ex Ma page Web H html Nom de fichier souvenirs html Ex mapage html adh htm Sous dossier du site pour cette page adresse htm himi SZ amp ajout htm amis htm Inclure images et autres fichiers ano htm vo Dans le m me dossier que la page a publications html B souvenirs html HO img scripts SB style Annuler export css Dans le dossier suivant img Image 35Publication d une page Une fois le dialogue activ j ai demand que la page souvenirs html soit pu bli e dans le sous dossier html du site Ensuite j ai pr cis que toutes les images devaient tre rang es dans le dossier img de l arborescence du site Pour cela j ai coch la case Inclure images et autres fichiers et le bouton Dans le dossier suivant Http www framasoft net 89 106 3 tude de cas gestion d une galerie de photos Tutoriel Framasoft Savoir img La publication termin e le programme renvoie une fen tre de confirmation indiquant que tout a t correctement charg sur le sur le site externe Si il y a eu une erreur de publication vous en serez tout de suite inform avec le m me dia logue qui vous indiquera la marche suivre 3 4 Mise jour de la galerie de photos Pour
106. t lt lisvms Li gt lt li gt deux lt li gt lt li gt trois lt 11 gt Http www framasoft net 85 106 6 Liens et relations Tutoriel Framasoft lt li gt quatre lt 1i gt lt i gt cine Asb gt lt fuils Il s est av r que ce genre de mises en relations est tout aussi utile que ris qu e car n importe qui peut utiliser la relation math matiques et vous emmenez vers des th ories qui n ont rien voir avec la science des math matiques C est la principale critique apport e cette nouvelle conception N anmoins il s av re que cette formulation est largement employ e dans les milieux li s l informatique m me si elle n est pas encore totalement popu laire Nvu vous propose d utiliser deux types de ces balises relationnelles e Les tags technocrati d di s au blogs journaux quotidiens e les liens relationnels pour les sites Web classiques 6 1 Les tags technocrati Pour diter un tag technocrati avec Nvu rien de plus simple Lorsque vous avez activ votre lien en ayant cliqu sur le bouton Lien Il suffit de d velopper le dialogue en cliquant sur Plus de propri t s puis de cocher Ce lien est une ti quette technocrati 6 2 Les liens relationnels Pour exprimer une relation dans votre lien lorsqu il s agit d une personne toujours dans le m me dialogue un peu plus bas il vous suffit de choisir la nature de ce lien Physique professionnel g ographique familial romant
107. t pour l impression par exemple est destin e telle ou telle propri t de la feuille de style en cours gt Le bouton R gle sera certainement celui que vous utiliserez le plus pour d finir des r gles de style pour telle ou telle balise HTML Http www framasoft net 44 106 2 Mise en forme avec une feuille de style Tutoriel Framasoft gt Dans la fen tre de gauche appara t la sp cification interne de la feuille de style et un qui indique un d ploiement en forme d arborescence gt Passons l tape suivante et cr ons notre premi re r gle en appuyant sur le bouton R gle Nouvelle r gle de style style nomm entrez un nom de classe ci dessous Cr er un nouveau style appliqu tous les l ments d un type entrez le type ci dessous style appliqu tous les l ments correspondant au s lecteur ci dessous body Cr er la r gle de style Image 15Cr ation de la r gle body gt Nouvelle r gle de style gt Cr er un nouveau style nomm C est l entr e par d faut elle d finit une classe class Qu est ce qu une classe C est un ensemble d attributs particuliers que vous rattachez un ou plu sieurs blocs sp cifiques ne pas confondre avec l attribut id pour identifiant style appliqu tous les l ments de type C est cette case que vous cocherez le plus souvent elle vous servira d finir les styles pour tous les l ments d
108. textuel ajouter pour l ajouter votre dictionnaire person nel Pour l activer il suffit de cliquer sur l ic ne Orthographe Si cette derni re n est pas install e dans votre barre d outils allez dans menu dition et glissez jus qu V rifier l orthographe Vous pouvez ouvrir aussi le dialogue en utilisant la com binaison de touches suivante Ctrl k L installation est des plus simples d sormais il suffit de t l charger l archive spell fr FR xpi puis de l installer voyez plus si vous ne savez pas comment faire Le dictionnaire est disponible sur le site geckzone dans la section extensions http wWww geckzone org extensions Http www framasoft net 81 106 3 Ajouts de styles en ligne Tutoriel Framasoft 3 Ajouts de styles en ligne Vous souhaitez modifier le style d un titre sans qu il y ait intervention dans le style g n ral Prenons pour l exemple le paragraphe explication du langage HTML Vous allez donc g n rer un style en ligne c est dire un style propre ce marqueur qui sera int gr dans le code HTML Donc toujours les m mes op rations de s lection Cliquez sur le titre ex plication pour activer la balise correspondante en bas et s lectionnez par un clic droit Styles internes Un menu contextuel dans lequel vous reconna trez les diff rents onglets de l diteur CSS appara t en autant de bo tes de dialogues distribu es individuelle ment Choisissez Propri t s
109. tion vous livrera les bases essentielles pour vous d brouiller avec Nvu Cependant le programme tant tr s intuitif la mise en forme se fera facilement 2 2 Exemple de code HTML pour une mise en forme int gr e Nous souhaitons pour notre page une couleur grise pour le corps de la page et une couleur rouge pour notre titre de hauteur 1 La police de caract re Bitstream pour le corps g n ral de la page ou tout autre qui vous convient Enfin nous souhaitons mettre en vidence le sigle HTML avec une couleur jaune Nous Http www framasoft net 35 106 2 Int grer la mise en forme au code HTML Tutoriel Framasoft laissons la couleur de police noire par d faut qui correspond la valeur rgb 0 0 0 Nous utilisons un seul et m me outil Corps de texte v E AEN A B U sans classe w Largeur variable va Image 12 Mise en forme simple Pour obtenir la couleur grise pour la page enti re cliquez en haut de la page dans un espace vide Puis s lectionnez Choisir une couleur de fond qui cor respond au petit rectangle blanc de l image on parle de couleur d arri re plan L autre le noir correspond la couleur d avant plan celle du texte d une mani re plus g n rale La bo te de dialogue des couleurs est appel e choisissez votre gris Pour l exemple j ai pris un gris pr d fini qui correspond en valeur hexad cimale cccccc soit en valeur rgb 204 204 204 Je pr cise la valeur rgb car Nvu tr
110. tm title une page lien gt une page lien lt a gt Ce qui correspond bien TaCrose essai htm remonter d un r pertoire pour sortir et trouver style r Sti 1le XPOREACEIS 1 2 Attacher plusieurs pages avec une m me feuille CSS Ins rez votre derni re page mapaged4 htm dans Nvu Ouvrez l diteur CSS Et l au lieu de cliquer sur Nouveau groupe cliquez sur Feuille li e Voici com ment la fen tre appara t Nouvelle feuille de style li e Type textjcss Alternative _ cochez pour cr er une feuille de style alternative URL file C tutoriel_Nvu acrose style export css Parcourir Liste des m dia screen Titre lier une feuille de style diff rentes page Cr er la feuille de style ttention enregistrez votre document avant d attacher une feuille de style locale utilisez le bouton Recharger si la feuille de style n est pas t l charg e imm diatement Image 24Lier une feuille de style plusieurs pages Http www framasoft net 68 106 1 D but du quatri me exercice Tutoriel Framasoft Dans la case url enlevez l adresse compl te pour ne laisser que l a dresse relative Dans Liste m dias inscrivez screen par exemple dans Titre ex port2 et cliquez sur Cr er une feuille de style Le tour est jou Votre feuille de style s est automatiquement li e votre nouvelle page HTML J esp re qu avec cet exemple vous comprenez tout l int
111. tp www framasoft net 62 106 F 3e tape exporter une feuille de style Tutoriel Framasoft F 3 tape exporter une feuille de style L inconv nient majeur d une feuille de style interne c est que le style s ap plique uniquement cette feuille Or un site Web comporte plusieurs pages Attri buer en une seule fois un style d fini pour toutes les pages du site serait bien pra tique Qu cela ne tienne Nvu et l diteur cascades vont une fois de plus vous simplifier la vie 1 D but du quatri me exercice Revenons un instant la conception d un site Un site est compos d un r pertoire g n ral qui contiendra d autres r pertoires ainsi que vos pages HTML Re portez vous l annexe chapitre 2 structure d une page Web et d un site ru diments de la structure logique d un site Web Dans notre exemple c est le r pertoire acrose On y trouve trois autres dossiers img pour y loger les images scripts pour y loger des scripts et style sera le r pertoire o nous allons exporter notre feuille de style 1 1 Export de la feuille de style avec l diteur cascades Pour la commodit de l exercice je vous invite cr er au moins une page suppl mentaire soit en renommant mapage3 htm en mapaged htm soit en en cr ant une enti rement nouvelle vous de voir De m me si jusqu pr sent vous n avez pas cr de site virtuel je vous conseille de le faire afin de faciliter la comp
112. ur d un calque afin de le positionnez particuli rement s lectionnez le tout et cli quez sur la punaise de l image 24 vue ci dessus N oubliez pas que vous pouvez choisir le type de positionnement avec les fl ches de position une position rela tive par rapport aux bords de la page est recommand e tant donn que nul ne travaille avec la m me r solution d cran Bien que la r solution 1024x768 soit for tement utilis e il en existe d autres donc ceci expliquant cela Pour rendre les liens actifs il suffira de s lectionner ma page un par exemple puis d activer l hyperlien avec le bouton lien Voyez le centre d aide Nvu Cr er des liens avec Nvu Cr er des liens vers d autres pages Voici notre menu stylis simplement ma page Ur ma page deux ma page tr ma page quatre Image 28 menu navigation simple style Voici notre menu stylis un peu plus finement Http www framasoft net 75 106 1 Toujours la m me id e mais avec de la structure et du style Tutoriel Framasoft mapage un la page trois ma pagequatre Image 29menu navigation style affin 1 3 1 Code HTML du menu de navigation et explication du style gt lt dal gt lt dt gt menu lt dt gt lt dd gt lt a href gt ma page un lt a gt lt dad gt lt dd gt lt a href gt ma page deux lt a gt lt ad gt lt dd gt lt a href gt ma page trois lt a gt lt dda gt lt dd gt lt a href gt ma pag
113. uteur 1 ou h1 titres de paragraphes avec un titre de hauteur 2 ou h2 Http www framasoft net 101 106 1 La double face du langage WYSIWYG Tutoriel Framasoft Sous titres de paragraphes avec un titre de hauteur 3 ou h3 sections l int rieur des sous titres ou des titres de paragraphes avec un titre de hauteur 4 ou h4 je r serve les titres de hauteur 5 h5 et 6 h6 pour tout autre usage nom d au teur en fin de texte par exemple lt h4 gt Exemples lt 4 gt Vous devriez tre capable d en comprendre le sens 1 5 Pour approfondir la connaissance du langage HTML Une seule r f rence tant elle est compl te didactique et tr s bien pr sen t e Vous pouvez la t l charger gratuitement sur Internet ou en acheter la version papier en librairie C est la r f rence absolue en la mati re pour tout d butant je n ai pas trouv mieux self HTML http fr selfhtml org 2 Les structures d une page Web et d un site 2 1 Rudiments de la structure logique d une page Web M me si une page Web est crite enti rement en texte brut et format e l aide du langage HTML elle n en poss de pas moins une structure logique simplis sime mais tr s utile En parcourant le contenu r el d une page de traitement de texte nous ob servons qu il existe de nombreux param tres externes notre phrase Ces para m tres fournissent des indications au programme qui les lit afin de rendre l iden tique ce
114. v utile avec une nouvelle partie s par e appel e Nvu Modulaire Cette partie tentera d expliquer telle ou telle extension et d tudier les mul tiples possibilit s offertes De m me je ne suis pas omniscient et mes connaissances sont relative ment limit es Un jour peut tre vous crirez un tutoriel sur telle ou telle exten sion future du programme Qui sait 1 5 Le cas Amaya Amaya est ma connaissance le seul autre navigateur et diteur de pages HTML en mode WYSiWYG qui fonctionne sous Windows et Linux Pourquoi en parler ici Tout d abord parce que c est le logiciel lui aussi libre issu directement du consortium du w3c que vous devez conna tre plus ou moins si vous avez lu ce tutoriel Ensuite parce que un aspect un trop exp rimen tal en modifie sa port e et le public vis Pourtant il int gre de nombreux outils qui en font un programme de tr s grande qualit Au fur et mesure des nouvelles versions il semble sortir lente ment de cette orientation exp rimentale pointue Amaya est un programme d couvrir m me s il est encore un peu raide dans son fonctionnement Il a de grandes chances de devenir l outil compl men taire parfait de Nvu pour une dition de pages avanc e et plus techniques r pon Http www framasoft net 93 106 1 Ajouter des outils compl mentaires Tutoriel Framasoft dant des besoins plus exigeants tout en gardant cette approche WYSIWYG que la tradition r s
115. vention de la roue avec un tutoriel de ce genre il a t diffi cile de trouver un juste milieu pour Nvu car ce programme peut v ritablement tou cher un large public du d butant au plus confirm Bien s r Nvu rencontre ses propres limites d s que l on veut approfondir un tantinet la question J ai choisi la cible o je me situe et donc l o je me sens le mieux un amateur qui ses heures perdues consacre quelques heures l dition Web afin de cr er ou de maintenir un site associatif ou entre amis Malgr sa jeunesse et quelques probl mes mineurs Nvu est totalement op rationnel et fonctionnel Depuis que j ai d couvert ce programme je l ai auto matiquement int gr avec d autres programmes compl mentaires et je ne m en s pare plus dans l aide la cr ation de pages Web tellement il facilite la vie Avec Nvu c est le syst me GNU Linux qui s ouvre un peu plus vers le grand public Le grand public c est un peu le talon d achille du syst me GNU Linux Mais Http www framasoft net 95 106 K Conclusion Tutoriel Framasoft c est qui au fait ce grand public Ben c est vous c est moi C est sans doute la meilleure r compense que ce syst me au d part r ser v uniquement des passionn s puisse obtenir l int r t du grand public c est dire de nous tous Puisse Nvu y contribuer A Remerciements Je remercie l association APCD www perigord tm fr apcd qui me laisse un li

Manuel N|vu Standard - version 1pr

Contents

Download Pdf Manuals

Related Search

Related Contents