Html en Css - les 2

4V Informatica

HTML les 2

5 september 2022

1 / 23

Slide 1: Tekstslide

InformaticaMiddelbare schoolvwoLeerjaar 4

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

Lesduur 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)?

Totaal niet

Mwoh... snap het nog niet echt

Wel oké

Eitje!

Slide 2 - Quizvraag

Op wat voor computer werk je thuis?

Chromebook

Windows-computer

Apple

Thuis doe ik niets...

Slide 3 - Quizvraag

Waarmee begint je html-bestand?

<body>

<!Doctype html>

<html>

<head>

Slide 4 - Quizvraag

Welke tag heeft geen closing tag nodig?

<p>

<h3>

<br>

<html>

Slide 5 - Quizvraag

Heb je je wachtwoord voor Fundament al gewijzigd?

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

En nog veel meer elementen!

https://websitesetup.org/wp-content/uploads/2014/09/html5-cheat-sheet.png

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

Ga naar www.htmldog.com

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

er niet één manier is om een website te maken en
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