13. Content inladen / Boilerplate/background-img/colors/tickets

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II

Les 5 / Week 13

Boilerplate / content inladen / 

background-img / colors / tickets

Week 13 // WEB

Boilerplate / content inladen /

background-img / colors / tickets

Welk attribuut geven we mee aan een input-element om het in php te kunnen ophalen?

1. type
2. name
3. value
4. placeholder

Leg in je eigen woorden uit waarom je afbeeldingen optimaliseert.

Waarvoor dient een (HTML)-validator?

Hoe haal ik vanuit php gegevens op uit een HTML-formulier met name-attribuut 'email' en plaats deze in variabele $email?

Inhoud van de les

• Boilerplate
• Content uit een tekstbestand inladen met PHP in HTML
• Een achtergrondafbeelding toevoegen
• Kleurencombinaties kiezen
• Tickets oplossen

HTML 5 Boilerplate

• Een basisstructuur en reset voor je website. 
• overschrijft de basisstructuur van je browser
• Kopieren & plakken naar je root folder van je website
• https://html5boilerplate.com/
  

Opdracht 13.1: boilerplate installeren

• We gaan naar de website https://html5boilerplate.com/.
  
• Klik op de oranje download (“Download v8.0.0”). Als hier een nieuwere versie staat download je die.
  
• Pak het bestand uit en kopieer de gehele map ‘html5-boilerplate_v8.0.0’ naar je ‘htdocs’-map.
  
• Alle bestanden in deze map representeren de opbouw van een basis HTML-document. Deze map ga je niet bewerken, maar gebruik je enkel om vandaan in zijn geheel (alle bestanden IN de map) te kopiëren wanneer je een nieuw project maakt.

!

Vanaf vandaag gaan wij ook werken vanuit deze basisstructuur. In elk project dat je nieuw aanmaakt start je niet meer met het maken van een mapje ‘css’ en ‘img’, maar in plaats daarvan kopieer je elke keer alle bestanden in de gemaakte map met boilerplate-bestanden.

Klik hier op 'Klaar!' als je HTML Boilerplate hebt gedownload en op de juiste plaats hebt gezet.

Klaar!

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

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'.

Opdracht 13.2: file_get_contents gebruiekn

File_get_contents werkend gekregen?

Klaar?

Afbeelding als achtergrond

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.

Voorbeeld background-img()

Opdracht 13.3: achtergrondafbeelding toevoegen

• Open je portfolio-website in Sublime tekst.
  
• Zoek een afbeelding die je op je portfolio-website wilt gebruiken, bijvoorbeeld met vrienden of familie er op. .
  
• Probeer je afbeelding als achtergrond toe te voegen.
  
• Laat zien dat hij als achtergrond werkt door er elementen voor te plaatsen, bijvoorbeeld een bijschrift of titel IN je foto.
  
• Test je website in de browser.
  

Kleurcombinaties

• Combinaties van kleuren die bij elkaar passen toevoegen aan je webpagina.
• www.coolors.co --> Start the generator
• Gebruik niet ALLE kleuren, maar maak een selectie om je pagina overzichtelijk en zakelijk te houden.
• Leg accenten (bijv. hover met een kleurtje)

Voorbeeld van coolors.co

Tickets

Aanpassen van een bestaande website. 

Klant heeft bijv. andere wensen 

Belangrijk om goed code van anderen te kunnen interpreteren!

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