HTML-Editor / IDE für Anfänger

Ich bin neu in der HTML-Programmierung. Im Moment verwende ich Notepad ++, um HTML-Code zu schreiben und ihn dann zu speichern. Dann öffne ich das in Firefox und sehe, was die Ausgabe ist.

Gibt es irgendeine Art von HTML-Editor oder -Compiler (Compiler ist nicht das richtige Wort, ich weiß), der:

  1. überprüft meinen HTML-Code auf Fehler
  2. Nur durch Klicken auf eine Schaltfläche "Ausführen" kann ich die Ausgabe sehen
  3. läuft auf Windows und Linux
  4. ist kostenlos und für Anfänger nicht kompliziert zu bedienen
Entspricht nicht ganz Ihren Anforderungen, aber es gibt ein Plugin für Notepad++, das eine HTML-Vorschau anbietet . Dies würde zu Ihren Artikeln 1+4 passen und Sie könnten Ihre "bekannte Umgebung" weiter verwenden.
html ist keine Programmiersprache und hat daher keinen Compiler. Stattdessen hat es Renderer, das sind Browser
Normalerweise haben Editoren keine Schaltflächen zum Ausführen, stattdessen öffnen Sie einfach Ihren Browser und geben die URL ein/klicken auf das Lesezeichen
Ich benutze Codelobster. Es ist kostenlos und hat eine großartige HTML/CSS/JS-Autovervollständigung.

Antworten (9)

Ein dedizierter Editor für Webentwickler ist Adobe Brackets , eine großartige Open-Source-Software. Hier sind einige Funktionen, die Sie in anderen Editoren nicht finden werden:

  • Live-Vorschau: Du kannst es so einrichten, dass wenn du eine Änderung im Editor vornimmst, die Änderung sofort im Browser erscheint
  • Schnellbearbeitung: Sie können auf die CSS-Stile zugreifen, die sich auf ein Element auswirken, indem Sie einfach den Cursor auf das Element bewegen und dann STRG-E drücken. Sie können es auch verwenden, um einfache Farbauswahlen zu haben, und wahrscheinlich andere Dinge, von denen ich noch nicht einmal weiß
  • Es ist in Websprachen geschrieben: Sobald Sie ein erfahrenerer Webentwickler geworden sind, können Sie Änderungen am Editor selbst vornehmen, ohne neue Sprachen zu lernen

Es hat auch viele Plugins zur Verfügung, und es ist ziemlich gut ausgefeilt und wird oft aktualisiert. Du solltest es versuchen!

Meine ultimative Lieblings-IDE = Netbeans

Benutzerdefiniertes Thema: Geben Sie hier die Bildbeschreibung ein

Grundthema: Geben Sie hier die Bildbeschreibung ein

Es ist sehr einfach, je mehr Sie es verwenden, desto mehr lernen Sie es. Klicken Sie einfach auf Öffnen und öffnen Sie Ihre HTML-Dateien oder ziehen Sie sie per Drag & Drop von Ihrem Desktop ab und schon können Sie programmieren. Oder beginnen Sie direkt mit dem Codieren und legen Sie Ihre Dateien in einem Projekt ab und lassen Sie Netbeans dies für Sie erledigen. Darüber hinaus ist der Editor anpassbar. Sie können Schriftart, Hintergrundfarben, Größe usw. ändern . Hat gute Community-Unterstützung und ist Open Source.

Überprüft meinen HTML-Code auf Fehler: - Verstanden und sehr gut gemacht + es formatiert Ihre HTML-Codes und zeigt Tags in Farben an.

Nur durch Klicken auf eine Schaltfläche "Ausführen" kann ich die Ausgabe sehen: Es hat einen eigenen integrierten Browser in einem separaten Fenster, um das Ergebnis anzuzeigen + kann mit Ihrem bevorzugten Browser verknüpft werden, z. B. Firefox, Chrome. Wenn Sie auf Ausführen klicken, wird Firefox gestartet und Ihre HTML-Seite ausgeführt.

läuft unter Windows und Linux: Aktiviert. Win + Mac + Linux.

es sollte kostenlos und für Anfänger nicht kompliziert zu bedienen sein: Yup, Free . Für Anfänge? hmmm, bedeutet kein kompliziertes Zeug, also nutzen Sie nicht die verfügbaren erweiterten Funktionen. Netbeans kann Sie vom Neuling zum Profi machen, je mehr Sie es verwenden, desto mehr werden Sie darüber lernen, was Ihnen in Zukunft viel, viel Zeit sparen kann. (Nehmen wir an, Sie möchten alle <span>auf <div>ähnlich wie Notepad ++ ändern, Sie können mit Text, Regex, Platzhalter usw. suchen und ersetzen, Sie können in Dateien/Verzeichnis/Projekt wechseln.)

IMO Der beste Weg zu lernen ist, es selbst zu codieren. IDEs, die es Ihnen ermöglichen, Ihre HTML-Seiten mit visuellen Mitteln zu erstellen, sind kein sehr guter Weg, um HTML zu beherrschen. Netbeans kann als einfacheres Notpad ++ funktionieren, ich schätze sogar kleine Dinge, wie wenn Sie CTRL+LINKS auf eine URL in einer HTML-Datei klicken und Sie zum Quellcode dieser URL-HTML-Datei gelangen.

Sie können es als einmalige Schnellbearbeitungs-IDE für eine einzelne Seite wie Notepad++ oder in einem Projekt verwenden, bei dem Sie alle Ihre Dateien unter einem Dach/Verzeichnis/Projekt/Namespace usw. zusammenstellen, wie Sie es nennen. Es ermöglicht das Öffnen mehrerer Registerkarten, desselben oder unterschiedlicher Bedienfelder/Fenster, unterschiedliche Farben für Registerkarten, je nachdem, zu welchem ​​​​Projekt sie gehören. Öffnen Sie außerdem eine Seite in einem Projekt, indem Sie einfach ihren Namen eingeben, suchen Sie nach Datei/Schlüsselwort im Projekt, navigieren Sie von Projekt zu Datei oder von der geöffneten Datei zu ihrem Basisprojekt.

Es verfügt über eine intelligente Überprüfung von HTML-Tags, Hervorhebung von Fehlern , Anzeige von Hinweisen , automatische Vervollständigung , HTML-Drag&Drop-Bedienfeld . Ich bevorzuge es zum Lernen, da es Ihre Fehler zeigt und Ihnen einen Tooltip gibt, damit Sie wissen, was Sie hinzufügen müssen. Geben Sie ein <html>und drücken Sie CTRL+ SPACEund es wird automatisch für Sie geschlossen, indem Sie hinzufügen </html>.

Sie können den Sublime Texteditor mit dem W3C Validator Plugin verwenden . Sublime ist kostenpflichtig, aber Sie können die Testversion ohne Einschränkungen nutzen. Aber ich würde Ihnen empfehlen, es zu kaufen, da es ein großartiger Editor ist, vertrauen Sie mir ...

Ich werde eine Anleitung geben, wie das funktionieren wird..

  • Öffnen Sie den Sublime Editor, installieren Sie die Paketkontrolle (falls noch nicht geschehen)
  • Installieren Sie nun das W3C Validator Plugin über die Paketsteuerung. Sie können sich auf die Bilder unten beziehen, um das Plugin zu installieren.

Schritt 1 - Klicken Sie auf Einstellungen , wählen Sie Paketsteuerung

Schritt 2

Geben Sie hier die Bildbeschreibung ein

Schritt 3: Geben Sie W3cValidators ein und installieren Sie es

Wie benutzt man das jetzt?

Schritt 1: Klicken Sie auf Tools und wählen Sie W3CValidators [1] Geben Sie hier die Bildbeschreibung ein

Schritt 2: Wählen Sie den entsprechenden DOCTYPE aus, den Sie validieren möchten. Wählen Sie jetzt HTML5 aus.

Wenn Sie jetzt Ihr Dokument validieren möchten, gehen Sie entweder zum Menü, indem Sie den obigen Schritten folgen, oder drücken Sie die Tastenkombination Win+ Ctrl+ V (wenn auf einem Witwen-Computer)

Und was Sie sehen werden, ist

Geben Sie hier die Bildbeschreibung ein

Wenn auf Fehler

Geben Sie hier die Bildbeschreibung ein

Klicken Sie auf die Option Browser öffnen , um im Browser zu öffnen

Geben Sie hier die Bildbeschreibung ein

Sie erhalten viele Plugins, um Ihr CSS automatisch zu aktualisieren und live zu bearbeiten.

Ich würde Ihnen vorschlagen, Emmet für Sublime herunterzuladen , das wird Ihre Codierungsgeschwindigkeit erhöhen.

Bildquelle: Mein eigener PC

Sie können das Tag-Paket ( sublime.wbond.net/packages/Tag ) verwenden. Es bietet Linting, Tag-Vervollständigung. Ich verwende es hauptsächlich wegen Linting, da die Tag-Vervollständigung eine integrierte Funktion in Sublime Text 3 ist.

Tweakstyle ist ein relativ neuer Eintrag im HTML-Code-Editor. Es ist derzeit in der Beta-Phase, hat aber eine gute Menge an Funktionen.

Verwendet Chrome-Webtools im Vorschaufenster, damit Sie ein Element untersuchen und Übereinstimmungsregeln bearbeiten können.

Es hat ein Vorschaufenster, das aktualisiert wird, wenn Sie Ihre HTML-Datei speichern. Es bietet Live-Updates, wenn Sie Ihr CSS ändern.

Wenn Sie eine HTML-Datei öffnen, versucht sie automatisch, alle damit verknüpften Dateien zu öffnen (CSS, Javascript, LESS, SASS). Sie können mehrere Dateien gleichzeitig anzeigen, sodass Sie weniger Zeit damit verbringen, von Registerkarte zu Registerkarte zu klicken.TweakStyle-Screenshot

Es weist auf Fehler hin, indem es ein rotes x neben der Zeile mit dem Fehler und einen Tooltip platziert, der erklärt, warum ein Fehler vorliegt.

Es läuft auf Windows, Mac und es läuft auf verschiedenen Linux-Distributionen (hat eine .deb-Datei oder eine gezippte Datei).

Die einzige Anforderung, die dies nicht erfüllt, ist der Preis. Es ist wie Sublime, da es einen Preis hat, aber das einzige, womit Sie sich abfinden müssen, ist ein gelegentliches Nörgelfenster. Es scheint einmal am Tag zu erscheinen.

Ich habe hier bereits geantwortet und Atom vorgeschlagen, jedenfalls wenn Sie ein Anfänger sind (und selbst wenn Sie es nicht sind), mögen Sie vielleicht auch einen Wysiwyg- Editor. Das Akronym „wysiwyg“ steht für „what you see is what you get“, im Allgemeinen lässt Sie ein Wysiwig-Editor das Endergebnis seit der Dokumenterstellung sehr ähnlich anzeigen und impliziert die Möglichkeit, das Layout und den Inhalt von Dokumenten direkt zu manipulieren, ohne Namen von Layoutbefehlen eingeben oder sich merken müssen, bedeutet dies, dass ein wysiwig-HTML-Editor eine einfache Möglichkeit bietet, Webseiten ohne die erforderlichen Kenntnisse von HTML, CSS oder Javascript zu erstellen (aber ich rate Ihnen, sie zu studieren, um eine klarere Vorstellung von diesem Thema zu bekommen der Erstellung von Webdokumenten).

In diesem Fall empfehle ich BlueGriffon

Geben Sie hier die Bildbeschreibung ein

BlueGriffon ist ein Wysiwig-Webeditor, der auf der Rendering-Engine von Firefox basiert, für Windows, Linux und OS X verfügbar ist und bereits in der kostenlosen Version mit unzähligen leistungsstarken Funktionen gefüllt ist (und Sie können sogar noch mehr bekommen, wenn Sie eine Lizenz kaufen).

Nebenerwähnung:

Der Vollständigkeit halber möchte ich hier auch KompoZer erwähnen .

Geben Sie hier die Bildbeschreibung ein

Genau wie BlueGriffon ist KompoZer ein wysiwyg-HTML-Editor (beide stammen von NVU ), er ist für Windows, Linux und OS X verfügbar, ABER die neueste stabile Version (0.7.10) stammt vom 30.08.2007 und die neueste Entwicklungsversion (0.8b3 ) 2010-02-28 ... es ist praktisch eingestellt.

Ich würde Geany als Alternative für Linux vorschlagen . Es hat die folgenden Funktionen:

  • Codehervorhebung (obwohl es ihn nicht validiert).
  • Es ist schnell und leicht.
  • Es ist benutzerfreundlich.
  • Es hat eine runSchaltfläche, um Ihren Code in einem Browser zu testen.
  • Dafür stehen viele Plugins zur Verfügung, es gibt sogar ein Plugin für die Split-Screen-Vorschau und zum Einfügen spezieller HTML-Zeichencodes, zB &nbsp; &gt; &lt;.
  • Läuft sowohl auf Windowsals auch auf Linux.
  • Es verfügt über HTML-Vorlagen mit ordnungsgemäßer GNU/GPL-Lizenzierung und eine grundlegende HTML-Dokumentstruktur.
  • Es ist 100% kostenlos und Open Source.

Es ist kein professionelles Tool auf Produktionsniveau, aber es ist großartig für Anfänger. Vielleicht möchten Sie es versuchen.

Da es bisher niemand vorgeschlagen hat, werde ich Ihnen Atom vorstellen

Geben Sie hier die Bildbeschreibung ein

Atom ist ein Texteditor, der modern, zugänglich und dennoch bis ins Mark hackbar ist – ein Tool, das Sie anpassen können, um alles zu tun, aber auch produktiv zu verwenden, ohne jemals eine Konfigurationsdatei zu berühren.

Atom ist Open Source, plattformübergreifend (OS X, Windows und Linux) und bietet intelligente Autovervollständigung. Auch ein w3c-Validierungspaket ist verfügbar.

Nur eine letzte Anmerkung: Da Sie einen kostenlosen Editor benötigen, um mit Windows oder Linux zu arbeiten, ist Coda hier automatisch aus den Spielen entfernt ... richtig?

HTML Editor ist ein Online-HTML-Editor mit einem minimalistischen Ansatz. Bearbeiten Sie Ihren HTML-, CSS- und JavaScript-Code und überwachen Sie die sofortige Live-Vorschau. Dieser Echtzeit-HTML-Editor ist perfekt für Anfänger, obwohl er Ihre erste Anforderung nicht erfüllt.

Sie können http://jsfiddle.net/ verwenden – es entspricht vollständig Ihren Anforderungen.

Kostenlos, HTML-Formatierer, WYSIWYG (What You See Is What You Get).

Und Sie können es mit jedem teilen. Es ist ein HTML- und Javascript-Playground.

Geben Sie hier die Bildbeschreibung ein

Abgesehen von den offensichtlichen Rechtschreibfehlern (die ich in einer späteren Bearbeitung beheben werde), scheint dies ein Online-Tool (dh keine lokale Operation! dies kann wichtig sein, z. B. für Datenschutz oder NDA) für die Javascript-Bearbeitung zu sein. Ich habe es für HTML versucht, und es hat den Code nicht validiert. Außerdem ist es für Anfänger kaum geeignet.
HTML-Editor / IDE für Anfänger
AntwortenHierDatenschutz-Bestimmungen1y, 0v