Jump to content

OWN

  • entries
    5,186
  • comments
    17,587
  • views
    1,520,483

Editie 160 - HTML-cursus


OWN

377 views

 Share

gallery_108553_47_10996.gif

Deze rubriek is geschreven door Kloep en VWO-er!

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!

Deze week gaan we proberen om de teksten wat leuker te maken. Dit onderdeel zal uit twee lessen bestaan, omdat het anders erg lang wordt. Veel plezier met les nummer 4 en tot de volgende keer!

Vet, Cursief, Onderstrepen, Doorhalen

Ditmaal gaan we de opmaak in HTML wat verder uitwerken, we gaan aan de slag de basiscodes. Ze zullen niet veel verschillen met de BBcodes van internetfora, Hyves e.d., dus als je daar al redelijk mee uit de voeten kan, is dat mooi.

Om een stuk tekst in Bold, oftewel vetgedrukt, te schrijven, gebruik je de B-tag (Bold):

<B>Hier je tekst</B>



Om een stuk tekst in Italic, oftewel schuingedrukt, te schrijven, gebruik je de I-tag (Italic):

<I>Hier je tekst</I>



Om een stuk tekst te onderlijnen, gebruik je de U-tag (Underline):

<U>Hier je tekst</U>



Om een stuk door te strepen, gebruik je de S-tag (Striped):

<S>Hier je tekst</S>

Tekengrootte

In HTML kun je eenvoudig je tekst vergroten en verkleinen, door middel van de BIG- en de SMALL-tag. Deze codes zijn niet erg uitgebreid, je kunt namelijk maar uit één grootte kiezen (per tag). Die zal nog wel aan te passen zijn door CSS, maar daar komen we later op terug.

De tags vereisen geen extra waardes, je kunt ze dus net als de andere tags gewoon op de volgende manier gebruiken:

<BIG>Hier je tekst</BIG>



<SMALL>Hier je tekst</SMALL>

Monotype letters

Alle bezoekers hebben in hun browserinstellingen twee lettertypen gespecificeerd. Dit zijn het proportionele en het niet-proportionele. Dat laatste ziet eruit als een typmachine (misschien kennen jullie zo'n ding wel). Meestal zijn dat lettertypen als Times New Roman en Courier. Als jij zelf op je pagina bijvoorbeeld een computercode of een link wil onderscheiden, kun je dit gemakkelijk doen met de volgende codes: <code>, <tt>, <kbd> of <samp>. <code> wordt gebruikt bij computercode. Dit gebeurd vooral in talen zoals C en Perl. <tt> wordt gebruikt voor algemene teksten. <kbd> gebruikt men voor toetsenbordaanwijzingen en <samp> voor de weergave van een voorbeeldtekst. Waarschijnlijk zijn de verschillen nu nog niet echt duidelijk, dit komt doordat er qua uiterlijk geen verschil is. In het voorbeeld hieronder gebruik ik <code>, maar je kan ook een hele andere gebruiken.

2gwg8p1.png

Merk wel op dat sommige webpagina's geheel in niet-proportionele lettertypen zijn, dus dan maken deze codes niks uit.

Blockquote

Wil je een tekst wel afzonderen van je webpagina, maar wil je ook een proportioneel lettertype gebruiken? Dat kan natuurlijk! Hiervoor gebruik je geen van bovenstaande codes, maar hiervoor gebruik je <blockquote>. In de meeste gevallen (tegenwoordig zullen waarschijnlijk alle browsers dit wel doen) zal je browser de tekst in stukje laten inspringen. In onderstaan voorbeeld wordt het misschien wat duidelijker:

vhtjmf.png

Hopelijk hebben jullie kunnen genieten van les 4. Volgende keer komt het vervolg van deze les. Graag tot volgende week!

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

×
×
  • Create New...