Html en Css - les 2

4V Informatica
HTML les 2
5 september 2022
1 / 23
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 23 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 45 min

Onderdelen in deze les

4V Informatica
HTML les 2
5 september 2022

Slide 1 - Tekstslide

Hoe ging het maken van je eerste website(s)?
A
Totaal niet
B
Mwoh... snap het nog niet echt
C
Wel oké
D
Eitje!

Slide 2 - Quizvraag

Op wat voor computer werk je thuis?
A
Chromebook
B
Windows-computer
C
Apple
D
Thuis doe ik niets...

Slide 3 - Quizvraag

Waarmee begint je html-bestand?
A
<body>
B
<!Doctype html>
C
<html>
D
<head>

Slide 4 - Quizvraag

Welke tag heeft geen closing tag nodig?
A
<p>
B
<h3>
C
<br>
D
<html>

Slide 5 - Quizvraag

Heb je je wachtwoord voor Fundament al gewijzigd?
A
ja
B
nee

Slide 6 - Quizvraag

Terugblik vorige les
  • Basis van een website is html-bestand (of meerdere...)
  • HTML = HyperText Markup Language
  • Simpele teksteditor voldoende
  • HTML-bestand bevat de inhoud van je website (later voeg je daar styling aan toe via CSS)
  • Inhoud van website moet in HTML-elementen
  • HTML-elementen hebben opening- en closing-tags
  • Commentaar via <!-- dit is commentaar -->
  • Geen Windows-computer??? Gebruik Replit!

Slide 7 - Tekstslide

Stap 1. HTML
In HTML schrijf je wat er in je website komt te staan. Denk daarbij in eerste instantie aan teksten en plaatjes en linkjes.

HTML bestanden open je doorgaans in een browser. De browser leest het html bestand en "tekent" deze op een gebruiksvriendelijke(re) manier. Het onderstaande voorbeeld laat zien hoe dat eruit ziet.
Index.html in notepad
Index.html in chrome

Slide 8 - Tekstslide

HTML - tags 
  • HTML bestaat uit elementen. En die elementen worden aangeduid met opening en closing tags. 
  • Een tag is het stukje tussen haakjes. Dus bijvoorbeeld <h1>. Na de tag komt de tekst die je wil schrijven. 
  • Vervolgens gebruik je weer een tag om af te sluiten. In dit geval </h1>. let op de / in de 'closing tag'
  • Sommige tags hebben geen 'closing tag' nodig, zoals <br> of <img>

Slide 9 - Tekstslide

HTML - elementen
<h1> is een header
<p> is een paragraaf
<img> is een image
<a> is een anchor
<ul> is een unordered list
<li> is een listitem
enz.. enz..

Slide 10 - Tekstslide

Eerste deel opdracht 2.8

Slide 11 - Tekstslide

Tweede deel opdr. 2.8 Hyperlinks
  • a-element voor hyperlinks
  • a-element heeft attribuut IN de tag;
  • <a href="www.google.com>dierbare website</a>
  • verwijzen naar ander html-bestand:
  • <a href="opdracht1.html">vorige opdracht</a>
  • Of link naar mailadres:
  • <a href= "mailto:mp@kabinet.nl">mailen</a>
  • Let op de aanhalingstekens!!!

Slide 12 - Tekstslide

Vandaag: afbeeldingen, lijsten, tabellen, inputvelden en video's aan je website toevoegen
  • Bestudeer de uitleg op www.htmldog.com (deels herhaling);
  • Maak de code na/ Kopieer de code in je eigen bestand;
  • Doe dit in onze team-omgeving in Replit (zie instructies in Classroom);
  • Kijk ook naar paragraaf A.3 Multimedia in Fundament voor extra toelichting;
  • Klaar? Lever het in via Replit en ga verder met de opdrachten in Fundament bij paragraaf 3.6

Slide 13 - Tekstslide

Afbeeldingen toevoegen
  • Via <img>-element met 5 attributen in de opening-tag:

  • src = bron van je afbeelding (internet of bestand bij je website)
  • alt = alternatieve tekst bij laadfouten (NB: verplicht, maar alt="" mag ook)
  • title = tekst die verschijnt als je over afbeelding gaat (niet verplicht) 
  • width en height voor breedte en hoogte van afbeelding (in pixels)
  • Alleen width of alleen height mag ook

Slide 14 - Tekstslide

Video's invoegen/ embedden
  • <iframe>-element met tenminste 3 attributen: 
  • width en height voor omvang van frame;
  • src voor de bron van je video (zie Fundament!)

Slide 15 - Tekstslide

Lijsten maken
  • Ongeordende lijst via <ul> = Unordered List 
  • Geordende = genummerde lijst via <ol> = Ordered List

  • Per item van de lijst een <li>-element
  • Zie fundament voor de definitielijst met <dl>

Slide 16 - Tekstslide

Tabellen maken
  • <table> voor hele tabel (eventueel met 'border'-attribuut)
  • <tr>-element per rij;
  • <td>-element per cel;
  • Zie Fundament voor samenvoegen cellen via colspan/rowspan

Slide 17 - Tekstslide

Formulieren maken
  • <form> element voor hele formulier met attributen action (verwijzing naar bestand met code) en method (get/post);
  • <input>-element voor invoer van gebruiker (veel variatie);
  • <textarea>-element voor grotere invoer;
  • <select>-element voor drop-down-menu.

Slide 18 - Tekstslide

HTML

Slide 19 - Tekstslide

Huiswerk 12/9
Bestudeer Fundament A.2 onderdeel 3
lever uitwerking www.htmldog.com in
Maak opdrachten 3.6

Slide 20 - Tekstslide

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 21 - Poll

HTML
Html én css

Slide 22 - Tekstslide

Werkwijze
Zelfstandigheid

Dit wordt jullie eerste project voor informatica en je zal merken dat je veel zelf moet uitzoeken. Dat komt vooral omdat 
  1. er niet één manier is om een website te maken en 
  2. er niet één manier is jouw ontwerp te maken. 

En om het nog ingewikkelder te maken: er zijn vele verschillende manier en ze zijn vaak allemaal goed!

Opdracht

De opdracht staat in classroom. Daarin staat wat je moet doen en hoe het beoordeeld wordt.

Lessen
Elke week zal ik in de les één of twee nieuwe onderwerpen toelichten.

Planning
De planning staat in classroom in de jaarplanner. Selecteer wel even het tabje voor jouw klas/jaar! 

 

Slide 23 - Tekstslide