Tools zum Erstellen von HTML beim Erstellen von Websites - Dummies

Bevor Sie mit dem Codieren von HTML beginnen, sollten Sie die Optionen in Bezug auf eine Codierungsumgebung betrachten. Es gibt ein breites Spektrum an Werkzeugen, angefangen vom Freitexteditor, der mit Ihrem Betriebssystem geliefert wurde (wie Windows Notepad oder TextEdit auf einem Mac) bis hin zu professionellen Anwendungen (insbesondere Dreamweaver), die umfangreiche Tools zum Schreiben und Testen bieten. Code.

Code-Editoren

Es gibt drei Ebenen von Code-Editoren:

• Texteditor Ihres Betriebssystems: Ja, in Ihrem Betriebssystem ist ein Texteditor eingebaut. Nice. Hier sind zwei große Vorteile der Verwendung des in Ihrem Betriebssystem integrierten Editors als Code-Editor für HTML (und CSS):

  • Keine Kosten.

  • Die App ist bereits auf Ihrem Computer installiert. Gemacht und gemacht.

  Diese Route ist definitiv die Option ohne Schnickschnack, da sie keine Code-Hinting- und Check-Funktionen bietet, die in frei downloadbaren Code-Editoren verfügbar sind. Wenn Sie nicht nur eine minimale HTML-Codierung durchführen möchten, laden Sie einen kostenlosen Code-Editor wie Text PSPad oder Text Wrangler herunter.

  

  HTML mit TextEdit auf einem Mac erstellen.

  

  Erstellen von HTML mit Notepad in Windows.

• Kostenlose, herunterladbare Code-Editoren: Hinter Door # 2 sind kostenlose Code-Editoren, wie TextWrangler for Macs oder PSPad for Windows.

  Auch hier ist kostenlos gut. Diese (und andere) Editoren für freien Code enthalten Funktionen, die sich auf dem Lieferumfang Ihrer Betriebssystem-App befinden:

  • Datei Registerkarten, auf denen Sie mit mehreren Dateien gleichzeitig arbeiten können. Diese Fähigkeit ist für die gleichzeitige Arbeit mit einer HTML- und einer verknüpften CSS-Datei unerlässlich.

  • Farbcodierung , die Codierungs-Syntaxelemente identifiziert. Sie werden diese Funktion sehr hilfreich finden, wenn Sie einen Code falsch eingegeben haben, weil der falsch eingegebene Inhalt nicht den erwarteten Farbcode übernommen hat.

    

  • Die Rechtschreibprüfung steht in kostenlosen Code-Editoren wie TextWrangler und PSPad zur Verfügung, um falsch geschriebene Wörter im laufenden Betrieb zu identifizieren.

    

  • Autocomplete ist in PSPad enthalten.

  Freie Code-Editoren wie TextWrangler (für Macs) und PSPad (für Windows) werden nicht mit WYSIWG-Grafikfenstern geliefert, die anzeigen, wie HTML-Seiten in einem Browser aussehen. Und es fehlt ihnen die Art von Code-Hinting-Optionen in Code-Editoren, die Geld kosten.

• Kostengünstige Code-Editoren: BBEdit zum Beispiel (zum Zeitpunkt des Schreibens für 50 US-Dollar) ist eine erweiterte Version von TextWrangler. Eine der mächtigsten Funktionen von BBEdit ist, dass es Code automatisch vervollständigen kann - indem es das Ende des Codes antizipiert und ausfüllt, während Sie schreiben. Die folgende Abbildung zeigt beispielsweise einen Bereich von HTML-Tags, der mit dem Buchstaben "h" beginnt und durch Eingabe von "h."

  

Dreamweaver

Das leistungsstärkste Werkzeug für die Arbeit mit HTML ist Adobe Dreamweaver. Zusätzlich zu den Funktionen, die in fortgeschrittenen, professionellen Code-Editoren (wie Rechtschreibprüfung und Codehinweisen) zu finden sind, besteht die Hauptattraktion von Dreamweaver darin, dass Sie HTML nicht manuell codieren müssen. Sie können stattdessen Menüoptionen (wie "Einfügen → Bild") und Bedienfelder (wie den Eigenschafteninspektor) verwenden, um HTML zu generieren.

Viele Menschen wissen, dass Dreamweaver HTML ohne Handcodierung erstellen kann. Was viele jedoch nicht wissen, ist, dass Dreamweaver in zwei Modi arbeitet:

• Entwurfsansicht: In dieser Ansicht wird Code mit verborgenen Menü- und Mausaktionen generiert.

• Codeansicht: Diese Ansicht bietet eine umfassende Codierungsumgebung mit Codehinweisen und Tests für HTML, aber auch für andere Webdesign-Sprachen wie CSS (Stylesheets), JavaScript (für Animationen und Interaktivität) und PHP. (für serverseitige Skripts, die Online-Daten verwalten).

  

Wie bereits erwähnt, ermöglicht Dreamweaver Designern die Generierung von HTML (sowie CSS und anderen Codierungen) in einem Designfenster, das wie andere Adobe Creative Suite-Anwendungen wie Photoshop, Illustrator oder InDesign aussieht und sich anfühlt.