HTML

17 februaro 2017 - Ines

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!

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