5 beste gratis online HTML-redaktører for å teste koden din

HTML kjører den moderne verden. Sannt, hvis du spør noen om hva som kreves for å være en webutvikler, vil de fortelle deg alt om JavaScript-webrammer, Python-nettverk, webprogrammeringspraksis. Programmering vs Webutvikling: Hva er forskjellen? Programmering vs Webutvikling: Hva er forskjellen? Du tror kanskje at applikasjonsprogrammerere og webutviklere gjør den samme jobben, men det er langt fra sannheten. Her er de viktigste forskjellene mellom programmerere og webutviklere. Les mer, etc. Men under alt dette er HTML det som holder alt sammen.

Det er ingen web uten HTML, og du må vite hvordan du redigerer det hvis du vil gjøre det noen slags nettarbeid. Men å sette opp en robust HTML redigering arbeidsflyt i Sublime Text 11 Sublime Tekst Tips for Produktivitet og en raskere Workflow 11 Sublime Tekst Tips for produktivitet og en raskere Workflow Sublime Text er en allsidig tekstredigerer og en gullstandard for mange programmerere. Våre tips fokuserer på effektiv koding, men generelle brukere vil sette pris på hurtigtastene. Les mer eller Visual Studio Code 10 Viktige produktivitetstips for Visual Studio Code 10 Viktige produktivitetstips for Visual Studio Code Visual Studio Code blåser andre programmerings tekstredigerere ut av vannet. Det er gratis, åpen kildekode, lynrask og fullpakket med produktivitetsfunksjoner. Les mer kan være overkill hvis du ikke jobber med et fullblåst prosjekt.

For tider når du bare ønsker å snikle rundt med en liten bunke av HTML, så kan du finjustere den til din smak, en online HTML-editor vil tjene deg bedre.

Hvorfor bruke en HTML-editor på Internett?

Det beste med online HTML-redaktører er at de kjører direkte i nettleseren din. Din nettleser er beste og mest relevant verktøy for behandling og gjengivelse av HTML-kode. Det er jo hele sin hensikt og grunn for å være.

Hvilket betyr at nettleseren din er best rustet til real-time forhåndsvisninger av HTML. Når du skriver webmarkering i en frittstående editor som Notisblokk eller TextEdit, må du lagre endringer i en fil, last deretter filen i nettleseren din, deretter gjennomgå den, og bytt tilbake til redigereren for flere endringer, skyll og gjenta. Det er en clunky og besværlig prosess.

En HTML-editor på Internett kan dynamisk oppdatere seg selv som du skriver og endrer oppmerkningen. Det er ikke nødvendig å vende frem og tilbake mellom vinduene. Du tilpasser HTML-en på en side, endringene skjer automatisk på den andre siden.

Noen få frittstående redaktører kan konfigureres med en slags ekte sanntids forhåndsvisning, men de er ikke like praktiske. For eksempel kan Live Preview-funksjonen i parentes åpne et eget Chrome-vindu og trykke HTML-endringer i nettleseren når du lagrer oppføringen. Men dette krever fortsatt vindusflipfletting, og det tvinger deg til å bruke Chrome.

Online HTML-redaktører er som bærbar som de kommer. Uansett hvilken maskin du er på, kan du få tilgang til nettredaktøren så lenge du har en internettforbindelse. Du trenger ikke å installere og konfigurere en frittstående editor som du kanskje eller ikke kan bruke igjen.

Her er noen av de beste elektroniske HTML-redaktørene som er tilgjengelige.

1. Codepen

Codepen er en “sosialt utviklingsmiljø” for webutviklere, som i utgangspunktet betyr at det er en online-editor med delings- og samarbeidsfunksjoner. Redaktøren selv er enkel: et panel for HTML, et panel for CSS, og et panel for JavaScript, pluss et panel for forhåndsvisning i sanntid. Alle panelstørrelser kan justeres ved å dra kantene rundt.

Du kan opprette “penner,” som er som individuelle lekeplasser for å tilpasse webkoden. Flere penner kan grupperes sammen i samlinger. Private penner og samlinger krever en Pro-konto, som starter på $ 9 / mo, og leveres med andre funksjoner: eiendomsherberge, embeddable temaer, sanntidssamarbeid og tilgang til CodePens fullwebutvikling IDE.

2. JSFiddle

JSFiddle Det er ganske mye hva det høres ut som: en sandkasse hvor du kan snikle rundt med JavaScript. Men når du ser på hvordan JavaScript går hånd i hånd med HTML og CSS, kan du redigere alle tre med JSFiddles redigeringsgrensesnitt - og du kan hoppe over JavaScript helt.

Hva er fint med JSFiddle, er at du kan legge til eksterne forespørsler i sidelinjen, som lar deg inkludere JavaScript og CSS-filer på stedet for å forbedre HTML-koden. Også nifty er Tidy-knappen, som automatisk rydder opp kodens innrykk, og Collaborate-knappen, som lar deg jobbe på samme kode med noen andre i sanntid.

Den eneste ulempen er at du må klikke Run-knappen for å oppdatere forhåndsvisningspanelet.

3. JSBin

JSBin er som et enklere og renere alternativ til JSFiddle. Du kan redigere en kombinasjon av HTML, CSS og JavaScript bare ved å bytte paneler med topp verktøylinje, og du kan bytte forhåndsvisningspanelet og et konsollpanel for maksimal fleksibilitet.

Men mens JSFiddle lar deg koble eksterne CSS- og JavaScript-ressurser, har JSBin bare forhåndsdefinerte JavaScript-biblioteker som du kan inkludere. Utvalget er bra, alt fra jQuery til React to Angular og mer.

Selv om JSBin er gratis og ikke krever en konto, trenger du en Pro-konto hvis du vil ha private skuffer, egendefinerte tjenester, eiendomsvertering, Dropbox-synkronisering og forfengelighet-nettadresser for sider publisert gjennom JSBin.

4. Liveweave

Liveweave ligner på forrige editor ovenfor, med et grensesnitt som er mer behagelig for øyet (selv om dine preferanser kan variere). Som JSFiddle, gir Liveweave mulighet for samarbeid i sanntid, og som JSBin kan du lenke i forhåndsdefinerte tredjeparts ressurser som jQuery.

Men det har også noen unike funksjoner. Lorem Ipsum Generator lager plassholdertekst ved din nåværende markørposisjon. CSS Explorer gir et WYSIWYG-verktøy for å lage CSS-stiler. Color Explorer hjelper deg med å velge de perfekte fargene for temaet ditt. Vector Editor lar deg lage vektorgrafik for nettstedet ditt.

5. HTMLhouse

HTMLhouse er et godt alternativ hvis du bare bryr seg om HTML (dvs. ingen CSS eller JavaScript). Det er ekstremt rent og minimalt, delt vertikalt med redigering til venstre og sanntids forhåndsvisning til høyre. En nifty-funksjon er muligheten til å publisere HTML-en din og dele den privat (med den angitte nettadressen) eller offentlig (den blir lagt til i HTMLhouse's Bla gjennom-side). Det er enkelt, men effektivt, noe som er akkurat der et HTML-editor på Internett kommer inn i spillet og utmerker seg.

Merk at HTMLhouse ble opprettet og vedlikeholdes av folkene på Write.as, et distraheringsfritt online skriveverktøy. Hvis du skriver blogginnlegg eller noe lignende, bruk Write.as i stedet.

Forbedre HTML-ferdighetene dine enda mer

Hvis din eneste eksponering for HTML er det du lærte for et tiår siden, så er det på tide for deg å fange opp. HTML5 utgitt tilbake i 2014 og introduserte en håndfull nye standarder og funksjoner. Ikke sikker på hvor du skal begynne? Sjekk ut disse viktige nye elementene i HTML5 Hva er nytt i HTML5? 9 Elever du trenger å vite Hva er nytt i HTML5? 9 Elementer du trenger å vite HTML5 er den nyeste versjonen av det mest brukte markup-språket på nettet. Hvis du ikke bruker de nyeste funksjonene, går du glipp av litt kul funksjonalitet. Les mer .

Videre, for å lære god praksis i HTML5 webdesign og utvikling, bør du sjekke ut disse nettstedene med kvalitets HTML kodende eksempler 8 beste nettsteder for kvalitet HTML koding eksempler 8 beste nettsteder for kvalitet HTML koding eksempler Det er noen kjempebra nettsteder som tilbyr godt designet og nyttig HTML kodende eksempler og tutorials. Her er åtte av våre favoritter. Les mer . Og når nettstedet ditt går live, bør du vurdere å komprimere HTML-merket ditt. Hvordan komprimert HTML fungerer, og hvorfor du trenger det. Hvordan komprimeres HTML-verk og hvorfor du trenger det. I denne artikkelen vil vi gå over de to hovedmetodene for komprimert HTML, hvorfor HTML-filer skal krympes, og hvordan man skal gå om det. Les mer for bedre fart.

Hva er din favoritt måte å redigere HTML markup? Hva slags nettsted jobber du med akkurat nå? Del med oss ​​ned i kommentarene nedenfor!

Utforsk mer om: HTML5, WYSIWYG-redaktører.