OWN 438 - Web Met Boer

Artikel geplaatst door OWN 4 november 2015

516 bezichtigingen

Welkom!

Welkom terug! Fijn dat je het weer wilt gaan lezen wat ik je vandaag ga leren. Vandaag gaan wij weer verder met de body waar ik het de vorige les over had. Zo ga ik je vandaag een aantal handige elementen leren die je kunt gaan gebruiken voor je website!

Wat nu?

Terug naar de code van vorige week:

<!DOCTYPE html>
<html lang="nl">
<head>
   <meta charset="UTF-8">
</head>

<body>
<!-- Hierin komt de inhoud van je pagina -->
</body>
</html>

Twee nieuwe zaken, getipt door Big Boss waarvoor dank. Ten eerste:

<meta charset="UTF-8">

META tag's doen niets anders dan informatie aan je pagina toevoegen. Hier vind je een lijst met meer META tag's. Deze META tag voegt een tekenreeks toe.

<html lang="nl">

Niet moeilijker maken dan het is; de taal

Nu gaan wij verder werken in de body. In de body komt de inhoud van je website. We hebben nu de basis van de website gelegd maar wat wil je op je website? Wat voor website wil je hebben? In deze cursus gaan wij een simpele website maken over een spel. Dus; kies je spel uit. De rest komt later wel. We gaan eerst zorgen dat wij een klein beetje door hebben hoe de pagina er in scripttaal uit ziet. En vooral; dat je het kunt lezen.

Hoe dan?

Terug naar onze geweldige code!

<!DOCTYPE html>
<html lang="nl">
<head>
   <meta charset="UTF-8">
</head>

<body>
<!-- Hierin komt de inhoud van je pagina -->
</body>
</html>

Geweldig? Neen, klopt.. Je hebt gelijk. Dit stuk code doet eigenlijk helemaal niets, maar toch onmisbaar! Ga maar eens kijken hoe dit er als webpagina uitziet. Deze code kun je uitvoeren door boven in op het tabblad Uitvoeren te klikken, en daarna kies je de browser uit waarin jij het wilt testen, zoals je ziet; een hele mooie witte pagina.

Tijd voor verandering! Elke tekst moet je een element meegeven. Wat moet de regel tekst gaan doen. Je hebt hier verschillende elementen voor:

<div><!-- Dit is eigenlijk een blok. Een blok is handig te positioneren en te stylen. --></div>

<p><!-- Dit is een paragraaf --></p>

<h1><!-- Dit zijn titels, je kunt maximaal tot en met h6. --></h1>

Wat wij nu gaan doen is dus een titel in een blok zetten. Wij doen dit om er ook een beetje structuur in te krijgen. Zo gaan wij in de verdere cursus de div een positie meegeven en de titel de opmaak.

Dat ziet er als volgt uit:

<div>
       <h1>Hello World!</h1>
</div>

Dit integreren wij in de body:

<!DOCTYPE html>
<html lang="nl">
   <head>
       <meta charset="UTF-8">
   </head>

   <body>
       <div>
               <h1>Hello World!</h1> 
       </div>
   </body>
</html>

En dit resulteert tot:

Goed, nu hebben wij de titel. Nu wil ik er een kleine subtitel onder hebben die de titel benadrukt maar dan tekstueel kleiner laat zien. Dat doen we door middel van een paragraaf (Het kan ook met een h3, of h4 als je dat fijner vindt. Maar nu kies ik even voor een paragraaf zodat je dat ook ziet). Dat gaat als volgt:

<div>
   <p>Subtitle</p>
</div>

En dit gaat wij ook integreren in de body, onder de titel. Dat doen we op de volgende manier:

<!DOCTYPE html>
<html lang="nl">
   <head>
       <meta charset="UTF-8">
   </head>

   <body>
       <div>
           <h1>Hello World!</h1>
       </div>

       <div>
           <p>Subtitle</p>
       </div>
   </body>
</html>

En toont zich visueel als:

Een titel, en een subtitel. Nu wil ik er nog wat tekst onderzetten. Gewoon een simpel tekstje. Wij als webdevelopers gebruiken hiervoor de standaard Lorem Ipsum (misschien ken je het niet, zo niet; dan vind je hier de tekst). Dat gaan wij doen op exacte dezelfde manier. Alleen in plaats van de <h1> maken wij gebruik van een ander element, namelijk:

<span></span>

Deze span kunnen wij straks makkelijk benaderen voor de opmaak en positionering van de tekst. Het resulteert in de volgende code:

<div>
      <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</span>
</div>

Ook dit integreren wij in de body, onder de titel:

<!DOCTYPE html>
<html lang="nl">
   <head>
       <meta charset="UTF-8">
   </head>

   <body>
       <div>
           <h1>Hello World!</h1>
       </div>

       <div>
           <p>Subtitle</p>
       </div>

       <div>
           <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</span>
       </div>
   </body>
</html>

En dat brengt zich visueel uit tot:

Nu is het ook wel leuk om een titel toe te voegen. Je website titel. Zoals je nu op GTAForum zit staat er bovenaan GTAForum.nl - Het Nederlandse Grand Theft Auto Forum.(De titel bij je tabbladen dus.) Dat doen we als volgt:

<title><!-- Hier uw titel --></title>

Dus in de code ziet er als volgt uit:

<!DOCTYPE html>
<html lang="nl">
   <head>
       <meta charset="UTF-8">
       <title>Mijn Spel</title>
   </head>

   <body>
       <div>
           <h1>Hello World!</h1>
       </div>

       <div>
           <p>Subtitle</p>
       </div>

       <div>
           <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</span>
       </div>
   </body>
</html>

Volgende keer!

Volgende les; heel leuk wat tekst op je pagina. Maar de volgende keer gaan we er wat kleurtje en andere dingetjes aan geven! Stay tuned! Ook wordt het dan duidelijk waarom ik bijvoorbeeld te tekst een span heb gegeven.

Je krijgt bij deze cursus een klein beetje huiswerk mee. Zorg dat de teksten zijn geschreven richting jouw spel. Dus dat de titel jouw spelnaam heeft, de subtitel een mooie subtitel over je spel en dat je een klein beetje inhoudt over het spel als tekst laat zien. Succes!

Hopelijk tot de volgende week, en als je vragen hebt stel ze dan gerust! Enné, laat je ook even weten of het gelukt is?