De HTML Essentials Cheat Sheet: Tags, attributen en meer

Het bouwen van webpagina's begint met HTML. Ze verfraaien en interactief maken komt later. Maar om te beginnen met het maken van functionele statische websites, heb je kennis van HTML nodig. (Wilt u een snelle introductie tot deze opmaaktaal? Lees onze HTML FAQ .)

Als onderdeel van het leren van de taal is er een lange lijst met elementen die u aan uw HTML-vocabulaire moet toevoegen. En deze taak kan in eerste instantie ontmoedigend lijken, daarom hebben we de volgende spiekbrief bedacht. Het geeft je een gemakkelijke manier om HTML-elementen te ontdekken/begrijpen/oproepen wanneer je ze nodig hebt.

---

---

De spiekbrief bevat tags en attributen voor het structureren van webpagina's, het opmaken van tekst, het toevoegen van formulieren, afbeeldingen, lijsten, links en tabellen. Het bevat ook tags die zijn geïntroduceerd in HTML5 en HTML-codes voor veelgebruikte speciale tekens.

hoe airpods op xbox one aan te sluiten

GRATIS DOWNLOAD: Deze spiekbrief is beschikbaar als een downloadbare pdf van onze distributiepartner, TradePub. U moet een kort formulier invullen om het alleen voor de eerste keer te openen. Downloaden De HTML Essentials-spiekbrief .

aangepaste geluiden downloaden voor Windows 10

De HTML Essentials-spiekbrief

......

Snelkoppeling	Actie
Basistags
...	De eerste en laatste tag van een HTML-document. Alle andere tags liggen tussen deze openings- en sluitingstags.
...	Specificeert de verzameling metagegevens voor het document.
...	Beschrijft de titel van de pagina en wordt weergegeven in de titelbalk van de browser.
...	Bevat alle inhoud die op de webpagina wordt weergegeven.
Documentinformatie
	Vermeldt de basis-URL en alle relatieve links naar het document.
	Voor extra informatie over de pagina zoals auteur, publicatiedatum, etc.
	Links naar externe elementen zoals stylesheets.
...	Bevat informatie over documentstijlen zoals CSS (Cascading Style Sheets).
...	Bevat links naar externe scripts.
Tekstopmaak
... OF ...	Maakt tekst vet.
...	Tekst cursief en vet gemaakt.
...	Tekst cursief, maar niet vet.
...	Doorgestreepte tekst.
...	Noemt een auteur van een citaat.
...	Labelt een verwijderd gedeelte van een tekst.
...	Toont een sectie die in de inhoud is ingevoegd.
...	Voor het weergeven van offertes. Vaak gebruikt met de tag.
...	Voor kortere offertes.
...	Voor afkortingen en volledige vormen.
...	Specificeert contactgegevens.
...	Voor definities.
...	Voor codefragmenten.
...	Voor het schrijven van abonnementen
...	Voor het schrijven van superscripts.
...	Voor het verkleinen van de tekstgrootte en het markeren van overbodige informatie in HTML5.
Documentstructuur
...	Verschillende niveaus van koppen. H1 is de grootste en H6 is de kleinste.
...	Voor het opdelen van inhoud in blokken.
...	Bevat inline-elementen, zoals een afbeelding, pictogram, emoticon, zonder de opmaak van de pagina te verpesten.
...	Bevat platte tekst.
	Creëert een nieuwe regel.
	Tekent een horizontale balk om het einde van de sectie weer te geven.
Lijsten
...	Voor geordende lijst van items.
...	Voor ongeordende lijst met items.
...	Voor afzonderlijke items in een lijst.
...	Lijst met items met definities.
...	De definitie van een enkele term in lijn met de inhoud van de hoofdtekst.
...	De beschrijving voor de gedefinieerde term.
Links
...	Ankertag voor hyperlinks.
...	Tag voor het linken naar e-mailadressen.
...	Ankertag voor het weergeven van contactnummers.
...	Ankertag om te linken naar een ander deel van dezelfde pagina.
...	Navigeert naar een div-gedeelte van de webpagina. (Variatie van de bovenstaande tag)
Afbeeldingen
	Voor het weergeven van afbeeldingsbestanden.
Attributen voor de label
src=url	Link naar het bronpad van de afbeelding.
alt = tekst	De tekst die wordt weergegeven wanneer een muis over de afbeelding wordt gehouden.
hoogte=	Afbeeldingshoogte in pixels of percentages.
breedte=	Afbeeldingsbreedte in pixels of percentages.
uitlijnen=	Relatieve uitlijning van de afbeelding op de pagina.
grens=	Randdikte van de afbeelding.
...	Link naar een aanklikbare kaart.
...	Naam van de kaartafbeelding.
	Het afbeeldingsgebied van een afbeeldingskaart.
Attributen voor de tag
vorm= '	Vorm van het afbeeldingsgebied.
coördinaten=	Coördinaten van het kaartbeeldgebied.
Formulieren
...	De bovenliggende tag voor een HTML-formulier.
Attributen voor de tag
actie=url	De URL waar formuliergegevens worden ingediend.
methode=	Specificeert het protocol voor het indienen van formulieren (POST of GET).
enctype=	Het gegevenscoderingsschema voor POST-inzendingen.
automatisch aanvullen	Geeft aan of automatisch aanvullen van formulieren is in- of uitgeschakeld.
niet valideren	Geeft aan of het formulier moet worden gevalideerd voordat het wordt verzonden.
accept-charsets	Specificeert tekencodering voor formulierinzendingen.
doelwit	Toont waar het antwoord op het indienen van het formulier wordt weergegeven.
...	Groepeert gerelateerde elementen in de vorm/
...	Specificeert wat de gebruiker in elk formulierveld moet invoeren.
...	Een bijschrift voor het fieldset-element.
	Specificeert welk type invoer van de gebruiker moet worden overgenomen.
Attributen voor de tag
type=	Bepaalt het type invoer (tekst, datums, wachtwoord).
naam=	Specificeert de naam van het invoerveld.
waarde=	Specificeert de waarde in het invoerveld.
maat=	Stelt het aantal tekens voor het invoerveld in.
maxlengte=	Stelt de limiet van toegestane invoertekens in.
verplicht	Maakt een invoerveld verplicht.
breedte=	Stelt de breedte van het invoerveld in pixels in.
hoogte=	Stelt de hoogte van het invoerveld in pixels in.
placeholder=	Beschrijft de verwachte veldwaarde.
patroon=	Specificeert een reguliere expressie die kan worden gebruikt om patronen in de tekst van de gebruiker te zoeken.
min =	De minimaal toegestane waarde voor een invoerelement.
max=	De maximaal toegestane waarde voor een invoerelement.
gehandicapt	Schakelt het invoerelement uit.
...	Voor het vastleggen van langere gegevensreeksen van de gebruiker.
...	Specificeert een lijst met opties waaruit de gebruiker kan kiezen.
Attributen voor de tag
naam=	Specificeert de naam voor een vervolgkeuzelijst.
maat=	Aantal opties gegeven aan de gebruiker.
meerdere	Stelt in of de gebruiker meerdere opties uit de lijst kan kiezen.
verplicht	Geeft aan of het kiezen van een optie(s) nodig is voor het indienen van formulieren.
autofocus	Specificeert dat een vervolgkeuzelijst automatisch in beeld komt nadat een pagina is geladen.
...	Definieert items in een vervolgkeuzelijst.
waarde=	Toont de tekst voor een bepaalde optie.
geselecteerd	Stelt de standaardoptie in die wordt weergegeven.
...	Tag voor het maken van een knop voor het indienen van formulieren.
Objecten en iFrames
...	Beschrijft het ingesloten bestandstype.
Attributen voor de tag
hoogte=	De hoogte van het voorwerp.
breedte=	De breedte van het object.
type=	Het type media dat het object bevat.
	Een inline frame voor het insluiten van externe informatie.
naam=	De naam van het iFrame.
src=	De bron-URL voor de inhoud binnen het frame.
srcdoc=	De HTML-inhoud binnen het frame.
hoogte=	De hoogte van het iFrame.
breedte=	De breedte van het iFrame.
	Voegt extra parameters toe om het iFrame aan te passen.
...	Sluit een externe applicatie of plug-in in.
Attributen voor de tag
hoogte=	Stelt de hoogte van de insluiting in.
breedte=	Stelt de breedte van de insluiting in.
type=	Het type of formaat van de insluiting.
src=	Het bronpad van het ingesloten bestand.
Tafels
...	Definieert alle inhoud voor een tabel.
...	Een beschrijving van de tafel.
...	Kopteksten voor elke kolom in de tabel.
Definieert de hoofdtekstgegevens voor de tabel.
...	Beschrijft de inhoud voor de voettekst van de tabel.
Inhoud voor een enkele rij.
	...	De gegevens in één kopitem.
	...	Inhoud binnen één tabelcel.
...	Groepeert kolommen voor opmaak.
	Een enkele kolom met informatie.
HTML5 nieuwe tags
...	Specificeert de koptekst van de webpagina.
...	Specificeert de voettekst van de webpagina.
...	Markeert de hoofdinhoud van de webpagina.
...	Specificeert een artikel.
...	Specificeert zijbalkinhoud van een pagina.
...	Specificeert een bepaalde sectie op de webpagina.
...	Voor het beschrijven van extra informatie.
...	Gebruikt als kop voor de bovenstaande tag. Is altijd zichtbaar voor de gebruiker.
...	Creëert een dialoogvenster.
...	Gebruikt voor het opnemen van grafieken en figuren.
...	Beschrijft een element.
...	Markeert een specifiek deel van de tekst.
...	Set navigatielinks op een webpagina.
...	Een bepaald item uit een lijst of een menu.
...	Meet gegevens binnen een bepaald bereik.
...	Plaatst een voortgangsbalk en houdt de voortgang bij.
...	Geeft tekst weer die geen Ruby-annotaties ondersteunt.
...	Geeft typografische karakterdetails in Oost-Azië weer.
...	Een Ruby-annotatie voor Oost-Aziatische typografie.
...	Identificeert tijd en datum.
	Een regeleinde binnen de inhoud.
¹HTML5-tekenobjecten
" ; OF & quot;	Aanhalingstekens
< ; OF & lt;	Kleiner dan teken (<)
> ; OF > ;	Groter dan teken (>)
; OF ;	Vaste ruimte
© ; OF &kopieer ;	symbool van auteursrecht
™ ; OF & ucirc;	Handelsmerksymbool
@ ; OF & Uuml;	bij symbool (@)
& ; OF &	Ampersand-symbool (&)
• ; OF & ouml;	kleine kogel
¹Negeer de spatie vóór de puntkomma tijdens het typen van HTML-tekens.

Bouw een website voor praktische ervaring

Als je het eenmaal hebt begrepen de basis van HTML-code en een praktische kennis van CSS en JavaScript hebben, probeer eens een website te bouwen . Zorg er ook voor dat u ons spiekbriefje met CSS3-eigenschappen opslaat en JavaScript-spiekbriefje voor toekomstig gebruik!

---

---

Deel Deel Tweeten E-mail Toegang krijgen tot Google's ingebouwde waterpas op Android

Als je ooit hebt moeten controleren of iets in een mum van tijd waterpas staat, kun je nu binnen enkele seconden een waterpas op je telefoon krijgen.

Android zet apps over naar SD-kaart

Lees volgende Gerelateerde onderwerpen

• productiviteit
• Programmeren
• HTML
• Spiek briefje

Over de auteur Akshata Shanbhag(404 artikelen gepubliceerd)

Akshata is getraind in handmatig testen, animatie en UX-ontwerp voordat hij zich op technologie en schrijven concentreerde. Dit bracht twee van haar favoriete activiteiten samen: systemen begrijpen en jargon vereenvoudigen. Bij MakeUseOf schrijft Akshata over hoe u het beste uit uw Apple-apparaten kunt halen.

---

---

Meer van Akshata Shanbhag

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren