Vraag:
HTML editor / IDE for beginners
user3717225
2014-06-08 08:55:31 UTC
view on stackexchange narkive permalink

Ik ben nieuw in HTML-programmeren. Op dit moment gebruik ik Notepad ++ om HTML-code te schrijven en deze vervolgens op te slaan. Dan open ik dat in Firefox en zie het wat de output is.

Is er een soort HTML-editor of -compiler (compiler is niet het juiste woord, ik weet het) die:

  1. controleert mijn HTML-code op fouten
  2. door gewoon op een "run" -knop te klikken, kan ik zien dat de uitvoer
  3. draait op Windows en Linux
  4. is gratis en niet ingewikkeld te gebruiken voor beginners
Voldoet niet helemaal aan uw eisen, maar er is een [plugin voor Notepad ++ met HTML-preview] (http://chiselapp.com/user/vor0nwe/repository/npp_preview/home). Dit zou passen bij uw items 1 + 4, en u kunt uw "bekende omgeving" blijven gebruiken.
html is geen programmeertaal en heeft daarom geen compiler. In plaats daarvan heeft het renderers, dat zijn browsers
meestal hebben editors geen run-knoppen, in plaats daarvan open je gewoon je browser en typ je de URL in / klik je op de bladwijzer
Ik gebruik ** Codelobster ** Het is gratis en het heeft een geweldige HTML / CSS / JS autocomplete.
Negen antwoorden:
markasoftware
2014-06-09 08:06:52 UTC
view on stackexchange narkive permalink

Een speciale editor voor webontwikkelaars is Adobe Brackets, een geweldig stuk open-source software. Hier zijn enkele functies die u niet zult vinden in andere editors:

  • Live preview: u kunt het zo instellen dat wanneer u een wijziging aanbrengt in de editor, de wijziging onmiddellijk in de browser
  • Snel bewerken: je hebt toegang tot de CSS-stijlen die van invloed zijn op een element door simpelweg de cursor op het element te plaatsen en vervolgens op CTRL-E te drukken. Je kunt het ook gebruiken voor gemakkelijke kleurselectoren, en waarschijnlijk andere dingen die ik nog niet eens weet
  • Het is geschreven in webtalen: zodra je een meer ervaren webontwikkelaar bent, kun je bewerk de editor zelf zonder nieuwe talen te leren

Er zijn ook veel plug-ins beschikbaar, en het is behoorlijk goed gepolijst en vaak bijgewerkt. Je moet het proberen!

Mohammed Joraid
2014-06-10 21:37:21 UTC
view on stackexchange narkive permalink

Mijn ultieme favoriete IDE = Netbeans

Aangepast thema: enter image description here

Basisthema: enter image description here

Het is heel duidelijk, hoe meer je het gebruikt, hoe meer je het leert. Druk gewoon op openen en open je html-bestanden, of sleep ze van je bureaublad naar & en je bent klaar om te coderen. Of begin met coderen en plaats uw bestanden in een project en laat Netbeans het voor u afhandelen. Bovendien is de editor aanpasbaar. U kunt het lettertype, de achtergrondkleuren, de grootte enz. Wijzigen. . Kreeg goede gemeenschapsondersteuning en is Open Source.

controleert mijn HTML-code op fouten: - Begrepen en zeer goed gedaan + het formatteert uw HTML-codes en toont tags in kleuren.

door gewoon op een "run" -knop te klikken, kan ik de uitvoer zien: het heeft zijn eigen geïntegreerde browser in een apart paneel om het resultaat weer te geven + kan worden gekoppeld aan uw favoriete browser, bijv. Firefox, Chrome. Als u op uitvoeren klikt, wordt Firefox geactiveerd en wordt uw html-pagina weergegeven.

draait op Windows en Linux: aangevinkt. Win + Mac + Linux.

het moet gratis en niet ingewikkeld te gebruiken zijn voor beginners: Yup, gratis . Voor het begin? hmmm, betekent geen ingewikkelde dingen, dus maak geen gebruik van de geavanceerde functies die beschikbaar zijn. Netbeans kan je van beginner tot professional brengen, hoe meer je het gebruikt, hoe meer je erover leert, wat je in de toekomst heel veel tijd kan besparen. (Stel dat u alle <span> wilt wijzigen in <div> vergelijkbaar met notepad ++, u kunt &vervanging vinden met behulp van tekst, regex, wildcard enz., U kunt wijzigen in bestanden / directory / project )

IMO De beste manier om te leren is door het zelf te coderen. IDE's waarmee u visuele middelen kunt gebruiken om uw HTML-pagina's te bouwen, zijn niet erg goede manier om HTML onder de knie te krijgen. Netbeans kan werken als een eenvoudiger notpad ++, ik waardeer zelfs kleine dingen, zoals als je CTRL + LINKSKLIKT op een url in één html-bestand en het zal je naar die broncode van dat url html-bestand brengen.

Je kunt het gebruiken als een eenmalige snelle bewerk-IDE voor een enkele pagina zoals notepad ++ of in een project gebaseerd waar je al je bestanden samenstelt onder één dak / directory / project / naamruimte etc. terwijl je belt het. Hiermee kunt u meerdere tabbladen openen, hetzelfde of verschillende paneel / vensters, verschillende kleuren voor tabbladen op basis van het project waartoe ze behoren. Open bovendien een pagina in een project door gewoon de naam te typen, zoek naar bestand / trefwoord in het project, navigeer van project naar bestand of van het geopende bestand naar het basisproject.

Het heeft een slimme html-tagcontrole, markeer fouten , toon hints , automatisch aanvullen , HTML drag&drop paneel . Ik geef er de voorkeur aan om te leren, omdat het je fouten laat zien en je tooltip geeft om te weten wat je toevoegt. Typ <html> en druk op CTRL + RUIMTE en het zal het automatisch voor u sluiten door < / html> toe te voegen.

Mr. Alien
2014-06-08 09:38:50 UTC
view on stackexchange narkive permalink

U kunt de Sublime-teksteditor gebruiken met de W3C Validator-plug-in. Subliem is betaald, maar u kunt de proefversie onbeperkt gebruiken. Maar ik zou je aanraden om het te kopen omdat het een geweldige editor is, geloof me ...

Ik zal je laten zien hoe dit werkt.

  • Openen Sublime Editor, installeer Package Control (als je dat nog niet hebt gedaan)
  • Installeer nu de W3C Validator Plugin met behulp van de package control. U kunt de onderstaande afbeeldingen raadplegen om de plug-in te installeren.

Stap 1 - Klik op Voorkeuren , selecteer Pakketbeheer

Stap 2

enter image description here

Stap 3: typ W3cValidators in en installeer

Hoe gebruik je dit nu?

Stap 1: klik op Tools en selecteer W3CValidators [1 ] enter image description here

Stap 2: Selecteer de juiste DOCTYPE die u wilt valideren, laten we nu HTML5 selecteren.

Wanneer u nu uw document wilt valideren, gaat u naar het menu door de bovenstaande stappen te volgen of druk op de sneltoets Win + Ctrl + V (indien op weduwenmachine)

En wat je zult zien is

enter image description here

Als er een fout optreedt

enter image description here

Klik op de optie Browser openen om in browser te openen

enter image description here

U krijgt veel plug-ins om uw CSS en om live te bewerken.

Ik raad je aan om Emmet te downloaden voor subliem, dat zal je een boost geven r coderingssnelheid.

Afbeeldingenbron: mijn eigen pc

U kunt het Tag-pakket gebruiken (https://sublime.wbond.net/packages/Tag). Het zorgt voor pluisvorming, tag-voltooiing. Ik gebruik het voornamelijk vanwege pluisvorming, omdat het voltooien van tags een ingebouwde functie is in Sublime Text 3.
314159265359
2016-04-20 02:47:52 UTC
view on stackexchange narkive permalink

Tweakstyle is een relatief nieuw item in de HTML-code-editor. Het is momenteel in bèta, maar heeft een groot aantal functies.

Gebruikt Chrome-webtools in het voorbeeldvenster zodat u een element kunt inspecteren en overeenkomende regels kunt bewerken.

Het heeft een voorbeeldvenster dat wordt bijgewerkt wanneer u uw HTML-bestand opslaat. Het biedt live updates wanneer u uw CSS wijzigt.

Wanneer u een HTML-bestand opent, probeert het automatisch bestanden te openen die eraan zijn gekoppeld (CSS, Javascript, LESS, SASS). U kunt meerdere bestanden tegelijk zichtbaar maken, zodat u minder tijd kwijt bent aan het klikken van tabblad naar tabblad. TweakStyle screenshot

Het wijst op fouten door een rode x naast de regel te plaatsen met de fout en een tooltip waarin wordt uitgelegd waarom er een fout is.

Het draait op Windows, Mac en het draait op verschillende distributies van Linux (heeft .deb-bestand of een gezipt bestand).

De enige vereiste waaraan dit niet voldoet, is de prijs. Het is net als subliem omdat het een prijs heeft, maar het enige waar je mee te maken hebt, is af en toe een zeurvenster. Het lijkt een keer per dag te verschijnen.

danicotra
2016-11-13 02:15:53 UTC
view on stackexchange narkive permalink

Ik heb hier al geantwoord met een suggestie voor Atom, maar als je een beginner bent (en zelfs als je dat niet bent), vind je misschien ook een wysiwyg editor leuk. De afkorting "wysiwyg" staat voor "what you see is what you get", in het algemeen laat een wysiwig-editor je iets zien dat erg lijkt op het eindresultaat sinds het maken van het document en impliceert de mogelijkheid om de lay-out en inhoud van documenten direct te manipuleren zonder de namen van lay-outopdrachten moeten typen of onthouden, betekent dit dat een wysiwig HTML-editor een eenvoudige manier biedt om webpagina's te maken zonder de vereiste kennis van HTML, CSS of Javascript (maar ik raad u aan om ze te bestuderen zodat u duidelijkere ideeën hebt over het onderwerp webdocumenten maken).

In dit geval wil ik BlueGriffon

enter image description here

BlueGriffon is een wysiwig-webeditor op basis van de rendering-engine van Firefox, het is beschikbaar voor Windows, Linux en OS X en zit al vol met tal van krachtige functies in de gratis versie (en je kunt zelfs meer krijgen als je een licentie koopt) .

Nevenvermelding:

Voor de volledigheid wil ik hier ook KompoZer vermelden.

enter image description here

Net als BlueGriffon is KompoZer een wysiwyg HTML-editor (ze zijn beide afkomstig van NVU) en is beschikbaar voor Windows, Linux en OS X MAAR de laatste stabiele versie (0.7.10) dateert van 30-08-2007 en de nieuwste ontwikkelingsversie (0.8b3) 2010-02-28 ... het is praktisch stopgezet.

arielnmz
2014-06-12 00:55:36 UTC
view on stackexchange narkive permalink

Ik zou Geany willen voorstellen als alternatief voor Linux. Het heeft de volgende kenmerken:

  • Code markeren (hoewel het het niet valideert).
  • Het is snel en lichtgewicht.
  • Het is gebruiksvriendelijk .
  • Het heeft een run -knop om je code in een browser te testen.
  • Er zijn veel plug-ins voor beschikbaar, er is zelfs een plug-in voor split schermvoorbeeld en voor het invoegen van speciale HTML-tekencodes, bijv &nbsp; &gt; &lt;.
  • Draait op zowel Windows als Linux .
  • Het heeft HTML-sjablonen met de juiste GNU / GPL-licenties en een eenvoudige HTML-documentstructuur.
  • Het is 100% gratis en open-source.

Het is geen een professionele tool op productieniveau, maar het is geweldig voor beginners. Misschien wilt u het proberen.

danicotra
2016-11-13 01:24:03 UTC
view on stackexchange narkive permalink

Aangezien niemand het tot nu toe heeft voorgesteld, ga ik je Atom

enter image description here

Atom is een teksteditor die modern, benaderbaar en toch tot in de kern hackbaar is - een tool die je kunt aanpassen om alles te doen, maar ook productief kunt gebruiken zonder ooit een configuratiebestand aan te raken.

Atom is open source, cross-platform (OS X, Windows en Linux) en biedt slimme automatische aanvulling. Er is ook een w3c-validatiepakket beschikbaar.

Nog een laatste opmerking: aangezien je een gratis editor nodig hebt om met Windows of Linux te werken, Coda is hier automatisch uit de spellen ... toch?

Mori
2018-05-08 10:09:32 UTC
view on stackexchange narkive permalink

HTML-editor is een online HTML-editor met een minimalistische benadering. Bewerk uw HTML-, CSS- en JavaScript-code en volg de directe live preview. Deze real-time HTML-editor is perfect voor beginners, hoewel hij niet voldoet aan uw eerste vereiste.

Jack
2014-06-08 20:01:59 UTC
view on stackexchange narkive permalink

U kunt http://jsfiddle.net/ gebruiken - het komt volledig overeen met uw vereisten.

Gratis HTML-formatter, WYSIWYG (What You See Is What You Get) .

En je kunt het met iedereen delen. Het is een HTML- en Javascript-speelplaats.

enter image description here

Naast de voor de hand liggende spelfouten (die ik in een volgende bewerking zal oplossen), lijkt dit een online tool te zijn (d.w.z. geen lokale bewerking! Dit kan belangrijk zijn, bijvoorbeeld voor privacy of NDA) voor Javascript-bewerking. Ik heb het geprobeerd voor HTML, maar het valideerde de code niet. Het is ook nauwelijks geschikt voor beginners.


ⓘ
Deze Q&A is automatisch vertaald vanuit de Engelse taal.De originele inhoud is beschikbaar op stackexchange, waarvoor we bedanken voor de cc by-sa 3.0-licentie waaronder het wordt gedistribueerd.
Loading...