Jump to content

OWN

Een blog van OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1588032

Editie 168 - HTML-cursus

OWN

Artikel geplaatst door OWN

377 bezichtigingen

 Share

Hoeveel procent heb je GTA Vice City uitgespeelt?  

91 leden hebben gestemd

  1. 1. Hoeveel procent heb je GTA Vice City uitgespeelt?

    • 10%
      5
    • 20%
      6
    • 30%
      1
    • 40%
      2
    • 50%
      11
    • 60%
      6
    • 70%
      4
    • 80%
      7
    • 90%
      40
    • 100%
      0

This poll is closed to new votes

gallery_108553_47_10996.gif

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

Welkom bij les nummer 11. We gaan verder waar we vorige week zijn gebleven, tabellen.

Tekst bij een tabel

Het is soms handig om tekst om een tabel heen te laten gaan. Het is erg gemakkelijk om te doen. Kijk naar de code hieronder:

<table align="left"><tr><td>test1</td>test2</td></tr>
<tr><td>test3</td><td>test4</td></tr></table>



Dit geeft onderstaand resultaat:

[table=simple]test1|test2

test3|test4[/table]

Merk hier op dat de tabel dus links is uitgelijnd. Zodra je dan in het P element tekst direct achter de tabel plaatst, komt deze tekst mooi bij de tabel te staan:

<table align="left"><tr><td>test1</td>test2</td></tr>
<tr><td>test3</td><td>test4</td></tr></table><p>Hier kun je dus die tekst plaatsen.</p>

Tabel in tabel

Ook is het mogelijk om in een cel van je tabel, een andere tabel te plaatsen. Hieronder een voorbeeld hiervan:

<table border ="1"><tr><td>Eerste tabel</td><td><h1>Koptekst</h1>
<table border ="1" align="right"><tr><td><img src="http://www.gtaforum.nl/uploads/profile/photo-81942.jpg" /></td></tr>
<tr><td>Hier kun je tekst plaatsen</td></tr></table></td></tr></table>



Een redelijk lastige code, ook niet uit te voeren in BB-code. Vandaar hieronder een afbeelding hoe hij het weergeeft in Firefox:

qq2vxy.jpg

Celinhoud uitlijnen

Het uitlijnen van tekst zullen jullie nu inmiddels wel weten. In ieder geval links en rechts, dit gaat met ALIGN. Boven en onder is ook mogelijk, dit gaat met VALIGN. Kijk maar in het voorbeeld hieronder:

<table border="2"><tr><td align="center" valign="center">tekst1</td><td align="left" valign="right">tekst2</td><tr></table>



Dit resulteert dus in een tabel met een mooi uitgelijnde tekst.

Achtergrondkleur van een tabel

De achtergrondkleur van een tabel is erg gemakkelijk. Zie het voorbeeld hieronder:

<table bgcolor="blue"><tr><td>tekst1</td><td>tekst2</td></tr>
<tr><td>tekst3</td><td>tekst4</td></tr></table>



Deze code geeft je dus een blauwe achtergrond. Uiteraard kun je ook andere kleuren gebruiken en kleurcodes.

En dat was les nummer 11. Volgende keer komt les 12, waarin we weeral verder gaan met tabellen. Hopelijk tot de volgende keer!

 Share

0 reacties

Recommended Comments

Er zijn geen reacties om weer te geven.

Gast
Reactie toevoegen...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
×
×
  • Create New...