Realtime HTML-editor

Van drie brontabbladen naar één browserdocument

Syntaxkleuren, regelnummers, haakjesparen, invouwen en aanvullen helpen een klein bestand lezen zonder werking te bewijzen. Actief bestand kopiëren neemt één tabblad; volledige HTML kopiëren stelt alles samen. Lokale import accepteert bestanden binnen 2 MiB. Naburige afbeeldingen hebben nog bereikbare adressen nodig: HTML importeren haalt niet de hele map op.

HTML bepaalt structuur, CSS presentatie en JavaScript gewoon browsergedrag. Een fragment zoals <main><h1>Notities</h1></main> krijgt een documentomhulsel. Een volledig HTML-bestand behoudt head en body; tabblad-CSS wordt in head toegevoegd en JavaScript tegen het einde van body. Bestaande ingesloten stijlen en scripts blijven in de import. Dezelfde code nog eens in een ander tabblad zetten kan gedrag verdubbelen.

Bewerken, bekijken en testen zijn verschillende stappen. Schrijf of formatteer de bron, beoordeel het uiterlijk en probeer daarna een interactie met diagnostische aanwijzingen. Uitvoeren gebruikt het huidige concept. Zonder automatisch uitvoeren kan de preview tijdens wijzigingen nog een vorige versie tonen. Automatisch uitvoeren past bij vertrouwde CSS-proeven; handmatig starten bij een onvolledige handler of neveneffect. Formatteren betreft het actieve tabblad en verbetert leesbaarheid, niet juistheid.

Kies een sjabloon vanwege het benodigde patroon. Blank HTML5 en Semantic Article helpen met documentstructuur; Responsive Landing, CSS Grid Dashboard en Flexbox Pricing isoleren indelingen. Interactive Card en JavaScript Counter tonen events. CSS Animation bevat een regel voor minder beweging. Accessible Form verbindt labels met statusfeedback. Het zijn startvoorbeelden, geen kwaliteitscertificaten na bewerking.

Responsieve breedte en previewzoom uit elkaar houden

Passend volgt het paneel; vaste modi gebruiken 390, 768 en 1280 CSS-pixels. Dat zijn indelingsbreedten, geen nagebootste telefoonmodellen. Zoom verandert de zichtbare grootte in de werkruimte. Het helpt een brede pagina bekijken, maar verkleinen bewijst niet dat de inhoud in een smalle viewport past. Begin bij 100%, vergelijk de modi en test eigen breekpunten met browsergereedschap.

Een regel op 720 pixels kan drie kolommen bij 768 en één bij 390 tonen zonder een fout op 721 te vinden. Test lange koppen, een lege toestand en validatiemeldingen, niet alleen het nette sjabloon. Een kindelement met vaste breedte, een onbreekbare URL of veel binnenruimte kan overlopen ondanks een responsief raster. Verwijder één beperking tegelijk en voer opnieuw uit.

Een breedtevergelijking beantwoordt een indelingsvraag. Hij test geen aanraking, schermtoetsenbord, pixeldichtheid, apparaatprestaties of andere browserengine. Controleer de export ook met toetsenbord, grotere tekst en echte apparaten. Volledig scherm geeft ruimte; een aparte previewtab maakt kijken gemakkelijker. Geen van beide publiceert de pagina.

Een fout volgen met Console en Controles

Bekijk in een volledig document <!doctype html>, taal, UTF-8, responsieve viewport en betekenisvolle titel. Pas de taal aan tekst aan in plaats van Engels uit het sjabloon te houden. Controles markeert ook kopsprongen, ontbrekende knoptypes en inline events. Console wissen verwijdert oude berichten zonder bronwijziging; doe dit voor één gerichte actie.

Reageert een knop niet, controleer dan eerst scripttoestemming en of het huidige concept is uitgevoerd. Zoek de eerste fout na een nieuwe uitvoering. Een querySelector die null teruggeeft wijst vaak op een afwijkende selector of ontbrekend element. Log een kleine waarde bij de falende tak, niet een volledig vertrouwelijk object. De begrensde console verzamelt gewone meldingen, fouten en afgewezen promises; hij is geen breakpointdebugger of volledige uitvoertrace.

Controles bekijkt het samengestelde document op ontbrekende documentgegevens, dubbele IDs, afbeeldingen zonder alt, velden zonder label, naamloze acties en verdachte links. Een fout vraagt om context; een suggestie kan een ontwerpkeuze zijn. alt="" is soms juist voor decoratie, terwijl een informatieve afbeelding een nuttige beschrijving nodig heeft. Meerdere H1-elementen zijn niet automatisch ongeldig omdat één duidelijke hoofdkop wordt aanbevolen.

De W3C-uitleg over formulierlabels beschrijft het belang van een zichtbaar label gekoppeld aan de invoer. Een placeholder die tijdens typen verdwijnt vervangt dat niet. Loop na herstel met Tab door het formulier en bekijk focus en feedback. Deze controles bewijzen geen contrast, leesvolgorde, schermlezerbruikbaarheid of volledige HTML-conformiteit. Vul ze aan met een validator en taakgerichte toegankelijkheidstests.

Controleer het netwerkgewicht voordat je de vormgeving verfijnt. Open voor vertrouwde externe bronnen de volledige netwerkhulpmiddelen van de browser vóór je het voorbeeld opnieuw laadt. Vergelijk een laadbeurt zonder bestanden uit de cache met een herhaalde laadbeurt. Bekijk mislukte verzoeken, overgedragen bytes, grote afbeeldingen en bibliotheken en welk verzoek een volgende afhankelijkheid start. De netwerkreferentie van Chrome maakt onderscheid tussen overgedragen gegevens en de grotere uitgepakte bron. Een klein HTML-bestand kan nog steeds megabytes aan afbeeldingen of scripts nodig hebben. Verwijder een overbodige bron of verklein een te grote afbeelding en herhaal dezelfde vergelijking. Een snelle preview uit de cache bewijst geen goede prestaties op een langzame verbinding.

Bekijk wanneer inhoud verschijnt en of die verschuift. De uitleg over renderblokkerende CSS laat zien waarom een noodzakelijke stylesheet de eerste opgemaakte weergave kan vertragen; downloadgrootte is niet de enige kostenpost. Onderzoek laden en langdurige JavaScript-uitvoering met de prestatiehulpmiddelen van de browser, niet alleen met Console of Controles. Verspringt een kop zodra een afbeelding, lettertype of ingesloten onderdeel verschijnt, gebruik dan de richtlijnen voor layoutverschuivingen. Reserveer de bedoelde ruimte met passende width/height-waarden of aspect-ratio en test het laden opnieuw. Geef ook afhankelijkheden en testomstandigheden mee. Dit verkleinde voorbeeld bootst niet de cache en serverreacties van de uiteindelijke host of de prestaties van alle apparaten na.

Externe bestanden bewust laten vinden

Resources accepteert HTTP- of HTTPS-URLs voor stylesheets en browserklare scripts, plus een basis-URL. Zet één adres op elke regel. Met https://example.org/demo/ wijst images/logo.png onder die map; /images/logo.png begint aan de oorsprongsroot. De HTML-standaard beschrijft deze resolutie. Een basis is een adresregel, geen uploadmap, en maakt lokale bestanden niet online bereikbaar.

Ontbreekt een font of afbeelding na import, bekijk dan eerst het adres. Het kan een andere map, aanmelding, netwerktoestemming of beperking van de host vereisen. Netwerk toestaan maakt een poging mogelijk, geen succesvolle reactie zeker. Scripts hebben een aparte toestemming: extern JavaScript heeft ook uitvoeringstoestemming nodig.

Een browserklaar CDN-bestand kan een gericht voorbeeld ondersteunen. Een npm-naam, JSX, TypeScript, Sass of PHP wordt hier niet automatisch uitvoerbaar. Er is geen pakketinstallatie, compilatie, database of tussenserver voor private APIs. Frameworks en ingelogde applicaties horen in een passende ontwikkelomgeving, gevolgd door tests onder de echte regels van de uiteindelijke site.

Wat beschermt de grens van de preview?

De WHATWG-sandboxregels beschrijven een geïsoleerde iframe-origin zonder same-origin-toestemming. De preview geeft die toestemming niet. Scripts en netwerk beginnen uit en zijn afzonderlijke keuzes; import schakelt ook automatisch uitvoeren uit. Laat beide uit voor statische lay-out. Een vertrouwde teller heeft scripts nodig, geen externe verzoeken.

Isolatie begrenst toegang, niet de betrouwbaarheid van de code. Een lus kan middelen verbruiken, een script een misleidend inlogscherm tekenen en toegestane resources verzoeken naar hun host sturen. Voer geen inloggegevens in de preview in. Consolelimieten beperken gewone berichtstromen, maar garanderen niet dat vijandige code de tab nooit blokkeert.

De aparte previewtab houdt iframe en gekozen rechten. Volledig gedownloade HTML is anders: code en resources krijgen niet de uitvoerbeperkingen van de editor mee. Rechtstreeks openen kan scripts starten. Bekijk het bestand voor openen of doorsturen, zeker van een onbekende bron.

Het juiste bestand bewaren voor de volgende stap

Project JSON bewaart titel, losse tabbladen, basis en resourcelijsten. Volledige HTML is het samengestelde document, geen offlinepakket van alle externe afbeeldingen en bibliotheken. Opnieuw importeren zet alles in HTML zonder de oorspronkelijke tabsplitsing terug te halen. Bewaar JSON voor verder bewerken en HTML voor wie het resultaat wil openen.

Voor onderzoek is niet-verkleinde HTML handiger. De minified variant verwijdert opmerkingen en comprimeert ondersteunde code; vergelijk het resultaat en houd het origineel. Concepten horen bij het lokale profiel, niet een cloudbackup of versiegeschiedenis. Opslag kan geweigerd of gewist worden. Bewaar het nodige voor herstel van een beschadigd concept; bewust opslaan of resetten kan het opgeslagen concept vervangen.

Delen zet een gecomprimeerd project in het URL-fragment, inclusief code en resources. Het is geen geheim met toegangscontrole of gehoste productiepagina. Ontvangers kunnen lezen en doorsturen. Bij overschrijding van de linklimiet download je JSON. Import accepteert HTML/HTM en ondersteund JSON binnen de bestandslimiet, geen hele mappen met assets.

Waarom documentstructuur nog steeds telt

Het CERN-verhaal over het ontstaan van het Web gaat terug naar Tim Berners-Lees werk in 1989 aan gedeelde, verbonden informatie. Die documentgedachte blijft nuttig: koppen drukken relaties uit, links hebben betekenisvolle doelen en formulieren een duidelijk doel. Mooie algemene vakken maken nog geen begrijpelijk document.

Bepaal bij een documentatievoorbeeld wat de lezer moet ontdekken voor je de indeling kiest. Gebruik een echte knop voor een actie en een link voor navigatie. Leg tabelkolommen uit zonder uitsluitend op kleur te vertrouwen. Dat maakt een klein voorbeeld duidelijker en makkelijker elders te gebruiken.

Een bruikbare overdracht noemt bron, laatst geteste breedte, browser, rechten en verwachte uitkomst. Een teller die hier reageert is iets anders dan een applicatie klaar voor hosting. Zo blijft de snelle proef waardevol zonder servergedrag, productieveiligheid of elk apparaat te claimen.