My Portfolio

Waar staat de afkorting HTML voor?

HTML (Hypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel u de basisbegrippen van HTML uitleggen en wat zijn functie is.

Dus wat is HTML nu eigenlijk?

HTML is geen programmeertaal; het is een opmaaktaal en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie elementen die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De tags (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:

Mijn kat is heel chagrijnig

Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met ( <p>) paragraaflabels te omhullen:

<p>Mijn kat is heel chagrijnig</p>

Anatomie van een HTML-element

We gaan dit paragraafelement wat verder onderzoeken.

De belangrijkste onderdelen van ons element zijn:

De opening-tag: (het openingslabel) Deze bestaat uit de naam van het element (in dit geval p), ingesloten door kleiner- en groter-dan-tekens. <elementnaam> toont ons waar het element begint. Hier begint ook de invloed die het op de regel uitoefent en in dit geval duidt het het begin van de paragraaf aan.
De closing-tag:bold> (het eindlabel) Die is identiek aan de opening-tag, behalve dat er ook nog een schuine streep voor de naam van het element staat. De schuine streep leunt naar voor en staat net achter >. Het eindlabel duidt het einde van het element aan, in dit geval dus het einde van de paragraaf. Beginners vergeten de eindmarkeerder nogal eens en dat kan tot vreemde resultaten leiden.
De inhoud: Dit is de inhoud van het element, in dit geval gewoon een regel tekst.
Het element: De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element. Elementen kunnen ook attributen krijgen die er zo uitzien:

Elementen kunnen ook attributen krijgen die er zo uitzien:

Attributen bevatten extra informatie over het element die u niet in de inhoud wilt zien zitten. Hier is class the naam van het attribuut en editor-note is de waarde van het attribuut. Met het class-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.

Een attribuut krijgt altijd de volgende kenmerken: Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft). De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=). De waarde van het attribuut staat tussen aanhalingstekens.

Geneste Elementen

U kunt elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een <strong>-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond: U moet er echter wel voor zorgen dat uw elementen correct worden genest: in het voorbeeld hierboven openden we het <p> element eerst en dan het <strong> element. Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat u wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!

Lege elementen

Sommige elementen hebben geen inhoud en worden lege elementen genoemd. Het <img>-element bijvoorbeeld, die al in onze HTML zit, is zo'n leeg element: Dit element bevat twee attributen, maar er is geen </img> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het </img>-element.

Anatomie van een HTML-document

Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons index.html-voorbeeld hebben gestoken


                        <!DOCTYPE html>
                           <html>
                                <head>
                                    <meta charset="utf-8">
                                    <title>Mijn testpagina</title>
                                </head>

                                <body>
                                    <img src="images/firefox-icon.png" alt="Mijn testafbeelding">
                                </body>

                            </html>

Wat zit er in die pagina ?

<!DOCTYPE html> — Het doctype. Lang geleden was HTML jong (rond 1991/2). Doctypes moesten toen als links naar een serie regels dienen. De HTML-pagina moest die regels volgen om als goede HTML te kunnen worden beschouwd. Dat kon automatische foutcontrole zijn en andere nuttige zaken. Maar tegenwoordig trekt niemand zich nog iets van die regels aan. Ze zijn enkel nog een historisch artefact dat erin moet staan opdat alles correct zou werken. Voorlopig is dat alles dat u moet weten.
<html></html> — Het <html>-element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).
<head></head> — Het <head>-element gedraagt zich als een container voor alle zaken die u in uw HTML-pagina wilt steken, maar die niet tot de inhoud behoren die u aan de gebruikers wilt tonen als die uw pagina lezen. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van uw pagina zoals u die in zoekresultaten wilt zien verschijnen, CSS om uw inhoud van stijlen te voorzien, tekensetverklaringen en meer.
<body></body> — Het<body>-element bevat de volledige inhoud die u aan webgebruikers wilt tonen als die uw pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (i.e. audio tracks) of wat dan ook.
<meta charset="utf-8"> — Met dit element bepaalt u dat de tekenset voor uw document utf-8 zal zijn. In utf-8 steken bijna alle tekens die voor alle gekende menselijke talen worden gebruikt. In wezen houdt dit in dat het nu elke tekstinhoud aankan, die u erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan u helpen om later problemen te vermijden.
<title></title> — Dit element stelt de titel van uw pagina in. Dat is de titel die in het browsertabblad verschijnt waarin uw pagina wordt geladen en die wordt gebruikt om de pagina te beschrijven als u hem als bladwijzer/favoriet instelt.

Afbeeldingen

Nu willen we onze aandacht op het afbeeldingselement vestigen:

<img src="images/firefox-icon.png" alt="My test image">

Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het src-attribuut (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.

We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :

Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest.
Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:

De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt. De tekst van ons voorbeeld hierboven "Mijn testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn: "Het Firefox logo: een brandende vos die de aarde omringt."

Tekst Opmaken

In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken

Hoofdingen

Met hoofdingen of kopelementen kunt u bepaalde delen van uw inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen <h1>–<h6> hoewel u er meestal slechts drie of vier zult gebruiken.

Paragrafen

Zoals hierboven is uitgelegd dienen <p>-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:

Lijsten

Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:

Ongeordende lijsten zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een <ul>-element.
Geordende lijsten zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een <ol>-element.

Elk artikel of onderwerp in de lijsten wordt ingebed in een <li>-element. Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,

<p>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p>

zouden we de opmaak op deze manier kunnen veranderen:


                               <p>Bij Mozilla, zijn we een globale gemeenschap van</p>

                                <ul> 
                                  <li>technici</li>
                                  <li>denkers</li>
                                  <li>bouwers</li>
                                </ul>

                                <p>die met elkaar samenwerken ... </p>

Hyperlinks

Hyperlinks zijn zeer belangrijk — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken — <a> — de a staat voor "anker". Om een stuk tekst van uw paragraaf in een link te veranderen, volgt u deze stappen :

Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".
Sluit de tekst in een <a>-element in, zoals dit:

<a>Mozilla Manifesto</a>

Geef het <a>-element een attribuut en doe dat op deze manier:

<a href="">Mozilla Manifesto</a>

De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:

<a> href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

U zou onverwachte resultaten kunnen krijgen als u https:// of http:// zou weglaten. Dit deel noemen we het protocol en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.

HTML Tags

Structurele Tags
<a>	Definieert een hyperlink
<article>	Definieert een artikel
<aside>	Bepaalt inhoud die losjes gerelateerd is aan de pagina-inhoud
<body>	Definieert de zichtbare inhoud van het document.
<br>	Produceert een lege tussen regel
<details>	Vertegenwoordigt een widget waaruit de gebruiker aanvullende informatie kan verkrijgen of besturen op aanvraag
<div>	Specificeert een verdeling of een sectie in een document.
<h1-h6>	Definieert HTML koppen
<head>	Definieert het hoofdgedeelte van het document dat informatie over het document bevat
<header>	Vertegenwoordigt de koptekst van een document of een sectie
<hgroup>	Definieert een groep koppen
<hr>	Produceert een horizontale lijn
<html>	Definieert de root van een HTML-document
<footer>	Vertegenwoordigt de voettekst van een document of een sectie
<nav>	Definieert een sectie navigatie links
<p>	Definieert een paragraaf
<section>	Definieert een sectie van een document, zoals koptekst, voettekst enz
<span>	Definieert een inline stijlloos gedeelte in een document
<summary>	Definieert een samenvatting voor het element <details>
Meta-data Tags
<base>	Definieert de basis-URL voor alle gekoppelde objecten op een pagina.
<link>	Definieert de relatie tussen het huidige document en een externe bron.
<meta>	Biedt gestructureerde metadata over de documentinhoud.
<style>	Voegt stijlinformatie (meestal CSS) in het hoofd van een document in.
<title>	Definieert een titel voor het document.
Formulier Tags
<button>	Maakt een knop waar je op kunt klikken.
<datalist>	Vertegenwoordigt een set vooraf gedefinieerde opties voor een <input> -element.
<fieldset>	Hiermee geeft u een set gerelateerde formuliervelden op.
<form>	Definieert een HTML-formulier voor gebruikersinvoer.
<input>	Definieert een invoerbesturing.
<keygen>	Vertegenwoordigt een besturingselement voor het genereren van een publiek-prive sleutelpaar.
<label>	Definieert een label voor een <input> -besturingselement.
<legend>	Definieert een bijschrift voor een <fieldset>-element.
<meter>	Vertegenwoordigt een schaalbare meting binnen een bekend bereik.
<optgroup>	Definieert een groep gerelateerde opties in een selectielijst.
<option>	Definieert een optie in een selectielijst.
<select>	Definieert een selectielijst in een formulier.
<textarea>	Definieert een tekstinvoer besturingselement met meerdere regels (tekstgebied).
Opmaak Tags
<abbr>	Definieert een verkorte vorm van een langer woord of een langere zin.
<acronym>	Definieert een acroniem.
<address>	Specificeert de contactgegevens van de auteur.
<b>	Geeft tekst vetgedrukt weer.
<bdi>	Vertegenwoordigt tekst die geïsoleerd is van zijn omgeving voor tekstopmaak die 2 kanten op kan.
<bdo>	Overschrijft de huidige tekstrichting.
<big>	geeft tekst in een groot formaat weer.
<blockquote>	Definieert een lang citaat.
<cite>	Geeft een citaat of verwijzing naar een andere bron aan.
<code>	Specificeert tekst als computer code.
<del>	Geeft een blok verwijderde tekst aan.
<dfn>	Specificeert een definitie.
<em>	Specificeert benadrukte tekst.
<i>	Tekst wordt cursief weergegeven.
<ins>	Definieert een tekstblok dat in een document is ingevoegd.
<kdb>	Specificeert tekst als toetsenbordinvoer.
<mark>	Vertegenwoordigt tekst gemarkeerd voor referentiedoeleinden.
<output>	Vertegenwoordigt het resultaat van een berekening.
<pre>	Definieert een blok met vooraf opgemaakte tekst.
<progress>	Vertegenwoordigt de voortgang van de voltooiing van een taak.
<q>	Definieert een korte inline citaat.
<rp>	Biedt fall-back haakjes voor browsers die geen ruby annotaties ondersteunen.
<rt>	Definieert de uitspraak van het karakter gepresenteerd in een ruby commentaar.
<ruby>	Vertegenwoordigt een ruby commentaar.
<samp>	Hiermee geeft u tekst op als voorbeelduitvoer van een computerprogramma.
<small>	Geeft tekst in een kleiner formaat weer.
<strong>	Duid sterk benadrukte tekst aan.
<sub>	Definieert ondertekende tekst.
<sup>	Definieert superscripted tekst.
<tt>	Geeft tekst weer in een teletype-stijl.
<var>	Definieert een variabele.
<wbr>	Vertegenwoordigt een regeleinde-mogelijkheid
Lijst Tags
<dd>	Hiermee geeft u een definitie op voor een term in een definitielijst.
<dl>	Definieert een definitielijst.
<dt>	Definieert een term (een item) in een definitielijst.
<li>	Definieert een lijstitem.
<ol>	Definieert een geordende lijst.
<menu>	Vertegenwoordigt een lijst met opdrachten.
<ul>	Definieert een ongeordende lijst.
Tabel Tags
<caption>	Definieert de titel van een tabel.
<col>	Definieert attribute values voor een of meer kolommen in een tabel.
<colgroup>	Specificeert attributen voor meerdere kolommen in een tabel.
<table>	Definieert een datatabel.
<tbody>	Groepeert een set rijen die het hoofdgedeelte van de tabeldata definiëren.
<td>	Definieert een cel in een tabel.
<tfoot>	Groepeert een reeks rijen die de kolommen van de tabel samenvatten.
<thead>	Groepeert een set rijen die de kolomlabels van een tabel beschrijft.
<th>	Definieert een kopcel in een tabel.
<tr>	Definieert een rij cellen in een tabel.
Script Tags
<noscript>	Definieert alternatieve inhoud om weer te geven wanneer de browser scripting niet ondersteunt.
<script>	Plaatst script in het document voor client-side verwerking.
Geïntegreerde Tags
<area>	Definieert een specifiek gebied binnen een afbeeldingskaart.
<audio>	Integreert een geluid of een audiostream in een HTML-document.
<canvas>	Hiermee definieert u een gebied in het document, die kan worden gebruikt om direct grafische afbeeldingen te maken (meestal JavaScript).
<embed>	Integreert een externe applicatie, meestal multimedia-inhoud zoals audio of video, in een HTML-document.
<figcaption>	Definieert een bijschrift of een legend voor een figuur.
<figure>	Vertegenwoordigt een figuur geïllustreerd als onderdeel van het document.
<frame>	Definieert een enkel frame binnen een frameset.
<frameset>	Definieert een verzameling frames of andere framesets.
<iframe>	Toont een URL in een inline frame.
<img>	Toont een inline afbeelding.
<map>	Definieert een client-side image-map.
<noframes>	Definieert een alternatieve inhoud die wordt weergegeven in browsers die geen frames ondersteunen.
<object>	Definieert een ingesloten object.
<param>	Definieert een parameter voor een object of applet-element.
<source>	Definieert alternatieve mediabronnen voor de media-elementen zoals
<time>	Vertegenwoordigt een tijd en / of datum.
<video>	Hiermee wordt video-inhoud ingesloten in een HTML-document.