Outils pour créer du HTML lors de la création de sites Web - dummies

Avant de commencer à coder HTML, considérez les options en termes d'environnement de codage. Il existe un large éventail d'outils, allant de l'éditeur de texte gratuit livré avec votre système d'exploitation (comme Windows Notepad ou TextEdit sur Mac) aux applications professionnelles (notamment Dreamweaver) qui fournissent des outils substantiels pour vous aider à écrire et à tester. code.

Editeurs de code

Il existe trois niveaux d'éditeurs de code:

• L'éditeur de texte de votre système d'exploitation: Yup, votre système d'exploitation a un éditeur de texte intégré. Nice. Voici deux grands avantages de l'utilisation de l'éditeur intégré dans votre système d'exploitation comme un éditeur de code pour HTML (et CSS):

  • Aucun coût.

  • L'application est déjà installée sur votre ordinateur. Fait et fait.

  Cette option est sans aucun doute l'option sans fioritures, dépourvue d'indices de code et de fonctionnalités de vérification disponibles dans les éditeurs de code téléchargeables gratuitement. À moins que vous ne prévoyiez de faire un minimum de codage HTML, téléchargez un éditeur de code gratuit comme Text PSPad ou Text Wrangler.

  

  Création de HTML avec TextEdit sur un Mac.

  

  Création de HTML avec le Bloc-notes sous Windows.

• Les éditeurs de code gratuits et téléchargeables: Behind Door # 2 sont des éditeurs de code libre, comme TextWrangler pour Mac ou PSPad pour Windows.

  Encore une fois, c'est gratuit. Ces (et autres) éditeurs de code libre incluent des fonctionnalités sur ce qui vient avec votre application OS:

  • Onglets qui vous permettent de travailler avec plusieurs fichiers en même temps. Cette fonctionnalité est essentielle pour travailler avec un fichier HTML et un fichier CSS lié en même temps.

  • Code de couleur qui identifie les éléments de syntaxe de codage. Vous trouverez cette fonctionnalité très utile lorsque vous avez mal saisi du code, car le contenu mal typé n'adoptera pas le code couleur attendu.

    

  • La vérification orthographique est disponible dans les éditeurs de code libre comme TextWrangler et PSPad pour aider à identifier les mots mal orthographiés à la volée.

    

  • La saisie semi-automatique est incluse dans PSPad.

  Les éditeurs de code libre comme TextWrangler (pour Mac) et PSPad (pour Windows) ne sont pas équipés de fenêtres graphiques WYSIWG qui affichent l'apparence des pages HTML dans un navigateur. Et ils ne disposent pas du type d'options de suggestion de code disponibles dans les éditeurs de code qui coûtent de l'argent.

• Éditeurs de code à bas prix: BBEdit, par exemple (vendu 50 $ à ce jour), est une version améliorée de TextWrangler. L'une des fonctionnalités les plus puissantes de BBEdit est qu'il peut compléter automatiquement le code - en anticipant et en remplissant la fin du code au fur et à mesure de la frappe. La figure suivante, par exemple, montre une série de balises HTML commençant par la lettre "h", en tapant "h."

  

Dreamweaver

L'outil le plus puissant pour travailler avec HTML est Adobe Dreamweaver. En plus des fonctionnalités des éditeurs de code professionnels avancés (comme la vérification orthographique et les indices de code), l'attraction principale de Dreamweaver est que vous n'avez pas besoin de coder à la main le code HTML. Vous pouvez, à la place, utiliser des options de menu (comme "Insérer → Image") et des panneaux (comme l'inspecteur des propriétés) pour générer du code HTML.

Beaucoup de gens savent que Dreamweaver peut créer du HTML sans codage à la main. Mais ce que beaucoup de gens ne réalisent pas, c'est que Dreamweaver fonctionne dans deux modes:

• Vue de conception: Dans cette vue, le code est généré avec le menu et les actions de la souris cachées.

• Vue du code: Cette vue fournit un environnement de codage complet avec des indicateurs de code et des tests non seulement HTML, mais d'autres langages de conception Web tels que CSS (feuilles de style), JavaScript (animation et interactivité) et PHP (pour les scripts côté serveur qui gèrent les données en ligne).

  

Comme on l'a vu, la plus grande attraction de Dreamweaver est de permettre aux concepteurs de générer du HTML (ainsi que CSS et d'autres codes) dans une fenêtre de conception qui ressemble à d'autres applications Adobe Creative Suite comme Photoshop, Illustrator ou InDesign.