Kennismaking met HTML

In deze blogpost wil ik een begin maken met de basis van HTML zodat je aan de slag kan met het maken van je eigen website.  

VOORKENNIS

Om te beginnen moet je weten dat HTML codes vaak bestaan uit tags en attributen. 

Een tag wordt gebruikt om aan te duiden wat een element moet voorstellen op een webpagina. Als voorbeeld kun je gebruikmaken van de <title>, dit is een tag die aangeeft dat het element een titel moet voorstellen. Een tag wordt afgesloten met </title>.

Een attribuut geeft extra informatie aan een tag. Bijvoorbeeld een tag van <img> geeft aan dat het een afbeelding is. Binnen deze tag kun je een bron toevoegen waar de afbeelding vandaan moet komen. Bijvoorbeeld <img src=“bureaublad/afbeelding.jpg”> src is de bron waar de afbeelding is te vinden

Voor het maken van mijn websites maak ik gebruik van ‘Sublime Text 3’ of ‘Dreamweaver’. Om te beginnen met coderen raad ik Dreamweaver aan omdat je hier ook meteen kunt zien wat je code doet op een webpagina. 

DE EERSTE CONSTRUCTIE

We beginnen met het openen van een nieuw bestand. Bovenaan je bestand zet je <!DOCTYPE html>. Dit geeft aan dat je HTML codetaal wil gebruiken. Dit geef je nog eens extra aan met de <html> die je daarna plaatst.

Met de <head> functie kun je vervolgens de titel en de metagegevens van de website weergeven voor zoekmachines zoals google. Dit wordt verder niet op je pagina getoond.



Met de tag <body> begin je de opmaak van de website. Binnen deze tag kun je experimenteren met bijvoorbeeld <h1>Dit is een kop</h1> en <p>Dit is een paragraaf</p>. Dit is het beginpunt van alle websites gemaakt met HTML. Vergeet niet om alle gebruikte tags af te sluiten een </tag>.



WIJZINGEN AANBRENGEN AAN JE TEKST

De kop kun je veranderen van <h1> naar <h2>, <h3>, <h4>, <h5> of <h6>.



Verder kun je in je paragraaf aangeven of je de tekst dik-gedrukt of onderstreept wil laten zien. Hieronder Staat een lijst van tags die je hiervoor kunt gebruiken.

TagBetekenisWat de tag doet
<strong>strongMaakt de woorden binnen de tag dik-gedrukt.
<i>italicMaakt de woorden binnen de tag scheefgedrukt.
<u>underlinedGeeft een onderstreepte tekst binnen de tag.
<br>EnterZorgt ervoor dat de tekst op een nieuwe regel begint
(De eerste drie tags moeten afgesloten worden met </tag>. De laatste tag heeft geen afsluiting nodig.)


EEN LINK TOEVOEGEN

Soms wil je graag dat een deel van je tekst verwijst naar een link. Dit kan een andere website zijn of een andere pagina van je eigen site. Dit kun je doen door een <a> tag te gebruiken. in deze tag kun je aangeven waar de link naartoe gaat met een href. bij <a href=”https://google.com/”> gaat de link naar google. Je zou dus op je website kunnen zetten <a href=”https://google.com/”> Ga naar Google </a>. De tekst ‘Ga naar Google’ wordt hier dus een link naar Google.

Als je naar je eigen pagina wilt verwijzen geef je een bestandsnaam op i.p.v. een URL. Dus, <a href=”pagina2.html”> Ga naar de 2e pagina </a>, zal verwijzen naar het bestand: pagina2.html.



In de volgende tutorial ga ik uitleggen hoe je op een simpele manier afbeeldingen en lijsten kan toevoegen en hoe je een menu kan maken.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *