Home-theater-designers
Każda witryna, z której korzystasz, opiera się na HTML. Podczas gdy twórcy stron internetowych potrzebują umiejętności w zakresie JavaScript, Python, CSS i skryptów po stronie serwera, HTML trzyma to wszystko razem.
Bez HTML nie ma sieci, więc musisz wiedzieć, jak ją tworzyć i edytować. Zamiast konfigurować system testowania kodu HTML na komputerze, łatwiej jest przetestować kod w przeglądarce.
Niezależnie od tego, czy bawisz się małymi fragmentami kodu HTML, czy pełnymi projektami witryn internetowych, edytor HTML online jest idealny.
Dlaczego powinieneś używać internetowego edytora HTML
Korzystanie z edytora HTML opartego na przeglądarce ma sens w porównaniu z czymś takim jak Notepad ++ z następujących powodów:
- Edytory HTML online działają bezpośrednio w Twojej przeglądarce internetowej
- Przetestuj swój kod HTML online --- sprawdź, czy kod działa zgodnie z oczekiwaniami
- Zobacz podgląd w sieci w czasie rzeczywistym --- aktualizacje podglądu podczas edycji
- Usprawnij przepływ pracy — koniec z zapisywaniem, ładowaniem w przeglądarce, przełączaniem z powrotem do edytora i powtarzaniem
- Niezależne od platformy — działają na dowolnym urządzeniu z połączeniem internetowym.
Ten ostatni punkt jest bardzo ważny. Oznacza to, że możesz stworzyć stronę internetową na komputerze tak łatwo, jak na Chromebooku. Możesz nawet użyć tabletu z Androidem lub komputera za 50 USD, takiego jak Raspberry Pi.
Kodowanie HTML to przystępna, prosta droga do zrozumienia programowania i rozwoju. Ciągle musisz testować swój kod HTML – czy jest coś lepszego niż wyniki na żywo w oknie przeglądarki?
Przyjrzyjmy się niektórym z najlepszych dostępnych obecnie edytorów HTML online.
1. CodePen
CodePen to „społeczne środowisko programistyczne” dla twórców stron internetowych, co w zasadzie oznacza, że jest to edytor online z funkcjami współpracy. Oferuje prosty układ. Znajdziesz panel HTML, panel CSS i panel JavaScript oraz jeden do podglądu w czasie rzeczywistym. Wszystkie rozmiary paneli można regulować, przeciągając krawędzie.
Możesz tworzyć „Pióra”, które są jak indywidualne place zabaw do ulepszania kodu internetowego. Wiele pisaków można zgrupować w kolekcje.
Podczas gdy rejestracja do podstawowego użytku jest bezpłatna, prywatne pióra i kolekcje wymagają Konto Pro . Zaczyna się od 8 USD miesięcznie i obejmuje hosting zasobów, motywy do osadzania, współpracę w czasie rzeczywistym i dostęp do pełnego środowiska IDE CodePen do tworzenia stron internetowych.
Wiele osób uważa CodePen za najlepszy internetowy edytor HTML. Wypróbuj, aby sprawdzić, czy odpowiada Twoim potrzebom.
2. JSFiddle
JSFiddle jest właściwie tym, na co wygląda: piaskownicą, w której można bawić się JavaScriptem. Zapewne wiesz, że JavaScript idzie w parze z HTML i CSS. Oznacza to, że za pomocą JSFiddle możesz edytować wszystkie trzy naraz za pomocą interfejsu edycji JSFiddle.
Jeśli chcesz, możesz całkowicie pominąć JavaScript.
Zaletą JSFiddle jest to, że możesz dodawać żądania zewnętrzne na pasku bocznym. Dzięki temu możesz dołączyć pliki JavaScript i CSS spoza witryny w celu ulepszenia kodu HTML. Przydatny jest również przycisk Uporządkuj, który automatycznie czyści wcięcia kodu, a kliknięcie Współpracuj umożliwia współpracę online w czasie rzeczywistym.
Jedynym minusem jest to, że musisz kliknąć przycisk Uruchom, aby zaktualizować panel podglądu.
3. JSBin
Rozważ JSBin jako prostszą i czystszą alternatywę dla JSFiddle. Możesz edytować dowolną kombinację HTML, CSS i JavaScript, przełączając panele za pomocą górnego paska narzędzi. Aby uzyskać maksymalną elastyczność, możesz również przełączać panel podglądu i panel konsoli zgodnie z wymaganiami.
jak znaleźć zmienną w programie Excel
Ale podczas gdy JSFiddle umożliwia łączenie zewnętrznych zasobów CSS i JavaScript, JSBin ogranicza Cię do predefiniowanych bibliotek JavaScript. Wybór jest jednak dobry, od jQuery przez React do Angulara i nie tylko.
Chociaż JSBin jest darmowy i nie wymaga konta, będziesz potrzebować Konto Pro dla zaawansowanych funkcji. Należą do nich prywatne pojemniki, niestandardowe elementy do umieszczenia na stronie, hosting zasobów, synchronizacja Dropbox i niestandardowe adresy URL stron publikowanych za pośrednictwem JSBin.
Cztery. Żywy splot
Liveweave jest wizualnie podobny do poprzednich edytorów, z przyjemnym interfejsem użytkownika. Podobnie jak JSFiddle, Liveweave umożliwia współpracę w czasie rzeczywistym i podobnie jak JSBin umożliwia łączenie się z predefiniowanymi zasobami stron trzecich, takimi jak jQuery.
Ale ma też kilka unikalnych funkcji. Lorem Ipsum Generator tworzy tekst zastępczy w bieżącej pozycji kursora. Eksplorator CSS zapewnia narzędzie WYSIWYG do tworzenia stylów CSS, a Eksplorator kolorów pomaga wybrać idealne kolory. Tymczasem Edytor Wektorów umożliwia tworzenie grafiki wektorowej dla Twojej witryny.
kto może zobaczyć mój dysk Google?
5. HTMLhouse
HTMLhouse to dobra opcja, jeśli zależy Ci tylko na HTML (czyli bez CSS lub JavaScript). Czysty i minimalistyczny, podzielony w pionie z możliwością edycji po lewej i podglądem w czasie rzeczywistym po prawej stronie.
Przydatna jest możliwość publikowania kodu HTML i udostępniania go prywatnie (za pośrednictwem prywatnego adresu URL) lub publicznie (dodana do Strona przeglądania HTMLhouse ). Jest prosty, ale skuteczny, czyli dokładnie tam, gdzie w grę wchodzi internetowy edytor HTML.
Zauważ, że HTMLhouse został stworzony i jest utrzymywany przez ludzi z Napisz.jako , narzędzie do pisania online, które nie rozprasza uwagi. Pamiętaj o tym, jeśli planujesz pisać własną treść witryny.
6. HTMLG
Inna opcja HTMLG jest zgodna z tym samym wzorcem używania paneli kodu i podglądu dla HTML. Jednak to narzędzie nie obejmuje CSS i JavaScript w tym samym ujednoliconym projekcie. Jeśli chcesz je edytować, musisz otworzyć nową kartę i edytować je jako osobne projekty.
Dzięki temu idealnie nadaje się do czystych poprawek HTML i testowania kodu w przeglądarce; mniej, jeśli chcesz włączyć edycje CSS.
Pamiętaj, że jeśli testujesz pełne strony internetowe za pomocą HTMLG, obowiązuje limit 300 słów. Aby to zwiększyć, możesz zarejestrować się w wersji premium bez reklam, już od 5,80 USD miesięcznie.
7. Dabblet
Oferując nieco inne podejście do edytorów HTML online, Dabblet dzieli ekran na dwa, a nie trzy/cztery panele. Masz więc widok HTML i wyników oraz osobny (ale połączony) widok CSS i wyników.
Zapewnia to więcej miejsca, dając wyraźniejszy widok kodu i podglądu. Co więcej, wbudowany walidator HTML i CSS w w3.org podkreśla wszelkie problemy.
Jeśli potrzebujesz wolnego miejsca na pulpicie, aby przetestować kod witryny, może to być najlepszy edytor HTML dla Ciebie.
Skorzystaj z najlepszych internetowych edytorów HTML, aby poprawić swoje umiejętności
Jeśli jedyną ekspozycją na HTML jest to, czego nauczyłeś się dziesięć lat temu, teraz nadszedł czas, aby nadrobić zaległości. HTML5 wydany w 2014 roku wprowadził kilka nowych standardów i funkcji. Nie wiesz, od czego zacząć? Zapoznaj się z tymi podstawowymi nowymi elementami HTML5 .
Chcesz poznać dobre praktyki w projektowaniu i tworzeniu stron internetowych HTML5? Sprawdź te strony internetowe z wysokiej jakości przykładami kodowania HTML . Powinieneś także przyjrzeć się tym innym narzędziom, które pomogą Ci podnieść swoje umiejętności w zakresie tworzenia stron internetowych.
Udział Udział Ćwierkać E-mail 15 poleceń wiersza polecenia systemu Windows (CMD), które musisz znaćWiersz poleceń jest nadal potężnym narzędziem systemu Windows. Oto najbardziej przydatne polecenia CMD, które każdy użytkownik systemu Windows musi znać.
Czytaj dalej Powiązane tematy- Programowanie
- Edytor tekstu
- Tworzenie stron internetowych
- Redaktorzy WYSIWYG
- HTML5
- Skrypty
Zastępca redaktora działu Security, Linux, DIY, Programming i Tech Explained oraz Really Useful Producent podcastów, z dużym doświadczeniem w obsłudze komputerów i oprogramowania. Christian jest współtwórcą magazynu Linux Format, majsterkowiczem Raspberry Pi, miłośnikiem Lego i fanem gier retro.
Więcej od Christiana CawleyaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować