5 Beste gratis online HTML-editors om uw code te testen

HTML runt de moderne wereld. Toegegeven, als je iemand vraagt ​​wat er nodig is om een ​​webontwikkelaar te worden, zullen ze je alles vertellen over JavaScript-webframeworks, Python-webkaders, procedures voor webprogrammering Programmering versus Webontwikkeling: wat is het verschil? Programmeren versus Webontwikkeling: wat is het verschil? Je zou kunnen denken dat applicatieprogrammeurs en webontwikkelaars hetzelfde doen, maar dat is verre van waar. Hier zijn de belangrijkste verschillen tussen programmeurs en webontwikkelaars. Meer lezen, enz. Maar onder dat alles, HTML is wat alles bij elkaar houdt.

Er is geen web zonder HTML en je moet weten hoe je het kunt bewerken als je dat wilt ieder soort webwerk. Maar het opzetten van een robuuste HTML-bewerkingsworkflow in Sublime-tekst 11 Sublime-tekst Tips voor productiviteit en een snellere workflow 11 Sublime-teksttips voor productiviteit en een snellere workflow Sublime-tekst is een veelzijdige teksteditor en een gouden standaard voor veel programmeurs. Onze tips zijn gericht op efficiënte codering, maar algemene gebruikers zullen de sneltoetsen op het toetsenbord waarderen. Lees meer of Visual Studio Code 10 Essentiële productiviteitstips voor Visual Studio Code 10 Essentiële productiviteitstips voor Visual Studio Code Visual Studio Code blaast andere tekstbewerkers voor teksteditor uit het water. Het is gratis, open source, razendsnel en boordevol productiviteitsfuncties. Meer lezen kan overkill zijn als u niet aan een volledig project werkt.

Voor momenten dat je gewoon wat wilt rondfladderen met een klein stukje HTML, zodat je het kunt aanpassen aan je wensen, online HTML-editor zal je beter van dienst zijn.

Waarom een ​​online HTML-editor gebruiken??

Het beste van online HTML-editors is dat ze rechtstreeks in uw webbrowser worden uitgevoerd. Uw webbrowser is de het beste en meest relevant hulpmiddel voor het verwerken en renderen van HTML-code. Dat is tenslotte het hele doel en de reden van bestaan.

Wat betekent dat uw webbrowser het best is uitgerust voor realtime voorbeelden van HTML. Wanneer u webmarkeringen in een zelfstandige editor zoals Kladblok of Teksteditor schrijft, moet u wijzigingen in een bestand opslaan en vervolgens het bestand in uw webbrowser laden, het vervolgens bekijken en vervolgens teruggaan naar de editor voor meer wijzigingen, spoelen en herhalen. Het is een onhandig en omslachtig proces.

Een online HTML-editor kan zichzelf dynamisch vernieuwen terwijl u schrijft en de opmaak wijzigt. Het is niet nodig om heen en weer te bladeren tussen vensters. Je knijpt de HTML aan de ene kant, de wijzigingen vinden automatisch plaats aan de andere kant.

Een paar standalone editors kunnen worden geconfigureerd met een soort van real-time preview in faux, maar ze zijn niet zo handig. De Live Preview-functie tussen haakjes kan bijvoorbeeld een afzonderlijk Chrome-venster openen en HTML-wijzigingen in de browser pushen wanneer u de markup opslaat. Maar dit vereist nog steeds het flip-floppen van vensters en het dwingt je om Chrome te gebruiken.

Online HTML-editors zijn als portable zoals ze komen. Welke computer u ook gebruikt, u kunt de webeditor openen zolang u een internetverbinding hebt. U hoeft geen zelfstandige editor te installeren en te configureren die u wel of niet opnieuw kunt gebruiken.

Hier zijn enkele van de beste online HTML-editors die momenteel beschikbaar zijn.

1. Codepen

Codepen is een “sociale ontwikkelingsomgeving” voor webontwikkelaars, wat in feite betekent dat het een online editor is met functies voor delen en samenwerken. De editor zelf is eenvoudig: een paneel voor HTML, een paneel voor CSS en een paneel voor JavaScript, plus een paneel voor realtime preview. Alle paneelformaten kunnen worden aangepast door de randen rond te slepen.

Je kunt creëren “pennen,” die als individuele speelplaatsen zijn voor het aanpassen van de webcode. Meerdere pennen kunnen worden gegroepeerd in collecties. Particuliere pennen en collecties vereisen een Pro-account, dat begint bij $ 9 per maand en wordt geleverd met andere functies: assethosting, integreerbare thema's, realtime samenwerking en toegang tot de volledige webontwikkeling IDE van CodePen.

2. JSFiddle

JSFiddle is zo ongeveer hoe het klinkt: een zandbak waar je met JavaScript kunt spelen. Maar als je ziet hoe JavaScript hand in hand gaat met HTML en CSS, kun je alle drie bewerken met de bewerkingsinterface van JSFiddle - en kun je JavaScript helemaal overslaan.

Het leuke van JSFiddle is dat je externe verzoeken in de zijbalk kunt toevoegen, waarmee je off-site JavaScript- en CSS-bestanden kunt opnemen voor het verbeteren van je HTML. Handig is ook de knop Tidy, die automatisch de inspringing van uw code opschoont, en de knop Collaborate, waarmee u in realtime met iemand anders aan dezelfde code kunt werken.

Het enige nadeel is dat u op de knop Uitvoeren moet klikken om het voorbeeldvenster bij te werken.

3. JSBin

JSBin is als een eenvoudiger en schoner alternatief voor JSFiddle. U kunt elke combinatie van HTML, CSS en JavaScript bewerken door eenvoudigweg de panelen te schakelen met de bovenste werkbalk en u kunt het voorbeeldvenster en een consolepaneel schakelen voor maximale flexibiliteit.

Maar terwijl u met JSFiddle externe CSS- en JavaScript-bronnen kunt koppelen, heeft JSBin alleen vooraf gedefinieerde JavaScript-bibliotheken die u kunt opnemen. De selectie is echter goed, variërend van jQuery tot React tot Angular en meer.

Hoewel JSBin gratis is en geen account nodig heeft, hebt u een Pro-account nodig als u privébins, aangepaste insluitingen, activahosting, Dropbox-synchronisatie en vanity-URL's wilt voor pagina's die via JSBin zijn gepubliceerd..

4. Liveweave

Liveweave is vergelijkbaar met de vorige editor hierboven, met een interface die aantrekkelijker is voor het oog (hoewel uw voorkeuren kunnen verschillen). Net als JSFiddle maakt Liveweave realtime samenwerking mogelijk, en net als JSBin kun je een koppeling maken in vooraf gedefinieerde bronnen van derden zoals jQuery.

Maar het heeft ook enkele unieke kenmerken. De Lorem Ipsum Generator maakt plaatsaanduidingstekst op uw huidige cursorpositie. De CSS Explorer biedt een WYSIWYG-tool voor het maken van CSS-stijlen. De kleurenverkenner helpt u bij het kiezen van de perfecte kleuren voor uw thema. Met de Vector-editor kunt u vectorafbeeldingen voor uw site maken.

5. HTMLhouse

HTMLhouse is een goede optie als jij enkel en alleen zorg voor HTML (d.w.z. geen CSS of JavaScript). Het is extreem schoon en minimaal, verticaal opgesplitst met bewerkingen aan de linkerkant en real-time preview aan de rechterkant. Een handige functie is de mogelijkheid om uw HTML te publiceren en deze privé te delen (met de opgegeven URL) of publiekelijk (deze wordt toegevoegd aan de Browse-pagina van HTMLhouse). Het is eenvoudig maar effectief, precies waar een online HTML-editor in het spel komt en uitblinkt.

Houd er rekening mee dat HTMLhouse is gemaakt en wordt onderhouden door de mensen van Write.as, een online schrijfhulpmiddel zonder afleiding. Als je blogposts schrijft of iets dergelijks, gebruik dan Write.as.

Verbeter uw HTML-vaardigheden nog meer

Als je enige blootstelling aan HTML is wat je tien jaar geleden hebt geleerd, dan is het tijd voor je om bij te praten. HTML5 is in 2014 uitgegeven en heeft een handvol nieuwe normen en functies geïntroduceerd. Weet je niet waar te beginnen? Bekijk deze essentiële nieuwe elementen in HTML5 What's New in HTML5? 9 elementen die u moet kennen Wat is er nieuw in HTML5? 9 Elementen die u moet weten HTML5 is de nieuwste versie van de meest gebruikte opmaaktaal op internet. Als je de nieuwste functies niet gebruikt, mis je een aantal coole functies. Lees verder .

Verder om te leren goede oefeningen in HTML5 webontwerp en -ontwikkeling, moet u deze websites bekijken met voorbeelden van kwaliteits-HTML-codering 8 Beste websites voor kwaliteit HTML-coderingsvoorbeelden 8 Beste websites voor HTML-codering van hoge kwaliteit Voorbeelden Er zijn enkele geweldige websites met goed ontworpen en bruikbare HTML-codeervoorbeelden en tutorials. Hier zijn acht van onze favorieten. Lees verder . En wanneer uw website live gaat, overweeg dan uw HTML-markup te comprimeren. Hoe gecomprimeerde HTML werkt en waarom u dit nodig hebt. Hoe gecomprimeerd HTML werkt en waarom u het misschien nodig hebt. In dit artikel bespreken we de twee belangrijkste methoden voor gecomprimeerde HTML, waarom HTML-bestanden moeten worden gekrompen en hoe u dit moet aanpakken. Meer lezen voor betere snelheid.

Wat is je favoriete manier om HTML-markeringen te bewerken? Op wat voor soort website werk je nu? Deel het met ons in de reacties hieronder!

Ontdek meer over: HTML5, WYSIWYG-editors.