5 bästa gratis HTML-redigerare på internet för att testa din kod

HTML driver den moderna världen. Det är sant att om du frågar någon vad som krävs för att vara en webbutvecklare, kommer de att berätta allt om JavaScript-webbramar, Python-webbramar, webbprogrammering. Programmering vs Webbutveckling: Vad är skillnaden? Programmering vs Webbutveckling: Vad är skillnaden? Du kanske tror att applikationsprogrammerare och webbutvecklare gör samma jobb, men det är långt ifrån sanningen. Här är de viktigaste skillnaderna mellan programmerare och webbutvecklare. Läs mer, etc. Men under allt det är HTML det som håller allt ihop.

Det finns ingen webb utan HTML, och du behöver veta hur man redigerar det om du vill göra det några typ av webbarbete. Men att skapa ett robust HTML-arbetsflöde i Sublime Text 11 Sublim Text Tips för produktivitet och snabbare Workflow 11 Sublim Text Tips för produktivitet och en snabbare Workflow Sublime Text är en mångsidig textredigerare och en guldstandard för många programmerare. Våra tips fokuserar på effektiv kodning, men allmänna användare kommer att uppskatta kortkommandon. Läs mer eller Visual Studio Code 10 Viktiga produktivitetstips för Visual Studio Code 10 Viktiga produktivitetstips för Visual Studio Code Visual Studio Code blåser andra programmeringstextredigerare ur vattnet. Det är gratis, öppen källkod, blixtlös och fylld med produktivitetsegenskaper. Läs mer kan vara overkill om du inte arbetar på ett fullblåst projekt.

För tillfällen då du bara vill fitta runt med ett litet stycke av HTML så kan du anpassa det till din smak, en online HTML-editor kommer att tjäna dig bättre.

Varför använda en HTML-editor på nätet?

Det bästa med online HTML-redaktörer är att de körs direkt i din webbläsare. Din webbläsare är bäst och mest relevant verktyg för bearbetning och återgivning av HTML-kod. Det är trots allt hela syftet och anledningen till att vara.

Vilket innebär att din webbläsare är bäst utrustad för realtid förhandsvisningar av HTML. När du skriver webbmarkering i en fristående redaktör som Notepad eller TextEdit måste du spara ändringar i en fil, ladda filen i webbläsaren, sedan granska den och sedan byta tillbaka till redigeraren för fler ändringar, skölj och upprepa. Det är en klumpig och besvärlig process.

En HTML-redigerare kan dynamiskt uppdatera sig själv som du skriver och ändrar markeringen. Det finns ingen anledning att vända fram och tillbaka mellan fönster. Du anpassar HTML-en på ena sidan, ändringarna sker automatiskt på andra sidan.

Några fristående redaktörer kan konfigureras med en typ av faux realtid förhandsgranskning, men de är inte lika praktiska. Exempelvis kan funktionen Live Preview in Brackets öppna ett separat Chrome-fönster och trycka HTML-ändringar i webbläsaren när du sparar markeringen. Men detta kräver fortfarande flipflopning av fönster, och det tvingar dig att använda Chrome.

Online HTML-redaktörer är som bärbar som de kommer. Oavsett vilken maskin du är på, kan du komma åt webbredaktören så länge du har en internetanslutning. Du behöver inte installera och konfigurera en fristående editor som du kanske eller inte kan använda igen.

Här är några av de bästa HTML-redigerare som för närvarande finns tillgängliga.

1. Codepen

Codepen är en “social utveckling miljö” för webbutvecklare, vilket i grunden betyder att det är en online-editor med delnings- och samarbetsfunktioner. Redaktören själv är enkel: en panel för HTML, en panel för CSS och en panel för JavaScript, plus en panel för förhandsgranskning i realtid. Alla panelstorlekar kan justeras genom att dra runt kanterna.

Du kan skapa “pennor,” som är som enskilda lekplatser för tweaking webkod. Multipla pennor kan grupperas ihop i samlingar. Privata pennor och samlingar kräver ett Pro-konto, som börjar på $ 9 / mo och levereras med andra funktioner: asset hosting, inbädda teman, realtidssamarbete och tillgång till CodePens fullständiga webbutvecklings IDE.

2. JSFiddle

JSFiddle Det är ganska mycket vad det låter som: en sandlåda där du kan fitta runt med JavaScript. Men eftersom du ser hur JavaScript går hand i hand med HTML och CSS, kan du redigera alla tre med JSFiddles redigeringsgränssnitt - och du kan hoppa över JavaScript helt och hållet.

Vad som är bra med JSFiddle är att du kan lägga till externa förfrågningar i sidofältet, som låter dig inkludera JavaScript och CSS-filer på plats för att förbättra din HTML. Också nifty är Tidy-knappen, som automatiskt rensar upp kodens indragning och knappen Samarbeta, så att du kan arbeta med samma kod med någon annan i realtid.

Den enda nackdelen är att du måste klicka på knappen Kör för att uppdatera förhandsgranskningspanelen.

3. JSBin

JSBin är som ett enklare och renare alternativ till JSFiddle. Du kan redigera en kombination av HTML, CSS och JavaScript genom att växla paneler med toppverktygsfältet och du kan växla förhandsgranskningspanelen och en konsolpanel för maximal flexibilitet.

Men medan JSFiddle tillåter dig att länka externa CSS- och JavaScript-resurser, har JSBin bara fördefinierade JavaScript-bibliotek som du kan inkludera. Urvalet är dock bra, från jQuery till React to Angular och mer.

Medan JSBin är gratis och inte kräver ett konto behöver du ett Pro-konto om du vill ha privata lager, anpassade tjänster, tillgångshotell, Dropbox-synkronisering och fåfänga-webbadresser för sidor publicerade via JSBin.

4. Liveweave

Liveweave liknar föregående redigerare ovan, med ett gränssnitt som är mer tilltalande för ögat (även om dina inställningar kan variera). I likhet med JSFiddle tillåter Liveweave samarbete i realtid, och som JSBin låter du länka i fördefinierade tredjepartsresurser som jQuery.

Men det har också några unika egenskaper. Lorem Ipsum Generator skapar platshålltext på din nuvarande markörposition. CSS Explorer tillhandahåller ett WYSIWYG-verktyg för att skapa CSS-format. Färgutforskaren hjälper dig att välja de perfekta färgerna för ditt tema. Vector Editor gör att du kan skapa vektorgrafik för din webbplats.

5. HTMLhouse

HTMLhouse är ett bra alternativ om du endast bryr sig om HTML (dvs ingen CSS eller JavaScript). Den är extremt ren och minimal, delas vertikalt med redigering till vänster och i realtid förhandsgranskning till höger. En niffig funktion är möjligheten att publicera din HTML och dela den privat (med den angivna webbadressen) eller offentligt (den läggs till på HTMLhouses bläddringssida). Det är enkelt men effektivt, vilket är exakt där en HTML-editor på nätet kommer till spel och utmärker sig.

Observera att HTMLhouse skapades och underhålls av folket på Write.as, ett distraheringsfritt online skrivverktyg. Om du skriver blogginlägg eller något liknande använder du Write.as istället.

Förbättra dina HTML-färdigheter ännu mer

Om din enda exponering mot HTML är vad du lärde dig för ett årtionde sedan är det dags för dig att komma ikapp. HTML5 släpptes tillbaka 2014 och introducerade en handfull nya standarder och funktioner. Inte säker på var du ska börja? Kolla in dessa viktiga nya element i HTML5 Vad är nytt i HTML5? 9 Elements You Need to Know Vad är nytt i HTML5? 9 Elements Du behöver veta HTML5 är den senaste versionen av det mest använda markup-språket på webben. Om du inte använder de senaste funktionerna saknar du någon cool funktion. Läs mer .

Dessutom, för att lära bra övningar i HTML5 webbdesign och utveckling bör du kolla in dessa webbplatser med HTML-kodningsexempel 8. Bästa webbsidor för kvalitets HTML-kodningsexempel 8 Bästa webbsidor för HTML-kodning av kvalitet Det finns några fantastiska webbplatser som erbjuder väl utformade och användbara HTML-kodningsexempel och Handledningar. Här är åtta av våra favoriter. Läs mer . Och när din webbplats går live, överväga att komprimera din HTML-markup Hur komprimerad HTML fungerar och varför du kan behöva det Hur komprimerade HTML-verk och varför du behöver det I den här artikeln går vi över de två huvudmetoderna för komprimerad HTML, varför HTML-filer ska krympas och hur man går till det. Läs mer för bättre fart.

Vad är ditt favorit sätt att redigera HTML markup? Vilken typ av webbplats jobbar du med just nu? Dela med oss ​​ner i kommentarerna nedan!

Utforska mer om: HTML5, WYSIWYG Redaktörer.