‹Revenir à la recherche

Webdesign - Les 2 (22/23)

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 30
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 30 diapositives, avec diapositives de texte.

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

Éléments de cette leçon

Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl

Slide 1 - Diapositive

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

Hyperlinks

Slide 3 - Diapositive

Slide 4 - Diapositive

Hyperlinks

• Interne link
• Externe link
• Anchor link

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Diapositive

Lijsten

Slide 11 - Diapositive



Boodschappen:
<ul>
  <li>Melk</li>
  <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 - Diapositive



Boodschappen:
<ol>
  <li>Melk</li>
  <li>Boter</li>
  <li>Eieren</li>
  <li>Brood</li>
</ol>


Boodschappen:
  1. Melk
  2. Boter
  3. Eieren
  4. Brood
w3schools.com/html/html_lists.asp

Genumereerde lijst (ordered list)

Slide 13 - Diapositive













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





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

Tables

Slide 16 - Diapositive

Tabel (1)
w3schools.com/html/html_tables.asp

Slide 17 - Diapositive

Slide 18 - Diapositive

Slide 19 - Diapositive

Slide 20 - Diapositive



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



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

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.

Slide 23 - Diapositive



HyperText Markup Language 






INHOUD & STRUCTUUR 
(paragraph, kopje, links, etc) 



Cascading Style Sheets






OPMAAK
(kleur, lettertype, plaatsing, etc.)

Slide 24 - Diapositive

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

Hoe werkt CSS?
(zie ook w3schools.com/css)

Slide 26 - Diapositive

Hoe werkt CSS?
<html>
  <head>
    <title>Dit is de titel van pagina 1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

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

Slide 27 - Diapositive

Voorbeeld
body { 
  background-color: lightblue; 
} 

h1 { 
  color: #88cc00; 
}

p { 
  font-family: verdana; 
  font-size: 18px; 
}

Slide 28 - Diapositive

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

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

Plus de leçons comme celle-ci

Webdesign - Les 2 (23/24): Links

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

HTML & CSS 90 - herhaling

- Leçon avec 33 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

HTML + CSS les 3: introductie CSS

- Leçon avec 28 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

CSS review - HWUD04 20:21

- Leçon avec 26 diapositives
Communication & multimedia designHBOStudiejaar 2

HTML - Tags

- Leçon avec 30 diapositives
Communication & multimedia designHBOStudiejaar 1

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

- Leçon avec 27 diapositives
InformaticaWOStudiejaar 4,5

2 HTML: CSS

- Leçon avec 17 diapositives

HWUD04-sj2122-03-HTML-document

- Leçon avec 31 diapositives
Communication & multimedia designHBOStudiejaar 2