Zifp.nl » Nieuws http://zifp.nl Web Development: HTML PHP CSS en Javascript Wed, 02 Feb 2011 12:01:49 +0000 en hourly 1 HTML, CSS en Javascript vanaf de bodem op http://zifp.nl/nieuws/html-css-en-javascript-vanaf-de-bodem-op/ http://zifp.nl/nieuws/html-css-en-javascript-vanaf-de-bodem-op/#comments Tue, 21 Sep 2010 21:44:44 +0000 Admin http://zifp.nl/?p=162 Voor de beginnende web developer heeft Google een reeks video tutorials waarin uitglegd word hoe je een webapplicatie moet maken. In de video tutorials word de basis van HTML, CSS en JavaScript uitgelegd en hoe je deze talen kunt gebruiken voor het maken van een webpagina.

Ook voor de wat meer gevorderden valt er nog het een en het ander te leren uit deze tutorials.  Waarbij bij andere tutorials de meeste aandacht uit gaat naar het leren van alle elementen, gaat bij deze tutorial de meeste aandacht naar wat juist gebruik is van je code.

De cursus is in het Engels.

De cursus bestaat uit 4 delen:

  1. Introductie
  2. HTML
  3. CSS
  4. JavaScript

De bestanden die gebruikt worden in deze Handleiding kun je hier vinden: lab2.zip

Denk er aan dat je de tutorials fullscreen bekijkt omdat ze anders onleesbaar zijn.

Introductie

HTML

Presentatie:

Meest gebruikte HTML elementen:

Tag Betekenis Display Uitleg
<div> division block Met het DIV element kan een deel (division) van een HTML-document worden ingesloten.
<span> er, span inline Met het SPAN element kan een beperkt inline deel van een HTML-document worden ingesloten.
<h1> t/m <h6> headline 1-6 block Gebruiken voor een kop van een tekst.
<a> anchor inline Gebruiken voor links.

Gebruik het attribuut  <a href=” “> om aan te geven waar je naar toe wil linken.

De volgende CSS pseudo selectors zijn bruikbaar (:visited, :link, :hover).

Standaard CSS opmaak: (text-decoration: underline)
<table> table block Tabellen. Niet gebruiken voor opmaak van een pagina.
<ul> unordered list block Een lijst waarbij de volgorde onbelangrijk is.
<ol> ordered list block Een lijst waarbij de volgorde belangrijk is.
<li> list item block Lijstelementen. Word binnen een <ul> of <ol> element geplaatst
<dl> definition list block Gebruiken als je ergens een definitie van wil geven
<em> emphasize inline Gebruiken voor tekst waar je nadruk op wil leggen

Standaard CSS opmaak: (font-style: italic)
<strong> emphasize inline Gebruiken voor tekst waar je extra nadruk op wil leggen

Standaard CSS opmaak: (font-weight: bold)
<form> form block Een formulier waarin een gebruiker dingen kan invullen
<fieldset> set of fields block De invulvelden die bij een formulier horen.
<label> field label inline Een label die hoort bij uitleg geeft over een input veld van een formulier.

Oefeningen:

CSS

Presentatie:

Walkthrough:

Oefeningen:

JavaScript

Presentatie:

Oefeningen:

]]> http://zifp.nl/nieuws/html-css-en-javascript-vanaf-de-bodem-op/feed/ 0 Google Font Directory http://zifp.nl/nieuws/google-font-directory/ http://zifp.nl/nieuws/google-font-directory/#comments Thu, 20 May 2010 18:23:41 +0000 Admin http://zifp.nl/?p=86 Een paar weken geleden legde ik in dit artikel uit hoe je @font-face kon gebruiken om je eigen fonts op een webpagina te gebruiken. Nu is het gebruiken van andere fonts nog gemakkelijk gemaakt.

Google heeft namelijk een bibliotheek met vrij beschikbare fonts ter beschikking gesteld. Met de Google Font Directory en de Google Font API wil de zoekgigant het gebruik van fonts op webpagina’s gemakkelijker maken.

Op deze pagina kun je zelf je eigen lettertype samenstellen waarbij Google de code genereert die je voor je webpagina kunt gebruiken.

Je kunt natuurlijk ook zelf naar een font toe linken door een link in de head van je HTML te plaatsen:

Code blok   
<head>
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
</head>

Daarna kun je deze font gewoon in je CSS gebruiken:

Code blok   
h1 { font-family: 'Cantarell', arial, serif; }

Het grote voordeel van deze service is dat je niet zelfs je eigen fonts hoeft te hosten. Ze staan namelijk allemaal op de server van Google die in veel gevallen sneller is dan je eigen server. Ook zijn alle fonts open en vrij te gebruiken zodat je naderhand niet word overvallen door copyright problemen.

Browsers die ondersteunt worden zijn :

  • Google Chrome: versie 4.249.4 of hoger
  • Mozilla Firefox: versie 3.5 of hoger
  • Apple Safari: versie 3.1 of hoger
  • Microsoft Internet Explorer: versie 6 of hoger
  • Opera versie 10 of hoger
]]> http://zifp.nl/nieuws/google-font-directory/feed/ 0