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 3 ème 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: Technologies serveurs : gif (Graphic Interchange Format) jpeg (Joint Photographic Experts Group) png (Portable Network Graphics) Flash (animation, propriété Macromedia) 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 ''dupuichg@club-internet.fr''>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