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 demonstreert enkele standaardgedragingen van paragraaf-elementen.
- ‘Poëzie’-probleem
- Dit voorbeeld demonstreert enkele problemen met HTML-formattering.
- Regeleindeverwerking
- Dit voorbeeld demonstreert het gebruik van regeleindeverwerking in HTML-documenten.
- Titel
- Dit voorbeeld demonstreert de tags om titels weer te geven in een HTML-document.
- Centraal geplaatste titel
- Dit voorbeeld demonstreert een titel die centraal is geplaatst.
- Horizontale lijn
- Dit voorbeeld demonstreert hoe je een horizontale lijn kunt invoegen.
- Verborgen commentaar
- Dit voorbeeld demonstreert hoe je verborgen commentaar kunt invoegen in de HTML-broncode.
- Achtergrondkleur
- Dit voorbeeld demonstreert hoe je een achtergrondkleur toevoegt aan een HTML-pagina.
HTML tekst formattering voorbeeld
- Tekst formattering
- Dit voorbeeld demonstreert hoe je tekst kunt formatteren in een HTML-bestand.
- Voorformateerde tekst
- Dit voorbeeld demonstreert hoe je met de pre tag lege regels en spaties kunt controleren.
- "Computer output" tags
- Dit voorbeeld demonstreert de weergave van verschillende "computer output" tags.
- Adres
- Dit voorbeeld demonstreert hoe je een adres in een HTML-bestand schrijft.
- Afkortingen en initialen
- Dit voorbeeld demonstreert hoe je afkortingen of initialen kunt realiseren.
- Tekst richting
- Dit voorbeeld demonstreert hoe je de richting van tekst kunt wijzigen.
- Blok citaat
- Dit voorbeeld demonstreert hoe je citaten van verschillende lengtes kunt realiseren.
- Verwijderde tekst effect en ingevoegde tekst effect
- Dit voorbeeld demonstreert hoe je verwijderde tekst en ingevoegde tekst markeert.
HTML link voorbeeld
- Maak een hyperlink
- Dit voorbeeld demonstreert hoe je een link maakt in een HTML-document.
- Gebruik een afbeelding als link
- Dit voorbeeld demonstreert hoe je een afbeelding als link gebruikt.
- Open een link in een nieuw browservenster
- Dit voorbeeld demonstreert hoe je een pagina opent in een nieuw browservenster, zodat bezoekers je site niet hoeven te verlaten.
- Linken naar een andere plek op dezelfde pagina
- Dit voorbeeld demonstreert hoe je kunt springen naar een ander deel van het document met een link.
- Ontsnappen uit het frame
- Dit voorbeeld demonstreert hoe je uit het frame kunt ontsnappen, als je pagina binnenin een frame is geplaatst.
- Maak een e-mail link
- Dit voorbeeld demonstreert hoe je een link naar een e-mail maakt. (Dit werkt alleen nadat je e-mailclientprogramma is geïnstalleerd.)
- Maak een e-mail link 2
- Dit voorbeeld demonstreert complexere e-mail links.
HTML frame voorbeeld
- Verticaal frame
- Dit voorbeeld demonstreert hoe je een verticaal frame maakt met drie verschillende documenten.
- Horizontaal frame
- Dit voorbeeld demonstreert hoe je een horizontaal frame maakt met drie verschillende documenten.
- Hoe je de <noframes>-tag gebruikt
- Dit voorbeeld demonstreert hoe je de <noframes>-tag gebruikt.
- Gemengde framestructuur
- Dit voorbeeld demonstreert hoe je een framestructuur maakt met drie documenten, die tegelijkertijd in rijen en kolommen worden gemengd.
- Framestructuur met de eigenschap noresize="noresize"
- Dit voorbeeld demonstreert de noresize-eigenschap. In dit voorbeeld is het frame niet in te schalen. Als je met de muis over de rand van het frame sleurt, zie je dat de rand niet kan worden verplaatst.
- Navigatieframe
- Dit voorbeeld demonstreert hoe je een navigatieframe maakt. Een navigatieframe bevat een lijst van links die de tweede frame als doel hebben. Het bestand genaamd "contents.htm" bevat drie links.
- Inline frame
- Dit voorbeeld demonstreert hoe je een inline frame kunt maken (een frame binnen een HTML-pagina).
- Navigeer naar een specifieke sectie binnen een frame
- Dit voorbeeld demonstreert twee frames. Een van de frames bevat een link die verwijst naar een specifieke sectie in een ander bestand. Het 'link.htm' bestand verwijst naar een sectie met behulp van <a name="C10">.
- Navigeer 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 geliinkte document. De links in het navigatieframe verwijzen naar de secties in het doelbestand.
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.
- Tags binnen de tabel
- 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 een tabel
- Voeg een achtergrondkleur of achtergrondafbeelding toe aan een tabel
- Voeg een achtergrondkleur of achtergrondafbeelding toe aan een tabelcel
- Voeg een achtergrond toe aan een tabelcel 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
- 文本域(Text fields)
- Tekstveld (Text fields)
- Dit voorbeeld demonstreert hoe je een tekstveld maakt in een HTML-pagina. De gebruiker kan tekst in het tekstveld schrijven.
- Wachtwoordveld
- Dit voorbeeld demonstreert hoe je een wachtwoordveld maakt in HTML.
- Selectievakje
- Dit voorbeeld demonstreert hoe je een keuzeknop maakt in een HTML-pagina. De gebruiker kan de keuzeknop selecteren of deselecteren.
- Enkele keuzeknop
- Dit voorbeeld demonstreert hoe je een eenvoudige dropdown-listbox maakt in een HTML-pagina. Een dropdown-listbox is een optionele lijst.
- Eenvoudige dropdown-list
- Dit voorbeeld demonstreert hoe je een eenvoudige dropdown-list maakt met een voorinstelling (opmerking van de vertaler: een voorinstelling is een vooraf gedefinieerde voorkeur).
- Een andere下拉列表
- Tekstveld (Textarea)
- Dit voorbeeld demonstreert hoe je een tekstveld (meervoudige tekstinvoercontrole) maakt. De gebruiker kan tekst in het tekstveld schrijven. In het tekstveld zijn er geen limieten voor het aantal karakters.
- 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 titelgevende 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 keuzerondjes
- Dit formulier bevat twee keuzerondjes 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 weergeeft.
- Invoegen van afbeeldingen van verschillende locaties
- Dit voorbeeld demonstreert hoe je afbeeldingen van andere mappen of servers in een webpagina weergeeft.
- Achtergrondafbeelding
- Dit voorbeeld demonstreert hoe je een achtergrondafbeelding toevoegt aan een HTML-pagina.
- Rangschikken van afbeeldingen
- Dit voorbeeld demonstreert hoe je een afbeelding in tekst排排列.
- Floating afbeelding
- Dit voorbeeld demonstreert hoe je een afbeelding浮动 naar de linkerkant of rechterkant van een paragraaf.
- Aanpassen van de afbeeldingsgrootte
- Dit voorbeeld demonstreert hoe je de afbeelding aanpassen tot verschillende afmetingen.
- 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 tekst de lezer wat hij mist. Het is een goede gewoonte om alle afbeeldingen op de pagina een vervangende tekst eigenschap toe te voegen.
- Maak een afbeeldingslink
- Dit voorbeeld demonstreert hoe je een afbeelding als een link gebruikt.
- Maak een afbeeldingskaart
- Dit voorbeeld toont hoe je een afbeeldingskaart maakt met klikbare gebieden. Elke regio is een hyperlink.
- Afbeelding omzetten naar afbeeldingskaart
- Dit voorbeeld toont hoe je een gewone afbeelding instelt als een afbeeldingskaart.
HTML achtergrond voorbeeld
- Een goed gecombineerde achtergrond en kleuren
- Een voorbeeld van een goed gecombineerde achtergrondkleur en tekствkleur, 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 tekencolore die het lezen van de tekst op de pagina moeilijk maakt.
- Bruikbare achtergrondafbeelding
- Voorbeelden van achtergrondafbeeldingen en tekencoloren die het lezen van de tekst op de pagina gemakkelijk maken.
- Bruikbare achtergrondafbeelding 2
- Een andere achtergrondafbeelding en tekencoloren die het lezen van de tekst op de pagina gemakkelijk maken.
- Onbruikbare achtergrondafbeeldingen
- Voorbeelden van achtergrondafbeeldingen en tekencoloren die het lezen van de tekst op de pagina moeilijk maken.
Voorbeeld van HTML Stijl (style)
- Stijlen in HTML
- Dit voorbeeld demonstreert hoe je HTML kunt formatteren met stijlinformatie die is toegevoegd aan het <head>-gedeelte.
- Geen onderstreping van links
- Dit voorbeeld demonstreert hoe je een link kunt maken zonder onderstreping met behulp van de stijlproperty.
- Koppelen aan een externe stijltafel
- Dit voorbeeld demonstreert hoe je een externe stijltafel kunt koppelen met de <link>-tag.
Voorbeeld van HTML Kop (head)
- Titel van het document
- Titelinformatie binnen de header-elementen wordt niet weergegeven in het browservenster.
- Een target, alle links
- Dit voorbeeld toont hoe je alle tags op een nieuwe venster kunt openen met behulp van de base-tag.
Voorbeeld van HTML Meta-informatie (meta)
- Documentbeschrijving
- Informatie in Meta-elementen kan het HTML-document beschrijven.
- Documenttrefwoorden
- Informatie in Meta-elementen kan de belangrijke woorden van het document beschrijven.
- Doorsturen
- Dit voorbeeld demonstreert: het doorsturen van gebruikers naar een andere adres als de URL is veranderd.
Voorbeeld van HTML Script (Script)
- Invoegen van een script
- Dit voorbeeld toont hoe je een script kunt invoegen in een HTML-document.
- Uitvoeren op browsers die scripts niet ondersteunen
- Dit voorbeeld toont hoe je browsers kunt omgaan met browsers die scripts niet ondersteunen.
