Inleiding
HTML
HTML is de basis opmaak taal waarin websites worden geschreven. HTML staat voor Hypertext Markup Language. Met HTML wordt de structuur van de website aangegeven. Naast HTML wordt veel gebruik gemaakt van CSS en JavaScript.
In deze cursus zullen HTML gaan leren en CSS. Met deze twee opmaaktalen kunnen wij een schitterende website bouwen.
Aan de slag
Om een website te maken heb je niet veel programmatuur nodig. Je hebt een tekst-editor nodig en een web-browser om je werk te testen. Als tekst editor volstaat Notepad, maar het leven wordt een stuk makkelijker gemaakt als er gebruik wordt gemaakt van een geavanceerde editor die jou veel programmeer werk uit handen neemt.
In deze cursus zullen wij repl.it gebruiken. Dit is een online webomgeving waar je met verschillende programmeertalen aan de slag kan gaan, zonder dat je daarbij allerlei programma's moet installeren.
Andere mogelijkheden zijn VScode, SublimeText, Atom, Webstorm. VScode is daarbij een aanrader, gratis en makkelijk in gebruik.
Starten met repl.it
Account aanmaken
Maak een account aan bij repl.it gebruik hiervoor je school email-adres en kies een veiligwachtwoord. (Uiteraard niet hetzelfde als je wachtwoord dat je voor psg gebruikt)
https://replit.com/
Project maken
Je hebt zojuist een repl.it account aangemaakt. Nu wordt het tijd om een project aan te maken. Als we dat hebben gedaan kunnen we aan te slag.
Na het inloggen bij repl.it zie links boven een button met 'create'. Als je daarop klikt kan je voor jou project een workspace aanmaken. Kies hierbij bij template voor 'HTML, CSS, JS'
Kies je titel en klik op + Create Repl
(het aanmaken duurt heel even ... )
Start bestanden index.html, script.js, style.css
Standaard maakt repl.it 3 bestanden voor je aan. Hieronder bespreken we ze kort.
index.html
Bijna elke website begint met een index.html. Dit is de startpagina van een website. De extensie .html geeft aan dat de gebruikte code HTML is. De HTML pagina is uit een aantal delen opgebouwd. De eerste regel is de doctype.
<!doctype html>
Je hebt verschillende doctypes voor HTML. Dit is de meest recente doctype regel en zal de meest recente HTML tags ondersteunen.
Daarna volgt
<html>
...
</html>
<html> is een openingstag. Hier start de html code. Onder aan je pagina staat </html>. Dit is de sluitingstag. Hier wordt je html pagina mee afgesloten. Vaak wordt aan de html-tag een taal attribuut meegegeven (een attribute is een een stukje extra informatie van html tag). Een voorbeeld van het gebruik van Engelse tekst op de pagina zou er zo uitzien
<html lang="en">
Binnen de html tag zien we twee verschillende tags (head en body). Deze moeten dan ook altijd aanwezig zijn.
<html lang="nl">
<head>
...
</head>
<body>
...
</body>
</html>
Alles wat binnen de <head> tag staat komt niet op de pagina. Maar vertelt iets over de pagina. Bijvoorbeeld de titel
<title>mijn homepage titel</title>
Deze titel zie je niet op je pagina, maar zie je boven in je browser balk.
Naast title worden vaan meta tags meegegeven, links gemaakt naar CSS bestanden en Javascript bestanden ingeladen. (al deze zaken zie je niet op je website!)
Alles wat in de <body> tag staat komt op je webpagina te staan. Dus deze gaan we straks vullen met HTML. Het is heel gebruikelijk dat dit heel veel regels code is. De head daarintegen is vaak kort en krachtig.
Omdat bijna elke pagina opmaak heeft wordt bijna altijd een CSS bestand ingeladen. Dit gebeurt dus in de head. Daarvoor wordt de volgende tag gebruikt.
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
Dit is een verwijzing naar het CSS bestand.
Style.css
In style.css komt opmaak code te staan. Aan de extensie .css kan je zien dat de inhoud van dit bestand CSS code is. De opmaak van CSS code is heel strikt. Let op dubbele punten, punt komma's en haakjes. Als er een klein dingetje fout is, werkt je hele bestand vaak niet meer. En wordt er geen opmaak meer gebruikt.
Een voorbeeld van een CSS bestand om mee te starten zou het volgende kunnen zijn
html, body {
margin: 0;
height: 100%;
width: 100%;
}
Hierin wordt verteld dat de html en body tag van je webpagina geen rand krijgen en de maximale hoogte en breedte krijgen.
Let op start haakje { en het afsluit haakje }
Elke eigenschap start met een eigenschap, daarna een : dan de waarde en dan een ;
Script.js
In dit script.js bestand kan je Javascript code plaatsen. In de head van je HTML bestand kan je deze code inladen. D.m.v:
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
Meestal worden de script.js bestanden in de head ingeladen. In sommige gevallen gebeurt dat pas onderaan de pagina. Omdat Javascript een beetje buiten de cursus valt, zullen wij het alleen in de head plaatsen (als we het gebruiken). LET OP dat is anders dan het start template van repl.it
HTML en CSS (proloog)
Onze eerste pagina
We gaan onze eerste index.html pagina vorm geven. Maar hiervoor index.html helemaal leeg.
Daarna type je een ! direct gevolgd door een <tab> (toets links op je toetsen board) De volgende code zal voor je worden aangemaakt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Geef je pagina een goede titel. (pas <title>Document</title> aan)
Als je je pagina bekijkt door op RUN te klikken (groene knop bovenaan). Dan zal je een lege pagina te zien krijgen.
Nu gaan we onze pagina wat inhoud geven.
We starten met een header. Hier hebben we zes keuzes h1, h2, h3, h4, h5 en h6. h1 is het grootst en h6 het kleinste. Let op de header is de enige tag met getallen er achter. Geen enkele andere tag heeft dat.
We gaan een header op onze pagina plaatsen. Let op binnen de body-tag
...
</head>
<body>
<h1>Mijn eerste website</h1>
</body>
</html>
Als je je pagina uitvoert krijg je de header "Mijn eerste website" groot in beeld. We gaan onze h1 wat opmaak geven. Dit doen we in CSS, er zijn drie manieren om dit te doen. Inline, style in pagina en extern CSS bestand.
Let op dat bij jou eindproject alleen CSS code in een extern CSS bestand wordt geaccepteerd. Dus de eerste twee opties vervallen. Toch is het handig om deze misschien wel even gezien te hebben, zodat als je het tegen komt en een voorbeeldje ziet het wel begrijpt.
Inline style
Stel dat we de grote van onze letters 3x zo groot willen maken als de standaard tekst op de pagina. Dan kan dat door
<h1 style="font-size: 3rem;">Mijn eerste website</h1>
In de style attribute kunnen wij onze HTML tag opmaak geven. Je kan meerdere eigenschappen toekennen. Stel dat je de titel ook nog in het paars wilt.
<h1 style="font-size: 3rem; color: purple;">Mijn eerste website</h1>
Je code wordt snel onleesbaar als je veel eigenschappen wilt toevoegen. Daarom is het niet toegestaan voor je eindproduct.
style op pagina
Dit is een handige manier om even te testen of je style werkt. Het is wat overzichtelijker.
Stel wil willen onze header weer 3x zo groot en in het paars.
<style>
h1 {
font-size: 3rem;
color: purple;
}
</style>
<h1>Mijn eerste website</h1>
We starten een style tag. En geven binnen de style tag de h1 tag onze gewenste eigenschappen.
Let op dit mag ook niet in je eind project gebruikt worden. Dit alleen gebruiken om even snel te testen.
Extern style sheet
Om je html pagina netjes en overzichtelijk te houden plaatsen we al onze CSS code in een extern CSS bestand.
Voeg aan je index.html de volgende regel toe in je head.
...
<link rel="stylesheet" href="style.css" type="text/css">
</head>
Plaats nu in je style.css dezelfde code als voorgaand voorbeeld.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
h1 {
font-size: 3rem;
color: purple;
}
In je index.html
...
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Mijn eerste website</h1>
</body>
</html>
Omdat in de header het CSS bestand wordt ingeladen krijgt de h1 tag opmaak.
Dit is de methode die wij graag zien.
HTML en CSS (<p> tag en classes)
Paragraaf
Bijna elke pagina bevat tekst. Tekst wordt op een HTML pagina meestal tussen paragraaf tags gezet.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error, eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga, ullam!</p>
Deze fake tekst kan je makkelijk aanmaken door het typen van lorem <tab>.
Omdat de < en > haakjes veel type werk is kan je steeds gebruik maken van tagnaam <tab>. Voor onze <p> p <tab>
Waarschijnlijk willen we de tekst niet strak langs de rand van het scherm. Hiervoor kunnen we een padding toevoegen. Dit doen we in ons CSS bestand.
p {
padding: 10px;
}
Onze h1 header tekst willen we graag in het midden van de pagina. Dit doen we ook uiteraard met CSS
h1 {
font-size: 3rem;
color: purple;
text-align: center;
}
Zelfde HTML tags met eigen opmaak
Onze pagina heeft nu een header en een paragraaf. Nu gaan we een tweede paragraaf toevoegen.
<body>
<h1>Mijn eerste website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error,
eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga,
ullam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ducimus facere illo itaque nobis perspiciatis!
Assumenda autem blanditiis cupiditate dolore fugiat illo laudantium magnam quasi qui, quod recusandae sed
voluptatibus.</p>
</body>
We willen graag de eerste paragraaf met een rode tekstkleur en de tweede in het groen. Hiervoor gaan we in ons CSS bestand twee nieuwe eigenschappen toevoegen.
p.rood {
color: red;
}
p.groen {
color: green;
}
Deze opmaak kunnen we aan de p tags toevoegen d.m.v. een class.
<h1>Mijn eerste website</h1>
<p class="rood">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error,
eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga,
ullam!</p>
<p class="groen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ducimus facere illo itaque nobis perspiciatis!
Assumenda autem blanditiis cupiditate dolore fugiat illo laudantium magnam quasi qui, quod recusandae sed
voluptatibus.</p>
</body>
Onze class="rood" en class="groen" kunnen we nu alleen gebruiken voor de p tag. Als we dit ook voor bijvoorbeeld een h1 tag willen gebruiken kan dat alleen als we in ons CSS bestand het volgende toevoegen.
h1.rood {
color: red;
}
Om de class="rood" op elke tag te laten werken kan je in je CSS bestand ook de tag weglaten
.rood {
color: red;
}
Nu kunnen we ook het volgende doen
<h1 class="rood">Mijn eerste website</h1>
<p class="rood">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio
dolores error,
eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga,
ullam!</p>
Vaak is het handig om je CSS flexibel te maken zodat het bij alle tags toepasbaar is.
Meerdere eigenschappen (classes)
Stel dat je pagina xx een h1 tags bevat. Ze moeten allemaal 3x de grote van het standaard lettertype en de eerste moet rood en de twee tekst is groen worden.
<h1>Ik ben rood en groot</h1>
<h1>Ik ben groen en groot</h1>
In ons CSS bestand gaan we drie classes aanmaken
.groot {
font-size: 3rem;
}
.groen {
color: green;
}
.rood {
color: red;
}
Nu gaan we de classes toevoegen aan onze HTML code
<h1 class="groot rood">Ik ben rood en groot</h1>
<h1 class="groot groen">Ik ben groen en groot</h1>
Meerdere classes kunnen worden toegevoegd, als scheiding wordt een spatie gebruikt. Zorg ervoor dat je je classes een goede naam geeft en niet te veel eigenschappen zodat je deze steeds weer kan herbruiken. Een betere naam voor groot zou zijn geweest groot3. Je zou dan ook nog een groot2 en groot4 kunnen maken.
Voorbeeld van handige class namen
.groot2{
font-size: 2rem;
}
.groot3 {
font-size: 3rem;
}
.rood {
color: red;
}
.dik {
font-weight:bold;
}
.center {
text-align: center;
}
Je kan nu in een tag het volgende gebruiken
<h1 class="rood groot2 dik center">Titel is rood, groot, vet en gecentreerd</h1>
HTML tags
Tekst opmaak
Er zijn diverse HTML tags om een tekst op te maken. Hiervoor is geen CSS nodig
Line break
HTML leest lege ruimte (spaties en enters) als één enkele spatie. Wil je naar een nieuwe regel gebruik dan het break comando br. Deze wordt alleen geopend en niet afgesloten
<p>Dit staat op regel 1<br>Dit staat op regel 2</p>
Dit geeft hetzelfde resultaat maar is beter leesbaar
<p>
Dit staat op regel 1<br>
Dit staat op regel 2
</p>
Dik, schuin, onderstreept
<p>
<strong>dikgedrukt</strong>, <i>schuin gedrukt</i>, <u>onderstreept</u>,
<b>dikgedrukt</b> <em>schuingedrukt</em>
</p>
Voor dik gedruk: strong of b
Voor schuingedruk i of em
Voor onderstreept u
Doorgestreept
Wat minder gebruikt is doorgestreept dit kan met de s of met del
<s>doorgestreept</s>
<del>doorgestreept</del>
super tekst
1e kan met
1<sup>e</sup>
Gemarkeerd
<mark>gemarkeerd</mark>
Computer code
Voor het leesbaar maken van computer code kan de tag code of de tag pre worden gebruikt
<pre>Spaties en enters zie je nu wel
dit maakt dus een lege ruimte
zoals je ziet
</pre>
<code>
Code en pre geven ongeveer het zelfde resultaat
</code>
Horizontale lijn
De hr tag maakt een horizontale lijn over het scherm. Door middel van CSS kan je deze opmaken.
HTML
<hr>
CSS
hr {
color: lightblue;
}
Afbeelding
Een website zonder afbeeldingen is natuurlijk een beetje saai. Omdat een website vaak meerdere afbeeldingen bevat is het handig om een mapje te maken waar je al je afbeeldingen inzet.
Zie onderstaande om een nieuw mapje te maken. Noem deze 'images'
Zoek een afbeelding (bv met google afbeeldingen) sla deze op, bijvoorbeeld in 'downloads'
Nu gaan we de afbeelding aan onze repl.it omgeving toevoegen. Zie onderstaande
Selecteer je bestand dat je gedownload hebt en klik op 'Openen'.
Sleep het bestand nog even in het 'images' mapje
Nu gaan we onze afbeelding toevoegen aan onze index.html pagina. Let op bij ons heet de afbeelding computer.png. De afbeelding wordt toegevoegd met het src attribute (source)
<img src="images/computer.png" alt="computer">
Let op het attribuut alt is verplicht. Dit is voor browsers die geen afbeelding kunnen laten zien.
Het is mogelijk om ook een attribuut voor de width/heigth mee te geven. Maar wij zien dit liever in de de CSS.
img {
width: 300px;
height: 200px;
}
Als je alleen de width of height meegeeft blijft het aspect-ratio van de afbeelding behouden. Dus geen vervorming van de afbeelding.
Het zoeken van afbeeldingen of het maken van afbeeldingen kan een tijdrovende bezigheid zijn. Je kan ook dummy afbeeldingen gebruiken. Om een pagina globaal in te delen.
Kijk op https://dummyimage.com/ voor dummy afbeeldingen.
Voorbeeld: (zwart met blauwe letters afmeting 300x200pixels)
<img src="https://dummyimage.com/300x200/000/0ff">
Uiteraard kan je een afbeelding dmv CSS opmaken. Bijvoorbeeeld een ronde rand.
.rond {
border-radius: 5px;
}
<img class="rond" src="images/computer.png" alt="computer">
Link
Een website staat voor met links naar andere pagina's / websites. Een link kan je maken met gebruik van de a tag
<a href="index.html" target="_blank">Link naar index.html</a>
De tekst tussen <a ..> en </a> zal op je scherm komen dus in dit geval "Link naar index.html".
Het attribuut target is optioneel. target="_blank" zal de link openen in een nieuw tabblad.
Het attribuut href is de verwijzing van de link. Dit is een andere pagina of een url.
CSS opmaak van een link kan op onderstaande manier. Let op een link kan in veel verschillende staten verkeren. Dus ook wat meer code nodig voor de opmaak.
/* eigenschappen voor elke link */
a {
text-decoration: none; /* geen lijntje onder de link */
}
/* nog niet bezocht link */
a:link {
color: red;
}
/* reeds bezocht link */
a:visited {
color: green;
}
/* muis over link */
a:hover {
color: hotpink;
}
/* geselecteerde link */
a:active {
color: blue;
}
Link binnen de pagina
Een webpagina kan heel lang zijn. Soms wil je je gebruiker naar een tekst ergens binnen je pagina sturen. Dat kan door het gebruik van id's.
Geef het element waar je naartoe wilt verwijzen een id bv:
<h3 id="tekst1">Tekst 1</h3>
Nu kan je een link maken waarmee je naar dit element wordt doorgestuurd.
<a href="#tekst1">Ga naar tekst 1</a>
Een lang pagina voorbeeld:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
p {
margin-bottom: 200px;
width: 400px;
font-size: 1.5rem;
}
</style>
<a href="#tekst1">Ga naar tekst 1</a>
<a href="#tekst2">Ga naar tekst 2</a>
<a href="#tekst3">Ga naar tekst 3</a>
<h3 id="tekst1">Tekst 1</h3>
<p>Tekst 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores assumenda atque aut blanditiis
dolor ducimus eius eligendi, et ex incidunt, minus placeat, quibusdam quos rerum soluta tempore vel voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid asperiores autem beatae consectetur
cumque, dolorem error est fugit inventore ipsam natus neque nesciunt pariatur, placeat qui quos voluptate
voluptatibus?
</p>
<h3 id="tekst2">Tekst 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores neque numquam provident quasi ut. Cumque
doloremque dolores dolorum, error inventore iste laborum quidem! Accusamus eum ex iste nulla numquam suscipit? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi corporis distinctio doloremque, ducimus
ea harum itaque magni minima minus nihil nulla praesentium quaerat quasi repellat sed ullam velit vitae. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Accusantium, aliquam beatae, consequatur earum eligendi est et
excepturi, exercitationem ipsam necessitatibus nesciunt nisi odit perferendis possimus quibusdam quo ratione sint
temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eos labore maiores necessitatibus
quos recusandae similique vitae. Aliquid fuga odio quae quas totam. Adipisci delectus facere itaque, sed sequi
velit.
</p>
<h3 id="tekst3">Tekst 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate enim error ex odio quisquam ratione suscipit.
Distinctio, excepturi sunt! Animi doloremque eaque, expedita inventore laborum perferendis praesentium quae sed
unde! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at consequatur culpa deserunt doloremque earum,
error esse eveniet ipsa itaque magni nesciunt quia sed sunt tempora tenetur velit, veritatis, voluptatum. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Atque consequuntur esse maxime, molestiae nesciunt nobis
possimus saepe similique sit vero. Accusamus asperiores, ex expedita facilis fugit harum laudantium minus vitae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam architecto facere incidunt, ipsum
laudantium, magnam necessitatibus quasi rem repellendus repudiandae temporibus? Aperiam cupiditate delectus eligendi
esse nihil quam tempora?
</p>
</body>
</html>
Blok element
Een div tag wordt eigenlijk alleen maar gebruikt voor de opmaak van een pagina. De tag zelf doet niets. Belangrijk om te weten is dat een div regel vullend is.
<style>
.bg-gray {
background-color: lightgray;
}
</style>
<div class="bg-gray">Ik ben een tekst</div>
Door de achtergrond kleur kan je zien dat het div element de hele pagina breedte gebruikt.
Vaak worden delen van een pagina in een div geplaatst om deze een margin / padding te geven.
Hieronder het verschil tussen beide
Margin geef ruimte om het div-element. En padding geeft ruimte binnen het div-element.
Gebruikte code voor het voorbeeld
<style>
div {
background-color: lightgray;
}
.blok1 {
margin: 20px;
}
.blok2 {
padding: 20px;
}
</style>
<div class="blok1">Margin 20px</div>
<div class="blok2">Padding 20px</div>
Achtergrond afbeelding
Een div element kan je met CSS ook een achtergrond afbeelding geven.
Hiervoor plaats je een afbeelding in je map 'images' in dit geval 'twinkel.jpg'
<style>
.twinkel {
background-image: url("images/twinkel.jpg"); /* de achtergrond afbeelding*/
/* overige opmaak*/
color: white;
font-size: 3rem;
height: 150px;
padding: 10px;
}
</style>
<div class="twinkel">Zie mijn achtergrond</div>
Je kan ook de doorzichtigheid van je afbeelding aanpassen. (dit kan ook bij kleuren)
opacity: 0.25;
Waarde van 0-1 waarbij 0 volledig doorzichtig en 1 niet doorzichtig.
Flexbox (uitlijning van elementen)
Met flexbox kunnen we blokken met code uitlijnen op onze pagina. Meestal gebruiken we daarvoor de div-tag.
In dit voorbeeld zullen 4 verschillende soorten uitlijning laten zien op een pagina regel.
Voor dit voorbeeld is onderstaande code gebruikt.
<style>
/* Let op de style komt natuurlijk in een stylesheet, dit is alleen als voorbeeld */
body {
margin: 0;
}
div > div { /* elke div in een div krijgt deze eigenschappen */
background-color: blue;
width: 60px;
height: 40px;
}
.block {
display: flex;
gap: 20px; /* Ruimte tussen de blokken */
margin: 10px; /* ruimte om het blok heen */
}
.start {
justify-content: flex-start; /* zet alles links */
}
.end {
justify-content: flex-end; /* zet alles rechts */
}
.center {
justify-content: center; /*zet alles in het midden*/
}
.between {
justify-content: space-between; /* vult de gehele ruimte op */
}
</style>
<h3>display:flex; justify-content:flex-start; (class="block start)"</h3>
<div class="block start">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<h3>display:flex; justify-content:flex-end; (class="block end)"</h3>
<div class="block end">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<h3>display:flex; justify-content:flex-center; (class="block center)"</h3>
<div class="block center">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<h3>display:flex; justify-content:space-between; (class="block between)"</h3>
<div class="block between">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Dus door een combinatie van display: flex; en justify-content: ...; kan je de div-elementen daarbinnen uitlijnen. (Dit hoeven overigens geen div-elementen te zijn. Het werkt bijna met elke HTML tag.
Menu balk
We gaan nu een menu balk maken om van de ene pagina naar de andere pagina te kunnen navigeren. Uiteraard komt onze balk op elke pagina. Zodat we ook weer terug kunnen.
Ons menu komt er uit te zien als onderstaande afbeelding
Om onze HTML code overzichtelijk te houden gebruiken we voor het navigatie menu de nav-tag.
Dan is alleen maar om je HTML code leesbaar te houden. Je zou hier ook bijvoorbeeld een div-tag kunnen gebruiken.
<nav>
<div class="nav-left">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="nav-right">
<div>Ingelogd</div>
</div>
</nav>
Het menu bestaat uit twee delen. Het linker deel (nav-left) en het rechter deel (nav-right).
Elke link die stuurt je naar # dat is een link naar de huidige site. Uiteraard komen hier ipv de # bijvoorbeeld about.html of'contact.html te staan.
De opmaak van het menu is iets ingewikkelder. We starten met de opmaak van de nav
nav { /* het hoofdblok vult de hele ruimte op */
display: flex;
justify-content: space-between;
padding: 5px;
background-color: lightgray;
font-size: 1.5rem; /* grootte van letters */
font-weight: bold;
}
Je ziet dat gekozen is voor display: flex; en justify-content: space-between; hierdoor komt de linker en rechterkant van het menu op de juiste plaats.
Uiteraard willen we onze body zonder margin (witte rand om ons menu) dus als je body dit nog niet heeft voeg dit dan toe
body {
margin: 0;
}
Nu gaan we het linker menu opmaken
.nav-left { /* dit links uitlijnen */
display: flex;
justify-content: flex-start;
gap: 10px; /* ruimte tussen de links */
}
Omdat ons rechter menu maar één item heeft is de gap: 10px; niet nodig
.nav-right { /* dit rechts uitlijnen */
display: flex;
justify-content: flex-end;
}
Nu gaan we de links zelf wat opmaak geven
a {
text-decoration: none;
}
a:hover {
color: white;
}
nav > div > a { /* de a in de div in de nav (bv link 1)*/
padding: 5px;
color: black;
}
Zie paragraaf links voor meer uitleg over het link element <a>.
Nu moeten we de div aan de rechterkan ook opmaak geven. Als dit ook een link was geweest, dan was dat niet nodig geweest.
nav > div > div {
background-color: gray;
border-radius: 3px;
padding: 3px;
color: beige;
}
En klaar is ons menu.
Span (opmaak van tekst)
Je hebt een stuk tekst en wilt hier een bepaald wordt accentueren dan kan dat door gebruik van de span tag. De span tag doet zelf niets. Maar geeft je de mogelijkheid om CSS toe te voegen
Voorbeeld
<p>Ik vind <span class="rood">rood</span> een mooie kleur</p>
In je CSS bestand komt dan zo iets:
.rood {
color: red;
}
Tabel
Om gegevens overzichtelijk weer te geven wordt vaak gebruik gemaakt van een tabel.
Een tabel bestaat uit een aantal rijen en kolommen.
<table>
<tr>
<td>rij 1 kolom 1</td>
<td>tij 1 kolom 2</td>
</tr>
<tr>
<td>rij 2 kolom 1</td>
<td>rij 2 kolom 2</td>
</tr>
</table>
De tag tr staat voor table-row (tabel rij). En td staat voor table-data (kolom veld in een rij). Met als resultaat
Vaak wil je om je cellen randen hebben zodat je duidelijk kan zien welke inhoud bij welke cel hoort.
De opmaak gebeurt uiteraard weer in CSS
table {
border-collapse: collapse; /* anders krijg je vreemde randen*/
width: 50%; /* breedte van je tabel */
}
td {
border: 1px solid black; /* een rand om elke cel */
padding: 5px; /* een stukje ruimte tussen de rand en de tekst */
}
Vaak wil je je tabel een koptekst geven. Dit kan met de th-tag. Bijvoorbeeld
<table>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>rij 1 kolom 1</td>
<td>rij 1 kolom 2</td>
</tr>
<tr>
<td>rij 2 kolom 1</td>
<td>rij 2 kolom 2</td>
</tr>
</table>
Omdat je nu ook je th opmaak wilt geven kan je je CSS aanpassen naar
table {
border-collapse: collapse; /* anders krijg je vreemde randen*/
width: 50%; /* breedte van je tabel */
}
td, th {
border: 1px solid gray; /* een rand om elke cel */
padding: 5px; /* een stukje ruimte tussen de rand en de tekst */
text-align: left; /* tekst link (voor th) standaard center */
}
Voor de leesbaarheid wordt de achtergrond van de rijen vaak om en om een tint gegeven. Gebruik hiervoor de volgende CSS
tr:nth-child(even) {
background-color: whitesmoke;
}
Elke even tr rij krijgt dan een achtergrondkleur.
Lijsten
Soms wil je opsomming maken van items. Bijvoorbeeld een todo lijst.
- Frans leren
- Wiskunde maken
- Kamer opruimen
We kunnen dit maken met de li tag (afkorting van list). Een li is een child element (valt binnen een andere tag) van een ul (unordered list) of een ol (ordered list)
Bovenstaande lijstje krijg je alsvolgt, dit is een unorderd list
<ul>
<li>Frans leren</li>
<li>Wiskunde maken</li>
<li>Kamer opruimen</li>
</ul>
Ordered list
- Frans leren
- Wiskunde maken
- Kamer opruimen
<ol>
<li>Frans leren</li>
<li>Wiskunde maken</li>
<li>Kamer opruimen</li>
</ol>
Lijsten opmaken
Bij een unorderd list kan je de rondjes voor elk item vervangen door allerlei andere tekens, bv vierkantjes
li {
list-style-type: square;
}
Comments (uitleg code)
Soms wil je in je code een stukje uitleg geven zodat je volgende keer nog weet wat er gebeurt. Je wilt niet dat dit op je pagina zichtbaar is. Dit kan door het gebruik van comments
<!-- hier tussen komt niet op je pagina, wel in je broncode -->
Je kan hiermee ook meerdere regels niet laten uitvoeren start met <!-- en eindig met -->
Drop down
Soms wil je de gebruiker niet alles laten zien. Alleen als deze meer wil zien kan dat door middel van een klik. Vaak wordt dit opgelost door JavaScript. Maar het kan ook gewoon in HTML
<details>
<summary>Ik verberg iets</summary>
Dit is verborgen en wordt zichtbaar als erop geklikt is
</details>
Na klikken
Layout
Het is netjes om je pagina op te bouwen aan de hand van layout elementen
<header> - De header van een document<nav> - Navigatie links<section> - Een onderdeel van de website<article> - Artikel (opzich zelf staand stuk tekst bv een aantal paragrafen)<aside> - Naast de content (denk aan een balk aan de zijkant voor links/reclame)<footer> - Vaste tekst onder aan elke pagina
Bij w3schools kan je met deze layout parameters spelen. Ze geven ook een heel voorbeeld van een pagina opzet. Ik ben zelf een grote voorstander van een flexbox layout of een grid layout: https://www.w3schools.com/html/html_layout.asp
Viewport
Je wilt graag dat je website op diverse apparaten leesbaar is voeg daarom de viewport setting toe aan je html head
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Favicon (logo in het tabblad)
Het is mooi om bij jou tablad een icoontje te hebben staan.
Een flavicon kan je hier maken: https://www.favicon.cc/
Als je klaar bent, zorg je ervoor dat jou flavicon in jou map 'images' komt te staan. De naam van jou favicon is altijd favicon.ico. Hierbij is .ico de bestandsextensie. Er worden steeds meer bestandsextensies geaccepteerd door browsers. (maar voor oude browsers het het handig om nog steeds .ico te gebruiken)
In onze head van onze html pagina plaatsen we nu
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
Valide HTML
Een browser kan zeer veel van jou HTML fouten eruit halen en dan toch laten zien wat jij oorspronkelijk van plan was. Dit wil niet zeggen dat we maar wat moeten aan klooien met onze HTML code. Probeer altijd aan onderstaande voorwaarde te voldoen
- Alle HTML tags zijn in kleine letters
<p>...</p> en niet <P>...</P>
- Alle HTML attributes zijn in kleine letters
<a href="#">link</a>
- Eigenschappen van een attribuut staat tussen dubbel quotes
<p class="rood"> ...</p>
- Alle opening-tags worden afgesloten, uitgezonderd br, hr, meta en input
- Begin met
<!DOCTYPE html>
- Elke pagina heeft een title (in de head)
<title>Title</title>
- Alle content komt binnen de <body> .. </body>
- Inspringen html code
<!-- goed -->
<ul>
<li>Londen</li>
<li>Parijs</li>
</ul>
<!-- fout -->
<ul>
<li>Londen</li>
<li>Parijs</li>
</ul>
- Voeg de taal toe
<html lang="en">
- Voeg de view port toe in de head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Alle CSS code in een stylesheet
- Alle bestandsnamen in kleine letters
Heb je aan alle voorwaarde voldaan dan kan je je html code controleren op juistheid.
https://validator.w3.org/
