WordPress Website opzetten voor beginners
Geplaatst op 7 maart 2013 in categorie algemeen
Ben je nieuw op het gebied van websites bouwen? Duizelt alle informatie die je op deze en andere websites kunt vinden? Een duidelijk stappenplan in het opzetten van een website is dan wel gemakkelijk en handig.
Je kunt twee kanten op. Ga je jezelf toespitsen op het leren van de techniek, of wil je juist een website om datgene waar je goed in bent voor het voetlicht zetten.
HTML en CSS leren?
De eerste optie is goed als je precies wilt weten hoe alles werkt. Je leert eerst HTML en CSS en gaat daarna steeds een stapje verder. Heel handig en het kan je hopen geld besparen. Je bent namelijk de eerste niet die iemand anders moet inhuren om iets aangepast te krijgen in een door een webdesigner gemaakte website.
WordPress?
De andere mogelijkheid is WordPress. Door met WordPress te gaan werken sla je de technische stappen voor een groot deel over. Niet dat je daar niets aan hebt, maar je kunt eerst je website neerzetten en je dan, op je gemak gaan verdiepen in de techniek. Maar je website staat.
Een eenvoudig stappenplan WordPress
1. Selecteer een domeinnaam
2. Leg de domeinnaam vast
3. Installeer WordPress in 5 minuten
4. Selecteer een WordPress layout
5. Pas je WordPress layout aan, naar je wensen
5 stappen
Deze 5 stappen zijn nodig bij een simpele persoonlijke website tot een uitgebreide zakelijke website. Net wat jij nodig hebt.
Alle stappen zien er eenvoudig uit en ze zijn het in feite ook. Je moet net weten hoe je dit moet doen.
Hoe bepaal je een goede domeinnaam en hoe gaat dat met vastleggen?
Hoe zit dat precies met die fameuze 5 minuten installatie?
Waar vind je de beste layout voor je WordPress website?
Hoe pas je de layout en de website achter de schermen nu eigenlijk aan?
Veel vragen die ik beantwoord in mijn WordPress training. Gemaakt voor beginners, goed te volgen voor iedereen die een volgende stap wil maken. Bijvoorbeeld van een blogspot website naar een eigen website.
Video training
Voor elke stap zijn er video’s gemaakt. Alles komt duidelijk zichtbaar in beeld. Mocht je ergens vastlopen dan stuur je een mail en dan proberen we samen de oplossing te vinden.
En het mooiste van alles is dat je een domeinnaam en de webruimte al niet meer hoeft te regelen. Dat heb ik alvast voor je gedaan. Heb je daar geen omkijken meer naar.
Deze training kost slechts 97 euro. Je hebt dan levenslang toegang tot de cursus. Daarnaast heb je een jaar lang de domeinnaam en de hosting tot je beschikking.
CSS selectors, de familie
Geplaatst op 4 maart 2013 in categorie css
In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.
We gebruiken hiervoor een simpele html opzet.
Ancestor
Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.
Descendent
Descendent – (afstammeling): Een tag in een tag is een afstammeling. In de afbeelding is <body> de afstammeling van <html>.
Tegelijkertijd is <p> een afstammeling van en <body> en <html>.
Parent
Parent – (ouder (in de vorm van vader of moeder)): Een parent is de meest directe stamvader (ancestor). In ons voorbeeld is de <html> tag dus Parent van <body> en <head>, maar niet van alle andere tags.
De <p> tag is de parent van de <em> tag.
Child
Child – (kind): Logischerwijs is dit de benaming voor de tag die direct gerelateerd is aan de voorgaande tag. <h1> en <p> zijn children van <body>. <em> is geen kind van <body> omdat deze onder de <p> valt.
Sibling
Sibling – (broer/zus): Tenslotte heb je de sibling. Deze kun je zien als broer of zus van een andere tag. In ons voorbeeld zijn <h1> en <p> siblings. Evenals <body> en <head>.
Pseudo classes voor links
De meest bekende en gebruikte pseudo classes zijn die voor links. Er zijn vier varianten om een link vorm te geven.
a:link – hiermee wordt de link geselecteerd die nog niet bezocht is en de muis gaat niet over de link heen.
a:visited – Dit is een link waar al eerder een bezoek aan is gebracht. Je kunt een bezochte link dus al informatie meegeven.
a:hover – Hiermee kun je de link voorzien van een mouseover effect. Bijvoorbeeld door een tabblad te voorzien van een andere kleur als je er met de muis over gaat.
Dit effect mag je overigens ook gebruiken voor andere elementen dan een link. Je kunt bijvoorbeeld een paragraaf laten oplichten, zoals ik hieronder laat zien.
Dit is een testparagraaf, ga er eens over met je muis…
Dit is gedaan met de volgende stijl:
p.over {border: 1px solid black;}
p.over:hover {background-color: #333; color: #FFF;}
a:active – Op het moment dat een bezoeker daadwerkelijk klikt kun je ook nog activiteit laten plaats vinden. Bijvoorbeeld het veranderen van kleur.
:first-letter en :first-line
Vervolgens zijn er de twee pseudo elementen :first-letter en :first-line. Je kunt al wel raden waar deze voor bedoeld zijn. Wanneer je de eerste letter van een paragraaf anders wilt vormgeven dan normaal, gebruik dan :first-letter. Wil je de hele eerste regel bijvoorbeeld vetgedrukt hebben in een paragraaf, dan gebruik je :first-line. Dit pas je op dezelfde manier toe als het voorbeeld hierboven met de :hover functie.
In het volgende artikel ga ik het hebben over een volgende rij met pseudo selectors zoals :before en :after.
Dit is het tweede deel van vier artikelen over CSS selectors
Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog
SEO, wat nu?
Geplaatst op 28 februari 2013 in categorie algemeen
We leven in een post Panda en penguin tijd. Huh, wat bedoel je? Vraag je je af…
Ik heb het natuurlijk over de updates van Google die nu een tijdje actief zijn en die toch wel de nodige gevolgen hebben gehad voor webmasters.
De Panda update was met name bedoeld om inhoudelijk matige en magere content uit de zoekmachines te halen.
De Pinguin update richtte zich meer op over-geoptimaliseerde websites. Ja ja, ook dat kan namelijk. Je website zo bouwen dat deze helemaal perfect aansluit op wat zoekmachine spiders zouden willen.
Lees verder »
Hoe maak je een uitklapmenu met HTML en CSS?
Geplaatst op 25 februari 2013 in categorie algemeen
Een horizontaal menu waarbij het submenu uitklapt. Erg handig wanneer de ruimte horizontaal niet zo breed is en je wilt er toch mogelijkheden onder zetten.
Dit submenu is geheel gemaakt met HTML en CSS. Oudere browsers hebben soms nog wat moeite met sommige CSS, dus daar kan het zijn dat het niet optimaal werkt. Vanaf IE7 werkt het in ieder geval.
Om het menu op te zetten gebruiken we een ongeordende lijst (ul)
In een van de menu onderdelen plaatsen we een ‘geneste’ lijst. Een ‘geneste’ lijst betekent dat deze onderdeel is van een link in het menu.
De HTML code voor deze pagina:
< !DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>Uitklapmenu</title> <link rel="stylesheet" type="text/css" media="all" href="stijl.css" /> </head> <body> <div id="navsite" class="clearfix"> <p>Site navigatie:</p> <ul> <li><a href="/">Home</a></li> <li><a href="/over-ons/">Over ons</a></li> <li><a href="/archief/">Archief</a></li> <li><a href="/schrijven/">Schrijven</a> <ul> <li><a href="/schrijven/tutorials">Tutorials</a></li> <li><a href="/schrijven/boeken">Boeken</a></li> </ul> </li> <li><a href="/video/" id="current">Video</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> </body> </html>
Hier zie je dus dat menu onderdeel ‘schrijven’ een submenu bevat met ‘Tutorials’ en ‘Boeken’.
Deze submenu items moeten straks niet zichtbaar zijn op het moment dat je de pagina bezoekt. Pas als je met de muis over het item ‘Schrijven’ gaat dan moeten de beide submenu onderdelen zichtbaar worden.
De lijst ziet er zonder CSS kaal uit:
Vandaar dat we css gaan toevoegen. Het woord ‘Site navigatie’ hoeft niet zichtbaar te zijn, daarvoor gebruik je ‘display: none;’.
Lees verder »
Luondo, nu ook digitale producten verkopen
Geplaatst op 21 februari 2013 in categorie e-commerce
Wellicht is het je wel eens opgevallen dat ik fan ben van de webwinkelaanbieder Luondo. Zo heb ik daar verschillende webwinkels op draaien en ik ben erg tevreden over het systeem.
Ooit heb ik wel eens nagedacht over het aanbieden van digitale producten via een webwinkel, maar dat kwam er nooit van omdat het meestal praktisch niet mogelijk was zonder allerlei ingewikkelde aanpassingen.
Digitale producten verkopen
Luondo biedt echter nu de mogelijkheid aan om je digitale producten te gaan verkopen via een webwinkel.
