Home-theater-designers
Elke website die u gebruikt, is afhankelijk van HTML. Terwijl webontwikkelaars vaardigheden nodig hebben in JavaScript, Python, CSS en server-side scripting, houdt HTML het allemaal bij elkaar.
Zonder HTML is er geen web, dus u moet weten hoe u het kunt maken en bewerken. In plaats van een testsysteem voor HTML-code op uw computer op te zetten, is het eenvoudiger om code in een browser te testen.
Of het nu gaat om kleine HTML-fragmenten of volledige websiteprojecten, een online HTML-editor is ideaal.
Waarom u een online HTML-editor zou moeten gebruiken
Het gebruik van een browsergebaseerde HTML-editor is om de volgende redenen logisch boven iets als Notepad++:
- Online HTML-editors worden rechtstreeks in uw webbrowser uitgevoerd
- Test uw HTML-code online --- kijk of de code werkt zoals verwacht
- Bekijk realtime webpreviews --- de preview-updates terwijl je aan het bewerken bent
- Stroomlijn uw workflow --- niet meer opslaan, laden in de browser, terugschakelen naar de editor en herhalen
- Platformonafhankelijk --- ze werken op elk apparaat met een internetverbinding.
Dit laatste punt is erg belangrijk. Het betekent dat je een webpagina waarschijnlijk net zo gemakkelijk op een pc kunt ontwikkelen als op een Chromebook. U kunt zelfs een Android-tablet gebruiken of een computer van $ 50 zoals de Raspberry Pi.
HTML-codering is een toegankelijke, ongecompliceerde toegangspoort tot het begrijpen van programmeren en ontwikkelen. Je moet constant je HTML-code testen --- wat is er beter dan live resultaten in je browservenster?
Laten we eens kijken naar enkele van de beste online HTML-editors die momenteel beschikbaar zijn.
1. CodePen
CodePen is een 'sociale ontwikkelomgeving' voor webontwikkelaars, wat in feite betekent dat het een online editor is met samenwerkingsfuncties. Het biedt een eenvoudige lay-out. U vindt een paneel voor HTML, een paneel voor CSS en een paneel voor JavaScript, plus een voor realtime preview. Alle paneelgroottes kunnen worden aangepast door de randen rond te slepen.
U kunt 'pennen' maken, die zijn als individuele speeltuinen voor het aanpassen van webcode. Meerdere pennen kunnen worden gegroepeerd in collecties.
Hoewel aanmelding voor basisgebruik gratis is, vereisen privépennen en verzamelingen een Pro-account . Dit begint bij $ 8 per maand en omvat het hosten van activa, insluitbare thema's, realtime samenwerking en toegang tot de volledige webontwikkelings-IDE van CodePen.
Veel mensen beschouwen CodePen als de beste online HTML-editor. Probeer het uit om te zien of het past bij uw behoeften.
2. JSFiddle
JSFiddle is ongeveer hoe het klinkt: een sandbox waar je met JavaScript kunt spelen. U weet waarschijnlijk dat JavaScript hand in hand gaat met HTML en CSS. Dit betekent dat je met JSFiddle alle drie tegelijk kunt bewerken met de bewerkingsinterface van JSFiddle.
Als je wilt, kun je JavaScript helemaal overslaan.
Het leuke van JSFiddle is dat je externe verzoeken in de zijbalk kunt toevoegen. Hiermee kunt u off-site JavaScript- en CSS-bestanden opnemen om uw HTML te verbeteren. Ook handig is de Tidy-knop, die automatisch de inspringing van uw code opschoont, terwijl klikken op Samenwerken realtime online samenwerking mogelijk maakt.
Het enige nadeel is dat u op de knop Uitvoeren moet klikken om het voorbeeldpaneel bij te werken.
3. JSBin
Beschouw JSBin als een eenvoudiger en schoner alternatief voor JSFiddle. U kunt elke combinatie van HTML, CSS en JavaScript bewerken door de panelen te wisselen met de bovenste werkbalk. Voor maximale flexibiliteit kunt u desgewenst ook het voorbeeldpaneel en een consolepaneel wisselen.
hoe maak je een bitmoji-account aan
Maar terwijl u met JSFiddle externe CSS- en JavaScript-bronnen kunt koppelen, beperkt JSBin u tot vooraf gedefinieerde JavaScript-bibliotheken. De selectie is echter goed, variërend van jQuery tot React tot Angular en meer.
Hoewel JSBin gratis is en geen account vereist, heb je een Pro-account voor geavanceerde functies. Deze omvatten privébakken, aangepaste insluitingen, activahosting, Dropbox-synchronisatie en vanity-URL's voor pagina's die zijn gepubliceerd via JSBin.
Vier. Liveweave
Liveweave is visueel vergelijkbaar met de vorige editors, met een aangename gebruikersinterface. Net als JSFiddle maakt Liveweave realtime samenwerking mogelijk, en net als JSBin kun je linken naar vooraf gedefinieerde bronnen van derden, zoals jQuery.
Maar het heeft ook een paar 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 en de Color Explorer helpt u bij het selecteren van perfecte kleuren. Ondertussen kunt u met de Vector-editor vectorafbeeldingen voor uw site maken.
hoe geld toe te voegen aan de playstation-portemonnee
5. HTMLhuis
HTMLhouse is een goede optie als je alleen om HTML geeft (dus geen CSS of JavaScript). Schoon en minimaal, verticaal opgesplitst met bewerking aan de linkerkant en realtime voorbeeld aan de rechterkant.
Handig is de mogelijkheid om uw HTML te publiceren en privé (via privé-URL) of openbaar (toegevoegd aan De bladerpagina van HTMLhouse ). Het is eenvoudig maar effectief, en dat is precies waar een online HTML-editor in het spel komt en uitblinkt.
Merk op dat HTMLhouse is gemaakt en wordt onderhouden door de mensen van Schrijf.als , een afleidingsvrij online schrijfhulpmiddel. Houd hier rekening mee als u van plan bent om uw eigen site-inhoud te schrijven.
6. HTMLG
Een andere optie HTMLG volgt hetzelfde patroon van het gebruik van code en voorbeeldvensters voor HTML. Deze tool bevat echter geen CSS en JavaScript binnen hetzelfde uniforme project. Als u deze wilt bewerken, moet u eerder een nieuw tabblad openen en ze als afzonderlijke projecten bewerken.
Dit maakt het ideaal voor pure HTML-tweaks en testcode in uw browser; minder als u CSS-bewerkingen wilt opnemen.
Houd er rekening mee dat er een limiet van 300 woorden is als u volledige webpagina's test met HTMLG. Om dit te verhogen, kunt u zich aanmelden voor de advertentievrije premiumversie, vanaf slechts $ 5,80 per maand.
7. Dabblet
Dabblet biedt een iets andere kijk op online HTML-editors en splitst het scherm in twee in plaats van drie/vier panelen. Je hebt dus een weergave voor HTML & Resultaat, en een aparte (maar gekoppelde) weergave voor CSS & Resultaat.
Dit biedt meer ruimte en geeft een duidelijker beeld van de code en de preview. Verder wijst de ingebouwde w3.org HTML- en CSS-validator eventuele problemen op.
Als u een vrije ruimte op uw bureaublad nodig heeft om uw sitecode te testen, is dit wellicht de beste HTML-editor voor u.
Gebruik de beste online HTML-editors om uw vaardigheden te verbeteren
Als uw enige blootstelling aan HTML is wat u tien jaar geleden hebt geleerd, is dit het moment om bij te praten. HTML5 werd in 2014 uitgebracht en introduceerde een handvol nieuwe standaarden en functies. Weet je niet waar je moet beginnen? Bekijk deze essentiële nieuwe HTML5-elementen.
Wil je goede praktijken leren op het gebied van HTML5-webontwerp en -ontwikkeling? Controleer deze websites met hoogwaardige HTML-coderingsvoorbeelden . U moet ook eens kijken naar deze andere tools om uw vaardigheden op het gebied van webontwikkeling te verbeteren.
Deel Deel Tweeten E-mail 15 Windows Command Prompt (CMD)-opdrachten die u moet kennenDe opdrachtprompt is nog steeds een krachtige Windows-tool. Hier zijn de handigste CMD-opdrachten die elke Windows-gebruiker moet kennen.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Teksteditor
- Webontwikkeling
- WYSIWYG-editors
- HTML5
- Scripting
Plaatsvervangend redacteur voor beveiliging, Linux, doe-het-zelf, programmeren en techniek uitgelegd, en echt nuttige podcast-producent, met uitgebreide ervaring in desktop- en softwareondersteuning. Christian levert een bijdrage aan het tijdschrift Linux Format en is een Raspberry Pi-knutselaar, Lego-liefhebber en retro-gamingfan.
Meer van Christian CawleyAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren