Jump to content

OWN

  • entries
    5,186
  • comments
    17,587
  • views
    1,521,701

Editie 162 - HTML-cursus


OWN

371 views

 Share

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 6. Ook deze les zal uit twee delen bestaan, en in beide delen houden we ons bezig met afbeeldingen. Veel plezier met het lezen van deze rubriek!

Afbeelding openen

Een afbeelding openen is niet moeilijk. Het lijkt een beetje op de BB-codes die wij hier op het forum gebruiken, alleen komt er nog iets bij. Een zogehete attribuut (meer uitleg hierover in de eerste les) komt er namelijk bij:

<img src="http://i38.tinypic.com/68u8tf.png">



Dit resulteert dus in:

68u8tf.png

Men gebruikt dus het element IMG (wat ook in de BB-code hiervoor wordt gebruikt) en het attribuut SRC. In dit attribuut gebruik je als waarde de link naar de afbeelding die je wilt weergeven.

Afmetingen opgeven

In sommige gevallen wil je een grote afbeelding kleiner hebben, maar heb je geen fotobewerkingsprogramma tot je beschikking. In dit geval kun je altijd de afbeelding verkleinen met behulp van HTML. Hiervoor gebruikt je de attributen WIDTH en HEIGHT binnen het IMG element. Hieronder een voorbeeld:

<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">



De originele afbeelding is 500X150 pixels. Door deze code wordt dit dus verkleint naar 400X120 pixels. Mocht je maar 1 waarde aan willen passen, is dit ook mogelijk.

Deze code:

<img src="http://i38.tinypic.com/68u8tf.png" width="400">



zet hij automatisch om naar

<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">



deze code.

Alternatieve tekst

In sommige gevallen kunnen afbeeldingen niet correct worden weergegeven. Dit kan bijvoorbeeld gebeuren bij mobiele apparaten of trage verbindingen. In deze gevallen zou je misschien een alternatieve tekst willen toevoegen, die verschijnt zodra de afbeelding niet wordt weergegeven. Hiervoor hoef je enkel het attribuut ALT toe te voegen na SRC. Een code hiervan komt er dus zo uit te zien:

<img src="http://i38.tinypic.com/68u8tf.png" alt="Hayden Panettiere">

Dit resulteert dus in de afbeelding als die wordt weergegeven, of in de tekst: Hayden Panettiere. Het ALT attribuut heeft ook een toegevoegde waarde indien de afbeelding wel wordt weergegeven. Als je dan namelijk op de afbeelding blijft staan met je muis, verschijnt er een geel balkje met de tekst van de waarde van ALT.

Afbeelding uitlijnen

Een afbeelding uitlijnen is erg gemakkelijk. Wat bereik je ermee? Nou, dat je tekst en afbeelding gemakkelijk naast elkaar kunt zetten. In de BB-codes op dit forum gebruik je IMGLEFT en IMGRIGHT. In HTML gaat het als volgt:

<img src="http://i38.tinypic.com/68u8tf.png" align="left" />



Hierna kun je gewoon je eigen tekst plaatsen, bijvoorbeeld met het P element of het H element.

En dat was les nummer 6. Volgende keer komt les 7, waarin we doorgaan met afbeeldingen. Hopelijk tot de volgende keer!

 Share

2 Comments


Recommended Comments

Leuke artikels over HTML. :)

Men zegt altijd; begin bij de basis. Echter, sommige dingen van HTML moet je beginners niet aanleren. Ze zijn overbodig en eigenlijk niet W3C Valid.

Dit artikel over hoe je afbeeldingen moet plaatsen is prima. Wel zou ik de html codes over hoe je tekst op kunt maken achterwege laten. (o.a. - strong en - bold en ook center en font size/color etc.) Dit moet je de beginners gewoon meteen leren via CSS.

Een website vandaag de dag zonder CSS is geen website.

Ik wacht met smart op de andere delen. :Y

Link to comment

We houden het eerst gewoon simpel en basaal met HTML, pas daarna gaan we over op CSS. Het is inderdaad zo dat weinig sites geen CSS hebben, maar we willen toch eerst het HTML-gebeuren hebben afgerond.

Link to comment
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...