Plafond

Dag 1 • thema 1 • html

Wat kun je aan het eind van dag 1?

Lesblokken html

  1. Gebruik van Kladblok oftewel Notepad
  2. Correct html coderen
  3. Basispagina klaarzetten voor html-bouw
  4. Tekst in soorten en maten: alinea’s, koppen, tabellen enzovoort
  5. Gebruik van beeld op de pagina
  6. Het aanbrengen van (hyper)links

TIP Klik op Bekijken om plaatjes te verbergen of open te klappen.

 1. Kladblok/Notepad Bekijken

1a. Nieuwe map op het bureaublad

Meteen aan de slag. Maak een nieuwe map aan op je bureaublad (desktop). Dat doe je zo: klik met de rechtermuisknop op het bureaublad en kies dan:
Nieuw=>Map (New=>Folder).

Nieuwe map

Windows biedt aan om deze map Nieuwe map (New Folder) te noemen. Op dat aanbod gaan we niet in. Noem de map maar: Webs.

Naam: Webs

1b. Aan de slag met Kladblok/Notepad

Open het Windows-programma Kladblok/Notepad.

Let op! Microsoft Word is geen goede html-editor, want onzichtbaar wordt allerlei webvijandige code toegevoegd. Daarom gebruiken we Kladblok/Notepad.

Kladblok vind je hier:
Start=>Alle programma’s=>Bureau-accessoires=>Kladblok.

Open Kladblok

Wie de Engelstalige versie van Windows gebruikt, kiest:
Start=>All Programs=>Accessories=>Notepad.

In het geopende Kladblok-/Notepad-bestand tik je een tekst, bijvoorbeeld:
Wereldschokkend! Of niet soms?

Tekst in Kladblok

Kies nu in de menubalk van Kladblok (Notepad): Bestand=>Opslaan als (File=>Save As).

Opslaan als

Kies bij Opslaan in (Save in) eerst het bureaublad (desktop) en...

Kies Bureaublad

...kies dan de map Webs.

Kies map Webs

Tijdens het opslaan zie je bijna onderaan dat bij Bestandsnaam al de extensie *.txt ingevuld staat. Niet goed: we moeten voor een webpagina niet de extensie .txt, maar de extensie .html hebben. Laten we deze webpagina schokkend.html noemen. Klik daarna: Opslaan (Save).

Opslaan als schokkend.html

1c. Webpagina openen in een browser

Sluit nu dit nieuwe Kladblok-/Notepad-bestand, open op het bureaublad (desktop) de map Webs door op die map te dubbelklikken en dubbelklik daarna nogmaals, nu op schokkend.html.

Dubbelklik

Tada! Je eerste webpagina opent zich in een browser.  spieken 1c   pak code 1c 

TIP! Als Windows in de map Webs de extensie .html niet laat zien, dus als alleen als bestandsnaam schokkend te zien is, zet dan omwille van de duidelijkheid de extensies aan. Klik in de rechterbalk op Extensies aan voor instructies voor Windows XP.

 2. Correct html coderen Bekijken

2a. Tags vereist

In de zojuist gemaakte webpagina staat geen html-code. Dat de pagina toch werkt, komt omdat browsers voor dummies gemaakt worden en derhalve heel vaak de bedoeling snappen, in weerwil van fouten en hiaten in de html-tekst. Het werkt dus, maar we verdienen geen voldoende.

Hoe moet het dan wel? Nou, zo: in een html-bestand horen tags te staan. De meest voorkomende zie je in de taglijst hieronder (+/–).

naam name begintag < > slottag </ >
       
html html <html> </html>
hoofd head <head> </head>
titel title <title> </title>
body body <body> </body>
       
alinea paragraph <p> </p>
kop (grootst) heading <h1> </h1>
kop (kleinst) heading <h6> </h6>
link link <a href=" "> </a>
plaatje image <img src=" " />  
       
ongenummerde lijst unordered list <ul> </ul>
genummerde lijst ordered list <ol> </ol>
punt op de lijst list item <li> </li>
       
blokcitaat blockquote <blockquote> </blockquote>
       
vet strong <strong> </strong>
cursief emphasized <em> </em>
       
nieuwe regel linebreak <br />  
       
tabel table <table> </table>
tabelrij table row <tr> </tr>
tabelcel table cell <td> </td>
       
commentaar comment <!-- -->

2b. Minimaal aantal tags neerzetten

We gaan in ons wereldschokkende bestand van hierboven de juiste tags aanbrengen. Een webpagina hoort te beginnen met de tag <html> en te eindigen met de tag </html>. Tik deze tags in, boven en onder in het bestand schokkend.html.

Plaats html-tags

We zijn er nog niet. Wat de browser aan de bezoeker laat zien, staat altijd tussen body-tags. Tik <body> boven de tekst en </body> eronder.

Boven de body staat, onzichtbaar voor de bezoeker, ook nog een head met daarbinnen een title. Plaats, boven body, onder elkaar de tags <head> en </head>, tik ertussen op één regel vervolgens <title> en </title>. Tussen deze laatste twee tags plaats je een titel die je zelf kiest, bijvoorbeeld: Een fantastische webpagina.

Plaats meer tags

Sluit het bestand schokkend.html en dubbelklik vervolgens op zijn bestandikoontje in de map Webs op het bureaublad (desktop). Je ziet: het enige verschil in vergelijking tot de eerste versie is de titel Een fantastische webpagina, die nu in de bovenrand van het browservenster staat.  spieken 2b   pak code 2b 

 3. Een voorbeeldige html-pagina als basis Bekijken

3a. Een basispagina inrichten

In een voorbeeldige html-pagina staan nog meer gegevens. Die codetekst hoeven we niet elke keer weer helemaal zelf in te tikken. Je kunt een basispagina klaarzetten en die steeds opnieuw gebruiken als je aan het bouwen slaat. De code voor een basispagina vind je hieronder (+/–).


Je kunt de code voor de basispagina ook pakken door rechts op deze webpagina te klikken op Basisbestand.

Klik hierboven op Pak code en kopieer de gemarkeerde code door Ctrl+C in te toetsen. Open een nieuw Kladblok(Notepad)-bestand en plak de code erin met Ctrl+V. Bewaar het Kladblokbestand als html-document met de naam index.html in de map Webs op je bureaublad (desktop).

Basispagina

Het beginbestand in een directory (map) heet meestal index.html. De bezoeker hoeft index.html niet in te tikken in de adresbalk van de browser. Stel, op website architex.nl staat in de map planning een bestand index.html. De bezoeker komt daar terecht als hij surft naar architex.nl/planning.

3b. Reservekopie voor de basispagina maken

Bewaar de pagina van hierboven op een handige plek op je computer en werk met een kopietje als je een nieuwe pagina bouwt.

Even de kopie maken: kies in Kladblok (Notepad) op de menubalk Bestand=>Opslaan als (File=>Save as).

Opslaan als

Wijzig de naam in basis.html en kies bijvoorbeeld Mijn documenten (My Documents) als bewaarplek.

Mijn documenten

Het bestand basis.html dat je meteen na het opslaan nog open hebt staan, is je zojuist gemaakte reservekopie in de map Mijn documenten (My Documents). Deze kopie is om te bewaren, niet om mee te werken, dus afsluiten maar.

3c. Verder werken met index.html in Webs

We gaan nu verder stoeien met het bestand index.html in de map Webs. Tref je bestand index.html onverhoopt niet aan in de map Webs, dan is er iets misgegaan. Herhaal in dat geval de stappen in blok 3a en overtuig je er goed van dat je het bestand inderdaad als index.html opslaat in de map Webs.

Als index.html volgens de aanwijzingen in de map Webs zit, rechtsklik dan op dat bestand en kies Openen met (Open with), en dan Kladblok (Notepad).

Let op! Niet dubbelklikken, want dan open je het bestand in een browser.

Eerst vervangen we de titel Untitled Document door iets leukers...

Selecteer Untitled Document

...bijvoorbeeld: De Vliegende Hollander.

Tik in: De Vliegende Hollander

Klik op Ctrl+S om het document op te slaan. Nu gaan we de body invullen met tekst en beeld.

 4. Tekst in soorten en maten Bekijken

4a. Alinea’s

Tekst staat in een html-document doorgaans tussen de alinea-tags <p> en </p>. Tik een aantal alinea’s (paragraphs) tekst in de body van index.html. Tik een <p> voor elke alinea en een </p> achter elke alinea. Om jezelf de tijd van het tikken te besparen kun je hieronder (+/-) wat tekst (uit Wikipedia) pakken via Pak code, kopiëren (Ctrl+C) en plakken (Ctrl+V).


In html ziet dat er dan als volgt uit:

Alinea’s

4b. Koppen

Tik boven in de body een kop (head) en zet die tussen de koptags <h1> en </h1>.

TIP! Om resultaten in een browser te bekijken moet je het html-bestand altijd eerst opslaan.

Sla het bestand op. Bekijk het nu in een browser. Is de kop te groot? Kies <h2> en </h2>. Probeer nog wat formaten uit. Er zijn er zes. De kleinste kop krijg je met <h6> en </h6>.

Kop

4c. Lijsten

Wil je een lijstje maken, dan kan dat. Er zijn twee types: met of zonder nummers. Het menu links boven op deze cursuspagina is een voorbeeld van een nummerloze lijst.

De lijst zonder nummers, de unordered list, staat tussen de tags <ul> en </ul>. Elk list item in de lijst staat tussen <li> en </li>. Opgave: tik in webpagina index.html een ongenummerd lijstje van de geografische namen in het Vliegende-Hollandertekstje. Je kunt hieronder (+/–) spieken hoe het moet.

<ul>
<li>Terneuzen</li>
<li>Kaap De Goede Hoop</li>
</ul>

Bekijk de pagina in een browser. Wijzig daarna de ongenummerde lijst (unordered list) in een genummerde lijst (ordered list) door in index.html de tags <ul> en </ul> te wijzigen in <ol> en </ol>. Bekijk de pagina opnieuw in een browser.  spieken 4c   pak code 4c 

4d. Citaatblok

Een inspringend citaatblok krijg je binnen de tags <blockquote> en </blockquote>.

OPGAVE Haal de citaten uit het Vliegende-Hollandertekstje uit de alinea en plaats ze in citaatblokken.

Citaatblok

Bekijk het resultaat in een browser.  spieken 4d   pak code 4d 

4e. Nieuwe regel

Als je binnen een alinea een nieuwe regel wilt, gebruik je de tag <br />. Dit is een begin- en slottag ineen, dus je hebt er maar één nodig. Voor een witregel binnen dezelfde alinea kun je de tag tweemaal achter elkaar zetten. Probeer maar.

4f. Vet en cursief

Wil je woorden vet maken, zet ze dan tussen <strong> en </strong>. Voor cursief zet je ze tussen <em> en </em> (emphasized).

4g. Tabel

We nemen als voorbeeld een tabel van 3 rijen hoog en 4 kolommen breed:

       
       
       

De tabel staat in de html-code tussen de tags <table> en </table>.

Een rij (table row) staat tussen <tr> en </tr>. In de tabel hierboven en in de html-code hieronder staan 3 rijen onder elkaar.

<table>
   <tr> </tr>
   <tr> </tr>
   <tr> </tr>
</table>

Een cel (table data cel) staat tussen <td> en </td>. In een tabel met 4 kolommen telt elke rij 4 cellen:

<table>
   <tr> <td></td> <td></td> <td></td> <td></td> </tr>
   <tr> <td></td> <td></td> <td></td> <td></td> </tr>
   <tr> <td></td> <td></td> <td></td> <td></td> </tr>
</table>

De inhoud van elke cel staat tussen een <td> en een </td>. Hoe de 200 pixels brede tabel

1 2 3 4
5 6 7 8
9 0 1 2

er in html-code uitziet, zie je hieronder (+/–).

Tabel

 5. Beeld Bekijken

5a. Plaatje webklaar maken

Plaatjes voor internet zijn zijn meestal van het type jpg, gif of png.

In html stop je niet de plaatjes zelf, alleen tekst die de browser wijst waar hij een plaatje (+/–) ophaalt en neerzet.

De Vliegende Hollander

Rechtsklik op het plaatje hierboven en kies Afbeelding opslaan als... (Save image as...).

Afbeelding opslaan als...

Kies in het volgende scherm Bureaublad (Desktop), daarna de map Webs en klik dan op Opslaan (Save).

Navigeren en opslaan

Nu zit het plaatje van de Vliegende Hollander in de map Webs en kun je in de html-code tekst toevoegen om dit plaatje te plaatsen.

5b. In html naar een plaatje verwijzen

Hoe en waar: je moet de browser vertellen hoe het plaatje heet en waar het staat.

Ons plaatje heet vlieghol.jpg. De weg wijzen hoeft in dit geval niet, want het plaatje staat in dezelfde map als het html-bestand van onze webpagina. De simpelste code is dan:

<img src="vlieghol.jpg">

We werken in het bestand index.html en gaan de foto bij de eerste tekstalinea zetten. Tik de code in of kopieer ’m en plak ’m achter de openingstag <p> van de eerste alinea.

Plaatjescode

Bekijk de pagina in de browser.  spieken 5b‑1   pak code 5b‑1 

Een beetje een rommeltje, niet? De tekst zou in dit geval naast het plaatje moeten beginnen. Dat kan door het plaatje links te laten lijnen. Voeg code toe zodat er komt te staan:

<img src="vlieghol.jpg" align="left">

Links lijnen

Bekijk de pagina opnieuw in een browser.  spieken 5b‑2   pak code 5b‑2 

Verander "left" in de code ook eens in "right" en bekijk de pagina nogmaals in een browser.

Om de code helemaal netjes te maken, moeten we er ook nog breedte (width) en hoogte (height) aan toevoegen, plus een textueel alternatief (alt) als de browser het plaatje niet laat zien. De correcte code ziet er dan aldus uit:

<img src="vlieghol.jpg" width="393" height="324" alt="De Vliegende Hollander" align="left">

Correcte code

Stel dat het plaatje niet in dezelfde map zit als het html-bestand? Gaan we even doen. Rechtsklik in de map Webs en maak een nieuwe map aan die je pix noemt. Verplaats nu het plaatje vlieghol.jpg naar de map pix.

Verplaats

Bekijk de pagina index.html in de browser en je ziet dat het plaatje nu zoek is. Je moet bij img src (beeldbron image source) aangeven waar het plaatje is. Het zit in de map pix, dus pas het pad in de code aan door pix/ toe te voegen.

<img src="pix/vlieghol.jpg" width="393" height="324" alt="De Vliegende Hollander">

Pad

Bekijk de pagina nogmaals in een browser.  spieken 5b‑3   pak code 5b‑3 

Nog iets meer over paden: moet je drie mappen diep: img scr="een/twee/drie/plaatje.jpg".

Moet je drie mappen omhoog: img src="../../../plaatje.jpg".

Eerst 1 omhoog, dan 1 diep: img scr="../pix/een/plaatje.jpg".

 6. Links Bekijken

6a. Harde link

Een hyperlink of kortweg link stuurt de bezoeker door naar elders langs het pad dat je opgeeft. De basiscode voor een link is:

<a href=" "> </a>

Stel, je wilt de bezoeker naar De Vliegende Hollander bij Wikipedia sturen. Je kunt dan bijvoorbeeld het woord schip in de eerste zin van index.html erheen laten linken. In html ziet dat er zo uitl:

<a href="http://nl.wikipedia.org/wiki/De_Vliegende_Hollander_(spookschip)">schip</a>

Harde link

Open index.html in een browser en test je link.  spieken 6a   pak code 6a 

De link hierboven is ‘hard’ gecodeerd: het complete webadres (url) staat erin. Links naar andere websites moeten altijd hard worden gecodeerd.

6b. Relatieve link

Hyperlinks binnen je eigen website codeer je ‘zacht’ oftewel relatief, zoals we hierboven ook deden met de foto van de Vliegende Hollander.

We gaan nu 3 nieuwe pagina’s maken en die naar elkaar laten linken. Maak in de map Webs een nieuwe map en geef die de naam submap.

Open met Kladblok (Notepad) je bewaarkopie van index.html in Mijn documenten (My Documents).

We gaan nu opslaan als: sla deze kopie in Webs op als een.html. In de body tik je de kop Dit is pagina 1 en de tekstregel Een  twee, drie. Sla dit bestand op zonder het te sluiten.

Kies daarna opnieuw Opslaan als (Save as), verander in de body de kop in Dit is pagina 2, houd de tekst gelijk en sla het bestand als twee.html op in de map submap.

Maak in de map submap op dezelfde manier bestand drie.html aan met de kop Dit is pagina 3.

Open daarna met Kladblok (Notepad) het bestand een.html in de map Webs.

Bekijk, voor je verder gaat, hieronder (+/–) even hoe de hiërarchische indeling van Webs er nu uitziet.

Mappen en bestanden

Je ziet dat een.html in Webs zit, en twee.html en drie.html in submap. Je ziet zo hoe de paden lopen. We gaan de webpagina’s een.html, twee.html en drie.html nu linken.

Open met Kladblok (Notepad) het bestand een.html. Het woord twee linken we nu naar bestand twee.html. Vanuit bestand een.html bezien, zit twee.html een positie dieper: in de map submap. In de html-code zorg je voor het juiste pad:

<a href="submap/twee.html">twee</a>

Linkcode

Open een.html in een browser en probeer de link uit.  spieken 6b‑1   pak code 6b‑1 

Dan nu de rest: voorzie elk woord op elk van de drie webpagina’s van links, en wel zo, dat bezoekers vanaf elk van de drie pagina’s naar elke andere pagina kunnen surfen. Controleer de pagina’s in een browser.  spieken 6b‑2   pak code 6b‑2 

6c. Plaatje als link

Plaatjes kunnen ook een link zijn die je kunt aanklikken.

In blok 6a bespraken we de link schip, waarvan de html-code is:

<a href="http://nl.wikipedia.org/wiki/De_Vliegende_Hollander_(spookschip)">schip</a>

Ook dit plaatje Plaatje linkt naar die Wikipedia-pagina. De html-code van het plaatje heeft nu binnen de link de plaats ingenomen van het woord schip:

<a href="http://nl.wikipedia.org/wiki/De_Vliegende_Hollander_(spookschip)">
<img src="../../pix/eye.gif" width="17" height="12" alt="Plaatje">
</a>

Je kunt hierboven constateren dat rondom gelinkte plaatjes automatisch een rand (border) staat. Meestal willen we die niet. Om hem weg te krijgen, zodat het plaatje er zo uitziet: Plaatje, moet je aan de html-code van de link toevoegen: border="0":

<a href="http://nl.wikipedia.org/wiki/De_Vliegende_Hollander_(spookschip)">
<img src="../../pix/eye.gif"width="17" height="12"alt="Plaatje" border="0"></a>

OPGAVE Maak nu van het plaatje van het spookschip dat in index.html zit, een ongerande link naar het spookschipverhaal in Wikipedia. Probeer het eerst zelf uit, alvorens te spieken. Open index.html in een browser en controleer of het is gelukt.  spieken 6c   pak code 6c 

6d. Openen in een nieuw venster

Als je wilt dat een webpagina wordt geopend in een nieuw venster, voeg je in de html-code target="_blank" toe:

<a href="submap/twee.html" target="_blank">twee</a>

Open het bestand een.html en pas link twee zo aan dat pagina twee.html opent in een nieuw venster.

Nieuw venster

Controleer in een browser of openen in een nieuw venster lukt.  spieken 6d   pak code 6d 

 

Dag 1

  1. • html
  2. css
  3. javascript
  4. extra

Dag 2

  1. servers & ftp
  2. XAMPP
  3. php
  4. MySQL

Dag 3

  1. Drupal-installatie
  2. Inwijding
  3. Forums
  4. Plaatjes
  5. Modules/Themes
  6. Menu’s
  7. Gebruikers

Printversie

Zwoef

html



Bekijken +
Sluit plaatjes