retour

CREER SON SITE WEB

phase préalable

se renseigner après de son Fournisseur d'Accès Internet (FAI) pour savoir si on dispose d'un espace sur le web (free, wanadoo).

avoir une idée de pages et se poser quelques questions :

elle doit intéresser au minimum quelqu'un d'autre que soi ;-)
le site contiendra-t-il du texte ou plutôt des photos ?
site sobre ou coloré ?

attention !

ceci n'est pas un cours sur le HTML/CSS

ces quelques pages sont un bref tutorial ( = je fais bêtement ce qu'on me dit de faire, je comprendrai au fur et à mesure, je commencerai par modifier 2-3 choses pour étudier les changements, j'approfondirai finalement si ça m'interesse)

si il y a des points obscures, ne pas hésiter à me mailer des remarques: slzkn@free.fr, j'en tiendrai comptes dans les prochaines mises à jour

pour voir le site dont vous allez lire le making of, cliquer ici , ça sera plus facile de visualiser le résultat et voir l'avancement des travaux

quelques notions

les images

même si avec la généralisation de l'ADSL permet de surfer plus rapidement, une page avec de nombreuses photos de grande taille reste quand même longue à charger, la solution la plus courante consiste à
- afficher des miniatures qu'on peut agrandir en cliquant dessus pour les photos
- enregistrer dans un format adapté pour les images.

la transparence des images png n'est pas prise en charge par internet explorer (un mauvais élève).
la transparence des images gif est prise en charge par tous les navigateurs

les chemins

considérons le répertoire sur le PC local où nous placerons les fichiers à publier sur le serveur free :
D:\mes_sites_web\mon_site_sur_free\

dans ce répertoire, nous avons architecturé notre site comme suit :
index.html
style.css
repertoire_photos\accueil.html
repertoire_photos\pages_de_miniatures\page1.html
repertoire_photos\pages_de_miniatures\page2.html
repertoire_photos\pages_de_miniatures\style.css

description des chemins de pages html sur le web

http:// : signale au navigateur le protocole utilisé (Hyper Text Transfert Protocole)
monsite.free.fr : la racine du site (monsite) sur le serveur web, ce nom est unique sur internet
les répertoires sont séparés par des slash (/)

une fois publiés :
le chemin de index.html devient : http://monsite.free.fr/index.html
le chemin de page1.html devient : http://monsite.free.fr/repertoire_photos/pages_de_miniatures/page1.html
etc...

chemin relatif - chemin absolu

considérons que sur index.html, on a un lien vers accueil.html, il faut indiquer le chemin de accueil.html
soit en chemin absolu : http://monsite.free.fr/repertoire_photos/accueil.html
soit en chemin relatif : ./repertoire_photos/accueil.html (1 point est le répertoire courant)

considérons que sur accueil.html, on a un lien de retour vers index.html
chemin absolu : http://monsite.free.fr/index.html
chemin relatif : ../index.html (2 point est le répertoire père)

langage html

ce n'est pas de la programmation !
c'est un langage de mise en forme interprétable par un navigateur pour afficher des pages web.
la mise en forme se fait grâce aux balises du langage.

règles sur les balises html

balises ouvrantes : <balise>, balises fermantes : </balise>
balises uniques : <balise />
les balises ne se chevauchent jamais :

<a><b></a></b> interdit !
<a><b></b></a> voila c'est ça

elles ont des propriétés propres pour gérer couleurs, espacements, tailles de ce qu'elles contiennent etc... :
<balise propriete1="valeur1" propriete2="valeur2">...</balise>

code HTML (affichage avec notepad par exemple)

affichage dans le navigateur (firefox, internet explorer...)

debut de
phrase<br />retour à la
ligne

debut de phrase
retour à la ligne

<h1>mon titre de niveau 1</h1>
<h2>mon titre de niveau 2</h2>

mon titre de niveau 1
mon titre de niveau 2

<table>
    <tr>    
       <td>ligne1 colonne1 de mon tableau</td>
       <td>ligne1 colonne2 de mon tableau</td>
    </tr>
    <tr>    
       <td>ligne2 colonne1 de mon tableau</td>
       <td>ligne2 colonne2 de mon tableau</td>
    </tr>
</table>

ligne1 colonne1 de mon tableau	ligne1 colonne2 de mon tableau
ligne2 colonne1 de mon tableau	ligne2 colonne2 de mon tableau

<ul>
<li>exemple 1</li>
<li>exemple2</li>
</ul>

exemple1
exemple2

<a href='http://slzkn.free.fr/' target='_blank'>vers le site sur la machine a pain</a>

vers le site sur la machine a pain

<hr />

couleurs

plusieur formats de couleurs sont reconnus.
les plus courants :
couleur de fond (bgcolor) du corps du texte (body) de la page :

<body bgcolor="white"></body>

<body bgcolor="#FFFFFF"></body>

#FFFFFF = blanc
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#000000 = noir
on peut alors choisir précisement une couleur en combinant chacune des valeurs RVB (Rouge Vert Bleu) à une valeur hexadecimale entre 00 et FF.

se familiariser avec ce principe

lien, target

c'est un lien qui permet d'ouvrir une autre page (ou la même page à un certain endroit) quand on clique dessus.

si on veut ouvrir cette page dans une autre fenêtre (lien vers l'exterieur du site), la valeur de la propriété 'target' de la balise 'a' doit être égale à '_blank' :
<a href='http://www.google.fr/' target='_blank'>lien vers google</a>

css = feuille de style

css permet de centraliser et hiérarchiser les valeurs concernant l'aspect visuel des pages.

exemple :
si on veut modifier la couleur de fond de toutes les pages qu'on a déjà écrites, il suffit de modifier le fichier style.css (dans l'exemple) au lieu de modifier toutes les pages.
noter que chaque page 'savait' quel fichier css utiliser, on lui avait indiqué préalablement par la balise suivante :
<link rel="stylesheet" href="./style.css" type="text/css">

on peut déclarer différents styles :

les styles s'appliquant à une balise html particulière

par exemple un tableau : la balise <table>
le style sera de la forme table { ... }
ce style s'appliquera à tous les tableaux de la page
les styles nommés : il faudra préciser quel élément utilisera ce style et donner un nom de 'classe' unique

par exemple, on veut donner différents styles aux images (balise <img>)
le style sera de la forme img.bordurePointille { ... }
il faudra spécifier dans chaque balise devant utiliser ce style sa classe : <img class='bordurePointille'>
de cette façon, les autres images (sans classe) garderont leur style par défaut

HTML UNIQUEMENT

AVEC CSS

on doit modifier pour chaque page html la couleur de fond

<html>
<head>
<title>SANS CSS</title>
</head>
<body bgcolor="#FFFFFF"> bla bla bla
<table><tr><td>
       legende
       <img src="./sample_monimage.png">
       </td></tr>
</table>
</body></html>

>>> visualiser l'exemple <<<

page html : on ne modifie rien

<html>
<head>
<title>AVEC CSS</title>
<link rel="stylesheet" href="./sample_style.css" type="text/css">

</head>
<body> bla bla bla
<table><tr><td>
       legende
       <img class='bordurePointille' src="./sample_monimage.png">
       </td></tr>
</table>
</body></html>

on modifie la feuille de style que vont utiliser toutes les pages html (sample_style.css) :

body { background-color:#FFFFFF;
}
table { background-color: #8888FF;
}
img.bordurePointille { border-style: dotted;
border-width: 2px;
border-color: #FFFF44;
}

>>> visualiser l'exemple <<<

fonts

il vaut mieux utiliser des polices de caractère courantes car elles ne sont jamais récupérées et installées sur l'ordi visualisant la page.

conclusion

je rappelle que ces pages de tutorial ne sont pas un cours sur le HTML
il y a de la documentation très complète sur ce site :la référence sur le HTML/CSS

commencer son projet

se munir d'outils gratuits et pourtant performants :

pour les photos : XnView
pour les images : theGimp
pour éditer : nVu
pour vérifier les pages (elles sont interprêtées différemment selon le navigateur):
ie, firefox; opera, netscape
pour uploader : filezilla

établir des règles sur lesquelles on ne revient pas

se dire qu'on écrit répertoires et fichiers en minuscule
attention : il faudra vérifier l'utilisation systèmatique des chemins relatifs

créer une structure de travail
définir les aspects visuels des pages
choisir des couleurs (on peut s'aider de propriétés d'affichage windows pour se donner des idées)
définir les styles des pages (encadrement, soulignement, surlignement)
récuperer des images, des gifs animés sur le net

c'est parti !

on ne va pas faire quelque chose de trop compliqué, c'est un tutorial !

déroulement du projet

projet retenu

nous allons créer quelques pages sur la machine à pain avec des photos

il y aura une partie 'reportage' : explications et petites photos
et une partie galerie photos avec miniatures (miniatures car les pages doivent se charger rapidement)

structure du site

arborescence
site : contient ce qui sera publié sur le web
+ design : contient les élements graphiques des pages
+ galerie : contient la galerie photo créée par XnView
++ original : photos originales (créé automatiquement par XnView)
++ thumb : miniatures (créé automatiquement par XnView)
+ photos_recettes : contient les photos du reportage
travail : on place les fichier devant être traités et travaillés; ne sera pas sur le web

couleurs choisies

jaune, beige, paille (fond clair, police foncée)
idee_couleurs