TAGS

Transcriptie

1 Inhoudsopgave INHOUDSOPGAVE 1 HTML 6 TAGS DOCTYPE DECLARATIE... 6 Strict dtd...6 Transitional dtd...6 Frames dtd...6 HEAD... 7 DE TITLE TAG... 7 DE META TAG... 7 Name- en Content-attributen...7 Auteur...7 Trefwoorden voor zoekmachines...7 Generator...7 BODY... 8 Attributen...8 KLEUR... 8 Kleuren definiëren...9 RGB-kleuren...9 BLOKELEMENTEN INLINE ELEMENTEN COMMENTAAR KOPPEN ALINEA S EEN NIEUWE REGEL HORIZONTALE LIJN ONDERLIJNING VET BLOCKQUOTE-ELEMENTEN PRE- ELEMENTEN SPECIALE TEKENS LIJSTEN UNORDERED LISTS <UL></UL> Keuze van opsommingsteken...14 GEORDENDE LIJSTEN <OL></OL> GENESTE LIJSTEN DEFINITIELIJSTEN HYPERLINKS Html 1

2 HREF NAME VOORBEELDEN Absolute verwijzing...15 Relatieve verwijzing...15 Link op dezelfde pagina (Bookmark)...15 Link naar adres...15 Linken vanaf een afbeelding...16 Pagina openen in nieuw venster...16 BASE ELEMENT ULR EN PATH S STIJLELEMENTEN VOOR LETTERTYPEN, KLEUREN EN ACHTERGRONDEN ELEMENT SELECTOR ATTRIBUUT SELECTOR SIJLEIGENSCHAPPEN VOOR LETTERTYPEN STIJLEIGENSCHAPPEN VOOR KLEUREN EN ACHTERGRONDEN AFBEELDINGEN, IMG- EN OBJECT-ELEMENTEN IMG OBJECT-ELEMENTEN TABELLEN DEFINIËREN VAN EEN TABEL Summary attribuut...19 CAPTION ELEMENT TABELRANDEN CELLEN SAMENVOEGEN UITLIJNEN CELINHOUD RIJEN GROEPEREN KOLOMMEN GROEPEREN EN DEFINIËREN FRAME EN RULES Frame...23 Rules...23 COMPATIBILITEIT OPMAAK VAN TABELLEN FORMULIEREN FORM Method...25 Action...26 Enctype...27 Voorbeelden...27 INPUT Teksvelden...28 Verborgen Informatie...28 Aankruisvakjes...28 Keuzerondjes...29 Bestandsselectie...29 Html 2

3 Knoppen...29 SELECT- EN OPTION-ELEMENT enkelvoudige keuzelijsten...30 Meervoudige Keuzelijsten...31 Optgroup-element...31 Textarea-element...32 FIELDSET LEGEND LABEL ID FOR FRAMES DOEL OPBOUWEN FAN EEN FRAME FRAMESET Cols...36 Rows...37 Border...37 Framespacing...37 FRAME Name...38 Frameborder...38 Noresize...39 Scrolling...39 Src...39 Target...39 Bordercolor...41 Marginheigth...41 Marginwidth...41 NOFRAMES IFRAME MEERDERE FRAMES TEGELIJK VERVANGEN CSS 45 CSS TOEVOEGEN AAN HTML EXTERNE STYLESHEET STYLE-ELEMENTEN IN HEAD INLINE STIJLEN STRUCTUUR ELEMENT SELECTOR ATTRIBUUT SELECTOR Class-attribuut...46 Id-attribuut...47 CONTEXT GEBONDEN SELECTORS PSEUDO-CLASSES PSEUDO-ELEMENTEN Gescheiden gebruik van first-line en firs-letter...48 Gemengd gebruik van firs-line en first-letter...49 Html 3

4 ACHTERGRONDEN EN KLEUREN STIJLEIGENSCHAPPEN VOOR KLEUREN EN ACHTERGRONDEN background-image...50 background-repeat...50 background-attachment...51 background-position...51 BOXOPMAAKMODEL BOX Margin...54 Border...54 Border style...54 border-color...56 border-top-width, border-right-width, border-bottom-width en border-left-width...56 border-width...57 border-top, border-right, border-bottom en border-left...57 border...58 Samenvatting borders...58 Padding...58 Width en height...59 width...59 Height...60 Eenheden...60 Relatieve...60 absolute...60 LETTERTYPES EN TEKST FONT LETTER-SPACING WORD-SPACING TEXT-INDENT TEXT-ALIGN TEXT-DECORATION TEXT-TRANSFORM LINE-HEIGHT VERTICAL-ALIGN LIJSTEN IN CSS LIST-STYLE-TYPE LIST-STYLE-IMAGE LIST-STYLE-POSITION LIST-STYLE TABELLEN IN CSS UITLIJNING horizontaal...67 verticaal...67 BREEDTE: WIDTH CELL SPACING: Html 4

5 CELL PADDING ZWAVENDE ELEMENTEN FLOAT CLEAR POSITIONEREN POSITION Absolute...72 Relative...72 Static...73 fixed...73 TOP EN BOTTOM LEFT EN RIGHT Z-INDEX OVERFLOW Visible...79 Hidden...79 Auto...79 Scroll...79 Clip...81 <vorm>...81 auto...81 Html 5

6 HTML Voor meer info ga naar (eng) of ga naar Tags Iedere html pagina bestaat uit een aantal tags. Tags zijn namen van elementen die tussen < en > geschreven worden. Ze hebben een begintag een zekere inhoud en een meestal niet verplichte eindtag. Elk element heeft eigen unieke attributen. De waarde van deze attributen wordt tussen aanhalingstekens gezet. Elke eintag moet een slash / hebben. Niet elk element heeft een inhoud of een eindtag. Het is voor elementen niet van belang of ze in hoofd- of kleine letters zijn geschreven. Dus TITLE, title of TitLe is allemaal gelijk. <begintag attributen>inhoud</eindtag> Een html als volgt opgebouwd <Indien men een DTD gebruikt moet deze hier staan.> <html> <head> <titel>dit komst in de titelbalk</titel> </head> <body> </body> </html> DOCTYPE declaratie Het geeft aan, aan welke HTML-versie het document voldoet. Het moet vooraan in een html document staan. Het is informatie voor de browser. De doctype declaratie is nodig indien we het document door een html validator willen laten controleren. Document type definition (DTD) Het is verplicht in XTML De html 4.01 bevat 3 DTD Str ict dtd Alle elementen en attributen behalve de afgekeurde en diegene die betrekking hebben op frames. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > Transitional dtd Alle elementen en attributen (ook de afgekeurde), behalve diegene die betrekking hebben op frames (m.a.w. gebruik de vorige versie zonder frames) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > Frame s dtd Alles uit html 4.01 traditional + diegene die betrekking hebben op frames. Dit is de meest vrije DTD. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > Html 6

7 Head De head kan volgende elementen bevatten die informatie over het document definiëren. TITLE BASE, META, LINK, STYLE, SCRIPT De TITLE tag <titel>dit komst in de titelbalk</titel> Het wordt gebruikt in bladwijzers. Veel zoekmachines gebruiken de titel om pagina s te karakteriseren. De title tag kent geen attributen. De META tag De META tag wordt in de Head van het document gestoken. Merk op dat deze tag GEEN EINDTAG. Aan de hand van deze tag kunnen we lgemene informatie over de webpagina weergeven o.a. De auteur specifiëren of trefwoorden invoegen voor zoekmachines.(voor http-equiv zie sites of boek) Name- en Content-attribute n. AUTEUR <head> <titel>dit komst in de titelbalk</titel> <meta name= author content= plaats hier je naam > </head> TREFWOORDEN VOOR ZOEKMACHINES <head> <titel>dit komst in de titelbalk</titel> <meta name= keywords content= lijst van sleutelwoorden gescheiden door comma s > </head> GENERATOR <head> <titel>dit komst in de titelbalk</titel> <meta name= generator content= html toolkit > </head> Html 7

8 Body In de body wordt alles gezet dat op het scherm moet komen. Attributen Attributen zijn uniek voor iedere tag. Hun waarde wordt altijd tussen aanhalingstekens gezet. Er kunnen ook meerdere attributen in een tag staan. <body bgcolor= yellow > Verandert de kleur van de achtergrond. (kleuren kunnen op verschillende manieren worden weergegeven zie verder) <body BACKGROUND= > Je kan als achtergrond ook een foto selecteren. <body TEXT="#FFFFFF" > <body LINK="#FFCC00"> Geeft een andere kleur voor de tekst Een nog niet gebruikte link krijgt een andere kleur <body VLINK="#3366FF"> Een gebruikte link krijgt deze kleur bv <body TEXT="#FFFFFF" BGCOLOR="#000080" LINK="#FFCC00" VLINK="#3366FF"> Kleur Sommige attrinuten geven een kleurwijziging. Welke kleur dat is staat tussen de aanhalingstekens. Er zijn 2 mogelijkheden om een kleur voor te stellen. Je kan de naam van de kleur geven of je kan zijn hexadecimale code invoeren. Wanneer we de naam kiezen, hebben we maar keuze tussen 16 kleuren (zie p 7). We hervallen dus vrij snel in de hexadecimale notatie. (zie p 7 en p 636). Html 8

9 Kleur en definiëren Door een kleurenmonitor worden kleuren weergegeven als een bepaalde combinatie van rood, groen en blauw. Daarom ligt het voor de hand ook in HTML en CSS kleuren vast te leggen als een mix van deze basiskleuren. Er zijn verschillende manieren om de intensiteit van elk van de kleuren rood, groen en blauw vast te leggen. Het kan door middel van percentages, numerieke getallen en hexadecimale notatie. Behalve als een RGB-kleur bieden HTML en CSS ook de mogelijkheid een kleur te definiëren door middel van een kleurnaam. Een bijzondere vorm hiervan is het gebruik van systeemkleuren. De verschillende manieren worden hierna beschreven. Vervolgens wordt ingegaan op het veilig kleurenpalet, dat de kleuren bevat welke door elke browser op elk systeem kunnen worden weergegeven. RGB-kleuren De eerste manier om een RGB-kleur te definiëren is door de intensiteit van elk van de basiskleuren rood, groen en blauw in een percentage uit te drukken. De waarde van de kleur heeft hierbij de volgende vorm: rgb(rood%,groen%,blauw%) Elke basiskleur heeft een waarde tussen 0% en 100%. Bij 0% ontbreekt een kleur, bij 100% is de intensiteit maximaal. Indien een waarde hoger dan 100% wordt opgenomen, wordt deze terug gebracht tot 100%. Decimale waarden (bijvoorbeeld 45.8%) zijn toegestaan, maar het gebruik ervan wordt afgeraden, omdat een browser die geen decimalen ondersteunt de waarde verkeerd kan interpreteren. Wanneer de intensiteit van de drie basiskleuren gelijk is, wordt als resultaat een grijstint weergegeven. Ter illustratie enkele voorbeelden: rgb(100%,0%,0%): rood rgb(100%,100%,100%): wit rgb(0%,0%,0%): zwart rgb(13%,75%,60%): een zeegroene kleur Behalve als percentage kan de intensiteit van elk van de basiskleuren rood, groen en blauw ook uitgedrukt worden in een numeriek getal in de range van 0 t/m 255. Daarbij komt 0 overeen met 0% en 255 met 100%. De waarde van de kleur heeft de volgende vorm: rgb(getal_rood,getal_groen,getal_blauw) Bij het getal 0 ontbreekt een kleur, bij 255 is de intensiteit maximaal. Indien een waarde hoger dan 255 wordt opgenomen, wordt deze terug gebracht tot 255. Decimale waarden zijn niet toegestaan. Als voorbeeld de kleuren die al eerder genoemd zijn: rgb(255,0,0): rgb(255,255,255): rgb(0,0,0): rgb(32,178,154): rood wit zwart een zeegroene kleur De numerieke getallen kunnen ook in hexadecimale notatie opgenomen worden. Hierbij wordt de intensiteit van elke kleur vastgelegd door middel van een paar van twee karakters uit de range 0 t/m 9 en A t/m F. Hierbij staan de getallen voor zichzelf, A voor 10, B voor 11, C voor 12, D voor 13, E voor 14 en F voor 15. Het verband tussen het numerieke getal en de hexadecimale notatie is als volgt: het eerste karakter geeft Html 9

10 aan hoeveel keer het numerieke getal door 16 gedeeld kan worden, het tweede karakter is het restgetal (het numerieke getal minus het eerste karakter maal 16). Als voorbeeld de zeegroene kleur met de numerieke getallen 32, 178 en 151: numeriek 32 = 2 x = 20 hexadecimaal numeriek 178 = 11 x = B2 hexadecimaal numeriek 154 = 9 x = 9A hexadecimaal De vorm waarin de kleur in hexadecimale waarden wordt opgenomen wijkt duidelijk af van die, waarin gebruik gemaakt wordt van percentages of numerieke getallen. In dit geval is het een hekje gevolgd door de drie paren karakters, zonder komma's er tussen en haakjes er omheen: #RRGGBB Ter illustratie weer eerder genoemde kleuren: #FF0000: rood #FFFFFF: wit #000000: zwart #20B29A: een zeegroene kleur Wanneer in de hexadecimale waarde elk paar bestaat uit twee dezelfde karakters, kan deze waarde ook op een verkorte wijze worden opgenomen: #RGB Als hiervan gebruik gemaakt wordt, zal de browser bij de interpretatie elk karakter dupliceren. Van de eerdere voorbeelden kunnen alleen de eerste drie in verkorte vorm worden opgenomen: #FF0000 = #F00 #FFFFFF = #FFF # = #000 Er zijn ook nog 216 veilige kleuren Html 10

11 Blokelementen Blokelementen zijn elementen die voorafgegaan en gevolgd worden door de overgang naar een nieuwe regel. Bv: P, OL, UL, DIV, Inline elementen Zijn elementen die dezelfde regel kunnen delen met andere elementen. Ze kunnen echter zelf geen inline elementen bevatten en ook geen blok elementen. Bv: A, B, I, SPAN, Html 11

12 Commentaar Commentaar of opmerkingen kunnen worden toegevoegd op volgende manier. Dit wordt niet gezien op het scherm. Dit mag overal in het document gezet worden. <!-- Hier komt je opmerking --> Koppen De koppen woreen genummerd van 1 (hoogste) tot 6 (laagste). <hx>.</hx> De opmaak ervan wordt door de browser zelf bepaald. We kunnen deze later zelf veranderen via style sheets (CSS en zeker niet in html). De koppen worden natuurlijk in de body gebruikt. <h1>dit is de titel met de hoogste prioriteit</h1> <h6>dit is de titel met de laagste prioriteit</h6> Alinea s Een alinea of paragraaf begint standaard altijd op een nieuwe regel en er is een grotere tussenafstand. De eindtag is niet verplicht. Omdat het einde van het element wordt afgebakend door het begin van het volgende element. <p>hier komt de tekst te staan die je in je paragraaf zou willen.</p> Een nieuwe regel Deze tag heeft geen inhoud en ook geen eidtag. Het zorgt ervoor dat je naar de volgende regel gaat. Het kan in een kop, in een paragraaf of los in de body van het html document worden gestoken. Hier is een beetje tekst<br>deze tekst staat op de volgende regel in het browservenster Horizontale lijn Met deze tag wordt er een horizontale lijn over heel het scherm getrokken en ga je al nar de volgende lijn. Deze tag heeft ook geen inhoud en ook geen eindtag. Ze moet ook in de body staan. Dit is tekst die boven de lijn staat<hr>dit is tekst die onder de lijn begint Onderlijning Deze tag zorgt ervoor dat hetgeen dat volgt tot aan de eintag onderlijnd is. We kunnen deze tag overal in de body steken. Gebruik wordt sterk afgeraden omdat de opmaak via CSS wordt gedaan. <u>deze tekst is onderlijnd</u> Vet Alles wat tussen begin- en eindtag komt te staan wordt vetjes afgedrukt. Het mag ook overal in de body gebruikt worden. Het gebruik ervan wordt getolereerd. <b>wat hier staat wordt vet afgedrukt.</b> Html 12

13 BLOCKQUOTE-elementen Element op blok niveau. Wordt gebruikt voor lange citaten. Het wordt ingesprongen weergegeven in de browser. We mogen het niet gebruiken voor tekst te laten inspringenenenkel voor lange citaten. Met het attribuut CITE kan de URL van de bron van het citaat worden weergegeven. (momenteel doet de browser echter nietts met dit attribuut.) Het wordt bijna niet meer gebruikt. PRE- elementen Staat voor preformated text. Het geeft de spaties en regelovergangen weer zoals zoals ze in het document staan. Deze tekst in PRE staat in monos-paced lettertype. Het is zeer handig om programacode weer te geven op een webpagina. Speciale tekens Ze beginnen steeds met een ampersand (&) en eindigen altijd met een punt-komma (;). Er zijn 3 verschillende notaties. Tekstnotatie (&entiteitnaam;), decimale notatie (&#decnr;) en de hexadecimale notatie (&#hexnr;). Voor een lijst overzicht zie de sites of ook p177 e.v. van het handboek teken naam Dec notatie Tekst " dubbel aanhalingsteken " " & ampersand & & < kleiner dan < < > groter dan > > Spatie (hex) Euroteken Vb <html> <head> <title>opbouw van een HTML document</title> </head> <body><pre> Een voorbeeld van een eenvoudig HTML-document: <!DOCTYPE HTML PUBLIC &quot-//w3c//dtd HTML 4.0 TRANSITIONAL//EN"> <HTML> <HEAD> <TITLE>Mijn eerste HTML document</title> </HEAD> <BODY> <P>Hallo iedereen! </BODY> </HTML> <hr> Laatste wijziging... </pre> </body> </html> Html 13

14 Lijsten Unordered lists <ul></ul> Dit zijn lijsten die gebruik maken van een opsommingsteken. <li> staat voor list item. Deze eindtag is optioneel. De eindtag </ul> is ook optioneel maar het wordt sterk aangeraden om deze toch te gebruiken. Bv <ul> <li>konijnenslaatje met Belgische kaas</li> <li>geflambeerde biefstuk met groene pepers</li> <li>honingéclairs</li> </ul> K euze van opsommingsteke n Je kan het soort markering aanpassen m.b.v. het TYPE attribuut. Maar het gebruik ervan wordt afgeraden. Je mag ze ook bij <li> zetten maar dit wordt ook afgeraden. Om ze dus op een correcte manier te wijzigen moeten we dus gebruik maken van CSS <ul type= waarde > </ul> Mogelijke waarden van het attribuut type zijn: disc: De markering is een dicht rondje circle: De markering is een open rondje square: Markering is een vierkant Geordende lijsten <ol></ol> Ol staat voor ordered list. Ieder item uit deze lijst wordt dan voorafgegaan door een nummer. Ook hier is het mogeljk om de soort markering aan te passen met het attribuut TYPE. Je kan het ook bij <li> zetten. Het gebruik van dit attribuut wordt afgeraden en de oplossing is te zoeken in Css. <ol type= waarde > </ol> Bv <ol> <li>konijnenslaatje met Belgische kaas</li> <li>geflambeerde biefstuk met groene pepers</li> <li>honingéclairs</li> </ol> Mogelijke waarden van het attribuut type zijn: 1: de getallen 1, 2, 3, a: kleine letters a, b, c, A: hoofdletters A, B,C, i: de kleine romeinse letters I, ii, iii, I: (hoofdletter i) De grote romeinse getallen I, II, III, Geneste lijsten Het is ook mogelijk om een lijst in een andere lijst te zetten en dan zijn de eindtags wel belangrijk. Html 14

15 Definitielijsten Het dl element definieert het begin en het einde van een definitielijst waar één of meerdere items (met hun beschrijving) staan. Ieder item komt op een nieuwe lijn en zo ook hun beschrijving. <dl> <dt> term1</dt> <dd>beschrijving (description) van deze term</dd> <dt>term2</dt> <dd>beschrijving van term2</dd> </dl> Hyperlinks Met het a element wordt een anker gedefinieerd. Aan het element a wordt één van de volgende attributen gekoppeld: href of name Href <a href= > </a> Dit zorgt voor een hyperlink naar: Aan andere website (ABSOLUTE verwijzing) Pagina binnen de site (RELATIEVE verwijzing) Plaats binnen de pagina (BOOKMARK) Bestanden (beeld, video, geluid, ) adres name <a name= > </a> Een bestemming waarnaar andere hyperlinks kunnen verwijzen. Wordt meestal gebruikt om binnen een pagina links te gebruiken (bookmarks) Voorbeelden Absolut e ver wijzing <a href= >google</a> de is verplicht. Relatiev e e ve rwijzing binnen eenzelfde map: <a href= opdrachten.html >opdrachten</a> Naar andere mappen: <a href= inernet/oef/opdrachten.html >opdrachten</a> Lin k op o dezelfd e pagina (Bookma rk ) <a href= #onderwerp2 >ga naar onderwerp2</a> <a name= onderwerp2 >bijkomende info ond 2</a> Lin k naa n r adre s <a href= mailto:info@hogent.be >mailke sturen</a> Html 15

16 Linke n vanaf e en afbe elding <a href= ><img src= google_afbeelding.gif ></a> Pagi na ope nen in nieuw venste r. We gebruiken hiervoor het attribuut target= _blank <a href= target= _blank > </a> Zie ook frames voor andere waarden BASE element Indien er vele links naar een andere map op de server verwijzen dan kan men gebruik maken van het element BASE. Je zet dit in de head van het html document. <head> <title>site van den Oli</title> <base href=" </head> <body> <a href="bbme/java/h2_oef1b.java">h2 oef 1</a> </body> De link verwijst dan eigenlijk naar BBME/Java/H2_oef1b.java ULR en path s Verwijs je niet naar de host, maar naar een directory op de server, dan beëindig je de URI met een slash: <A HREF=" Handleiding HTML</A> In de praktijk wil je vaak een verwijzing naar een specifiek bestand in een bepaalde directory van een server opnemen. Bijvoorbeeld: <A HREF=" Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het path op te nemen. Daarbij zijn er de volgende mogelijkheden: staat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen: <A HREF="frames.htm">Frames</A> staat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand: <A HREF="css/cssbegin.htm">Cascading Style Sheets</A> bevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op: <A HREF="../start.htm">Inhoud</A> Html 16

17 een combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory op hetzelfde niveau: <A HREF="../element/frameset.htm">FRAMESET</A> verwijs je niet naar een bestand, maar naar een directory, dan beëindig je de URI met een slash: <A HREF="css/">Begin</A> Onderbreek een hyperlink, ook al is de URI nog zo lang, niet met harde returns (met Enter naar de volgende regel gaan). Zo'n harde return kan door de browser opgevat worden als spatie die ook onderstreept wordt. Bijvoorbeeld: <A HREF="frames.htm">Frames </A> wordt door de browser weergegeven als: Frames en niet zoals bedoeld als Frames. Het A element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld P). Stijlelementen voor lettertypen, kleuren en achtergronden Je plaatst deze elementen in de head en ze zijn geldig voor heel het html document. <head> <style type= text/css > <!-- hier worden de stijleigenschappen meegegeven. --> </style> </head> stijlregel: selector {stijldeclaratie Selector bepaald het deel waarop de stijl betrekking heeft. Er zijn 5 soorten: Elementen Attributen Contextgebonden Pseudo-classes Pseudo-elementen Element selector Elk element (tag) kan als selector gebruikt worden. Bv: h1{color: red; of div{. Attribuut selector Attributen worden aan een bepaalde tag gekoppeld door het class of id attribuut..grootletters{font-size: 24pt Grootletters is een zelfgekozen naam. Merk op dat er een punt staat voor de zelfgekozen naam. Het attribuut kan nu als volgt gebruikt worden in het document. <p class= grootletters > </p> De attribuut-selector kan eigenlijk nog op een andere manier gebruikt worden zie later. Html 17

18 Sijleigenschappen voor lettertypen font-family: bepaalt het lettertype font variant: wordt niet besproken omdat het bijna niet meer gebruikt wordt font style: normal italic oblique (zie handleiding html) font-weight: bepaalt de dikte van de letters voor mogelijke waarden zie handleiding font-size: bepaald de grootte van de letters font: hier worden alle voorafgaande gecombineerd. Stijleigenschappen voor kleuren en achtergronden color: voorgrondkleur (kleur van de letters) background-color: achtergrondkleur background-image: de achtergrond is een afbeelding. Je moet dan de url van deze afbeelding geven. background-repeat: herhaling van het beeld over de hele pagina of enkel horizontaal of vertikaal background-attachment: beeld meescrollen of niet background-position: de plaats van de afbeelding vastleggen background: combinatie van al de vorige Afbeeldingen, IMG- en object-elementen Afbeeldingen worden gebruikt om een site aantrekkelijker te maken. De meest gebruikte grafische formaten op het internet zijn: o GIF: (max 256 kleuren) wordt gebruikt indien er weinig kleuren zijn. bv: illustraties, knoppen, cartoons, o JPEG: (max 16 miljoen kleuren) wordt gebruikt voor foto s of afbeeldingen met een groot aantal kleuren. o PNG: alternatief voor GIF Deze formaten ondersteunen compressie IMG Img wordt gebruikt om afbeeldingen in te voegen en is een inline element. De belangrijkste attributen zijn: o src: (source) werwijst naar de afbeelding o alt: wanneer we met de muis op de tekening komen zien we deze tekst. Dit attrinuut is VERPLICHT het wordt onderandere gebruikt door text-only browsers en door speech synthesizers. In I.E. wordt de waarde van het attribuut als tooltip weergegeven. o width, height: deze attributen worden bij voorkeur opgegeven. Ze kunnen gebruikt worden om afbeelding ui te rekken of te vergroten. Object-elementen Het biedt een algemene ondersteuning voor multimediatypes. Het moet elementen als img, applet, embed gaan vervangen omdat deze geen oplossing boden voor het invoegen van nieuwe mediatypes. En het wordt nu gebruikt voor geluiden, flash movies en videoformaten. Voor meer info zie de html handleiding. Html 18

19 Tabellen Ze zijn te vergelijken met de tabellen in Microsoft word. Een tabel (meestal zonde randen) wordt ook dikwijls gebruikt voor het plaatsen van tekst, afbeeldingen, op een webpagina. In de toekomst moet deze functie overgenomen worden door CSS. Definiëren van een tabel De tags nodig om een tabel te definiëren zijn o <table> o <caption> o <tr> table row om rij te definiëren o <th> table header cell om header cellen te def. Deze zijn altijd vet en gecentreerd. o <td> table data cell. Deze def ook cellen. Opm: de eintag is niet verplicht voor tr, th en td Summary attribuu t Attribuut kan gebruikt worden voor een korte samenvatting. Caption element Dit wordt gebruikt om bijschriften te maken bij de tabellen. De caption tag MOET onmiddellijk na ede table tag komen. Opm: Zowel summary als caption kunnen gebruikt worden door spraaksynthesizers. bv <table border="1" width="400" summary="hier komt een korte samenvatting"> <caption>caption MOET onmiddellijk achter table tag en is voor bijschriften</caption> <!-- indien 0 dan is er geen rand --> <tr><th></th><th>small</th><th>medium</th><th>large</th></tr> <tr align="right"><td align="center"><b>t shirts</b></td><td> 8</td><td> 9</td><td> 10</td>< /tr> <tr align="right"><td align="center"><b>broeken</b></td><td> 80</td><td> 90</td><td > 100</td></tr> </table> Dit geeft als resultaat: Html 19

20 Tabelranden De dikte van de rand aan de buitenzijde van een tabel wordt gecontroleerd met het BORDER attribuut van het TABLE element. Met de het attribuut BORDER="0" voor het TABLE element wordt de tabel zonder randen weergegeven <TABLE BORDER="10"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 a2 b1 b2 De dikte van de lijnen tussen de rijen en de kolommen van een tabel wordt gecontroleerd met het CELLSPACING attribuut van het TABLE element. <TABLE BORDER="1" CELLSPACING="10"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 a2 b1 b2 Het CELLPADDING attribuut van het TABLE element bepaalt de afstand tussen de rand van een cel en de inhoud. <TABLE BORDER="1" CELLPADDING="10"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 a2 b1 b2 Html 20

21 cellen samenvoegen Om cellen samen te voegen kunnen we gebruik maken van de attributen colspan en rowspan van de elementen th en td. Je mag geen overlappende cellen definiëren. Er worden achteraan lege cellen toegevoegd. Gebruik eventueel een non-breaking space. colspan wordt gebruikt om verschillende kolommen te overspannen rowspan wordt gebruikt om meerdere rijen samen te nemen. <table border="1" width="500"> <tr align="center"><td rowspan="2"><b>hogeschool<br>gent</b></td> <td><b>bbme</b></td><td><b>bmer</b></td> <td rowspan="2"><b>hogeschool<br>gent</b></td></tr> <tr align="center"><td colspan="2"><b>departementen bedrijfskunde</b></td></tr> <tr><td colspan="4">hartelijk welkom op onze website. Bla bla...</td></tr> </table> heeft als resultaat: Uitlijnen celinhoud Met de attributen ALIGN en VALIGN van het TD (of TH) element bepaal je hoe de inhoud van een cel in respectievelijk horizontale en verticale richting uitgelijnd moet worden. <TABLE BORDER="1"> <TR> <TD ALIGN="left" VALIGN="top" WIDTH="120" HEIGHT="60">a1</TD> <TD ALIGN="right" VALIGN="bottom" WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD ALIGN="center">b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 a2 b1 b2 Html 21

22 Rijen groeperen Rijen kunnen gegroepeerd worden in head foot en body. Indien je de volgende elementen gebruikt, moeten ze in deze volgorde voorkomen. o thead o tfoot o tbody bv <TABLE BORDER="1"> <THEAD ALIGN="center" STYLE="font-weight: bold; background: #C0C0C0;"> <TR> <TD HEIGHT="40" WIDTH="90">titel 1</TD> <TD WIDTH="90">titel 2</TD> <TD WIDTH="90">titel 3</TD> <TD WIDTH="90">titel 4</TD> </TR> </THEAD> <TBODY ALIGN="center"> <TR> <TD HEIGHT="40">a1</TD> <TD>a2</TD> <TD>a3</TD> <TD>a4</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> <TD>b3</TD> <TD>b4</TD> </TR> </TBODY> </TABLE> heeft als resultaat Kolommen groeperen en definiëren Met behulp van col en colgroup kan je in één keer kenmerken instellen van een of meer kolommen van de tabel. colgroup voegt ook extra structuur toe aan de tabel (zie ook rules-attribuut). <colgroup span="10" width="15"></colgroup> Dit geeft 10 kolommen van elk 15 pixels breed. <colgroup> <col width="15"> <col width="15"> <col width="15">... </colgroup> Dit resulteert ook in 10 kolommen van 15 pix breed maar de schrijfwijze is veel langer. Html 22

23 FRAME en RULES Dit zijn attributen van het table-element. het FRAME attribuut bepaalt welke kant(en) van de buitenrand zichtbaar zijn. Het RULES attribuut bepaald welke welke lijnen tussen de cellen zichtbaar zijn. Het BORDER attribuut bepaalt de dikte (uitgedrukt in pixels) van de buitenrand van de tabel. Standaard wordt er geen dikte meegegeven. Frame Mogelijke waarde voor dit attribuut zijn: void: geen randen (dit is de standaardwaarde) above: alleen de rand aan de bovenkant below: alleen de rand aan de onderkant hsides: alleen de randen aan de boven en -onderkant lhs: alleen de rand aan de linkerkant rhs: alleen de rand aan de rechterkant vsides: alleen de randen aan de linker- en rechterkant border: de randen aan alle vier zijden Ru les Mogelijke waarden voor dit attribuut zijn: none: geen lijnen (dit is de standaardwaarde) groups: alleen de lijnen tussen rijgroepen (zie THEAD, TFOOT en TBODY) en kolomgroepen (zie COLGROUP en COL) rows: alleen de lijnen tussen de rijen cols: alleen de lijnen tussen de kolommen all: alle lijnen tussen de rijen en kolommen. Compatibiliteit Border= 0 => frame= void rules= none Border<> 0 => frame= border rules= all De waarde border in de start tag van het table element moet worden geïnterpreteerd als frame= border. Dit impliceert rules= all en een default-waarde verschillend van nul voor het border attribuut. Opmaak van tabellen Voor de opmaak van tabellen kan men reeds gebruik maken van CSS <style type="text/css"> <!-- caption { color: blue --> </style> Html 23

24 Voorbeeld 1 <TABLE BORDER="1" FRAME="hsides" RULES="groups"> <CAPTION><B>Ondersteuning door browser(versie)</b></caption> <COLGROUP WIDTH="120"></COLGROUP> <COLGROUP SPAN="3" WIDTH="80"></COLGROUP> <THEAD> <TR> <TH ALIGN="left" HEIGHT="40" WIDTH="120"></TH> <TH WIDTH="80">Microsoft Internet Explorer</TH> <TH WIDTH="80">Netscape Navigator</TH> <TH WIDTH="80">Opera</TH> </TR> </THEAD> <TBODY> <TR> <TH ALIGN="left" HEIGHT="40">Inline frames</th> <TD ALIGN="center">3.0</TD> <TD ALIGN="center">6.0</TD> <TD ALIGN="center">4.0</TD> </TR> <TR> <TH ALIGN="left" HEIGHT="40">Nieuwe mogelijkheden tabellen</th> <TD ALIGN="center">3.0</TD> <TD ALIGN="center">6.0</TD> <TD ALIGN="center">-</TD> </TR> <TR> <TH ALIGN="left" HEIGHT="40">Cascading style sheets</th> <TD ALIGN="center">3.0</TD> <TD ALIGN="center">4.0</TD> <TD ALIGN="center">3.5</TD> </TR> </TBODY> </TABLE> Heeft als resultaat Html 24

25 Formulieren Het doel van formulieren is het inbrengen en versturen van gegevens: aanmelden als abonnee enquête invullen Het plaatsen van een bestelling De belangrijkste elementen bij het maken van formulieren zijn FORM, INPUT, SELECT, OPTION en TEXTAREA. De onderlijnde worden ook wel controls genoemd (zie verder) FORM Het FORM element definieert het begin en einde van een formulier. Met de attributen METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen. Metho d Mogelijke waarden zijn: post get Welke waarde moet worden gebruikt, hangt af van het script of programma op de server dat de informatie uit het formulier moet afhandelen. Bij de waarde "get" wordt alle informatie (per control een combinatie van naam en waarde) aan de via het ACTION attribuut gespecificeerde URI toegevoegd. Het resulaat, dat in één keer naar de server wordt gestuurd, heeft de volgende vorm: URI?naam=waarde&naam=waarde De waarde "get" kan gebruikt worden als de verwerking van de informatie geen neveneffecten heeft. Dat is bijvoorbeeld het geval als het formulier gebruikt wordt om uitsluitend gegevens uit een database te halen (zoals bij zoekmachines). De informatie uit het formulier mag bij de waarde "get" alleen ASCII karakters bevatten (dus bijvoorbeeld geen é of ï). Bij de waarde "post" wordt de informatie uit het formulier opgenomen in de body van een bericht, dat verzonden wordt naar de URI welke via het ACTION attribuut is gespecificeerd. Deze mogelijkheid wordt gebruikt als de verwerking van de informatie neveneffecten heeft. Bijvoorbeeld als de informatie een database moet wijzigen, of eraan moet worden toegevoegd. De informatie uit het formulier mag bij de waarde "post" ook non-ascii karakters bevatten. De standaardwaarde, welke wordt aangehouden als het METHOD attribuut niet is opgenomen, is "get". Html 25

26 Ac tion Zie ook het voorbeeld. Maar meestal als volgt opgeboud: action= action= script provider andere scripts - Je kan ook een andere pagina openen en dan moet je enkel de url ingeven en moet er geen method zijn. Met het ACTION attribuut wordt aangegeven waar de informatie uit het formulier heen gestuurd moet worden. De opbouw is: <FORM ACTION="URI"></FORM> De URI (Uniform Resource Identifier) heeft een opbouw, welke afhangt van de methode die gebruikt wordt om de informatie te verzenden. De volgende mogelijkheden zijn beschikbaar: http (HyperText Transfer Protocol): de bestemming is meestal een CGI-script of een programma dat de informatie uit het formulier moet verwerken mailto: de informatie van het formulier wordt zonder tussenkomst van een CGI-script of een programma direct naar een op te geven adres gestuurd. Een http-uri heeft de volgende opbouw: Host specificeert het adres van de server, waarop zich het CGI-script of programma bevindt. Het kan een IPadres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties). Path geeft aan hoe het CGI-script of programma op de server gevonden kan worden: in welke directory en onder welke bestandsnaam. Het is niet altijd nodig een complete URI op te nemen. Als het gevraagde bestand zich op de lokale server bevindt, dan volstaat de volgende URI: path Een mailto-uri wordt als volgt opgebouwd: mailto: adres Sommige browsers ondersteunen parameters, waarmee onder meer het onderwerp (subject) van het e- mailbericht kan worden vastgelegd: mailto: adres?subject=onderwerp Indien gebruik gemaakt wordt van een mailto-uri, moet het METHOD attribuut met de waarde "post" worden opgenomen. Html 26

27 Enctyp e Indien de waarde van het METHOD attribuut "post" is, specificeert het ENCTYPE attribuut het Content Type of Internet Media Type (MIME), dat gebruikt moet worden bij het coderen van de informatie van het formulier bij het verzenden. De opbouw is: <FORM METHOD="post" ENCTYPE="waarde"..></FORM> De standaardwaarde is "application/x-www-form-urlencoded". Wanneer het TYPE attribuut van het INPUT element met de waarde "file" gebruikt wordt, is de waarde voor het ENCTYPE attribuut "multipart/form-data". De informatie uit het formulier wordt in het bericht op een weinig gebruiksvriendelijke wijze weergegeven: als één lange aaneengesloten regel tekst (waarbij elke spatie vervangen is door een + of door %20), of in de vorm van een attachment. Dat kan worden voorkomen door het ENCTYPE attribuut met de waarde "text/plain" aan het FORM element toe te voegen. Bij gebruik van een mailto-uri in het ACTION attribuut is de waarde dus "text/plain". In een URI moeten bepaalde karakters in gecodeerde vorm worden opgenomen. Zie voor een toelichting het onderdeel Hyperlinks. ( Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen, lijsten en koppen) een aantal onderdelen, welke controls worden genoemd. Voorbeelden Via versturen <form action= mailto:stafke@hhotmail.com?subject=test formulieren method= post enctype= text/plain > <!-- Hiertussen staan de controls --> </form> Via script versturen bv Pandora <form action= /cgi-bin/form.cgi method= post > <!-- Hiertussen staan de controls --> </form> INPUT Het INPUT element wordt onder andere gebruikt voor het maken van de volgende controls: tekstvelden, waarin de gebruiker op één regel tekst kan invoeren (gewone tekst, of een wachtwoord) verborgen informatie, welke voor de gebruiker niet zichtbaar is, maar wel met de overige informatie uit het formulier naar de server gestuurd wordt) aankruisvakjes (checkboxen), waarvan de gebruiker er één of meer kan selecteren keuzerondjes (radio buttons), waarbij de gebruiker één keuze moet maken uit meerdere mogelijkheden bestandsselectie, waarbij de gebruiker bestanden kan selecteren welke met het formulier meegestuurd moeten worden knoppen voor verzenden (submit) en terug naar de beginwaarden van het formulier (reset) Html 27

28 Teksvelden waarin de gebruiker op één regel tekst kan invoeren (gewone tekst, of een wachtwoord) vb gewone tekst <p>vul hier je naam in:<input type= text name= NAAM value= (naam aub) size= 20 maxlength= 30 ></p> het resultaat is dan: vb paswoord <p>geef paswoord<input type= password name= PASWOORD size= 8 maxlength= 8 ></p> het resultaat is dan: Verbo rgen Infor matie welke voor de gebruiker niet zichtbaar is, maar wel met de overige informatie uit het formulier naar de server gestuurd wordt) <input type= hidden name= inhoud value= voorbeeld van een formulier > Aankruisvak jes (checkboxen), waarvan de gebruiker er één of meer kan selecteren Kruis aan welke vruchten je lekker vind<br> <INPUT TYPE="checkbox" NAME="fruit" VALUE="appel">appels <INPUT TYPE="checkbox" NAME="fruit" VALUE="peer">peren <INPUT TYPE="checkbox" NAME="fruit" VALUE="banaan">bananen Dit heeft als resultaat: Om het vakje te kunnen selecteren door op de tekst te drukken zie verder label, id, for. Html 28

29 Keuzeron djes (radio buttons), waarbij de gebruiker één keuze moet maken uit meerdere mogelijkheden <p>geef je voorkeurbrowser in</p> <p><input type="radio" name="browser" value="opera">opera</p> <p><input type="radio" name="browser" value="msie">internet explorer</p> <p><input type="radio" name="browser" value="nn">netscape</p> Heeft als resultaat: Om iets te selecteren moet je op het bolletje zelf klikken en niet op tekst die volgt. Om te kunnen selecteren via de tekst zie verder bij label, id en for Bestandsselectiee waarbij de gebruiker bestanden kan selecteren welke met het formulier meegestuurd moeten worden. Dit wordt door weinig servers ondersteunt. Als je de mogelijkheid wilt bieden bestanden mee te sturen, moet je aan het FORM element in ieder geval het METHOD attribuut met de waarde "post" en het ENCTYPE attribuut met de waarde "multipart/form-data" toevoegen. Het TYPE attribuut van het INPUT element met de waarde "file" zorgt ervoor dat er een tekstveld en een knop in het formulier te zien zijn <FORM METHOD="post" ACTION="bestemming" ENCTYPE="multipart/form-data"> <INPUT TYPE="file" NAME="upload"></FORM> geeft: Knoppen voor verzenden (submit) en terug naar de beginwaarden van het formulier (reset) Gewone knoppen De meest gebruikte knoppen zijn die, welke je maakt met het INPUT element. Door het TYPE attribuut met de waarde "submit" aan het INPUT element toe te voegen, maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Het TYPE attribuut met de waarde "reset" definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen. Met het VALUE attribuut bepaal je het opschrift van de knoppen. <INPUT TYPE="reset" VALUE="Beginwaarden"><INPUT TYPE="submit" VALUE="Verzenden"> Geeft dan: Html 29

30 Afbeelding als knop In plaats van een knop kan ook een afbeelding gebruikt worden om de informatie uit het formulier te verzenden. Je voegt daarvoor aan het INPUT element het TYPE attribuut met de waarde "image" toe en bovendien de attributen SRC en ALT. Het SRC attribuut bepaalt welke afbeelding moet worden opgenomen, het ALT attribuut definieert een alternatieve tekst voor als de browser de afbeelding niet kan of mag worden weergegeven. Omdat niet elke browser met het ALT attribuut overweg kan, is het goed ook de attributen VALUE en NAME op te nemen. Voor het VALUE attribuut kun je dezelfde waarde als van het ALT attribuut gebruiken. Als waarde voor het NAME attribuut kun je er het beste een kiezen, die uitsluitend letters, cijfers en verbindingsstreepjes bevat. <INPUT TYPE="image" SRC="submit.gif" ALT="Klik om te verzenden" VALUE="Klik om de informatie te verzenden" NAME="Verzenden"></body> dit geeft: en indien de browser het niet ondersteunt Button-element Met het BUTTON element heb je meer mogelijkheden om te bepalen hoe een knop er uitziet. <BUTTON TYPE="reset"><IMG SRC="neg.gif"..> Beginwaarden</BUTTON> <BUTTON TYPE="submit"><IMG SRC="pos.gif"..> Verzenden</BUTTON> Het resultaat is: Select- en Option-element De elementen SELECT en OPTION worden gebruikt voor het maken van de volgende controls: uitschuifkeuzelijst: de gebruiker kiest uit een uitklapbaar menu één of meer mogelijkheden meervoudige keuzelijst: de gebruiker kiest één of meer mogelijkheden uit een lijst, waarin meerdere opties zichtbaar zijn Het TEXTAREA element wordt gebruikt om het volgende control te maken: tekstvak, waarin de gebruiker over meerdere regels tekst kan invoeren enkelvoudige keuzelijste n Hier krijg je een lijstje waar je slechts 1 waarde uit kan kiezen. Door gebruik te maken van het selected attribuut kan je zeggen welke waarde er als standaard moet genomen worden. <p>geef je klas in <select name="klas"> <option value="1a" selected>1a</option> <option value="1b">1b</option> <option value="1c">1c</option> <option value="1d">1d</option> <option value="1e">1e</option> </select> </p> geeft: Html 30

31 Meervoudi ge Keuzelijsten Hier kan je meerdere opties kiezen. <p>geef je keuzevakken <select name="keuzevakken" size="3" multiple> <option value="vb">visual Basic</option> <option value="cpp">c++</option> <option value="cobol">cobol</option> <option value="net">netwerken</option> <option value="web">webdesign</option> </select> </p> Geeft: Indien je multiple er niet bijzet dan kan je maar 1 waarde kiezen. Hier kan je ook gebruik maken van het selected attribuut. Optgroup-elemen t De bedoeling is dat men de lijsten kan groeperen. Dit wordt niet door alle browsers ondersteund. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="xx">Kies een browser</option> <OPTGROUP LABEL="Netscape Navigator"> <OPTION VALUE="nn3">Netscape Navigator 3</OPTION> <OPTION VALUE="nn4">Netscape Navigator 4</OPTION> <OPTION VALUE="nn6">Netscape Navigator 6</OPTION> </OPTGROUP> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION VALUE="msie3">Microsoft Internet Explorer 3 </OPTION> <OPTION VALUE="msie4">Microsoft Internet Explorer 4 </OPTION> <OPTION VALUE="msie5">Microsoft Internet Explorer 5 </OPTION> <OPTION VALUE="msie55">Microsoft Internet Explorer 5.5 </OPTION> <OPTION VALUE="msie6">Microsoft Internet Explorer 6 </OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION VALUE="op3">Opera 3</OPTION> <OPTION VALUE="op35">Opera 3.5</OPTION> <OPTION VALUE="op4">Opera 4</OPTION> <OPTION VALUE="op5">Opera 5</OPTION> </OPTGROUP> <OPTION VALUE="anders">Andere browser</option> </SELECT> </FORM> Heeft als resultaat: Html 31

32 Textarea-element Aan de hand van textarea kan je een onbepaalde hoeveelheid tekst invoeren. De cols en de rows bepalen de hoogte en de breedte van het tekstvak. Rows Met het ROWS attribuut wordt bepaald hoe hoog het tekstvak is, uitgedrukt in het aantal rijen (regels) tekst. De hoogte heeft betrekking op de weergave van het tekstvak en niet op de hoeveelheid regels die een gebruiker kan invoeren. Het ROWS attribuut moet aan elk TEXTAREA element worden toegevoegd. De opbouw is: <TEXTAREA ROWS="waarde"..></TEXTAREA> Cols Met het COLS attribuut wordt bepaald hoe breed het tekstvak is, uitgedrukt in het aantal kolommen (karakters) tekst. De breedte heeft betrekking op de weergave van het tekstvak en niet op de hoeveelheid karakters die een gebruiker op een regel kan invoeren. De tekst in een tekstvak wordt weergegeven in een lettertype met een vaste letterafstand. Het COLS attribuut moet aan elk TEXTAREA element worden toegevoegd. De opbouw is: <TEXTAREA COLS="waarde"..></TEXTAREA> Voorbeeld <FORM METHOD="post" ACTION="bestemming"> <I>In het volgende vak kun je tekst invoeren:</i><br> <TEXTAREA NAME="tekstvak" ROWS="2" COLS="50"> Dit is standaard tekst die er dan al instaat </TEXTAREA> </FORM> Geeft: Html 32

33 Fieldset legend Dit wordt gebruikt om controls te groeperen. Maar het kan ook buiten formulieren gebruikt worden en wordt dan gewoon in de body gezet. <fieldset> <legend>de titel</legend> <p>hier kan je zetten wat je wil</p> </fieldset> Het resultaat ziet er dan zo uit: Label id for Om controls te activeren. Om bijvoorbeeld bij radio buttons de teks aan te klikken om de button te selecteren. <p>wat vind je van...<p/> <input type="radio" name="ptn inhoud" value="bullshit" id="bull"><label for="bull">grootste bullshit </label><br> <input type="radio" name="ptn inhoud" value="zever en bladvulling" id="zever"><label for="zever">zever en bladvulling</label><br> <input type="radio" name="ptn inhoud" value="geen mening" id="gn mening" checked><label for="gn mening">kan me niet schelen</label><br> <input type="radio" name="ptn inhoud" value="goed" id="nuttig"><label for="nuttig">nuttig en correct</label><br> <input type="radio" name="ptn inhoud" value="perfect" id="perf"><label for="perf">perfect</label><br> Geeft dan: Wanneer je nu de tekst aanklikt dan wordt de radio button geselecteerd. Html 33

34 Frames Doel De bedoeling is het scherm onder te verdelen in verschillende vakjes. Dit laat toe om bepaalde informatie op het scherm te behouden terwijl je in een ander scherm bet aan het scrollen of dat aan het vernieuwen bent. Opbouwen fan een frame Men moet eerst een master frame document aanmaken. Hiermee geeft u de browser aan dat er meer dan 1 url moet geladen worden. In dit bestand bestaat er GEEN body maar is ze vervangen door frameset. De eerste stap is het verdelen van het gehele venster ofwel verticaal in rijen, ofwel horizontaal in kolommen. In dit geval moet het venster in twee kolommen verdeeld worden. Dat leidt tot de volgende opbouw: <FRAMESET COLS=", "> <FRAME A> <FRAME B> </FRAMESET> De tweede stap is het vervangen van FRAME A door een frameset met twee rijen: <FRAMESET COLS=", "> <FRAMESET ROWS=", "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAME B> </FRAMESET> De derde stap is het vervangen van FRAME B door een frameset, nu met drie rijen: <FRAMESET COLS=", "> <FRAMESET ROWS=", "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAMESET ROWS=",, "> <FRAME B1> <FRAME B2> <FRAME B3> </FRAMESET> </FRAMESET> Html 34

35 Een ander voorbeeld <html> <head> <title>frames</title> </head> <frameset rows="15%,*"> <frame name="banner" src="html/banner.htm" scrolling="auto" frameborder="0" noresize"> <frameset cols="20%,*"> <frame name="menu" src="html/menu.htm" scrolling="auto" frameborder="0" noresize> <frame name="main" src="html/auteur.htm" scrolling="auto" frameborder="0" noresize> </frameset> </frameset> </html> De pagina ziet er nu als volgt uit: Hij kan de pagina s niet weergeven omdat ze in dit voor beeld nog niet gemaakt waren. Html 35

36 Frameset In een document met frames is het BODY element vervangen door het FRAMESET element. De opbouw van zo'n document ziet er in hoofdlijnen als volgt uit: <HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> </HTML> Tussen het begin en eind van het FRAMESET element worden één of meerdere FRAME elementen opgenomen. Daarnaast kunnen ook nog extra FRAMESET elementen binnen een FRAMESET element gebruikt worden (geneste framesets). DTD HTML 4.0: Beëindiging: Inhoud: Mag zijn opgenomen in: Vereiste attributen: - frameset verplicht FRAMESET, FRAME en NOFRAMES HTML en FRAMESET Co ls Met het COLS attribuut wordt bepaald in hoeveel frames naast elkaar het venster onderverdeeld moet worden en hoe breed elk frame moet zijn. De opbouw is: <FRAMESET COLS="kolomwaardenlijst"> De kolomwaardenlijst bestaat uit een aantal waarden gescheiden door een komma. Het aantal waarden bepaalt het aantal kolommen, de waarde zelf bepaalt de breedte van de kolom. De waarden kunnen als volgt uitgedrukt worden: in pixels, bijvoorbeeld "waarde1,waarde2,waarde3". Houd er rekening mee dat de browser, als de som van de gedefinieerde waarden groter is dan breedte van het venster, de waarden naar verhouding aanpast. De weergave kan daardoor anders zijn dan gewenst. als percentage, bijvoorbeeld "waarde%1,waarde%2,waarde%3". Houd er rekening mee dat de browser, als de som van de gedefinieerde percentages ongelijk is aan 100%, de percentages naar verhouding zo aanpast, dat het totaal toch op 100% uitkomt. De weergave kan daardoor anders zijn dan gewenst. als wildcard (*), waarbij de browser de resterende ruimte toedeelt aan de kolom waarvoor de wildcard is gebruikt. Indien meerdere kolommen van een wildcard zijn voorzien, dan wordt de ruimte gelijk verdeeld over deze kolommen. Als voor een wildcard een waarde geplaatst wordt, dan bepaald deze de verhouding waarin de ruimte verdeeld wordt, bijvoorbeeld: "*,2*,*" levert een verdeling op van 25%, 50% en 25%. De verschillende mogelijkheden kunnen door elkaar heen gebruikt worden, bijvoorbeeld: "waarde,waarde%,*". Indien het COLS attribuut niet is gebruikt, wordt uitgegaan van één kolom met een breedte van "100%". Html 36

37 Ro ws Met het ROWS attribuut wordt bepaald in hoeveel frames onder elkaar het venster onderverdeeld moet worden en hoe hoog elk frame moet zijn. De opbouw is Het is eigenlijk hetzelfde als cols maar dan in de andere richting. Border Met het BORDER attribuut wordt de dikte van de randen tussen de frames bepaald. De opbouw is: <FRAMESET BORDER="waarde"> De waarde is een getal dat de dikte in pixels aangeeft. Border is geen geldig html 4 element Wanneer aan de FRAME elementen binnen het frameset het FRAMEBORDER attribuut is toegevoegd met de waarde "1" (wel 3-D frameranden), dan heeft in Internet Explorer 5 de waarde van het BORDER attribuut betrekking op de tussenruimte tussen de 3-D randen. De totale rand wordt daardoor zo'n 3 pixels breder. Frame spacing Met het alleen door Microsoft Internet Explorer 3.0 en hoger ondersteunde FRAMESPACING attribuut wordt de ruimte tussen de 3-D gedeelten van de frameranden vastgelegd. De opbouw is: <FRAMESET FRAMESPACING="waarde"> De waarde is een getal dat de tussenruimte in pixels aangeeft. Omdat het BORDER attribuut niet door Microsoft Internet Explorer 3.0x ondersteund wordt, is het verstandig om de attributen BORDER en FRAMESPACING altijd gecombineerd op te nemen. Wanneer (door aan de FRAME elementen binnen het frameset het FRAMEBORDER attribuut met de waarde "1" toe te voegen) gekozen is voor wel 3-D frameranden, dan moet de waarde voor het FRAMESPACING element 3 pixels kleiner worden genomen dan de waarde voor het BORDER element, om hetzelfde resultaat te bereiken als in Netscape Navigator. Als de 3-D frameranden (door het attribuut FRAMEBORDER="0" aan de FRAME elementen toe te voegen) zijn weggelaten, dan kan voor het BORDER en het FRAMESPACING element dezelfde waarde worden gebruikt. In tegenstelling tot bij het BORDER attribuut, kan bij geneste framesets met behulp van het FRAMESPACING element voor elk frameset een aparte waarde opgegeven worden. Het FRAMESPACING attribuut maakt geen deel uit van HTML 4.0 Eigenlijk doen framespacing en border ongeveer hetzelfde en indien we de rand tussen de 2 frames willen weg doen moeten we er 1 of liefst allebei op 0 zetten Html 37

38 Frame Het FRAME element bepaalt de inhoud en de weergave van een enkel frame. De opbouw is: <FRAME> Het FRAME element heeft alleen attributen en geen inhoud. Een beëndiging is daarom niet toegestaan. DTD HTML 4.0: frameset Beëindiging: Inhoud: Mag zijn opgenomen in: Vereiste attributen: - verboden - (het element is leeg) FRAMESET Name Met het NAME attribuut kan aan een frame een naam gegeven worden. Dit attribuut moet je gebruiken, indien je met behulp van het TARGET attribuut van bijvoorbeeld het A of het AREA element wilt bepalen in welk frame een URI geopend moet worden. De opbouw is: <FRAME NAME="naam"> De naam moet beginnen met een hoofdletter of een kleine letter (A-Z of a-z). Volgens HTML 4.0 is de naam case-insensitive, dat wil zeggen dat geen onderscheid gemaakt wordt tussen hoofd- en kleine letters. In de praktijk maken alle belangrijke browsers dat onderscheid echter wel en moet je er dus voor zorgen dat je zowel in het TARGET attribuut van de hyperlink als in het NAME attribuut exact dezelfde naam gebruikt. De attributen NAME en ID mogen alleen gelijktijdig voor hetzelfde FRAME element worden gebruikt, indien ze dezelfde waarde hebben. Frameborder Met het FRAMEBORDER attribuut kan bepaald worden of wel of geen frameranden weergegeven moeten worden. De opbouw is: <FRAME FRAMEBORDER="waarde"> Als waarden kunnen gebruikt worden 1 of 0. Met de waarde 1 wordt tussen de frames de standaard 3-D rand geplaatst. De waarde 0 zorgt ervoor dat deze 3-D rand niet wordt weergegeven, maar omdat de ruimte tussen de frames daarbij niet ook wordt weggelaten, is het resultaat een "vlakke" rand. Om de frames direct zonder rand tegen elkaar aan te plaatsen, moet de ruimte tussen de frames op 0 pixels gesteld worden. Dat kan door de (overigens niet in HTML 4.0 opgenomen) attributen BORDER en FRAMESPACING aan het FRAMESET element toe te voegen en aan beide de waarde "0" te geven. Html 38

39 Noresize Door met de muis de balk tussen frames te verslepen, kan een gebruiker die frames vergroten of verkleinen. Je kunt die mogelijkheid uitsluiten door gebruik te maken van het NORESIZE attribuut. De opbouw is: <FRAME NORESIZE> Scrolling Met het SCROLLING attribuut kan vastgelegd worden of in het betreffende frame schuifbalken worden weergegeven. De opbouw is: <FRAME SCROLLING="waarde"> De volgende waarden kunnen gebruikt: yes, no en auto. Met de waarde yes worden de schuifbalken altijd weergegeven, met de waarde no worden de schuifbalken nooit weergegeven en met de waarde auto bepaalt de browser zelf of een schuifbalk nodig is. De standaardwaarde is auto. De waarde yes wordt niet (meer) ondersteund door Mozilla en Netscape Navigator 6.0 en hoger Src Met het SRC attribuut wordt bepaald welk document in het frame geopend moet worden. De opbouw is: <FRAME SRC="URI"> Voor de uri zie links en paths Targe t Het TARGET attribuut kan gebruikt worden om de browser de URI's in het document te laten openen in een frame met een bepaalde naam, of indien die naam niet bestaat, in een nieuw venster, zonder in de URI's zelf het TARGET attribuut te gebruiken. De opbouw is: <BASE TARGET="naam"..> waarden zie volgende blz Html 39

40 De naam van een frame wordt gedefinieerd via het NAME attribuut van het FRAME of het IFRAME element. De naam moet beginnen met een hoofdletter of een kleine letter (A-Z of a-z). De browser moet een naam die begint met een ander karakter negeren. Een uitzondering geldt enkele voor-gedefinieerd framenamen, die beginnen met een underscore: TARGET="_top" De URI wordt niet geopend in het frame waarin het aangeklikt wordt, maar in het hele venster van de browser. TARGET="_self" De URI wordt altijd geladen in het frame waarin het aangeklikt is, ook als via het BASE element een andere vensternaam opgegeven is. TARGET="_parent" De URI wordt geopend in de "parent" van het huidige frameset. Dat is het frameset van waaruit het huidige frameset is geopend. Juister gezegd: het huidige frameset wordt vervangen door het in de URI genoemde bestand. Indien er geen voorgaand frameset is, werkt deze naam als _self. TARGET="_blank" De URI wordt altijd geopend in een nieuw venster van de browser. Om en pagina in ee ander frame te openen moet je bij target de naam van dat frame invoeren. Als er staat <frameset cols="20%,*"> <frame name="menu" src="html/menu.htm" scrolling="auto" frameborder="0" noresize> <frame name="main" src="html/auteur.htm" scrolling="auto" frameborder="0" noresize> </frameset> Wanneer je in menu.htm een link aanklikt en je wil dat het in hett main venster te voorschein komt dan moet je in menu.htm bij deze link als target main kiezen. Bv <a href="../map/home.htm" target="main">home</a> Zo krijgt ieder frame venster zijn eigen naam en kan je dus kiezen in welk venster hij iets moet openen. Indien een naam opgegeven wordt die nergens is gedefinieerd, dan wordt de URI geopend in een nieuw venster. Volgens HTML 4.0 is de naam case-insensitive, dat wil zeggen dat geen onderscheid gemaakt wordt tussen hoofd- en kleine letters. In de praktijk maken alle belangrijke browsers dat onderscheid echter wel en moet je er dus voor zorgen dat je zowel in het TARGET attribuut als in het NAME attribuut van het FRAME of het IFRAME element exact dezelfde naam gebruikt. Html 40

41 Bordercolor Met het BORDERCOLOR attribuut kan de kleur van de frameranden bepaald worden. De opbouw is: <FRAME BORDERCOLOR="waarde"> of <FRAMESET BORDERCOLOR="waarde"> Mogelijke waarden zijn een kleurnaam en een RGB-waarde. Voor het definiëren van de kleur zie Kleuren in HTML/CSS. Bij Netscape Navigator en bij Microsoft Internet Explorer 5 werkt het BORDERCOLOR attribuut alleen bij 3-D frameranden, bij Microsoft Internet Explorer 4 ook bij "vlakke" frameranden. Het BORDERCOLOR attribuut maakt geen deel uit van HTML 4.0. Er is op dit moment geen alternatief met behulp van style sheets. Marginheigth Met het MARGINHEIGHT attribuut kan vastgelegd worden hoe groot de afstand moet zijn tussen de inhoud van een frame en de boven- en onderkant van het frame. De opbouw is: <FRAME MARGINHEIGHT="waarde"> De waarde is een getal dat de afstand in pixels aangeeft. De waarde moet groter dan 0 zijn. De standaardwaarde hangt van de browser af. Marginwidth Met het MARGINWIDTH attribuut kan vastgelegd worden hoe groot de afstand moet zijn tussen de inhoud van een frame en de randen aan de linker- en rechterzijde. De opbouw is: <FRAME MARGINWIDTH="waarde"> De waarde is een getal dat de afstand in pixels aangeeft. De waarde moet groter dan 0 zijn. De standaardwaarde hangt van de browser af. Html 41

42 Noframes Het bevat e pagina die u wil weergeven indien de browser geen frames ondersteunt. Het moet in het buitenste frameset-element geplaatst worden. Het wordt als volgt gebruikt <FRAMESET> <FRAMESET>... </FRAMESET> <NOFRAMES> <BODY> <P>Om deze pagina te kunnen bekijken, moet je over een browser beschikken die frames ondersteunt, bijvoorbeeld Microsoft Internet Explorer of Netscape Navigator.</P> </BODY> </NOFRAMES> </FRAMESET> Iframe Het is een bijzondere vorm van frames. Ook wel zwevende frames. Er is voorlopig maar 1 groot nadeel en dat is dat het op dit moment enkel door IE4 en hoger wordt ondersteund. Met het IFRAME element wordt bepaald dat een inline frame in een document moet worden opgenomen. De opbouw is: <IFRAME> </IFRAME> Tussen het begin en het eind van het element kan inhoud worden geplaatst, die alleen wordt weergegeven door browsers welke inline frames niet ondersteunen. DTD HTML 4.0: Beëindiging: Inhoud: Mag zijn opgenomen in: Vereiste attributen: - transitional, frameset verplicht elementen op blokniveau en inline elementen CAPTION, DD, DEL, DT, INS, LEGEND, LI, TD en TH; elementen op blokniveau met uitzondering van DIR, DL, MENU, OL, TABLE en UL; inline elementen met uitzondering van BUTTON, MAP, SCRIPT, SELECT en TEXTAREA; Om een bestand in een iframe te openen is het niet verschillend van een gewoon frame. Je moet he iframe ook een namme geven en dat dan als target gebruiken. <body> <IFRAME SRC="ifram1a.htm" name="zweven" WIDTH="275" HEIGHT="105">Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven.</iframe> <a href="../bbme/internet%20tech/web%20opdracht/h001412oe/okform.htm" target="zweven">naar frame</a> </body> Html 42

43 Meerdere frames tegelijk vervangen Soms wil je niet alleen de inhoud van één frame vervangen, maar van meerdere frames tegelijkertijd. Dat kan met HTML indien deze frames samen een frameset vormen, dat je als geheel kunt vervangen. Dat is in het volgende voorbeeld het geval met de frames links 1 en rechts 1. Deze frames kunnen dus in één keer vervangen worden door de frames links 2 en rechts 2. Bekijk in een nieuw venster hoe het werkt. Als je van plan bent een compleet frameset te vervangen, moet je daar bij de opzet van je site vanaf het begin rekening mee houden. Normaal zou het document waarin de frames uit het voorbeeld worden gedefinieerd, de volgende opbouw hebben: <HTML> <HEAD> <TITLE> Het originele</title> </HEAD> <FRAMESET ROWS="90,*"> <FRAME SRC="frameboven.htm" NAME="boven"> <FRAMESET COLS="120,*"> <FRAME SRC="framelinks.htm" NAME="links"> <FRAME SRC="framerechts.htm" NAME="rechts"> </FRAMESET> </FRAMESET> </HTML> Om de onderste twee frames tegelijkertijd te kunnen vervangen, moet het tweede frameset opgenomen worden in een apart document. Het eerste document krijgt de volgende opbouw: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET ROWS="90,*"> <FRAME SRC="frameboven.htm" NAME="boven"> <FRAME SRC="frameonder1.htm" NAME="onder"> </FRAMESET> </HTML> Html 43

44 In het document frameonder1.htm wordt het frameset gedefinieerd, dat de onderste twee frames bevat: <HTML> <HEAD> <TITLE>Dit is frameonder1.htm </TITLE> </HEAD> <FRAMESET COLS="120,*"> <FRAME SRC="framelinks1.htm" NAME="links"> <FRAME SRC="framerechts1.htm" NAME="rechts"> </FRAMESET> </HTML> Om de onderste twee frames in één keer te vervangen, kun je nu in willekeurig welk frame een hyperlink opnemen met de volgende opbouw: <A HREF="frameonder2.htm" TARGET="onder">Vervang de frames</a> Het document frameonder2.htm heeft dezelfde opbouw als het document frameonder1.htm, alleen verwijst het SRC attribuut van de FRAME elementen naar andere documenten. In de praktijk zullen de te vervangen frames lang niet altijd niet samen één frameset vormen. Dat is bijvoorbeeld het geval in het volgende voorbeeld: In HTML heb je dan slechts de mogelijkheid het complete venster te wijzigen en in het te openen document alle frames opnieuw te definiëren. Dus ook het frame wat helemaal niet vervangen hoeft te worden. Als je vaker meerdere frames tegelijkertijd wilt vervangen, levert de beschreven methode behoorlijk wat werk en extra documenten op. Als alternatief wordt daarom vaak gebruik gemaakt van een oplossing met JavaScript. Daarmee kun je ook eenvoudig frames uit verschillende framesets tegelijk vervangen. Nadeel van het werken met JavaScript is wel, dat het gewenste effect niet bereikt wordt als de bezoeker het gebruik van JavaScript heeft uitgesloten. Html 44

45 CSS Css staat voor cascading style sheets. Cascade = waterval Het is ongeveer zoals de opmaakprofielen bij MS word. Sheets op verschillende niveau s en het laagst niveau krijgt de hoogste prioriteit. Externe stylesheet Stylesheet in head gedef Style bij de tekst zelf ingegeven. Dit heeft de laagste prioriteit Hoogste prioriteit Css heeft een eigen syntaxis: Html: <body bgcolor= black > CSS body{background-color: black; Algemene stijlregel: selector{stijldeclaratie(s) Elke stijlregel wordt afgesloten door een ; CSS toevoegen aan HTML Externe stylesheet De opmaak kan in een extern bestand gestoken worden. Zo een bestand wort dan aan de html gekoppeld door een link-element. <head> <title>den titel</title> <link href="../css/opmaak.css" rel="stylesheet" type="text/css"> </head> Style-elementen in head Alle elementen worden in de head geplaatst. <head> <title>untitled</title> <style type="text/css"> <!-- Hier komen dan de stijlregels. Ze moeten tussen commentaar tekens staan --> </style> </head> Inline Stijlen In de body bij de elementen zelf. Probeer dit te vermeiden omwille van onderhoudsproblemen. <p style= color : red; >tekstje</p> Html 45

46 Structuur Algemene stijlregel: Selector(s) {Stijldeclatratie(s) Na het kiezen van het stijlstype volgt een dubbele punt : dan de waarde indien meer, dan moeten ze gescheiden worden door komma. Iedere styldeclaratie eindigt met een punt-koma. Voorbeeld body{ background-image: url(../i001412oe/rain.jpg-2e1875f4-6219c7c2.jpg); background-color: #000000, #00000A; color:#dc143c; background-attachment: scroll; element selector elk element uit html kan als selector gebruikt worden. De elementen mogen gegroepeerd worden. Wanneer dit element wordt gebruikt krijgt het automatisch de juiste opmaak. hr{ color: #00bb01; height: 0.2 cm; h1{text-align: center; h3{text-align: center; De laatste 2 kunnen we als volgt samennemen h1, h2{ text-align: center; Attribuut selector Wordt via class of id aan een element gekoppeld. Class-attribuu t We kunnen een attribuut bijmaken voor een bepaald element maar ook voor alle elementen samen. Koppelen aan 1 element elementnaam.zelfgekozen_attribuutnaam{ Stijleigenschappen; span.center{ text-align: center; Enkel en alleen span kan nu gebruik maken van center <span class= center >gecentreerde tekst</span> Koppelen aan alle elementen.zelfgekozen_attribuutnaam{ Stijleigenschappen;.center{ text-align: center; <span class= center >gecentreerde tekst</span> <p class= center >idem</p> alle elementen kunnen gebruik maken van dit attribuut Vergeet het punt niet! Html 46

47 Id-attribuu t Id-attributen worden steeds minder gebruikt. Ze zijn strijdig met de html 4 methode. Koppelen aan 1 element element#id_value{ Stijleigenschappen; span#center{ text-align: center; Enkel en alleen span kan nu gebruik maken van center <span id= center >gecentreerde tekst</span> Koppelen aan alle elementen #id_value{ Stijleigenschappen; #center{ text-align: center; <span id= center >gecentreerde tekst</span> <p id= center >idem</p> alle elementen kunnen gebruik maken van dit attribuut Vergeet het punt niet! Context gebonden selectors Stijl toekennen aan elementen wanneer ze in combinatie met iets anders gebruikt worden. p b{color: red; <p>deze tekst is <b>vet en rood</b></p> Wanneer we gewone tekst hebben waarbij het enkel p is, dan is het de opmaak van p maar zodra de tekst in p vet wordt gezet krijgt ze ook de kleur rood. Deze tekst is vet en rood Pseudo-classes Zorgt voor de weergave van hyperlinks. De volgorde is belangrijk. a:link { Niet bezochte links. a:visited { Bezochte links. a:active{ Link dat je op dat moment bezoekt. a:hover { Als de muis over de link gaat. Je kan ze ook combineren met class names Bv a.externe_link : link{color: red; <a class= externe_link href= > Html 47

48 Pseudo-elementen Gescheide n gebruik va n first-line f r e n firs-letter <style type="text/css"> <!-- p.lijn:first-line {font-weight: bold; p.letter:first-letter {background-color: silver; color: red; font-size:300%; float:right; --> </style> <p class="lijn">om enkele typografische effecten te bereiken, kan bij Style Sheets gebruik gemaakt worden van een tweetal zogenaamde pseudo-elementen: het first-line pseudo-element en het first-letter pseudo-element.</p> <p class="letter">het first-line pseudo-element zorgt ervoor dat de eerste regel van een element op blokniveau door de browser in een speciale stijl wordt weergegeven. Het first-line pseudoelement wordt opgenomen in een stijlblad of in een stijlblok. <br>de opbouw is: <br> Element:first-line { stijldeclaratie </p> Beide hebben een andere naam gekregen en worden zo niet op één blok gebruikt. Dit heeft dan als resultaat: Merk op dat voor first-line het enkel de tekst is die op de eerste lijn is. Hoeveel tekst er op de eerste lijn staat is afhankelijk van o.a. schermresolutie en venstergrootte. Html 48

49 Gemengd gebruik va v n firs-lin e en first-lette er <style type="text/css"> <!-- p.toon:first-line {font-weight: bold; p.toon:first-letter {background-color: silver; color: red; font-size:300%; float:right; --> </style> <p class="toon">om enkele typografische effecten te bereiken, kan bij Style Sheets gebruik gemaakt worden van een tweetal zogenaamde pseudo-elementen: het first-line pseudo-element en het first-letter pseudo-element.</p> <p class="toon">het first-line pseudo-element zorgt ervoor dat de eerste regel van een element op blokniveau door de browser in een speciale stijl wordt weergegeven. Het first-line pseudo-element wordt opgenomen in een stijlblad of in een stijlblok. <br>de opbouw is: <br> Element:first-line { stijldeclaratie </p> Nu hebben ze beide dezelfde naam. Beide opmaken worden nu toegepast. Ook hier geld dezelfde opmerking (zie gescheiden gebruik) voor first-line. Html 49

50 Achtergronden en kleuren Zie Stijlelementen voor lettertypen, kleuren en achtergronden op p Stijleigenschappen voor kleuren en achtergronden color: voorgrondkleur (kleur van de letters) background-color: achtergrondkleur background-image: de achtergrond is een afbeelding. Je moet dan de url van deze afbeelding geven. background-repeat: herhaling van het beeld over de hele pagina of enkel horizontaal of vertikaal background-attachment: beeld meescrollen of niet background-position: de plaats van de afbeelding vastleggen background: combinatie van al de vorige background-ima ge Mogelijke waarden zijn url of none je moet de url van de afbeelding geven of het pad. Vb: p{background-image: url(../bbme/internet%20tech/web%20opdracht/i001412oe/07.jpg); meer info url zie bij url en path s background-repeat Met de background-repeat eigenschap wordt bepaald of en hoe de achtergrondafbeelding wordt herhaald. Mogelijke waarden zijn repeat, repeat-x, repeat-y en no-repeat. De waarde repeat zorgt ervoor dat de afbeelding binnen het element zowel horizontaal als verticaal wordt herhaald. Bij de waarde repeat-x gebeurt dat alleen in horizontale richting en bij de waarde repeat-y alleen in verticale richting. Bij de waarde no-repeat wordt de afbeelding slechts één keer weergegeven. De beginwaarde is repeat. De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd. De background-repeat eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. De opbouw is: background-repeat: waarde Html 50

51 background-attachment Met de background-attachment eigenschap wordt bepaald hoe de achtergrondafbeelding geplaatst wordt ten opzichte van de inhoud van het document. Mogelijke waarden zijn scroll en fixed. Bij de waarde scroll heeft de achtergrondafbeelding een vaste plaats ten opzichte van de inhoud van het document. Door de schuifbalk te bewegen, wordt de achtergrondafbeelding met de inhoud van het document mee verplaatst. Bij de waarde fixed heeft de achtergrondafbeelding een vaste plaats in het venster. Bewegen van de schuifbalk verplaatst wel de inhoud van het document, maar niet de achtergrondafbeelding. De beginwaarde is scroll. De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd. De background-attachment eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3, Netscape Navigator 4 en Opera 3.5. De opbouw is: background-attachment: waarde background-position Met de background-position eigenschap kan de plaats van de achtergrondafbeelding vastgelegd worden. Mogelijke waarden zijn lengte en percentage. Daarnaast kunnen de volgende waarden gebruikt worden: in horizontale richting left, center en right, in verticale richting top, center en bottom. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de afmetingen van het element zelf. Gemeten wordt vanaf de linker bovenhoek van het element. Bij de waarden lengte en percentage betreft de eerste waarde de horizontale richting en de tweede de verticale. Bij de overige waarden maakt de volgorde niet uit. Het gebruik van percentages vraagt enige oefening. Gerekend wordt vanaf de linkerbovenhoek van de afbeelding en de linker bovenhoek van het element. De combinatie 0% 0% betekent dus dat de linker bovenhoek van de afbeelding geplaatst wordt in de linker bovenhoek van het element. De combinatie 100% 100% plaatst de rechter benedenhoek van de afbeelding in de rechter benedenhoek van het element. Een combinatie van 60% 60% betekent dat het punt in de afbeelding op 60% van de linkerkant en 60% van de bovenkant van de afbeelding, geplaatst wordt op het punt in het element op 60% van de linkerkant en 60% van de bovenkant van het element. Wanneer slechts één waarde is opgenomen voor lengte of percentage, wordt deze in beide richtingen gebruikt. Wanneer slechts één van de verticale of horizontale sleutelwoorden is opgenomen, wordt voor de Html 51

52 andere richting center aangehouden. Wanneer ook gebruik gemaakt wordt van de background-repeat eigenschap, wordt de afbeelding, ongeacht de beginpositie, bij de waarde repeat-y over de hele hoogte van het element herhaald en bij de waarde repeatx over de hele breedte. De waarden lengte en percentage mogen met elkaar gecombineerd worden. Een combinatie van lengte of percentage met de horizontale en verticale sleutelwoorden is echter niet mogelijk. Ook negatieve waarden voor lengte en percentage zijn toegestaan. De beginwaarde is 0%,0%. De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen. De eigenschap wordt niet geërfd. De background-position eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4. De opbouw is: background-position: waarde Voorbeeld STYLE="background-image: url(../images/grijs.gif); background-repeat: no-repeat; background-position: 100% 0%;" Html 52

53 boxopmaakmodel box Ieder element zit eigenlijk in een box. Deze box kunnen we verplaatsen en de opmaak ervan bepalen. Html 53

54 Mar gin Margin heeft verschillende elementen nl. margin-top margin-right margin-bottom margin-left margin mogelijke waarden zijn: lengte percentage auto Met de eigenschappen margin-top, margin-right, margin-bottom en margin-left wordt de breedte van de marge aan respectievelijk de boven-, rechter-, onder en linkerkant van het element bepaald. Mogelijke waarden zijn lengte, percentage en auto. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het meest dichtbijgelegen ancestor element op blokniveau. Hoewel ook negatieve waarden toegepast kunnen worden, wordt het gebruik ervan afgeraden omdat de browsers er nogal eens problemen mee hebben. Aangrenzende verticale marges schuiven in elkaar, waarna de resterende marge de breedte van grootste marge heeft. De beginwaarde is 0. De eigenschap kan gebruikt worden voor alle elementen. Indien we margin zelf nemen hunnen we verschillende argumenten hebben. 4 waarden : top rechts onder links 3 waarden : top (rechts-links) onder 2 waarden : (top-onder) (rechts-links) 1 waarde : voor alle zijden vb: p.first{margin: 10px 50px 0px 20px; background-color:tealmerk op dat er geen komma staat Border BORDER STYLE Met de border-style eigenschap wordt de stijl van de rand van een element bepaald. De eigenschap wordt gebruikt indien niet gelijktijdig de kleur en de breedte van de rand worden gedefinieerd met behulp van de eigenschappenborder-top, border-right, border-bottom, border-left en border. Mogelijke waarden zijn none, dotted, dashed, solid, double, groove, ridge, inset en outset Ook hier zin e volgorde en het aantal parameers belangrijk (zie margin) Html 54

55 Bij de waarde double is de som van de twee lijnen en de tussenruimte gelijk aan de waarde zoals opgegeven via de border-width eigenschap. Bij de waarden groove, ridge, inset en outset worden de randen weergegeven in 3D. Er kunnen één, twee, drie of vier waarden worden opgenomen. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. Wanneer slechts één waarde wordt opgenomen dan geldt deze voor alle zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de boven- en onderkant en de tweede voor de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de tweede waarde voor zowel de rechter- als de linkerkant. De beginwaarde is none (dit betekent dat altijd de border-style eigenschap gebruikt moet worden om de rand weer te geven). De eigenschap kan gebruikt worden voor alle elementen. <H2 STYLE="border-width: 0.4em; border-style: groove; border-color: white" >solid</h2> Html 55

56 BORDER-COLOR Met border-color kan men de box rand van kleur weizigen <H2 STYLE=" border-width: thick; border-style: solid; border-color: red black green blue" >border-color</h2> Merk op dat het aangeven welke rand men bedoeld in de volgorde en het aantal parameters zit. Zie margin BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH EN BORDER-LEFT-WIDTH Met de eigenschappen border-top-width, border-right-width, border-bottom-width en border-left-width wordt de breedte van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element bepaald. De eigenschap wordt gebruikt indien niet gelijktijdig de stijl en de kleur van de rand worden gedefinieerd met behulp van de eigenschappen border-top, border-right, border-bottom, border-left en border. Mogelijke waarden zijn thin, medium, thick en lengte. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Negatieve waarden zijn niet toegestaan. De beginwaarde is medium. De eigenschap kan gebruikt worden voor alle elementen. <H2 STYLE=" border-top-width: thin; border-right-width: medium;...; border-style: solid ">border-top-width: thin;...</h2> <H2 STYLE=" border-left-width: thick; border-style: none none none solid" >border-left-width: thick</h2> Html 56

57 BORDER-WIDTH De border-width eigenschap wordt gebruikt om de eigenschappen van de breedte van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element op verkorte wijze gecombineerd weer te geven. De eigenschap wordt gebruikt indien niet gelijktijdig de stijl en de kleur van de rand worden gedefinieerd met behulp van de border eigenschap. Mogelijke waarden zijn thin, medium, thick en lengte. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Negatieve waarden zijn niet toegestaan. Er kunnen één, twee, drie of vier waarden worden opgenomen. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. Wanneer slechts één waarde wordt opgenomen dan geldt deze voor alle zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de boven- en onderkant en de tweede voor de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de tweede waarde voor zowel de rechter- als de linkerkant. De beginwaarde is medium. De eigenschap kan gebruikt worden voor alle elementen <H2 STYLE=" border-style: solid; border-color: red; border-width: medium thin thin medium" >border-width</h2> BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM EN BORDER-LEFT In de eigenschappen border-top, border-right, border-bottom en border-left kunnen de verschillende eigenschappen van de rand aan respectievelijk de boven-, de rechter-, de onder- en de linkerkant van een element op een verkorte wijze worden gecombineerd. Mogelijke waarden zijn border-top-width (respectievelijk border-right-width, border-bottom-width en borderleft-width), border-style en border-color. Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen. Het maakt niet uit in welke volgorde de waarden worden opgenomen. De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. Indien een waarde niet is opgegeven, wordt de beginwaarde van de betreffende eigenschap aangehouden. De eigenschap kan gebruikt worden voor alle elementen. <H2 STYLE=" border-left: 0.3em solid red" >borderleft</h2> Html 57

58 BORDER De border eigenschap wordt gebruikt om de verschillende eigenschappen van de rand van een element op verkorte wijze weer te geven. Mogelijke waarden zijn border-width, border-style en border-color. Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen. Het maakt niet uit in welke volgorde de waarden worden opgenomen. De opgegeven waarden gelden voor alle vier kanten van het element. De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. Indien een waarde niet is opgegeven, wordt de beginwaarde van de betreffende eigenschap aangehouden. De eigenschap kan gebruikt worden voor alle elementen. De eigenschap wordt niet geërfd <H2 STYLE=" border: 0.3em solid red">border: 0.3em solid red</h2> SAMENVATTING BORDERS border-style : none, dotted, dashed, solid, double, groove, ridge, inset en outset bordercolor border-top-width. : lengte of thin-medium-thick border-width : lengte of thinmedium-thick border-top. : width - style - color gecombineerd border : width - style - color gecombineerdpadding padding-top padding-right padding-bottom padding-left mogelijke waarden zijn: lengte - percentage -auto padding 4 waarden : top rechts onder links 3 waarden : top (rechts-links) onder 2 waarden : (top-onder) (rechts-links) 1 waarde : voor alle zijden Met de eigenschappen padding-top, padding-right, padding-bottom en padding-left wordt de afstand tussen respectievelijk de boven, de rechter, de onder en de linker rand en de inhoud van een element bepaald. Mogelijke waarden zijn lengte en percentage. Html 58

59 De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het meest dichtbijgelegen ancestor element op blokniveau. Een negatieve waarde is niet toegestaan. De beginwaarde is 0. De eigenschap kan gebruikt worden voor alle elementen. De eigenschap wordt niet geërfd <H2 STYLE="padding-top: 0.5em; padding-left: 1.5em; background-color: yellow" >padding-top: 0.5em; paddingleft: 1.5em</H2> Bij padding is het niet veel verschillend. Maar dan wordt wederom gewerkt met de parameters. <H2 STYLE="padding: 0.5em 1.5em; background-color: yellow; border: solid black">padding: 0.5em 1.5em;</H2> Widt h e en heigh t De width en height eigenschappen kunnen worden gebruikt om de breedte en hoogte van de inhoud van een element vast te leggen. Ze hebben vooral hun toepassing bij afbeeldingen. WIDTH Met de width eigenschap kan de breedte van de inhoud van een element worden vastgelegd. Mogelijke waarden zijn lengte, percentage en auto. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het parent element. Een negatieve waarde is niet toegestaan. De beginwaarde is auto. De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen. De eigenschap wordt niet geërfd. Wanneer van een replaced elementen zowel width als height de waarde auto hebben, worden voor deze eigenschappen de intrinsieke afmetingen van het element gebruikt. Als alleen de width eigenschap gebruikt wordt bij het IMG element, dan wordt de waarde voor de height eigenschap berekenend op basis van de breedte-hoogte verhouding van de afbeelding. Html 59

60 <DIV STYLE="width: 50%; background-color: yellow">de breedte... 50%.</DIV> HEIGHT Met de height eigenschap kan de hoogte van de inhoud van een element worden vastgelegd. Mogelijke waarden zijn lengte en auto. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Een negatieve waarde is niet toegestaan. De beginwaarde is auto. De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen. De eigenschap wordt niet geërfd <FORM> <INPUT TYPE="SUBMIT" VALUE="OK" STYLE="width: 10em; height: 5em"> </FORM> Eenheden De lengte wordt uitgedrukt als combinatie van een getal en een eenheid zonder spatie ertussen. Optioneel kan deze combinatie vooraf gegaan worden door een '+' of '-'. De beginwaarde is '+'. De eenheid is een twee-letter afkorting. Er zijn drie soorten eenheden: relatieve, absolute en apparaat-afhankelijke. RELATIEVE Em en ex ABSOLUTE mm (millimeters) cm (centimeters) in (inches; 1 inch = 25.4 mm) pt (points; 1 inch = 72 points) pc (pica's; 1 pica = 12 point) pixel (px) is een apparaat-afhankelijke eenheid Html 60

61 Lettertypes en tekst font: zie ook vroeger letter-spacing : afstand tussen letters word-spacing : afstand tussen woorden line-height : hoogte regel text-indent : eerste regel element text-align : uitlijning tekst text-decoration : lijnen tov tekst font font-family: bepaalt het lettertype font variant: wordt niet besproken omdat het bijna niet meer gebruikt wordt Mogelijke waarden zijn normal en small-caps (kleine hoofdletters font style: normal italic oblique (zie handleiding html) font-weight: bepaalt de dikte van de letters voor mogelijke waarden zie handleiding Mogelijke waarden zijn: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 en 900. font-size: bepaald de grootte van de letters Mogelijke waarden zijn lengte en percentage. Daarnaast kan de grootte kan ook uitgedrukt worden als absolute grootte: xx-small, x-small, small, medium, large, x-large, of xx-large en als relatieve grootte: larger, of smaller font: hier worden alle voorafgaande gecombineerd. De opbouw is: font: waarde(style) waarde(weight) waarde(variant) waarde(size)/waarde(line-height) waarde(family) letter-spacing Afstand tussen de letters Met de letter-spacing eigenschap kan tussen karakters extra ruimte boven de standaard tussenruimte worden opgenomen. Mogelijke waarden zijn normal en lengte. De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Er kan ook een negatieve waarde gebruikt worden om de tussenruimte kleiner te maken dan de standaard tussenruimte. Wanneer de negatieve extra ruimte groter is dan de standaard tussenruimte, hangt het van de browser af of de tussenruimte "0" wordt, of dat de letters elkaar gaan overlappen. De beginwaarde is normal. De eigenschap kan gebruikt worden voor alle elementen en wordt geërfd. De opbouw is: letter-spacing: waarde <SPAN STYLE="letter-spacing: 0em;">letter-spacing: 0em</SPAN> Html 61

62 word-spacing Afstand tussen de woorden. Mogelijke waarden zijn normal en lengte <P STYLE=" word-spacing: 1.5em;" >In deze paragraaf... de waarde 1.5em.</P> text-indent Eerste regel element Met de text-indent eigenschap wordt aangegeven hoeveel de eerste regel van een tekst moet inspringen. Mogelijke waarden zijn lengte en percentage. text-align uitlijning tekst Met de text-align eigenschap wordt bepaald hoe de tekst ingesloten door het element wordt uitgelijnd. Mogelijke waarden zijn left, center, right en justify (volledig uitgevuld) Bij de waarde justify wordt de ruimte tussen de woorden vergroot of verkleind en afhankelijk van de browser soms ook de ruimte tussen de letters. text-decoration Met de text-decoration eigenschap wordt bepaald of de tekst van een element op een speciale manier moet worden weergegeven. De eigenschap kan gebruikt worden voor alle elementen. Mogelijke waarden zijn none, underline, overline, line-through en blink. (knipperen wordt niet door explorer ondersteund) Html 62

63 text-transform Met de text-transform eigenschap kan de weergave in hoofd- of kleine letters bepaald worden. Mogelijke waarden zijn none capitalize uppercase en lowercase Met de waarde capitalize wordt de eerste letter van elk woord een hoofdletter), met uppercase wordt alle tekst weergegeven in hoofdletters) en met lowercase wordt alle tekst weergegeven in kleine letters. De waarde none kan gebruikt worden om een geërfde weergave op te heffen. <SPAN STYLE="text-transform: capitalize;">hier wordt capitalize gebruikt</span>... line-height De hoogte van de regels wordt hier ingesteld. De line-height eigenschap bepaalt de afstand tussen de basislijnen van twee regels. Mogelijke waarden zijn normal getal lengte en percentage Een getal geeft aan hoeveel maal de lettergrootte vermenigvuldigd moet worden om de afstand tussen de basislijnen te krijgen. vertical-align Met de vertical-align eigenschap wordt bepaald hoe het element uitgelijnd moet worden. Mogelijke waarden zijn baseline, sub, super, text-top, text-bottom top, middle, bottom, percentage Bij de waarde baseline wordt de basislijn van het element uitgelijnd met de basislijn van het parent element. De waarden text-top en text-bottom lijnen het element uit met de bovenkant, respectievelijk de onderkant van de letters van het parent element. Bij de waarde middle wordt het midden van het element (vaak een afbeelding) uitgelijnd met de basislijn plus de helft van de x-height van het parent element. De waarden sub en super plaatsen het element in subscript, respectievelijk superscript ten opzichte van het parent element. Html 63

64 De waarden top en bottom zijn niet relatief ten opzichte van het parent element, maar ten opzichte van de regel waarvan het element deel uitmaakt: bij top wordt uitgelijnd met het hoogste element op de regel, bij bottom met het laagste element. Een percentage wordt uitgedrukt als combinatie van een getal en het %-teken en berekend ten opzichte van de regelhoogte van het element zelf. De beginwaarde is baseline. De eigenschap kan gebruikt worden voor inline elementen. <P>Hier wordt gebruik gemaakt van <SPAN STYLE=" vertical-align: sub">sub</span> en <SPAN STYLE=" vertical-align: super" >super</span></p> <IMG SRC="grijs.gif" STYLE="vertical-align: baseline"> baseline Html 64

65 Lijsten in css list-style-type : markering listitems list-style-image : afbeelding als markering list-style-position: inside - outside list-style-type De list-style-type eigenschap bepaalt hoe de markering van een onderdeel van een lijst wordt weergegeven. Mogelijke waarden zijn disc circle square decimal lower-roman upper-roman, lower-alpha upper-alpha none Met de waarde none wordt geen markering weergegeven <UL STYLE=" list-style-type: none;"> <LI>item 1</LI> <LI>item 2</LI> </UL> <UL STYLE=" list-style-type: square;"> <LI>item 1</LI> <LI>item 2</LI> </UL> list-style-image afbeelding als markering Mogelijke waarden zijn url en none <UL STYLE=" list-style-type: circle; list-style-image: url(redball.gif);"> <LI>item 1</LI> <LI>item 2</LI> </UL> Html 65

66 list-style-position De list-style-position eigenschap bepaalt, hoe de markering van het lijst onderdeel geplaatst wordt ten opzichte van de inhoud. Mogelijke waarden zijn outside en inside Bij de waarde outside staat de markering buiten de rechthoekige ruimte (de box) die het lijstonderdeel inneemt en de tekst van de volgende regels begint direct onder de tekst van de eerste regel. Bij de waarde inside wordt de markering binnen de box van het lijstonderdeel geplaatst en alle volgende regels van de inhoud beginnen daardoor direct onder de markering. De linkerzijde van de box van het lijstonderdeel houdt zijn normale plaats. De beginwaarde is outside. <UL STYLE="list-style-position: outside;"> <LI>In deze... outside.</li> <LI>De tekst... uitgelijnd.</li> </UL> <UL STYLE="list-style-position: inside;"> <LI>In deze... inside.</li> <LI>De tekst... uitgelijnd.</li> </UL> Html 66

67 list-style In de list-style eigenschap kunnen de verschillende eigenschappen van de stijl van een lijst op een verkorte wijze worden gecombineerd. Mogelijke waarden zijn list-style-type, list-style-image en list-style-position. Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen. De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. <UL STYLE="list-style: square url(redball.gif) inside;"> <LI>In deze...</li> <LI>Als markering...</li> <LI>Een browser...</li> </UL> Tabellen in css uitlijning horizontaal text-align op alle niveau s van de tabel: tabel - cel - rij - kolom - rijgroepen - kolomgroepenverticaal verticaal c vertical-align : enkel voor td-elementen breedte: width met absolute - relatieve waarden cell spacing: borders laten samenvallen border-collapse: collapsecell padding : ruimte tussen inhoud cel en border kleuren: color - background-color - border-color Html 67

68 <style type="text/css"> <!-- table { width: 700; font-family: "century gothic"; position: relative; border-top: solid teal thick; border-bottom: solid teal thick; left:10%; border-collapse: collapse; caption { font-family: "comic sans ms"; font-size: 1.5em; letter-spacing: 2em; border: thin teal solid; text-align: center; col.best { width: 25%; background-color: #69c; col.temp { width: 15%; background-color: #ccc; text-align:center; colgroup.eerste { width: 40%; colgroup.tweede { width: 60%; background-color: #f59; text-align: right; thead { color: #11a; background-color: #afa; font-family: "comic sans ms"; --> </style> </head> <body> <table summary="vakantiebestemmingen" rules="group"> <caption>zomer 2003</caption> Html 68

69 <colgroup class="eerste" span="2"> <col class="best"></col> <col class="temp"></col> </colgroup> <colgroup class="tweede" span="2"> <col width="10%"></col> <col width="90%" align="center"></col> </colgroup> <thead> <tr> <td>bestemming</td> <td>gem. Temp.</td> <td>prijs</td> <td>land</td> </tr> </thead> <tr> <td>bangkok</td> <td>28 5</td> <td>525 </td> <td>thailand</td> </tr> <tr> <td>melbourne</td> <td>8 </td> <td>975 </td> <td>australië</td> </tr> <tr> <td>bobo-dioulasso</td> <td>32 </td> <td>699 </td> <td>burkina Faso</td> </tr> <tr> <td>paaseilanden</td> <td>24 </td> <td>1799 </td> <td>chili</td> </tr> </table> ziet er zo uit Html 69

70 Zwavende elementen Float Met de float eigenschap kan een element zwevend worden worden gemaakt en daardoor een andere plaats krijgen dan normal Mogelijke waarden zijn left, right none. Met de waarde none wordt het element op plaats weergegeven, waar dat normaal het geval zou zijn. <P><IMG SRC="dsdelft.gif" STYLE="float: left; padding-right: 5px;"...>De afbeelding... weer.</p> Met de eigenschap float: right wordt de afbeelding rechts van de tekst geplaatst. <P><IMG SRC="dsdelft.gif" STYLE="float: right; padding-left: 5px;"...>De afbeelding... weer.</p> De float eigenschap kan ook voor andere elementen dan het IMG element gebruikt worden. In het volgende voorbeeld is dat gedaan om van een inline element een zwevende kop te maken. <P><SPAN STYLE="float: left; font-size: 36pt; padding-right: 10px;">float</SPAN>De inhoud... uitgelijnd.</p> Html 70

71 Clear Met clear eigenschap wordt aangegeven of er links en/of rechts van het element wel zwevende elementen mogen voorkomen. Mogelijke waarden zijn none left right both De beginwaarde none van de clear eigenschap bepaalt dat zwevende elementen wel zijn toegestaan naast het element waaraan de eigenschap wordt toegevoegd. In het volgende voorbeeld had de clear eigenschap dus ook weggelaten kunnen worden. <P><IMG SRC="dsdelft.gif" STYLE="float: left; padding-right: 5px;..."></P> <P STYLE="clear: none;">in dit voorbeeld... worden.</p> In het volgende voorbeeld wordt de eigenschap clear: left gebruikt om aan te geven dat links van het element geen zwevend element mag voorkomen. <P><IMG SRC="dsdelft.gif" STYLE="float: left; padding-right: 5px;..."></P> <P STYLE="clear: left;">in dit voorbeeld... worden.</p> In het volgende voorbeeld is geen afbeelding gebruikt, maar een zwevende kop. De paragraaf met tekst wordt naast de kop geplaatst, omdat de clear eigenschap niet gebruikt. <H1 STYLE="float: left; font-size: 36pt; padding-right: 10px;">clear</H1> <P>In dit voorbeeld... worden.</p> Html 71

72 Als voor de paragraaf de clear eigenschap met de waarde left wordt opgenomen, wordt deze onder de kop geplaatst. <H1 STYLE="float: left; font-size: 36pt; padding-right: 10px;">clear</H1> <P STYLE="clear: left;">in dit voorbeeld... worden.</p> Positioneren position Met de position eigenschap kan de positie bepaald worden, waar een HTML-element in het document moet worden weergegeven. Mogelijke waarden zijn Absolute Relative Static Absolute Positie tov van de ouder meestel body Van elementen die de eigenschap position met de waarde absolute hebben, wordt de plaats van het element bepaald ten opzichte van de referentiebox welke gevormd wordt door het meest dichtbijgelegen ancestor element, dat de eigenschap position heeft met een andere waarde dan static (bijvoorbeeld absolute of relative). Indien zo'n element niet aanwezig is, wordt de plaats berekend ten opzichte van de box, waarin het gehele document zich bevindt. De ruimte die normaal gereserveerd is voor een absoluut gepositioneerd element en eventuele child elementen, verplaatst met het element mee. Absoluut gepositioneerde elementen krijgen hun plaats zonder dat rekening gehouden wordt met andere elementen. Relativev Tov links boven van het element, ruimte blijft aanwezig op de oorspronkelijke plaats Van elementen die de eigenschap position met de waarde relative hebben, wordt de plaats bepaald ten opzichte van de gebruikelijke positie van het element. De ruimte die normaal gereserveerd is voor het element, verplaatst niet met het element mee. Html 72

73 Absoluut en relatief gepositioneerde elementen vormen een nieuwe referentiebox voor descendent elementen. Een descendent element verplaatst met het ancestor element mee. Dat geldt ook indien het child element relatief gepositioneerd is ten opzichte van het parent element. Wanneer een element verplaatst wordt, behoudt het zijn oorspronkelijke verschijningsvorm, inclusief eventuele overgangen naar een nieuwe regel. Static Elementen die de eigenschap position met de waarde static hebben, worden op dezelfde wijze weergegeven als normaal HTML. Er kan geen plaats aan toegekend worden en ze definiëren geen nieuwe referentiebox voor descendent elementen. Een uitzondering voor dat laatste betreft het BODY element, dat wel een referentiebox vormt voor descendent elementen. fixed De waarde fixed is een variant op absolute. Het enige verschil is dat de plaats niet bepaald wordt ten opzichte van een referentiebox, maar ten opzichte van de canvas (dat deel van de browser waarin een document wordt weergegeven). De beginwaarde is static. De eigenschap kan gebruikt worden voor alle elementen. De eigenschap wordt niet geërfd. Top en bottom De eigenschappen top en bottom bepalen de plaats van een element in verticale richting in het vlak van het scherm (de y-richting) ten opzichte van de referentiebox. Mogelijke waarden zijn Lengte percentage auto left en right Met de eigenschappen left en right bepalen de plaats van een element in horizontale richting in het vlak van het scherm (de x-richting) ten opzichte van de referentiebox. Mogelijke waarden zijn lengte percentage auto Html 73

74 De eerste voorbeelden laten tonen, hoe de plaats bepaald wordt bij relatief en absoluut gepositioneerde elementen. Variaties op deze voorbeelden zijn te zien bij de beschrijving van Relatief positioneren en Absoluut positioneren in het onderdeel CSS en elementen. In het document bevat een element op blokniveau (DIV) een inline element (SPAN). De opbouw is: <BODY..> <DIV ID="d1">Deze... <SPAN ID="s1">s1</SPAN>... element.</div> </BODY> De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven. Het DIV element is relatief gepositioneerd en vormt daardoor de referentiebox voor het child element SPAN. Omdat er geen verdere eigenschappen voor positioneren zijn gebruikt, krijgt het DIV element de normale plaats in het document. <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 150px; position: relative; background: yellow; #s1 { font-size: 18pt; background: lime; --> </STYLE> Wanneer het SPAN element relatief gepositioneerd wordt, verplaatst het 80 pixels naar beneden en 20 pixels naar rechts ten opzichte van de normale positie. De ruimte die het SPAN element normaal inneemt, blijft gereserveerd in het DIV element. <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 150px; position: relative; background: yellow; #s1 { position: relative; top: 80px; left: 20px; font-size: 18pt; background: lime; --> </STYLE> Wanneer het SPAN element absoluut gepositioneerd wordt, verplaatst het 80 pixels naar beneden en 20 pixels naar rechts ten opzichte van de referentiebox, welke gevormd wordt door het DIV element. De ruimte die het SPAN element normaal inneemt, komt vrij en wordt ingenomen door de rest van de inhoud van het DIV element. Html 74

75 <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 150px; position: relative; background: yellow; #s1 { position: absolute; top: 80px; left: 20px; font-size: 18pt; background: lime; --> </STYLE> In het volgende voorbeeld bevat een DIV element naast tekst ook twee inline SPAN elementen, aangeduid met s1 en s2. De opbouw van het document is als volgt: <BODY..> <DIV ID="d1">div <SPAN ID="s1">s1 <SPAN ID="s2">s2</SPAN> s1</span> div</div> </BODY> De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven. Het DIV element is relatief gepositioneerd en vormt daardoor de referentiebox voor de beide descendent elementen. Omdat er geen verdere eigenschappen voor positioneren zijn gebruikt, krijgt het de normale plaats in het document. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { background: lime; #s2 { background: fuchsia; Het eerste SPAN element (s1) is relatief gepositioneerd. Omdat in horizontale richting geen positie is opgegeven, verplaatst s1 alleen 60 pixels naar beneden ten opzichte van de normale positie. Het tweede SPAN element (s2) verplaatst mee. De ruimte die s1 normaal inneemt, blijft gereserveerd in het DIV element. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: relative; top: 60px; background: lime; #s2 { background: fuchsia; Html 75

76 Het eerste SPAN element (s1) is absoluut gepositioneerd en verplaatst 60 pixels naar beneden ten opzichte van de bovenkant van de referentiebox (DIV). Het tweede SPAN element (s2) verplaatst mee. De ruimte die s1 normaal inneemt, komt vrij en wordt ingenomen door de rest van de inhoud van het DIV element. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: absolute; top: 60px; background: lime; #s2 { background: fuchsia; Het tweede SPAN element (s2) is relatief gepositioneerd en verplaatst 60 pixels naar beneden en 100 pixels naar rechts ten opzichte van de normale positie. De ruimte die s2 normaal inneemt, blijft gereserveerd in s1. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: relative; top: 60px; background: lime; #s2 { position: relative; top: 60px; left: 100px; background: fuchsia; Het tweede SPAN element (s2) is relatief gepositioneerd en verplaatst 60 pixels naar beneden en 100 pixels naar rechts ten opzichte van de referentiebox (s1). De ruimte die s2 normaal inneemt, vervalt en de rest van de inhoud het eerste SPAN element (s1) en het DIV element nemen de vrijgekomen ruimte in. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: relative; top: 60px; background: lime; #s2 { position: absolute; top: 60px; left: 100px; background: fuchsia; Het eerste SPAN element (s1) is absoluut gepositioneerd, het tweede SPAN element relatief. Html 76

77 <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: absolute; top: 60px; background: lime; #s2 { position: relative; top: 60px; left: 100px; background: fuchsia; Zowel het eerste (s1) als het tweede SPAN element (s2) zijn absoluut gepositioneerd. <STYLE TYPE="text/css"> <!-- #d1 { font-size: 32px; width: 240px; position: relative; background: yellow; #s1 { position: absolute; top: 60px; background: lime; #s2 { position: absolute; top: 60px; left: 100px; background: fuchsia; Z-index Is voor de derde dimensie. Je kan verschillende lagen boven elkaar een zekere volgorde geven. Mogelijke waarden zijn auto en integer In het volgende voorbeeld zijn de boxen van drie DIV elementen in lagen boven elkaar geplaatst. Met de z-index eigenschap is bepaald in welke volgorde ze moeten worden weergegeven. Het resultaat is een logo. Doordat de afbeelding via de background-image eigenschap is opgenomen, wordt in browsers die geen style sheets ondersteunen alleen de tekst weergegeven. Het document is als volgt opgebouwd: <BODY..> <DIV ID="d1"></DIV> <DIV ID="d2"><FONT SIZE="+4"><SPAN ID="s1">face to face</span></font></div> <DIV ID="d3"></DIV> </BODY> De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven. Html 77

78 <STYLE TYPE="text/css"> <!-- #d1 { width: 250px; height: 50px; position: absolute; z-index: 1; top: 60px; left: 10px; background: black; #d2 { width: 250px; height: 50px; position: absolute; z-index: 3; top: 60px; left: 15px; color: white; #d3 { width: 105px; height: 125px; position: absolute; z-index: 2; top: 10px; left: 40px; background-image: url(../../images/face.gif); #s1 { font-size: 40px; --> </STYLE> Html 78

79 overflow Met de overflow eigenschap wordt bepaald wat er gebeurt, als de inhoud van een absoluut gepositioneerd element de opgegeven hoogte of breedte ervan te boven gaat. De beginwaarde is visible. De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute hebben Mogelijke waarden zijn visible hidden scroll auto Visible De waarde visible zorgt ervoor dat afmetingen van de box zo worden aangepast, dat de gehele inhoud van het element toch zichtbaar blijft. Een eventuele padding of border valt buiten de weergegeven inhoud. Hidden Met de waarde hidden wordt de inhoud weergegeven tot de afmetingen van het element bereikt zijn, maar er worden geen schuifbalken geplaatst. Een eventuele padding of border heeft betrekking op de normale breedte en hoogte van het element. Auto Met de waarde auto hangt het gedrag van de browser af, maar zouden wel schuifbalken moeten worden geplaatst. Scr oll Bij de waarde scroll moeten altijd schuifbalken worden geplaatst, ook wanneer dit niet nodig is om de gehele inhoud weer te geven. Deze mogelijkheid voorkomt het verdwijnen en verschijnen van schuifbalken als inhoud dynamisch gewijzigd wordt en de ene keer wel en de andere keer niet past. <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 120px; position: absolute; top: 30px; left: 30px; overflow: visible; background: yellow; --> </STYLE> In het twee voorbeeld is de overflow eigenschap met de waarde hidden gebruikt. Html 79

80 <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 120px; position: absolute; top: 30px; left: 30px; overflow: hidden; background: yellow; --> </STYLE> In het derde voorbeeld is de overflow eigenschap met de waarde auto gebruikt. <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 120px; position: absolute; top: 30px; left: 30px; overflow: auto; background: yellow; --> </STYLE> In het vierde voorbeeld is de overflow eigenschap met de waarde scroll gebruikt. <STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 120px; position: absolute; top: 30px; left: 30px; overflow: scroll; background: yellow; --> </STYLE> Html 80

81 Clip Met de clip eigenschap kan aangegeven worden welk deel van een element zichtbaar moet zijn. Mogelijke waarden zijn <vorm> auto <VORM> Voor <vorm> kan op dit moment alleen de waarde rect(<top> <right> <bottom> <left>) gebruikt worden. Voor de coördinaten <top>, <right>, <bottom> en <left> van de rechthoek wordt ingevuld lengte of auto. AUTO Met de waarde auto voor de clip eigenschap is het gehele element zichtbaar. De lengte wordt uitgedrukt als de combinatie van een getal en een eenheid en wordt bepaald ten opzichte van het beginpunt (de linker bovenhoek) van het element. Negatieve waarden zijn toegestaan. Elk van de coördinaten kan vervangen worden door de waarde auto. Deze zorgt ervoor dat het element in de aangegeven richting geheel zichtbaar is. Elke deel van een element dat buiten het aangegeven gebied valt (met inbegrip van de padding en de border), is transparent. De beginwaarde is auto. De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute hebben. In het volgende voorbeeld van de clip eigenschap is een afbeelding drie keer met behulp van het DIV element absoluut gepositioneerd, waarbij de positie van de laatste tweemaal precies gelijk is. Bij het eerste DIV element is de clip eigenschap niet gebruikt en de afbeelding wordt daardoor geheel weergegeven. Bij het tweede DIV element is is de clip eigenschap wel gebruikt en is voor alle vier de coördinaten een lengte opgegeven. Bij het derde DIV element zijn de coördinaten voor right en bottom bepaald op auto. De afbeelding is naar rechts en naar onder geheel zichtbaar. De opbouw van het document is: <BODY..> <DIV ID="d1"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125"...></DIV> <DIV ID="d2"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125"...></DIV> <DIV ID="d3"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125"...></DIV> </BODY> De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven. Html 81

82 <STYLE TYPE="text/css"> <!-- #d1 { position: absolute; top: 10px; left: 10px; #d2 { position: absolute; top: 10px; left: 160px; clip: rect(15px 45px 50px 0px); #d3 {position: absolute; top: 10px; left: 160px; clip: rect(55px auto auto 50px); --> </STYLE> Html 82