cursus HTML5 en CSS3

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.

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