Web création

Quel langage utiliser pour créer un site internet ?

Un site internet est un contenu (texte, images, médias) mis en forme (design, couleurs) pour être diffusé sur internet. Pour créer un site, nous utilisons deux langages complémentaires : le langage XHTML, qui définit la structure du contenu, et les feuilles de style (CSS) qui en simplifient la présentation. Ces langages sont à la base de la création internet contemporaine : ils améliorent l'accessibilité, réduisent la complexité de l'architecture d'un document et permettent de changer plus facilement de structure et de présentation.

De quels types de logiciels aurez-vous besoin ?

Pour travailler à la construction de votre site, vous devrez impérativement disposer d'un éditeur HTML, c'est-à-dire un logiciel qui vous permettra d'écrire le code de votre site.

Pour décompresser les kits graphiques téléchargés sur zwatla (sous forme de fichiers ZIP) , vous aurez besoin d'un logiciel de compression / décompression d'archives de type ZIP, ARJ, RAR.

Enfin, pour monter votre site en ligne, vous utiliserez un "File Transfer Protocol" (protocole de transfert de fichiers ou client FTP) .

D'autre part, si vous comptez utiliser des images sur votre site, vous aurez besoin d'un outil pour les recadrer, découper ou retoucher.

Quels logiciels utiliser ?

• Editeur HTML : PSPad ou Araneae
• Outil de décompression : 7-zip
• Client FTP : Filezilla
• Création et retouche image : Gimp

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 :

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 :

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.

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 :

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

Télécharger et modifier les kits

Zwatla met gratuitement à la disposition de tous des kits graphiques CSS-XHTML facilement adaptables. Ces kits sont des prototypes de sites (à base de documents XHTML et CSS préremplis) que vous pouvez ensuite aisément personnaliser en les modifiant un peu (en mettant la main à la pâte) ou totalement (pour les plus aguerris d'entre vous). Notez que ces kits sont soumis à certaines règles d'utilisation (voir forum).

Les kits graphiques édités par Zwatla sont réalisés par nos soins et gratuits. Chacun d'eux est conçu pour faciliter au maximum la mise en place de textes, photos,... tout en limitant le plus possible les compétences et logiciels requis.

Voir tous nos kits graphiques

Comment télécharger un kit graphique sur Zwatla ?

Pour télécharger l'un de nos kits graphiques, vous devez au préalable vous inscrire sur notre Forum (si vous n'êtes pas un utilisateur inscrit, le contenu "Téléchargement des kits" n'apparaît pas et il vous est dès lors impossible de télécharger quoi que ce soit). Une fois la (très courte) procédure d'inscription accomplie, vous pourrez télécharger le (ou les) kit(s) de votre choix.

Une fois inscrit sur le forum de zwatla,vous trouverez dans le forum des kits graphiques un sujet de discussion par kit. Sélectionnez votre kit favori, et cliquez sur "Téléchargement". Il ne vous reste plus qu'à enregistrer le fichier proposé sur le disque dur de votre ordinateur.

Que faire du fichier téléchargé ?

Lorsque vous téléchargez un kit sur notre forum, vous obtenez un fichier ZIP dans lequel se trouve la base de construction de votre futur site. Un ZIP est un format de fichier permettant la compression de données.

Pour accéder aux dossiers et fichiers du kit téléchargé, vous devez d'abord décompresser le ZIP. Pour décompresser un fichier ZIP, vous devez impérativement disposer d'un logiciel de compression / décompression d'archives de type ZIP, ARJ, RAR.

Pour rappel, vous pouvez utiliser les logiciels suivants comme outils de décompression : winrar (version d'évaluation de 40 jours) ou 7-zip (open source).

Dans le fichier décompressé (qui porte le même nom que le ZIP) vous trouverez généralement :

• 1 dossier d'images : images
• 1 page CSS (feuille de style) : style.css
• 1 ou plusieurs page(s) HTML (document xhtml) : index.html

Comment modifier les kits ?

Pour la réalisation de nos kits, nous n'utilisons pas d' éditeur WYSIWYG, mais travaillons en mode texte (directement dans le code). Nous vous conseillons cette approche (même si pour certains, elle peut paraître ardue) et vous recommandons d'utiliser le logiciel Araneae ou PSPad (vous pouvez toutefois utiliser Dreamweaver ou tout autre éditeur html, du moment que vous ouvrez vos documents en mode texte).

Vous êtes prêt à vous lancer ? Ouvrez la page (x)html que vous souhaitez modifier dans votre éditeur html en mode texte (Araneae ou PSPad) et ouvrez-la également avec votre navigateur web préféré.

Exemple d'ouverture du document "index.html" avec le logiciel PSPad (éditeur html)

Exemple d'ouverture du document "index.html" avec Firefox (navigateur web)

Faites les modifications dans le code HTML ou CSS, selon ce que vous souhaitez modifier le contenu ou le design (voir à ce sujet le prochain chapitre : Exercices pratiques à partir du kit Blue Flower).

Pour voir le résultat, enregistrez votre (vos) document(s) HTML et/ou CSS (selon les modifications effectuées) et actualisez la page dans votre navigateur web (appuyez sur la touche F5 de votre clavier et vos modifications doivent être apparentes).

Exercices pratiques à partir du kit Blue Flower

Avant de vous lancer, si vous êtes un peu novice dans le domaine, faites d'abord ces petits exercices qui vous aideront à bien comprendre comment tout fonctionne.

Visuel du kit Blue Flower : Kit Blue Flower

Téléchargez le kit graphique Blue Flower et enregistrez-le dans un dossier spécifique (comme par exemple "Mon site internet"). Décompressez-le (extraire) dans ce même dossier.*

Pour pouvoir décompresser le fichier blue-flower.zip, vous devez disposer d'un logiciel de compression / décompression d'archives de type ZIP, ARJ, RAR (voir notre chapitre précédent : Créer un site internet, Que faire des fichiers téléchargés).

Ouvrez ensuite la page html avec votre éditeur de site web (Araneae par exemple) ainsi qu'avec votre navigateur web (Firefox par exemple).

Quelles sont les principales caractéristiques structurelles de ce kit ?

Lorsque vous observez ce kit, vous pouvez facilement en dégager les principaux axes qui sous-tendent sa charpente. Au premier coup d'oeil, vous remarquerez certainement qu'il est clairement composé de trois parties : un haut (image florale bleue) sur toute la largeur du kit, et un bas divisé en deux colonnes, dont l'une d'elles plus large. Le titre du site se trouve tout en haut à gauche, suivi du menu principal. La colonne de gauche reprend le contenu proprement dit (texte précédé d'un titre, éventuellement accompagné d'une image) et la mince colonne de droite affiche le sous-menu avec diverses rubriques.

Tous ces éléments sont facilement modifiables et nous allons donc les passer en revue à travers les exercices pratiques ci-dessous.

A propos des textes : comment modifier leur couleur ?

Dans la feuille de style (css), vous devez définir un style par défaut pour les caractères d'écriture. Dans notre kit exemple Blue Flower, les caractères d'écriture par défaut sont de couleur grise (même si de nombreux textes sont en bleu ou ocre). Cette couleur (color) par défaut des caractères est généralement indiquée dans la partie "body" de la css.

Nous vous proposons de transformer la couleur que nous avions choisie par défaut par du rouge. Effacez le code correspondant à la couleur grise (575449) et remplacez-le par du rouge (FF0000). Enregistrez votre document css et visionnez le résultat dans votre navigateur (n'oubliez pas de rafraichir la page dans le navigateur à chaque modification).

> Les codes couleurs en html : code-couleur.com

> Le code text-align correspond à l'alignement du paragraphe (à gauche, à droite, centré, justifié), le font-size s'applique à la taille des caractères, le font-family est la police d'écriture et le line-height définit l'espacement des lignes. La liste des balises html utilisées sur nos kits est définie au prochain chapitre.

A propos des textes : comment modifier la couleur particulière des titres ?

Vous souhaitez modifier la couleur des titres principaux de la colonne de gauche.

Couleur initiale du titre (bleue)

La hiérarchie des titres est indiquées par les balises h, de h1 à h6 par ordre décroissant d'importance. Le titre "hendrerit facilisi" est un titre de deuxième catégorie (le titre principal de ce kit est le titre du site). Dans la CSS (xxx style.css), cherchez donc "contenu h2", ce qui donne ceci :

Changez le code couleur (color) pour obtenir une autre couleur.

Par exemple, transformez le bleu utilisé (0072BB) en du orange (F66B00).

> Le code le font-weight définit le style des caractères d'écriture (normal, gras, italique). La liste des balises html utilisées sur nos kit est définie au prochain chapitre.

> Pour changer le contenu du titre (pour indiquer par exemple "mon titre" à la place de "hendrerit facilisi"), il suffit de rechercher dans la page html cette fois (blue-flower.html) la balise h2 précédant ce contenu (hendrerit facilisi). Effacez les mots "hendrerit facilisi", remplacez-les par "mon site" et le tour est joué (n'oubliez pas d'enregistrer votre page avant de procéder aux vérifications dans votre navigateur).

A propos des images : comment modifier l'image en haut du site ?

La phrase correcte serait : comment modifier l'image qui est en background dans le header. Pour modifier cette image, ouvrez la feuille de style (css) avec votre éditeur de site web et cherchez ce balisage :

remplacez la partie qui concerne l'image :

par le nom de votre image :

Attention : si vous faites vos tests en ligne, n'oubliez pas d'uploder votre nouvelle image, et n'oubliez pas non plus d'uploader la css. (pour uploader les fichiers vers votre serveur il vous faut un Client FTP tel que Filezilla )

A propos des images : comment changer l'image de décoration ?

Nous mettons généralement 1 ou 2 images en décoration sur nos kits, voici le code qui permet d'afficher des images dans les pages (x)html. Dans la page (x)html cherchez :

Plus précisément :

Modifiez l'image :

A propos de la structure : peut-on modifier la disposition du kit ?

Vous pouvez supprimer et déplacer toutes les balises que vous souhaitez, mais faites attention à toujours déplacer les balises d'ouverture, mais aussi celles de fermeture.

Est-il facile d'intervertir les deux colonnes ?

Pour intervertir la colonne de gauche (le contenu) et la colonne de droite (barre latérale), donc pour mettre la barre latérale à gauche, il suffit de déplacer dans le code (x)html tout ce qui concerne la barre latérale. Dans votre page html, sélectionnez donc tout ce qui se trouve entre les balises ‹div id="side"› et ‹/div› (balises comprises) et déplacez ce bloc sélectionné juste avant la balise ‹div id="main"›. Cependant, vous devrez encore vous occuper des marges, car elle doivent être ajustées. Dans la css, réglez à votre guise le padding du #contenu qui est pour le moment fixé à 40px.