# Groep 8 - Introductie web site maken
*We gaan een eenvoudige website maken en gebruiken Notepad en de Chrome browser.*
*We gaan kennis maken met de technieken HTML, JavaScript en CSS.*
*We leren wat een variabele in een programmeertaal is.*
### Intro
(presentatie)
Intro en voorbeeld van wat we gaan maken.
Na 10 weken: [http://www.softwaredeveloper.ovh/max/portfolio-samuel/](http://www.softwaredeveloper.ovh/max/portfolio-samuel/)
Wij gaan een eenvoudige versie hiervan maken:
[](https://www.roc.ovh/uploads/images/gallery/2023-02/image-1676980318643.png)
*Aan de slag (eerst individueel en dan je buurman/vrouw helpen).*
### Voorbereiding
(modellen)
Maak nieuw bestand op desktop, **site.txt** en verander naam in **site.html** -> hoe op een Chromebook??
....
### HTML
(modellen)
HTML boilerplate (van internet) en eenvoudige Javascript.
Zoek in Google naar HTML Boilerplate (freecodecamp.org)
1. <script>....</script> weghalen.
2. <link> regel weghalen.
3. Bedenk een eigen titel (tussen de <title> en </title>
4. In de body: <h2>Welkom op mijn site</h2>
Testen en elkaar helpen.
### Programmeren
(uitleg/presentatie)
(eerst uitleg over variabele -> PowerPoint).
Uitleg variabele -> powerpoint analogie met telefoonnummer en doosje.
(modellen)
##### Java Script
```HTML
```
```HTML
```
(de andere welkom-boodschap mag nu weg)
### Plaatje
(modellen)
Plaatje downloaden (of link kopiëren) en toevoegen (optioneel)
- Zoek in Google (plaatjes) met de term *cartoon character* en Download een plaatje!
In <body>
```HTML
of
```
In Chrome: Ctrl-shift-I en dan console voor foutmeldingen.
### Opmaak (CSS)
(modellen)
Zoek in Google naar css color examples (w3.org)
```HTML
```
### Afsluiten
- Web pagina bestaat uit HTML en CSS. HTML geeft de **basis-structuur** aan en CSS is voor de **vorm/kleuren**.
- **JavaScript** is een programmeertaal die je kan gebruiken voor je website.
- We hebben geleerd wat een **variabele** is.
\--
```HTML
Mijn Web Site
```