7 najlepších bezplatných online editorov HTML na testovanie kódu

7 najlepších bezplatných online editorov HTML na testovanie kódu

Každý web, ktorý použijete, závisí od HTML. Aj keď weboví vývojári potrebujú znalosti JavaScriptu, Pythonu, CSS a skriptovania na strane servera, HTML to všetko drží pohromade.





Bez HTML neexistuje web, takže ho musíte vedieť vytvoriť a upraviť. Namiesto nastavenia systému testovania kódu HTML v počítači je jednoduchšie testovať kód v prehliadači.



Či už hráte s malými úryvkami HTML alebo s úplnými projektmi webových stránok, online editor HTML je ideálny.





Prečo by ste mali používať online editor HTML

Používanie editora HTML založeného na prehliadači má zmysel pri niečom ako Notepad ++ z nasledujúcich dôvodov:

  • Online HTML editory bežia priamo vo vašom webovom prehliadači
  • Otestujte si svoj HTML kód online-zistíte, či kód beží podľa očakávania
  • Zobrazte webové ukážky v reálnom čase --- ukážky sa aktualizujú počas úprav
  • Zefektívnite svoj pracovný postup-už žiadne ukladanie, načítavanie v prehliadači, prepínanie späť do editora a postup opakujte
  • Agnostik platformy --- bežia na akomkoľvek zariadení s webovým pripojením.

Tento posledný bod je veľmi dôležitý. Znamená to, že webovú stránku je možné vytvoriť na počítači rovnako ľahko ako na Chromebooku. Môžete dokonca použiť tablet Android alebo počítač za 50 dolárov, ako je Raspberry Pi.



Kódovanie HTML je prístupnou a priamou bránou k porozumeniu programovania a vývoja. Neustále musíte testovať svoj HTML kód --- čo je lepšie ako živé výsledky v okne prehliadača?

Pozrime sa na niektoré z najlepších online editorov HTML, ktoré sú v súčasnosti k dispozícii.



1. CodePen

CodePen je „prostredie sociálneho rozvoja“ pre webových vývojárov, čo v zásade znamená, že je to online editor s funkciami spolupráce. Ponúka jednoduché rozloženie. Nájdete tu panel pre HTML, panel pre CSS a panel pre JavaScript a jeden pre náhľad v reálnom čase. Všetky veľkosti panelov je možné nastaviť ťahaním za okraje.

Môžete vytvoriť „perá“, ktoré sú ako jednotlivé ihriská na úpravu webového kódu. Viaceré perá je možné zoskupiť do zbierok.



Kým registrácia na základné použitie je bezplatná, súkromné ​​perá a zbierky vyžadujú a Profi účet . Začína sa to od 8 dolárov mesačne a zahŕňa hostenie aktív, vložiteľné témy, spoluprácu v reálnom čase a prístup k úplnému vývojovému prostrediu IDE CodePen.

Mnoho ľudí považuje CodePen za najlepší online editor HTML. Vyskúšajte, či vyhovuje vašim potrebám.

2. JSFiddle

JSFiddle je do značnej miery to, čo znie: pieskovisko, kde si môžete pohrávať s jazykom JavaScript. Asi viete, že JavaScript ide ruka v ruke s HTML a CSS. To znamená, že pomocou JSFiddle môžete upravovať všetky tri naraz v editovacom rozhraní JSFiddle.

Ak chcete, JavaScript môžete úplne preskočiť.

Na JSFiddle je pekné, že na bočný panel môžete pridať externé požiadavky. To vám umožní zahrnúť súbory JavaScript a CSS mimo servera na vylepšenie kódu HTML. Užitočné je aj tlačidlo Upratať, ktoré automaticky vyčistí odsadenie kódu, pričom kliknutím na položku Spolupracovať umožníte online spoluprácu v reálnom čase.

Jedinou nevýhodou je, že na aktualizáciu panelu náhľadu musíte kliknúť na tlačidlo Spustiť.

3. JSBin

Považujte JSBin za jednoduchšiu a čistejšiu alternatívu k JSFiddle. Ľubovoľnú kombináciu HTML, CSS a JavaScript môžete upravovať prepínaním panelov pomocou horného panela s nástrojmi. Pre maximálnu flexibilitu môžete podľa potreby prepínať aj panel náhľadu a panel konzoly.

Windows 10 nemôže otvoriť centrum akcií

Ale zatiaľ čo JSFiddle vám umožňuje prepojiť externé zdroje CSS a JavaScript, JSBin vás obmedzuje na preddefinované knižnice JavaScript. Výber je však dobrý, od jQuery po React až po Angular a ďalšie.

Aj keď je JSBin bezplatný a nevyžaduje účet, budete potrebovať Profi účet pre pokročilé funkcie. Patria sem súkromné ​​priečinky, vlastné vložené súbory, hostiteľ aktív, synchronizácia Dropboxu a jednoduché adresy URL pre stránky publikované prostredníctvom JSBin.

Štyri. Živá väzba

Liveweave je vizuálne podobný predchádzajúcim editorom s príjemným používateľským rozhraním. Rovnako ako JSFiddle, Liveweave umožňuje spoluprácu v reálnom čase a podobne ako JSBin vám umožňuje prepojenie s preddefinovanými zdrojmi tretích strán, ako je jQuery.

Má však aj niekoľko unikátnych funkcií. Lorem Ipsum Generator vytvára zástupný text na vašej aktuálnej pozícii kurzora. CSS Explorer poskytuje nástroj WYSIWYG na vytváranie štýlov CSS a Color Explorer vám pomôže vybrať perfektné farby. Vektorový editor vám medzitým umožňuje vytvárať vektorovú grafiku pre vaše stránky.

ako zistiť, kto si zobrazil váš odkaz

5. HTMLhouse

HTMLhouse je dobrá voľba, ak vám záleží iba na HTML (t. J. Nie na CSS alebo JavaScript). Čistý a minimálny, je rozdelený vertikálne s úpravami vľavo a náhľadom v reálnom čase vpravo.

Užitočná je možnosť publikovať svoj HTML a zdieľať ho súkromne (prostredníctvom súkromnej adresy URL) alebo verejne (pridané do Stránka prezerania v HTMLhouse ). Je to jednoduché, ale efektívne, a to je presne to, kde online HTML editor vstupuje do hry a vyniká.

Všimnite si toho, že HTMLhouse bol vytvorený a je udržiavaný ľuďmi na Napíšte , online nástroj na písanie bez rušenia. Majte to na pamäti, ak plánujete napísať obsah svojej vlastnej stránky.

6. HTMLG

Ďalšia možnosť, HTMLG, používa rovnaký vzorec používania panelov kódu a náhľadu pre HTML. Tento nástroj však neobsahuje CSS a JavaScript v rámci rovnakého zjednoteného projektu. Ak ich chcete skôr upraviť, budete musieť otvoriť novú kartu a upraviť ich ako samostatné projekty.

Vďaka tomu je ideálny pre čisté úpravy HTML a testovanie kódu vo vašom prehliadači; tým menej, ak chcete začleniť úpravy CSS.

Ak testujete úplné webové stránky vo formáte HTMLG, existuje limit 300 slov. Aby ste to zvýšili, môžete sa prihlásiť k prémiovej verzii bez reklám, a to už od 5,80 dolára mesačne.

7. Dabblet

Dabblet ponúka trochu iný pohľad na online editory HTML a rozdeľuje obrazovku na dve, nie na tri/štyri tably. Máte teda zobrazenie pre HTML a výsledok a samostatné (ale prepojené) zobrazenie pre CSS a výsledok.

To ponúka viac miesta a poskytuje jasnejší pohľad na kód a náhľad. Vstavaný validátor HTML a CSS w3.org upozorňuje na všetky problémy.

Ak na testovanie kódu svojej stránky potrebujete čistý priestor na pracovnej ploche, môže to byť pre vás najlepší editor HTML.

Využite najlepšie online editory HTML na zlepšenie svojich schopností

Ak je vašou jedinou expozíciou HTML to, čo ste sa naučili pred desaťročím, teraz je čas to dohnať. HTML5 vydaný v roku 2014 predstavil niekoľko nových štandardov a funkcií. Nie ste si istí, kde začať? Pozrite sa na tieto nové základné prvky HTML5.

Chcete sa naučiť osvedčené postupy pri navrhovaní a vývoji webových stránok HTML5? Skontrolujte tieto webové stránky s kvalitnými príkladmi kódovania HTML . Mali by ste sa tiež pozrieť na tieto ďalšie nástroje na vylepšenie vašich schopností v oblasti webového vývoja.

zdieľam zdieľam Tweet E -mail 15 Príkazy príkazového riadka systému Windows (CMD), ktoré musíte vedieť

Príkazový riadok je stále výkonným nástrojom systému Windows. Tu sú najužitočnejšie príkazy CMD, ktoré potrebuje vedieť každý používateľ systému Windows.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Textový editor
  • Vývoj webových aplikácií
  • Editory WYSIWYG
  • HTML5
  • Skriptovanie
O autorovi Christian Cawley(1510 publikovaných článkov)

Zástupca redaktora pre bezpečnosť, Linux, DIY, programovanie a techniku ​​a skutočne užitočného producenta podcastov s rozsiahlymi skúsenosťami s podporou počítačov a softvéru. Christian, prispievateľ do časopisu Linux Format, je drotár Raspberry Pi, milovník Lega a fanúšik retro hier.

Viac od Christiana Cawleyho

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber