Bjorn Simmering

Hoe schrijf je CSS? De Syntax van Cascading stylesheets

De syntax van CSS, met andere woorden, hoe schrijf je CSS? CSS bestaat uit de ‘selector’, de ‘property’ en de ‘waarde’.

CSS heeft een bepaalde syntax. Dit zijn de regels die je moet volgen bij het schrijven van css.

css selector propertie declaratie

css syntax schrijven

Elke verwijzing van CSS bestaat uit minstens 3 onderdelen.

de selector
de property
een waarde

CSS syntax:

selector{property: waarde;}

Properties
Het is ook perfect mogelijk om meerdere properties toe te kennen aan 1 selector. Zoals een tekst in het vet en cursief te plaatsen. We scheiden hiervoor alle propertys van elkaar met ; . Lees verder >>

Hoe maak je een uitklapmenu met HTML en CSS?

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 menu is geheel gemaakt met HTML en CSS.

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’. Lees verder >>

WordPress installeren voor beginners

Het meest gebruikte systeem om een website mee te maken is WordPress. Dit systeem is gebruiksvriendelijk, intuitief, gemakkelijk te installeren en ook nog eens gratis in gebruik. Of je er nu een eenvoudige blog mee wilt maken of een uitgebreide webwinkel. Het is mogelijk met WordPress.

In dit artikel leer ik je:

1. Waar je WordPress kunt vinden om het te installeren
2. Hoe je WordPress installeert op de technische manier
3. Hoe je WordPress installeert op de eenvoudige manier

Waar kun je WordPress vinden?

We gaan aan de slag! De meest recente versie van WordPress kun je vinden op de website van WordPress zelf, WordPress.org. De downloads staan op de speciale download pagina. Meestal verschijnt er gelijktijdig met de release van de Engelstalige versie een Nederlandstalige WordPress versie. Lees verder >>

Hoe maak je een prijsoverzicht in HTML en CSS?

Je kent ze vast wel, van bijvoorbeeld een hosting bedrijf. Een prijsoverzicht met bijvoorbeeld vier mogelijkheden waaruit je kunt kiezen met bovenaan, of juist onderaan de juiste prijs.

Dit kun je maken met een afbeelding, maar het is prima mogelijk om een prijsoverzicht te maken met CSS, in combinatie met HTML. Het voordeel daarvan is dat je eenvoudig onderdelen kunt aanpassen op het moment dat er iets verandert.

Als de prijs omhoog gaat hoef je alleen maar de HTML code aan te passen en niet een hele afbeelding.
Daarnaast is HTML code natuurlijk veel beter als het gaat om zoekmachine optimalisatie. Lees verder >>

Hosting voor beginners

Wat is webhosting eigenlijk? Dat is iets wat je wel moet weten wanneer je een website online wilt gaan zetten. Hoe werkt een en ander en wat betekent het nu allemaal. In dit artikel willen we je de basis vertellen over alles wat met hosting te maken heeft.

Wat is webhosting?

Over het algemeen bestaat een webpagina uit tekst en plaatjes. De informatie noemen we content en het uiterlijk van de pagina wordt design genoemd.

Om je pagina beschikbaar te maken voor anderen moet deze op een webserver geplaatst worden. Je moet dan denken aan een computer waarop tientallen of honderden websites staan. Deze computers hebben een supersnelle verbinding met het internet. Lees verder >>

Hoe zet je muziek op je website?

Muziek op je website zetten is niet zo ingewikkeld. In een paar stappen heb je leuke muziek op je website staan.

Toch eerst even een paar waarschuwingen vooraf. Het komt voor dat als er automatisch muziek begint te spelen op een site dat bezoekers snel wegklikken, omdat ze hier niet van gediend zijn, zeker als ze nergens een knop zien om de muziek uit te zetten. Hou er dus rekening mee dat de keuze van jouw favoriete muziek een ander mateloos kan irriteren.

Er is een aantal manieren om muziek op je site te zetten. Lees verder >>

De opzet van een artikel

Een artikel dat je schrijft voor je weblog of website bestaat uit een aantal onderdelen. Wanneer je daaraan voldoet heb je een goed artikel geschreven. Met goede artikelen trek je bezoekers.

De titel

Voor zoekmachine optimalisatie, maar ook voor je bezoeker is de titel het belangrijkste eerste onderdeel. Wanneer je hiermee de aandacht weet te trekken dan is de eerste indruk goed.

Een titel is belangrijk voor de zoekmachine omdat hier veel waarde aan gehecht wordt. Hierin kun je dus belangrijke en relevante woorden plaatsen. Lees verder >>

Het 10-stappen Plan om een Website te Maken

Hoe maak je een website? Wat moet je kennen en kunnen, wat heb je nodig?

In dit 10-stappen plan vertel ik je stap voor stap wat je allemaal nodig hebt voor een website en hoe je dat kunt leren en waar je meer informatie kunt vinden.

10 stappenplan om een website te maken

1. Onderwerp

De eerste stap die je neemt is bedenken wat het onderwerp wordt van je website. Je gaat ergens een website voor maken. Wil je een bedrijfje beginnen? Dan kan dat een goede reden zijn. Of je gaat een website maken voor de voetbalclub. Of omdat je het gewoon leuk vindt, als hobby. Lees verder >>

Hoe kan ik een plaatje uitlijnen met CSS

Een plaatje mooi uitlijnen naar links of rechts werd in html gedaan met align=”left” of “right”. Met CSS gaat dat op een iets andere manier, namelijk met floating. Hoe je een plaatje goed kunt uitlijnen en dit floaten standaard aan je CSS toevoegt leer je in dit artikel.

Wanneer je een plaatje toevoeg aan een paragraaf doe je dat over het algemeen op de volgende manier:

  1. <p>
  2. <img src="plaatje.jpg" alt="plaatje"> Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
  3. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  4. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  5. reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  6. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
  7. sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  8. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  9. </p>

Nu is het zo dat het plaatje gewoon boven de tekst komt te staan, of de tekst staat naast het plaatje aan de onderkant. Dat is niet zo mooi. Lees verder >>

HTML en CSS: Hoe maak je tekst vetgedrukt?

Hoe maak je tekst vetgedrukt? In HTML en CSS zijn daar verschillende manieren voor en in dit artikel wil ik deze even met je langslopen.

Van eenvoudig vet maken van woorden en tekst tot het gebruiken van koppen en tussenkoppen op volgorde van belangrijkheid.

Bold en strong

Allereerst hebben we de html tag <b>. Dit is de meest basale en eenvoudige vorm om een stukje tekst vet te maken. Bijvoorbeeld omdat je dat mooi vindt staan. Door deze tag te gebruiken geef je verder niets aan zoals nadruk.

Daar heb je namelijk een andere tag voor: <strong>. Met strong benadruk je een stukje tekst omdat je dit net wat belangrijker vindt dan de tekst die er omheen staat. Je geeft aan je lezers weer dat je nadruk ergens op legt, vandaar dat de Engelse benaming strong wordt gebruikt. Lees verder >>