Voor de nieuwe leerlingen in H4 en V4.
- 1 week HTML Tutorials
- 1 week=CSS Tutorials
- 3+1 weken handmatig website bouwen
Je hebt leerlingen die de tutorials pas volgen als ze aan hun site beginnen. In dat geval begin je dus gelijk aan je site en volg je de tutorials op een need-to-know basis. Ook na 4 weken je tutorials inleveren plus de code. Hopelijk heb je al wat 😉
Code Academy Tutorials
Maak een codeacademy account met je idiote nickname als username en je school email adres. Op de profile pagina zet je de boel dicht voor iedereen behalve jezelf.
Voor al deze opdrachten geldt: bewaar je code. Copy-paste naar Notepad++. Opslaan in map H:\Documenten\website\tutorials
- What is HTML?
- Learn HTML: 1. Elements and Structure, 2. Tables. 3.
Forms . 4. Semantic HTML. - Learn CSS. (helemaal)
- Inleveren? Je Profile Pagina van Codeacademy. Screenshot ‘m in een Powerpont die je inlevert..
Je kunt ook op verzoek van de docent even moeten inloggen en je vorderingen overleggen.
Stappenplan website bouw
Je bouwt de website via Notepad++ of VS Code als dat straks is geïnstalleerd.
- 1. Kies een onderwerp. Niet te klein, maar zeker niet te groot. Niet auto’s maar Ferrari. Niet paarden maar Shetlanders
- 2.Gebruik een standaard voorpagina zoals de
index.htmlvan https://www.handleidinghtml.nl/html/introductie/introductie03.html - 2. Kies voor een bepaalde layout. Pak bijvoorbeeld 1 van de voorbeelden van https://www.w3schools.com/css/css_website_layout.asp. Zittenblijvers en goeroe’s proberen een template van https://html5up.net/
- uploaden je bestanden (zie onder)
- bezoeken van je website
- Het uploaden, bekijken, testen, aanpassen is een kwestie van omgaan met de tools. Dat is wat je eigenlijk moet leren. Ja, ook de code zelf, maar ook en vooral het bouwproces.
- Check de Requirements (onder) en het privacy beleid
Upload je bestanden met FTP naar airybubbles7
Je ontvangt via teams van je docent een bericht met username / password. Deze heb je nodig om je bestanden te uploaden met het File Transfer Protocol. Er is een uitgebreide help pagina voor diverse programma’s en de website net2ftp
Op je site als bezoeker
Je moet je website ook bezoeken, duh. Waar staat ie?
- Als je username
snoozing_servant_444is, dan is je url https://blub.airybubbles7.nl/~snoozing_servant_444/- Het wokkeltje ~ (de tilde heet het eigenlijk) zit linksboven naast de [1].
- Kopieer en plak deze URL naar de browser en naar je bookmarks. Ga niet googlen op deze url.
- Zo kom je dus op de site als bezoeker
Thuis kun je evt gebruik maken van een betere HTML editor zoals Brackets voor Windows. Bewaar je files netjes en uploaden via de file manager.
Werkt het niet? Kijk op de FTP pagina bij de kleine lettertjes.
Privacy Beleid
Deze site weet alleen je nickname. […] Verder weet deze site niets van jou.
Airybubbles7 privacy beleid
En dat blijft zo: want jij mag er niks op plaatsen over jezelf. Geen Naam. Geen Telefoon. Geen Insta. Geen Snap. Geen Woonplaats. Geen Geboortedatum. Alleen de nickname die we je gegeven hebben.
Opdracht Mini-site: Requirements
Maak nu een site van minstens 3 pagina’s met toffe kleuren, de juiste links, afbeeldingen etc over een onderwerp naar keuze buiten de school / binnen jouw hobbies.
- Zorg dat de navigatie en branding consequent (op elke pagina hetzelfde) zijn.
- Interpunctie en afwerking dient vlekkeloos te zijn. Maak volop hyperlinks. Embed media. Hier show je de kennis van de tags die je hebt opgedaan. Je kunt alles nu opzoeken!
- Lees het privacy-beleid en zorg dat je die ook in dit project respecteert (7)
- Een moderne navbar is eigenlijk wel essentieel als je serieus verder wilt met deze site (7). w3schools legt het uit.
- Wil je niet een site met de navbar van w3schools maar iets mooiers, download dan een template van https://html5up.net/.
Rubrics HTML Tutorials
Gebruik deze rubrics voor je zelfbeoordeling op de laatste lesdag voor de deadline en lever je zelfbeoordeling in als powerpoint via Som. Vergeet de screenshots uit codeacademy niet.
| 3 | 5 | 7 | 9 | |
| Teacher HTML Tutorials | Niks ingeleverd of aangetoond binnen de deadline. | Je hebt HTML af en met CSS ben je tot halverwege gekomen. Niet op tijd af, maar je hebt wel op tijd ingeleverd. | Codeacademy Learn HTML 1 + 2 + 3 + 4 ; Toon aan met screenshot van profiel pagina. | Kijk ook video tutorials van bijv. Dani Krossing. Kijk zelf wat je nodig hebt of interesseert. PHP of Javascript kan ook. |
| Teacher CSS Tutorials | LearnCSS amper begonnen | LearnCSS tot 1/3 af (t/m Box Model) | Learn CSS voor 2/3 af : t/m Colors | LearnCSS Helemaal af = t/m Typography. |
Rubrics HTML Website
- 1 image mist: max 6.5
- 1 pagina mist: max 4.5
- hele site mist: 3.5
| 3 | 5 | 7 | 9 | |
| Navigatie en Branding | Er is geen voorpagina (index.html) dus je krijgt de apache-index. De beoogde voorpagina linkt wel naar de anderen, maar geen back. | Elke pagina heeft een andere look-and-feel | Interne navigatie klopt en de pagina’s hebben dezelfde look-and-feel met een font vastgelegd in CSS. | Je hebt een uitgekiende kleurencombinatie om je site een professioneel tintje te geven en minstens 2 bijpassende fancy lettertypes via google fonts of een geuploade font-file. Je hebt al dan niet en html5up sjabloon gebruikt. |
| Privacy | Je site lekt gegevens van anderen of uit je omgeving. Pas dus op voor de naam van je manege of je pony. | Je site lekt alleen je eigen gegevens. | Je voldoet aan het reglement en je kunt uitleggen wat het privacy-reglement inhoudt. | Je hebt docent of klasgenoten aantoonbaar geholpen de privacy te bewaken. Je kiest niet voor een google font maar een zelf geupload font om onze privacy te bewaken |
| Code, CSS en Navbar | Je hebt nog amper HTML codes ontdekt. | De images staan niet op je site zelf maar zijn ingelinkt van google images search results of andere externe sites. Of je CSS staat op een externe site OF Je hebt volop HTML tags maar die staan in een volgorde die helemaal nergens op slaat. OF Je code staat zo vol syntax fouten dat je dus nu een onvoldoende krijgt. | Je hebt alle basiscodes zo’n beetje wel gebruikt. Je hebt een werkende navbar uit CSS code. Je CSS code kleurt je site op een manier die past bij jouw project. | Je hebt je code gechecked op HTML5 validiteit (bijv met een validator) en ook op toegankelijkheid (accessibility, bijv via WAVE). Toon aan! |
| Inzet | Werken aan andere vak(ken) tijdens de les, klaar of niet klaar. | Je hebt moeite je telefoon en andere onzin af te blocken. | Je werkt prima in het tempo van de klas. Als je een voorsprong had, dan heb je daar iets goeds meegedaan. | Je hebt doorgewerkt tijdens en buiten de les, zodat je ver voor loopt op de deadlines van de klas |
| Content en rechten | Je kopieert van bronnen maar daarvoor had je de rechten niet en je geeft ze ook geen credits | Een 5 is eigenlijk niet mogelijk. | Je hebt weliswaar een goedkope rip-off gemaakt maar je geeft de echte maker wel de credits | Je maakt een eigen unieke creatie |
