7 parimat tasuta HTML -i redigeerijat oma koodi testimiseks

7 parimat tasuta HTML -i redigeerijat oma koodi testimiseks

Iga teie kasutatav veebisait tugineb HTML -ile. Kui veebiarendajad vajavad JavaScripti, Pythoni, CSS-i ja serveripoolse skriptimise oskusi, siis HTML hoiab seda kõike koos.





Ilma HTML -iga pole ka veebi, seega peate teadma, kuidas seda luua ja muuta. Selle asemel, et oma arvutis HTML -koodi testimissüsteemi seadistada, on lihtsam koodi testida brauseris.



Olenemata sellest, kas tegelete väikeste HTML -fragmentidega või täieliku veebisaidiprojektiga, on veebipõhine HTML -redaktor ideaalne.



Miks peaksite kasutama veebipõhist HTML -redaktorit?

Brauseripõhise HTML-redaktori kasutamine on mõistlik näiteks Notepad ++ puhul järgmistel põhjustel.

  • Veebipõhised HTML -redaktorid töötavad otse teie veebibrauseris
  • Testige oma HTML-koodi veebis-vaadake, kas kood töötab ootuspäraselt
  • Vaadake reaalajas veebi eelvaateid-eelvaateid värskendatakse muutmise ajal
  • Tehke oma töövoog sujuvamaks-enam ei salvestata, laadite brauserisse, lülitate tagasi redaktorisse ja korrake
  • Platvormi agnostik --- need töötavad mis tahes seadmes, millel on veebiühendus.

See viimane punkt on väga oluline. See tähendab, et saate arvutis arvutis veebilehte sama hõlpsalt arendada kui Chromebooki. Võite isegi kasutada Android -tahvelarvutit või 50 -dollarist arvutit nagu Raspberry Pi.



HTML -kodeerimine on juurdepääsetav ja lihtne värav programmeerimise ja arendamise mõistmiseks. Peate pidevalt oma HTML-koodi testima-mis oleks parem kui brauseriakna reaalajas tulemused?

Vaatame mõnda parimat praegu saadaval olevat veebipõhist HTML -redaktorit.



1. CodePen

CodePen on veebiarendajate jaoks „sotsiaalse arengu keskkond”, mis põhimõtteliselt tähendab, et see on koostööfunktsioonidega veebitoimetaja. See pakub lihtsat paigutust. Leiate paneeli HTML-i jaoks, paneeli CSS-i jaoks ja paneeli JavaScripti jaoks, lisaks ühe reaalajas eelvaate jaoks. Kõiki paneeli suurusi saab reguleerida, servi ringi lohistades.

Saate luua 'pliiatsid', mis on nagu individuaalsed mänguväljakud veebikoodi muutmiseks. Mitu pliiatsit saab rühmadesse koondada.



Kuigi põhikasutuseks registreerimine on tasuta, peavad privaatsed pliiatsid ja kollektsioonid a Pro konto . See algab 8 dollarist kuus ja sisaldab varade hostimist, manustatavaid teemasid, reaalajas koostööd ja juurdepääsu CodePeni täielikule veebiarenduse IDE-le.

Paljud inimesed peavad CodePeni parimaks veebipõhiseks HTML -redaktoriks. Proovige järele, kas see sobib teie vajadustega.

2. JSFiddle

JSFiddle on peaaegu selline, nagu see kõlab: liivakast, kus saate JavaScriptiga ringi käia. Tõenäoliselt teate, et JavaScript käib käsikäes HTML -i ja CSS -iga. See tähendab, et JSFiddle'i abil saate kõiki kolme korraga redigeerida JSFiddle'i redigeerimisliidesega.

Kui soovite, võite JavaScripti täielikult vahele jätta.

JSFiddle'i juures on tore see, et saate külgribale lisada väliseid taotlusi. See võimaldab HTML-i täiustamiseks lisada saidiväliseid JavaScripti ja CSS-faile. Samuti on kasulik nupp Tidy, mis puhastab automaatselt teie koodi taande, samas kui nupul Collaborate lubatakse reaalajas veebipõhist koostööd.

Ainus negatiivne külg on see, et eelvaatepaneeli värskendamiseks peate klõpsama nuppu Käivita.

3. JSBin

Mõelge JSBinile kui lihtsamale ja puhtamale alternatiivile JSFiddle'ile. Saate muuta mis tahes HTML-, CSS- ja JavaScripti kombinatsioone, kui vahetate paneele ülemise tööriistariba abil. Maksimaalse paindlikkuse tagamiseks saate vajadusel vahetada ka eelvaatepaneeli ja konsoolipaneeli.

lisage tundide ajakava Google'i kalendrisse

Kuid kui JSFiddle võimaldab teil siduda väliseid CSS -i ja JavaScripti ressursse, piirab JSBin teid eelmääratletud JavaScripti teekidega. Valik on siiski hea, ulatudes jQueryst kuni Reacti ja Angularini.

Kuigi JSBin on tasuta ega vaja kontot, on teil vaja Pro konto täiustatud funktsioonide jaoks. Nende hulka kuuluvad privaatsed prügikastid, kohandatud manustamised, varade hostimine, Dropboxi sünkroonimine ja JSBini kaudu avaldatud lehtede edevuse URL -id.

Neli. Liveweave

Liveweave sarnaneb visuaalselt eelmiste toimetajatega, meeldiva kasutajaliidesega. Nagu JSFiddle, võimaldab Liveweave teha reaalajas koostööd ja nagu JSBin, võimaldab see linkida eelmääratletud kolmanda osapoole ressursse, nagu jQuery.

Kuid sellel on ka mõned unikaalsed omadused. Lorem Ipsum Generator loob kohatäite teksti teie praeguses kursori asukohas. CSS Explorer pakub WSSIWYG tööriista CSS -stiilide loomiseks ja Color Explorer aitab teil valida täiuslikke värve. Vahepeal võimaldab vektoriredaktor oma saidile vektorgraafikat luua.

dell sülearvuti klaviatuur ei tööta

5. HTMLhouse

HTMLhouse on hea valik, kui hoolite ainult HTML -ist (st ei CSS -i ega JavaScripti). Puhas ja minimaalne, see on vertikaalselt jagatud, redigeerimine vasakul ja reaalajas eelvaade paremal.

Kasulik on võimalus avaldada oma HTML ja jagada seda privaatselt (privaatse URL -i kaudu) või avalikult (lisatud HTMLhouse'i sirvimisleht ). See on lihtne, kuid tõhus, just siin tuleb mängu veebipõhine HTML -redaktor ja paistab silma.

Pange tähele, et HTMLhouse loodi ja seda haldavad inimesed aadressil Kirjutage.nagu , segamisvaba veebipõhine kirjutamisvahend. Pidage seda meeles, kui kavatsete oma saidi sisu kirjutada.

6. HTMLG

Teine võimalus HTMLG järgib sama koodi ja HTML -i eelvaatepaanide kasutamise mustrit. Kuid see tööriist ei hõlma CSS -i ja JavaScripti samas ühtses projektis. Pigem, kui soovite neid muuta, peate avama uue vahekaardi ja muutma neid eraldi projektidena.

See muudab selle ideaalseks puhtaks HTML -i muutmiseks ja brauseri koodi testimiseks; vähem, kui soovite lisada CSS -i muudatusi.

Pange tähele, et HTMLG-ga täisveebilehtede testimisel on 300 sõna piirang. Selle suurendamiseks saate registreeruda reklaamivabale lisatasu versioonile, alates 5,80 dollarist kuus.

7. Dabblet

Pakkudes veebipõhiseid HTML -redigeerijaid pisut teistsuguseks, jagab Dabblet ekraani kaheks, mitte kolmeks/neljaks paaniks. Nii et teil on vaade HTML -ile ja tulemusele ning eraldi (kuid lingitud) vaade CSS -ile ja tulemusele.

See pakub rohkem ruumi, andes koodi ja eelvaate selgema ülevaate. Lisaks toob sisseehitatud w3.org HTML ja CSS valideerija esile kõik probleemid.

Kui vajate saidi koodi testimiseks töölaual vaba ruumi, võib see olla teie jaoks parim HTML -redaktor.

Kasutage oma oskuste parandamiseks parimaid veebipõhiseid HTML -redigeerijaid

Kui teie ainus kokkupuude HTML -iga on see, mida õppisite kümme aastat tagasi, on nüüd õige aeg järele jõuda. HTML5 ilmus 2014. aastal ja tutvustas käputäis uusi standardeid ja funktsioone. Kas pole kindel, kust alustada? Vaadake neid olulisi uusi HTML5 elemente.

Kas soovite õppida HTML5 veebidisaini ja -arenduse häid tavasid? Kontrollige neid veebisaite kvaliteetsete HTML -kodeerimise näidetega . Samuti peaksite vaatama neid muid veebiarendusoskuste täiendamise tööriistu.

Jaga Jaga Piiksuma E -post 15 Windowsi käsuviiba (CMD) käsku, mida peate teadma

Käsuviip on endiselt võimas Windowsi tööriist. Siin on kõige kasulikumad CMD -käsud, mida iga Windowsi kasutaja peab teadma.

Loe edasi Seotud teemad
  • Programmeerimine
  • Tekstiredaktor
  • Veebiarendus
  • WYSIWYG toimetajad
  • HTML5
  • Skriptimine
Autori kohta Christian Cawley(Avaldatud 1510 artiklit)

Turvalisuse, Linuxi, isetegemise, programmeerimise ja tehniliste selgituste redaktori asetäitja ning tõeliselt kasulik podcastide tootja, kellel on laialdased kogemused laua- ja tarkvaratoes. Ajakirja Linux Format kaastööline Christian on Raspberry Pi näpistaja, Lego armastaja ja retromängude fänn.

Veel Christian Cawley'lt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin