Qu'est-ce que LessonUp
Rechercher
Canaux
Connectez-vous
S'inscrire
‹
Revenir à la recherche
12b. Content inladen /Responsive/background-img/colors/tickets
WEB
Webdevelopment-II
Les 5 / Week 13
Responsive / Content inladen /
background-img / colors / tickets
1 / 21
suivant
Slide 1:
Diapositive
Software Developer [WEB_A]
MBO
Studiejaar 1
Cette leçon contient
21 diapositives
, avec
quiz interactifs
et
diapositives de texte
.
La durée de la leçon est:
180 min
Commencer la leçon
Partager
Imprimer la leçon
Éléments de cette leçon
WEB
Webdevelopment-II
Les 5 / Week 13
Responsive / Content inladen /
background-img / colors / tickets
Slide 1 - Diapositive
Week 13 // WEB
Responsive / content inladen /
background-img / tickets
Slide 2 - Diapositive
Welk attribuut geven we mee aan een input-element om het in php te kunnen ophalen?
A
type
B
name
C
value
D
placeholder
Slide 3 - Quiz
Leg in je eigen woorden uit waarom je afbeeldingen optimaliseert.
Slide 4 - Question ouverte
Waarvoor dient een (HTML)-validator?
Slide 5 - Question ouverte
Hoe haal ik vanuit php gegevens op uit een HTML-formulier met name-attribuut 'email' en plaats deze in variabele $email?
Slide 6 - Question ouverte
Inhoud van de les
Een pagina responsive maken aan de hand van een mediaquery
Content uit een tekstbestand inladen met PHP in HTML
Een achtergrondafbeelding toevoegen
Kleurencombinaties kiezen
Tickets oplossen
Slide 7 - Diapositive
Responsive
Pagina's zien er anders uit op telefoon / tablet / laptop / beamerscherm.
Een pagina aanpassen aan de grootte van het scherm
Bijv. 2 kolommen bij kleiner scherm of zelfs 1.
Slide 8 - Diapositive
Responsive / mediaquery
In CSS schrijf je een mediaquery, zoals je ook CSS schrijft.
Je geeft aan welke CSS aangepast wordt bij welke resolutie
Bijv. Als de resolutie kleiner is dan 600px, maak de achtergrond van de body blauw.
Slide 9 - Diapositive
Responsive / controleren
Druk op CTRL + SHIFT + I en druk op het responsive icoontje (zie onder).
Slide 10 - Diapositive
Responsive / controleren
Pas de resolutie aan naar de grootte van je aanpassingen en kijk of de eigenschap verandert.
Slide 11 - Diapositive
Content ophalen (PHP)
We hebben al eens content verstuurd naar een tekstbestand (file_put_contents).
We kunnen ook content ophalen uit een tekstbestand en laten zien aan de gebruiker (file_get_contents) met behulp van PHP
Slide 12 - Diapositive
file_get_contents()
Leest een bestand als string
Bestandspad geeft de locatie en bestandsnaam aan van het in te laden bestand.
Andere parameters zijn 'waar starten in document' en bijv. 'maximale lengte'.
Slide 13 - Diapositive
Opdracht 13.2: file_get_contents gebruiekn
Slide 14 - Diapositive
File_get_contents werkend gekregen?
Klaar?
Slide 15 - Sondage
Afbeelding als achtergrond
Slide 16 - Diapositive
background-img()
Als je naast de afbeelding ook andere elementen (bijv. tekst/links) op dezelfde plaats wilt laten zien
Als we de afbeelding als achtergrond laten zien, kunnen we de andere content op de voorgrond van de afbeelding plaatsen.
background-img(url('bestandslocatie')) of
background(url('bestandslocatie')) voeg je toe in CSS.
Slide 17 - Diapositive
Voorbeeld background-img()
Slide 18 - Diapositive
Slide 19 - Diapositive
Tickets
Aanpassen van een bestaande website.
Klant heeft bijv. andere wensen
Belangrijk om goed code van anderen te kunnen interpreteren!
Slide 20 - Diapositive
Inleveropdracht 13
Open het moduleboekje van WDV-II en ga aan de slag met de inleveropdracht 13 op pagina 33 ('een ticket oplossen').
Lever deze opdracht in in itslearning --> WDV-II --> Opdrachten --> Week 13 --> Inleveropdracht 13
Slide 21 - Diapositive
Plus de leçons comme celle-ci
13. Content inladen / Boilerplate/background-img/colors/tickets
Février 2023
- Leçon avec
24 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1
3. CSS Box Model
Février 2023
- Leçon avec
17 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1
Quiz WDV Blok B
Juin 2023
- Leçon avec
23 diapositives
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
11. Forms verwerken met PHP
Février 2022
- Leçon avec
25 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1
BBL Week 2
Février 2024
- Leçon avec
15 diapositives
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 2
1. HTML-Basics
Février 2023
- Leçon avec
26 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1
Website bouwen voor beginners
Août 2023
- Leçon avec
13 diapositives
11. Forms verwerken met PHP
Février 2022
- Leçon avec
24 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1