VanBerghem.Com

XHTML en CSS bestand opstellen

John — Sun, 06 Apr 2008 13:00:27 +0000

Oké, je hebt gelezen dat je veel tijd en moeite kunt besparen als je de inhoud (HTML) en de presentatie (CSS) scheid. Maar hoe doe je dat in de praktijk? Hoe voorkom ik dat ik dat ik mijn HTML documenten toch gewijzigd moeten worden als ik het ontwerp van de website wil veranderen? Het antwoord is eigenlijk veel makkelijker dan dat veel mensen denken. Als je continuïteit wil hebben in het ontwerp van je pagina moet die continuïteit ook in de XHTML zitten. De XHTML moet het raamwerk vormen waar de CSS - de stilering en lay-out, aan wordt opgehangen. In meeste gevallen bestaat een pagina uit een kop, inhoud, navigatie (links) en een voet. Je zou het kunnen vergelijken met een vrouw en hoe ze zich kleed. De vrouw zelf is de XHTML en haar kleding, make-up, accessoires en schoenen zijn de CSS. Mocht een vrouw dit lezen, wil ik duidelijk maken dat ik de term kop niet gebruik om beledigend te zijn maar om verwarring te vermeiden met het hoofd element (<head>) in de pagina. Deze vergelijking slaat op wat zich binnen het <body> element bevind. De navigatie links moet je hier zien als een accessoire omdat die niet een vaste plek heeft op het lichaam. Soms worden de navigatie links tussen de kop en de inhoud geplaatst en steeds vaker tussen de inhoud en de voet of helemaal op het eind. De verschillende onderdelen worden elk tussen <div> elementen geplaatst en krijgen elk een uniek "id" zoals in het volgende voorbeeld.

Voorbeeld

<div id="header">

Dit maakt het mogelijk om gelijkwaardige elementen in de verschillende <div>’s een andere opmaak te geven. Om extra controle te geven over de pagina in zijn geheel plaats je all deze <div>’s binnen een andere <div> zodat de het XHTML document er als volgt uitziet.

XHTML

<body>
<div id="container">
  <div id="header">
      <h1>Naam van Website of Bedrijf</h1>
      <p>Motto van Website of Bedrijf</p>
  </div>
  <div id="content">
      <h2>Pagina Titel of Onderwerp</h2>

      <p>Lorem ipsum dolor sit amet, 
     consectetuer adipiscing elit. 
     Curabitur nulla lectus, 
     suscipit ullamcorper, iaculis non, 
     semper ac, arcu. 
     Nullam nunc purus, blandit ac, 
     dapibus vel, pretium in, mi. 
     </p>

  </div>
<div id="navigation">
    <h2>Links</h2>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="#">pagina 2</a></li>
      <li><a href="#">pagina 3</a></li>
      <li><a href="#">pagina 4</a></li>
    </ul>
</div>
<div id="footer">
  <p>© copyright 2008 Company Name</p>
</div>
</div>
</body>

Het CSS bestand zou er dan zou uit kunnen zien.

CSS

* {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border-style: none;
  list-style-type: none;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: #000000;
   background-color: #66CCFF;
}
#container {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  color: #44CCFF;
  background-color: #000000;
  border-bottom: thick solid #FFFF00;
}
#header h1 {
   font-size: 2em;
  font-weight: bold;
  text-align: center;
}
#header p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.9em;
  font-style: oblique;
  text-align: right;
  margin-right: 1em;
}
#content {
  padding: 10px;
  float: right;
  width: 600px;
}
#content h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 0.7em;
}
#content p {
  margin-bottom: 1em;
}
#navigation {
  width: 180px;
  margin-top: 1em;
}
#navigation h2 {
  font-size: 1em;
  font-weight: bold;
  font-variant: small-caps;
  text-transform: capitalize;
  text-align: center;
}
#navigation ul {
  border: thin solid #FFFF00;
}
#navigation li {
  margin: 3px;
}
#navigation li a {
  text-transform: capitalize;
  color: #666666;
  border: thin solid #000066;
  display: block;
  padding: 5px;
}
#navigation li a:hover {
  color: #000000;
  border: thin solid #0000CC;
  background-color: #0099CC;
}
#footer {
  clear: both;
  margin-top: 2em;
  border-top: thick solid #FFFF00;
  width: 100%;
}
#footer p {
  font-size: 0.8em;
  text-align: center;
}

In andere artikels wordt in gegaan waarom men dit op deze wijze doet.

Gescheiden in de 2de Graad

John — Fri, 21 Mar 2008 23:16:53 +0000

Ik kan nog goed herinneren dat we in 1995 onze eerste internet aansluiting kregen. We gingen het internet op met Netscape 1.0 of Internet Explorer 2.0. De meeste websites waren een simpele pagina met zwarte tekst op een witte achtergrond. Als je mazzel had stond er een foto op met 256 kleuren. Tenminste, als je de optie afbeeldingen weergeven had in geschakeld in je browser. Ik typte het adres van de website in en moest dan 5 á 10 minuten wachten voordat de pagina geladen was over mijn mega snelle 33.6k modem. Er is sinds die tijd een hoop veranderd.

Geschiedenis

HTML was in het begin ontwikkeld voor wetenschappers die hun onderzoeken wouden delen. Het was een simpele taal om de tekst te kunnen definiëren. Wat is deze zin? Is het een koptekst, een citaat, of deel van een paragraaf? Niets was gericht op ontwerp. Ze hadden gewoon een medium nodig om de informatie te delen. Toen de World Wide Web werd ontdekt als commercieel platform kwam er ook de behoefte om websites ook visueel aantrekkelijk te maken. Men wilde meer dan alleen die zwarte tekst op een witte achtergrond en een komische geanimeerde GIF. Dus begon men te kijken naar de visuele weergave van de HTML elementen in plaats van naar de definitie van deze elementen. Tabellen werden gebruikt voor de lay-out, om kolommen te maken of afbeeldingen te positioneren. Als je de tekst wou laten inspringen gebruikte je <blockquote>. De betekenis van de HTML werd verloren, alleen de visuele waarde bleef over. Maar omdat HTML hier niet voor was ontwikkeld schoot het als ontwerp taal al snel tekort. Er rees een behoefte naar een taal die geschikt was om te ontwerpen om HTML terug te laten keren naar zijn originele taak, de inhoud definiëren. Men zocht een taal die ontwerpers de vrijheid bood om het ontwerp over de HTML te laten vloeien. Cascading Style Sheets of CSS was het antwoord

CSS power

CSS geeft ontwerpers de macht om de weergave en gedrag van elk HTML element te bepalen. Men kan niet alleen elk verschillend element anders opmaken, je kan zelfs met behulp van ID’s, class en omringende elementen het zelfde element in een andere situatie anders opmaken. We kunnen zelfs een stap verder gaan. Als je een extern CSS bestand gebruikt kan je alle HTML bestanden er aan koppelen en continuïteit in het ontwerp creëren over de gehele website. De voordelen van externe CSS bestanden worden pas echt duidelijk wanneer je iets wilt wijzigen in een bestaande website. Stel je hebt een website met 50 pagina’s die elk een stuk of tien alinea’s hebben. De alinea’s zijn opgemaakt met Times New Romans en je wilt deze veranderen naar Arial. Wanneer deze zijn opgemaakt in HTML met het element: <font face=”Times New Roman, Times, serif”> dan zou je deze in elk van de 10 alinea’s op alle 50 pagina’s moeten wijzigen naar <font face=”Arial, Helvetica, sans-serif”>. Maar als de opmaak met CSS is gemaakt, hoef je alleen maar het CSS bestand te openen en p { font-family: “Times New Roman”, Times, serif; } te veranderen in: p { font-family: Arial, Helvetica, sans-serif; }. Ja ja dat is alles, maar één verandering op één plek.

Waarom niet?

Het is dus heel erg duidelijk dat het scheiden van inhoud en presentatie verre weg de meest praktische en minste tijd rovende techniek is om websites te ontwerpen. Dus waarom niet? Waarom zijn er nog zoveel beginner HTML cursussen die het nog op oude manier leren. Waarom zijn er nog steeds zoveel zakelijke websites die nog tabellen gebruiken voor de Lay-out. Waarom scheiden ze de presentatie niet van de inhoud? Waarom niet?

C$$

De tijd die je spaart met het volgen van de W3C aanbevelingen, zelfs al moet je alles over doen, is meer waard dan het geld in je zak. Het maakt een eind aan de oneindig herhalend coderen, spaart je ontelbaar veel uren van controleren op continuïteit in het ontwerp op de verschillende pagina’s, laat die frustraties liggen veroorzaakt door ingeklapte tabellen die je voor lay-out gebruikt. Als je door krijgt tot welke graad deze scheiding jou creativiteit stimuleert en hoeveel deuren naar innovatieve ontwerpen open gaan, zal je nooit meer een pagina op de oude mannier schrijven.

Doctype

John — Sat, 01 Mar 2008 11:05:55 +0000

Wat is een DOCTYPE en waar is hij goed voor? Heb ik zo’n DOCTYPE überhaubt nodig?

Er is niet maar één type HTML, er zijn er zelfs een heleboel: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, en nog vele anderen. Al deze typen van HTML zijn gedefinieerd in hun respectievelijke W3C specificaties, maar ze zijn ook gedefinieerd in een door machine leesbare taal die de juiste structuur, elementen en atributen van een type HTML specificeren. Zo’n definietie heet de “Document Type Definition”, of, afgekort, DTD.
~ Olivier Thereaux

Deze wordt gebruikt om de browser te laten weten welke versie van HTML je gebruikt. Als je hem niet gebruikt of verkeerd gebuikt, gaat de browser ervanuit dat je niet weet waar je mee bezig bent en zet hij zichzelf in ‘quirks mode’, die dingen niet rendert zoals het hoort. Het zou minder ‘kritiesch’ moeten zijn maar is eigenlijk lijkt het erg willekeurig en verwarrent. Het hoofdletter gebruik moet zijn zoals in het voorbeeld hier onder (met de in hoofdletters ‘DOCTYPE’). Hij wordt niet als andere tags afgesloten.
~ Patrick Griffiths - HTML Dog

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vergeet niet dat de DTD grote invloed heeft op hoe je de code die erop volgt moet formuleren. Somige DTD’s vereisen dat extra tags in je document zet. Om het wat makkelijker voor je te maken heb ik een lijstje van DTD’s opgesteld.

HTML

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <title></title>

 </head>

 <body>

 </body>

 </html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

 <html>

 <head>

 <title></title>

 </head>

 <body>

 </body>

 </html>

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

 <html>

 <head>

 <title></title>

 </head>

 <frameset>

 </frameset>

 </html>

XHTML

XHTML 1.0 Transitional

<?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

 <head>

 <title></title>

 </head>

 <body>

 </body>

 </html>

XHTML 1.0 Strict

<?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

 <head>

 <title></title>

 </head>

 <body>

 </body>

 </html>

XHTML 1.0 Frameset

<?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

 <head>

 <title></title>

 </head>

 <frameset>

 </frameset>

 </html>

XHTML 1.1

<?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

 <head>

 <title></title>

 </head>

 <body>

 </body>

 </html>

Niet alle browsers zijn gelijk geschapen

John — Sun, 24 Feb 2008 17:53:17 +0000

Het World Wide Web Consortium (W3C) ontwikkelt de standaard die regel geeft op het Internet. Jammer genoeg zijn er enkele bedrijven die van deze standaard afwijken bij het ontwikkelen van hun software. Het zal u wellicht niet verrassen als ik zeg te menen dat Microsoft één van deze bedrijven is. Alle versies van MS Internet Explorer tot en met versie 6 hebben grote problemen in de ondersteuning van CSS2. De nieuwe IE7 is een drastische verbetering, maar er zijn nog steeds verschillen in hoe CSS code wordt vertaald in verhouding met andere browsers. Microsoft schrijft ook eigen niet gestandaardiseerde code die alleen door Internet Explorer kan worden vertaald. Waneer je met MS Frontpage een website bouwt zijn er een redelijk aantal opties die zonder pardon of vermelding deze code gebruikt die door geen andere browser wordt ondersteund dan IE.

Persoonlijk geloof ik dat Firefox de browser is die meest conform de W3C standaard is ontwikkeld. Het is daarom ook de referentie browser voor deze website. Het zou dwaas zijn om de IE gebruikers te negeren, hoewel ik niet veel energie zou investeren om alles voor IE6 te optimaliseren. Het is niet redelijk om van webmasters te verwachten rekening te houden met verouderde versies van IE wanneer Microsoft zelf deze producten niet meer ondersteund. Browsers zijn in de regel gratis te downloaden. De automatische update van Windows XP installeert de upgrade naar IE7 en Vista wordt met IE7 geleverd. Op het moment van dit schijven zijn de helft van alle IE6 gebruikers al over op IE7. Natuurlijk als blijkt dat het gros van de bezoekers uit landen komen waar Windows 98 met IE5 nog gangbaar is, moeten wel degelijk stappen ondernomen worden om het voor deze mensen toegankelijk te maken. Vergeet niet, de bezoeker is koning.