00. intro

doelstellingen

In deze module leer je de actuele webstandaarden kennen, zodat je responsieve websites, nieuwsbrieven, maar ook apps kan maken met behulp van HTML, CSS en JavaScript.

link naar startpagina ECTS-fiches

leerinhoud

basis voor het structureren van webpagina's in HTML

• de bouwstenen: elementen, tags en attributen

• structuur kunnen geven aan teksten met semantische HTML-elementen

• lijsten, andere tekstmarkeringen en speciale tekens

• koppelingen

basis voor het vormgeven van webpagina’s in CSS

• de opbouw van stijlregels en waar die komen te staan

• het gebruik van lettertypen en de opmaak van tekst en menu’s

• gebruikmaken van eenvoudige en meer geavanceerde selectors

• het boxmodel en de positionering van elementen

diepgang bij het vormgeven van webpagina’s in CSS

• lay-outtechnieken: grid lay-out en flexbox

• kleurgebruik en achtergrondafbeeldingen

• responsive webdesign met media queries met een mobile first-aanpak

• CSS3 custom properties, nesting

basis van de werking van webpagina's

• filestructuur op webserver

• bestandsformaten

• toegankelijkheid

• UI/UX

• front-end testing

basis van programmeren in JavaScript

• wat is JavaScript

• programmeerconcepten

• leren programmeren met een IDE

• fouten in code opsporen

• variabelen en identifiers

• expressies en statements

• methoden

• selectie- en iteratiestructuren

uitgebreid programmeren in JavaScript

• DOM-manipulatie

• eventlisteners

• ES6 array-functies

• JS-objecten

• promises

• callbacks

• async/await

basis van werken met API's

• data uit API m.b.v. een GUI ophalen

• data uit API m.b.v. een JS ophalen

• JSON-formaat

• POST/GET-commando's

• uitlezen van data uit API in website

te gebruiken code editor

• Visual Studio Code: download software

• meer info over het gebruik van HTML in Visual Studio Code

• Emmet

  • cheat sheet

  • go to edit-point

  • select item

toegang tot en werking van het web

webbrowsers: Een webpagina bezoeken kan via een link, het ingeven van een webadres of zoekfunctie in een browser. De webbrowser ontvangt veelal HTML, CSS en Javascript van de webserver, interpreteert deze code en toont het resultaat wat wij kennen als een webpagina. Deze webpagina's bevatten veelal teksten, afbeeldingen, audio, video of animaties. Gekende webbrowsers zijn Google Chrome, Microsoft Edge, Firefox, Opera en Safari. Deze webbrowsers komen regelmatig met nieuwe versies en dienen dus regelmatig geüpdate te worden. Via deze weg worden nieuwe functies toegevoegd en mogelijke bugs gecorrigeerd.

webservers: Wanneer je op het web surft wordt jouw verzoek verzonden naar een webserver die de website host. Webservers zijn speciaal computers die constant zijn verbonden met internet en die tevens geoptimaliseerd zijn om webpagina's te versturen.

rootservers: https://root-servers.org

video: Kunnen ze het internet niet sneller maken?

websites maken

Kleine websites worden geschreven in HTML en CSS. Maar veelal wordt er toch gekozen voor een content management systeem (CMS zoals WordPress, Drupal, Joomla,...) of e-commerce software. Naast HTML en CSS maken deze complexe systemen gebruik van programmeertalen zoals PHP, ASP.Net, Java of Ruby én een database om gegevens in op te slaan.

HTML: HyperText Markup Language is de standaard opmaaktaal voor webpagina's. HTML-documenten kunnen geopend en gelezen worden door een webbrowser om vervolgens als webpagina weergegeven te worden. HTML-documenten worden opgebouwd aan de hand van een semantische structuur door middel van code zoals header, nav, content, footer en tekstuele inhoud van een webpagina.

CSS: Cascading Style Sheets bepalen de vormgeving of visuele weergave van webpagina's. Het begrip cascading -als een waterval- verwijst naar de mogelijkheid van het overerven van opmaakeigenschappen.