Category: HTML

HTML en CSS bij de modules HTM21 en HTM22.

Fluid in plaats van responsive

Het is noodzakelijk om via mediaqueries breakpoints op te nemen in je site. Maar… zeker wanneer het om smartphones gaat dan zijn er zeer veel schermmaten mogelijk. Met een mediaquery kun je een algemene richtlijn opzetten maar fijner… Meer...

Bestandsgrootte voor web

Vaak lezen en horen we dat afbeeldingen voor het web 72 pixels per inch moeten hebben (72ppi). Maar klopt dit? Moet dit echt zo zijn? In deze opdracht ga je dit zelf bekijken.

Opdracht

  1. Zoek een afbeelding van 300ppi op internet en van voldoende
Meer...

Naming conventions

Naming conventions gaat over het juist benamen van bestanden en mappen zodat mensen en servers er mee overweg kunnen. Het gaat ook om de plaatsing van je files. Zowel mens als server moeten weten waar bepaalde bestanden te vinden zijn. Er zijn… Meer...

Maak een schaalbare achtergrond met CSS

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. Echter, een achtergrond afbeelding kan netjes schaalbaar zijn maar helaas toch uit verhouding. Dit komt omdat de hoogte van de afbeelding in verhouding… Meer...

Collapsing margin-top probleem

Je kent het wellicht wel: je hebt een container gemaakt met daarin een header. De header heeft een aantal pixels margin-top maar tot je verbazing wordt deze margin-top toegekend aan de container en niet aan de header!

Opdracht

Probeer de drie… Meer...

Een print css maken

Het kan nuttig zijn om een apart stylesheet aan te maken voor een pagina die geprint moet worden. Bijvoorbeeld omdat je een kortingsbon wilt weggeven via internet of omdat je je cv printbaar wilt aanleveren aan een toekomstig werkgever. Om … Meer...

inline-block vs float

Wat is het verschil precies tussen een element display inline-block of een float te geven? Optisch gezien weinig. In beide gevallen komen de elementen naast elkaar te staan. Qua gedrag in de code is er wel een verschil. Floating elementen worden… Meer...

Je site online zetten

Er is een handleiding geschreven over het online zetten van je website op de glr-imd server. Mocht je een andere domeinnaam (en dus een andere host) kiezen dan kan dat. Uploaden zal grotendeels hetzelfde werken. Je moet alleen de username, … Meer...

Sitemaps

In een sitemap teken je de onderlinge relaties tussen alle pagina’s van je website. Je tekent een schema waarop je kunt zien hoeveel pagina’s jouw website heeft en welke pagina direct vanaf de homepage zichtbaar is en welke pagina… Meer...

Formulieren stylen

Formulieren worden op websites geplaatst om gebruikers uit te nodigen om met jou te communiceren. Het is dan ook belangrijk dat de eerste kennismaking met de communicatie er goed verzorgd uitziet. In combinatie met tabellen of div elementen… Meer...

Viewport meta tag

Met de viewport meta tag kun je de breedte en schaal van je website instellen voor mobiele apparaten. Dit is essentieel, je geeft namelijk weer wat 100% is. Doe je dit niet dan zal je website op een mobiel apparaat als gewone website getoond worden.… Meer...

Werken in percentages

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschikt… Meer...

Descendent selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id of class) binnen een andere tag (of id of class) zit, bijvoorbeeld “ul li”. Maar je kunt veel nauwkeuriger stijlen… Meer...

Tabellen stijlen

Zoals je weet kun je je tabel en je cellen goed met CSS stylen. Wat je je echter goed moet realiseren is dat je vormgeving voor je tabel en vormgeving voor je tabelcellen moet aanleveren.

Opdracht

1. Breinbreker

Als ik mijn tabel een border-radius… Meer...

Tabellen

Regelmatig moet er op een website informatie worden geordend. Denk maar aan een site met een overzicht van producten, hierin staan afbeeldingen netjes onder elkaar met tekst er naast bijvoorbeeld. Meestal zijn dit websites die hun content… Meer...

SVG files

Een SVG file is een schaalbare vector file. Deze maak je in Illustrator en exporteer je vervolgens naar een stukje script wat je kunt insluiten op je pagina. Het grote voordeel van SVG files is dat ze hun scherpte behouden wanneer de pagina… Meer...

Google map toevoegen

Een gewone kaart insluiten is vrij eenvoudig. Echter, je kunt redenen hebben om de kaart qua kleurenpalet aan te passen aan je eigen website. In deze post vind je een aantal links naar sites die hier op in gaan. Eerst het insluiten van een gewone… Meer...

SEO

Hoe SEO te integreren in je website?

SEO is de afkorting voor Search Engine Optimalisation oftewel Zoek Machine Optimalisatie. Meestal hebben mensen het dan over Google. Aangezien Google natuurlijk het overgrote deel van de markt in handen… Meer...

Webfonts

Webfonts zijn fonts omgezet voor het internet. Nog niet heel lang geleden was je als ontwerper beperkt tot fonts als Verdana of Arial voor je ontwerp. Tegenwoordig kun je met behulp van CSS aparte fonts op je site gebruiken. De meest gangbare… Meer...