HTML Editor: Code & Preview

Zamień pomysł na stronę internetową w działającą stronę dzięki Edytorowi HTML. Twórz kod HTML z osadzonym CSS i JavaScript, wyświetl podgląd rezultatu i skorzystaj z krótkich lekcji, aby zrozumieć kod, który zmieniasz. To praktyczne miejsce pracy dla studentów, początkujących i programistów eksperymentujących z małymi stronami internetowymi na urządzeniach mobilnych.

NAPISZ I SPRAWDŹ SWÓJ KOD

Pracuj w edytorze kodu z podświetlaniem składni, dopasowywaniem nawiasów, automatycznym zamykaniem oraz funkcjami cofania i ponawiania. Wyświetlaj numery wierszy, znajduj tekst lub przechodź do wiersza, gdy fragment kodu się rozrośnie. Dodatkowy pasek narzędzi symboli zapewnia łatwy dostęp do popularnych znaków kodowania, dzięki czemu wprowadzanie tagów i wyrażeń wymaga mniej przełączania się między układami klawiatury.

Przechodź między kartami Kod, Wyjście i Konsola. Widok Wyjście renderuje dokument w aplikacji, w tym jego style i skrypty. Korzystaj z automatycznego odświeżania podglądu podczas edycji lub wyłącz tę funkcję, jeśli wolisz kontrolować aktualizację wyniku. Komunikaty konsoli pomagają Ci kontrolować działanie kodu JavaScript na Twojej stronie.

POZNAJ RÓŻNE SZEROKOŚCI PODGLĄDU

Wybierz tryby podglądu na telefonie, tablecie lub komputerze, aby sprawdzić, jak układ zachowuje się w różnych szerokościach. Są to widoki w aplikacji, przydatne do sprawdzania odstępów i układu podczas pracy nad responsywnym projektem. Wypróbuj nagłówek, dostosuj regułę stylu, a następnie wróć do wyników, aby zobaczyć efekt.

POZNAJ KONCEPCJĘ, A NASTĘPNIE JĄ PRZEPRAKTYKUJ

Tryb nauki łączy tematy związane z HTML, CSS i JavaScript. Filtruj według tematu lub wyszukaj pojęcie zamiast czytać wszystko po kolei. Każda lekcja zawiera wyjaśnienie, krótką wskazówkę, praktyczne zastosowania, typowe pułapki, przykład i przewodnik po kodzie.

Poświęć lekcję na dwa krótkie zadania z kodowania. Najpierw przywróć przykład, a następnie napisz nowy fragment kodu, korzystając z tej koncepcji. Sprawdź swoją odpowiedź, przeczytaj opinię i zresetuj starter, gdy będziesz chciał spróbować ponownie. Drugie zadanie odblokowuje się po ukończeniu pierwszego. Postępy w czytaniu i ćwiczeniu są rejestrowane lokalnie, dzięki czemu możesz wrócić do rozpoczętych tematów.

ZACHOWAJ I UDOSTĘPNIJ SWOJĄ PRACĘ

Utwórz dokument, otwórz zapisany plik HTML lub użyj opcji Zapisz i Zapisz jako, aby zachować swoją pracę jako plik HTML. Udostępnij plik, gdy chcesz wysłać sam dokument. W przypadku przekazania online wygeneruj kod transferu lub link do udostępniania i użyj towarzyszącego edytora internetowego, aby kontynuować pracę z fragmentem kodu. Transfer online wysyła bieżący kod do usługi i wymaga połączenia z internetem.

ZAPEWNIJ KOMFORT PRZESTRZENI ROBOCZEJ

Wybierz jasny, ciemny lub systemowy wygląd i dostosuj rozmiar czcionki edytora. Ustawienia pozwalają kontrolować numery wierszy, tryb ułatwień dostępu, automatyczne zapisywanie, tworzenie kopii zapasowej przy wyjściu i przywracanie sesji. Wersje robocze i kopie przestrzeni roboczej to lokalne dane aplikacji; zapisuj ważne prace jako pliki, zamiast traktować sesję lokalną jako stałą kopię zapasową.

Strona Dane i prywatność umożliwia przeglądanie ustawień, czyszczenie tymczasowych danych edytora lub resetowanie lokalnych danych aplikacji. Centrum nagród oferuje również opcjonalne codzienne nagrody i działania związane z monetami opartymi na reklamach. Monety nagród to przedmioty w aplikacji, a nie gotówka.

Edycja samodzielnych stron i czytanie pakietów lekcji nie wymaga usługi online. Zdalne obrazy, zewnętrzne skrypty, transfery online i reklamy wymagają łączności. Użyj Edytora HTML, aby przeczytać koncepcję, wypróbować zmianę, sprawdzić wynik i zachować kod, na którym chcesz budować.