HTML Voorbeelden
Voorbeeld van basis HTML-tags
- Een eenvoudig HTML-bestand
- Dit voorbeeld is een zeer eenvoudig HTML-bestand dat zoveel mogelijk weinig HTML-tags gebruikt. Het demonstreert hoe de inhoud van het body-element wordt weergegeven door de browser.
- Eenvoudige paragraaf
- Dit voorbeeld demonstreert: hoe tekst in paragraaf-elementen wordt weergegeven door de browser.
- Meer paragrafen
- Dit voorbeeld toont enkele standaardgedragingen van paragraaf-elementen.
- Het 'poëzie'-probleem
- Dit voorbeeld toont enkele problemen met HTML-opmaak.
- Afbreking
- Dit voorbeeld toont de gebruik van afbrekingen in HTML-documenten.
- Titel
- Dit voorbeeld toont de tags voor het weergeven van titels in een HTML-document.
- Centraal geplaatste titel
- Dit voorbeeld toont een centrally geplaatste titel.
- Horizontale lijn
- Dit voorbeeld toont hoe je een horizontale lijn kunt invoegen.
- Verborgen opmerkingen
- Dit voorbeeld toont hoe je verborgen opmerkingen kunt invoegen in de HTML-broncode.
- Achtergrondkleur
- Dit voorbeeld toont hoe je een achtergrondkleur kunt toevoegen aan een HTML-pagina.
HTML-tekstformatteringvoorbeeld
- Tekstformattering
- Dit voorbeeld toont hoe je tekst kunt formatteren in een HTML-bestand.
- Voorformateerde tekst
- Dit voorbeeld toont hoe je met behulp van de pre-tag lege regels en spaties kunt controleren.
- "Computerafdruk"-tags
- Dit voorbeeld toont de weergave van verschillende "computerafdruk"-tags.
- Adres
- Dit voorbeeld toont hoe je een adres schrijft in een HTML-bestand.
- Afkortingen en afkortingen
- Afkortingen en afkortingen
- Tekstrichting
- Dit voorbeeld toont hoe je de richting van tekst kunt veranderen.
- Blok-citaat
- Dit voorbeeld toont hoe je citaten van verschillende lengtes kunt implementeren.
- Verwijderde tekst en ingevoegde tekst
- Dit voorbeeld toont hoe je verwijderde tekst en ingevoegde tekst kunt markeren.
HTML-koppelingvoorbeeld
- Maak een hyperlink
- Dit voorbeeld toont hoe je een koppeling maakt in een HTML-document.
- Gebruik een afbeelding als koppeling
- Dit voorbeeld toont hoe je een afbeelding kunt gebruiken als koppeling.
- Open een koppeling in een nieuw browservenster
- Dit voorbeeld toont hoe je een pagina in een nieuw browservenster kunt openen, zodat bezoekers je site niet hoeven te verlaten.
- Koppelen naar een andere locatie op dezelfde pagina
- Dit voorbeeld toont hoe je kunt springen naar een ander deel van het document met een koppeling.
- Ontsnappen uit het kader
- Dit voorbeeld toont hoe je uit het kader kunt ontsnappen, als je pagina binnen een kader is geplaatst.
- Maak een e-mailkoppeling
- Dit voorbeeld toont hoe je een koppeling naar een e-mail maakt. (Dit werkt alleen nadat je het e-mailclientprogramma hebt geïnstalleerd.)
- Maak een e-mailkoppeling 2
- Dit voorbeeld toont geavanceerdere e-mailkoppelingen.
HTML-kadervoorbeeld
- Verticaal kader
- Dit voorbeeld toont hoe je een verticaal kader maakt met drie verschillende documenten.
- Horizontaal kader
- Dit voorbeeld toont hoe je een horizontaal kader maakt met drie verschillende documenten.
- Hoe je de <noframes>-tag gebruikt
- Dit voorbeeld toont hoe je de <noframes>-tag gebruikt.
- Gemengde kaderstructuur
- Dit voorbeeld toont hoe je een kaderstructuur maakt met drie documenten, die tegelijkertijd in rijen en kolommen worden gemengd.
- Kaderstructuur met de eigenschap noresize="noresize"
- Dit voorbeeld toont de noresize-eigenschap. In dit voorbeeld is het kader niet in te stellen. Als je met de muis over de rand van het kader sleep, zie je dat de rand niet kan worden verplaatst.
- Navigatiekader
- Dit voorbeeld toont hoe je een navigatiekader maakt. Een navigatiekader bevat een lijst van links die als doel de tweede kader hebben. Het bestand genaamd "contents.htm" bevat drie links.
- Inline frame
- Dit voorbeeld demonstreert hoe je een inline frame kunt maken (een frame in een HTML-pagina).
- Navigeren naar een specifieke sectie binnen een frame
- Dit voorbeeld demonstreert twee frames. Een van de frames bevat een link die wijst naar een specifieke sectie in een andere file. De sectie in de 'link.htm' file wordt geïdentificeerd met <a name="C10">.
- Navigeren naar een specifieke sectie met behulp van frames
- Dit voorbeeld demonstreert twee frames. De linkerkant navigatieframe bevat een lijst van links, deze links wijzen op de tweede frame als doel. De tweede frame toont het document dat wordt verwezen naar door de links.
HTML tabel voorbeeld
- Tabel
- Deze voorbeeld demonstreert hoe je een tabel kunt maken in een HTML-document.
- Tabelrand
- Dit voorbeeld demonstreert verschillende soorten tabelranden.
- Tabel zonder rand
- Dit voorbeeld demonstreert een tabel zonder rand.
- Tabelkop (Heading) in de tabel
- Dit voorbeeld demonstreert hoe je de tabelkop kunt weergeven.
- Lege cellen
- Dit voorbeeld demonstreert hoe je lege cellen kunt behandelen met behulp van ' '.
- Tabel met titel
- Dit voorbeeld demonstreert een tabel met een titel (caption).
- Tabelcellen die over meerdere rijen of kolommen lopen
- Dit voorbeeld demonstreert hoe je tabelcellen kunt definiëren die over meerdere rijen of kolommen lopen.
- Tabelinvoer
- Dit voorbeeld demonstreert hoe je elementen kunt weergeven binnen verschillende elementen.
- Celrand (Cell padding)
- Dit voorbeeld demonstreert hoe je een witruimte kunt maken tussen de inhoud van de cel en de rand van de cel met behulp van 'Cell padding'.
- Celruimte (Cell spacing)
- Dit voorbeeld demonstreert hoe je de afstand tussen cellen kunt vergroten met behulp van 'Cell spacing'.
- Voeg een achtergrondkleur of achtergrondafbeelding toe aan de tabel
- Voeg een achtergrondkleur of achtergrondafbeelding toe aan de tabel
- Voeg een achtergrondkleur of achtergrondafbeelding toe aan tabelcellen
- Voeg een achtergrond toe aan een of meerdere tabelcellen
- Inhoud arrangeren in tabelcellen
- Dit voorbeeld demonstreert hoe je de 'align' eigenschap kunt gebruiken om de inhoud van de cel te arrangeren, zodat je een aantrekkelijke tabel kunt maken.
- Frame (frame) eigenschap
- Dit voorbeeld demonstreert hoe je de 'frame' eigenschap kunt gebruiken om de rand van de tabel te controleren.
HTML lijst voorbeeld
- Ongenummerde lijst
- Dit voorbeeld demonstreert ongenummerde lijsten.
- Genummerde lijst
- Dit voorbeeld demonstreert genummerde lijsten.
- Verschillende soorten ongenummerde lijsten
- Dit voorbeeld demonstreert een ongenummerde lijst.
- Verschillende soorten genummerde lijsten
- Dit voorbeeld demonstreert verschillende soorten genummerde lijsten.
- Geneste lijst
- Dit voorbeeld demonstreert hoe je geneste lijsten kunt maken.
- Geneste lijst 2
- Dit voorbeeld demonstreert een complexere geneste lijst.
- Gedefinieerde lijst
- Dit voorbeeld demonstreert een gedefinieerde lijst.
HTML formulieren en invoervoorbeelden
- Tekstveld(Text fields)
- Dit voorbeeld demonstreert hoe je een tekstveld maakt in een HTML-pagina. Gebruikers kunnen tekst in het tekstveld schrijven.
- Wachtwoordveld
- Dit voorbeeld demonstreert hoe je een wachtwoordveld maakt in HTML.
- Selectievak
- Dit voorbeeld demonstreert hoe je een selectievak maakt in een HTML-pagina. Gebruikers kunnen selectievakjes selecteren of deselecteren.
- Enkele keuze knop
- Enkele keuze knop
- Dit voorbeeld demonstreert hoe je een eenvoudige keuzelijstbalk maakt in een HTML-pagina. Een keuzelijstbalk is een optionele lijst.
- Eenvoudige keuzelijst
- Dit voorbeeld demonstreert hoe je een eenvoudige keuzelijst met een vooraf ingestelde waarde maakt. (Vertaler opmerking: een vooraf ingestelde waarde is een vooraf gedefinieerde voorkeur.)
- Een andere keuzelijst
- Tekstveld(Textarea)
- Dit voorbeeld demonstreert hoe je een tekstveld (meervoudige tekstinvoer) maakt. Gebruikers kunnen tekst in het tekstveld schrijven. In het tekstveld zijn de aantal karakters dat kan worden ingevoerd niet beperkt.
- Maak een knop
- Dit voorbeeld demonstreert hoe je een knop maakt. Je kunt de tekst op de knop aanpassen.
- Fieldset around data
- Dit voorbeeld demonstreert hoe je een getitelde box om gegevens te tekenen.
Formulier voorbeeld
- Formulier met invoervelden en bevestigingsknop
- Dit voorbeeld demonstreert hoe je een formulier aan een pagina toevoegt. Dit formulier bevat twee invoervelden en een bevestigingsknop.
- Formulier met selectievakjes
- Dit formulier bevat twee selectievakjes en een bevestigingsknop.
- Formulier met radio knoppen
- Dit formulier bevat twee radio knoppen en een bevestigingsknop.
- Verzenden van e-mail van formulier
- Dit voorbeeld toont hoe je een e-mail van een formulier kunt verzenden.
HTML afbeelding voorbeeld
- Invoegen van een afbeelding
- Dit voorbeeld demonstreert hoe je een afbeelding in een webpagina kunt weergeven.
- Afbeeldingen van verschillende locaties invoegen
- Dit voorbeeld demonstreert hoe je afbeeldingen van andere mappen of servers in een webpagina kunt weergeven.
- Achtergrondafbeelding
- Dit voorbeeld demonstreert hoe je een achtergrondafbeelding aan een HTML-pagina toevoegt.
- Plaats afbeelding
- Dit voorbeeld demonstreert hoe je een afbeelding in tekst kunt arrangeren.
- Float afbeelding
- Dit voorbeeld demonstreert hoe je een afbeelding kunt浮动en naar de linkerkant of rechterkant van een paragraaf.
- Afbeeldingsgrootte aanpassen
- Dit voorbeeld demonstreert hoe je de afbeelding in verschillende maten kunt aanpassen.
- Weergeven van vervangende tekst voor afbeeldingen
- Dit voorbeeld demonstreert hoe je vervangende tekst voor een afbeelding weergeeft. Als de browser de afbeelding niet kan laden, vertelt de vervangende tekstattribute de lezers wat ze missen. Het is een goede gewoonte om voor alle afbeeldingen op de pagina vervangende tekstattributen toe te voegen.
- Maak een afbeeldingskoppeling
- Dit voorbeeld demonstreert hoe je een afbeelding als een koppeling gebruikt.
- Maak een afbeeldingskaart
- Dit voorbeeld toont hoe je een afbeeldingskaart maakt met klikbare gebieden. Elke regio is een hyperlink.
- Beeld omzetten naar een afbeeldingskaart
- Dit voorbeeld toont hoe je een gewoon beeld instelt als een afbeeldingskaart.
HTML achtergrond voorbeeld
- Een goed gecombineerde achtergrond en kleuren
- Een voorbeeld van een goed gecombineerde achtergrondkleur en tekstkleur, waardoor de tekst op de pagina gemakkelijk leesbaar is.
- Een slechte combinatie van achtergrond en kleuren
- Een voorbeeld van een slechte combinatie van achtergrondkleur en tekencoloren die de leesbaarheid van de tekst in de pagina moeilijk maakt.
- Bruikbare achtergrondafbeelding
- Voorbeelden van achtergrondafbeeldingen en tekencoloren die de leesbaarheid van de tekst op de pagina gemakkelijk maken.
- Bruikbare achtergrondafbeelding 2
- Een andere achtergrondafbeelding en tekencoloren die de leesbaarheid van de tekst op de pagina gemakkelijk maken.
- Onbruikbare achtergrondafbeelding
- Voorbeelden van achtergrondafbeeldingen en tekencoloren die de leesbaarheid van de tekst op de pagina moeilijk maken.
HTML Stijl (style) Voorbeeld
- Stijlen in HTML
- Dit voorbeeld demonstreert hoe je HTML kunt formatteren met stijlinformatie die aan het <head>-gedeelte is toegevoegd.
- Link zonder onderstreping
- Voorbeeld van een link zonder onderstreping met behulp van de stijl-eigenschap.
- Koppelen aan een externe stijltafel
- Dit voorbeeld demonstreert hoe je een externe stijltafel kunt koppelen met de <link>-tag.
HTML Hoofding (head) Voorbeeld
- Documenttitel
- Titelinformatie binnen het hoofd-element wordt niet weergegeven in het browservenster.
- Een target, alle links
- Dit voorbeeld toont hoe je alle tags op een nieuwe pagina kunt openen met behulp van de base-tag.
HTML Meta Informatie (meta) Voorbeeld
- Document Beschrijving
- Informatie in Meta-elementen kan het HTML-document beschrijven.
- Documenttrefwoorden
- Informatie in Meta-elementen kan de trefwoorden van het document beschrijven.
- Doorsturen
- Dit voorbeeld demonstreert: De gebruiker wordt doorgestuurd naar een andere adres wanneer de URL is gewijzigd.
HTML Script (Script) Voorbeeld
- Invoegen van een script
- Dit voorbeeld demonstreert hoe je een script in een HTML-document kunt invoegen.
- Uitvoeren op browsers die scripts niet ondersteunen
- Dit voorbeeld demonstreert hoe je browsers die scripts niet ondersteunen moet aanpakken.
