HTML en 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 HTML en CSS

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

Uitvoering cursus HTML en CSS

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”)