De 7 beste gratis online HTML -redaktørene for å teste koden din

De 7 beste gratis online HTML -redaktørene for å teste koden din

Hvert nettsted du bruker, er avhengig av HTML. Mens webutviklere trenger ferdigheter i JavaScript, Python, CSS og skripting på serversiden, holder HTML alt sammen.





Uten HTML er det ingen internett, så du må vite hvordan du lager og redigerer det. I stedet for å sette opp et HTML -kodetestingssystem på datamaskinen din, er det enklere å teste kode i en nettleser.



Enten du fikler med små HTML -utdrag eller fullstendige nettstedsprosjekter, er en online HTML -editor ideell.





Hvorfor du bør bruke en online HTML -editor

Å bruke en nettleserbasert HTML-editor gir god mening om noe som Notepad ++ av følgende grunner:

  • Online HTML -redaktører kjøres direkte i nettleseren din
  • Test HTML-koden din online --- se om koden kjører som forventet
  • Se forhåndsvisninger i sanntid --- oppdateringene av forhåndsvisningen mens du redigerer
  • Effektiviser arbeidsflyten --- ikke mer å spare, laste inn i nettleseren, bytte tilbake til redaktøren og gjenta
  • Plattform agnostiker --- de kjører på alle enheter med en nettforbindelse.

Dette siste punktet er veldig viktig. Det betyr at du kan tenke deg å utvikle en nettside like enkelt på en PC som en Chromebook. Du kan til og med bruke et Android -nettbrett eller en datamaskin på $ 50 som Raspberry Pi.



HTML -koding er en lett tilgjengelig gateway for å forstå programmering og utvikling. Du må hele tiden teste HTML-koden din-hva er bedre enn live-resultater i nettleservinduet?

La oss se på noen av de beste online HTML -redaktørene som er tilgjengelige for øyeblikket.



1. CodePen

CodePen er et 'sosialt utviklingsmiljø' for webutviklere, som i utgangspunktet betyr at det er en online redaktør med samarbeidsfunksjoner. Den tilbyr en enkel layout. Du finner et panel for HTML, et panel for CSS og et panel for JavaScript, pluss et for forhåndsvisning i sanntid. Alle panelstørrelser kan justeres ved å dra kantene rundt.

Du kan lage 'Penner', som er som individuelle lekeplasser for tilpasning av webkode. Flere penner kan grupperes i samlinger.



Selv om registrering for grunnleggende bruk er gratis, krever private penner og samlinger en Pro -konto . Dette starter på $ 8/mnd og inkluderer eiendomsvert, temaer som kan bygges inn, samarbeid i sanntid og tilgang til CodePens fulle webutviklings-IDE.

Mange anser CodePen som den beste online HTML -editoren. Prøv det for å se om det passer dine behov.

2. JSFiddle

JSFiddle er ganske mye det det høres ut som: en sandkasse hvor du kan fikle rundt med JavaScript. Du vet sikkert at JavaScript går hånd i hånd med HTML og CSS. Dette betyr at med JSFiddle kan du redigere alle tre samtidig med JSFiddles redigeringsgrensesnitt.

Hvis du vil, kan du hoppe over JavaScript helt.

Det som er fint med JSFiddle er at du kan legge til eksterne forespørsler i sidefeltet. Dette lar deg inkludere JavaScript og CSS-filer utenfor nettstedet for å forbedre HTML-koden din. Også nyttig er Tidy-knappen, som automatisk rydder opp i kodens innrykk, mens du klikker på Collaborate for å tillate samarbeid i sanntid.

Den eneste ulempen er at du må klikke på Kjør -knappen for å oppdatere forhåndsvisningspanelet.

3. JSBin

Vurder JSBin som et enklere og renere alternativ til JSFiddle. Du kan redigere en hvilken som helst kombinasjon av HTML, CSS og JavaScript bare ved å veksle panelene med den øverste verktøylinjen. For maksimal fleksibilitet kan du også veksle forhåndsvisningspanelet og et konsollpanel etter behov.

ting å gjøre med en bringebær pi 2

Men mens JSFiddle lar deg koble eksterne CSS- og JavaScript -ressurser, begrenser JSBin deg til forhåndsdefinerte JavaScript -biblioteker. Utvalget er imidlertid godt, alt fra jQuery til React til Angular og mer.

Selv om JSBin er gratis og ikke krever en konto, trenger du en Pro -konto for avanserte funksjoner. Disse inkluderer private søppelbøtter, egendefinerte embeds, eiendomshosting, Dropbox -synkronisering og forfengelighetsnettadresser for sider publisert gjennom JSBin.

Fire. Liveweave

Liveweave ligner visuelt på de tidligere redaktørene, med et behagelig brukergrensesnitt. I likhet med JSFiddle gir Liveweave mulighet for samarbeid i sanntid, og som JSBin lar du deg koble til forhåndsdefinerte tredjepartsressurser som jQuery.

Men den har også noen få unike funksjoner. Lorem Ipsum Generator lager plassholdertekst på din nåværende markørposisjon. CSS Explorer har et WYSIWYG -verktøy for å lage CSS -stiler, og Color Explorer hjelper deg med å velge perfekte farger. I mellomtiden lar Vector Editor deg lage vektorgrafikk for nettstedet ditt.

hvordan du slår av macbook air

5. HTMLhouse

HTMLhouse er et godt alternativ hvis du bare bryr deg om HTML (dvs. ingen CSS eller JavaScript). Ren og minimal, den deles vertikalt med redigering til venstre og forhåndsvisning i sanntid til høyre.

Nyttig er muligheten til å publisere HTML -koden din og dele den privat (via privat URL) eller offentlig (lagt til HTMLhouse's Bla gjennom side ). Det er enkelt, men effektivt, og det er akkurat der en online HTML -editor kommer inn i bildet og utmerker seg.

Vær oppmerksom på at HTMLhouse ble opprettet og vedlikeholdes av folk på Skriv. Som , et distraksjonsfritt online skriveverktøy. Husk dette hvis du planlegger å skrive ditt eget nettstedinnhold.

6. HTMLG

Et annet alternativ HTMLG følger det samme mønsteret for bruk av kode og forhåndsvisningsruter for HTML. Dette verktøyet inkluderer imidlertid ikke CSS og JavaScript i det samme enhetlige prosjektet. Hvis du vil redigere disse, må du heller åpne en ny fane og redigere dem som separate prosjekter.

Dette gjør den ideell for rene HTML -tilpasninger og testkoder i nettleseren din; mindre hvis du vil inkludere CSS -redigeringer.

Vær oppmerksom på at det er en grense på 300 ord hvis du tester fulle nettsider med HTMLG. For å øke dette kan du registrere deg for den annonsefrie premiumversjonen, fra så lite som $ 5,80 i måneden.

7. Dabblet

Med en litt annerledes oppfatning av online HTML -redaktører, deler Dabblet skjermen i to, i stedet for tre/fire ruter. Så du har en visning for HTML og resultat, og en egen (men koblet) visning for CSS og resultat.

Dette gir mer plass, noe som gir en klarere oversikt over koden og forhåndsvisningen. Videre fremhever den innebygde w3.org HTML- og CSS-validatoren eventuelle problemer.

Hvis du trenger en ledig plass på skrivebordet for å teste nettstedskoden, kan dette være den beste HTML -editoren for deg.

Bruk de beste online HTML -redaktørene for å forbedre dine ferdigheter

Hvis din eneste eksponering for HTML er det du lærte for et tiår siden, er det på tide å ta igjen. HTML5 utgitt tilbake i 2014 og introduserte en håndfull nye standarder og funksjoner. Usikker på hvor du skal begynne? Sjekk ut disse viktige nye HTML5 -elementene.

Vil du lære god praksis innen HTML5 webdesign og utvikling? Sjekk disse nettsteder med HTML -kodeeksempler av høy kvalitet . Du bør også ta en titt på disse andre verktøyene for å oppgradere ferdighetene dine i webutvikling.

Dele Dele kvitring E -post 15 Windows -kommandoprompt (CMD) -kommandoer du må vite

Kommandoprompten er fremdeles et kraftig Windows -verktøy. Her er de mest nyttige CMD -kommandoene hver Windows -bruker trenger å vite.

Les neste Relaterte temaer
  • Programmering
  • Tekstredigerer
  • Webutvikling
  • WYSIWYG -redaktører
  • HTML5
  • Scripting
Om forfatteren Christian Cawley(1510 artikler publisert)

Nestlederedaktør for sikkerhet, Linux, gjør -det -selv, programmering og teknologi forklart, og virkelig nyttig podcast -produsent, med lang erfaring innen desktop og programvarestøtte. Christian er en bidragsyter til magasinet Linux Format, og er en Raspberry Pi -tinkerer, en lego -elsker og en retro spillfan.

Mer fra Christian Cawley

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere