Website – Tag overzicht – Een Theek 5 Website: Codelol

Er zijn natuurlijk veel meer tags dan hieronder worden getoond. Maar met deze tags kun je al wel heel veel doen.
Wil je meer of andere tags, zoek dan eens op internet.

Bij de voorbeelden worden alleen de codes van de BODY gegeven. Natuurlijk moet je ook de HTML tags, de TITLE tags en de HEAD tags op de goede manier erbij gebruiken om in de browser het rsultaat te kunnen zien.
(Kijk hiervoor bij: Website – wat als tweede).

TEKST:

Vetgedrukte tekst:

<body>
Dit is heel grappig
</body>

Dan komt op de site te staan:
Dit is heel grappig

Schuingedrukte tekst:

<body>
Dit is heel grappig
</body>

Dan komt op de site te staan:
Dit is heel grappig

Ondertreepte tekst:

<body>
Dit is heelgrappig
</body>

Dan komt op de site te staan:
Dit is heelgrappig

Lettergrootte:

<body>
De grootte van de letters kun je aanpassen
</body>

Dan komt op de site te staan:
De grootte van de letters kun je aanpassen

Letters kleuren:

<body>

De
kleuren
van
de
regenboog

</body>

De kleuren van de regenboog

PLAATJES:

Plaatje invoegen:

Je kunt de browser laten weten dat er een afbeelding op een pagina moet komen met behulp van de image-tag <img>
We moeten binnen de tag ook de bron (src = source) opgeven. De bron bestaat uit de naam van het plaatje (mannetje.gif) en eventueel de plaats waar de browser het plaatje kan vinden.
Staat het plaatje in dezelfde map als de HTML-pagina, dan hoef je alleen de naam van het plaatje op te geven.

Dan komt op de site dat figuurtje te staan.
De bovenstaande bron, src=”mannetje.gif”, betekent dat de browser de afbeelding zoekt in dezelfde map als waar het HTML-document staat.

Dit Mannetje staat in dezelfde map als waar het HTML document staat en heet: mannetje.gif.

Je kunt natuurlijk ook een JPG plaatje invoegen. Dan zou dit plaatje heten: mannetje.jpg

Als het plaatje “Zonnebloem” heet en een jpg plaatje is en ook niet in dezelfde map staat, maar in een aparte map, bijvoorbeeld de map: pictures, dan ziet de code er als volgt uit:

LINKS:

Link naar ander homepage:

Een homepage is natuurlijk niet compleet zonder ‘links’ (verbindingen) naar andere Internetpagina’s. Sterker nog: surfen op het Internet is niets anders dan van link naar link springen.

Het maken van een link is heel simpel. We gaan een link maken naar Google.
Maak een webpagina en zet tussen de body-tags “Ga naar Google!”

Zet het woord dat naar de link moet verwijzen tussen een paar anchor-tags: <a> en </a>.

<body>
Ga naar <a>Google!</a>
</body>

Voeg de optie href = “URL” toe.
URL staat voor de Universal Resource Locator en dat is de naam van de website waar je heen wilt.
Als je naar een website op het Internet wilt moet er het voorvoegsel: “http://” bij staan.
Aan dat vootvoegsel kan de browser zien dat het om een Internetadres gaat.

Voor een link naar Google moet er dus komen te staan:

<body>
Ga naar <a href=”http://www.google.nl/” >Google!</a>
</body>

Een E-mail link:

Een e-mail link werkt op dezelfde manier als een link naar een website.
We gebruiken nu het voorvoegsel mailto: gevolgd door het e-mail adres waar de mail heen moet.

Bijvoorbeeld:
<body>
Stuur me <a href=”mailto: Test@mailadres.nl”>mail!</a>
</body>

Als je deze code in je pagina opneemt en je klikt op de link, dan opent de browser het e-mailprogramma op de computer van de gebruiker en wordt er een e-mail aangemaakt met verzendadres Test@mailadres.nl.

Opmaak:

Geordende lijst:

De tags voor de geordende lijst zijn: <ol> en </ol>
(ol = ordered list = geordende lijst)

Bij beide lijsten hoort ook nog de list-tag <li>.

<body>
Wat wil ik van Sinterklaas?
<ol>
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>…
</ol>
<body>

Ongeordende lijt:

De tags voor de ongeordende lijst, <ul> en </ul> (ul = unordered list = ongeordende lijst).

Bij beide lijsten hoort ook nog de list-tag <li>

Het enige wat moet gebeuren om van een geordende lijst een ongeordende lijst te maken is het vervangen van de tags <ol> en </ol> door de tags <ul> en </ul>

<body>
Wat wil ik van Sinterklaas?
<ul>
<li>Een rode Ferrari
<li>Een snelle speedboat
<li>Een huis in Palm Beach
<li>Een reis om de wereld
<li>Pamela Anderson
<li>…
</ul>
<body>

Horizontale lijn:

Een ander handig aardigheidje is de horizontale lijn.
Je gebruikt daarvoor de tag <hr> (hr = horizontal rule = horizontale lijn).
De tag <hr> kent vier opties:

width
Hiermee kan ingesteld worden hoe breed deze lijn mag worden.
De breedte kan ingesteld worden in pixels en in procenten. Als de optie weggelaten wordt, dan komt de lijn over de volle breedte.
align
Hiermee kan de lijn links of rechts worden uitgelijnd of worden gecentreerd.
size
Hiermee wordt de dikte van de lijn ingesteld in pixels.
noshade
Als deze optie wordt toegevoegd wordt de lijn massief.