Basiscursus HTML / CSS tot 2021-2022

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

web

1. introductie

2. plaatjes en links

3. bestanden embedden

code valideren

1. Introductie

HTML is een code-taal. Als je een beetje HTML kent kun je al websites coderen. In deze HTML-basiscursus leer je de eerste beginselen van HTML.

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

code valideren

Opdracht 1

Download hier de HTML pagina om mee te starten
Voldoende: Maak een index.html en sla deze op in de map basiscursus/hoofdstuk1 (h1 mag ook). In je index.html staat je naam in de <title>-tag en in de <h1> 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

Tip: Weet je nog niet hoe je moet uploaden met FIleZilla of moet inleveren in Teams? Kijk dan de filmpjes op Apps voor web

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