Basiscursus HTML / CSS

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
0. introductie
1. H1 t/m H6 en p-tags
2. plaatjes en links
3. Embedden
Beoordeling
code valideren

0. 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.

  1. Wat is HTML (07:38)
  2. Template downloaden en in de juiste map zetten (02:34)

    Download hier de HTML pagina om mee te starten

1. H1 t/m H6 en p tags

  1. Elke pagina heeft head en body tags (05:03)
  2. Titels maken met de H1 t/m H6 heading tags (04:41)
  3. Paragraaf/broodtekst maken met de p-tag (01:57)
  4. Interview jezelf: zinvolle content maken (03:11)
  5. In VS Code WordWrap (alles op een regel of juist onder elkaar) aan en uit zetten (01:52)
  6. Volgende regel met de break (br) tag (01:13)

Tip: check je html

HTML valideren (02:37)
Check je HTML op validator.w3.org of op freeformatter.com/html-validator.html

code valideren

Tip: werken met VS Code

Visual Studio Code handigheidjes (code netjes maken, live preview, wordwrap)

Opdracht 1

  • Download hier de HTML pagina om mee te starten
  • Sla deze index.html op in de map web/basiscursus
  • Volg de instructievideo’s hierboven en maak een klein interview van jezelf in de HTML pagina met de onderstaande vragen:
    • Wie ben jij?
    • Wat zijn jouw hobby’s?
    • Wat heb je hiervoor gedaan?
    • Wat wil je later worden?
  • Gebruik alle tag die in de instructievideo’s aan bod komen (dus H1-tag t/m H3-tag, de p-tag en de br-tag.

Zet je HTML pagina online op jouw ma-cloud.nl.
Inleveren in Teams bij de opdracht WEB Basiscursus HTML

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

  1. Plaatje maken met de img-tag (06:14)
  2. Hoofd en kleine letters in bestandsnamen en code (00:47)
  3. Plaatje dat linkt (a-tag om de img-tag) (02:53)
  4. Tekst dat linkt (a-tag om tekst) (02:51)

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: 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
    Dus
    <a href="mailto:b.heldt@ma-web.nl?subject=Stuur een mail naar Bethuel">Mail mij</a>
    wordt:
    <a href="mailto:b.heldt@ma-web.nl?subject=Stuur%20een%20mail%20naar%20Bethuel">Mail mij</a>

Opdracht 2

Volg de video instructies van hoofdstuk 2. Voeg een foto van jezelf toe aan je interview van hoofdstuk 1 en zorg dat je kan klikken op de foto voor een vergroting. En maak ook een tekst-link in jouw tekst. Je mag zelf weten naar welke website je linkt.

Zet je index.html en je foto van hoofdstuk 2 online (vervang de index van hoofdstuk 1).
Inleveren in Teams bij de opdracht WEB Basiscursus HTML

3. Video, audio, Youtube en maps embedden

  1. Video en audio tags (04:49)
    Download hier een video en audio bestand. Je mag natuurlijk ook een eigen mp3 en mp4 gebruiken.
  2. Youtube insluiten (embedden) (01:16)
  3. Youtube van een bekende artiest NIET insluiten (want dat werkt niet) (02:36)
  4. Google Maps insluiten (01:18)
  5. iframe-tag aanpassen in de breedte (01:33)
  6. Bestanden (plaatje, video, audio) in een mapje (03:17)

Opdracht 3

Volg de video instructies van hoofdstuk 3.

Plaats een Google Maps, een Youtube video, en een audio en video bestand in jouw pagina. Je mag zelf weten welke Maps en Youtube je toont.

Zet je index.html, afbeelding, audio en video bestand van van hoofdstuk 3 online (vervang de index van hoofdstuk 1 en/of 2)

Inleveren in Teams bij de opdracht WEB Basiscursus HTML

Beoordeling:

Zet je HTML pagina (met FileZilla) online op jouw ma-cloud.nl. Lever de link in in de Teams opdracht/assignment: M1CREA web-02: Basiscursus HTML

  • Onvoldoende: Veel HTML fouten, je afbeelding en/of video en audio laden niet. Links werken niet. Je hebt nauwelijks tekst geschreven en niet opgemaakt in kopjes en p-tags. Of het is nog niet compleet.
  • Voldoende:
    Je pagina staat online en is leesbaar, maar er zitten helaas nog wat HTML foutjes in. Je tekst is wel erg kort en rommelig. Bijna alle bestanden (plaatjes, video, audio) laden.
    Je hebt
    • 3 heading tags (H1 t/m H3)
    • Meerdere p-tags
    • Een plaatje dat linkt (opent het plaatje in het groot)
    • Een tekst dat linkt (naar een website)
    • Video, audio bestanden tonen in jouw pagina
    • Google maps insluiten
    • Youtube video insluiten
    • In de meta tags staan jouw naam in de author tag, jouw naam in de title-tag en een beschrijving in de description-tag
  • Goed: Valideer je codes zodat ze foutloos zijn. Je werk is compleet (zie bij voldoende)
  • Excellent: Je hebt veel meer gedaan dan in de basiscursus wordt verwacht. Je hebt bijvoorbeeld ook al CSS toegepast.