Les 2

De eerste aanpassingen in onze template

Deze les gaan we de eerste stappen maken om de template aan te passen. In de Template staan een aatal stukken tekst die we gaan vervangen. Zo maken we template persoonlijk en wordt het jouw webpagina! Open eerst het bestand weer met kladblok: rechtermuisknop > openen met > kladblok
In het kop gedeelte van de pagina (Tussen de <head> en </head> tags) vervangen we het volgende.

De naam van de pagina: <title>paginanaam</title> -> Voor de naam van jouw onderwerp. Bijvoorbeeld: <title>Hagedissen</title>.
In het lichaam gedeelte van de pagina (Tussen de <body> en </body> tags) vervangen we het volgende.

De titel van de pagina: <h1>Pagina title</h1> -> Voor de naam van jouw onderwerp. Bijvoorbeeld: <h1>Hagedissen</h1>.

De omschrijving pagina: <p>Korte omschrijving</p> -> Een korte omschrijving. Bijvoorbeeld: <p>Hoe deze beestjes leven</p>.

Helemaal onderaan staat nog "JE NAAM". Deze vervangen we voor je naam. Denk aan de hoofdletters! Waarvoor staat &copy? Tip: Haal hem eens weg. Wat mis je nu?

We gaan ook het menu meteen aanpassen. Dit is alleen wat lastiger. We gaan kijken naar het stuk code tussen <ul class="navbar-nav"> en </ul>
Hierin staan <a> tags. Dit zijn linkjes. In deze tag staan een aantal vaste onderdelen:
  • href='een adres' (het adres waar het linkje naar toe gaat. Vaak een ander html bestand)
  • title='een omschrijving' (een tekst die je ziet als je met de muis op het linkje staat)
De <a> wordt ook netjes afgesloten met </a> tussen de > en < staat het tekst gedeelte waarom geklikt kan worden.

Een voorbeeld: <a href='les1.html' title='les 1'>Les 1</a> = Les 1

Voor en na de link code staan ook <li> en </li>. Deze zijn nodig voor de opmaak van het menu.
Pas de 3 <a class="nav-link" href="#">Link</a> codes aan naar de verschillende tekststukjes van jouw onderwerp.
Hierbij moet je dus een adres hebben (hiervoor houden wij aan: #jouwnaam), een kleine omschrijving voor de muis en een stukje tekst waar je op kan klikken.

Een voorbeeld (voor stukje tekst over voedsel):
<a class="nav-link" href="#">Link</a>
Wordt
<a class="nav-link" href="#voedsel" title="Voedsel van de Hagedis">Voedsel</a>
Top! Jouw pagina zou er al een stuk beter uitzien! Tijd om jouw pagina te vullen met tekst.
De pagina is opgebouwd uit blokken. Deze blokken noemen we een "grid". Je kan dit vergelijken met een tabel. Deze tabel heeft 12 blokken naast elkaar en zoveel als je nodig hebt onder elkaar.
Natuurlijk heb je niet 12 blokjes tekst die je naast elkaar zet. Daarom kunnen we blokken samenvoegen. Zo kan je dus op 1 "rij" 2 blokken hebben. Een van 3 blokken breedt en een van 9 blokken. Zolang het totaal maar uit komt op 12 (3+9 = 12).
Dit "grid" maakt onze site "responsive", een engels woord voor aanpasbaar. Als we de pagina op een computer bekijken blijven de blokjes naast elkaar. Op een telefoon komen ze onder elkaar.
Als we 2 blokken naast elkaar hebben, kunnen we bijvoorbeeld tekst in het ene blok zetten en een afbeelding in een ander blok.
Bij jou onderwerp heb je stukjes tekst en afbeeldingen. Teken op een A4 hoe je deze gaat indelen op de pagina. Teken hierop dus blokken en zet hierin wat je in dit blok gaat neer zetten (welke afbeelding of welke tekst).
We gaan de blokken indeling die jij hebt bedacht op je pagina coderen. In het midden van de code vind je een tag div die id="inhoudblok" bevat. Deze geeft een rij aan (class='row'). Tussen deze tags staan de blokken (<div class="col-sm-6">een</div> <div class="col-sm-6">twee</div>). De breedte van deze blokken wordt aangeven met het nummer in de class, class='col-sm-6' = 6. Dit betekend dat beide blokken 6 blokjes groot zijn. Iedere rij moet 12 blokjes totaal hebben (6 + 6 = ? Juist 12!).
Elk van onze teksten (elk stukje onderwerp) gaan we op een aparte rij neer zetten. Elk van deze rijen heeft 2 blokken, 1 voor een afbeelding en 1 voor de tekst.

Bijvoorbeeld:
<div class="row" id="inhoudblok">
<div class="col-sm-3">plaatje van etende Hagedis</div>
<div class="col-sm-9">tekst over voedsel van de Hagedis</div>
</div>


Hier zijn de blokken van 2 verschillende grotes. Eentje is 3 en de andere is 9. Samen is dit wel weer 12! Hierdoor wordt het eerste blok kleiner dan het 2de blok.
Je mag zelf kiezen hoe groot je ieder blok maakt! Zolang het bij elkaar opgeteld wel weer 12 is.
Vervang de id (id="inhoudblok") voor het adres die je hebt gebruikt bij het menu. Dus in dit geval wordt het id="voedsel". Ja zonder #.
Zet zo elke stukje tekst over jouw onderwerp op de pagina.
Sla het bestand weer op (CTL-S). En open jouw pagina in de browser. Hoe ziet hij er nu uit?

© JE NAAM