7 nejlepších bezplatných online editorů HTML k otestování vašeho kódu

7 nejlepších bezplatných online editorů HTML k otestování vašeho kódu

Každý web, který používáte, závisí na HTML. Zatímco weboví vývojáři potřebují dovednosti v jazyce JavaScript, Python, CSS a skriptování na straně serveru, HTML drží vše pohromadě.





Bez HTML neexistuje web, takže musíte vědět, jak jej vytvořit a upravit. Namísto nastavení systému pro testování kódu HTML v počítači je jednodušší testovat kód v prohlížeči.



Ať už pracujete s malými úryvky HTML nebo s plnými projekty webových stránek, online editor HTML je ideální.





Proč byste měli používat online HTML editor

Použití editoru HTML založeného na prohlížeči má smysl pro něco jako Notepad ++ z následujících důvodů:

  • Online HTML editory běží přímo ve vašem webovém prohlížeči
  • Otestujte si svůj HTML kód online --- podívejte se, jestli kód běží podle očekávání
  • Podívejte se na webové náhledy v reálném čase --- náhledy se při úpravách aktualizují
  • Zefektivněte svůj pracovní postup-již žádné ukládání, načítání v prohlížeči, přepínání zpět do editoru a opakování
  • Agnostik platformy --- běží na jakémkoli zařízení s webovým připojením.

Tento poslední bod je velmi důležitý. To znamená, že si můžete webovou stránku myslitelně vytvořit stejně snadno na počítači jako na Chromebooku. Můžete dokonce použít tablet Android nebo počítač za 50 dolarů, jako je Raspberry Pi.



Kódování HTML je přístupná a přímá brána k porozumění programování a vývoji. Neustále potřebujete testovat svůj HTML kód --- co je lepší než živé výsledky v okně prohlížeče?

Podívejme se na některé z nejlepších online editorů HTML, které jsou v současné době k dispozici.



1. CodePen

CodePen je „prostředí pro sociální rozvoj“ pro webové vývojáře, což v zásadě znamená, že je to online editor s funkcemi pro spolupráci. Nabízí jednoduché rozložení. Najdete zde panel pro HTML, panel pro CSS a panel pro JavaScript, plus jeden pro náhled v reálném čase. Všechny velikosti panelů lze upravit tažením za okraje.

Můžete vytvořit „pera“, která jsou jako jednotlivá hřiště pro vyladění webového kódu. Několik per lze seskupit do sbírek.



Zatímco registrace pro základní použití je zdarma, soukromé pera a sbírky vyžadují a Pro účet . Začíná to na 8 USD/měsíc a zahrnuje hostování aktiv, vložitelná témata, spolupráci v reálném čase a přístup k plnému IDE pro vývoj webových aplikací CodePen.

Mnoho lidí považuje CodePen za nejlepší online editor HTML. Vyzkoušejte, zda vyhovuje vašim potřebám.

2. JSFiddle

JSFiddle je téměř to, co to zní: sandbox, kde si můžete hrát s JavaScriptem. Asi víte, že JavaScript jde ruku v ruce s HTML a CSS. To znamená, že pomocí JSFiddle můžete upravovat všechny tři najednou pomocí editačního rozhraní JSFiddle.

Pokud chcete, můžete JavaScript zcela přeskočit.

Na JSFiddle je hezké, že do postranního panelu můžete přidat externí požadavky. To vám umožní zahrnout soubory JavaScript a CSS mimo web pro vylepšení HTML. Užitečné je také tlačítko Úhledné, které automaticky vyčistí odsazení kódu, zatímco kliknutí na Spolupracovat umožní online spolupráci v reálném čase.

Jedinou nevýhodou je, že k aktualizaci panelu náhledu musíte kliknout na tlačítko Spustit.

3. JSBin

Zvažte JSBin jako jednodušší a čistší alternativu k JSFiddle. Libovolnou kombinaci HTML, CSS a JavaScript můžete upravit pouhým přepínáním panelů pomocí horního panelu nástrojů. Pro maximální flexibilitu můžete také podle potřeby přepínat panel náhledu a panel konzoly.

jak zmenšit soubory jpeg

Ale zatímco JSFiddle vám umožňuje propojit externí zdroje CSS a JavaScript, JSBin vás omezuje na předdefinované knihovny JavaScript. Výběr je však dobrý, od jQuery po React po Angular a další.

Zatímco JSBin je zdarma a nevyžaduje účet, budete potřebovat Pro účet pro pokročilé funkce. Patří sem soukromé koše, vlastní vložky, hostování aktiv, synchronizace Dropboxu a marné adresy URL pro stránky publikované prostřednictvím JSBin.

Čtyři. Živá vazba

Liveweave je vizuálně podobný předchozím editorům s příjemným uživatelským rozhraním. Stejně jako JSFiddle umožňuje Liveweave spolupráci v reálném čase a jako JSBin vám umožňuje propojit předdefinované zdroje třetích stran, jako je jQuery.

Má však také několik unikátních funkcí. Lorem Ipsum Generator vytváří zástupný text na vaší aktuální pozici kurzoru. CSS Explorer poskytuje nástroj WYSIWYG pro vytváření stylů CSS a Color Explorer vám pomůže vybrat dokonalé barvy. Mezitím vám vektorový editor umožňuje vytvářet pro váš web vektorovou grafiku.

nevidím soubory android na PC

5. HTMLhouse

HTMLhouse je dobrá volba, pokud vás zajímá pouze HTML (tj. Žádný CSS nebo JavaScript). Čistý a minimální, je rozdělen vertikálně s úpravami vlevo a náhledem v reálném čase vpravo.

Užitečná je možnost publikovat váš HTML a sdílet jej soukromě (prostřednictvím soukromé adresy URL) nebo veřejně (přidáno do Stránka Procházení HTMLhouse ). Je to jednoduché, ale efektivní, což je místo, kde online HTML editor vstupuje do hry a vyniká.

Všimněte si, že HTMLhouse byl vytvořen a je udržován lidmi na Napište , online nástroj pro psaní, který nerozptyluje pozornost. Mějte to na paměti, pokud plánujete napsat vlastní obsah webu.

6. HTMLG

Další možnost HTMLG sleduje stejný vzorec používání podoken kódu a náhledu pro HTML. Tento nástroj však neobsahuje CSS a JavaScript v rámci stejného unifikovaného projektu. Pokud je chcete upravit, budete muset otevřít novou kartu a upravit je jako samostatné projekty.

Díky tomu je ideální pro vylepšení HTML a testování kódu ve vašem prohlížeči; méně, pokud chcete začlenit úpravy CSS.

Pokud testujete úplné webové stránky pomocí HTMLG, existuje limit 300 slov. Chcete-li to zvýšit, můžete se přihlásit k prémiové verzi bez reklam, a to již od 5,80 $ měsíčně.

7. Dabblet

Dabblet nabízí mírně odlišný pohled na online editory HTML a rozděluje obrazovku na dvě, nikoli na tři/čtyři podokna. Máte tedy zobrazení pro HTML & Result a samostatné (ale propojené) zobrazení pro CSS & Result.

To nabízí více místa a poskytuje jasnější pohled na kód a náhled. Vestavěný validátor HTML a CSS w3.org upozorňuje na jakékoli problémy.

Pokud potřebujete k otestování kódu svého webu čistý prostor na ploše, může to být pro vás nejlepší editor HTML.

Zlepšete své dovednosti pomocí nejlepších online editorů HTML

Pokud je vaše jediná expozice HTML, co jste se naučili před deseti lety, nyní je čas to dohnat. HTML5 vydaný v roce 2014 a představil několik nových standardů a funkcí. Nejste si jisti, kde začít? Podívejte se na tyto základní nové prvky HTML5.

Chcete se naučit osvědčené postupy při návrhu a vývoji webů HTML5? Zkontrolujte tyto webové stránky s kvalitními příklady kódování HTML . Měli byste se také podívat na tyto další nástroje pro upgrade vašich dovedností pro vývoj webových aplikací.

Podíl Podíl tweet E-mailem 15 Příkazy příkazového řádku systému Windows (CMD), které musíte znát

Příkazový řádek je stále výkonným nástrojem systému Windows. Zde jsou nejužitečnější příkazy CMD, které každý uživatel Windows potřebuje znát.

Číst dále Související témata
  • Programování
  • Textový editor
  • Vývoj webu
  • Editory WYSIWYG
  • HTML5
  • Skriptování
O autorovi Christian Cawley(1510 článků zveřejněno)

Zástupce redaktora pro oblast bezpečnosti, Linuxu, kutilství, programování a techniky a skutečně užitečného výrobce podcastů s rozsáhlými zkušenostmi s podporou desktopů a softwaru. Christian, který přispívá do časopisu Linux Format, je drotář Raspberry Pi, milovník Lega a fanoušek retro her.

Více od Christiana Cawleyho

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru