Opdrachten

Op deze pagina ga ik jou helpen om een basis website te maken en dat je na deze opdrachten basiskennis heb van HTML en CSS. Wat ga je nodig hebben voor deze opdracht:

Een account bij Replit
Een foto van jezelf*
Een stukje tekst over jezelf*
*Als je niet een stukje over jezelf wilt gebruiken mag het ook over een onderwerp wat jij interessant vind

Opdracht 1:

Stap 1: Ga naar replit en log in met het account wat je heb aangemaakt en klik op ”Create repl” en kies de HTML, CSS, JS template.

Stap 2: We hebben nu drie bestanden een index.html, script.js en een style.css. Open de index en verwijder alles wat er in de <body> tag staat en verwijder het script.js bestand dat hebben we niet nodig voor deze opdracht

Stap 3: Open nu de index.html en style.css in replit

Stap 4: We gaan nou een beetje code schrijven in de index.html. Waar een html pagina uit bestaat is een <DOCTYPE html> boven aan de pagina dat is zodat de browser weet welke versie van HTML wij gebruiken. En daarna komt een <html> </html> in deze tags maken we eigenlijk onze hele pagina in de en waarom er 1 een / er in heeft is is omdat dat het een sluitings tag is dus elke html tag die we gebruiken AKA alles wat in deze <> symbolen staan sluit je af met een / dus als we een paragraaf hebben, openen we hem zo <p> en sluiten we de paragraaf zo </p> zo weet de browser wat hij moeten laten zien op de website, en weet hij welke blokken we allemaal hebben. Nu doen we in de <html> tag een <head></head> en <body></body>. De <head> tag is eigenlijk waar je alle linkjes inzet naar externe content, zoals een CSS bestand of een link naar google voor bepaalde lettertypes die je op je website wil laten zien. Wat je ook er in kan zetten zijn <meta> tags, maar dat is ver buiten deze opdracht als je wat meer over wil lezen kan je kijken op W3Schools. En de <head> is ook onzichtbaar voor de gebruiker. Daar in tegenstelling is de <body> wel zichtbaar voor de gebruiker, want daar zetten we alle content in die we aan de gebruiker willen laten zien(de text zal wat groter zijn bij mij want ik heb een beetje ingezoomed voor de leesbaarheid)

Stap 5:We gaan nu wat tekst op de website zetten dat kunnen we doen door middel van een <h1> tag, dus zet een <h1></h1> tag in je body en zet tussen de opening en sluitingstags de tekst die wilt laten zien, bijvoorbeeld de naam van je onderwerp. Als je dat gedaan hebt sla je het bestand op en CTRL + S en kijk je in de browser naar de pagina die je geopend had in stap 2, maar dat is gek er staat helemaal niks dat klopt je moet je pagina verversen met F5 zodat je aanpassingen in de browser komen en als goed is zie je nu de tekst die je hebt geschreven in je replit. Hetzelfde gaan we nu ook doen met het plaatje en het stukje tekst wat je heb voor bereid en plaatje op website is iets anders dan tekst op je website neerzetten. Voor een plaatje gebruiken we een <img /> tag maar zoals je ziet heeft deze geen sluitingstag dat komt omdat deze tag zelf sluitend is dus om een plaatje te laten zien typen we in de <img /> tag src=”foto.jpg” en in “ ” deze quotes moet je natuurlijk de naam van jou foto in zetten dus als je foto mij.png heet moet je <img /> er zo uit zien <img src=”foto.jpg” /> als hij in een folder staat is het weer wat anders maar dat is iets te ver in de stof voor deze opdracht. Voor belangrijke kopjes daar voor gebruik je <h1> t/m <h6> en voor normale teksten gebruiken wij <p></p> tags dat zijn in feite paragrafen waar je tekst in kunt zetten dus plak tussen de open en sluit tag je tekst en ververs je pagina. Als goed is zie je nu een kopje met je onderwerp, een plaatje (die veelste groot is waarschijnlijk) en een stuk tekst daar onder.

Stap 6: We gaan nou een klein beetje CSS doen, maar om te beginnen moeten we eerst het CSS document linken aan de index.html en dat doen we door in de <head> van de index dit neer te zetten <link rel="stylesheet" href="style.css"> nou weet de browser dat hij dat document ook moet gebruiken. We gaan nu de achtergrond een andere kleur geven. Dat kunnen we doen door in het CSS bestand body { background: #F00; } te typen en als je nu het bestand opsla en kijk in de browser dan zie je dat de achtergrond rood is geworden. Maar zwarte tekst op een rode achterond is niet makkelijk te lezen dus voeg bij body tussen de haakjes ook color: #fff; toe en sla het bestand op nou zie je dat de tekst wit is geworden als je de pagina ververs.

Stap 7:We gaan nu iets verder in de stof van CSS. Met behulp van classes en id’s kan je wat gerichter stylen dan dat we nu hebben gedaan. Het verschil tussen classes en id’s zijn dat je classes meerdere keren kan gebruiken en id’s kan je maar 1 keer per pagina gebruiken. We gaan nu een class aanmaken in het CSS bestand en dat doe je met een . gevolgd met hoe je de class wil noemen dus .textAboutMe {} en natuurlijk de haakjes er achter want anders krijg je een error in je document we gaan nu bijvoorbeeld de tekst geel maken met behulp van een class dus in het CSS document zetten we onder de body CSS een class .textAboutMe { color: #FF0; } maar als je nu gaat kijken op de website zie je dat de tekst niet geel is geworden, dat komt omdat we nog niet in een class hebben gespecificeerd in de index.html dus als we de tekst geel willen hebben moeten we in de openingstag van de <p> dit toevoegen class=”textAboutMe” dus dan komt het er zo uit te zien <p class=”textAboutMe”> hetzelfde is met id’s maar inplaats van class staat er id=””. En om een id te specificeren in het CSS document dat doe je met een # inplaats van een . dus #textAboutMe {}