De opmaak van deze pagina is geschreven in een CSS-bestand. CSS staat voor Cascading Style Sheets. Een CSS-bestand is een stijlblad waarin de opmaak van verschillende html "tags" worden beschreven. De opmaak van deze website staat in een apart CSS-bestand (niet embedded CSS/CSS in HTML) genaamd "style.css" (onderaan deze pagina te downloaden).
Er zijn verschillende classes gebruikt voor deze website. Hier heb je de classes waarvan ik denk dat ze het belangrijkst zijn en welke ik het meest gebruikt hebt.
| Class | Beschrijving |
|---|---|
| .bold | Maakt woord(en) dikgedrukt |
| .italic | Maakt woord(en) cursief |
| .width_100 | Geeft html attributen een breedte van 100% binnen de box |
| .index_h1 | Hierin staan opmaakgegevens over de h1 van de index-pagina |
| .img_icon | Hierin staan opmaakgegevens over de images van een icon |
| .index_main | Hierin staan opmaakgegevens over de main van de index-pagina |
| .index_p | Hierin staan opmaakgegevens over de p van de index-pagina |
| .index_p_ background |
Hierin staan opmaakgegevens over de achtergrond van de p van de-index pagina |
| .index_h2 | Hierin staan opmaakgegevens over de h2 van de index-pagina |
| .index_background | Hierin staan opmaakgegevens over de achtegrond van de index-pagina |
| .footer_p | Hierin staan opmaakgegevens over de p van de footer |
| .navbar | Hierin staan opmaakgegevens over de navigatie-bar |
| .navbar_links | Hierin staan opmaakgegevens over de links van de navigatie-bar |
| .logo | Hierin staan opmaakgegevens over het logo van de navigatie-bar |
| .footer_logo | Hierin staan opmaakgegevens over het logo van de footer |
| .toggle_button | Hierin staan opmaakgegevens over het hamburger-logo van de navigatie-bar |
| .bar1 | Hierin staan opmaakgegevens over de eerste laag van het hamburger-logo |
| .bar2 | Hierin staan opmaakgegevens over de tweede laag van het hamburger-logo |
| .bar3 | Hierin staan opmaakgegevens over de derde laag van het hamburger-logo |
| .button | Hierin staan opmaakgegevens over een knop |
| .button_2 | Hierin staan opmaakgegevens over een tweede soort knop |
| .ul_list_none | Haalt bij een ongeordende lijst de puntjes weg |
| .backgroundcolor_blue | Geeft een blauwe achtergrondkleur |
| .clock_center | Zorgt ervoor dat de klok zich in het midden van de webpagina bevindt |
| .clock_container | In deze container zit de klok |
| .clock_container_schoolexamen | Deze container is speciaal voor de klok op de schoolexamen-pagina |
| .table_text | Hierin staan opmaakgegevens over de text in tabellen |
| .table_container | Zorgt ervoor dat tabellen die te groot zijn, verticaal kunnen worden bekeken door te scrollen/swipen |
| .text_align_left | Zorgt ervoor dat tekst links op de webpagina wordt geplaatst |
| .text_align_center | Zorgt ervoor dat tekst in het midden gaat staan |
| .calc | Deze class is gegeven aan een div waar mijn rekenmachine in zit |
| .account_main | Hierin staan opmaakgegevens over de container van het inlogformulier op de account-pagina |
| .schoolexamen_table | Hierin staan opmaakgegevens over de tabel op de schoolexamen-pagina |
| .opmaak_table | Zorgt voor een mooie tabel |
| .lime | Geeft tekst de kleur "lime" |
| .blue | Geeft tekst de kleur blauw |
| .yellowgreen | Geeft tekst een groengelige kleur |
| .aqua | Geeft tekst de kleur "aqua" |
| .yellow | Geeft tekst een gele kleur |
| .red | Geeft tekst een rode kleur |
| .canvas_container | Zorgt ervoor dat dingen met Canvas mooi op de website komen te staan. |
| .account_body | Geeft een achtergrond-afbeelding op een aantal schoolexamen-pagina's |
| .account_error | Hierin staan opmaakgegevens om een error op de schoolexamen-pagina te weergeven |
| .account_succes | Hierin staan opmaakgegevens om een succes op de schoolexamen-pagina te weergeven |
| .pop_up_container | Hierin staan opmaakgegevens voor een pop-up |
| .red_slider | Hierin staan opmaakgegevens voor de slider die de red-value op de jQuery-pagina verandert. |
| .tablink | Hierin staan opmaakgegevens voor de knoppen die de verschillende tabbladen op de gimp-pagina openen. |
| .tabcontent | Hierin staan opmaakgegevens van de tabbladen op de gimp-pagina |
| .tumbnail | Hierin staan opmaakgegevens voor de container van elke tumbnail op de gimp-pagina in de foto-album-tumbnail-slider |
| .gimp_responsive_image | Zorgt ervoor dat de afbeeldingen die op de gimp-pagina worden getoont, mooi wworden weergegeven |
| .gimp_img | Hierin staan opmaakgegevens over de afbeeldingen in de foto album |
| .mySlides | Hierin staan opmaakgegevens over de container waarin de foto's worden weergeven in de foto album |
| .mybtnn | Hierin staan opmaakgegevens voor de knop die je weer naar boven op de pagina brengt |
De classes hebben natuurlijk elementen en functies. Hier staan ze per class op een rijtje:
| Class | Element(en) | Voorbeeld |
|---|---|---|
| .bold | font-weight: bold; | In de navigatie-bar is op dit moment de tekst "Opmaak" dikgedrukt (geeft aan dat je je op dit moment op deze pagina bevindt). |
| .italic | font-style: italic; | De classes in deze tabel zijn cursief |
| .width_100 | width: 100%; | Op de contactpagina hebben de linkjes (knopjes) een breedte van 100% |
| .index_h1 |
1. text-align: center;
2. font-size: 400%; 3. color: white; 4. margin-top: 10%; 5. text-shadow: 1px 1px black; 6. padding: 2.5%; |
1. De titel is gecentreerd
2. De tekstgrootte is 400% 3. De titelkleur is wit 4. De titel is 10% onder de header 5. De titel heeft een zwarte schaduw 6. De titel is altijd minimaal 2.5% verwijdert van de rand |
| .img_icon |
1. width: 100px;
2. height: 100px; |
1. De iconen op de contactpagina hebben een breedte van 75 pixels
2. De iconen op de contactpagina hebben een hoogte van 75 pixels |
| .index_main |
1. margin: auto;
2. max-width: none; |
1. De tekst en de knop "lees meer" bevinden zich in het midden van de main
2. De tekst en de knop "lees meer" hebben geen maximale breedte (in tegenstelling tot de tekst op andere webpagina's) |
| .index_p | 1. margin-top: 0%;
2. font-size: 200%; 3. margin-bottom: 0%; 4. max-width: 1500px; 5. margin-left: auto; 6. margin-right: auto; |
1. De tekst onderaan de index-pagina bevindt zich direct onder de titel
2. De tekstgrootte van de tekst onderaan de index-pagina is 200% groot 3. De tekst onderaan de index-pagina bevindt zich direct boven de footer 4. De tekst onderaan de index-pagina kan maar 1500 pixels breed zijn 5/6. De tekst onderaan de index-pagina is evenveel verwijdert van de rechterrand als de linkerrand |
| .index_p_ background |
1. margin: 0px;
2. padding: 0px; 3. min-width: 100%; 4. background-color: white; |
1/2. De achtergrond van de tekst onderaan de index-pagina loopt van de linkerrand tot de rechterrand
3. De minimale breedte van de achtergrond van de tekst onderaan de index-pagina is 100%, dus de achtergrond loopt helemaal tot aan de randen 4. De kleur van de achtergrond van de tekst onderaan de index-pagina is wit. |
| .index_h2 |
1. margin-top: 60%;
2. margin-bottom: 0%; 3. margin-left: auto; 4. margin-right: auto; 5. max-width: 1500px; |
1. De titel "Over deze website" op de index-pagina bevindt zich 60% onder de leesmeer-knop
2. De titel "Over deze website" op de index-pagina bevindt zich direct boven de tekst eronder 3/4. De titel "Over deze website" is gecentreerd 5. De titel "Over deze website" kan niet breder zijn dan 1500 pixels |
| .index_ background |
1. background-image: url('../images/index_background.jpg');
2. background-repeat: no-repeat; 3. background-position: center top; 4. background-color: black; 5. height: auto; 6. width: auto; |
1. De achtergrond-afbeelding op de index-pagina is de afbeelding "index_background" die in de map images zit
2. De achtergrond-afbeelding op de index-pagina herhaalt zich niet 3. De achtergrond-afbeelding op de index-pagina is gecentreerd en bevindt zich bovenaan de pagina 4. De kleur van de achtergrond van de index-pagina is ook zwart, zodat de afbeelding goed verloopt 5/6. De grootte van de achtergrond-afbeelding op de index-pagina wordt berekent door de browser, de afbeelding wordt dus 1920 pixels bij 1200 pixels (zo groot is het bestand) |
| .footer_p |
1. font-size: 1.5rem;
2. font-weight: bold; 3. padding: 0; |
1. De tekstgrootte van "©" in de footer is 1.5rem groot (rem = hoveel keer groter dan de basisgrootte)
2. De tekstgrootte van "©" in de footer is dikgedrukt 3. De tekstgrootte van "©" in de footer bevindt zich direct tegen de rand van de box aan |
| .navbar |
1. display: flex;
2. justify-content: space-between; 3. align-items: center; 4. background-color: rgb(73, 73, 73); 5. color: white; |
1. De logo en de links van de navigatie-bar zitten naast elkaar
2. Er bevindt zich ruimte tussen de linkjes in de navigatie-bar 3. De linkjes in het hamburger-menu bevinden zich in het midden 4. De achtergrondkleur van de navigatie-bar is grijs met rgb-waarde: "rgb(73, 73, 73) 5. De linkjes van de navigatie-bar hebben een witte tekstkleur |
| .navbar_links |
Dit is handig om te weten waar de navigatie-linkjes zich bevinden.
In het CSS-bestand staat bijvoorbeeld ".navbar_links ul {...}" Hierna staan bijvoorbeeld elementen zodat die alleen gelden voor de "ul" in de class .navbar_links |
De linkjes hebben bijvoorbeeld een "display: flex;", zodat alle linkjes naast elkaar zitten |
| .logo |
1. font-size: 1.5rem;
2. font-weight: bold; 3. letter-spacing: 2.5px; 4. margin-top: 0.5rem; 5. margin-right: 0.5rem; 6. margin-bottom: 0.5rem; 7. margin-left: 1rem; |
1. De tekstgrootte van het logo in de header is 1.5rem
2. De logo in de header is dikgedrukt 3. De logo in de header heeft 2.5 pixels tussen elke letter 4. Het logo heeft 0.5rem tussen de bovenrand van de navigatie-bar 5. Het logo heeft 0.5rem tussen de rechterrand van de navigatie-bar 6. Het logo heeft 0.5rem tussen de onderrand van de navigatie-bar 7. Het logo heeft 0.5rem tussen de linkerrand van de navigatie-bar |
| .footer_logo |
1. font-size: 1.5rem;
2. font-weight: bold; 3. letter-spacing: 2.5px; 4. margin: 0; |
1. De tekstgrootte van het logo in de footer heeft een tekstgrootte 1.5rem
2. De logo in de footer is dikgedrukt 3. De logo in de header heeft 2.5px tussen elke letter 4. Het logo heeft geen ruimte tussen de box waarin die zich bevindt |
| .toggle_button |
1. position: absolute;
2. top: 0.75rem; 3. right: 1rem; 4. display: none; 5. flex-direction: column; 6. justify-content: space-between; 7. width: 30px; 8. height: 21px; |
1. Het hamburger-logo bevindt zich zo dicht mogelijk naar de rand van de box (rechts)
2. De ruimte tussen het hamburger-logo en de navigatie-bar boven is 0.75rem 3. De ruimte tussen het hamburger-logo en de navigatie-bar recgts is 0.75rem 4. Hij wordt niet weergeven door een browser die groter is dan 1125px (kleiner wordt hij wel weergeven) 5. Het hamburger-logo (de lagen) worden onderelkaar weergeven 6. Er zit evenveel ruimte tussen de hamburgerlagen 7. Het hamburger-logo is 30 pixels breed 8. De hoogte van het hamburger-logo is 21 pixels |
|
.bar1
.bar2 .bar3 |
1. height: 5px;
2. width: 100%; 3. background-color: white; 4. border-radius: 1px; |
1. Elke laag in het hamburgerlogo is 5 pixels hoog
2. Het hamburgerlogo heeft een breedte van 100% binnen zijn box 3. Het hamburgerlogo is wit 4. Elke laag van het hamburgerlogo heeft een afronding van 1 pixel (moeilijk te zien) |
| .button |
Dit is handig om te weten hoe ik overige elemnten binnen de class "button" benoem.
In het CSS-bestand staat bijvoorbeeld ".button li a {...}" Op de puntjes staan bijvoorbeeld elementen die alleen gelden voor de "a" in de "li" in de class .button |
De leesmeer-knop op de index-pagina heeft een lettergrootte van 20 pixels |
| .button_2 |
1. display: block;
2. text-align: center; 3. color: black; 4. background-color: rgb(163, 162, 162); 5. text-decoration: none; 6. border: 1px white solid; 7. padding: 1%; 8. margin: 1%; 9. transition: 0.25s ease-out; |
1. De knoppen op de contactpagina nemen de hele box in beslag
2. De text in de knoppen op de contactpagina is gecentreerd 3. De tekstkleur van de knoppen op de contactpagina is zwart 4. De achtergrondkleur van de knoppen op de contactpagina is grijs met rgb-waarde: "rgb(163, 162, 162)" 5. De text van de knoppen op de contactpagina is niet onderstreept (in tegenstelling tot een normale link) 6. De rand van de knoppen op de contactpagina is 1px breed, wit en massief 7. De text in de knoppen op de contactpagina zijn minimaal 1% verwijdert van de rand van de knoppen 8. Er zit 1 pixel ruimte tussen de knoppen op de contactpagina en hun box. 9. Als je je muis van de knoppen op de contactpagina weghaald, gebeurt er een geleidelijke overgang |
| .ul_list_none |
1. list-style: none;
2. font-size: 150%; 3. padding-left: 7.5%; 4. padding-right: 7.5%; |
Op de pagina "contact" onder het kopje "links", staan een paar knoppen die in een lijst staan.
1. Haalt de puntjes van de ongeordende lijst op de contactpagina weg 2. Het lettertype van de knoppen onder het kopje "links" op de contactpagina is 150% groot 3. De knoppen zijn 7.5% verwijdert van de linkerkant van de lijst onder het kopje "links" 4. De knoppen zijn 7.5% verwijdert van de rechterkant van de lijst onder het kopje "links" |
| .backgroundcolor _blue |
1. background-color: rgb(0, 119, 255)
2. transition: all 0.5s ease-out |
1. De achtergrondkleur van het knopje "contact" in de navigatie-bar is blauw
2. Als je je muis weghaald van het knopje "contact" in de navigatie-bar, verandert de achtergrondkleur geleidelijk van groen naar blauw |
| .clock_center |
1. align-items: center;
2. display: flex; 3. flex-direction: column; |
1. De hele klok op de contact-pagina bevindt zich in het midden
2. Dit zorgt ervoor dat de tekst in de klok ook in het midden zit 3. Hetzelfde geld voor dit |
| .clock_container |
1. display: flex;
2. justify-content: center; 3. align-items: center; 4. overflow-x: hidden; 5. font-family: arial, 'montserrat','Orbitron', sans-serif; 6. height: 100%; 7. width: 80%; 8. margin-bottom: 20px; 9 .padding-top: 15px; 10. padding-bottom: 15px; 11. background-color: rgb(0, 255, 208); 12. border: 2px solid black; 13. opacity: 1; |
De klok op de contact-pagine heeft de tekst in het midden staan en heeft een rand die 2 pixels breed, massief en zwart is. |
| .clock_container_schoolexamen |
1. font-family: arial, 'montserrat','Orbitron', sans-serif;
2. height: 100%; 3. width: 80%; 4. text-align: center; 5. margin-left: auto; 6. margin-right: auto; 7. margin-bottom: 20px; 8. padding-top: 15px; 9. padding-bottom: 15px; 10. background-color: rgb(0, 255, 208); 11. border: 2px solid black; 12. opacity: 1; |
De klok op de schoolexamen-pagina heeft een lettertype Arial en de tekst is gecentreerd. De achtergrondkleur heeft bijvoorbeeld ook een waarde van rgb(0, 255, 208). |
| .table_text |
1. font-size: 100%;
2. padding: 2.5%; 3. border-collapse: collapse; 4. width: 100%; 5. margin-left: 0; 6. margin-right: 0; |
Bij deze tabel zijn de randen samengevallen waar mogelijk en heeft de tabel een breedte van 100% binnen de "parent"-element. |
| .table_container |
1. overflow-x: auto;
2. width: 95%; 3. margin-left: 2.5%; 4. margin-right: 2.5%; |
Als deze tabel te groot wordt voor een scherm, is het mogelijk om de tabel te bekijken door verticaal te scrollen. |
| .text_align_left | text-align: left; | De lijst van de eindopdracht op de pagina-gimp bevindt zich aan de linker kant. |
| .text_align_center | text-align: center; | De "Open Fotoalbum"-knop op de opmaak-pagina bevindt zich in het midden. |
| .calc |
1. width: 324px;
2. margin-left: auto; 3. margin-right: auto; 4. margin-bottom: 25px; 5. background-color: #39383D; 6. padding: 20px; 7. border-radius: 8px; |
De rekenmachine heeft een breedte van 324 pixels en heeft een achtergrondkleur van "#39383D". |
| .account_main |
1. display: flex;
2. justify-content: center; 3. align-items: center; 4. margin: 0; 5. flex-direction: column; |
Op de schoolexamen-pagina worrden alle elementen gecentreerd. |
| .schoolexamen_table |
1. font-size: 90%;
2. width: 95%; 3. max-width: 1000px; 4. margin-left: auto; 5. text-align: center; 6. border: 1px solid black; 7. border-collapse: collapse; 8. margin-bottom: 10%; 9. padding-right: 0; 10. margin-right: auto; |
De tabel met cijfers op de schoolexamen-pagina heeft tekst die gecentreerd is en heeft een maximale breedte van 1000 pixels. |
| .opmaak_table |
1. padding: 1% 1%;
2. margin-right: 2.5%; 3. margin-left: 2.5%; 4.background-color: rgba(0, 0, 0, 0.5); 5 .margin-bottom: 25px; 6 .border: 2px solid black; 7 .color: white; 8 .overflow: auto; 9 .width: 95%; |
De tabellen op deze pagina die javascript bevatten hebben een achtergrondkleur rgba(0, 0, 0, 0.5). |
| .lime | color: lime; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur lime. |
| .blue | color: blue; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur blauw. |
| .yellowgreen | color: yellowgreen; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur groengeel. |
| .aqua | color: aqua; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur aqua. |
| .yellow | color: yellow; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur geel. |
| .red | color: red; | Bij de meeste javascript-codes op deze pagina is tekst weergeven in kleur. Deze class geeft tekst de kleur rood. |
| .canvas_container |
1. text-align: center;
2. background-color: rgba(109, 109, 109, 0.5); 3. margin-left: 10%; 4. margin-right: 10%; 5. margin-bottom: 1.5%; 6. padding-top: 25px; 7. overflow: auto; |
Als de dingen met canvas niet meer op de pagina passen, kan je ze toch zien door te scrollen/swipen. De canvassen wordt in het midden weergeven en de containers hebben een achtergrondkleur rgba(109, 109, 109, 0.5) |
| .account_body |
1. background-image: url('../images/account_background.jpg');
2. background-color: transparent; 3. background-repeat: repeat; |
Op de login-pagina heb je geen achtergrondkleur, maar een achtergrond-afbeelding. |
| .account_error |
1. background: #F2DEDE;
2. color: #A94442; 3. padding: 15px; 4. width: 93%; 5. border-radius: 5px; 6. font-size: 15px; 7. margin: 20px auto; |
Als je een fout wachtwoord invoert, krijg je een melding te zien in een container. Die container heeft een achtergrondkleur #F2DEDE, een tekstkleur #A94442 en een tekstgrootte van 15 pixels. |
| .account_succes |
1. background: #1aff006d;
2. color: #000000; 3. padding: 15px; 4. width: 93%; 5. border-radius: 5px; 6. font-size: 20px; 7. margin: 20px auto; |
Als je een account aanmaken gelukt is, krijg je een melding te zien in een container. Die container heeft een achtergrond #1aff006d, een tekstkleur #000000 en een tekstgrootte van 15 pixels. |
| .pop_up_container |
1. background-color: rgba(255, 255, 255, 1);
2. margin-top: 5%; 3. margin-left: auto; 4. margin-right: auto; 5. border: 1px solid #888; 6. width: 80%; 7. top: -300px; 8. animation-name: open; 9. animation-duration: 0.8s; |
Als je de rekenmachine opent, opent die in 0,8 seconden met een animatie. Ook is de achtergrondkleur wit. |
| .red_slider |
1. -webkit-appearance: none;
2. appearance: none; 3. width: 90%; 4. height: 5px; 5. padding: 0; 6. background: #d3d3d3; 7. outline: none; 8. opacity: 0.7; 9. -webkit-transition: .2s; 10. transition: opacity .2s; 11. border: none; 12. margin-bottom: 10px; 13. margin-top: 10px; 14. transition: ease-in-out 0.25s; |
De slider die de red-value op de jQuery-pagina bepaalt heeft een achtergrond #d3d3d3. |
| .tablink |
1. background-color: #555;
2. color: white; 3. float: left; 4. border: none; 5. outline: none; 6. cursor: pointer; 7. padding: 14px 16px; 8. font-size: 17px; 9 .width: 12.5%; 10. margin: 0; |
De knoppen die de tabbladen openen op de gimp-pagina hebben een breedte van 12,5%. |
| .tabcontent |
1. color: black;
2. display: none; 3. padding-top: 100px; 4. padding-left: 0.5%; 5. padding-right: 0.5%; 6. padding-top: 10px; 7. padding-bottom: 10px; 8. height: 100%; 9. background-color: whitesmoke; 10. margin: 0; |
De tabbladen van de gimp-pagina hebben een zwarte tekstkleur en een witte achtergrond. |
| .tumbnail |
1. min-width: 100px;
2. height: 50px; 3. position: relative; 4. left: 0; 5. font-size: 10px; 6. font-weight: bold; 7. margin: 0; 8. color: white; 9. transition: 0.25s; |
De tumbnails hebben een hoogte van 50 pixels en een breedte van 100 pixels. Als je eroverheen hovert en er weer vanaf hovert krijg je een animatie. |
| .gimp_responsive_image |
1. cursor: pointer;
2. width: 200px; 3. height: 125px; 4. overflow: hidden; 5. transition: 0.25s; 6. object-fit: cover; |
De afbeeldingen op de gimp-pagina (die in de tabbladen) hebben een breedte van 200 pixels, als je met je muis over een van de afbeeldingen gaat krijk je een pointer-muis en de afbeeldingen worden zo in de containers gezet, dat de afbeeldingen niet uitgerekt of gekrompen zijn. |
| .gimp_img |
1. max-width: 93%;
2. max-height: 500px; 3. margin-left: 12px; 4. margin-right: 12px; |
De afbeeldingen in het fotoalbum hebben een maximale hoogte van 500 pixels. |
| .mySlides |
1. display: none;
2. opacity: 0; 3. animation-name: open; 4. animation-duration: 1.5s; |
Als het fotoalbum opent en als je van foto's wisselt, krijg je een animatie te zien en die duurt 1,5 seconden. |
| .mybtnn |
1. display: none;
2. position: fixed; 3. bottom: 50px; 4. right: 20px; 5. border: none; 6. outline: none; 7. background-color: rgba(110, 110, 110, 0.75); 8. color: white; 9. cursor: pointer; 10. text-align: center; 11. padding-top: 4px; 12. padding-bottom: 17.5px; 13. padding-left: 10.5px; 14. padding-right: 10.5px; 15. width: 50px; 16. height: 50px; 17. border-radius: 25px; 18. font-size: 30px; 19. transition: ease-in-out 0.25s; |
De knop die je naar de bovenkant van de pagina brengt heeft een achtergrondkleur rgba(110, 110, 110, 0.75), een witte tekstkleur en en tekstgrootte van 30 pixels. De knop is rond door "border-radius : 25px;". |
Nav heeft een class "navbar" gekregen. De navigatie-bar op deze website is responsive (zie kopje "responsiveness")
De navigatie-bar is eigenlijk gewoon een
lijst met linkjes die naast elkaar zijn geplaatst (desktop) of onder elkaar (mobile). Hiervoor zijn de elementen "ul", "li" en "a" gebruikt.
De ".navbar_links ul;" heeft een margin en padding van 0 pixels en heeft "display: flex;", de linkjes worden naast elkaar geplaatst.
De ".navbar_links li;" heeft een "list-style: none;", de bulletpoints worden niet weergeven. Ook heeft hij een "transition: 0.5s ease-out;", zodat
je een mooie overgang hebt als je je muis van de linkjes van de navigatie-bar haalt.
Ook bestaat er een ".navbar_links li a:hover", zodat je een mooie overgang krijgt als je je muis over de linkjes van de navigatie-bar
schuift. De achtergrond wordt dan lichter en die heeft natuurlijk ook een "transition: all 0.5s ease;".
Dan heb je nog de ".navbar_links li a;". Hier staat "text-decoration: none;", zodat de de links niet onderstreept worden. Verder heb
je "color: white;" voor een witte tekstkleur, "font-size: 16px;" voor de tekstgrootte en een "padding: 1rem;", zodat de linkjes niet tegen elkaar
aan botsen. Tot slot heb je een "display: block;", zodat de linkjes groter worden.
De navigatie-bar ziet er natuurlijk anders uit op je mobiel.
Hiervoor wordt gebruikt gemaakt van "@media (max-width: 1125px)". Verdere uitleg erover in het kopje "responsiveness".
Normaal staat er bij ".toggle_button" "display: none;". In die @media staat dan wat anders. Daar staat "display: flex", zodat het hamburger-logo tevoorschijn komt.
In die @media staat dan ook in ".navbar_links" "display: none;" en in ".navbar" "flex-direction: column", de linkjes worden dan van boven naar beneden weergeven.
Omdat er bij ".navbar_links" "display: none;" staat, wordt er normaal niks weergeven.
Daarom heb ik nog een class aangemaakt genaamd: ".navbar_links.active" met daarin "display: flex;".
Nu alleen nog javascript gebruiken. Daarin staat eigenlijk: "als je klikt op toggle_button (hamburger-logo), dan wordt .navbar_links active". Dus dan worden de links weergeven.
Druk je nog een keer op de hamburger-logo, dan wordt de ".navbar_links" niet meer active.
Op deze website heb ik drie verschillende lagen gebruikt. Lagen
zijn html-tags die onderscheid maken tussen de verschillend delen
van deze website.
Bovenin de website staat een Navigatie-bar. Deze staat in de "header-tag".
Het middenstuk van deze website staat in de "main-tag".
Tenslotte staat onderin de pagina een zogeheten "footer-tag".
Daarin staat mijn logo.
De website is dus verdeeld in de "header" (daarbinnen de "nav"), de "main" en de "footer".
Daarnaast heb ik nog elementen voor mijn body gebruikt, zodat de "standaard instellingen" weg worden gehaald en ik andere elementen kan toevoegen die gelden voor de hele website.
Tot slot heb ik de main ook ingedeeld in sections en articles (staat niet in de tabel), dit maakt de HTML5-structuur overzichtelijker.
| Layer | Element | Voorbeeld |
|---|---|---|
| Body |
1. font-family: 'Roboto', sans-serif;
2. box-sizing: border-box; 3. margin: 0px; 4. padding: 0px; 5. background-color: rgb(201, 201, 201); |
1. De lettertype is Roboto, als Roboto niet werkt wordt sans-serif gebruikt
2. Dit zorgt ervoor dat de padding en de border effect hebben op de width en de height van de body 3. Dit zorgt ervoor dat de standaard-margin weg wordt gehaald, zo zie je dat de footer van de linker- tot de rechterrand loopt 4. Dit zorgt ervoor dat de standaard-padding weg wordt gehaald, zo zie je dat de footer van de linker- tot de rechterrand loopt 5. De achtergrondkleur van alle pagina's, behalve de index-pagina, is grijs: "rgb(201, 201, 201)" |
| Header | Hierin staan geen elementen. Omdat de nav in de header staat, zitten daar eigenlijk alle elementen in. | - |
| Main |
1. max-width: 1500px;
2. margin: auto; |
1. Als de webpagina groter wordt dan 1500 pixels, word alles (met een paar uitzonderingen, waaronder de footer) 1500 pixels breed (dit is prettiger lezen, zeker voor mensen met een breed beeldscherm)
2. Bijna alles op de webpagina is gecentreerd. Als je bijvoorbeeld de contact-pagina breder dan 1500 pixels maakt, blijven de knoppen gecentreerd |
| Footer |
1. display: flex;
2. justify-content: space-between; 3. align-items: center; 4. background-color: rgb(73, 73, 73); 5. color: white; 6. padding-left: 2.5%; 7. padding-right: 2.5%; |
1. Het logo en de copyright bevinden zich naast elkaar (niet onder elkaar)
2. Er zit ruimte tussen het logo en de copyright 3. Het logo en de copyright worden gecentreerd (y-waarde) 4. De achtergrondkleur van de footer is grijs: "rgb(73, 73, 73)" 5. De tekstkleur van de footer is wit 6. Het logo in de footer is 2.5% verwijdert van de linkerrand 7. Het logo in de footer is 2.5% verwijdert van de rechterrand |
Elke html-tag heeft een box. Dit is soort van de constructie van een html-tag. Je hebt bijvoorbeeld de "properties": "margin" en "padding". Hier laat ik zien welke ik het meest heb gebruikt.
| Property | Functie | Voorbeeld |
|---|---|---|
| Margin: ; | Het getal dat wordt toegevoegd heb ik meestal in procenten of pixels gedaan. Het geeft aan hoeveel pixels/procenten de inhoud van de html-tag van andere boxes moet staan. De eerste waarde geeft de de margin aan van de top en de onderkant, de tweede waarde van de rechterkant en de linkerkant. Verder kan je "margin" ook verdelen in "margin-left" etc. | De bovenstaande afbeelding is 2.5% verwijdert van deze tabel. |
| Padding: ; | Het getal dat wordt toegevoegd heb ik meestal in procenten of pixels gedaan. Het geeft aan hoeveel pixels/procenten de inhoud binnen de html-tag van de border moet staan. De eerste waarde geeft de de padding aan van de top en de onderkant, de tweede waarde van de rechterkant en de linkerkant. Verder kan je "padding" ook verdelen in "padding-left" etc. | Deze tekst ligt niet direct tegen de rand van de tabel aan. |
| Width: ; | Het geeft aan hoe breed de html-tag moet zijn (ik heb het gedaan in procenten/pixels). | De breedte van deze tabel is 100%. |
| Height: ; | Het geeft aan hoe hoog de html-tag moet zijn (ik heb het gedaan in procenten/pixels). | De icoontjes op de contactpagina hebben een hoogte van 70px. |
| Border: ; | Dit geeft de rand van de border aan. Je kan aangeven de border verborgen te laten. Of je kan de border weergeven. Dan geef je aan hoe dik de border moet worden (bij mij in pixels), hoe die wordt weergeven (bij mij meestal solid) en welke kleur die krijgt. | Deze tabel heeft een rand van 2px, zwart en massief (solid). |
| Border-radius: ; | Ook kan je aangeven of de border van de box moet worden afgerond. Je geeft dan aan wat de straal moet zijn van de hoek (meestal in pixels). | De "houders" van de sliders op de jquery-pagina zijn afgerond met een straal van 50px. |
Deze website is responsive.
Dit betekent dat de website zich aanpast voor verschillende schermgroottes.
Op desktop zie je bijvoorbeeld de navigatie-bar met navigatie-linkjes naast elkaar,
terwijl je op je mobiel een hamburgermenu ziet.
Dit is gedaan met CSS.
In CSS heb ik "@media (max-width: 1125) { elementen }" gebruikt. Op de plaats "elementen" staan dan de elementen
die ik wil aanpassen als het scherm kleiner is dan 1125 pixels. Zo laat ik bijvoorbeeld mijn hamburgerlogo verschijnen
en wordt de knop "leesmeer" op de index-pagina groter.
Daarnaast heb ik ook meerderen @media gebruikt, met bijvoorbeeld verschillende "max-width" of zelf iets helemaal anders, zoals "hover:none".
Sommige dingen op deze website maken gebruik van jQuery, zoals het wijzigen van de achtergrondkleur op de schoolexamen-pagina. JQuery is een versimpelde versie van JavaScript. Om deze taal te gebruiken moet ik een tag opnemen in de head van elke pagina die gebruik maakt van jQuery.
Op de JQuery-pagina kan je de achtergrondkleur van de pagina wijzigen d.m.v. knoppen en "sliders".
Een knop in html wordt gemaakt met de "button"-tag. Elke button heeft een eigen ID.
Er moet natuurlijk wel iets gebeuren als ik op die knop druk. Hiervoor wordt gebruik gemaakt
van jQuery. Wat er gebeurt als ik op die knoppen druk staat dus in een JavaScript bestand.
Het is belangrijk om dat bestand te koppelen aan je pagina, anders gebeurt er natuurlijk niets.
Dat doe je door een tag met een verwijzing naar het bestand in de head te zetten NA de tag die
verwijst naar jQuery.
In elk JQuery-bestand staat eerst dit: "$(document).ready(function(){}". Hier staat eigelijk: als de website geladen is wordt
het jQuery-document uitgevoerd.
Voor elk knopje die de achtergrondkleur wijzigt staat dit:
Code1 | $('#jquery_color_blue').click(function() {2 | $('body').css('background-color', 'rgb(0, 0, 255)'); 3 | $('.jquery_p').css('color', 'rgb(255, 255, 255)'); 4 | $('.jquery_center').css('color', 'rgb(255, 255, 255)'); 5 | $('h1').css('color', 'rgb(255, 255, 255)'); 6 | $('h2').css('color', 'rgb(255, 255, 255)'); 7 | $('label').css('color', 'rgb(255, 255, 255)'); 8 | }); |
UitlegWeet je nog dat elke knop een ID heeft? Neem het knopje die de achtergrondkleur blauw maakt.Die heeft een ID genaamd: "jquery_color_blue". In jQuery staat dan eigenlijk gewoon: Als er op de knop met het ID "jquery_color_blue" wordt gedrukt, verander dan in CSS de achtergrondkleur van de html-tag "body" naar blauw (0, 0, 255). Vervolgens staat er dat de classes "jquery_p", "jquery_center" en de tags "h1", "h2", "label", een witte tekstkleur moeten krijgen. Zo is er meer contrast te zien, want een zwarte tekstkleur op een blauwe achtergrondkleur leest niet zo makkelijk. Dit geldt dus voor elk knopje die de achtergrondkleur verandert. Het verschilt natuurlijk wel per achtergrondkleur of de tekstkleur wit of zwart moet worden. |
Het is op de JQuery-pagina ook mogelijk om de achtergrondkleur in te stellen met RGB-waardes door 3 sliders.
Ook die sliders hebben een ID.
In jQuery staat dan bijvoorbeeld:
Code1 | $('#value_red').change(function() {2 | var inhoud = 'rgb(' + $('#value_red').val() + ',' + $('#value_green').val() + ',' + $('#value_blue').val() + ')'; 3 | $('body').css('background', inhoud); 4 | }); |
UitlegHier staat dus: Als de slider met ID "value_red" van waarde verandert, dan wordt de achtergrond-kleur van de body de waarde van de sliders van "value_red", "value_green" en "value_blue".Natuurlijk heeft elke individuele slider zo'n jQuery-code. |
Als de gebruiker de achtergrondkleur instelt, is het natuurlijk ook handig dat de juiste tekstkleur gekozen kan worden.
Dit kan worden gedaan met de knoppen "witte tekst" en "zwarte tekst".
In jQuery staat dan bijvoorbeeld:
Code1 | $('#tekst_white').click(function() {2 | $('.jquery_p').css('color', 'rgb(255, 255, 255)'); 3 | $('.jquery_center').css('color', 'rgb(255, 255, 255)'); 4 | $('h1').css('color', 'rgb(255, 255, 255)'); 5 | $('h2').css('color', 'rgb(255, 255, 255)'); 6 | $('label').css('color', 'rgb(255, 255, 255)'); 7 | }); |
UitlegHier staat: "Als er gedrukt wordt op de knop met ID "tekst_white", dan verandert de tekstkleur van de classes "jquery_p", "jquery_center" en de tags "h1", "h2", "label" in een witte (255, 255, 255) tekstkleur.Uiteraard heeft de knop met ID "tekst_black" dezelfde code, maar dan met een andere RGB-waarde (0, 0, 0). |
Op de JQuery-pagina kan je ook de tekstgrootte wijzigen met knoppen of door zelf een tekstgrootte in pixels in te voeren.
Net zoals bij het wijzigen van de achtergrondkleur hebben de knoppen die de tekst groter/kleiner maken
een ID.
In jQuery staat dan bijvoorbeeld:
Code1 | $('#groter').click(function(){2 | $('.jquery_p').css('font-size', '+=1px'); 3 | $('.jquery_center').css('font-size', '+=1px'); 4 | $('h1').css('font-size', '+=1px'); 5 | $('h2').css('font-size', '+=1px'); 6 | $('#clock').css('font-size', '+=1px'); 7 | }); |
OpmaakHier staat: "Als er op de knop met ID "groter" wordt gedrukt, wordt de lettergrootte van de classes "jquery_p", "jquery_center", van de tags "h1", "h2" en van de ID "clock" vergroot met 1 pixel." |
Voor de knop met ID "kleiner" wordt de lettergrootte natuurlijk verkleind met 1 pixel. De knop die de tekstgrootte weer normaal maakt (ID "normaal") heeft de volgende jQuery:
Opmaak1 | $('#normaal').click(function(){2 | $('.jquery_p').css('font-size', '110%'); 3 | $('.jquery_center').css('font-size', '110%'); 4 | $('h1').css('font-size', '200%'); 5 | $('h2').css('font-size', '170%'); 6 | $('#clock').css('font-size', '115%'); 7 | }); |
UitlegHier staat: "Als er op de knop met ID "normaal" wordt gedrukt, verander dan de tekstgrootte van de class "jquery_p" naar 110%, de class "jquery_center" naar 110%, van de tag "h1" naar 200%, de tag "h2" naar 170%, en van de ID "clock" naar 115%." |
Inputs worden gemaakt met de "input"-tag. Zo kan je bijvoorbeeld op de jQuery-pagina
de tekstgrootte veranderen door een getal in te voeren in één van de inputs.
Elke input heeft een ID. In jQuery staat dan bijvoorbeeld:
Code1 | $('#letter_h1').change(function(){2 | var inhoud = $('#letter_h1').val() +'px'; 3 | $('h1').css('font-size', inhoud); 4 | }); |
UitlegHier staat: "Als de input met ID "letter_h1" verandert, wordt de tekstgrootte van h1 de "value" (waarde) van die input + px." Het woordje "inhoud" is hier een variabele. De variabele inhoud staat voor: "de waarde van de input met ID "letter_h1" + px".Uiteraard heeft elke input die de tekstgrootte verandert een code in jQuery die hierop lijkt. |
Als je op links drukt die verwijzen naar een website buiten dit domein of links die een bestand downloaden, krijg je een melding. Deze melding wordt gemaakt met jQuery.
In dit geval heeft elke link die een melding krijgt geen ID, maar een class. Het principe is hetzelfde.
In jQuery staat dit:
Code1 | $('.webpagina_alert').on('click', function(){2 | alert('Let op! U staat op het punt de website "Cartesiuslyceum.info" te verlaten!'); 3 | }); |
UitlegElke link die verwijst naar een webpagina buiten dit domein zit dus binnen een div met de class "webpagina_alert" of heeft de class zelf. In jQuery staat dus eigenlijk: "Als er op een link met de class/binnen een div met de class "webpagina_alert" wordt gedrukt, dan komt er een pop-up met de tekst "Let op! U staat..."."Links die verwijzen naar een bestand hebben dan een andere class, deze hebben natuurlijk een andere melding nodig. |
Op de JQuery-pagina bevindt zich een klok. Dit is gedaan met jQuery.
In jQuery staat dit:
CodeZonder kleurtjes :-)function myClock() { var clock = document.getElementById("clock"); var currentDate = new Date(); var month = new Array(); month[0] = "Januari"; month[1] = "Februari"; month[2] = "Maart"; month[3] = "April"; month[4] = "Mei"; month[5] = "Juni"; month[6] = "Juli"; month[7] = "Augustus"; month[8] = "September"; month[9] = "Oktober"; month[10] = "November"; month[11] = "December"; var yo = currentDate.getFullYear(); //Jaar var mo = month[currentDate.getMonth()]; //Maand var d = currentDate.getDate(); //Dag var h = currentDate.getHours(); //Uren var m = currentDate.getMinutes(); //Minuten var s = currentDate.getSeconds(); //Secondes m = m < 10 ? `0${m}` : m; s = s < 10 ? `0${s}` : s; clock.innerText = `${d} ${mo} ${yo} | ${h} : ${m} : ${s}`; setTimeout(myClock, 1000); //Herlaad elke seconde } //Functie oproepen myClock(); |
Uitleg - Omdat deze jQuery vrij lang is, heb ik aantekeningen gemaakt bij de jQuery.function myClock() {var clock = document.getElementById("clock"); (Ik heb een variabele "clock" aangemaakt. Deze variabele haalt de html-tag met de ID "clock" op. De variabele "clock" is in dit JQuery-bestand dus gewoon de plek waar de klok zich bevindt.) var currentDate = new Date(); var month = new Array(); (In JQuery zijn de maanden genummerd van 0-11. 1 Januari 2021 zou dan 1-0-2021 zijn. Dit is natuurlijk raar en daarom heb ik elke maand een naam gegeven) month[0] = "Januari"; month[1] = "Februari"; month[2] = "Maart"; month[3] = "April"; month[4] = "Mei"; month[5] = "Juni"; month[6] = "Juli"; month[7] = "Augustus"; month[8] = "September"; month[9] = "Oktober"; month[10] = "November"; month[11] = "December"; var yo = currentDate.getFullYear(); //Jaar (Ik heb een variabele "yo" aangemaakt. Dit staat voor het jaartal. Het jaartal wordt hier opgehaald.) var mo = monthcurrentDate.getMonth(); //Maand (Ik heb een variabele "mo" aangemaakt. Dit staat voor de maand. De maand wordt hier opgehaald.) var d = currentDate.getDate(); //Dag (Ik heb een variabele "d" aangemaakt. Dit staat voor de dag (bijvoorbeeld "1" Januari of "20" Januari). De dag wordt hier opgehaald.) var h = currentDate.getHours(); //Uren (Ik heb een variabele "h" aangemaakt. Dit staat voor het uur. Het uur wordt hier opgehaald.) var m = currentDate.getMinutes(); //Minuten (Ik heb een variabele "m" aangemaakt. Dit staat voor de minuut. De minuut wordt hier opgehaald.) var s = currentDate.getSeconds(); //Secondes (Ik heb een variabele "s" aangemaakt. Dit staat voor de seconde. De seconde wordt hier opgehaald.) m = m < 10 ? `0${m}` : m; (Hier staat: "Als de minuut kleiner is dan 10, dan wordt er een 0 voor geplaats.") s = s < 10 ? `0${s}` : s; (Hier staat: "Als de seconde kleiner is dan 10, dan wordt er een 0 voor geplaats.") clock.innerText = `${d} ${mo} ${yo} | ${h} : ${m} : ${s}`; (Hier staat: "De tekst van de variabele clock (zie boven) wordt de tekst van de variabele "d", "mo", etc." Uiteindelijk krijg je dan een klok.) setTimeout(myClock, 1000); //Herlaad elke seconde (Hier staat: "Herlaad de klok elke seconde. Een klok moet natuurlijk kunnen bewegen.") } //Functie oproepen myClock(); (Hier wordt de klok opgeroepen zodat hij werkt.") |
Op de JQuery-pagina bevinden zich knoppen die informatie geven over de pagina.
Code1 | $('#p_knop').click(function(){2 | alert($('p').length + ' paragrafen staan op deze pagina!'); 3 | }); |
UitlegHier staat eigenlijk: "Als er op de knop met ID "p_knop" wordt gedrukt, dan verschijnt er een pop-up met "het aantal p-tags" + "paragrafen op deze pagina!". Zo krijg je een pop-up met een goed lopende zin."Elke knop die andere info weergeeft, heeft natuurlijk een ander ID met een soortgelijke jQuery-code. Alleen de "p" in het rood verandert in de tag waarover de pop-up informatie gaat geven. |
Niet alleen op de JQuery-pagina wordt jQuery gebruikt, ook op andere webpagina's.
Bij het drukken op de uitlog-knop op de schoolexamen-pagina, verschijn er ook een pop-up met een melding.
Ook op de schoolexamen-pagina is het mogelijk om de achtergrondkleur te wijzigen met knopppen. Hier kan je óók nog een achtergrond-afbeelding kiezen én kan je hier i.p.v. een slider, de RGB-waardes invoeren.
Op deze pagina "opmaak" en op de contact-pagina komen ook meldingen voor bij het drukken op linkjes.
Ook de klok bevindt zich op de contact-pagina én op de schoolexamen-pagina.
Op de rekenmachine-pagina bevindt zich een rekenmachine die door jQuery werkt.
Canvas is een tekengebied op een html-pagina, waar met behulp van jQuery iets kan worden "getekend" op dat canvas-gebied. Met Canvas kan je vormen, lijnen, tekst en afbeeldingen laden/tekenen.
Op mijn Canvas-pagina is tekst te zien. Een stuk tekst met mijn naam en een tekst met een uniek lettertype.
Om een tekengebied op een html-pagina te krijgen wordt gebruik gemaakt van
een canvas-tag. In die tag staan twee attributen: een attribuut voor de height en een attribuut voor de width.
De canvas met mijn naam heeft width="100" en height="100".
Onder de canvas-tag komt een script-tag. Hierin staat wat er in de canvas-tag moet worden uitgevoerd.
Dit staat in het script voor mijn naam:
Code1 | var canvas_shinji_naam = document.getElementById('tekst_canvas_1');2 | var context_shinji_naam = canvas_shinji_naam.getContext('2d'); 3 | var x = canvas_shinji_naam.width / 2; 4 | var y = canvas_shinji_naam.height / 2; 5 | 6 | context_shinji_naam.font = '40px Roboto'; 7 | context_shinji_naam.textAlign = 'center'; 8 | context_shinji_naam.fillStyle = 'blue'; 9 | context_shinji_naam.fillText('Shinji', x, y); |
UitlegIk heb hier een variabele "canvas_naam_shinji" aangemaakt. Hier wordt de canvas-tag met het ID "tekst_canvas_1" opgehaald. Zo weet het script waarop die moet worden uitgevoerd.Ook heb ik een variabele "context_canvas_shinji" aangemaakt, deze variabele geeft aan wat er getekend moet worden. Tot slot heb ik een variabele "x" en "y". Dit geven de waarden aan van de coördinaten waar het script moet beginnen met tekenen. In dit geval zo, dat de tekst in het midden komt. .font geeft de tekstgrootte (40px) en lettertype (Roboto) aan. .textAlign geeft aan waar de tekst moet staan (in het midden/center). .fillStyle geeft aan hoe de tekst gevuld moet worden (in dit geval met een blauwe kleur). .fillText geeft aan welke tekst (Shinji) er moet worden gezet in de Canvas en waar (variabele x/y). |
Code4 | ......var y = canvas.height / 2;5 | 6 | context.font = '50px Arial'; 7 | context.textAlign = 'center'; 8 | context.lineWidth = 2; 9 | context.strokeStyle = 'red'; 10 | context.strokeText('Canvas!', x, y); |
UitlegDeze code lijkt heel erg op die van de code van mijn naam, maar is anders bij de onderste paragraaf van de code.Allereerst wordt hier een andere variabele gebruikt, het principe is hetzelfde. .font en .textAlign zijn hetzelfde. De "Canvas!" tekst heeft natuurlijk lijnen. Die lijndikte wordt aangegeven met .lineWidth (2). De lijnkleur wordt aangegeven met .strokeStyle (rood). Tot slot heeft .strokText dezelfde functie. |
Op mijn canvas-pagina is een tekening te zien. Deze tekening is gemaakt met verschillende vormen. Omdat ik heel veel vormen heb gebruikt leg ik niet alles uit.
Voorbeeld codeRechthoek (schoorsteen huis)1 | var canvas_huis = document.getElementById('tekening_canvas_1'); 2 | var context_huis = canvas_huis.getContext('2d'); 3 | context_huis.beginPath(); 4 | context_huis.rect(185, 50, 15, 45); 5 | context_huis.fillStyle = 'brown'; 6 | context_huis.fill(); 7 | context_huis.lineWidth = 1; 8 | context_huis.strokeStyle = 'black'; 9 | context_huis.stroke(); Lijnen (dak huis) context_huis.beginPath(); context_huis.moveTo(107, 101); context_huis.lineTo(158, 55); context_huis.lineTo(209, 101); context_huis.fillStyle = 'brown'; context_huis.fill(); context_huis.stroke(); |
UitlegHier heb ik weer nieuwe variabelen aangemaakt voor de context en de canvas.Mijn tekening bestaat uit vormen. Bij het tekenen van vormen staat altijd .beginPath();. Rechthoek en Cirkel .rect(185, 50, 15, 45) geeft aan dat er een rechthoek moet worden getekend. .Arc geeft aan dat er een cirkel getekend moet worden. De eerste twee getallen geven de x-/y-coördinaten. De laatste twee getallen geven de hoogte en breedte weer. .fillStyle geeft weer de kleur aan, in dit geval bruin. .fill geeft aan dat de vorm echt gevuld moet worden. Als er nog een lijn om de vorm moet worden getekend, kan dat ook. .lineWidth geeft de breedte van de lijn aan. .strokeStyle geeft de lijnkleur aan. Tot slot wordt bij .stroke de lijn echt getekend. Lijnen (Driehoek) Met lijnen heb ik een driehoek getekend. De code begint ook weer met .beginPath. Vervolgens staat er .moveTo(107, 101). Dit zijn de coördinaten van het beginpunt van de lijn. Vervolgens staat er .lineTo. Dit geeft aan dat de lijn doorgetrokken moet worden naar een bepaald punt (in dit geval van 107, 101 naar 158, 55 naar 209, 101). Uiteindelijk wordt er vanaf de laatse .lineTo een lijn getrokken naar het beginpunt (kortste route). .fillStyle geeft de kleur van de inhoud aan. .fill geeft aan dat de vorm moet worden gevuld. .stroke geeft aan dat de lijn(en) moeten worden getekend. Zo krijg je een driehoek. |
Code1 | var canvas_instagram_logo = document.getElementById('afbeelding_canvas_1');2 | var context_instagram_logo = canvas_instagram_logo.getContext('2d'); 3 | var afbeelding = new Image(); 4 | 5 | afbeelding.onload = function() { 6 | context_instagram_logo.drawImage(afbeelding, 0, 0); 7 | }; 8 | afbeelding.src = '../images/instagram_small.png'; |
UitlegIk heb drie variabelen aangemaakt. Weer twee die de canvas en context "vertegenwoordigen". Ook heb ik nu een variabele "afbeelding" voor een nieuwe afbeelding..drawimage geeft aan dat de afbeelding op de coördinaten 0, 0 moet worden geplaatst. .src geeft de bestandslocatie aan, in dit geval in de map "images" met de naam "instagram_small.png". |