De website maken!
Ongelofelijk……. nu gaan we pas beginnen met het feitelijk bouwen van onze website zelf! Er zijn veel systemen en veel mogelijkheden. In dit hoofdstuk zal ik het hebben over HTML en CCS (Cascading Style Sheets). Waarom in HTML? Veel systemen en WYSIWYG editors genereren of maken gebruik van HTML en CCS. Zo werken de meeste CMS systemen met templates en deze templates zijn vaak gemaakt in een combinatie van HTML en PHP(PHP: Hypertext Preprocessor). Deze naam geeft aan waar de taal meestal voor gebruikt wordt: informatie verwerken tot hypertext (meestal HTML en XHTML). U wordt geen programmeur, maar u heeft wel enige kennis van HTML nodig om met de meeste CMS systemen te werken. Dit hoofdstuk is bedoeld om u een basiskennis te geven zodat u kan werken met uw WYSIWYG editor of CMS syteem. Later komt er ook nog een HTML en CSS gedeelte in mijn blog en ga ik een paar open source CMS systemen behandelen.
Lees de handleiding!
U kunt niet wachten om te beginnen met het maken van uw nieuwe website in uw CMS of WYSIWYG editor. Lees eerst de handleiding zodat u weet wat uw software kan en niet kan. Lees in ieder geval de “snelle start” .
CSS
Cascading Style Sheets worden gebruikt om te beschrijven hoe uw webpagina er uitziet. Hoewel je de CSS code kunt opnemen in de HTML, is het beter en verstandiger op deze in een apart CSS-document te te plaatsen en deze in de HTML pagina op te roepen.
HTML pagina.
Een HTML pagina bestaat uit elementen en deze worden omsloten door tags. Een tag (Nederlands: etiket) is in HTML een (relevant) sleutelwoord of term geassocieerd met, toegewezen aan of opgenomen in een onderdeel/element). De tag geeft aanvullende informatie over het element waaraan het is gekoppeld en maakt zodoende sleutelwoord gebaseerde classificatie en indexering mogelijk. Dit is een hele mond vol maar wil eigenlijk gewoon zeggen een begin en eind aanduiding van een element/onderdeel van de html pagina. Elke HTML pagina begint met een document aanduiding, die de webbrowser verteld wat er komen gaat. Een (X)HTML pagina die aan de webstandaarden voldoet begint als volgt: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>.
Alle elementen van een HTML pagina worden omsloten door een tag-openen en een tag-sluiten, zoals <p>Hallo allemaal.</p>, of door een enkele tag, zoals <img scr=”mijnfoto.jpg”>. Een HTML pagina begint en sluit met de tag <html>Pagina content</html>. Als u goed kijkt weet u nu meteen het verschil tussen een tag openen en een tag sluiten. Tag openen ziet er als volgt uit: <h1>. Een tag sluiten is bijna gelijk, maar heeft een schuine streep na het eerste haakje: </h1>. Tags kunnen extra parameters bevatten om een stijl of id te koppelen. Neem bijvoorbeeld <p class=”voorbeeld”> . Als u een stijl met de naam voorbeeld zou hebben zou deze nu hier worden toegepast, terwijl bij de normale tags <p> deze niet wordt toegepast.
“class” Is een stijl element die gedefinieerd wordt in uw CSS document en is meerdere keren te gebruiken in één HTML pagina. Zo is “id” ook een element die in uw CSS document staat. Deze kan echter slechts éénmaal voorkomen in een HTML pagina. Hieronder heb ik een HTML pagina geschreven. Deze is simpel maar geeft een indruk hoe HTML werkt. Voor alle tag benamingen en wat deze kunnen verwijs ik naar handleidinghtml.nl . Daar treft u veel over de diverse tags en hun mogelijkheden.
De pagina:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<HTML>
<HEAD>
<TITLE>Dit is mijn eerste homepage</TITLE>
</HEAD>
<BODY>
<H1>De belangrijkste kop</H1>
<P>Een <A HREF=”hyperlinks.html”>hyperlink</A> is simpel.</P>
<P>Tekst kun je ook in <B>vet</B> of <I>cursief</I> weergeven.</P>
</BODY>
</HTML>
Als u deze tekst in kladblok of een andere teksteditor typt en opslaat als html pagina (.htm of .html) met de naam index heeft u de eerste pagina gemaakt in HTML. Gebruik GEEN Word hiervoor daar Word een tekst verwerker is en allerlei ander codes in het document stopt waardoor het niet goed gaat werken. Ook als je het in Word als HTML document opslaat. Nadat je het opgeslagen heeft kan je het openen van af je eigen computer in uw webbrowser en ziet u meteen het resultaat (dit werkt alleen bij HTML).
WYSIWYG editors werken meestal met het knippen en plakken systeem en genereren daarbij de HTML code, dus waarom dan HTML kennis op doen? Wel eigenlijk heel simpel, soms wilt u iets en dat werkt niet wanneer u dat in de WYSIWYG mode. Dit is ook iets wat bij de meeste CMS systemen zo werkt. Deze werken ook met een ingebouwde WYSIWYG editor zoals TinyMCE en ook daar moet je heel af en toe werken in HTML mode.
Succes met het maken van je website.