7 najboljših brezplačnih spletnih urejevalnikov HTML za preizkušanje vaše kode

7 najboljših brezplačnih spletnih urejevalnikov HTML za preizkušanje vaše kode

Vsako spletno mesto, ki ga uporabljate, temelji na HTML -ju. Medtem ko spletni razvijalci potrebujejo veščine JavaScript, Python, CSS in skriptiranje na strani strežnika, jih HTML združuje.





Brez HTML -ja ni spleta, zato ga morate znati ustvariti in urediti. Namesto da v računalniku nastavite sistem za preskušanje kod HTML, je kodo preprosteje preizkusiti v brskalniku.



Spletni urejevalnik HTML je idealen, ne glede na to, ali se poigravate z majhnimi odrezki HTML ali celotnimi projekti spletnih mest.





Zakaj bi morali uporabiti spletni urejevalnik HTML

Uporaba urejevalnika HTML, ki temelji na brskalniku, je smiselna pri uporabi Notepada ++ iz naslednjih razlogov:

  • Spletni urejevalniki HTML delujejo neposredno v vašem spletnem brskalniku
  • Preizkusite svojo kodo HTML v spletu-preverite, ali koda deluje po pričakovanjih
  • Oglejte si spletne predoglede v realnem času --- posodobitve predogleda med urejanjem
  • Poenostavite svoj potek dela-ni več shranjevanja, nalaganja v brskalnik, preklopa nazaj v urejevalnik in ponovite
  • Agnostična platforma --- delujejo na kateri koli napravi s spletno povezavo.

Ta zadnja točka je zelo pomembna. To pomeni, da lahko spletno stran tako enostavno razvijete v računalniku kot Chromebook. Lahko celo uporabite tablični računalnik Android ali računalnik za 50 USD, kot je Raspberry Pi.



Kodiranje HTML je dostopen in preprost prehod za razumevanje programiranja in razvoja. Nenehno morate preizkušati svojo kodo HTML-kaj je boljšega od rezultatov v živo v oknu brskalnika?

Poglejmo nekaj najboljših spletnih urejevalnikov HTML, ki so trenutno na voljo.



1. CodePen

CodePen je 'okolje za družbeni razvoj' za spletne razvijalce, kar v bistvu pomeni spletni urejevalnik s funkcijami sodelovanja. Ponuja preprosto postavitev. Našli boste ploščo za HTML, ploščo za CSS in ploščo za JavaScript ter eno za predogled v realnem času. Vse velikosti plošč lahko prilagodite tako, da povlečete robove.

Ustvarite lahko 'pisala', ki so kot posamezna igrišča za spreminjanje spletne kode. Več peresa lahko združite v zbirke.



Medtem ko je prijava za osnovno uporabo brezplačna, zasebna peresa in zbirke zahtevajo Pro račun . Ta se začne pri 8 USD/mesec in vključuje gostovanje sredstev, vdelane teme, sodelovanje v realnem času in dostop do celotne programske opreme IDE CodePen.

Mnogi menijo, da je CodePen najboljši spletni urejevalnik HTML. Preizkusite in preverite, ali ustreza vašim potrebam.

2. JSFiddle

JSFiddle je približno tako, kot se sliši: peskovnik, kjer se lahko poigravate po JavaScriptu. Verjetno veste, da JavaScript hodi z roko v roki s HTML in CSS. To pomeni, da lahko z JSFiddle urejate vse tri hkrati z vmesnikom za urejanje JSFiddle.

Če želite, lahko JavaScript v celoti preskočite.

Pri JSFiddle je lepo, da lahko v stransko vrstico dodate zunanje zahteve. To vam omogoča, da vključite datoteke JavaScript in CSS zunaj spletnega mesta za izboljšanje HTML-ja. Uporaben je tudi gumb Tidy, ki samodejno počisti vdolbino vaše kode, medtem ko s klikom na Collaborate omogočite spletno sodelovanje v realnem času.

Edina slaba stran je, da morate pritisniti gumb Zaženi, da posodobite ploščo za predogled.

3. JSBin

Upoštevajte JSBin kot enostavnejšo in čistejšo alternativo JSFiddle. Uredite lahko katero koli kombinacijo HTML, CSS in JavaScript, tako da plošče preklopite z zgornjo orodno vrstico. Za največjo prilagodljivost lahko po potrebi preklopite tudi ploščo za predogled in ploščo konzole.

mape ni mogoče izbrisati, ker je odprta v drugem programu

Medtem ko JSFiddle omogoča povezavo zunanjih virov CSS in JavaScript, vas JSBin omejuje na vnaprej določene knjižnice JavaScript. Izbira je dobra, od jQuery do React do Angular in še več.

Čeprav je JSBin brezplačen in ne potrebuje računa, boste potrebovali Pro račun za napredne funkcije. Ti vključujejo zasebne koše, vdelane po meri, gostovanje sredstev, sinhronizacijo Dropbox in nečimrne URL -je za strani, objavljene prek JSBin.

Štiri. Liveweave

Liveweave je vizualno podoben prejšnjim urednikom z prijetnim uporabniškim vmesnikom. Tako kot JSFiddle tudi Liveweave omogoča sodelovanje v realnem času, tako kot JSBin pa vam omogoča tudi povezavo z vnaprej določenimi viri tretjih oseb, kot je jQuery.

Ima pa tudi nekaj edinstvenih lastnosti. Generator ipsum Lorem ustvari besedilo nadomestnega znaka na vašem trenutnem položaju kazalca. Raziskovalec CSS ponuja orodje WYSIWYG za ustvarjanje slogov CSS, raziskovalec barv pa vam pomaga izbrati popolne barve. Medtem vam Vector Editor omogoča ustvarjanje vektorske grafike za vaše spletno mesto.

kako spustim pin

5. HTMLhouse

HTMLhouse je dobra izbira, če vam je mar le za HTML (tj. Brez CSS ali JavaScript). Čist in minimalen, razdeljen navpično z urejanjem na levi in ​​predogledom v realnem času na desni.

Koristna je možnost objave HTML -ja in delitve zasebno (prek zasebnega URL -ja) ali javno (dodano v Stran brskanja HTMLhouse ). Je preprost, a učinkovit, pri čemer pride v poštev in se odlikuje spletni urejevalnik HTML.

Upoštevajte, da so HTMLhouse ustvarili in vzdržujejo ljudje na Pišite , spletno orodje za pisanje brez motenj. Upoštevajte to, če nameravate sami napisati vsebino spletnega mesta.

6. HTMLG

Druga možnost HTMLG sledi istemu vzorcu uporabe podokna za kodo in predogleda za HTML. Vendar to orodje ne vključuje CSS in JavaScript v istem enotnem projektu. Če jih želite urediti, morate odpreti nov zavihek in ga urediti kot ločene projekte.

Zaradi tega je idealen za čiste nastavitve HTML in preskušanje kode v vašem brskalniku; manj, če želite vključiti urejanja CSS.

Upoštevajte, da obstaja omejitev 300 besed, če preizkušate celotne spletne strani s HTMLG. Če želite to povečati, se lahko naročite na premium različico brez oglasov, že od 5,80 USD na mesec.

7. Dabblet

Dabblet ponuja nekoliko drugačen pogled na spletne urejevalnike HTML, zaslon pa razdeli na dva in ne na tri/štiri podokna. Torej imate pogled za HTML & Result in ločen (vendar povezan) pogled za CSS & Result.

To ponuja več prostora in daje jasnejši pogled na kodo in predogled. Poleg tega vgrajen preverjevalnik HTML in CSS w3.org osvetljuje morebitne težave.

Če potrebujete čist prostor na namizju, da preizkusite kodo spletnega mesta, je to morda najboljši urejevalnik HTML za vas.

Uporabite najboljše spletne urejevalnike HTML za izboljšanje svojih veščin

Če ste edino izpostavljeni HTML -ju tisto, kar ste se naučili pred desetletjem, je zdaj čas, da ga nadoknadite. HTML5, izdan leta 2014, je predstavil nekaj novih standardov in funkcij. Niste prepričani, kje začeti? Oglejte si te bistvene nove elemente HTML5.

Želite spoznati dobre prakse pri spletnem oblikovanju in razvoju HTML5? Preverite te spletna mesta s primeri kakovostnega kodiranja HTML . Oglejte si tudi ta druga orodja za nadgradnjo veščin spletnega razvoja.

Deliti Deliti Cvrkutati E-naslov 15 ukazov ukaznega poziva Windows (CMD), ki jih morate poznati

Ukazni poziv je še vedno močno orodje Windows. Tu so najbolj uporabni ukazi CMD, ki jih mora poznati vsak uporabnik sistema Windows.

Preberite Naprej Sorodne teme
  • Programiranje
  • Urejevalnik besedil
  • Spletni razvoj
  • Uredniki WYSIWYG
  • HTML5
  • Skriptiranje
O avtorju Christian Cawley(1510 objavljenih člankov)

Namestnik urednika za varnost, Linux, DIY, programiranje in razlago tehnologije ter resnično uporaben podcast producent, z bogatimi izkušnjami s podporo za namizne računalnike in programsko opremo. Sodelujoč v reviji Linux Format, Christian je mačkar Raspberry Pi, ljubitelj Lega in ljubitelj retro iger.

Več od Christiana Cawleyja

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite