HTML en CSS gevorderd

Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke css-bestanden! 9 Cool URLʼs met htaccess! 11 2011 2

Inleiding HTML en CSS gevorderd Deze reader / handleiding gaat in op allerlei praktische situaties die zich voor doen bij het bouwen van een website. De volgende punten komen onderander aanbod: - afwijken de css-bestanden kiezen op basis van het soort browser (ook met PHP) - import mogelijkheden css-bestanden (link en @import) - structurele opbouw van een website - menu s met puur een anker - menu s met isset (php) - div s inhoud bepalen door een menu-keuze - dynamische menu s met uitsluitend html en css (zonder javascripting) - cool urls /.htaccess Voorkennis Ervaring hebben met inzicht in het volgende moeten hebben: HTML-basis CSS-basis basis PHP-scripting bij enkele php uitwerkingen is de volgende voorkennis ook nodig: Gebruik en installatie van een webservers (bijv: Apache als web-server in: XAMPP of MAMP) 2011 3

Opbouw webpage en css Hieronder wordt een basis-structuur weergegeven van een webpage waarin div s zijn gebruikt. Een koppeling met een css-bestand bepaald de opmaak van verschillende tags en positionering van de div s in de webpage. Er is gebruik gemaakt van php om de juiste contect-webpages te tonen in een daarvoor bestemde div met een ID content. Voorbeeld php-homepage: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//NL"> <html> <head>! <title>k64 applying knowledge</title>! <meta http-equiv="content-type" content="text/html; charset=utf-8" />! <META NAME="author"! LANG="nl" CONTENT="kerssies64.net">! <META NAME="copyright"! LANG="nl" CONTENT=" 2011 under GPL">! <META NAME="description"LANG="nl" CONTENT="!..:: kerssies64.net applying knowledge ::.. website beschrijving">!!! <META NAME="keywords" LANG="nl" CONTENT="zoekwoorden >! <link rel="stylesheet" href="sheet/sheet.css" type="text/css" media="screen" />! <LINK REL="shortcut icon" HREF="afb/favicon.ico"> </head> <body class="site"> <center>! <div ID="container">! <div ID="kop">!! <h1>kerssies64.net</h1>!! !! <div ID="menu">!!! <a href="index.php?menu=0">home</a>!!! <a href="index.php?menu=1">menu1</a>!!! <a href="index.php?menu=2">menu2</a>!! </div>! </div>! <div ID="content">!! if ($_GET[menu] == "0" $_GET[menu] == "")!! {echo 'include "pages/home.html" }!!!! elseif ($_GET[menu] == "1" )!! {echo 'include "pages/content1.html" }!! elseif ($_GET[menu] == "2 )!! {echo 'include "pages/content1.html" }! </div>! <div ID="copy">!! 2001 by kerssies64.net! </div> </center> </div> </body> </html> 2011 4

Voorbeeld css: body.site!! {!! margin: 0px;!! background-color: black; body! {!! margin: 0px;!! font-size:0.85em;!! font-family:helvetica;! } #container! {!! min-width: 900px;! max-width: 75%;!! height: 100%;!! margin: auto;!! font-family: "Bodoni MT";! background-image: url(../afb/container.jpg); #kop!! {!! margin: 0px;!! width: 100%;!! height: 120px;!! position: relative;!! top: 0px; left: 0px; /* Opmerking */ #menu!! {!! padding: 0px;!! width: 900px;! } #content!! {!! max-width: 90%;! min-width: 600px;!! min-height: 720px;! max-heigth: 95%;!! position: relative;!! top: 10px;!! left: 0px;! border: 0px;!! //background-color:#666666; vervolg op de volgende bladzijde. 2011 5

#content! {! overflow: auto;! max-width: 95%;! min-width: 780px;!! min-height: 630px;! max-height: 80%;! border:0px;! text-align: left;! background-color: #FFFFFF;! font-family: sans-serif, Helvetica;! } iframe {!! max-width: 95%;! min-width: 780px;!! min-height: 630px;!! max-height: 80%;! border:0px;! background-color:#cccccc;! } #logos!! {!! position: relative;!! top: -80px;!! left: 200px;!! width: 100px;!! height: 200px; #copy!! {!! margin-left:60%;! margin-bottom:10px;!! height: 20px;!! color: #62ADFF;!! font-family: "Impact";!! z-index: 1;!! h1!! {!! text-align: center;!! color: #62ADFF;!! font-family: "Impact";!! font-weight: bolder;! font-size: xx-large; h2, h3, h4 {! color: #008080;!! font-family: "Silom";! } table!! {!! margin: auto; 2011 6

vervolg op de volgende bladzijde. a!! {!! text-decoration: none;!! color:#008080; a:visited!! {!! text-decoration: none;!! color:#008080; a:active!! {!! text-decoration: none;!! color:grey; a:hover!! {!! text-decoration: none;!! color:#008080;!! background-color:silver;.bg_cel! {!! background-color:#00ffcc; Door gebruik te maken van tab s en wit regels wordt een html- en css-document overzichtelijker en beter te lezen. Maak hiervan gebruik. Hieronder wordt de zelfde image-tag met attributen weergegeven. Door tab s en nieuwe regels per attribuut te gebruiken wordt het geheel overzichtelijker. <IMG SRC="afbeelding.jpg" ALT="afbeelding" WIDTH="120" HEIGHT="140" BORDER="1"> <IMG!! SRC!! ="afbeelding.jpg"!! ALT!! ="afbeelding"!! WIDTH! ="120"!! HEIGHT!="140"!! BORDER! ="1" > 2011 7

DIVʼs of iframes? Om te kunnen kiezen tussen iframes of DIV s is het belangrijk om te weten wat het verschil is. Het verschil is dat een DIV een container voor inhoud is en een iframe is een window. Echter worden ze steeds minder iframes gebruikt. Dit omdat zoekmachines minder goed de content in hun index kunnen opslaan wanneer het in een iframe zit. Ook heb je al snel last van extra scrollbars. Een groot voordeel van DIV s ligt hem in de vele mogelijkheden in opmaak, door DIV s met CSS te combineren. Eigen icoon in de adresbalk van de browser Elke browser geeft een klein icoontje in de adresbalk van de browser waar een URL wordt ingetypt. Dit icoon is naar eigen ontwerp aan te passen. In de header komt de volgende regel te staan:! <LINK REL="shortcut icon" HREF="afb/favicon.ico"> Hest icoon-bestandje favoicon.ico kan onderandere gemaakt worden op: http://www.favicon.cc Web-editors Er zijn veel verschillende web-editors te krijgen. Buiten persoonlijke voorkeuren om volgen hieronder enkele aandachtspunten bij het kiezen van de juiste editor. regelnummers delen code zijn te verbergen op tag-basis (plus- en min-icoon) instelbare kleuren voor verschillende talen intellisence (automatisch aanvullen tag s en attributen tijdens het typen) text-based, geen drag-and-drop. (automatische gegenereerde code maakt document onoverzichtelijk) preview resultaat bibliotheken met code remote bewerken code project-beheer 2011 8

Koppelen van css-bestanden Door de opmaak te scheiden van de indeling en inhoud wordt de code overzichtelijker en makkelijker te beheren. Het is dus wijs om alle inline opmaak in een apart css-bestand te zetten. Wel moet er in elk html-bestand, waarop deze opmaak van toepassing is, een koppeling gemaakt worden naar het css-bestand. Voorbeeld 1: De meest gebruikte manier om een css-bestand te koppelen staat hieronder weergegeven. <head>! <link href="stijl/common.css" rel="stylesheet" type="text/css" /> </head> Voorbeeld 2: Daarnaast kan het het ook met de onderstaande manier. Ook kan deze in een ander css-bestand gebruikt worden. <head> <STYLE TYPE="text/css">!  </STYLE> </head> Browser afhankelijke css-bestanden Bij het ontwikkelen van een website zou het vanzelfsprekend zijn een website-ontwerp in alle browers het zelfde resultaat geeft. Niets is minder waard. Herlaas worden niet alle css-mogelijkheden in alle browsers ondersteund of op dezelfde manier geïnterpreteerd. Grof gezegd zal een website die ontwikkeld is voor Mozilla FireFox ook op Chrome en Safari de zelfde look en feel hebben. MicroSoft heeft zo zijn eigen cssinterpretatie, waardoor de meeste sites minimaal twee css- bestanden heeft om de opmaak in alle grote browsers gelijk te trekken. Hieronder worden twee voorbeelden gegeven om automatisch afwijkende css- bestanden te kiezen op basis van browser die een eindgebruiker gebruikt. 2011 9

Voorbeeld 1: Een keuze css- bestand met uitzonderingen voor IE6 en IE7 kan worden gedaan in e header. <head> <link href="stijl/common.css"!rel="stylesheet" type="text/css" />  </head> Voorbeeld 2: Een css-bestand kiezen kan ook op basis van de http-agent informatie. De selectie is hier gemaakt met php. <head> <STYLE TYPE="text/css">! <?php! /*! browser bepalen, IE krijt een ander css-bestand dan de rest */! if (substr_count($_server[http_user_agent],"msie") == 1)!! {!! echo '';! else!! {!! echo '';!?> </STYLE> </head> 2011 10

Cool URLʼs met htaccess URL s in de adresbalk van de browser zijn soms nog al lang en daarbij onlogisch. Ook geef je mappen-structuur van de website prijs aan de bezoekers. Wat er in feite gebeurt is dat een URL een label bevat die wordt weergegeven in de URL-balk, echter door een conversie weet de browser waar het label in werkelijkheid naar toe gelinkt is. In een webpage kan de volgende link voor komen: <a href="home">home kerssies64.net</a> In de root van de website staat een bestand met de naam.htaccess (punt htacces). Let op dit is een verborgenbestand. Het kan zijn dat het niet zichtbaar is na het aanmaken. Zorg ervoor dat de webserver verborgen (hidden) bestanden weergeeft, dit toch weergeven zal per operating-systeem verschillen. voorbeeld:.htaccess De bovenstaande URL zal bij aanklikken door de eerste RewriteRule worden omgezet naar index.php Er staan meerdere voorbeelden van herschrijf regels naar verschillende locaties. RewriteEngine On ### menu home RewriteRule ^/?home$ index.php?menu=0 ### menu1 RewriteRule ^/?kop1$ index.php?menu=1 RewriteRule ^/?kop1_1$ index.php?menu=2&iframe=folder/page.html RewriteRule ^/?kop1_2$ index.php?menu=2&iframe=http://www.page.com RewriteRule ^/?kop1_3$ index.php?menu=2&iframe=http://www.site.nl/ RewriteRule ^/?kop1_4$ index.php?menu=2&iframe=map/folder/bestand.pdf ## menu2 RewriteRule ^/?kop2_1$ index.php?menu=2&iframe=folder/page.php RewriteRule ^/?kop2_2$ index.php?menu=2&iframe=folder/page2.php RewriteRule ^/?kop2_3$ index.php?menu=2&iframe=http://www.site.nl/sub/ RewriteRule ^/?kop1_4$ index.php?menu=2&iframe=map/folder/bestand.pdf ## beheer link RewriteRule ^/?beheer$ index.php?menu=1 2011 11