Webdesign - Les 2 (22/23)

Introductie HTML

Antje Roestenburg

a.roestenburg@minkema.nl

1 / 30

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

In deze les zitten 30 slides, met tekstslides.

Lesduur is: 30 min

Onderdelen in deze les

Introductie HTML

Antje Roestenburg

a.roestenburg@minkema.nl

Slide 1 - Tekstslide

Vorige les:

Fundament: HTML & CSS (A2)
* t/m hoofdstuk 3 (Multimedia)
* vraag 1 & 2 van hoofdstuk 2.8
* vraag 1 t/m 3 van hoofdstuk 3.6

YouTube:

* Kijk t/m video 3 (zie Google Classroom)

Slide 2 - Tekstslide

Hyperlinks

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Hyperlinks

• Interne link

• Externe link

• Anchor link

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Lijsten

Slide 11 - Tekstslide

Boodschappen:

<ul>

<li>Boter</li>

<li>Eieren</li>

<li>Brood</li>

</ul>

Boodschappen:

Melk
Boter
Eieren
Brood

w3schools.com/html/html_lists.asp

Opsomming (unordered list)

Slide 12 - Tekstslide

Boodschappen:

<ol>

<li>Boter</li>

<li>Eieren</li>

<li>Brood</li>

</ol>

Boodschappen:

Melk
Boter
Eieren
Brood

w3schools.com/html/html_lists.asp

Genumereerde lijst (ordered list)

Slide 13 - Tekstslide

<dl>

<dt>Espresso</dt>

<dd>Sterke koffie</dd>

<dt>Cappuccino</dt>

<dd>Koffie met opgeschuimde melk</dd>

</dl>

Espresso

Sterke koffie

Cappuccino

Koffie met opgeschuimde melk

Definitielijst

Slide 14 - Tekstslide

<ul>

<li>Vaders interesses

<ol>

<li>Voetbal</li>

<li>Breien</li>

</ol>

</li>

<li>Moeders interesses

<ol>

<li>Voetbal haten</li>

<li>Paarden</li>

</ol>

</li>

</ul>

Vaders interesses

1. Voetbal
2. Breien

Moeders interesses

1. Voetbal haten

2. Paarden

Genestelde lijst

Slide 15 - Tekstslide

Tables

Slide 16 - Tekstslide

Tabel (1)

w3schools.com/html/html_tables.asp

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

<table>

<tr>

<td colspan=3>colspan</td>

</tr>

<tr>

<td>cel A2</td>

<td>cel B2</td>

<td>cel C2</td>

</tr>

<tr>

<td>cel A3</td>

<td>cel B3</td>

<td>cel C3</td>

</tr>

</table>

Slide 21 - Tekstslide

<table>

<tr>

<td rowspan=3>rowspan</td>

<td>cel B1</td>

<td>cel C1</td>

</tr>

<tr>

<td>cel B2</td>

<td>cel C2</td>

</tr>

<tr>

<td>cel B3</td>

<td>cel C3</td>

</tr>

</table>

Slide 22 - Tekstslide

Hoe werkt CSS?

Een stylesheet maak je in een eigen bestand.

Je slaat het bestand op met de naam style.css.

Je verwijst in al je HTML-pagina's naar de stylesheet.

(zie ook w3schools.com/css)

Slide 23 - Tekstslide

HyperText Markup Language

INHOUD & STRUCTUUR

(paragraph, kopje, links, etc)

Cascading Style Sheets

OPMAAK

(kleur, lettertype, plaatsing, etc.)

Slide 24 - Tekstslide

Waarom CSS?

Alle opmaak van de website in
één bestand.
Een kleine verandering wordt
gelijk doorgevoerd op alle
pagina's van je website.
Maakt de HTML-code een stuk
overzichtelijker.

Slide 25 - Tekstslide

Hoe werkt CSS?

(zie ook w3schools.com/css)

Slide 26 - Tekstslide

Hoe werkt CSS?

<html>

<head>

<title>Dit is de titel van pagina 1</title>

</head>

<body>

<p>Dit is de eerste alinea van pagina 1</p>

</body>

</html>

Slide 27 - Tekstslide

Voorbeeld

body {

background-color: lightblue;

}

h1 {

color: #88cc00;

}

p {

font-family: verdana;

font-size: 18px;

}

Slide 28 - Tekstslide

Opmaak definiëren met selectors

Tag selector (HTML tag)

h2 {

color: blue;

font-style: italic;

}

ID selector (een per pagina)

#footer {

color: red;

}

Class selector (meerdere)

.article {

background-color: #cccccc;

}

Slide 29 - Tekstslide

Aan de slag:

Fundament: HTML & CSS (A2)
* t/m hoofdstuk 5 (Werken met blokken)
* vraag 1 van hoofdstuk 4.9
* vraag 1 van hoofdstuk 5.12

YouTube:

* Kijk t/m video 4 (zie Google Classroom)

Slide 30 - Tekstslide

Webdesign - Les 2 (22/23)

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Slide 24 - Tekstslide

Slide 25 - Tekstslide

Slide 26 - Tekstslide

Slide 27 - Tekstslide

Slide 28 - Tekstslide

Slide 29 - Tekstslide

Slide 30 - Tekstslide

Meer lessen zoals deze

Webdesign - Les 2 (23/24): Links

HTML & CSS 90 - herhaling

HTML + CSS les 3: introductie CSS

CSS review - HWUD04 20:21

HTML - Tags

HTML & CSS 03 - 3.3 tmt 3.6 - Lijsten, tabellen, embedden

2 HTML: CSS

HWUD04-sj2122-03-HTML-document