HTML

HTML betekent Hyper Text Makeup Language. In het Nederlands is dat Hyper tekst opmaak taal. Dit betekent dat je met HTML een website mooi kan maken.

Je eerste website

Deze website is gemaakt met de volgende HTML code:

<html>
   <head>
      <title>
      De titel van de website
      </title>
   </head>
   <body>
       <h1>
           Kopje 1
       </h1>
       Hallo hoe gaat het
       <h2>
          Kopje 2
       </h2>
       We gaan het vandaag hebben over groen.
   </body>
</html>

Nu zelf aan de slag

Kopieer het bovenstaande stukje html code. Plak deze in notepad, kladblok of iets vergelijkbaars. Sla het bestand op als website.html Let op, je bestand moet eindigen met html, niet met txt of iets anders!

Klik nu dubbel op het website.html bestand. Daar heb je je eerste website.

Open je het bestand met je webbrowser (firefox, google chorme, edge) dan zie je de website. Open je het bestand met kladblok, dan kun je de html code weer aanpassen.

Hoe werkt het?

Oke, nu gaan we de HTML code van de basiswebsite bekijken. Kijk of je begrijpt wat er geb,eurt. We noemen <h1>, <html> en <title> een tag.

Elke tag open je en sluit je, zoals:

<h1> Titel </h1>

We beginnen de html code met de <html> tag en aan het eind van het document sluit je af met een </html> tag.

De <h1> tag maakt een kopje. Probeer zelf <h2>, <h3> en <p> om te zien wat die doen?

Je kunt ook plaatjes en kleur toevoegen! Voor plaatjes gebruik je <img src="plaatje.jpg"> waarin plaatje.jpg de naam van je plaatje is. Het is belangrijk dat je plaatje.jpg in dezelfde map staat als je website.html.

Je kunt de kleur aanpassen door de tekst tussen <font color=red> </font> te zetten. red is de kleur, je moet de kleuren in het Engels zeggen. Je kunt verschillende kleuren kiezen: red, blue, green, yellow, purple, pink, grey, orange en brown. Als dit niet genoeg kleur voor je is, kun je hexa kleuren gaan uitzoeken, die zien er zo uit: #ff2134. Ga bijvoorbeeld naar deze website om hexa kleuren te kiezen.

Meer tags

Er zijn nog veel meer leuke tags die je kunt uitproberen. Hieronder zet ik een aantal tags die je ook nog kunt proberen. Test ze zelf uit, hieronder zie je alleen de code, niet hoe het eruit ziet!

Zet de tekst in het midden:

<h1 style="text-align:center;"> Deze tekst staat in het midden</h1>

Maak een lijst:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Pas het lettertype aan:

<h1 style="font-family:verdana;"> Deze tekst is in het Verdana Lettertype </h1>
<p style="font-family:courier;">Deze tekst is in het courier lettertype</p>

Of maak een tabel op je website met deze tags:

<table style="width:100%">
  <tr>
    <th>Voornaam</th>
    <th>Achternaam</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

CoderDojo Kaarten

Je kunt de volgende CoderDojo HTML code kaarten gebruiken om je website verder te maken. Je moet voor deze kaarten een bestand downloaden: dat kun je hier doen: My-First-Website-Sushi. Pak deze uit op je computer!

  1. Een webpagina aanpassen
  2. Een nieuwe webpagina maken
  3. De startpagina maken
  4. Stijl toevoegen
  5. Linken naar andere paginas
  6. Stijl toevoegen aan het menu
  7. Stijl toevoegen aan menuitems
  8. Pas alleen het menu aan
  9. Responsieve website
  10. Een tabel toevoegen

Je kunt ook zelf via internet dingen google om toe te voegen aan je website. We beginnen een website altijd met HTML, maar later kun je ook CSS, JavaScript en PHP leren. Je kunt als je HTML al kent, op een van deze talen klikken.

← Terug

Creative Commons
https://creativecommons.org/licenses/by-nc-sa/4.0/

Dit materiaal is gemaakt door CoderDojo Arnhem. Je mag er mee doen wat je wilt; aanpassen, gebruiken, uitprinten, kopieren, enzovoort. Als je het gebruikt moet je onze naam er bij vermelden, je mag er geen geld mee verdienen en als je het aanpast moet je dat ook weer Creative Commons maken.