Zoals u in de cursus kan lezen (www.computerkit.be/cursus) moet een externe link steeds beginnen met http:// of met een ander internetprotocol.
href=
“http://www.google.be”
>
Google
Het begin van de markering
het attribuut
de verwijzing moet u tussen dubbele of enkele aanhalingstekens plaatsen
Het einde van de beginmarkering
het opschrift van de link
de eindmarkering
Meerdere links naast of onder elkaar Wanneer u meerdere links naast of onder elkaar of onder elkaar intikt (in het codevenster of in een teksteditor), zullen ze steeds naast elkaar en zonder tussenruimte worden weergegeven. Bijvoorbeeld: GoogleYahooWikipedia
Het bovenstaande voorbeeld zal er in de browser identiek hetzelfde uitzien als het onderstaande voorbeeld: GoogleYahooWikipedia
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 2
HTML-elementen scheiden of onder elkaar plaatsen Wanneer u in de HTML-code meerdere spaties tussen woorden of HTML-markerigen plaatst, zal de browser die automatisch herleiden tot één spatie. Ook regeleindes (wanneer u in het codevenster of in een tekseditor op de ENTER-toets drukt) worden NIET in de browser weergegeven. De drie onderstaande voorbeelden worden in de browser allemaal op dezelfde manier getoond. Voorbeeld 1: Google
Wil u meer dan één spatie tussen woorden, dan moet u ze 'handmatig' in de HTML-code invoeren. Een spatie (non-breaking space) wordt in HTML als volgt genoteerd: GoogleYahoo
Op dezelfde manier kan u ook regeleindes (ENTER, RETURN...) toevoegen in HTML. Een regeleinde formuleert u in HTML als volgt: of (=XHTML) Google Yahoo
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 3
HTML-markeringen (tags) zoals alinea's en titels worden in een browser echter automatisch onder elkaar geplaatst. Bijvoorbeeld:
Een grote titel
Een iets kleinere titel
een alinea met tekst.
Standaard opmaak van de browser Een browser zal de titels en alinea's ook van een standaard opmaak (lettertype, lettergrootte) voorzien. Een browser geeft links standaard weer in het blauw en onderlijnd. Wanneer je over een link beweegt, veranderen sommige browsers de kleur van de link. Actieve of reeds bezochte links krijgen eveneens een andere kleur.
Een verzameling links in een lijst Het is zeker aan te raden om links van een navigatiebalk in een 'verzameling' of 'lijst' te plaatsen. Een HTML-lijst is hiervoor uitermate geschikt. De benodigde HTML-markeringen (in het Engels: HTML-tags) zijn
en . De tab ul staat voor 'unordered list'. In zo'n lijst moet je een aantal items (list items of ) plaatsen. De browser geeft dit weer als een reeks onder elkaar geplaatste opsommingspunten met een bolletje voor. Bijvoorbeeld:
appelen
peren
citroenen
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 4
Een of 'ordered list' wordt genummerd weergegeven. Bijvoorbeeld:
appelen
peren
citroenen
Op dezelfde manier kan u een reeks links opnemen in een HTML-lijst.
In het bovenstaande voorbeeld zijn de attribuutwaardes van href vervangen door een #. Wanneer u er op klikt, blijft u op dezelfde pagina. Deze techniek is uiteraard enkel zinvol voor testdoeleinden.
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 5
Opmaak van HTML met CSS Met de opmaaktaal CSS (cascading stylesheets) kan u HTML-pagina's vormgeven, opmaken en van layout voorzien.
CSS integreren in uw website U kan CSS-code op 2 manieren integreren in uw webpagina. 1. Insluiten in de -sectie van iedere webpagina. 2. Linken vanuit de -sectie van iedere webpagina: de informatie wordt dan in een apart bestand opgeslagen. Dit biedt enorme voordelen. Wanneer u de informatie in dit bestand aanpast, verandert de 'stijl' van alle pagina's in uw website.
Hoe ziet CSS er uit? CSS ziet er volledig anders uit dan HTML. In een CSS-stijlsjabloon bepaalt u hoe elke html-markering er moet uitzien. Wanneer u bijvoorbeeld een
-markering in uw HTML-pagina heeft opgenomen, kan u die in CSS op de volgende manier opmaken. h2{ font-size:xx-large; color:black; background-color:ivory; } Hierdoor worden alle
-titels op uw webpagina('s) zeer groot (xx-large) weergeven. De tekst is zwart (black) en krijgt een ivoorkleurige (ivory) achtergrondkleur. Op dezelfde manier kan u te werk gaan voor alle andere HTML-markeringen die u gebruikt of van plan bent te gaan gebruiken. Voor een uitgebreide overzicht van alle mogelijkheden verwijzen we u door naar de volledige cursus op www.computerkit.be/cursus (http://www.computerkit.be/cursus/materiaal/dwp39-50.pdf) Die code kan u in de webpagina opnemen: Test CSS <style type="text/css"> h2{ font-size:xx-large; color:black; background-color:ivory; }
Een titel
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 6
Een praktijkvoorbeeld: een navigatiebalk met CSS 1. We maken een viertal links en plaatsten die in een HTML-lijst. Het eindresultaat zou er ongeveer als volgt moeten uitzien (in het codevenster of in een teksteditor).
Door de bovenvermelde aanpassingen te doen, ziet het resultaat er al stukken beter uit. Enkel de titel achter de navigatiebalk springt niet naar het begin van de regel. Dit probleem lossen we wel op in het volgende hoofdstuk.
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 9
Een afbeelding als 'link'achtergrond Naast achtergrondkleuren, kan u ook achtergrondafbeeldingen achter de links plaatsen met behulp van CSS. Hiervoor neemt u best een smalle afbeelding met een kleurverloop. De linker- en rechterkant van de afbeelding moeten perfect overeenstemmen. Met een programma als Photoshop heeft u zulke afbeeldingen in een handomdraai gemaakt. Voorbeeld van een 'smalle' achtergrondafbeelding.
Voordeel is dat de browsers deze afbeeldingen automatisch herhalen: dit gebeurt zowel verticaal als horizontaal. Hou er dus rekening mee dat u afbeelding ongeveer de hoogte heeft van de link. Voor de hover-afbeelding volstaat het de afbeelding lichtjes aan te passen (bijvoorbeeld: 180° draaien of een kleine kleurwijziging. Voorbeeld van een aangepaste hover-afbeelding. Hiervoor moeten we nog een paar kleine aanpassingen aanbrengen aan de CSS-code. a{ background:#ccc666; background-image:url('images/link.jpg'); padding:10px; padding-right:15px; padding-left:15px; display:block; text-decoration:none; color:white; font-variant:small-caps; font-size:large; font-family:arial, helvetica; } a:hover{ background:#cccccc; background-image:url('images/linkhover.jpg'); } De achtergrondafbeeldingen zijn opgenomen via de url-instructie. Zoals u ziet staan de afbeeldingen in een 'onderliggende map' met de naam images.
background-image:url('images/linkhover.jpg');
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 10
copyright: Kris Merckx voor www.computerkit.be - 2009 - HTML en CSS - navigatiebalk bouwen met CSS 11
CSS extern koppelen 1. In een laatste stap 'verwijderen' we de CSS-code uit onze HTML-pagina en we bewaren de code als een apart document.
2. We plakken deze code in een nieuw leeg bestand OPGELET: in een leeg codevenster plakken of in een teksteditor zoals Kladblok of Scite. Zeker niet in Word plakken!!! 3. De regels <style type="text/css"> en mag u uit het nieuwe document verwijderen. 4. U slaat het nieuwe bestand op onder de naam stijl.css. 5. Vervolgens moeten we het externe stijlsjabloon 'koppelen' aan onze HTML-pagina. Daarvoor moet u in de -sectie van het HTML-document de volgende regel toevoegen: De head ziet er nu uit als volgt: <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> Voorbeeld navigatiebalk met CSS <meta name="author" content="Kris Merckx"/>
De voorbeeldbestanden bij deze les vindt u eveneens op www.computerkit.be/cursus.
