Deel 2: Introductie tot HTML

Web Design

Pilaren van het web

Introductie tot HTML

De pilaren van het web

Wat is HTML?

Introductie tot HTML

HTML

  • HyperText Markup Language
  • ≠ programmeertaal

  • Bestaat uit tags

  • Iedere tag wordt ook wel een element genoemd

  • Ieder element heeft zijn eigen magie

Anatomie HTML

Introductie tot HTML

Anatomie HTML

  1. Tweeledige Tags
    Bestaan uit een opening tag en closing tag
<p>...</p>

Anatomie HTML

  1. Zelfsluitende tags
    Hoeft geen closing tag
<img >

Anatomie HTML

Attribuut
Wordt gebruikt om elementen aan te passsen

<img src="..." >

De paragraaf tag

Introductie tot HTML

Hoi hoi allemaal!

Dit is een beetje text in een textbestandje.

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal! Dit is een beetje text in een textbestandje.

<p>Hoi hoi allemaal!</p>

<p>Dit is een beetje text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!


Dit is een beetje text in een textbestandje.

Heading tags

Introductie tot HTML

Heading tags

  • Dit wordt gebruikt om titels aan te duiden
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
<p>Hoi hoi allemaal!</p>

<p>Dit is een beetje text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!


Dit is een beetje text in een textbestandje.

<h1>Hoi hoi allemaal!</h1>

<p>Dit is een beetje text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!

Dit is een beetje text in een textbestandje.

<p>Hoi hoi allemaal!</p>

<p>Dit is een beetje text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!


Dit is een beetje text in een textbestandje.

De <em> & <strong> tags

Introductie tot HTML

De <em> & <strong> tags

  • Deze worden gebruikt om tekst te benadrukken



    Nesten van tags!
<p>Dit is een <em>beetje</em> tekst</p>
<p>Dit is een <strong>beetje</strong> tekst</p>
<h1>Hoi hoi allemaal!</h1>

<p>Dit is een <em>beetje</em> text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!

Dit is een beetje text in een textbestandje.

<h1>Hoi hoi allemaal!</h1>

<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!

Dit is een beetje text in een textbestandje.

Unordered list

Introductie tot HTML

Unordered List

  • Dit element wordt gebruikt om aan te geven dat elementen deel zijn van eenzelfde lijst.
<p>Mijn todo lijst:</p>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ul>

Unordered List

  • Een <ul> mag enkel List Item elementen bevatten. <li>
<p>Mijn todo lijst:</p>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ul>

Ordered List

Een <ol> of Ordered List werkt hetzelfde als een <ul> maar dit element wordt gebruikt voor lijsten waar de volgorde belangrijk is.

<p>Mijn todo lijst:</p>
<ol>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ol>
<h1>Hoi hoi allemaal!</h1>

<p>Mijn todo lijst:</p>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ul>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!

Mijn todo lijst:

  • Eat
  • Sleep
  • Dance
  • Repeat
<h1>Hoi hoi allemaal!</h1>

<p>Mijn todo lijst:</p>
<ol>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ol>

Mijn-textbestand.html

C://Mijn-textbestand.html

Hoi hoi allemaal!

Mijn todo lijst:

  1. Eat
  2. Sleep
  3. Dance
  4. Repeat

Semantische HTML

Introductie tot HTML

Semantische HTML

Semantiek geeft je webpagina betekenis voor Computers.

 

Het laat Computers toe, je pagina correct te interpreteren en hierop in te spelen.

Voordelen

  • SEO (Search Engine Optimalisation)
  • Accessibility 
  • Geeft je content betekenis 
  • Haakjes voor andere tools om hier op verder te bouwen (Browsers, zoekmachines, schermlezers, data analyse, chatbots...)

DOM

Document Object Model: in simpele taal is dit de HTML structuur en content nadat het door een browser geïnterpreteerd is.

Parent

Parent wordt gebruikt om elementen te benoemen die semantisch wrappend zijn

 

body is de parent van p

ul is de parent van li

body is een parent van li

<body>
  <p>HTML</p>
  
  <ul>
    <li>jipie</li>
    <li>ja</li>
    <li>jee</li>
  </ul>
</body>

Child

Child wordt gebruikt om elementen te benoemen die semantisch genest is binnen het element.

 

p is de child van body

ul is de child van body

li is een child van body

<body>
  <p>HTML</p>
  
  <ul>
    <li>jipie</li>
    <li>ja</li>
    <li>jee</li>
  </ul>
</body>

HTML Startstructuur

Introductie tot HTML

HTML Startstructuur

<!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>

Meta tags

Een meta tag beschrijft het document met meta informatie

Meta tags

<meta charset="UTF-8">

Deze beschrijft de character encoding van het document

Meta tags

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Deze beschrijft dat het document responsive is.

Meta tags

<title>Document</title>

Deze beschrijft de titel van het document.

Dit wordt gebruikt om in het tabblad van de browser te tonen, en als titel van Search excerpts.

HTML Startstructuur

<!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>
    <h1>Alle tekst gaat in de body!</h1>
    <p>Een beetje tekst</p>
  </body>
</html>

Oefening @Campus

Mijn eerste webpagina

Oefening @Campus

Nabouwen van een PDF

Uitdaging

Plantje verdorren en roteren

(Enkel voor studenten met voorkennis)

Tip:

Open de volledige map "Web Design" in Visual Studio Code.

Tip: HTML startcode

Open een nieuw bestand

Typ een ! en druk vervolgens op enter

Links

Introductie tot HTML

Links

Links

  • Komt van Anchor [EN] of Anker [NL]

Links

  • Het href attribuut

Links

  • Absoluut vs Relatief
/* Absolute link */
<a href="https://www.example.com/andere-pagina.html" >text</a>

/* Relatieve link */
<a href="andere-pagina.html" >text</a>

/* Een mapje hoger */
<a href="../andere-pagina.html" >text</a>

/* Een mapje hoger en dan binnenin een ander mapje */
  <a href="../ander-mapje/andere-pagina.html" >text</a>

Links

  • Target attribuut
/* Absolute link */
<a href="https://www.example.com/andere-pagina.html" target="_blank"> mijn link </a>

Afbeeldingen

Introductie tot HTML

Afbeeldingen

Afbeeldingen

  • zijn ofwel decoratief of informatief
  • hebben vaak auteursrechten

Afbeeldingen

Kan je downloaden van:

  • istockphoto.com

  • gettyimages.com

  • unsplash.com

Afbeeldingen

Het src attribuut

  • Logo's
  • foto's
  • illustraties
/* Absolute link */
<img src="https://www.example.com/photo.jpg" />

/* Relatieve link */
<img src="photo.jpg" />

Afbeeldingen

Het alt attribuut beschrijft de alternatieve text van de afbeelding.

Dit wordt gebruikt bij

  • Screen readers
  • Als de afbeelding niet geladen kan worden
<img src="photo.jpg" alt="Een vrouw op een fiets" />

Bestandsformaten

Vector-based

  • SVG: Aangewezen voor illustraties

Pixel-based

  • JPEG: Ideaal voor grote foto's
  • PNG: Enkel gebruiken voor hogere kwaliteit van foto's of logo's
  • GIF: Indien je geanimeerde foto's hebt

Tip: bestandsgrootte

Er bestaat een tool die automatisch afbeeldingen kleiner maakt in bestandsgrootte zonder dat je kwaliteit verliest. (= lossless compression)

 

Download imageOptim voor Mac of Pinga GUI voor Windows

Oefening @Campus

Paden definiëren

Oefening @Campus

Linken van Marvel helden

Favicons

Introductie tot HTML

Favicons

<link rel="icon" href="favicon.ico">

Dit plaats je in de <head> van je document

Tip

<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">

Je kan meerdere favicons definieren voor meerdere contexten.

 

 

 

Schrijf deze niet zelf maar laat deze genereren door online tools.

Tip

Niet zeker wat je moet doen met de code en bestanden dat je krijgt van de favicon generator? 

 

Deze Linkedin Video legt het nog eens voor je uit.

Web Design Deel 2: Introductie tot HTML

By Evelien Rutsaert

Made with Slides.com

Web Design Deel 2: Introductie tot HTML

Pilaren van het web, Wat is HTML? Anatomie HTML, enkele tags: paragraaf, heading, em, strong, ul, ol, semantische HTML, HTML startstructuur, links, afbeeldingen en Favicons

  • 197

More from Evelien Rutsaert