De 7 bedste gratis online HTML -redaktører til at teste din kode

De 7 bedste gratis online HTML -redaktører til at teste din kode

Hvert websted, du bruger, er baseret på HTML. Mens webudviklere har brug for færdigheder i JavaScript, Python, CSS og scripting på serversiden, holder HTML det hele sammen.





Uden HTML er der ingen web, så du skal vide, hvordan du opretter og redigerer det. I stedet for at oprette et HTML -kode testsystem på din computer, er det enklere at teste kode i en browser.



Uanset om det er noget med små HTML -uddrag eller fulde webstedsprojekter, er en online HTML -editor ideel.





Hvorfor skal du bruge en online HTML -editor

Brug af en browserbaseret HTML-editor giver god mening over noget som Notesblok ++ af følgende årsager:

  • Online HTML -redaktører kører direkte i din webbrowser
  • Test din HTML-kode online --- se om koden kører som forventet
  • Se real-time webpremiere --- forhåndsvisningsopdateringerne, mens du redigerer
  • Strømlin din arbejdsgang --- ikke mere spare, indlæse i browseren, skifte tilbage til editoren, og gentag
  • Platform agnostiker --- de kører på enhver enhed med en internetforbindelse.

Dette sidste punkt er meget vigtigt. Det betyder, at du kan tænkes lige så let at udvikle en webside på en pc som en Chromebook. Du kan endda bruge en Android -tablet eller en computer på $ 50 som Raspberry Pi.



HTML -kodning er en tilgængelig, ligetil gateway til forståelse af programmering og udvikling. Du skal hele tiden teste din HTML-kode --- hvad er bedre end live-resultater i dit browservindue?

Lad os se på nogle af de bedste online HTML -redaktører, der er tilgængelige i øjeblikket.



1. CodePen

CodePen er et 'socialt udviklingsmiljø' for webudviklere, hvilket dybest set betyder, at det er en online editor med samarbejdsfunktioner. Det tilbyder et enkelt layout. Du finder et panel til HTML, et panel til CSS og et panel til JavaScript, plus et til real-time forhåndsvisning. Alle panelstørrelser kan justeres ved at trække kanterne rundt.

Du kan oprette 'kuglepenne', der ligner individuelle legepladser til justering af webkode. Flere kuglepenne kan grupperes sammen i samlinger.



Selvom tilmelding til grundlæggende brug er gratis, kræver private kuglepenne og samlinger en Pro -konto . Dette starter ved $ 8/måned og inkluderer aktivhosting, temaer, der kan indlejres, samarbejde i realtid og adgang til CodePens fulde webudviklings-IDE.

Mange anser CodePen som den bedste online HTML -editor. Prøv det for at se, om det passer til dine behov.

2. JSFiddle

JSFiddle er stort set, hvad det lyder som: en sandkasse, hvor du kan rode rundt med JavaScript. Du ved sikkert, at JavaScript går hånd i hånd med HTML og CSS. Det betyder, at du med JSFiddle kan redigere alle tre på én gang med JSFiddles redigeringsgrænseflade.

Hvis du vil, kan du helt springe JavaScript over.

Det gode ved JSFiddle er, at du kan tilføje eksterne anmodninger i sidebjælken. Dette lader dig inkludere off-site JavaScript- og CSS-filer til forbedring af din HTML. Nyttig er også knappen Tidy, som automatisk rydder op i din kodes indrykning, mens du klikker på Collaborate for at muliggøre online-samarbejde i realtid.

Den eneste ulempe er, at du skal klikke på knappen Kør for at opdatere preview -panelet.

3. JSBin

Betragt JSBin som et enklere og renere alternativ til JSFiddle. Du kan redigere enhver kombination af HTML, CSS og JavaScript bare ved at skifte panelerne med den øverste værktøjslinje. For maksimal fleksibilitet kan du også skifte forhåndsvisningspanelet og et konsolpanel efter behov.

anbefaler tv -programmer baseret på, hvad jeg kan lide

Men mens JSFiddle giver dig mulighed for at forbinde eksterne CSS- og JavaScript -ressourcer, begrænser JSBin dig til foruddefinerede JavaScript -biblioteker. Udvalget er dog godt, lige fra jQuery til React til Angular og mere.

Selvom JSBin er gratis og ikke kræver en konto, skal du bruge en Pro -konto for avancerede funktioner. Disse inkluderer private skraldespande, brugerdefinerede integreringer, aktivhosting, Dropbox -synkronisering og forfængelighedens webadresser til sider, der er udgivet via JSBin.

Fire. Liveweave

Liveweave ligner visuelt de tidligere redaktører med en behagelig brugergrænseflade. Ligesom JSFiddle giver Liveweave mulighed for samarbejde i realtid, og ligesom JSBin lader det dig linke i foruddefinerede tredjepartsressourcer som jQuery.

Men det har også et par unikke funktioner. Lorem Ipsum Generator opretter pladsholdertekst på din aktuelle markørposition. CSS Explorer har et WYSIWYG -værktøj til oprettelse af CSS -stilarter, og Color Explorer hjælper dig med at vælge perfekte farver. I mellemtiden giver Vector Editor dig mulighed for at oprette vektorgrafik til dit websted.

hvordan man får android til at ligne iphone

5. HTMLhouse

HTMLhouse er en god mulighed, hvis du kun interesserer dig for HTML (dvs. ingen CSS eller JavaScript). Ren og minimal, den er delt lodret med redigering til venstre og real-time forhåndsvisning til højre.

Nyttig er muligheden for at udgive din HTML og dele den privat (via privat URL) eller offentligt (tilføjet til HTMLhouse's Gennemse side ). Det er enkelt, men effektivt, og det er præcis her, en online HTML -editor kommer i spil og udmærker sig.

Bemærk, at HTMLhouse blev oprettet og vedligeholdes af folk på Skriv. Som , et distraktionsfrit online skriveværktøj. Husk dette, hvis du planlægger at skrive dit eget webstedsindhold.

6. HTMLG

En anden mulighed HTMLG følger det samme mønster for brug af kode og forhåndsvisningsruder til HTML. Dette værktøj inkluderer imidlertid ikke CSS og JavaScript inden for det samme forenede projekt. Hvis du hellere vil redigere dem, skal du åbne en ny fane og redigere dem som separate projekter.

Dette gør den ideel til rene HTML -tweaks og testkode i din browser; mindre, hvis du vil inkorporere CSS -redigeringer.

Bemærk, at der er en grænse på 300 ord, hvis du tester hele websider med HTMLG. For at øge dette kan du tilmelde dig den annoncefrie premiumversion fra kun 5,80 dollar om måneden.

7. Dabblet

Med et lidt anderledes bud på online HTML -redaktører deler Dabblet skærmen i to, snarere end tre/fire ruder. Så du har en visning til HTML og resultat og en separat (men sammenkædet) visning til CSS og resultat.

Dette giver mere plads, hvilket giver et klarere overblik over koden og forhåndsvisningen. Ydermere fremhæver den indbyggede w3.org HTML- og CSS-validator eventuelle problemer.

Hvis du har brug for et klart skrivebord til at teste din webstedskode, er dette muligvis den bedste HTML -editor for dig.

Brug de bedste online HTML -redaktører til at forbedre dine færdigheder

Hvis din eneste eksponering for HTML er det, du lærte for et årti siden, er det nu tid til at indhente det. HTML5 udgivet tilbage i 2014 og introducerede en håndfuld nye standarder og funktioner. Ikke sikker på, hvor du skal starte? Tjek disse vigtige nye HTML5 -elementer.

Vil du lære god praksis inden for HTML5 webdesign og udvikling? Tjek disse websteder med HTML -kodeeksempler af høj kvalitet . Du bør også tage et kig på disse andre værktøjer til opgradering af dine webudviklingsevner.

Del Del Tweet E -mail 15 Kommandoer i Windows -kommandoprompt (CMD), du skal kende

Kommandoprompten er stadig et kraftfuldt Windows -værktøj. Her er de mest nyttige CMD -kommandoer, hver Windows -bruger har brug for at kende.

Læs Næste Relaterede emner
  • Programmering
  • Teksteditor
  • Web-udvikling
  • WYSIWYG -redaktører
  • HTML5
  • Scripting
Om forfatteren Christian Cawley(1510 artikler udgivet)

Stedfortrædende redaktør for sikkerhed, Linux, gør -det -selv, programmering og teknologi forklaret og virkelig nyttig podcast -producent med stor erfaring inden for desktop- og softwaresupport. Christian er en bidragsyder til Linux Format -magasinet og er en Raspberry Pi -tinkerer, Lego -elsker og retro -spilfan.

Mere fra Christian Cawley

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere