Webdesign met HTML5 & CSS3

Deze cursus biedt:

• 24-7 Toegang tot de online cursus Weblayout met HTML & CSS (+40 video’s)
• Downloadbaar bronmateriaal bij video’s
• Nederlandstalig onderwijs
• Certificaat na afronding

Cursus basiskennis HTML en CSS

Leer hoe je webpagina’s structureert met de juiste HTML-tags en hoe je met CSS de layout en de vormgeving van een webpagina aanpast naar jouw wensen. HTML & CSS zijn voortdurend in ontwikkeling. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige en populaire programmeertalen.

HTML is de publicatietaal van de huidige tijd en zal in de toekomst alleen maar een belangrijkere rol gaan spelen. Wil je een blog starten of een website bouwen met WordPress? Dan kun je met html-kennis wijzigingen aanbrengen in de broncode en zodoende veel meer sturing geven aan de wegpublicaties. En wil je je gaan focussen op het zelf ontwerpen en vormgeven van webpagina’s dan is deze kennis onontbeerlijk.

Doel

In de cursus leer je eerst hoe je een pagina maakt met HTML. Vervolgens leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Je leert onder andere:

• Leren maken van de juiste mappenstructuur voor webproducties voor elke dag
• Semantische betekenis van HTML-tags
• Pagina’s structureren met HTML-tags conform het W3C
• Inzicht in de reglementen van het W3C
• Tabellen toepassen
• Het schrijven van CSS-regels.
• Werken met inline styles en interne- en externe CSS stijlbladen.
• Het schrijven van de juiste selectors.
• De functie van een reset.css.
• Alle basis-css-regels voor vormgeving van tekst en afbeeldingen.

Doelgroep

Zoals je hoort is een brede doelgroep gebaat bij kennis van html. HTML is de wijze waarop je de inhoud van een webpagina structureert en betekenis geeft. Belangrijk voor zoekmachine optimalisatie. Maar met CSS bepaal je de vormgeving van de pagina. Deze cursus is bedoeld voor iedereen die wil beginnen met het creëren en vormgeven van webpagina’s of websites. Wil je hand hebben in de vormgeving dan heb je voldoende kennis van CSS nodig en dan is deze cursus het perfecte beginpunt.

Toelatingseisen: Geen voorkennis vereist

Lesvorm: Zelfstandig leren in een online studieomgeving.

Lesmateriaal: Toegang tot instructievideo's en downloadbaar bronmateriaal.

Cursusduur: 1 jaar.

Studeer en leer in je eigen tijd en tempo

In deze cursus werk je zelfstandig wanneer het jou uitkomt en in je eigen tempo. De online cursus bestaat uit duidelijke instructievideo’s en downloadbare bestanden waarmee je het geleerde kunt oefenen en eigen kunt maken. Onze video’s zijn Nederlandstalig en ondertiteld. Je hebt 24-7 toegang tot jouw persoonlijke online studieomgeving.

Inhoudsoverzicht van instructievideo’s

93 video’s | Totale videoduur is 06:30:46
Docent en auteur: Belinda Kampf

Starten met HTML

• Standaarden van het web
• Technieken voor het webdesignen
• Bronmap (LRF)

HTML pagina maken

• De DOM (Document Object Model)
• De Doctype
• De Head
• De Body

Tekst structureren in HTML

• Headers (h1 t/m h6) en paragrafen <p>
• De Bold <b>, Italic <i>, Emphasis <em> en Strong <strong>
• Afkortingen definieren met <abbr>
• Definitie definieren met <dfn>
• Titels en werken definieren met <cite>
• Geordende lijsten <ol>
• Ongeordende lijsten <ul>
• Definitielijsten <dl> <dt> en <dd>
• Citaten duiden met Blockquotes en Quotes <q>
• Speciale karakters met HTML-entiteiten
• Afbreken van teksten met <wbr> en de html-entiteit ­
• Preformatted tekst <pre>
• Commentaarregels plaatsen
• Tekst in super- en subscript zetten
• Revisie toepassen in een pagina <ins>, <del>, <u> en <s>
• Adresgegevens definiëren met <address>
• Content scheiden met horizontale lijn <hr>
• Computercode duiden met <code> en <samp>
• Tekst kleiner zetten met <small>

Hyperlinks maken

•  Basiskennis URL en links
• Externe links maken
• Interne links maken
• Linken naar bestand

Afbeeldingen en illustraties plaatsen

• Afbeelding plaatsen
  Afbeeldingsformaten png, gif en jpg
  Afbeelding linken naar pagina, url of bestand

Tabellen

• Toegankelijkheid verbeteren van een tabel <summery> scope en abbr
• Tabelstructuur analyseren
• Tabel maken <table>, <tr>, <td>, <caption> en <th>
• HTML5 elementen voor tabel <thead>, <tbody>, <tfoot>
• Afbeeldingen plaatsen in tabel
• Cellen samenvoegen en splitsen
• Toegankelijkheid verbeteren van een tabel <summery> scope en abbr

Starten met CSS

• Wat is CSS
• CSS in werking
• De versies van CSS
• CSS schrijven, de syntax
• De reset CSS

CSS stijlen en stijlbladen

• De inline style
• Het interne stijlblad
• Het externe stijlblad
• CSS-overerving

De CSS selectors

• HTML-selectors
• Attribute class- selector
• Attribute id- selector
• Pseudo class selector

Starten met reset en css stijlblad

• Browser gestuurde vormgeving overschrijven met reset.css
• Extern stijlblad aanmaken en koppelen

Tekst vormgeven met CSS

• Font-family: Lettertype opgeven
• Praktische toepassing van fonts in webdesign
• Font-size: Corpsgrootte bepalen in pixels
• Theorie: Font-size, corpsgrootte bepalen in em
• Praktijk: Corpsgrootte bepalen in em

Font Properties vormgeven

• Font-weight bepalen
• Font-style bepalen
• Font-variant bepalen
• Tekst kleuren met ‘color’
• Google webfonts toepassen in webpagina
• Shorthand notation voor font-properties

Kleuren en kleurschema’s kiezen

• Kleur kiezen in Adobe Photoshop
• Kleurenschema samenstellen

Text Properties vormgeven

• Text-transform: Hoofd en kleine letters toepassen
• Text-decoration: Onderstrepen van teksten en links
• Text-indent: Tekst in laten springen
• Text-align: Tekst uitlijnen (CSS3 text-align-last, text-justify)
• Letter-spacing / word-spacing

Overige tekstopties

• White-space
• Line-height: Interlinie bepalen voor tekst
• Text-shadow (CSS3)

Vormgeven van lijsten

• List-style-type voor ongenummerde lijsten ‘ul’
• List-style-position voor ongenummerde lijsten ‘ul’
• List-style-image voor ongenummerde lijsten ‘ul’
• Opsommingstekens voor geordende lijsten ‘ol’
• Shorthand notation voor list-style eigenschappen

Vormgeven van achtergrond, background

• Background-color toepassen
• Background-image toepassen
• Background-repeat toepassen
• Background-position toepassen
• Background-attachment toepassen
• Repeat-x en repeat-y
• Shorthand notation voor background-properties
• Afbeeldingen verticaal opmaken, vertical-align

Pseudo classes en elementen

• Links vormgeven met de pseudo-classes
• De pseudo class first-child
• Taal anders vormgeven met pseudo class ‘lang’
• Pseudo-element first-letter & first-line
• Pseudo-element before & after