5 bedste gratis online HTML-redaktører til at teste din kode

HTML kører den moderne verden. Sandt nok, hvis du spørger nogen, hvad der skal til for at være en webudvikler, vil de fortælle dig alt om JavaScript-webrammer, Python-webrammer, web-programmeringspraksis Programmering vs. Webudvikling: Hvad er forskellen? Programmering vs. webudvikling: Hvad er forskellen? Du synes måske, at applikationsprogrammører og webudviklere gør det samme job, men det er langt fra sandheden. Her er de vigtigste forskelle mellem programmerere og webudviklere. osv. Ikke desto mindre er HTML det, der holder det hele sammen.

Der er ingen web uden HTML, og du skal vide, hvordan du redigerer den, hvis du vil gøre det nogen slags webarbejde. Men opsætning af en robust HTML-redigering af workflow i Sublime Text 11 Sublime Text-tip til produktivitet og en hurtigere workflow 11 Sublime Text-tip til produktivitet og en hurtigere Workflow Sublime Text er en alsidig teksteditor og en guldstandard for mange programmerere. Vores tip fokuserer på effektiv kodning, men generelle brugere vil sætte pris på tastaturgenveje. eller Visual Studio Code 10 Essential Productivity Tips til Visual Studio Code 10 Essential Productivity Tips til Visual Studio Code Visual Studio Code blæser andre programmeringstekstredaktører ud af vandet. Det er gratis, open source, lynet hurtigt og fyldt med produktivitetsfunktioner. kan være overdreven, hvis du ikke arbejder på et fuldt udbygget projekt.

I perioder, hvor du bare ønsker at fikle med et lille HTML-uddrag, så du kan finjustere det til din smag, online HTML editor vil tjene dig bedre.

Hvorfor bruge en online HTML Editor?

Den bedste ting ved online HTML-redaktører er, at de kører direkte i din webbrowser. Din webbrowser er bedst og mest relevant værktøj til behandling og gengivelse af HTML-kode. Det er trods alt dets formål og grund til at være det.

Hvilket betyder, at din webbrowser er bedst udstyret til forhåndsvisning af HTML i realtid. Når du skriver web-markup i en enkeltstående editor som Notepad eller TextEdit, skal du gemme ændringer i en fil, derefter indlæse filen i din webbrowser, derefter gennemgå den og derefter skifte tilbage til editoren for at få flere ændringer, skyl og gentag. Det er en uhyggelig og besværlig proces.

En online HTML-editor kan dynamisk opdatere sig selv mens du skriver og ændrer markeringen. Det er ikke nødvendigt at vende frem og tilbage mellem vinduer. Du justerer HTML på den ene side, ændringerne sker automatisk på den anden side.

Et par standalone-redaktører kan konfigureres med en slags faux real-time preview, men de er ikke så praktiske. F.eks. Kan Live Preview-funktionen i parentes åbne et separat Chrome-vindue og skubbe HTML-ændringer til browseren, når du gemmer markeringen. Men det kræver stadig, at vinduet vippes, og det tvinger dig til at bruge Chrome.

Online HTML-redaktører er som transportabel som de kommer. Uanset hvilken maskine du er på, kan du få adgang til webredigereren, så længe du har en internetforbindelse. Ingen grund til at installere og konfigurere en enkeltstående editor, som du muligvis ikke bruger igen.

Og du kan se på disse andre værktøjer til opgradering af dine webudviklingsevner Opgrader dine webudviklingsevner med disse 10 væsentlige værktøjer Opgrader dine webudviklingsevner med disse 10 væsentlige værktøjer Klar til at begynde at udvikle websteder? Disse online værktøjer til nye og ekspert webudviklere er garanteret at øge dine evner! også.

Nu er her nogle af de bedste tilgængelige online HTML-redaktører.

1. Codepen

Codepen er en “socialt udviklingsmiljø” for webudviklere, hvilket dybest set betyder, at det er en online editor med delings- og samarbejdsfunktioner. Editoren i sig selv er enkel: et panel til HTML, et panel til CSS og et panel til JavaScript plus et panel til forhåndsvisning af realtid. Alle panelstørrelser kan justeres ved at trække kanterne rundt.

Du kan oprette “penne,” som er som individuelle legepladser til finjustering af webkode. Flere kuglepenne kan grupperes i samlinger. Private kuglepenne og samlinger kræver en Pro-konto, der starter på $ 9 / mo og leveres med andre funktioner: hosting af aktiver, integrerede temaer, realtidssamarbejde og adgang til CodePens fulde webudvikling IDE.

2. JSFiddle

JSFiddle er stort set, hvad det lyder: en sandkasse, hvor du kan fikle med JavaScript. Men i betragtning af hvordan JavaScript går hånd i hånd med HTML og CSS, kan du redigere alle tre med JSFiddles redigeringsgrænseflade - og du kan springe JavaScript helt over.

Det, der er rart med JSFiddle, er, at du kan tilføje eksterne anmodninger i sidebjælken, som giver dig mulighed for at medtage off-site JavaScript og CSS-filer til forbedring af din HTML. Også smuk er knappen Tidy, der automatisk renser din kodes indrykning, og knappen Collaborate, som giver dig mulighed for at arbejde på den samme kode med en anden i realtid.

Den eneste ulempe er, at du skal klikke på knappen Kør for at opdatere preview-panelet.

3. JSBin

JSBin er som et enklere og renere alternativ til JSFiddle. Du kan redigere en hvilken som helst kombination af HTML, CSS og JavaScript bare ved at skifte panelerne med den øverste værktøjslinje, og du kan skifte eksempelpanelet og et konsolpanel for maksimal fleksibilitet.

Mens JSFiddle giver dig mulighed for at linke eksterne CSS- og JavaScript-ressourcer, har JSBin kun foruddefineret JavaScript-biblioteker, som du kan inkludere. Valget er dog godt, lige fra jQuery til React to Angular og mere.

Mens JSBin er gratis og ikke kræver en konto, har du brug for en Pro-konto, hvis du vil have private bins, brugerdefinerede indlejringer, aktiv hosting, Dropbox-synkronisering og forfængeligheds-webadresser til sider, der er offentliggjort via JSBin.

4. Liveweave

Liveweave svarer til den foregående editor ovenfor med en grænseflade, der er mere behageligt for øjet (skønt dine præferencer kan variere). Ligesom JSFiddle giver Liveweave mulighed for realtidssamarbejde, og ligesom JSBin giver det dig mulighed for at linke i foruddefinerede tredjepartsressourcer som jQuery.

Men det har et par unikke funktioner også. Lorem Ipsum Generator opretter pladsholdertekst på din aktuelle markorposition. CSS Explorer giver et WYSIWYG-værktøj til oprettelse af CSS-stilarter. Color Explorer hjælper dig med at vælge de perfekte farver til dit tema. Vector Editor giver dig mulighed for at oprette vektorgrafik til dit websted.

5. HTMLhouse

HTMLhouse er en god mulighed, hvis du kun er interesseret i HTML (dvs. ingen CSS eller JavaScript). Det er ekstremt rent og minimalt, opdelt lodret med redigering til venstre og forhåndsvisning af realtid til højre. En nifty funktion er muligheden for at offentliggøre din HTML og dele den privat (med den medfølgende URL) eller offentligt (den tilføjes til HTMLhouse's Browse-side). Det er enkelt, men effektivt, det er præcist, hvor en online HTML-editor kommer i spil og udmærker sig.

Bemærk, at HTMLhouse blev oprettet og vedligeholdes af folkene på Write.as, et distraktionsfrit online skriveværktøj. Hvis du skriver blogindlæg eller lignende, skal du bruge Write.as i stedet.

Forbedre dine HTML-færdigheder endnu mere

Hvis din eneste eksponering for HTML er, hvad du lærte for et årti siden, er det tid for dig at indhente. HTML5 blev frigivet tilbage i 2014 og introducerede en håndfuld nye standarder og funktioner. Er du ikke sikker på, hvor du skal starte? Tjek disse vigtige nye elementer i HTML5 Hvad er nyt i HTML5? 9 elementer, du skal vide, hvad der er nyt i HTML5? 9 Elementer, du har brug for at kende HTML5 er den seneste version af det mest anvendte markeringssprog på nettet. Hvis du ikke bruger de nyeste funktioner, går du glip af en smule funktionalitet. .

Desuden at lære god praksis inden for HTML5-webdesign og -udvikling, bør du tjekke disse websteder med HTML-kodningseksempler af kvalitet 8 Bedste websteder til HTML-kodningseksempler af kvalitet 8 Bedste websteder til HTML-kodningseksempler af kvalitet Der er nogle fantastiske websteder, der tilbyder veludformede og nyttige HTML-kodningseksempler og selvstudier. Her er otte af vores favoritter. . Og når dit websted startes, kan du overveje at komprimere din HTML-markering, hvordan komprimeret HTML fungerer, og hvorfor du muligvis har brug for det, hvordan komprimeret HTML fungerer, og hvorfor du muligvis har brug for det. I denne artikel skal vi gennemgå de to vigtigste metoder til komprimeret HTML, hvorfor HTML-filer skal krympes, og hvordan man gør det. for bedre hastighed.

Hvad er din foretrukne måde at redigere HTML-markering på? Hvilken hjemmeside arbejder du på lige nu? Del med os ned i kommentarerne nedenfor!