Trucsweb.com

Trucsweb.com

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, FilezillaFormation - 1. Les outils de conception

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.

Table des matières
Introduction
Formation suivante
2. Les fichiers et l’encodage

Références
, Analyste programmeurConception oznogco multimédia (https://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
      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)

      Ajouter un commentaire
      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
      Votre évaluation du tutoriel

      10/10 sur 1 revues.
             Visites : 7668 - Pages vues : 7749

      En ligne depuis 27 ans (1997-2024)

      Le plus vieux site francophone pour freelances!

      Il y a 10 types de personnes, ceux qui comprennent le binaire et ceux qui ne le comprennent pas ;-)

      RSS

      Aider les Trucsweb

      PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !
      aiement en ligne sécurisée PayPal Vérifié par PayPal

      Introduction au HTML - Trucsweb

      [Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo]
      Bâtir un site - L’infographie étape par étape.
      Structure HTML - Votre premier document HTML
      Logiciels et Wysiwyg - Pour construire vos documents HTML
      Introduction au HTML - Le language dérivé du SGML
      Étape 2 - Création d’un bouton à deux états
      Étape 1 - Fond d’écran sans tuile pour table.
      Étiquettes
      FTPWYSIWYGéditeurBloc-NotesKompozerFilezilla
      outils
      1. Generateur Trucsweb
      2. Glossaire
      3. jQuery : Équivalent Javascript
      4. HTML5 : Liste des balises
      5. HTML5 : Formation pour débutant
      6. AbuseIPDB AbuseIPDB
      7. Phishing-initiative Initiative hameçonnage (Phishing initiative)
      Références
      1. W3C HTML5
      2. W3C HTML 4.0
      3. W3C CSS Level 3
      4. W3C CSS LEVEL 2.1
      5. W3C XHTML 1.0
      6. W3C SMIL 2.0
      7. W3C XML 1.0
      8. W3C The Extensible Stylesheet Language Family (XSL)
      9. W3C XPath 3.0
      10. W3C XSL Version 1.1
      11. W4C XSLT 2.0
      12. RFC Editor Site
      13. Web Design Group
      14. Treehouse: Development Courses
      15. W3Schools
      16. W3CTutorial
      17. XML Cover Pages
      18. The W3C Markup Validation Service
      19. Validateur de syntaxe Javascript Esprima
      20. Validateur JavaScript Lint
      21. Le meilleurs Validateur JavaScript Code Beautify
      22. Real Favicon checker
      23. Local Business Schema Generator
      24. Générateur de microdonnées
      25. Testing Tool — Google Developers
      26. Google - Outil de test du balisage d'e-mails
      27. Google - Search Console (webmasters/tools)
      28. PageSpeed Insights
      29. RDFa Distiller and Parser
      30. RDF extracteur (pyRDFa)
      31. Soumettre votre URL à Google
      32. Soumettre votre URL à Bing
      33. Soumettre votre URL à Yahoo
      34. FXSL - Functional Programming Library for XSLT
      35. Wikipedia - Internet media type
      1. Mozilla Developer Network JavaScript reference
      2. VBScript Quick Reference
      3. ASP.NET Reference
      4. JCSS & Javascript Character Entity Calculator
      5. JScript Reference
      6. Hammer.min.js
      7. ASP Object Quick Ref.
      8. ADO API Reference
      9. IIS Configuration Reference
      10. MSDN Library
      11. Bootstrap
      12. Bootsnipp
      13. Bootstrap Cheat Sheets
      14. Iconic
      15. Zurb Foundation 5
      16. Skeleton
      17. Responsive CSS Framework Comparison
      18. HTML5 Boilerplate
      19. Modernizr
      20. Normalize.css
      21. Eric Meyer's CSS reset
      22. Bootstrap (français)
      23. Jasny Bootstrap
      24. jQuery
      25. DataTables | Table plug-in for jQuery
      1. HTML 4.0 code de caractères
      2. Unicode fonts
      3. Manuel PHP
      4. Documentation Perl
      5. ActionScript® 3.0 Reference
      6. MySQL Reference Manuals
      7. Find My Facebook Page ID
      8. Get a User's Twitter ID
      9. Share Link Generator!
      10. Validation de courriel
      11. G Suite Toolbox Check MX
      12. G Suite Toolbox Messageheader
      13. SPF Syntax Validator
      14. SPF Record Testing Tools
      15. La Loi canadienne anti-pourriel
      16. DNS / nameserver (requête en ligne)
      17. Whatsmydns.net (Propagation DNS globale)
      18. MXtoolbox.com
      19. DNSstuff.com
      20. SHAAAAAAAAAAAAA - Détection de certificat SHA-1
      21. Décoder Hachage MD5, SHA-1, LM, NTML
      22. Get Lat Long from Address
      23. Java Language Spec.
      24. Sun Java
      25. JSP Standard Tag Library
      26. C++ Language Reference
      27. C# Reference
      28. Les Navigateurs
      29. Terminologie d'Internet
      30. IP Location tools
      31. Open Port Check Tool
      32. Webfont generator
      33. HSL picker
      34. Zone Accro
      35. Dictionnaire de la langue française de l'internaute.com
      36. Glossaire informatique anglais/français
      37. Correcteur d'orthographe et grammaire Reverso
      38. Google Traduction
      39. JavaScript: Escaping Special Characters
      40. Online JavaScript/CSS Compression Using YUI Compressor
      41. Minify your CSS
      42. JS & CSS Minifier
      43. CSS Inliner Tool
      44. Base64 encoder and decoder
      45. Hachage MD5, SHA-1, LM, NTML
      46. Javascript HTML Page Encoder
      47. Winmail.dat Reader
      Oznog

      Blogueur, analyste-programmeur et designer Web!
      Conception Oznogco Multimédia
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      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

      Créer un compte

      .
      @