Basis cursus Html / CSS

Inhoud cursus HTML en CSS

Een website is een mix van vormgeving, inhoud, techniek en marketing (o.a. SEO).
Om een website op maat te ontwikkelen, is kennis van HTML en CSS een vereiste. Daarnaast wordt tijdens de cursus gebruik gemaakt van een HTML/CSS editor om het e.e.a. te vergemakkelijken en versnellen.

Tijdens de cursus leer je hoe je via HTML de inhoud van een website pagina kunt plaatsen. De structuur van een pagina wordt hierbij niet uit het oog verloren en ook wordt in de codering rekening gehouden met SEO.

Diverse bouwblokken van HTML komen hierbij aanbod. Je leert o.a. hoe je teksten, afbeeldingen, hyperlinks en lijsten met opsommingen plaatst. Ook wordt aandacht besteed aan specifiekere blokken. Hoe plaats je bijvoorbeeld video’s en een Googlemaps kader. Of hoe plaats je een deel van een andere site op je eigen website?

Tijdens de cursus wordt tevens speciaal aandacht besteedt aan formulieren. Hoe bouw je de diverse velden binnen een formulier op? Hoe zorg je dat bepaalde velden worden gevalideerd, zodat je zeker weet dat bezoekers een veld op de juiste manier invullen (correct emailadres b.v.)?

Tevens leer je hoe je achtergrondinformatie (metadata) op je pagina plaatst: achtergrondinfo pagina (voor zoekmachines). En hoe je links naar scripts en opmaakprofielen plaatst.

Na het plaatsten van de inhoud is het tijd om de opmaak en layout van de pagina aan te pakken. Dit gebeurt met behulp van zgn. CSS (opmaak)bestanden. CSS bepaalt uiteindelijk de lay-out en opmaak van alle pagina’s op je website. Met CSS koppel je dus de inhoud los van de opmaak, waardoor een website makkelijker te onderhouden is.

Je leert hoe je HTML en CSS met elkaar verbindt. Ook de CSS regels en het selecteren van elementen waarop opmaak moet worden toegepast komen aanbod.

 Na afloop ben je in staat om de onderdelen van je webpagina met behulp van CSS de gewenste uitstraling me te geven: kleuren, lettertypes, opmaak afbeeldingen, afmetingen enz.

Tijdens de cursus leer je diverse methoden om onderdelen te plaatsen via CSS. Op die manier kun je een lay-out/indeling op maat maken. Vervolgens leer je hoe je een responsive website pagina maakt, zodat de lay-out zich aanpast aan de grootte van het scherm. Door de oefeningen maakt de cursist kennis met het gebruik van HTML en CSS editors. Tot slot wordt er uiteraard ook stil gestaan bij het overhevelen van je website naar de server van een internetprovider.

Doelgroep cursus HTML en CSS

De cursus Html en CSS is geschikt voor iedereen die zelf webpagina’s wil leren bouwen, om zo zelf invloed op het ontwerp te kunnen uitoefenen.
De cursus is met name geschikt voor ontwerpers die zich verder in webdesign willen ontwikkelen.

Voorkennis cursus

Voor deze cursus is (basis) kennis internet en kennis met het gebruik van diverse browsers gewenst. Verder is affiniteit met code wenselijk.

Uitvoering cursus

De theorie wordt besproken aan de hand van presentatie slides en Html en CSS voorbeeldcode. Demo’s van Html sjablonen worden gebruikt om de behandelde concepten te verduidelijken. Gedurende de cursus ontwikkelen de deelnemers aan de hand van oefeningen in een aantal stappen een website met veel gebruikte functionaliteit. Daarbij kan eventueel gebruik worden gemaakt van een basis website (sjabloon) waarin veel gebruikte blokken en functionaliteit zijn verwerkt.

Module1: HTML structuur (HTML intro)

  • Opbouw HTML document
  • Declaratie documenttype
  • Declaratie taal website
  • Opbouw head HTML document
  • Meta data HTML
  • Meta data t.b.v. SEO / zoekmachines
  • Meta data t.b.v. responsive design
  • Beschrijving elementen HTML document met “tags”
  • Commentaar/ opmerkingen in HTLM document plaatsen
  • Basis HTML document (voorbeeld)

Module 2: Basis tags/ basis elementen HTML

  • Kopteksten
  • Paragrafen
  • Hyperlinks
  • Afbeeldingen
  • Lijsten
  • Menu variant lijst

Module 3: Semantische HTML (meer betekenis aan code geven)

  • Semantische tags
  • Tags voor header('s) en footer
  • Tags voor menu items
  • Tags voor zijbalken
  • Tags voor hoofd inhoud
  • Tags voor secties, artikelen. figuren, quotes

Module 4: Speciale blok elementen HTML

  • Div tags (groeperen elementen)
  • Span tags
  • Iframes (delen andere website('s) op eigen pagina plaatsen.
  • Video's
  • Googlemaps

Module 5: Eigenschappen tags (HTML)

  • Attributen
  • Attributen afbeeldingen
  • Attributen hyperlinks
  • Attributen t.b.v naamgeving elementen: klassen en id's.
  • Attributen t.b.v afmetingen elementen
  • Attributen t.b.v. gebeurtenissen

Module 6: Links naar scripts en opmaakprofielen (HTML)

  • Links naar CSS (opmaakbestanden)
  • Links naar scripts (javascript, jquery b.v.)

Module 7: Html bibliotheken

  • Symbolen bibliotheek
  • Lettertype bibliotheek

Module 8: Formulieren (HTML)

  • Opbouw formulieren
  • Formulier tags
  • Formulier velden
  • Tekstvelden

Module 9: Valideren formulieren (HTML)

  • Betekenis valideren formulier velden
  • Nummervelden
  • Velden t.b.v. telefoonnr
  • Velden t.b.v. emailadres
  • Landcodes en postcodes validatie
  • Datum validatie

Module 10: Gridsystemen (basis, (HTML))

  • Pagina indelen in secties, rijen en kolommen m.b.v. Stramienen (samen met css)

Module 11: Introductie CSS

  • Opbouw, syntax CSS bestand
  • Koppelen CSS en Html
  • CSS regels
  • Element selectie in CSS
  • CSS reset: wat is het en hoe pas je het toe?

Module 12: Lettertypes (CSS)

  • Opmaak tekst
  • Lettergroottes, lettertypes

Module 13: Kleuren (CSS)

  • Kleurcoderingen, kleurencirkel

Module 14: Afbeeldingen (CSS)

  • opmaak afbeeldingen
  • achtergrondafbeeldingen

Module 15: Layout (CSS)

  • Positionering van elementen
  • “Box-model”: o.a. Padding, marges, afmetingen blokken
  • Zwevende elementen
  • Flexbox
  • Css grid layout
  • Randen
  • Achtergronden

Module 16: Responsiveness (CSS)

  • Media query’s
  • CSS t.b.v. responsiveness
  • CCS t.b.v. schermen met hoge resolutie

Module 17: Diverse (CSS)

  • Schaduwen
  • Transformaties
  • Transities (animaties via CSS)
  • SVG afbeeldingen en CSS

Module 18: Frameworks

  • Frameworks
    (bibliotheek van HTML en CSS blokken: “Leentje buur spelen”)
persoon achter notebook voor online training met kop koffie

Aanmelden Basis cursus Html / CSS

Vul onderstaande gegevens in en klik op Aanmelden wanneer je je wilt aanmelden voor een cursus WordPress. Bellen kan natuurlijk ook.

afbeelding voor tijd cursus: wekker op het midden van 2 gelijke, gescheiden kleurvlakken

Cursus duur

2 x 6 uur

afbeelding voor prijs cursus: muntjes waaruit een plantje groeit

Prijzen cursus

700 euro (Incl. BTW)

afbeelding voor cursus vorm: hand met pen tekent op papier blokschematisch website uit

Cursus vorm

De cursus wordt individueel aangeboden. Ook is het mogelijk om de cursus in een kleine groep, van maximaal 4 personen te volgen. Hierdoor is er tijd en ruimte voor persoonlijke uitleg.

afbeelding voor locatie cursus: landkaart op muur met daaronder een tafel met wekker, pennenbak, mok en kleine laptop

Locatie cursus

Op dit moment kun je de cursus op iedere locatie online volgen. De cursussen worden verder in diverse computercentra in b.v. Rotterdam of op (bedrijfs)locatie gegeven.

afbeelding voor cursus data: klapper met kalender

Data cursus

Omdat het cursussen op maat betreft, kunnen de cursussen op nader te overleggen tijdstippen gegeven worden.

Cursussen Wordpress, webdesign, fotobewerking in diverse locaties

Trainingen met persoonlijke aandacht. Ook Trainingen aan huis of incompany trainingen mogelijk. Afgestemd op jouw wensen of de wensen van het bedrijf.

Keuze tussen groepstrainingen / individuele traininingen of maatwerktrainingen.

Bedrijfstrainingen of particuliere trainingen mogelijk.

Trainingen gaan altijd door, ook bij 1 cursist.

Cursussen worden gegeven door een trainer met praktijkervaring.

Overzicht Cursus voorbeelden

Hieronder vind je voorbeelden van websites. De voorbeelden laten zien, wat je na het volgen van een 2- of 3 daagse WordPress training kunt bereiken.

website voorbeeld architectuur ontwerp
website voorbeeld zakelijk ontwerp
Elementor: website voorbeeld restaurant ontwerp
website voorbeeld foto en video ontwerp
website voorbeeld coaching ontwerp

Linda Rooij

Wil je ook graag je eigen website aanpassen in WordPress maar zie je op tegen de zogenaamde ‘makkelijke’ methode via WordPress? Peter Buijs is de man die je nodig hebt. Hij ontwikkelt diverse WordPress-cursussen in groepsverband of 1-op-1. Die laatste heb ik met studio Rooijaal aangevraagd. Peter kwam bij mij thuis en samen hebben we in 3 uur alle basiseigenschappen van het programma bekeken en geoefend. Na zijn bezoek kon ik de hele site zelf aanpassen. Hoe fijn en een GROTE zorg minder!!

Linda Rooij, Grafisch vormgever

Flossie d’Hont

Onlangs heb ik bij Peter een cursus fotobewerking gevolgd. Met veel ervaring, logische opbouw en geduld heeft hij mij langs alle facetten van de afzonderlijke onderdelen geloodst. Peter heeft een fijne manier van begeleiden en ik ben zeer blij met de resultaten.

Flossie d’Hont, Zelfstandig psycholoog – Florisand Consultancy

Esther Janssen

Ik heb onlangs een cursus Photoshop Elements bij Peter gevolgd. Hij heeft kennis van zaken, is geduldig en geeft je precies de aandacht die jij – in jouw tempo – nodig hebt. Kortom, zijn aanpak is persoonlijk, plezierig en prettig en –heel belangrijk – hij heeft er lol in om zijn expertise over te brengen aan zijn cursist en/of het programma af te stemmen op de behoefte van de klant.

Esther Janssen, Allround communicatieprofessional

Bianca Wijnstekers-Handy

Tijdens de workshops van Peter Buijs over WordPress en SEO viel het me telkens weer op: Peter weet ongelooflijk veel van deze onderwerpen af, want hij laat geen vraag onbeantwoord. Hij heeft aandacht voor iedereen, waardoor hij uiterst geschikt is voor het geven van één-op-ééncursussen. De follow-up is ook fantastisch: naderhand ontvang je een door hem samengestelde handleiding, die hij met enige regelmaat bijwerkt. Je weet: deze man is gedreven en geduldig. Hij draagt zijn kennis graag over en heeft hart voor zijn cursisten. Kortom: boek een één-op-één, laat je onderdompelen in zijn kennis en pluk er de vruchten van – nu en nog lang daarna!

Bianca Wijnstekers-Handy, Beëdigd juridisch vertaler