Les outils de création de sites web

Tuto 1ère séance - p1
Les outils de création de sites web
Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro)
site fr.openclassrooms.com (anciennement « site du zéro »)
Wikipedia : chapitres conception de sites web, programmation web, systèmes de gestion de contenu...
Sommaire
1ère séance : -- Généralités sur les protocoles et les langages du web, les
navigateurs, les éditeurs, le côté serveur, types de sites web,
étapes de conception d’un site
-- Les balises de base du HTML
2ème séance: -- Structure de la page HTML, les liens, l’insertion des images. Les
listes
ème
3
séance: -- Les CSS : appliquer les styles, la mise en forme,
4ème séance: -- Les tableaux, les formulaires, positionnement des blocs.
5ème séance: -- Publier son site : FTP, nom de domaine, hébergement,
référencement
N séances:
-- Les CMS : Jimdo, SPIP, Joomla
1 – Site web.
Tentative de définition : ensemble de pages hyperliées entre elles pouvant être véhiculées et
adressées sur le réseau mondial www moyennant un codage universel que savent lire des logiciels
« navigateurs ». L’adresse du site est l’URL (Uniform Resources Locator).
Le World Wide Web créé en 1990 au CERN : naissance du lien hypertexte et de l’adresse
électronique. W3C (consortium www) en 1992. Ouverture à l’utilisation mondiale du www en
1993  normalisation internationale des protocoles et langages.
Ne sont cités que les principaux utilisés : exemples :
Protocoles de communication:
http (HyperText Transfer Protocol)
https ( idem + Secured)
ftp (File Transfer Protocol)
Formats de contenus ou langages :
html (HyperText Markup Language)
css (Cascading Style Sheets)
Formats d’images graphiques:
gif (Graphic Interchange Format)
jpeg (Joint Photographic Experts Group)
png (Portable Network Graphics)
Flash (animation, propriété Macromedia)
Technologies serveurs :
Php (Hypertext Preprocessor)
Javascript ()
MySql (gestionnaire de bases de données)
Versions successives du HTML - de 1992 à 2000 : HTML 1,2,3,4 avec styles intégrés
- de 2000 à 2007 : XHTML et CSS pour séparer le contenu de la mise en forme
- depuis 2007 : HTML5 et CSS3. En pratique, peu de différence entre les versions depuis la 4 ème.
Tuto 1ère séance - p2
2 – Navigateurs :
leur rôle est d’analyser les codes HTML et CSS et d’en produire le résultat visuel. Le code est
correct s’il est lisible sans faille par tous les navigateurs, tout au moins les principaux (nécessité
de tester)
• Internet Explorer version actuelle IE9
• Mozilla Firefox
• Google Chrome
• Safari (Mac)
• Opera
3 – Editeurs: logiciels nécessaires pour créer les pages HTML et CSS : 2 catégories :
WYSIWYG ex : Nvu, Dreamweaver (Macromedia), Frontpage, Word (du meilleur au moins bon)
Ce sont des traitements de texte qui fabriquent du code automatiquement à partir de texte en
clair mais il est généralement difficile de s’y retrouver lorsqu’on veut modifier...
Editeurs de texte simples : sous Windows: Bloc-notes ou WordPad, PSPad, NotePad++ (libres)
Sous Mac : Smultron, jEdit
Nous utiliserons préférentiellement NotePad++ dont nous aurons l’occasion de noter les
avantages.
4 – Etapes de création d’un site :
1. Projet : objectif, cible, type de site, statique ou dynamique, moyens nécessaires : coût,
moyens humains pour la mise à jour et la maintenance
2. Mise en œuvre : nom de domaine, hébergeur, choix d’un CMS
3. Conception : structure des pages HTML, charte graphique, etc
4. Réalisation
5. Suivi : Recette, lancement (mise en ligne), annonce (faire connaître), référencement,
maintenance
Tuto 1ère séance - p3
2 - HTML : Les balises de base
On utilisera dans un premier temps un éditeur de texte sans mise en forme, en l’occurrence le
bloc-notes de Windows. Ensuite on introduira NotePad++
La visualisation des résultats se fera sur le navigateur habituel de chacun, soit Google Chrome en
ce qui me concerne.
Exemple 1 : syntaxe des balises en général. Paragraphes. Imbrication avec <i> ou <b>.Alinea.
Code :
Résultat dans le navigateur :
On observe l'effet des différentes balises, 1) que les balises doivent être imbriquées, 2) que les
sauts de lignes dans le code n'ont d'effet que si l'on introduit la balise autofermante (ou
orpheline) <br />pour signifier un saut de ligne. Nous verrons d'autres exemples de balises de ce
type.
Tuto 1ère séance - p4
3 – Structure de la page HTML
Exemple 2 : Le DOCTYPE, les balises obligatoires de structure de la page : balises de tête, meta,
titre et corps de la page.
Code :
Résultat :
Pas terrible ! Le charset dit universel utf-8 rend peut-être très bien les idéogrammes chinois mais
pas les lettres accentuées du français... Remplaçons dans la balise meta utf-8 par iso-8859-1,
juste pour voir le résultat. C'est quand même plus conforme à nos vieilles habitudes :
Notons que tout ce qui n'est pas entre les balises <body></body> n'apparaît pas dans la page
affichée par le navigateur, non plus que les commentaires. La syntaxe de ces derniers est :
<!--commentaire--> cela permet d'éclairer le programmeur qui reprend une page de code pour la
modifier, c'est utile mais il ne faut pas en abuser car cela alourdit le code. Voici la page de code
sans aucun commentaire :
Tuto 1ère séance - p5
4 - Autres balises de texte
Exemple 3 : Titres taille 1,2,3,4, mise en valeur, citations, exposants, indices, abréviations,
Code (extrait de page sans les balises de tête pour ne pas alourdir le tuto) :
Résultat :
Remarques importantes :
Les autres paramètres de la mise en forme seront vus à l'occasion des CSS. Il faut d'ailleurs
observer que les balises <i></i> (italique) et <b></b> (gras) sont désormais considérées
comme obsolètes depuis le développement des feuilles de style. Il en est de même pour les
polices de caractère, les couleurs de texte et tout ce qui concerne la mise en forme des contenus.
On peut néanmoins les utiliser à l'occasion car toujours prises en compte par les navigateurs.
D'autre part, l'effet des balises <em>et <strong> est ici la mise en italique et en gras mais cela
dépend du navigateur. Pour être sûr d'obtenir toujours du gras, de l'italique et du souligné il vaut
mieux employer les balises spécifiques <b>, <i> et <u>
Tuto 1ère séance - p6
Exemple 4 : les listes : 2 types de présentation
Code :
Résultat :
<ul>On trouve de tout à RIO:
<li>du Windows</li>
<li>des images</li>
<li>de la tablette</li>
<li>et même du Mac...!</li>
</ul>
<ol>On trouve de tout à RIO:
<li>du Windows</li>
<li>des images</li>
<li>de la tablette</li>
<li>et même du Mac...!</li>
</ol>
5 - Les liens
Un site web comporte généralement plusieurs pages. Le principe de l'hypertexte permet d'établir
des liens, soit vers un autre site, soit vers une autre page du même site, les pages étant situées
ou non dans le même dossier, soit vers une « ancre » créée préalablement.
1°) vers un autre site : il s'agit d'un lien absolu
Exemple 5 :
code :
<p>Venez donc visiter le <a href="http://rio.orgerus.org">site RIO</a>, vous y trouverez
<b>tout</b>!</p>
Résultat :
2°) vers une autre page du même site (lien relatif) :
Exemple 6 :
code :
<p>Par contre, si vous voulez connaître toutes les astuces de mise en forme du présent site,
rendez-vous sur la page <a href="le_style.html">css</a></p>
résultat :
Il s'agit là d'un lien relatif vers une autre page du même site qui ne fonctionne que si la page
html vers laquelle on redirige le visiteur est placée dans le même dossier que la page origine
(que ce soit en local ou sur le serveur de l'hébergeur)
Si par contre, la page de destination est située dans un autre dossier, appelons-le par exemple
tuto_css, la balise lien de l'exemple 6 devra prendre la forme suivante :
<a href="tuto_css/le_style.html">css</a> ou encore, si le dossier est situé plus haut dans
l'arborescence : <a href="../le_style.html">css</a>
Chacun pourra essayer cette configuration par soi-même.
Notons que les liens relatifs sont particulièrement utiles si l'on construit un site dont on ne
connaît pas encore l'URL qui permettrait de faire un lien absolu.
Tuto 1ère séance - p7
3°) vers une ancre
Exemple 7 : l'endroit de destination doit comporter un attribut permettant de l'identifier, que l'on
appelle l'ancre : par ex. :
<h2 id= ''images''>comment insérer des images</h2>
On peut dès lors, dans une autre page, diriger le visiteur vers cette ancre avec l'attribut suivant :
<a href= ''#images ''>voir le chapitre images pour en savoir plus</a>
4°) vers une adresse mail
Exemple8 : La forme de l'attribut est similaire à ce qui précède :
<a href=''mailto ''[email protected]''>n'hésitez pas à me contacter en cas de pb</a>
5°) pour télécharger un fichier
Exemple 9 :
<a href=''fichier1.zip''>téléchargement du fichier1</a>
77