Web créations

Web design

Création de sites web

Services

Goodies

Amis

Créer un site internet

Zwatla vous aide avec ces quelques notions de base ainsi que des trucs et astuces css.

Pré-requis et liste des balises les plus courantes
Démarrer la création de votre site
Réaliser une première création
Les conteneurs
Réaliser un conteneur centré
Réaliser un conteneur centré et de hauteur 100 %
Sous-organisation des conteneurs, la base d'un template

Pré-requis

Pour créer un site internet, il faut du contenu et une idée de base de ce que l'on veut faire. Pourquoi ai-je besoin d'un site internet ? De combien de pages sera-t-il composé ? Quel sera mon menu ? Une fois que vous avez structuré vos idées et réuni vos documents, il ne vous reste plus qu'à "créer le site internet".

Il faut savoir que mettre du contenu en ligne et réaliser un site internet harmonieux n'est pas exactement la même chose. Si l’osmose entre un brillant graphisme et une intégration parfaite est l’apanage des spécialistes (graphistes, web designers,…), mettre du contenu proprement en ligne est certes à la portée de tous, et c'est ce que nous allons vous montrer ci-dessous, à travers de nombreuses notes explicatives.

Pour créer un site internet, nous utiliserons le langage XHTML pour définir la structure du contenu, et les CSS (feuilles de style) pour en simplifier la présentation. Ces langages sont à la base de la création internet contemporaine, car ils permettent 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.

Liste des balises html les plus courantes

‹h1› ‹/h1›, ‹h2› ‹/h2›, ‹h3› ‹/h3›, ‹h4› ‹/h4›, ‹h5› ‹/h5›, ‹h6› ‹/h6› : ouverture et fermeture des titres et sous-titres (exemples de balises html sans css)
‹p› ‹/p› : ouverture et fermeture d'un paragraphe
‹a href="ma_page_lien.html"›mon lien‹/a› : insertion d'un lien vers une page web
‹img src="mon_image.jpg" alt="une jolie image"/› : insertion d'une image avec texte alternatif lorsque l'image ne s'affiche pas
‹div› et ‹div/› : ouverture et fermeture d'un conteneur

Démarrer la création de votre site

Pour travailler à la construction de votre site, il faut impérativement un éditeur HTML, c'est-à-dire un logiciel qui vous permettra d'écrire le code de votre site. Nous vous conseillons de télécharger le logiciel Araneae (qui est gratuit); c'est un logiciel WYSIWYG, comme Dreamweaver, et d'autres encore.

Ouvrir le logiciel

Après l'avoir téléchargé, ouvrez le logiciel Araneae. Par défaut, il s'ouvre dans cette configuration neutre (cliquez sur l'image pour la visualiser en grand)

Pour construire votre site, vous allez créer des pages (nombreuses) en langage xhtml. Veillez donc à créer à chaque fois, à 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 par défaut le code suivant :

Modifier l'encodage

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 le contenu, pour un meilleur référencement). Notez que ce titre apparaîtra au haut de la fenêtre de votre navigateur. Enfin, insérez le code qui va spécifier l'encodage des caractères de votre document.

Voici le code à copier-coller pour spécifier l'encodage des caractères.

Plus d'infos sur le comment et le pourquoi de cet encodage : spécifier l'encodage des caractères d'un document (X)HTML.

Ajouter les meta tags

Il s'agit de données non affichées (les "meta name") qui décrivent le contenu de votre page/site. Elles pourront être utilisées par les moteurs de recherche lors du référencement de votre page web ou lors de l'affichage du résultat d'une recherche.

Vous pouvez vous en passer selon certains webmasters, sur zwatla et sur toutes nos créations, nous continuons à les utiliser.

Nous vous conseillons de conserver les "meta description", qui s'appliquent au contenu de votre site, et les "meta keywords", qui sont une série de mots clés décrivant votre page Web.

Voici le code à copier-coller des meta tags.

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 pour la création d'un document CSS).

Vous devez donc relier cette feuille de style (style.css) à votre document html par la déclaration suivante :

Voici le code à copier-coller pour relier votre page XHTML à la feuille de style (document CSS).

Créer la feuille de style (CSS)

Même principe que ci-dessus, mais choisissez l'onglet "CSS document" :

Ouverture par défaut :

A supprimer !

C'est à ce stade que commencera 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)

Réaliser une première création

Nous avons choisi de construire ensemble une réalisation facile et rapide, une page allant de haut en bas de la fenêtre, au contenu centré de couleur fushia (#FE008F) sur un arrière-plan de couleur grise (#3A3A3A) : Tempalte Musique Electro.

Cet exemple, qui vous fait volontairement travailler à l'aveugle, a pour objectif de souligner la complexité de la tâche qui vous attend : s'il est évident que le code doit être impeccable, gardez toujours à l'esprit l'importance que revêt une vérification méticuleuse de l'affichage du site sur différents navigateurs.

Reprenez donc votre feuille de style vierge et insérez-y le code suivant : code à copier-coller (fichier texte).

Ensuite, reprenez votre document XHTML de base et insérez-y le code suivant (création d'un conteneur) : code à copier-coller.

Si vous n'avez commis aucune erreur jusqu'à présent, le résultat peut cependant varier en fonction du navigateur utilisé pour visionner vos pages.

Cela peut donner ceci (avec Firefox) :

ou cela (avec Internet Explorer) :

Insérer les commentaires conditionnels pour IE 6 et versions inférieurs

Cette première réalisation facile et rapide va vous permettre de comprendre en quoi consistent et à quoi servent les commentaires conditionnels.

En effet, ne souhaiteriez-vous pas que votre site s'affiche sur tous les navigateurs de la même façon?

Pour y parvenir, il vous faudra dans certains cas (comme ici) créer des commentaires conditionnels, c'est-à-dire un document CSS spécifique pour certaines versions du navigateur Internet Explorer (IE6 et versions antérieures). Ce document vous permettra d'isoler les paramètres que ces différentes versions du navigateur IE interprètent différemment (par rapport à IE7 ou Firefox par exemple).

Vous devez donc créer un nouveau document CSS (enregistré sous ie.css) qui sera spécifique aux versions IE 6 en inférieurs et y insérer le code suivant : code à copier-coller. commentaires conditionnels pour IE 6

Vous devez ensuite, toujours dans ces cas particuliers, relier votre document XHTML à cette nouvelle feuille de style spécifique (conditional.css), en insérant la déclaration suivante :

Voici le code à copier-coller pour relier votre page XHTML à la feuille de style conditionnelle (document conditional.css). Il est donc tout à fait normal que votre document XHTML soit relié à 2 feuilles de style (style.css et conditional.css).

Le Résultat

Sans la feuille de style conditionnnel : Sans la feuille de style conditionnnel

Avec la feuille de style conditionnnel : Avec la feuille de style conditionnnel

(Ce test n'est valable que pour les utilsiateurs ou pour ceux qui veulent encore dévellopé pour IE6) - Pour en savoir plus sur les commentaires conditionnels : Qu'est-ce que les commentaires conditionnels ?

Voyons ce que donne votre page XHTML au complet : code à copier-coller.

Et voila ce que cela donne si tout est correct : Tempalte Musique Electro

Les conteneurs

Précédemment, nous avons réalisé ensemble une première création où nous avions inséré dans la page XHTML une div id="cont". C'est ce qui s'appelle un conteneur (une sorte de boîte dans laquelle vous allez poser votre contenu)

Pour débuter la construction d'un site, vous devez donc toujours dans un premier temps créer un conteneur général et quelques sous-conteneurs.

Les conteneurs sont délimités par des balises de type "bloc" (DIV) et peuvent varier en longeur, largeur, alignement etc.

Pour en savoir plus : la structure des balises bloc et en-ligne

Dans un premier temps

Tout d'abord, il faut choisir le type de conteneur que nous allons utiliser : quelle forme aura le site internet ? Le site peut être centré, ou d'une hauteur 100% par exemple. Les possibilités sont nombreuses, et pour vous aider à comprendre, vous trouverez ci-dessous quelques uns des cas de figures les plus couremment utilisés. Faites 'Affichage' et 'Code source de la page' pour visualiser le code des exemples proposés.

Conteneurs centrés

Ces conteneurs sont faits pour se centrer automatiquement au milieu de votre fenêtre. En jouant uniquement sur les dimensions (longueur - largeur), voici quelques cas de figure possible :

Nous utilisons ces conteneurs centrés sur zwatla pour les petits kits graphiques ainsi que pour quelques sites internet perso. Voici quelques exemples de kits réalisés à partir de cette idée :

Conteneurs centrés avec hauteur 100%

Ces conteneurs, à largeur toujours définie, ont une hauteur qui varie en fonction de la hauteur de votre fenêtre (ce type de conteneur s'adapte automatiquement pour se caler au haut au bas de votre fenêtre).

On peut toujours jouer sur la dimension de la largeur du conteneur (= width). Cela donne par exemple ceci :

Quelques exemples de kits réalisés à partir de cette idée :

Sous-organisation des conteneurs : la base d'un template !

Templates 2 colonnes

Le conteneur 2 collones est un modele "classique" qui nous permets d'avoir un DIV avec le contenu du site et une collonne avec les liens, de la pub, des sponsors ...

Quelques exemples de kits réalisés à partir de cette idée:

Templates 3 colonnes

Même principe que le 2 colonnes ... Donc 1 colonne en plus

Template de largeur 100 %

Les designs "circus" (red & green).

Nous allons examiner deux constructions de kits que nous appelons templates de largeur 100 %, c'est-à-dire des templates s'étendant aux extrémités gauche et droite de la fenêtre de votre navigateur.

Quelles sont les caractéristiques des designs "circus" (red & green)?

Le design "circus" a un "haut" qui s'étend sur toute la largeur de la fenêtre du navigateur (= principe de base d'un template de largeur 100 %).

Ce design "circus" implique également, dans ses deux déclinaisons (red & green), un logo (ou titre), un menu (de préférence simple à modifier) et quatre images de présentations. Notons que tous ces éléments doivent être centrés.

Ces deux kits, "red circus" et "green circus" sont quasi identiques à la vue mais ont été construits suivant deux méthodes différentes.

Première possibilité de construction (Red circus) :

- Le background du haut est de couleur brun terracotta (l'image répétée dans le background est "bg_haut.jpg").
Voir l'image du haut

- Le logo (ou titre) est un png transparent intégré grâce à une double div (pour le centrage). De plus, le logo est cliquable avec un lien renvoyant à l'index du site.
Voir le logo transparent (attention, ici sans javascript)

- Le menu est en texte et donc facilement modifiable.

- Les quatre images de présentation sont centrées et espacées grâce à l'utilisation de marges.

Voyons comment est réalisée l'intégration du logo (technique du png transparent).

1) Nous avons utilisé un png transparent (logo2.png) pour superposer le logo au haut. Voir le logo transparent (attention, ici sans javascript)
Petit avantage : insertion facile d'un lien renvoyant à l'index du site.
Petit désavantage : la transparence ne fonctionne pas avec tous les navigateurs.
Résolution du problème : ajout d'un javascript dans la page html.
Voir le logo transparent avec javascript

2) Le centrage du logo (ou titre) est réalisé en créant un DIV "logo" auquel nous avons donné des propriétés de centrage automatique (margin : 0 auto). Le png transparent (logo2.png) est quant à lui directement inséré dans le code html de la page.

Notez cependant que le DIV "logo" n'est pas obligatoire : vous pouvez aussi mettre un identifiant directement sur l'image (dans la page html).

Voyons comment est réalisé le menu.

Le menu est intégré sous la forme d'une liste dont les différents éléments (mots renvoyant aux différentes rubriques du site) sont réalisés en texte. La liste est insérée dans un containeur qui est automatiquement centré.
Avantage : modification rapide des mots en texte.

Enfin, examinons comment sont posées les quatre images de présentation.

Voyons d'abord quel est le problème à résoudre : quatre images qui doivent être centrées sur la gauche et la droite et qui doivent de plus avoir une certaine distance entre-elles.

Notre réalisation :
La première image est posée à gauche (dans "cont_img"). La seconde image se colle à la première mais avec une marge de 55 pixels. Même principe pour la troisième, qui a également une marge de 55 pixels et la dernière aussi, et cela grâce à l'ajout de la class "marge".

Deuxième possibilité de construction (Green circus) :

- Le background du haut est de couleur vert kiwi (l'image répétée dans le background est "bg_haut.jpg").
Voir l'image du haut

- Le logo (ou titre) est une image intégrée au background.
Voir le logo avec background

- le menu est en images

- Les quatre images de présentation sont centrées et espacées grâce à l'élément first-child.

Voyons comment est réalisée l'intégration du logo (technique du background).

1) Nous avons utilisé une image reprenant le logo superposé au haut.
Voir le logo avec background
Petit avantage : allègement de la page html (pas de javascript)
Petit désavantage : un bug lors du redimensionnement des fenêtres (à la jointure entre l'image et le background du haut).

2) Le centrage du logo (ou titre) est réalisé en créant un DIV "logo" auquel nous avons donné des propriétés de centrage automatique (0 auto). Nous y avons inséré en background l'image "bg_menu2.jpg"

Voyons comment est réalisé le menu.

Le menu est intégré sous la forme d'une liste dont les différents éléments (mots renvoyant aux différentes rubriques du site) sont réalisés en images. La liste est insérée dans un containeur qui est automatiquement centré.
Avantage : plus grande lisibilité des mots en images et plus grand choix de polices et décorations.

Enfin, examinons comment sont posées les quatre images de présentation.

Même problème à résoudre (quatre images qui doivent être centrées sur la gauche et la droite et qui doivent de plus avoir une certaine distance entre-elles), mais autre solution.

Notre réalisation : Nous avons inséré les images dans le DIV "cont_img" et utilisé l'élément "first-child" (qui fonctionne très bien sous mozilla par exemple). Cet élément consiste à donner des propriétés identiques au éléments d'une liste, propriétés qui ne seront pas prises en compte pour le premier élément de la liste. Malheureusement, IE6 ne comprend pas ce système "first-child", nous sommes alors obligés de créer une page de commentaires conditionnels pour IE6.

"Ces pages d'aide à la création de site internet se veulent être un petit support pour les kits graphiques de Zwatla, nous ne prétendons nullement avoir inventé la poudre..." Si vous constatez des erreurs ou si vous connaissez d'autres méthodes plus simples, n'hésitez à venir nous en causer sur le forum.