html basic - de cursus voor beginners


~HTML basic
   ~Wat is html ?
   ~Over tags
   ~Stijl tags
   ~Plaatsings tags
   ~Letter tags
   ~Kleuren tags
   ~Links
   ~Plaatjes
   ~Tabellen
   ~En verder

~Forum
~Downloads
~Links
~Referenties
~Disclaimer
~Feedback

 

 

Les 4 : Plaatsings tags

De <CENTER> tag wordt gebruikt om tekst of plaatjes op je pagina te centreren. Je kunt deze tag op dezelfde manier gebruiken de stijl tags uit de vorige les. Probeer maar.

Om wat andere tags uit te leggen is het makkelijker dat je eerst de onderstaande tekst kopieert naar je kladblok, zodat je aan de hand daarvan het effect van de verschillende tags kunt zien. Je kunt hiervoor de tekst die al in je kladblok staat verwijderen.

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY>

De zin die je nu zit te lezen zal ik niet afbreken door middel van de tags. Het nut hiervan is dat je kunt zien dat zonder tags, alle tekst 1 hele lang zin wordt. Zelfs al gebruik ik de enter knop ;

bla

blabla

blablabla

Gezien ? Mooi dan ga ik verder, door nu wel een break te plaasten.<BR>

Je ziet dat ik nu wel op een nieuwe regel begin.<BR>

Of, door 2 breaks te plaatsen, 2 regels lager.<BR><BR>

Dat kan ook sneller, door gebruik te maken van de paragraaf tag. Kijk maar.

<P>Begin van nieuwe paragraaf. En meteen het einde van de paragraaf.</P> <BR>

Nu nog even wat centreren :<BR>

<CENTER>Het Midden</CENTER><BR><BR>

</BODY>

</HTML>

<BR> wordt dus gebruikt om zinnen te beeindigen en naar de volgende regel te gaan. <P> doet in principe hetzelfde, alleen voegt <P> nog een extra blanco regel toe.

Let op ! Je ziet dat de "enters" in het kladblok geen effect hebben op de pagina, zoals deze in de browser te zien is. Je kan dus 7 keer enteren in kladblok, maar op de pagina in de browser zal je tekst niet omlaag gaan. Je hebt dus echt de <BR> of de <P> nodig om naar de volgende regel te gaan.

Let op ! De <BR> tag hoeft niet te worden afgeloten

Ook om uit te leggen waarom er voor de spatie een aparte code is, kun je beter de onderstaande tekst naar je test.htm kopieren.

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY>

Het maakt niet uit hoeveel spaties ik gebruik, je zal er maar 1 te zien krijgen, kijk maar :<BR><BR>

1 1 1 1 1<BR>
2  2  2  2  2<BR>
3   3   3   3   3<BR>
4    4    4    4    4<BR>
5     5     5     5     5<BR>

<P>Dit kan als volgt worden opgelost :</P>

<P>6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P>

<P> Ok ?</P>

</BODY>

</HTML>

Let op ! Je ziet dus dat je slechts de eerste spatie die je in kladblok hebt gegeven terugziet op de pagina in de browser. 7 spaties achter elkaar zullen er op de pagina in de browser dus hetzelfde uitzien als 1 spatie. Om meerdere spaties achter elkaar te krijgen, die ook zichtbaar zijn in een browser, moet je voor elke spatie die je wilt &nbsp; typen.

Om een scheidingslijn op je pagina te krijgen kun je gebruik maken van de <HR> tag. Door het onderstaande te kopieren naar je test.htm zul je zien wat voor lijnen je allemaal kunt maken met de <HR> tag.

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY>

<P>Een gewone lijn :<BR>

<HR></P>

<P>Een lijn die 100 pixels breed is :<BR>

<HR WIDTH="100"></P>

<P>Een lijn die 100 pixels hoog is :<BR>

<HR SIZE="100"></P>

<P>Een lijn die 60 pixels breed en 60 pixels hoog is :<BR>

<HR SIZE="60" WIDTH="60"></P>

<P>Je kunt de breedte van de lijn ook aangeven in procenten van de totale breedte van de pagina. Dat ziet er dan zo uit :<BR>

<HR SIZE="30" WIDTH="50%"></P>

<P>Een lijn heeft standaard een schaduw, wil je deze schaduw weghebben, dan kan dat als volgt :<BR>

<HR NOSHADE></P>

</BODY>

</HTML>

Let op ! In het bovenstaande voorbeeld plaats ik in de <HR> tag wat extra opdrachten. Zoals SIZE, WIDTH en NOSHADE. Kijk hier nog maar eens goed naar, want dit zal vaker voorkomen.

Zo is het bijvoorbeeld ook mogelijk om in de <P> tag een plaatsing, alignment, aan te geven, door in de <P> tag ALIGN="plaats" te zetten. Zie het onderstaande voorbeeld ;

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY>

Ik zal nu laten zien hoe je door middel van alignment je tekst kan plaatsen.<BR>

<P ALIGN="LEFT">Nu staat de tekst links. Dat staat ie standaard ook, dus echt veel heb je aan dit voorbeeld niet.

<P ALIGN="CENTER">Nu staat de tekst in het centrum van de pagina. Hier heb je misschien al wat meer aan, hoewel je hiervoor ook gewoon de CENTER-tag kunt gebruiken.

<P ALIGN="RIGHT">Nu dan rechts. Zie je ? Het werkt dus....

</BODY>

</HTML>

Wat ook wel handig om te weten is, is dat de browser altijd standaard, zoals je bijvoorbeeld ook in MS Word gewend bent, een margin aanhoudt. Kijk maar naar deze tekst. Deze tekst raakt de zijkant van de browser niet, maar laat eerst een stukje wit zien. Wil je dat stukje wit weghebben of groter maken dan kun je dat aanpassen door de opdrachten LEFTMARGIN="grootte" en TOPMARGIN="grootte" in de <BODY> tag te plaatsen. Zet je de grootte op 0, dan sluit de tekst zich direct aan de browserwand aan. Probeer het maar eens.

Nu kun je dus ook je pagina een beetje indelen. Dan gaan we dus maar door met de letter tags.

Naar les 5

opdrachten
zijn opdrachten die in bepaalde tags kunt plaatsen. Zo kun je in de body tag bijvoorbeeld de opdrachten : bgcolor, link, alink, margin, e.d. zetten. En in de table tag de opdrachten : border, bgcolor, width, cellpadding, e.d.

webles © 2000-2002 kopalis