HTML staat voor Hyper Text Mark-up Language
Gebruikt voor: het maken van webpagina’s (documenten) die worden weergegeven op het World Wide Web (websites). De pagina’s kunnen een mix zijn van tekst, afbeeldingen, video’s en andere elementen. Ze kunnen worden gemaakt met: kladblok, TextPad of andere teksteditors.
Opgeslagen als: .html bestanden
HTML Cheat Sheet
Hier delen wij met u de complete HTML Cheat Sheet:
Basis structuur
<!DOCTYPE html><html> <head> <title></title> </head> <body> body tags and main content </body></html>
De belangrijkste elementen in HTML zijn de tags. Tags structureren en presenteren de gegevens in verschillende vormen.
Heading
<h1>Heading 1</h1><h2>Heading 2 </h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6 </h6>
Paragraph
Span
Span tag wordt gebruikt voor het stylen van inline elementen.
<span style = "color:green”> Address </span>
– drukt het woord ‘Adres’ af in de opgegeven kleur (hier groen). Het style attribuut wordt gebruikt om HTML elementen te stijlen.
Characters
Formatting
Body
<body> – de hoofdinhoud ligt in de body. Binnenin <body> kunnen er vele secties zijn. Attributen –
Metadata
<meta> tag is een onderdeel van <head> en beschrijft informatie over gegevens. Het meest gebruikelijke gebruik van metadata is door zoekmachines voor trefwoorden. <meta charset = “UTF-8”> – meest voorkomende tekenset Attributen –
- name = “” – kan naam zijn zoals keyword, author, beschrijving etc..
- content = “” – de waarde die overeenkomt met bovenstaande namen
Voorbeeld – <meta name=”keywords” content=”Wat is HTML, Hoe leer je HTML?”>
Verdelingen en opsplitsingen
- <div></div> nieuwe sectie; geneste div-tags komen vaak voor wanneer meerdere subsecties nodig zijn
- <hr> – horizontale lijn
<hr> heeft de volgende attributen –
- <hr size = “” width = “”/width = “%” color = “” align = “left/center/right”>
- size – dikte van de lijn in pixels
- width – in pixels of percentage (eender welk)
- color – kleur in hex waarde
- align – uitlijning; links, rechts of midden
Tabellen
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>
- <table> – creëert een tabel,
- <tr> – maakt een rij,
- <td> – maakt een kolom,
- <th> – creëert header-kolommen
<table> attributen –
<td>attributen
Voorbeeld –
<colgroup> <col span="1" style="background-color:green"> <col style="background-color:blue"></colgroup>
De eerste kolom wordt groen geaccentueerd, terwijl de andere kolommen blauw gemarkeerd worden.
Formulieren (HTML-kladblaadje)
De meeste dynamische inhoud zoals gebruikersinvoer, het indienen van een pagina, het invullen van een formulier gebeurt binnen deze tag. Het is een groep van gerelateerde inputs.
<form> <input> <select><option></option></select> <textarea></form>
<form> tag-attributen –
<input> tag-attributen –
<select></select> – Selecteer opties in keuzelijst </select> –
<. Selecteer opties uit vervolgkeuzelijst <select> tag Attributen:
<optie></optie> -. individuele items van de vervolgkeuzelijst <optie> tag Attributen:
- value=”” – geselecteerde optie waarde of standaard waarde ingesteld
- <textarea>veel tekst zoals beschrijving </textarea> -. Groot gebied voor tekstinvoer
<textarea> Tag Attributen:
iframe
- <iframe src=””></iframe> – sluit een ander document in binnen het huidige document (pagina) in een frame.
- Attribuut “src” – locatie van het document dat moet worden ingesloten
Links
HTML links, ook wel hyperlinks genoemd, worden gedefinieerd door de tag ‘a’ – <a></a> Attributen –
- href = “” – de url die bezocht moet worden als op de link wordt geklikt
- target = “” – geeft aan waar de link geopend moet worden – _blank (nieuw tabblad/venster), _self (zelfde venster/tab), _parent (in het parent frame), framename – openen in een bepaald frame.
- title = “” – geeft informatie over het element
- id = “” – om bladwijzers in de pagina aan te maken die als waarde in href attribuut kunnen worden gebruikt.
Voorbeelden –
Styles
Voor styling worden er veel attributen gebruikt bij diverse tags. De attributen zijn –
<style> text-align= "” – align text; left, right, center background-color = "” – background color of the element color=”” – for color of texts font-family = "” – for various fonts font-size = "” size of the font border = "” – border thickness and color for a table</style>
Deze styling-elementen worden samengevoegd in een CSS.
Lijsten
Er zijn twee soorten lijsten – geordende en ongeordende. <ol></ol> – geordende lijst Attributen –
- type=”” – de nummering van de lijst – A, a, I, 1, i
- start = “” – beginwaarde
- <ul></ul> – ongeordende lijst
Attributen –
- type = “” – type opsommingsteken – vierkant, cirkel, schijf
- <li></li> – individuele waarde in de lijst
Attributen –
- <waarde> = “” – waarde van lijstitem
- <type>=”” – type van het lijstitem
Afbeeldingen
<img> – toont de afbeelding bij het laden van de pagina Attributen –
- src =”sourceofimage” – bron van de afbeelding; url of bestandslocatie; verplicht
- alt = “alternate text” – alternatieve tekst; verplicht
- align = “left/right/center” – uitlijning ten opzichte van omliggende items (tekst)
- width = “” – in pixels of percentage
- height = “” – in pixels of in pixels of percentage
- border = “” – dikte van de rand in pixels
- hspace = “” – ruimte in pixels aan de zijkanten van de afbeelding
- vspace = “” – ruimte in pixels aan de boven- en onderkant van de afbeelding
HTML5 Tags
- <aside> – inhoud inhoud die geen deel uitmaakt van een element, maar naast de hoofdinhoud moet worden geplaatst
- <figure> – elke illustratie zoals foto’s, diagrammen, opsomming van code enzovoort.
- <figcaption> – bijschrift voor de >. Bijschrift voor het <figuur> element
- <header> – De koptekst van een sectie (vergelijkbaar met die in MS word), header kan andere inhoud hebben zoals navigatie links, formulieren etc…
- <footer> – de inhoud onderaan de pagina/sectie bijv. copyright informatie, voorwaarden en condities etc..
- <main> – de tag is een indicator van waar de hoofdinhoud van de pagina begint
- <details> – de inhoud van de pagina. box met expand/collapse functionaliteit voor meer tekstruimte
- <summary> – samenvatting van de inhoud van het betreffende element. Kan beschrijving, bijschrift enz. zijn.
- <mark> – markeer een deel van een tekst om het op de voorgrond te plaatsen
- <nav> – sectie met navigatie-links naar secties op een website. sectie met navigatielinks naar secties op een pagina of naar andere pagina’s
- <sectie> – een bepaald onderdeel (groep) op de pagina, bijvoorbeeld over ons of getuigenissen sectie van een webpagina
- <tijd> – de vermelde tijd in machine-leesbaar formaat. Het kan datum, tijd, tijdzone offset, tijdsduur enz. bevatten.
- <datalist> – vergelijkbaar met autocomplete; vooraf gedefinieerde opties voor invoercontroles
- <keygen> – sleutelpaar (publiek en privaat) generator voor formulieren. De publieke sleutel wordt naar de server gestuurd als het formulier wordt ingediend, terwijl de private sleutel wordt opgeslagen in de lokale sleutelbewaarplaats
- <output> – resultaat van eventuele berekeningen
- <progress> – geeft de voortgang van de taak aan door middel van een voortgangsbalk
- <embed> – media van externe bron insluiten
- <source> – bron voor audio of video
- <audio> – voor muziek of geluid
- < voor muziekinhoud of geluid
- <video> – om een film of video te presenteren
Download HTML Cheat Sheet PDF van hier.
Mensen lezen ook:
- Beste HTML-cursussen
- Beste HTML-certificeringen
- Top HTML-interviewvragen
- Top HTML5-interviewvragen
- Hoe word je een webontwikkelaar?
- Beste Web Development IDE
- Beste Web Development Frameworks
- Wat is Web Development Architecture?
- CSS vs CSS2
- Top Angular Alternatieven