Lievelingsrecept
Kies een eigen recept als inhoud. Bekijk hier voorbeelden van vorige jaren.Stap 1: Logo
Start met het ontwerpen van een nieuwe logo (Illustrator) Tip: deel van je voornaam + recept in verwerken.Stap 2: HTML-tags
We gaan per hoofdstuk werken aan een website, vul telkens de juiste HTML-tags aan.Stap 3: CSS: HTML-selectors opmaken
Bepaal nu aan de hand van je logo je kleuren (tekst- en achtergrondkleuren). Denk na over volgende items:- Kleuren
- Typografie/lettertype
- Compositie
Stap 4: Semantische structuurelementen
Maak een printscreen van je afgewerkte site en plaats hier rond je basisblokken met de juiste HTML namen.
<body>
<nav>
<ul>
<li> <a href="index.html"> Home </a> </li>
<li> <a href="links.html"> Links </a> </li>
<li> <a href="contact.html"> Contact </a> </li>
</ul>
</nav>
<header>
<img src="img/logo.svg" width="20%">
</header>
<main>
<div id="kolomLinks">
<h1>Pannekoeken</h1>
<p>Gemaakt door Van Haver T.</p>
<table>
<tr>
<th>Aantal</th>
<th width="120"> Niveau</th>
<th>Tijd</th>
</tr>
<tr>
<td> <i class="fas fa-user-friends"> </i> </td>
<td>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="far fa-star"> </i>
</td>
<td> <i class="fas fa-clock"> </i> 10 min.</td>
</tr>
</table>
</div>
<div id="kolomRechts">
<h2>Ingrediënten</h2>
<ul>
<li>boter</li>
<li>melk</li>
<li> <img src="img/egg.png">eieren</li>
</ul>
<h2> Bereidingswijze</h2>
<ol>
<li>Uitleg 1</li>
<li>Uitleg 1</li>
</ol>
</div>
</main>
<footer>
Copyright © Van Haver T. - 2021-22
</footer>
</body>
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Open Sans', sans-serif;
background-color:black;
color:white;
}
h1, h2 {
font-family: 'Pacifico', cursive;
color:lightblue;
}
nav a {
color:#fff;
text-decoration:none;
margin-right:20px;
font-size:22px;
color:black;
font-weight:bold;
}
a:hover {
color:#8b102b;
}
nav ul {
height:80px;
list-style:none;
display:flex;
justify-content:center;
align-items: center;
background-color:lightblue;
}
header {
background-image:url(img/banner.jpg);
background-repeat: no-repeat;
background-color:#95e1f9;
background-position:top left;
width:100%;
height:350px;
display:flex;
justify-content:center;
align-items: center;
}
main {
display:flex;
justify-content:center;
margin-top:40px;
}
#kolomLinks {
width:220px;
border:1px solid #95e1f9;
margin-right:60px;
padding:20px;
}
#kolomRechts {
width:600px;
border:1px solid #95e1f9;
}
footer {
text-align:center;
margin-top:80px;
}
Om in te loggen met SFTP gebruikt u de volgende gegevens:
FTP-adres: ssh.media-richtpuntninove.beGebruikersnaam: media-richtpuntninove.be
Wachtwoord: *** (vraag aan de leerkracht)
Poort: 22