Basiscursus HTML en CSS

Web


Basiscursus HTML en CSS

Elke website bestaat in ieder geval uit HTML en CSS. In deze training leer je de basis van deze programmeertalen. HTML zul je wellicht niet heel vaak gebruiken in de praktijk, maar CSS wel. Om CSS te begrijpen heb je wel kennis van HTML nodig.

web
video-instructies basiscursus html

Lesmateriaal

Klik hier om de pdf van de les te openen

Behandelde HTML-tags en CSS-declaraties

<HTML>

HyperText Markup Language

Start van elke HTML pagina

Deze code krijg je door

  • Eerst de html pagina op te slaan.
    Noem je pagina bijvoorbeeld index.html
  • en dan typ je een uitroepteken !
    en klik je op je toetstenbord op de tab toets
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Voeg meteen de link naar een stylesheet toe

Deze code krijg je door

  • Typ onder de title-tag (in de head) het woordje link
  • en klik je op je toetstenbord op de tab toets (de link naar de stylesheet wordt gemaakt)
  • Vul de naam van jouw stylesheet in tussen de “quotes” van het href-attribuut
  • Command klik op de naam van de stylesheet en maak’m aan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
</body>
</html>

Kopteksten / headings

<h1>Grootste titel</h1>
<h2>Een na grootste titel</h2>
<h3>Twee na grootste titel</h3>
<h4>Twee na kleinste titel</h4>
<h5>En na kleinste titel</h5>
<h6>Kleinste titel</h6>

Paragraaf / alinea / broodtekst

<p>Hier komt een alinea oftewel een paragraaf. Een paragraaf bevat meestal meerdere zinnen.</p>

Afbeelding

Stop je plaatjes in een map, bijvoorbeeld de map images. Gebruik in namen van de plaatjes nooit spaties.

De img-tag is een tag die geen sluit-tag nodig heeft. Dus schrijf niet <img src=”plaatje.webp”></img>

<img src="images/mijn-mooie-plaatje.webp" alt="beschrijf altijd je plaatje, wat stelt het voor?">

Link

Hieronder staat een link naar een afbeelding

<a href="images/jouw-plaatje.webp">Bekijk mijn plaatje</a>

Hieronder staat een link naar een afbeelding met in de link ook de img-tag. Dit is dan een plaatje dat linkt naar zichzelf. Dus eerst de link-tag openen, dan de img-tag en dan weer de link-tag afsluiten.

<a href="images/jouw-plaatje.webp"><img src="images/jouw-plaatje.webp" alt="Beschrijf jouw plaatje in het alt-attribuut"></a>

Hieronder staat een link naar een webpagina, in dit geval de contact pagina

<a href="contact.html">Contact</a>

De link openen in een nieuw tabblad doe je met het attribuut target=”_blank”

<a href="contact.html" target="_blank">Contact</a>

{CSS}

Cascading StyleSheets

Kleur en achtergrondkleur

h1{
color: red;
background-color: pink;
}

Lettergrootte

Lettergrootte kan in procenten (%), pixels (px) en nog veel meer. Hieronder wordt de lettergrootte van de alinea 16px.

p{
font-size: 16px;
}

Regelafstand / interlinie

In onderstaande code wordt de regelafstand van de p-tag anderhalf x zo groot als de lettergrootte (font-size). Omdat de lettergrootte hier 16px is, is de regelafstand 16 x 1.5 = 24px.
Je kunt de regelafstand ook in px zetten… dan is de regelafstand niet meer afhankelijk van de lettergrootte (font-size).

p{
font-size: 16px;
line-height: 1.5;
}

rand

Onderstaande code maakt een rode rand om de h1 van 10px dik

h1{
border-width: 10px;
border-style: solid; /* dashed, dotted, double, etc... kan ook */
border-color: red;

/* er is ook een verkorte schrijfwijze: */
border: 10px solid red;
}

Kolom maken

Kolom in HTML

Een kolom is een niet te breed blok voor tekst en/of afbeeldingen. Een kolom maak je omdat een hele brede pagina vol tekst niet lekker leest en er niet fijn uitziet.

In onderstaand voorbeeld wordt de article-tag de kolom. Maar het kan ook met een div of een main of nog een andere tag

<article>
   <h1>Dit is de titel van de kolom</h2>
   <p>En nog wat paragrafen natuurlijk</p>
   <!-- en je kan echt alles hierin zetten, zoals filmpjes, plaatjes, etc... -->
</article>

Kolom in CSS

Hieronder staat de code om van de article-tag een kolom te maken met de CSS. Je geeft de article-tag een breedte (width) en met margin zet je hem in het midden van je pagina.

article{
   width: 60vw; /* 60vw = 60% van je pagina breedte*/
   /*
   De eerste 0px betekent: boven en onder geen ruimte
   De tweede auto betekent: links en rechts zoveel mogelijk ruimte
   */
   margin: 0px auto; 
}