Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Introduction au HTML

RDFFav

Formation - 1. Les outils de conception

Rien de plus simple que de créer une page Web. Les outils se résument à un éditeur de texte et un logiciel FTP pour transférer vos fichiers sur un serveur Web.FTP, WYSIWYG, éditeur, Bloc-Notes, Kompozer, Filezilla

Cette formation est inutile si vous utiliser un site hébergé par WordPress, Neural ou autre gestionnaire (CMS) de site Web en ligne.
Formation - Introduction

Rien de plus simple que de créer une page Web. À part un navigateur, les outils se résument à un éditeur de texte et un logiciel FTP pour transférer vos fichiers sur un serveur Web. Et idéalement un logiciel d’infographie ou de retouche d’image. Ajouter à cela un tas d’outils en ligne, du valideurs aux outils pour générer des codes HTML complets avec JavaScript, CSS et même des librairies absolument gratuites, que nous verrons plus tard. En d’autres mots, vous pouvez créer une page Web en une seule journée sans aucune connaissance particulière, et ce tout à fait gratuitement. Tout comme on peut créer un site Web professionnel complet, de grande qualité, dynamique, avec langage serveur, sans aucun investissement autre que l’hébergement.

L’éditeur de texte

Une page Web est en fait un simple fichier texte, comme tout programme informatique ...avant d’être compilé! Mais la page HTML, contrairement au Java, au Flash, ou même à certains langages serveur, n’a même pas besoin d’être compilée. Le navigateur l’ouvrira et l’interprètera comme un simple fichier texte (text/html). Il suffit donc d’un simple Bloc-Notes, un NotePad (TextEdit sous Mac) pour créer un site Web. J’utilise personnellement UltraEdit, le meilleur éditeur pour programmeur qui combine d’ailleurs un logiciel FTP. Il n’est pas gratuit, mais tout de même des plus accessible!

Les WYSIWYG

NOTE : Il existe bien entendu des applications spécialisées, comme le WYSIWYG (What you see it’s what you get) c’est à dire avoir le même résultat que celui que vous voyez dans l’éditeur! Le WYSIWYG vous permet de créer des pages Web sans connaitre une seule ligne de code. Bien entendu, vous n’aurez pas besoin de formations des Trucsweb dans ce cas. Par exemple le vieux NVU de Gozilla (discontinué) remplacé par Kompozer. Un autre éditeur « code ouvert » Amaya, développé par la W3C. Et en français IZISpot, maintenant gratuit.

Le logiciel FTP

FTP pour « File Transfer Protocol », c’est à dire un logiciel pour transférer vos fichiers Web (page Web, images, vidéo et autres documents) sur un serveur Web. Pourquoi? Parce que bien que vous pouvez consulter vos pages locales directement dans un navigateur, vous voulez probablement qu’elles soient aussi consultées par les internautes! Pour ce faire, vous devez déposer vos pages sur un serveur Web. Un serveur Web est un simple ordinateur branché sur une dorsale (backbone) permettant ainsi d’être consulté par toute personne branchée sur Internet. Nous verrons plus tard comment obtenir un hébergement Web.

Alors là, une seule solution : Filezilla! Un logiciel « code ouvert » tout à fait gratuit créé par les feux créateurs du Web de Netscape à Mozilla, ancêtre du navigateur Firefox.

Logiciel d’Infographie

Ce n’est pas obligatoire, des centaines d’images prêtes pour le Web son disponible en ligne, souvent gratuitement. Par exemple des banques d’images libres de droits comme Pixabay, Stockvault, Everystockphoto, Stock.xng. Il suffit de les récupérer pour les utiliser dans une page Web. Il existe aussi des services gratuits pour manipuler des images. Jimpl Software, EasyPict (en français), Converthub.

Côté logiciel spécialisé, il y a le très dispendieux Adobe Photoshop CC. Ou l’équivalent en « code ouvert » et gratuit Gimp et son petit frère Gimphoto.

Les valideurs

Les navigateurs offrent aujourd’hui une panoplie d’outils pour le webmestre. Il ne faut pas se demander pourquoi ils sont si lourds! Tant Internet Explorer, Google Chrome, Opera que Firefox. De la conception d’une page Web au débogage en passant par une analyse de plus en plus sophistiquée. Les outils Google sont aussi une mine d’or pour le webmestre, une obligation malgré son caractère paternaliste pour quiconque désire peaufiner la propulsion d’une page Web. Le test de vitesse de chargement de la page pour mobile (PageSpeed Insights), le test de compatibilité mobile et bien sûr son valideur de microdonnées.

Il existe des centaines de valideurs sur le Web pour vérifier l’intégrité de vos pages Web. Le W3C, le World Wide Web Consortium chargé de promouvoir la compatibilité des technologies du Web depuis 1994, a plusieurs services valideurs. Comme l’indispensable teste de la validité du code HTML5.

Conclusion de la formation
  1. Utilisez un simple éditeur de texte comme Bloc-Notes, NotePad (TextEdit sous Mac);
  2. Téléchargez un logiciel FTP comme Filezilla;
  3. Utilisez les services en ligne pour construire et apprendre et valider votre code.


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bonjour, Je suis tombé par hazard sur vos pages et je m'y suis attardé ! (merci Google !) Vivement la suite ! Amateur en programmation web je suis à la recherche d'un cours le plus complet possible sur la conception d'un site internet (HTML, CSS, PHP, Mysql et JavaScript). J'ai testé de nombreux CMS (SPIP, Joomla, wordpress... mais aucun ne me convient vraiment ! Je n'ai pas non plus d'idée sur un thème pour mon site, mais je suis curieux de savoir comment tout cela fonctionne et pourquoi pas pour trouver l'inspiration ! je ne suis pas pressé et je prendrais tout le temps qu'il faudra pour aborder ces sujets. Ha oui, un détail, j'ai 59 ans et je suis très curieux du monde qui m'entoure et des technologie qui s'y développent. j'ai connu l'internet en 256 Ko de débit ! Alors... Il y a bien sûr de très nombreux sites qui proposent de très nombreuses formations sur ces sujets ! Mais toutes (ou presque) sont payantes, souvent incomplètes ou s'adressent à des personnes averties (formation en 20, 30 ou 40 heures (Comment peut-on calculer ce genre de chose ?)). Ce n'est pas sérieux ! Merci.
    64x64
    biboupat

    Date (GMT) : 2017-07-28 9:55:31 (UTC +0000)
    • Salut, Oui, on vit dans un monde presser, il faut se surpasser, performer comme disent les Anglais. Que le "meilleur" gagne, au diable les perdant! Pendant qu'on veut nous faire croire que l'important c'est de participer... Et pourtant, tout plante! Particulièrement en informatique, on coupe les coins ronds. Parce que le summum de la performance, c'est d'amasser le plus d'argent possible! Je suis aussi de ceux qui pensent qu'on doit prendre le temps, même tout jeune, pierre après pierre. Comme disaient les Romains, « Hâtez-vous lentement et, sans perdre courage, vingt fois sur le métier remettez votre ouvrage. »! L'important c'est la pierre et l'édifice sera inévitablement à la hauteur! En informatique on dit, « ne fait pas ce que tu penses avoir besoin, seulement ce que tu as vraiment besoin ». Même s'il faut tout prévoir, on développe malheureusement des systèmes avec une ergonomie beaucoup trop complexe pour rien. Notamment les CMS, conçus autant pour le spécialiste que pour l'amateur. Résultat, l'amateur se retrouve souvent dans un imbroglio inutile alors que le rare spécialiste n'utilise qu'un faible pourcentage des possibilités du CMS. On s'en fout, la mémoire et la vitesse des ordinateurs moderne supportent tout ce gaspillage sans aucun problème. Le résultat est que ces nombreuses possibilités sont en permanence dans nos pattes, comme si le légionnaire avait à trainer le sénat sur son dos, au cas! Merci, ça va me motiver!
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2017-07-28 11:41:9 (UTC +0000)


    • Hé oui !! Comme le disaient les anciens ! lol
      64x64
      biboupat

      Date (GMT) : 2017-07-28 15:37:17 (UTC +0000)

      10/10 sur 1 revues.
             Visites : 1322 - Pages vues : 1366
      X

      Trucsweb.com Connexion

      X

      Trucsweb.com Mot de passe perdu

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte