Mappenstructuur en OneDrive

Via het Mediacollege heb je beschikking over OneDrive van Microsoft. Dit is een cloud opslag van maar liefst 1TB (1 terabite = 1000 gigabytes). Hier ga je je werk ook opslaan voor al je vakken. OneDrive is een prima backup voor al jouw bestanden. Is jouw laptop kwijt of stuk?, dan ben je niet je werk kwijt.

Microsoft OneDrive installeren en activeren op jouw computer (pdf)
Mappenstructuur (05:48)
! AANPASSING OP DE VIDEO INSTRUCTIE !
Noem je map reaw en niet DIR!
Gebruik bij voorkeur geen hoofdletters en zeker geen spaties of andere tekens.
OneDrive en mappenstructuur (pdf)

OPDRACHT: OneDrive & mappenstructuur

Installeer en activeer Onedrive en zet in OneDrive de mappenstructuur zoals hiernaast.

Iets online zetten op de Ma-server

Filezilla downloaden + gegevens invoeren (04:37)
Inloggen op jouw server bij Ma kan hier: https://panel.ma-cloud.nl/
Iets uploaden naar de Ma-cloud (05:30)
! TIP !
Maak het jezelf gemakkelijk.
In namen van bestanden en mappen gebruik je nooit spaties en liever geen hoofdletters.

! TIP !
Jouw website staat straks hier:
http://studentnummer.hosts1.ma-cloud.nl/ of http://studentnummer.hosts2.ma-cloud.nl/

OPDRACHT: Iets online zetten

Open het programma Teksteditor (mac) of Kladblok (PC)
Schrijf hier je naam en studentnummer
Sla dit bestand op in de map REAW en noem het index.html
(LET OP: Teksteditor.app op mac slaat jouw bestand op als .rtf. Dat is niet goed. Het moet .html zijn. Kijk in de dropdown naar deze optie.)
Zet dit bestand op jouw server bij Ma met FileZilla
Controleer of jouw 1ste html pagina online staat op:
http://studentnummer.hosts1.ma-cloud.nl/
of
http://studentnummer.hosts2.ma-cloud.nl/

0. Algemene computer skills

! TIP !

Gebruik schortcuts

Shortcuts zijn snelle manieren om veel voorkomende computerhandelingen te verrichten. Zonder shortcuts zou het werken op een computer veel trager gaan. Shortcuts is een combinatie van 2 en soms meer toetsen op jouw keyboard van je computer. Hieronder staan een paar shortcuts die in bijna alle programma’s werken:

Kopiëren: cmd C
Plakken: cmd V
Dupliceren (kopiëren en plakken in één handeling): cmd D
Alles selecteren: cmd A
Iets slepen en kopiëren tegelijk: alt-slepen
Bestand openen: cmd O (letter o, niet cijfer)
Bestand sluiten: cmd W
Nieuw bestand maken: cmd N

Werk je op een PC? Dan gebruik je in plaats van de CMD key de Ctrl key

Meer handige toetscombinaties vind je hier

1. Introductie

Wat is HTML (07:38)
Download en installeer de HTML-editor Brackets op http://brackets.io/
! AANPASSING OP DE VIDEO INSTRUCTIE !
In de video instructie wordt gesproken over het programma Textwrangler. Dat gebruiken we niet meer. Daar waar Gerard het over Textwrangler heeft vul jij Backets in.
Er is ook een instructievideo over Brackets, maar die is vooral interessant als je al wat beter kunt HTMLlen: Brackets instructie(09:21)
HTML bewaren (02:16)
HTML compleet maken (07:58)
h1, h2, p, etc. (05:54)
Charset (01:38)
Keywords (01:30)
Description (03:12)
Author (01:41)
HTML valideren (02:37)
Check je HTML op validator.w3.org of op freeformatter.com/html-validator.html

OPDRACHT 1

Basis (6): Maak een index.html en sla deze op in de map hoofdstuk1 (h1 mag ook). In je index.html staat je naam in de <title>-tag en in de meta-tags gebruik je je eigen naam en omschrijving. Gebruik verder alle HTML-tags die in bovenstaande instructievideo’s worden uitgelegd.
Valideer je codes zodat ze foutloos zijn.
Gevorderd (8): Zet je 1ste opdracht in de juiste map online
Excellent (10): Zoals boven en gebruik geen Lorem ipsum tekst, maar schrijf een korte motivatie waarom jij deze opleiding hebt gekozen.

2. Plaatjes en links

Commentaar in HTML (03:46)
Enter werkt niet (02:40)
! Let op !
In de instructievideo wordt een <h1> binnen een <p></p> geplaatst. Dat is niet juist!
Sluit altijd je <p> tag af voordat je een <h1> opent.
Dus als volgt:
```
<p>Lorem ipsum</p>
<h1>Dolar</h1>
<p> et samet...</p>
```
Unordered list (02:09)
Download (03:49)
- Plaatje
- MP3
- MP4
Plaatjes (07:14)
Submappen (04:18)
Links maken (03:52)
Link in nieuwe tab (01:52)
Email-link (01:37)
Plaatje dat linkt (01:34)

Check je HTML op validator.w3.orgof op freeformatter.com/html-validator.html

! TIP !
Als je het zo schrijft in je codes, dan moet je het ook zo online zetten, anders zie je geen plaatjes/video’s/mp3’s. Denk om hoofdletters:

! TIP !
Code indentation
Maak het jezelf gemakkelijk en maak je code netjes. Nette code werkt sneller. En foutjes zie je ook veel sneller.
Zo ziet nette code er uit

<body>
   <h1>Titel</h1>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
</body>

Zoals je ziet laat je de code inspringen. Een html-tag in een html- tag laat je inspringen. Een tag die op het zelfde niveau zit staat netjes onder de vorige tag. Dit heet code indentation.
Inspringen doe je met de tab toets (de toets in het plaatje hiernaast)

De code hieronder is niet fout, maar het is ook niet onoverzichtelijk.

<body>
<h1>Titel</h1>
<ul><li>Item 1</li>
<li>Item 2</li>
</ul></body>

Je kan code indentation met de hand doen, of je gebruikt een online code formatter zoals bijvoorbeeld freeformatter.com/html-formatter.html

! TIP: niet alle fouten zijn fout.
Met de validator van W3schools (validator.w3.org of op freeformatter.com/html-validator.html) krijg je een aantal fouten en meldingen die je mag negeren zoals:

lang attribuut in html-detag
frameborder attribuut in de iframe-tag. Frameborder is ouderwets. Maar er zijn nog ouderwetse browsers, dus gebruiken we hem nog
space character in <a href=”mailto:b.heldt@ma-web.nl?subject=Mail Bethuel”></a>. Een spatie mag niet maar reken ik toch niet fout als die spatie in de subject staat. Je kunt die foutmelding verwijderen door de code %20 te gebruiken i.p.v. een spatie
```

<a href="mailto:b.heldt@ma-web.nl?subject=Stuur een mail naar Bethuel">Mail mij</a>

<! link met %20 ipv spaties -->
<a href="mailto:b.heldt@ma-web.nl?subject=Stuur%20een%20mail%20naar%20Bethuel">Mail mij</a>
```

OPDRACHT 2

Basis (6): Zet je index.html van dit hoofdstuk online, met daarin je naam als commentaar, je naam in de title-tag, unordered list, mp3, filmpje, link naar Google die opent in een tweede tab en een email-link naar je eigen Ma-mail en een plaatje dat linkt.
Gevorderd (8): Zoals boven, en zet dit hoofdstuk in de juiste map online. En gebruik submappen voor je plaatjes, mp3 en mp4. Dus links/afbeeldingen/DaftPunk.png en links/audio/bamboleo.mp3 enzovoort.
Je code is uiteraard foutloos (checken met de code validator van w3schools)
Excellent: (10): Zoals boven. En laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool. Zorg er ook voor dat er geen spaties staan in je mailto hyperlink.

3. Bestanden IN je pagina insluiten (embedden) i.p.v. linken

OPDRACHT 3

Basis (6): Zet je index.html van hoofdstuk 3 online, met daarin een plaatje, audio bestand, Youtube-filmpje en GoogleMaps.
Valideer je codes, zorg dat ze foutloos zijn (de melding over frameborder attribute in Googlemaps mag je laten zitten).
Gevorderd (8): Je plaatje en filmpje zijn in de juiste verhouding geschaald. En je gebruikt een audio bestand en plaatje die je zelf hebt gemaakt.
En gebruik submappen voor je plaatjes, mp3 en mp4. (dus links/afbeeldingen en links/audio en links/video )
Excellent (10): Zoals boven. En je maakt ook je eigen video bestand. Dit mag natuurlijk ook een video zijn die je gemaakt hebt bij REAV (motion graphics).
En laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool: freeformatter.com/html-formatter.html

4. Mini-website

OPDRACHT 4

Zet een mini-website van 7 pagina’s online. Op iedere pagina staat de naam van die pagina in de title-tag en de h1 aangepast in de code.
Op iedere pagina is iets anders te zien: 1.plaatje, 2.video, 3.audio, 4.youtube, 5. googlemaps, 6.email-link, 7.link naar Google geopend in tweede tab.

Basis (6): Zet je mini-website online in de juiste map. Valideer alle pagina’s zodat ze foutloos zijn (frameborder mag wel natuurlijk).
Je eerste homepagina heet natuurlijk index.html (en niet plaatje.html of zo).
Gevorderd (8): Je plaatjes, video en audio zitten in handige submappen. Elk type in een eigen submap: dus /links/audio/ links/video/ links/images bijvoorbeeld. En laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool.
Excellent (10): Elke pagina heeft een eigen achtergrond kleur met bgcolor. Zoek uit hoe dat moet op w3schools.com/tags/att_body_bgcolor.asp
Met CSS mag dit ook (zoek dan uit hoe dat moet met CSS)Klik hier voor een aantal kleuren die je kan gebruiken

Inleverformulier opdracht 4

! TIP !
!!! Er zijn nog meer HTML5-codes, maar dat is voor nu niet zo belangrijk. Je gaat echter niet alles leren in deze filmpjes, dus zelf zoeken op internet hoort bij Webdesign !!!
Je vindt heel veel nuttige informatie bij w3schools.com

5. Cascading Style Sheets

! TIP !
Lees en oefen hier met de 3 manieren van CSS gebruiken.
Bekijk hier alle soorten kleur namen die je kan gebruiken in je HTML pagina.

! TIP !

<body style="background-color: #FF9900; color: white;">

<head>
   <title>Embedded CSS</title>
   <style>
      /* Vanaf hier is het CSS */
      body{
          background-color: #FF9900; 
          color: white;
      }
      /* Tot hier is het CSS, hieronder wordt het weer HTML */
   </style>
</head>

<link rel="stylesheet" href="mijn_stijl.css">

OPDRACHT 5a

Basis (6): Zet een html pagina online waarin je de
- <h1> een achtergrond kleur geeft met inline CSS,
- de <body> een andere achtergrond kleur geeft met embedded CSS
- en de <p> een andere achtergrond kleur geeft met externe CSS.
  Zet je pagina online op in het mapje hoofdstuk5a of h5a
Gevorderd (8): Geeft naast de achtergrond kleur de <h1>, <body> en <p> ook een aparte tekst kleur (dat heet in CSS gewoon “color“) via de externe css. Zoek uit hoe dat moet op https://www.w3schools.com/cssref/pr_text_color.asp .
Laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool.
Excellent: (10): De eerste letter van de <h1> en de <p> tag maak je anders van kleur. Dit kan je doen door een klein stukje HTML om de eerste letter van de tekst in je <h1> en je <p> tag te zetten. Dit stukje HTML heet <span></span>
```
<h1><span>D</span>eze titel heeft om de eerste letter een span-tag.</h1>
```

Let op: geef geen achtergrond kleur met de html code bgcolor (zie opdracht 4 bij Excellent). Dat is geen CSS maar een ouderwetse HTML methode die bijna nooit meer wordt gebruikt.

Zorg er voor dat al je codes foutloos zijn!

Inleverformulier opdracht 5a

! AANPASSING OP DE VIDEO INSTRUCTIE !

In de volgende instructies wordt alle CSS uitgelegd met embedded CSS. Maar het is de bedoeling dat jij je styles met een externe CSS maakt.
Je gebruikt alleen embedded of inline CSS als die style ook echt alleen maar voor één pagina of één html-object is bedoeld.
In de instructie wordt gesproken over ~~css.html~~. Maar zo noem jij je pagina niet. Jij noemt je pagina gewoon index.html
Je hebt in al je opdrachten altijd één index.html

Meer CSS

Achtergrond-afbeelding (06:00)
```
body{
   background-image: url(links/afbeeldingen/DaftPunk.png); 
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;/*maar hier kan natuurlijk ook contain staan of een maat in pixels of procenten*/
}
```
Lees hier meer over en en oefen met background style
H1 vormgeven (03:51)
Volgorde van HTML en CSS (04:32)
P vormgeven (02:51)
Begin-kapitaal (04:34)
P First-line (04:03)
CSS valideren 1 (02:34)
CSS valideren 2 (01:34)

! TIP !
Valideer je CSS met csslint.net/

OPDRACHT 5b

Let op! in deze opdracht schrijf je al je CSS in een externe stylesheet. Dus niet, zoals in de instructiefilmpjes CSS in de <head> tag. Alle technieken uit bovenstaande instructievideo’s pas je toe. Eén html element heeft een mooi opgemaakt beginkapitaal met CSS gemaakt (first-letter). Jouw p-tag heeft een first-line die er anders uitziet dan de rest van de tekst.

Basis (6): Zet een index.html online, die er ANDERS uit ziet dan in de filmpjes. Dus, een ander plaatje, andere koppen, andere lettertypes, andere kleuren, andere begin-kapitaal, etc. Zorg er voor dat al je codes foutloos zijn!
Zet je pagina online op in het mapje hoofdstuk5b of h5b
Gevorderd (8): Zorg ervoor dat je pagina goed leesbaar is. Je achtergrond plaatje is niet storend voor de teksten. Je kleuren combineren goed. Achtergrond en tekst kleur zijn voldoende contrasterend.
Laat je code netjes inspringen. Dit mag je natuurlijk doen met een online tool.
Excellent: (10): Je <h1>, <p>, <ul> tags hebben alle drie een ander achtergrond plaatje die de tekst wel leesbaar houdt. Zorg ervoor dat je teksten voldoende contrasteren met de achtergrond en dat het geheel mooi is.

Inleverformulier opdracht 5b

Links stylen (totaal 12 min. videos)

! TIP !
Als je html elementen, zoals jouw navigatie, naast elkaar hebt gezet met float, dan moet je je float ook weer stoppen.In jouw unordered list zet je dit:

<ul class="clearfix">
   <li> ...etc...

En in jouw stylesheet zet je dit:

.clearfix::after {
   content: "";
   clear: both;
   display: table;
}

lees meer over float en clearfix

OPDRACHT 5c

Maak de resterende pagina’s (totaal 5) van je website met één externe CSS. Zorg er voor dat je navigatie op alle pagina’s er hetzelfde uitziet en dat jouw navigatie is opgemaakt met een mooi randje, achtergrond kleur en je maakt gebruik van een andere hover style in jouw navigatie. Maak gebruik van de clearfix oplossing bij je navigatie als jouw navigatie gebruik maakt van float (zie hierboven).
Iedere pagina laat m.b.v. een <h1> de naam van de pagina zien.
Iedere pagina heeft die naam ook in de <title> staan.
Iedere pagina heeft een ander achtergrondplaatje (dit mag je doen met embedded of inline CSS, maar het mag ook met een class of id, maar dat is advanced…).
En op iedere pagina staat ook weer andere tekst. Leuk als jouw website echt een onderwerp heeft, bijvoorbeeld een artiest of jouw favoriete kledingmerk.
Kortom, je kan nu een echte website maken die je zelf helemaal hebt vormgegeven.

Basis (6): Alle linkjes moeten werken en alle codes zijn foutloos.
Zet je pagina online op in het mapje hoofdstuk5c of h5c
Gevorderd (8): Je pagina’s zijn goed leesbaar. Voor en achtergrond kleur hebben voldoende contrast. Achtergrond plaatjes zijn niet storend voor de tekst. Je kleuren zijn mooi op elkaar afgestemd. Je links hebben een duidelijke hover style. Bij hover verspringt je tekst of menu niet.
Laat je code netjes inspringen (code indentation). Dit mag je natuurlijk doen met een online tool.
Excellent: (10): Gebruik in één HTML-tag een CSS kleurverloop. Dat heet in het Engels ‘gradient‘. Zoek online hoe je een CSS gradient maakt. De zoekterm is dan “CSS gradient generator”. Let er op dat je teksten leesbaar en mooi blijven. De achtergrond mag niet storend zijn. Voor een 10 heeft jouw pagina een mooi ontwerp. Het is geen ratjetoe van achtergrondplaatjes, gradients en fonts.

Inleverformulier opdracht 5c

6. Wrapper van divs (totaal 38 min. videos)

! TIP ! Maat eenheden en berekenen
HTML objecten kun je een breedte en/of hoogte geven. Dit kan je doen met

pixels: px

#wrapper{
   width: 600px; /*vaste maat*/
}

percentage: %

#wrapper{
   width: 80%; /*flexibele maat ten opzichte van het HTML element waar #wrapper in zit.*/
}

viewport width: vw: breedte van jouw browser.

#wrapper{
   width: 80vw; /*flexibele maat ten opzichte van de breedte van jouw scherm*/
}

viewport height: vh: hoogte van jouw browser.

#wrapper{
   width: 80vh; /*flexibele maat ten opzichte van de hoogte van jouw scherm*/
}

sommetje maken met meerdere maat eenheden: calc()
Deze functie is heel handig als je HTML objecten met verschillende maat eenheden bij elkaar moet optellen of aftrekken. Bijvoorbeeld: jouw ‘wrapper’ heeft een breedte van 80 procent van jouw scherm min 2 x 20 pixels van de margin.
Let op: om het min of plus teken moeten spaties staan.
Lees hier meer over calc()
```
#wrapper{
   width: calc(80% - 40px); /*bereken de maat*/
}
```

Lees hier meer over verschillende maat eenheden voor een website.

OPDRACHT 6
Zet je gecentreerde index.html online, onderverdeeld in header, 2 sidebars, content en footer. Maak gebruik van margins en paddings zodat er ruimte zit tussen Content en de Sidebars. Gebruik totaal andere kleuren, lettertypes en achtergrondplaatje dan in de filmpjes. Zet een schaduw achter de wrapper. Je stylesheet is een externe css (zie hoofdstuk 5).
Je hebt code indentation toegepast en je hebt je code gevalideerd op foutjes.

Basis (6): Jouw code is foutloos en netjes.
Jouw wrapper div is 1000 pixels breed. En alle divs zijn daarop aangepast en sluiten mooi aan. Dus NIET de 600 x 500 pixels zoals in de filmpjes (gewoon proberen, je merkt vanzelf hoe groot dat is).
Gevorderd (8): Je hebt je wrapper (of container) een breedte gegeven in procenten of in vw en vh (viewport width en viewport height, dus niet in pixels) van de totale breedte van je pagina. Alle elementen in jouw container zijn daarop aangepast. Jouw mondriaan container schaalt goed mee als je het formaat van jouw browser aanpast.
Excellent (10): Jouw container is mooi vormgegeven. Je hebt nagedacht over kleuren, afbeeldingen, compositie en font (lettertype). Je tekst is goed leesbaar. Afbeeldingen zijn niet storend. Je maakt ook gebruik van borders die passend van kleur en vorm zijn bij jouw ontwerp.

Inleverformulier opdracht 6

7. Mini website – the sequel

! TIP ! Gebruik een id

Een stylesheet gebruik je om meerdere pagina’s dezelfde stijl te geven. Maar wat doe je als jouw pagina’s wel heel erg op elkaar lijken, maar er ook verschillen zijn. Zoals een achtergrondplaatje. Dan geef je jouw body-tag een id, een identifier. Die id is uniek. Dus elke pagina krijgt in de body-tag een ander id.

<body id="body_home"><!-- maar hier mag ook Michael_Jackson staan of appeltaart -->

</body>

In jouw externe stylesheet gebruik je die id als volgt.

/* styles die specifiek voor 1 pagina zijn */
body#body_home {
   background-image: url(achtergrondplaatje_home.jpg);
}
body#body_contact { 
   background-image: url(achtergrondplaatje_contact.jpg); 
}

/* styles die voor alle pagina's gelden */
body{
   background-repeat: no-repeat;
   background-size: contain;
   background-position: top left;
}

Zoals je ziet geef je zo’n id in de stylesheet een #

OPDRACHT 7
Zet een website van minimaal 4 pagina’s online in de map /hoofdstuk7 of /h7. Alle html-pagina’s zijn gekoppeld aan 1 externe stylesheet. Alle pagina’s hebben een andere achtergrond.

Basis (6): Je hebt code indentation toegepast en je hebt je code gevalideerd op foutjes.
Alle links werken. Elke pagina heeft een andere achtergrond afbeelding door middel van embedded CSS of inline CSS.
Gevorderd (8): Jouw site ziet er echt goed uit. Je teksten zijn leesbaar, de achtergrond afbeelding en/ of kleur is niet storend. Je hebt nagedacht over kleur gebruik en kleur contrast. Je hebt gelet op regelafstand (line-height), tekst grootte (font-size) van h1 en p tags.
Excellent (10): Jouw achtergrond afbeeldingen (elke pagina een andere) staan ook in de externe CSS. Dit doe je door elke body-tag van elke pagina een id te geven. In jouw externe CSS maak je gebruik van die id’s.

Inleverformulier opdracht 7

8. Mooie vormen met CSS (totaal 6 min. videos)

OPDRACHT 8
Maak de volgende 3 pagina’s na en zet ze online in het mapje hoofdstuk8 of h8. Zet op elke pagina hyperlinks naar de 2 andere pagina’s

Basis (6): Je hebt code indentation toegepast en je hebt je code gevalideerd op foutjes. Je mag de CSS per pagina embedden of 3 verschillende externe stylesheets maken.
Gevorderd (8): De bollen op de bollen-pagina schalen mee met de breedte van jouw scherm. Dus als je je scherm groter of kleiner maakt verplaatsen de bollen.
En de bollen en de blokken hebben allemaal verschillende borders. Maak verschillen met border-style en border-width. Lees hier meer over border-styles
Excellent (10): In elke pagina zit in één van de bollen en blokken een kleurverloop als achtergrond. Dit doe je met een CSS gradient (kleurverloop). Zoek online hoe je een CSS gradient maakt. De zoekterm is dan “CSS gradient generator“.

Inleverformulier opdracht 8