Terugblik Module 2 HTML t.b.v. studenten applicatie en mediaontwikkeling MBO Rijnland Leiden

1. 2.6 Terugblik Module 2
HTML module 22.6 Terugblik Module 2

2. HTML module 1
Basispagina html met juiste indeling
2.6 Terugblik Module 2

3. HTML module 2
<table>
Het <table> element wordt
gebruikt voor het aanmaken van
een tabel.
<caption>
Het <caption> element wordt
gebruikt voor het plaatsen
van een legenda boven de tabel.
2.6 Terugblik Module 2

4. HTML module 2
<tr>
De start van iedere rij in tabel
gebeurt met de <tr> tag
tr staat voor table row.
2.6 Terugblik Module 2

5. HTML module 2
<th>
Het <th> element gebruik je voor
het maken van de heading van
iedere kolom in de tabel
2.6 Terugblik Module 2

6. HTML module 2
<td>
Iedere cel van de tabel wordt
gemaakt met de <td> tag.
2.6 Terugblik Module 2

7. HTML module 2
colspan
Soms is het nodig dat cellen van een
tabel uit meerdere rijen kan bestaan.
Dit kan met de colspan attribuut.
De colspan attribuut wordt gebruikt met
het <td> en <th> element.
2.6 Terugblik Module 2

8. HTML module 2
colspan
Beetje style toegevoegd.
2.6 Terugblik Module 2

9. CSS :nth-child() Selector
HTML module 2
Hiermee kan je de style bepalen vanaf de parent
2.6 Terugblik Module 2

10. CSS :nth-child() Selector
HTML module 2
Je kan ook even en oneven child’s selecteren
2.6 Terugblik Module 2

11. CSS :nth-child() Selector
HTML module 2
Je kan ook met een formule child’s selecteren
Style iedere 3e child vanaf 0.
2.6 Terugblik Module 2

12. HTML module 2
Tabel Responsive
Tabellen maak je responsive door aanpassen style
1e stap
Plaats huidige css code in de @media voor overige
devices.
2.6 Terugblik Module 2

13. HTML module 22.6 Terugblik Module 2
<form>
Het <form> element wordt
gebruikt voor het aanmaken van
een formulier.
<table>
Het <table> element wordt
gebruikt voor het aanmaken van
een tabel.

14. HTML module 22.6 Terugblik Module 2
<input>
Het <input> element wordt
gebruikt voor het aanmaken van
een invoerveld.

15. HTML module 22.6 Terugblik Module 2
<input Types>
Input type geeft je de mogelijkheid
het type invoerveld te bepalen
In het voorbeeld gebruiken we
4 verschillende inputtypes nl:
• Text (plain tekst alle karakter)
• Email (moet @ bevatten)
• Password (laat alleen bullets zien)
• Button (maakt button)
Name = php !

16. HTML module 22.6 Terugblik Module 2
<input-type: Email>
Fout ingevoerd
Goed ingevoerd
Input-type: submit

17. HTML module 22.6 Terugblik Module 2
<input-type: password>
Maakt bullets van ingevuld password!

18. HTML module 22.6 Terugblik Module 2
Attributes: Placeholder en Value
Value: is een waarde
die aan het inputveld
gekoppeld wordt. Bij
verwerken van het formulier
wordt dit meegenomen.

19. HTML module 22.6 Terugblik Module 2
<input-type: reset>
Na klikken op reset 2e scherm
Inputs: bevestigen en reset
Reset maakt het formulier leeg.

20. HTML module 22.6 Terugblik Module 2
Select-tag / options
De select-tag geeft je de mogelijkheid
een invoerveld met keuze mogelijkheden te maken

21. HTML module 22.6 Terugblik Module 2
<input-type: radio>
De input-type radio geeft je de mogelijkheid
een keuze mogelijk te maken.

22. HTML module 22.6 Terugblik Module 2
<input-type: checkbox>

23. HTML module 22.6 Terugblik Module 2
<input-type: date>

24. HTML module 22.6 Terugblik Module 2
<input-type: hidden>
Niet zichtbaar.
Bij verwerken wel uit
te lezen door name.

25. HTML module 22.6 Terugblik Module 2
<input-type: range>
De input-type range geeft je de mogelijkheid
een slider keuze te laten maken.

26. HTML module 22.6 Terugblik Module 2
<input-type: tel>
De input-type tel kan je gebruiken voor telefoonnummers
in te laten vullen.

27. HTML module 22.6 Terugblik Module 2
<Alle input-types op een rijtje>

28. HTML module 22.6 Terugblik Module 2
Input-attribute: Required
De required attribute zorgt ervoor dat het input veld
verplicht ingevuld moet worden.

29. HTML module 22.6 Terugblik Module 2
Input-attribute: readonly
De readonly attribute zorgt ervoor dat het input veld
niet gewijzigd kan worden.

30. HTML module 22.6 Terugblik Module 2
Input-attribute: pattern
Met de pattern attribute kan je bepalen waar aan de
inhoud minimaal moet voldoen.

31. HTML module 22.6 Terugblik Module 2
Input-attribute: pattern (password)

32. HTML module 22.6 Terugblik Module 2
Shape: vierkant
Shape: Cirkel
Shape: Triangle
Shapes

33. HTML module 22.6 Terugblik Module 2
Transistions

34. HTML module 22.6 Terugblik Module 2
Transform

35. HTML module 22.6 Terugblik Module 2
Transform

36. HTML module 22.6 Terugblik Module 2
CSS animations

37. HTML module 22.6 Terugblik Module 2
CSS animations
Voorbeeld bootje uit les!

38. Variabelen in css!
HTML module 22.6 Terugblik Module 2
Vanaf CSS3 is het mogelijk variabelen te definiëren in CSS.
Variabelen moeten gedeclareerd worden in een CSS Selector
Voor variabelen die je wilt gebruiken in de gehele scope van
een webapplicatie gebruik je de :root of body selector!

39. Variabelen in css!
HTML module 22.6 Terugblik Module 2
Schrijfwijze variabelen
De variabele begint met altijd --
Gebruik een naam die herkenbaar is bij het gebruik

40. Variabelen in css!
HTML module 22.6 Terugblik Module 2
Variabele voor :root en declareren en gebruiken.

41. Variabelen in css!
HTML module 22.6 Terugblik Module 2
Variabele declareren met var’s bestand.
variabelen.css style.css

42. Variabelen in css!
HTML module 22.6 Terugblik Module 2
variabelen.css style.css

43. Variabelen in css!
HTML module 22.6 Terugblik Module 2

44. Variabelen in css!
HTML module 22.6 Terugblik Module 2

45. Variabelen in css!
HTML module 22.6 Terugblik Module 2

46. Variabelen in css!
HTML module 22.6 Terugblik Module 2