HTML is de taal die zit achter een website. Er bestaan hulpprogramma's (Dreamweaver, enz) die deze code voor je genereren, maar elke webdesigner komt ooit wel eens in aanraking met HTML. Zelfs CMS-liefhebbers die uitsluitend met Wordpress, Joomla of Drupal werken. Wanneer je rechtstreeks in de HTML-code werkt, is je code zuiver en to the point. Het resultaat is zoals je het wenst en de site laadt snel in. Je moet overigens ook HTML kennen om een stapje verder te gaan en met Javascript, PHP of JQuery aan de slag te gaan. Na HTML4, kwam er XHTML (Extended HTML), een uitbreiding op HTML. Deze taal was stricter en strenger, waardoor je je aan meer regels moest houden. Aan 9 regels om precies te zijn. De opvolger van XHTML is terug HTML, maar dan versie 5. Deze veelbelovende versie biedt nieuwe mogelijkheden aan. In deze cursus bespreken we HTML4, XHTML én HTML5.

CSS is een taal waarmee je een website een opmaak kan geven. In het hedendaagse webdesign moet structuur gescheiden worden van opmaak. De kennis van CSS is dan ook erg belangrijk. CSS is niet enkel verplicht, je kan er ook mooie consequente lay-outs mee bouwen die je later op heel vlugge manier kan aanpassen qua lay-out. CSS3 is de nieuwste versie.

Tot slot leer je, in deze cursus, werken met (gratis) CSS Frameworks (960gs en skeleton) en leer je responsive websites maken. Dit zijn sites die ook op mobiele apparaten als smartphones (iPhone, ...) en tablets (iPad, ...) correct en overzichtelijk vertoond worden.

Dit leer je maken: Voorbeeldhoofdstuk

HTML

• Inleiding
    > Wat is een website? Wat is html, css, xhtml en php? 3 manieren om een website te maken. Het browserprobleem.
• Tag, element, attribuut en waarde
    > Wat is een tag? Wat is een element, attribuut en waarde?
• Welke software heb je nodig?
    >
• Html, head en body
    > Welke structuur heeft elke html-pagina?
• Kleurgebruik, eenheden, figuren, bestandsnamen en tags combineren
    > Hoe kan je werken met kleurcodes? Pixel versus percent. Hoe kan je werken met paden? Welke bestanden kan je gebruiken?
• Body
    > Werken met de body-tag
• Tekstopmaak: teken, alinea, lijn en speciale tekens
    > Welke soorten van lettertypes zijn er? Typografie. Welke lettertypes mag je gebruiken in HTML? Hoe kan je speciale tekens invoegen in HTML?
• Figuren
    > Hoe kan je een figuur invoegen en uitlijnen? Welke bestandstypen kan je gebruiken? Welke zijn de verschillen? Wat is een broken link? Hoe kan je dit herstellen?
• Hyperlinks
    > Welke soorten hyperlinks zijn er? Wat zijn relatieve en absolute linken? Wat is een bladwijzer, bookmark en hotspot? Hoe maak je een thumbnail? Hoe wijzig je de hyperlinkkleuren?
• Tabellen
    > Hoe maak je een tabel? Welke tags heb je nodig? Waarom tabellen?
• Multimedia
    > Hoe voeg je video, audio en flashanimaties in?
• Formulieren
    > Hoe maak je een formulier? Hoe voeg je een tekstvak, tekstgebied, keuzelijst of -rondjes in? Hoe verzend je een formulier?
• Frames
    > Ze zijn passe, maar toch bespreken we ze kort: frames
• Divs
    > Wat zijn divs en waarvoor gebruik je ze?
• Iframes
    > Wat is een iframe? Waarom iframes en niet divs of frames?
• Trends: frames, tabellen en divs
    > Welke trends zijn er bij webdesign?
• Commentaar
    > Wat is commentaar en waarvoor gebruikt men het?
• Metatags
    > Wat zijn metatags? Wat zijn keywords, description, enz?
• Toepassingen: Google Maps en YouTube integreren
    > Hoe kan je een google map of een filmpje van Youtube invoegen in een website?
• Javascript
    > Wat is Javascript? Een voorbeeld aan de hand van het blokkeren van de rechtermuisknop.
• Lightbox gebruiken
    > Hoe kan je lightbox2 gebruiken om foto's via knappe effecten te vertonen?
• Elk lettertype gebruiken via Cufon
    > Wat is Cufon? Hoe kan je cufon gebruiken in een website?
• Van HTML naar XHTML
    > Wat is XHTML? Wat is het verschil met HTML4 en HTML5? Aan welke 9 regels moet je je houden?
• HTML valideren
    > Hoe kan je HTML valideren? Wat is W3C valid?

 

CSS

• Waarom CSS - De voordelen
    > Wat is CSS? Waarom Cascading Style Sheets gebruiken? Waarom niet alle opmaak in HTML plaatsen? Welke voordelen heeft CSS?
• De syntax van CSS
    > Wat is een selector, eigenschap of waarde?
• CSS plaatsen in, of koppelen vanuit een webpagina
    > Hoe kan je css plaatsen in een html-pagina? Hoe leg je een koppeling naar een extern css-bestand? Welke methode is het best?
• Tags, id's, klassen en pseudo-klassen
    > Wat zijn id's en klassen? Wanneer gebruik je ze? Wat is een pseudo-klasse?
• Eigenschappen: kleur en achtergrond
    > Hoe werk je met kleuren in CSS? Hoe werk je met achtergrondkleur en -figuur?
• Eigenschappen: tekst
    > Hoe werk je met teksteigenschappen in CSS?
• Eigenschappen: box
    > Hoe kan je werken met randen, marges en opvulling?
• Eigenschappen: display, whitespace en lijsten
    >
• Eigenschappen: positionering en gebruikersinterface
    > Welke soorten van positioneringen zijn er? Werken met relatief, statisch, fixed en absoluut.
• Samengestelde regels
    > Hoe kan je tags, id's en klassen combineren?
• Relaties en voorwaarden
    > Wat zijn child, descendant en adjacent sibling selectors?
• Commentaar, import en important
    > Hoe plaats je commentaar in CSS? Hoe kan je een ander css-bestand importeren? Hoe markeer je al belangrijk en waarom doe je dat?
• Gecko- en Webkitgebaseerde browsers
    > Volgens welke principes werken browsers? Wat betekent -moz, -webkit en -o?
• CSS-hacks
    >
• Divs en CSS
    > Hoe combineer je divs met css? Hoe kan je positioneren? Hoe maak je een weblay-out? Wrapper, header, container en footer. Divs en het box-model.
• Divs en CSS: een praktisch voorbeeld
    >
• Een menu maken in CSS
    > Hoe maak je een horizontaal en verticaal menu in CSS?
• Verschillende soorten media
    > Welk css-media zijn er? Wat is screen, print, handheld, enz?
• Een printvriendelijke website
    > Hoe maak je via CSS een printvriendelijke site?

 

HTML5

• De syntax van HTML5
    > Wat is HTML5? Waarin verschilt het van zijn voorganger?
• Verdwenen elementen en attributen
    > Welke elementen en attributen mag je in HTML5 niet meer gebruiken?
• Gewijzigde elementen
    > Welke elementen zijn in betekenis of werking gewijzigd in HTML5?
• Nieuwe elementen: formulieren
    > Welke elementen, attributen en waarden zijn nieuw bij formulieren?
• Nieuwe elementen: divs
    > Wat is er nieuw bij de divs, in HTML5?
• Nieuwe elementen: multimedia
    > Hoe kan je werken met de audio-tag en de videotag?
• Nieuwe elementen: canvas
    > Hoe kan je met de nieuwe canvas-tag werken?
• Nieuwe elementen: ... en verder ...
    > HTML5-tags: figure, figcaption, time, mark, header, hgroup, summary en details

 

CSS3

• Afgeronde hoeken
    > Hoe maak je afgeronde hoeken in CSS3? Alles over border en -radius
• Schaduw bij objecten en tekst
    > Werken met schaduw: box-shadow en text-shadow
• RGBA
    >
• Elk lettertype naar wens
    > werken met @fontface
• Multiple Colums
    >
• Box Resize en Box Sizing
    > Werken met box-resize en box-sizing
• Outline
    >
• Transitions
    >
• Transform
    > Werken met transform, rotate, translate, skew
• Selectors
    > Het nieuwe aanbod aan pseudo-klassen en andere items in CSS3
• Gradients
    > Hoe kan je werken met kleurverlopen in CSS3?

 

VERDER...

• Het belang van grafische software
    > Waarom heb je toch nog Photoshop, Fireworks en/of Illustrator nodig?
• Werken met grid systems: 960gs
    > Hoe kan je een website maken vanuit Photoshop/Fireworks en omzetten naar een werkende website via het 960 Grid System?
• Het skeleton GridSystem
    > Hoe kan je via skeleton een website bouwen? Responsive webdesign: zorg dat je website er ook goed vertoond wordt op iPhone, iPad en andere smartphones/tablets.
• Responsive webdesign: webdesign voor iPad
    > Hoe ontwikkel je een site, speciaal voor iPad en tablet? Waarop moet je letten?
• Responsive webdesign: mediaqueries in CSS
    > Hoe kan je een site maken die correct vertoond wordt op mobiele apparaten zoals smartphone en tablets? Hoe vertoon je best afbeeldingen? Hoe kan je via @media in CSS het nodige doen? Hoe werken via Ja
• Responsive webdesign: een site testen voor iPhone en iPad
    > Hoe test je een site op iPhone en iPad, als je er geen hebt?
• Responsive webdesign: een site testen voor Google Android en Opera Mobile
    >

 

• Bekijk de oude cursus

 

Cursussen Webdesign

• Dreamweaver CS5 - CS4 - CS3
• Joomla 1.7 - 1.6 - 1.5
• Wordpress
• Drupal
• Webshop
• Magento
• Flash CS4 - CS3
• Fireworks CS5 - CS4 - CS3
• HTML5 & CSS3
• PHP - MySQL - SQL

Cursussen DTP

• Photoshop
• Illustrator
• Indesign

Videolessen

• Dreamweaver
• Drupal
• Joomla

Cursussen Sociale Media

• Twitter
• Facebook
• Google +
• LinkedIn