‹Revenir à la recherche

Les 1: 1e pagina, HTML, fouten, nette code

Ieder webpagina of web app, die geopend wordt vanuit een browser, is geschreven in HTML:
HyperText Markup Language
In deze taal kun je een webbrowser vertellen wat er moet gebeuren:
  • Een titel
  • Tekst
  • Afbeeldingen
1 / 13
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4-6

Cette leçon contient 13 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 30 min

Éléments de cette leçon

Ieder webpagina of web app, die geopend wordt vanuit een browser, is geschreven in HTML:
HyperText Markup Language
In deze taal kun je een webbrowser vertellen wat er moet gebeuren:
  • Een titel
  • Tekst
  • Afbeeldingen

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Niet alleen wat er moet gebeuren is belangrijk, ook hoe het eruit ziet.
Daar wordt tegenwoordig een andere taal voor gebruikt, om de code enigszins overzichtelijk te houden én om bv elke pagina van je site dezelfde 'look' te geven:

CSS: Cascading Style Sheet 

Slide 2 - Diapositive

Stylesheet: De opmaak (=style) staat in een apart bestand, dit noem je stylesheet

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Welke webpagina bezoek je vaak? Wat kun je hiermee doen? Hoe ziet de pagina eruit?

Slide 4 - Question ouverte

Inzicht ontwikkelen in verschil wat een webapp doet en hoe het eruit ziet.
Wat vind je van de website van school? Denk aan duidelijkheid, gemak van zoeken, kleuren, knoppen.....

Slide 5 - Question ouverte

Cet élément n'a pas d'instructions

Veel apps zijn niet alleen in HTML en CSS geschreven, maar in meerdere programmeertalen. 

Met HTML wordt bepaald WAT er op de webpagina komt. 
Met CSS wordt bepaald HOE dit eruit ziet. Dus kleuren, grootte van afbeeldingen, etc.

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Je 1e webpagina:
  • In HTML, wat je zelf intikt!
  • Je gebruikt hiervoor de GitHub Editor
  • Ik laat een pagina zien, je tikt hem over, runt hem en kijkt hoe hij eruit komt te zien. 
  • Je zult zien dat er precies gebeurt, wat je hebt gecodeerd!

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Waarom moet je zelf de HTML-code intikken?

Slide 8 - Question ouverte

Cet élément n'a pas d'instructions

<!DOCTYPE html> <!--dit is de homepage van mijn site-->
<html> <!--dit is het html-element-->
 <head>
  <title>Het eerste begin</title>
  <meta charset="utf-8">
 </head>
 <body>
  Hier komt mijn eerste tekst
 </body>
</html>

Slide 9 - Diapositive

Dit ziet er helemaal niet fijn uit, in Notepad++ kan dat veel duidelijker.


Slide 10 - Diapositive

Via Syntaxis kleuren aanzetten
Je ziet verschillende elementen
Gebruik <>  en </>
Commentaar!

Zelf een titel verzinnen en wat tekst.
Afbeelding toevoegen: Opzoeken op w3schools hoe dat moet

Runnen: Eerst opslaan als .html-bestand, dan runnen. Dit kan niet vanuit Notepad++, dus vanuit de download-map
Dan uploaden naar classroom

Slide 11 - Diapositive

Fouten:
<html>: begintag is eindtag geworden
eind van commentaar is weggevallen
<titel> moet <title> zijn
</body> is weg
Werken met Notepad++:
Via Syntaxis --> H --> HTML kleuren aanzetten

Je ziet verschillende elementen: <> en </> 
 
Commentaar!

Begintag en -eindtag

Voorbeelden:
  1. <html>    </html>
  2. <p>   </p>
  3. <br>
  4. <!--deze tekst is voor de ontwikkelaar-->




Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Zelf een titel verzinnen en wat tekst.

Afbeelding toevoegen: Opzoeken op w3schools hoe dat moet

Runnen: 
  1. Eerst opslaan als .html-bestand
  2. Runnen kan niet vanuit Notepad++, dus vanuit de download-map
  3. Dan uploaden naar classroom, anders ben je je code kwijt.

Kies om een USB-stick mee te nemen, of een laptop, of het doen met de laptops van school

Slide 13 - Diapositive

https://www.w3schools.com/html/default.asp

Plus de leçons comme celle-ci

WEEK 2 - INFORMATICA

- Leçon avec 31 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML les 1

- Leçon avec 25 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML les 1

- Leçon avec 23 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML & CSS 01 - 1 tmt 2.3 - introductie

- Leçon avec 30 diapositives
InformaticaWOStudiejaar 4,5

04 - HTML - head body

- Leçon avec 13 diapositives
ICTMBOStudiejaar 1-4

IAV HTML les 1

- Leçon avec 18 diapositives
media, vormgeving en ictMiddelbare schoolvmboLeerjaar 3,4

HTML & CSS 0 - introductie

- Leçon avec 19 diapositives
InformaticaWOStudiejaar 4,5

WEEK 2 - INFORMATICA

- Leçon avec 32 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4