x

Inloggen

Je bent nog niet ingelogd. Aanmelden of een nieuw account Registreren

Kaders in HTML voor dummies

Door Rose_love gepubliceerd op Wednesday 26 February 17:20

Kaders: het geeft stijl aan je pagina. Je maakt je pagina op en het ziet er meteen een stuk aantrekkelijker uit. Hoe doe je dat toch?

Verstaat gij ook hetgeen gij leest?

Sommigen kunnen er prima mee uit de voeten, anderen gebruiken gewoonweg altijd dezelfde code en weer anderen hebben er, ondanks alle muizenperikelen, nog geen kaas van gegeten. Het is al vaker uitgelegd, maar HTML-taal is toch voor een groot deel abracadabra voor velen onder ons. Zo ook voor mij. En toch is het me uiteindelijk gelukt om kaders te maken. Als het spreekwoordelijke kwartje gevallen is, dan is het niet eens moeilijk meer. Enkele Plazillianen nemen de smekende houding aan van het katje hier rechts aan en stelden mij vragen over de hoed en de rand van kaders. Vandaar dat ik er een artikeltje aan waag, eigenlijk eigenbelang dus: maar één keer typewerk. Ik hoop dat dit alles verduidelijkt wat nog niet duidelijk was.

Uitleg over:

1. Een kader rondom je artikel

2. Een kader om een afbeelding

3. De verschillende kaderstijlen

4. Meerdere kaderstijlen tegelijkertijd gebruiken

 

Punt 1: Een kader rondom je artikel: stap voor stap uitgelegd.

 

1. Je maakt een nieuwe pagina.

 

2. Bovenaan deze pagina staat de zogenaamde werkbalk. Bij de onderste reeks knoppen vind je helemaal rechts de knop 'code'. Klik deze aan.

3. Je zit nu in de bewerkingspagina die ik voor het gemak de 'html-pagina' noem. Wanneer je dit bij een lege pagina doet, is dit dus ook nog helemaal leeg.

4. Nu komt het moeilijkste: de code. Ik begin altijd met <div style=" dit is zeg maar de opening van de code. Dat wil zeggen dat de code ook weer gesloten moet worden. Dit doe je met ">

5. De beginformule is er. Hoe nu verder? Een kader. We gaan simpel beginnen met één stijl. Binnen de 'formule' <div style=" "> gaan we typen. De benaming voor kader is border. Dus: <div style="border"> Maar daarmee staat er nog niets.

6. Je moet die border 'uit gaan leggen'. Wat voor border wil je? Na border type je dus een dubbele punt. Hierna volgt de 'dikte': een willekeurig getal (net hoe dik je de kaderlijn wilt hebben) vastgeplakt aan px. Dan kies je een borderstyle. Laten we deze keer voor een gewone lijn gaan: solid. Dan rest ons alleen nog de kleur. Het is het handigst om de kleur in code in te voegen, dan kent de editor hem meestal wel.Op deze pagina vind je een lijst met kleurcodes voor html. Laten we donkerblauw nemen: 191970. Omdat we dadelijk nog verdergaan met een achtergrondkleurtje, sluiten we het gedeelte 'kader' af met een puntkomma.

7. Wat wordt nu de totale code? <div style="border: 4px solid 191970;"> Dat geeft het volgende resultaat: 

8. Zo maak je dus een kader. Op naar de achtergrondkleur. Na de puntkomma typen we background-color. Ook na dit woord weer een dubbele punt, we gaan het namelijk opnieuw uitleggen, al kost dit niet zoveel moeite.

9. Bij een achtergrondkleur, kiezen we enkel de kleur. We blijven maar in stemming en kiezen voor lichtblauw: ADD8E6. We typen nog steeds binnen de code en komen dan tot het volgende resultaat: <div style="border: 4px solid 191970; background-color: ADD8E6;"> Met die laatste puntkomma sluit je dan het gedeelte 'achtergrondkleur' weer af.

10. De tweede stap was: klik op de code-knop. Daar kun je nu weer op klikken. Als het goed is, zie je nu je kader. De beste manier is om je tekst in Microsoft Word uit te typen en het dan in zijn geheel in het kader te plakken.

11. Nu zie je de tekst in het kader staan. Maar het staat wel erg dicht tegen de kaderrand aan. Daar gaan we iets aan doen. We klikken weer op de codeknop en kruipen weer in ons <div style=””> vakje. Het toverwoord om de ruimte tussen de kaderrand en de tekst te vergroten is padding. Zelf ga ik vaak uit van de grootte 10px. Dus dan krijg je padding: 10px;. Nog maar een keer de hele formule: <div style="border: 4px solid 191970; background-color: ADD8E6; padding: 10px;">. De volgorde van de verschillende elementen in onze formule is overigens niet belangrijk. Als je maar oplet dat je ieder element met een puntkomma afsluit, voordat je een nieuw element toevoegt.

12. Mocht je nu zeggen: ‘Die ruimte tussen de tekst en de kaderrand is mij prima, maar ik wil juist meer ruimte rond het kader!’ Daar is het woord margin voor. Bij Plazilla heb je dit niet echt nodig, vind ik zelf, maar mocht je het willen proberen, dan voeg je bijvoorbeeld margin: 10px; toe en wordt dit de totaalformule: <div style="border: 4px solid 191970; background-color: ADD8E6; padding: 10px; margin: 10px;"> Om het resultaat te bekijken, klik je weer op de codeknop.

13. Gefeliciteerd, je hebt de grondbeginselen van het ‘inkaderen’ onder de knie.

 

Kaders in HTML voor gevorderde dummies

 

Punt 2: Afbeeldingen inkaderen

Ik begrijp dat je bijna in slaap bent gevallen, maar hoe zit het nu met het inkaderen van afbeeldingen?

1.   Voeg een afbeelding in.

2.   Klik opnieuw op de codeknop.

3.   Zoek de code van de afbeelding op. Dit begint altijd met: <img alt=". De totale code is in mijn geval: <img alt="" class="ZillaIMG" id="ZillaIMG_tmp" src="http://c2.plzcdn.com/ZillaIMG/db090cc7c35d61f5af8d5a88de60c65b.jpg" style="width:359px;height:400px;float:center;" /> We gaan onszelf niet vermoeien met het ontleden van deze code, maar gaan simpelweg een kader om de afbeelding plaatsen. Achter de laatste puntkomma, voegen we dit toe. Uiteraard beginnen we weer met border + dubbele punt. Daarna gaan we specifiek uitleggen wat we willen, dus bijvoorbeeld: border: 3px solid 191970;. De code wordt dan: <img alt="" class="ZillaIMG" id="ZillaIMG_tmp" src="http://c2.plzcdn.com/ZillaIMG/db090cc7c35d61f5af8d5a88de60c65b.jpg" style="width:359px;height:400px;float:center; border: 3px solid 191970;" />

4.   Dat was niet zo moeilijk, nietwaar? Op deze manier kun je ook een achtergrondkleur tussen het plaatje en de border invoegen. Bijvoorbeeld: background-color: FFFACD; wat als totaalformule dan het volgende wordt: <img alt="" class="ZillaIMG" id="ZillaIMG_tmp" src="http://c2.plzcdn.com/ZillaIMG/db090cc7c35d61f5af8d5a88de60c65b.jpg" style="width:359px;height:400px;float:center; border: 3px solid 191970; background-color: FFFACD" />

5.   Voor de gevorderden onder ons kun je daar ook weer gebruikmaken van de zogenaamde padding, zodat de ruimte tussen het plaatje en het kader links en rechts breder wordt.  Zie plaatjes.

6.   Daarnaast is het mogelijk het plaatje te laten ‘zweven’, door achter float left of right toe te voegen. Het kader wordt dan verplaatst richting een ander element.

Punt 3: De kaderstijlen: welke kaders zijn er allemaal?

In de voorbeelden heb ik voor de duidelijkheid steeds solid gebruikt, de eenvoudige lijn. Er zijn echter nog veel meer mogelijkheden. Je kunt dit het beste uitproberen met een duidelijke kleur, bijvoorbeeld roze of geel. In plaats van het woord solid, kun je gebruiken:

-        dotted (stippen)

-        dashed (streepjes)

-        double (twee lijnen)

-        ridge (soort fotolijst met schaduwwerking naar onder)

-        groove (soort fotolijst met schaduwwerking naar boven)

-        outset (schaduwwerking rechtsonder en rechts opzij)

-        inset (schaduwwerking linksboven en links opzij)

 

Punt 4: Ingewikkelde kaders

Daarnaast hebben jullie misschien gezien dat ik ook wel eens kaders gebruik met verschillende kaderstijlen door elkaar. Bij mijn artikel over 10 spelfouten gebruikte ik bijvoorbeeld dotted en double door elkaar. Je moet daarvoor wel wat meer codes gaan gebruiken. Kijk maar: <div style="padding: 10px; border-width:6px;border-color:DC143C;border-style:dotted double dotted double; background-color: FFF8DC;"> Je ziet dat ik border-width gebruik om aan te geven hoe dik de kaderlijnen moeten worden. Daarna vermeld ik de border-color apart. Dan volgt de border-style: dotted double dotted double. Hier kun je eindeloos mee variëren. Ik ben er niet helemaal zeker van of de editor alles ‘slikt’, maar door te proberen, leer je veel.

Mocht je vragen hebben, laat gerust een reactie achter of stuur me een PB. Dat ik overal een antwoord op heb, durf ik niet te zeggen, maar wie weet kan ik je helpen!

 

 

Reacties (30) 

Voordat je kunt reageren moet je aangemeld zijn. Login of maak een gratis account aan.
interessante uitleg. Ga het uitproberen.
U bent niet ingelogd. Wilt u nu inloggen of een account aanmaken?
Duidelijke uitleg.....maar ik ga het niet gebruiken. Het kost me veel te veel tijd. Zo kom ik niet meer aan het schrijven toe.
Thanks, Ruud. Als je het eenmaal door hebt, kost het niet veel tijd meer, maar je moet er wel even 1 keer voor gaan zitten. Maar kan je afweging wel begrijpen!
Wat leg je dit duidelijk uit zeg. Ik ben bekend met Hmtl taal doordat ik een cursus webdesign heb gedaan. Maar jou uitleg verduidelijkt wel hoe ik de problemen binnen een pagina op plazilla op kan lossen. Jammer genoeg is niet alles mogelijk zoals andere lettertypes.
Dankjewel, Anerea. Ja, dat vind ik ook jammer, heb wel wat zitten rommelen met lettertypes, maar dat pakt hij echt niet. Misschien bij de nieuwe versie van Plazilla.
OMG waar haal ik het geduld vandaan? kan ik dat ook ergens in een code vinden? :-P
Hahaha, oké, bij dezen stel ik me dan ook beschikbaar als klaagmuur. Als dat helpt. ;)
Misschien dat ik nu ook een poging durf te wagen dus ook bij de favorieten.
Kan het je alleen maar aanraden. En ik blijf beschikbaar voor vragen.
Bij mijn favorieten om later te bestuderen. Ik weet hoe ik een kader om het artikel maak maar vind dat niet zo mooi. Maar om een afbeelding dat lijkt me wel wat.
Thanks, Karazmin! Ieder zijn ding natuurlijk. Zelf vind ik het best wel mooi, maar je maakt wel een opvallende pagina binnen een pagina. Bij de nieuwe versie van Plazilla ziet het er anders uit; meer 1 geheel.
OK. Dacht altijd dat ik meekon met de tijd maar ik beken, ik wordt oud. Het is supermooi maar de theorie hierboven vertalen naar praktijk, daar vrees ik voor. Ga het toch proberen. En deze zet ik bij men favo''s
;) Als je er eenmaal aan begint, valt het echt mee. Ik ben vaak echt een kluns met dit soort dingen, maar zelfs mij lukt het. Thanks!