Utiliser le logiciel Araneae
Gardez le contrôle sur votre code! Araneae (prononcez Ah-ran-i-hey) est un simple mais néanmoins
puissant éditeur de texte, pourvu des fonctions nécessaires à la création de sites web et scripts. Ce
logiciel, absolument gratuit pour un usage non commercial, peut donc être utilisé autant que vous le
souhaitez pour vos projets personnels.
Comment ouvrir le logiciel ?
Après l'avoir téléchargé, ouvrez le logiciel Araneae. Par défaut, il s'ouvre dans cette configuration neutre.
Pour construire votre site, vous allez créer des pages (nombreuses) en langage xhtml. A chaque fois, créez à partir de l'onglet Fichier, un nouveau document qui a pour propriété d'être un document XHTML (XHTLM Document).
Votre éditeur de texte insérera automatiquement le code suivant :
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"›
‹html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"›
‹head›
‹title>Untitled XHTML Document ‹/title›
‹/head›
‹body›
‹/body›
‹/html›
Quels sont les 3 gestes à automatiser pour chaque nouvelle page créée ?
Lorsque vous vous apprêtez à réaliser une nouvelle page, prenez l'habitude d'enchaîner trois gestes simples : spécifier la langue, le titre et l'encodage des caractères !
Dans un premier temps, changez la déclaration linguistique (qui n'est pas l'anglais mais bien le français, donc "fr" à la place de "en"). Ensuite, nommez votre page : donnez-lui un titre, en rapport avec son contenu, pour une meilleure optimisation par la suite (notez que ce titre apparaîtra au haut de la fenêtre de votre navigateur). Enfin, spécifiez l'encodage des caractères de votre document (charset=iso-8859-1). Voici le code, une fois ces trois modifications effectuées :
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"›
‹html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"›
‹head>
‹title>Mon site internet ‹/title›
‹meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /›
‹/head›
‹body›
‹/body›
‹/html›
Plus d'infos sur l'encodage des caractères : spécifier l'encodage des caractères d'un document (X)HTML.
Pourquoi et comment ajouter les meta tags ?
Les métaéléments (meta tags) sont des données sensées informer sur la nature et le contenu de votre page/site. Pour décrire le contenu de votre page/site, utilisez les éléments meta name "description" et "keywords". Notez que les meta tags ne sont pas affichés mais peuvent par exemple être lus par les moteurs de recherche afin de référencer votre page/site web ou d'afficher le résultat d'une recherche.
Selon certains webmasters, vous pourriez vous passer de ces meta tags. Sur zwatla et sur toutes nos créations, nous continuons cependant à les utiliser. Nous vous conseillons en tous cas de conserver les "meta description" et "meta keywords". La "meta description" est en principe une description de votre page/site (elle s'affiche lors du résultat d'une recherche, sur google par exemple). Les "meta keywords" sont une série de mots clés décrivant votre page/site web.
‹meta name="Description" content="La description de votre site" /›
‹meta name="Keywords" content="mot clé, mot clé, mot clé " /›
Comment relier votre document à la feuille de style CSS ?
Comme nous l'avons vu plus haut, le langage XHTML est essentiellement utilisé pour définir la structure du contenu de votre site. La page que nous venons de créer (document XHTML) devra donc être liée à une feuille de style (document CSS) qui en simplifiera la présentation (voir plus bas "Comment créer une feuille de style?").
Vous devez donc relier votre document html à une feuille de style (style.css) par la déclaration suivante :
‹link rel="stylesheet" type="text/css" href="style.css" /›
Comment créer une feuille de style (CSS) ?
Le principe est le même que pour l'ouverture d'un document xhtml, mais choisissez à présent l'onglet "CSS Document" :
Attention, le document s'ouvre alors par défaut en insérant ce code :
Supprimez-le ! Votre document CSS doit être vierge lorsque vous débutez une création.
Ensuite ?
Vous venez de créer un document xhtml et une feuille de style et les relier entre eux. C'est à ce stade que commence réellement votre travail de création, avec le remplissage de votre document CSS, parallèlement à votre document XHTML. N'oubliez pas d'enregistrer ces deux documents (le document XHTML et le document CSS) si vous souhaitez les conserver (par exemple, enregistrez-les sous index.html et style.css).
Chapitre suivant : télécharger et modifier les kits
Fiches didactiques
- Créer un site internet
- Utiliser le logiciel Araneae
- Télécharger et modifier les kits
- Exercices pratiques à partir du kit BlueFlower
