Category: HTML

HTML en CSS bij de modules HTM21 en HTM22.

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 ver… Meer

ScrollMagic

ScrollMagic is een makkelijke manier voor lastige animaties. ScrollMagic is een Javascript library speciaal voor het maken van animaties die getriggerd worden door scrollen.

Via https://ihatetomatoes.net/courses/ kun je hier een v… 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 gewo… 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 Zoek een afbeelding van 300ppi op internet en van voldoend… Meer

Goede bestandsnamen gebruiken

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 zi… Meer

Collapsing margin-top

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 dr… 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

Child selectoren

inline-block vs float

HTML elementen naast elkaar plaatsen kan op verschillende manieren. In deze korte tut wil ik float en inline-block bespreken. Optisch gezien is er weinig verschil tussen beiden. In beide gevallen komen de elementen naast elkaar te staan… Meer

Sitemaps

Voordat je met je site kunt beginnen moet je veel zaken al besloten hebben. Denk maar aan het doel van de website, de doelgroep, wat de klant wil bereiken. Je moet weten hoeveel inhoud je straks kwijt moet op je site, deze informatie heb je nodi… Meer

Formulieren stijlen

Formulieren stylen

In combinatie met tabellen of div’s kun je je formulier mooi opmaken. Dit doe je zodat je formulier in stijl met je website blijft maar dit doe je ook om het je gebruiker makkelijker te maken. Je kunt namelijk bij het opmaken van je formu… Meer

Formulieren

Een van de meest bekende manieren voor bezoekers om contact met je op te nemen is met behulp van een formulier. In tegenstelling tot een gewoon e-mail adres hoeft een gebruiker geen e-mail programma op te starten maar kan men direct, vanaf jo… 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 wo… 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 geschi… Meer

Child selectoren

Over child en sibling selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id / class) binnen een andere tag (of id / class) zit. Door descendent selectoren te gebruiken hou je de ruimte om elementen te stij… 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 conte… Meer

Mediaqueries

Mediaqueries

Een mediaquery stelt je in staat om binnen je stylesheet stijlen aan te geven die gelden onder een bepaalde voorwaarde. Dit kan zijn schermbreedte, scherm orientatie (portrait of landscape). Een mediaquery is een stukje code ter uitbere… Meer

One page parallax

One page designs zijn veel gezien tegenwoordig. Ze zijn bijzonder handig wanneer je niet heel veel content aan te bieden hebt en je bezoeker niet al te veel wilt laten klikken. Ik vind het zelf ook goed werken voor mobiel gebruikt aangezien e… Meer