WEB

HTML is de basis van elke website

Voordat jij je portfolio gaat vullen met de media-uitingen die je maakt bij de verschillende units (zoals afbeeldingen, filmpjes en pdf’s) is het handig enige basiskennis te hebben van HTML

◄ METE web

1. introductie

2. plaatjes en links

3. bestanden embedden

4. Mini website

5. CSS

1. Introductie

Wat is HTML (07:38)

Let op!

! AANPASSING OP DE VIDEO INSTRUCTIE !

In de video instructie wordt gesproken over het programma Textwrangler en Brackets. Deze gebruiken we niet meer. Daar waar wordt gesproken over ‘Textwrangler‘ en ‘Brackets’ denk jij ‘Visual Studio Code‘.

Tip: check je html

Check je HTML op validator.w3.org of op freeformatter.com/html-validator.html

Opdracht 1

Voldoende: Maak een index.html en sla deze op in de map oefeningen/hoofdstuk1 (h1 mag ook). In je index.html staat je naam in de <title>-tag en in de meta-tags gebruik je je eigen naam en omschrijving. Gebruik verder alle HTML-tags die in bovenstaande instructievideo’s worden uitgelegd.
Zet je 1ste opdracht in de juiste map online.
Goed: Valideer je codes zodat ze foutloos zijn.
Excellent: Zoals boven en gebruik geen Lorem ipsum tekst, maar schrijf een korte motivatie waarom jij deze opleiding hebt gekozen.

Inleveren in Teams: F1M1DIG web-03: Basiscursus HTML h1, h2 en h3

2. Plaatjes en links

Let op!

In de instructievideo wordt een <h1> binnen een <p></p> geplaatst. Dat is niet juist!
Sluit altijd je <p> tag af voordat je een <h1> opent.
Dus als volgt:
<p>Lorem ipsum</p>
<h1>Dolar</h1>
<p> et samet...</p>

Tip: kloppen je hoofdletter en kleine letters?

Schrijf je de naam van jouw map of bestand met een hoofdletter in Finder? Dan moet je dat ook zo in je code schrijven.
Dus staat er links/DaftPunk.png in jouw code (met hoofdletter D en P) dan moet het plaatje in jouw map ook zo heten.
Handig: vermijd hoofdletters. Doe alles lekker makkelijk met kleine letters!

Tip: code indentation

Maak het jezelf gemakkelijk en maak je code netjes. Nette code werkt sneller. En foutjes zie je ook veel sneller.
Zo ziet nette code er uit

<body>  
   <h1>Titel</h1>  
   <ul>   
      <li>Item 1</li>   
      <li>Item 2</li>  
   </ul>
</body>

Zoals je ziet laat je de code inspringen. Een html-tag in een html- tag laat je inspringen. Een tag die op het zelfde niveau zit staat netjes onder de vorige tag. Dit heet code indentation.
Inspringen doe je met de tab toets (de toets in het plaatje hiernaast)

De code hieronder is niet fout, maar het is ook niet overzichtelijk.

<body><h1>Titel</h1><ul><li>Item 1</li><li>Item 2</li></ul></body>

In VS Code kan je je code automatisch laten inspringen. Daarvoor doe je rechtermuisklik ergens in je code en selecteer Format Document

Tip: niet alle fouten zijn fout

Met de validator van W3schools (validator.w3.org of op freeformatter.com/html-validator.html) krijg je een aantal fouten en meldingen die je mag negeren zoals:

lang attribuut in html-detag. Beter om die wel toe te passen…maar ach…
frameborder attribuut in de iframe-tag. Frameborder is ouderwets. Maar er zijn nog ouderwetse browsers, dus gebruiken we hem nog. De Youtube embed code heeft hem bijvoorbeeld nog
space character in <a href=”mailto:b.heldt@ma-web.nl?subject=Mail Bethuel”></a>. Een spatie mag niet maar reken ik toch niet fout als die spatie in de subject staat. Je kunt die foutmelding verwijderen door de code %20 te gebruiken i.p.v. een spatie <!– link met spaties –><a href=”mailto:b.heldt@ma-web.nl?subject=Stuur een mail naar Bethuel”>Mail mij</a><! link met %20 ipv spaties –><a href=”mailto:b.heldt@ma-web.nl?subject=Stuur%20een%20mail%20naar%20Bethuel”>Mail mij</a>

Opdracht 2

Voldoende: Zet je index.html van hoofdstuk 2 online, met daarin je naam als commentaar, je naam in de title-tag, unordered list, mp3, filmpje, link naar Google die opent in een tweede tab en een email-link naar je eigen Ma-mail en een plaatje dat linkt.
Goed: Gebruik submappen voor je plaatjes, mp3 en mp4. Dus links/afbeeldingen/DaftPunk.png en links/audio/bamboleo.mp3 enzovoort.
Je code is uiteraard foutloos (checken met de code validator van w3schools)
Excellent: Zoals boven. En laat je code netjes inspringen. Zorg er ook voor dat er geen spaties staan in je mailto hyperlink. Spaties vervang je voor de code %20

Inleveren in Teams: F1M1DIG web-03: Basiscursus HTML h1, h2 en h3

3. Bestanden IN je pagina insluiten (embedden) i.p.v. linken

Opdracht 3

Voldoende: Zet je index.html van hoofdstuk 3 online, met daarin een plaatje, audio bestand, Youtube-filmpje en GoogleMaps.
Valideer je codes, zorg dat ze foutloos zijn (de melding over frameborder attribute in Googlemaps mag je laten zitten).
Goed): Je plaatje en filmpje zijn in de juiste verhouding geschaald. En je gebruikt een audio bestand en plaatje die je zelf hebt gemaakt.
En gebruik submappen voor je plaatjes, mp3 en mp4. (dus links/afbeeldingen en links/audio en links/video )
Excellent: Zoals boven. En je maakt ook je eigen video bestand. Dit mag natuurlijk ook de minidocu zijn die je gemaakt hebt bij METE motion graphics.
En laat je code netjes inspringen.

Inleveren in Teams: F1M1DIG web-03: Basiscursus HTML h1, h2 en h3

4. Mini website

Opdracht 4: Oefening

Zet een mini-website van 7 pagina’s online. Op iedere pagina staat de naam van die pagina in de title-tag en de h1 aangepast in de code.
Op iedere pagina is iets anders te zien: 1.plaatje, 2.video, 3.audio, 4.youtube, 5. googlemaps, 6.email-link, 7.link naar Google geopend in tweede tab.

Voldoende: Zet je mini-website online in de juiste map. Valideer alle pagina’s zodat ze foutloos zijn (frameborder mag wel natuurlijk).
Je eerste homepagina heet natuurlijk index.html (en niet plaatje.html of zo).
Goed: Je plaatjes, video en audio zitten in handige submappen. Elk type in een eigen submap: dus /links/audio/ links/video/ links/images bijvoorbeeld. En laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool.
Excellent: Geef elke pagina een eigen achtergrond kleur met CSS. Zoek zelf uit hoe dat moet met op deze pagina van W3Schools.
Klik hier voor een aantal kleuren die je kan gebruiken

Inleverformulier opdracht 4

Tip: zelf meer codes zoeken op internet

Er zijn nog meer HTML5-codes, maar dat is voor nu niet zo belangrijk. Je gaat echter niet alles leren in deze filmpjes, dus zelf zoeken op internet hoort bij Webdesign !!!
Je vindt heel veel nuttige informatie bij w3schools.com

5: CSS (Cascading Style Sheets)

Tip: oefen met CSS

Lees en oefen hier met de 3 manieren van CSS gebruiken.
Bekijk hier alle soorten kleur namen die je kan gebruiken in je HTML pagina.

Tip: 3 plekken voor CSS

Je kunt CSS op 3 plekken in je website schrijven:

Inline CSS: CSS in de html tag

<body style="background-color: #FF9900; color: white;">

Embedded CSS: css in de <head> van je pagina

<head>  
   <title>Embedded CSS</title>  
   <style>   
      /* Vanaf hier is het CSS */   
      body{
         background-color: #FF9900;
         color: white;   
      }   
      /* Tot hier is het CSS, hieronder wordt het weer HTML */  
   </style>
</head>
<body>
...etc...

Externe CSS: een aparte CSS pagina

<link rel="stylesheet" href="mijn_stijl.css">

Opdracht 5a: Oefening

Voldoende: Zet een html pagina online waarin je de
- <h1> een achtergrond kleur geeft met inline CSS,
- de <body> een andere achtergrond kleur geeft met embedded CSS
- en de <p> een andere achtergrond kleur geeft met externe CSS.
  Zet je pagina online op in het mapje hoofdstuk5a of h5a
Goed: Geeft naast de achtergrond kleur de <h1>, <body> en <p> ook een aparte tekst kleur (dat heet in CSS gewoon “color“) via de externe css. Zoek uit hoe dat moet op https://www.w3schools.com/cssref/pr_text_color.asp .
Laat je code netjes inspringen. Dit mag je natuurlijk doen met Beautify van Brackets
Excellent: De eerste letter van de <h1> en de <p> tag maak je anders van kleur. Dit kan je doen door een klein stukje HTML om de eerste letter van de tekst in je <h1> en je <p> tag te zetten. Dit stukje HTML heet <span></span>
<h1><span>D</span>eze titel heeft om de eerste letter een span-tag.</h1>

Zorg er voor dat al je codes foutloos zijn!

Inleverformulier opdracht 5a

Let op!

! AANPASSING OP DE VIDEO INSTRUCTIE !

In de volgende instructies wordt alle CSS uitgelegd met embedded CSS. Maar het is de bedoeling dat jij je styles met een externe CSS maakt.
Je gebruikt alleen embedded of inline CSS als die style ook echt alleen maar voor één pagina of één html-object is bedoeld.
In de instructie wordt gesproken over ~~css.html~~. Maar zo noem jij je pagina niet. Jij noemt je pagina gewoon index.html
Je hebt in al je opdrachten altijd één index.html

Meer CSS

Achtergrond-afbeelding (06:00)
body{
background-image: url(links/afbeeldingen/DaftPunk.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /*maar hier kan natuurlijk ook contain staan of een maat in pixels of procenten*/
}
Lees hier meer over en en oefen met background style
H1 vormgeven (03:51)
Volgorde van HTML en CSS (04:32)
P vormgeven (02:51)
Begin-kapitaal (04:34)
P First-line (04:03)
CSS valideren 1 (02:34)
CSS valideren 2 (01:34)

Tip
Valideer je CSS met csslint.net/

Opdracht 5b: Oefening

Let op! in deze opdracht schrijf je al je CSS in een externe stylesheet. Dus niet, zoals in de instructiefilmpjes CSS in de <head> tag. Alle technieken uit bovenstaande instructievideo’s pas je toe. Eén html element heeft een mooi opgemaakt beginkapitaal met CSS gemaakt (first-letter). Jouw p-tag heeft een first-line die er anders uitziet dan de rest van de tekst.

Voldoende: Zet een index.html online, die er ANDERS uit ziet dan in de filmpjes. Dus, een ander plaatje, andere koppen, andere lettertypes, andere kleuren, andere begin-kapitaal, etc. Zorg er voor dat al je codes foutloos zijn!
Zet je pagina online op in het mapje hoofdstuk5b of h5b
Goed: Zorg ervoor dat je pagina goed leesbaar is. Je achtergrond plaatje is niet storend voor de teksten. Je kleuren combineren goed. Achtergrond en tekst kleur zijn voldoende contrasterend.
Laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool.
Excellent: Je <h1>, <p>, <ul> tags hebben alle drie een ander achtergrond plaatje die de tekst wel leesbaar houdt. Zorg ervoor dat je teksten voldoende contrasteren met de achtergrond en dat het geheel mooi is.

Inleverformulier opdracht 5b

Links stylen

(totaal 12 min. videos)

Tip

! TIP !
Als je html elementen, zoals jouw navigatie, naast elkaar hebt gezet met float, dan moet je je float ook weer stoppen.In jouw unordered list zet je dit:

<ul class="clearfix">
  <li> ...etc...</li>
   ...nog meer html...
</ul>

En in jouw stylesheet zet je dit:

.clearfix::after {  
   content: "";  
   clear: both;  
   display: table;
}

lees meer over float en clearfix

Opdracht 5c: Oefening

Maak de resterende pagina’s (totaal 5) van je website met één externe CSS. Zorg er voor dat je navigatie op alle pagina’s er hetzelfde uitziet en dat jouw navigatie is opgemaakt met een mooi randje, achtergrond kleur en je maakt gebruik van een andere hover style in jouw navigatie.
Maak gebruik van de clearfix oplossing bij je navigatie als jouw navigatie gebruik maakt van float (zie hierboven).
Iedere pagina laat m.b.v. een <h1> de naam van de pagina zien.
Iedere pagina heeft die naam ook in de <title> staan.
Iedere pagina heeft een ander achtergrondplaatje (dit mag je doen met embedded of inline CSS, maar het mag ook met een class of id, maar dat is advanced…).
En op iedere pagina staat ook weer andere tekst. Leuk als jouw website echt een onderwerp heeft, bijvoorbeeld een artiest of jouw favoriete kledingmerk.
Kortom, je kan nu een echte website maken die je zelf helemaal hebt vormgegeven.

Voldoende: Alle linkjes moeten werken en alle codes zijn foutloos.
Zet je pagina online op in het mapje hoofdstuk5c of h5c
Goed: Je pagina’s zijn goed leesbaar. Voor en achtergrond kleur hebben voldoende contrast. Achtergrond plaatjes zijn niet storend voor de tekst. Je kleuren zijn mooi op elkaar afgestemd. Je links hebben een duidelijke hover style. Bij hover verspringt je tekst of menu niet.
Laat je code netjes inspringen (code indentation). Dit mag je natuurlijk doen met een online tool.
Excellent: Gebruik in één HTML-tag een CSS kleurverloop. Dat heet in het Engels ‘gradient‘. Zoek online hoe je een CSS gradient maakt. De zoekterm is dan “CSS gradient generator”. Let er op dat je teksten leesbaar en mooi blijven. De achtergrond mag niet storend zijn. Voor een 10 heeft jouw pagina een mooi ontwerp. Het is geen ratjetoe van achtergrondplaatjes, gradients en fonts.

Inleverformulier opdracht 5c

HTML is de basis van elke website

1. Introductie

Let op!

Tip: check je html

Opdracht 1

2. Plaatjes en links

Let op!

Tip: kloppen je hoofdletter en kleine letters?

Tip: code indentation

Tip: niet alle fouten zijn fout

Opdracht 2

3. Bestanden IN je pagina insluiten (embedden) i.p.v. linken

Opdracht 3

4. Mini website

Opdracht 4: Oefening

Tip: zelf meer codes zoeken op internet

5: CSS (Cascading Style Sheets)

Tip: oefen met CSS

Tip: 3 plekken voor CSS

Inline CSS: CSS in de html tag

Embedded CSS: css in de <head> van je pagina

Externe CSS: een aparte CSS pagina

Opdracht 5a: Oefening

Let op!

Meer CSS

TipValideer je CSS met csslint.net/

Opdracht 5b: Oefening

Links stylen

Tip

Opdracht 5c: Oefening

Tip
Valideer je CSS met csslint.net/