wo 14 jan
Datum van upload
64 Matching Annotations
- Last 7 days
-
thomasmore.instructure.com thomasmore.instructure.com
-
-
Checklist CSS website:
Alles wat in HTML moet staan Momenteel nog wachten tot de docent het zegt.
-
Checklist HTML website
Alles wat in HTML moet staan
-
-
thomasmore.instructure.com thomasmore.instructure.com
-
Portfolio
Voor info over project
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
user-scalable, maximum-scale and minimum scale
Balngrijk om deze weg te laten
-
content="width=device-width
Belangrijk om dit te doen, om zo de breedte van apparaat bekijken.
-
media type
Je kan specifiek kiezen hoe de style eruit ziet bij elk specifiek apparaat
-
class="cl1 cl2">
Voor classen te maken
-
id="id1"
voor ID te maken
-
Summary
Het belangrijkste
-
<span>
Voor Iets appart te houden en dan te stylen
-
<div>
Om dingen te groeperen en samen aan te passen
-
s CSS
CTRL + ALT + J Voor een template te gebruiken dan moet je geen sluiting zelf typen
-
<link rel="stylesheet" href="style1.css">
Hoe je de CSS aan de html file linkt.
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
styling vertically instead of horizontally
Wordt toch niet gebruikt skip
-
large tables
Hier zit CSS bij
-
basic table
Gwn basis tabel kennen
-
foot
optioneel
-
body
optioneel
-
head
optioneel
-
Column group <colgroup>
soms maar gebruikt
-
Column <col/>
soms maar gebruikt
-
Tables
Echt slecht om op alle platformen te maken, gsm, talbet en pc bv
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
nested list
Belangrijk!!
-
: combined list
Wordt vaak fout gedaan bij studente.
-
<dl> definition list <dt> definition term <dd> definition description
Worden nooit gebruikt
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
Character entities
Enigste die nodig zijn
-
Met dit kan wel
-
Non breaking space
Lege spaties worden auto weg gedaan.
-
<, >, &
Deze kan je niet gebruiken:
Begin v een tag Einde v tag & staat vaak in een link
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
a href="mailto:jane.doe@thomasmore.be"
Om een mail te sturen naar
-
a href="#">
Om naar begin v d pagina te gaan, zonder een refresh
-
id="title">Concrete
Om naar ergens naar de site te springen
-
another website
Link naar een andere site
-
target="_blank"
Om aan te geven om een hyperlink op een andere tablat te openen
-
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
Working correctly with images # Size of images
https://itf-webp.netlify.app Goed om img te converteren naar een andere type voor html
-
<svg>
Goed, omdat kwaliteit goed blijft en erg klein bestand is om op te slaan.
-
relative paths
vbn v paths
-
alt
Verplicht tag
-
src
Verplicht tag
-
alt="Dog in blanket"
Is om info v d foto aan de computer door te geven bv voor blinden.
-
picsum.photos
https://picsum.photos Fotos die gebruikt mogen worden
-
figcaption>
Optioneel: voor beschrijving v d foto
-
NG icons
https://caniuse.com Om te testen of u code overal werkt of niet
-
realfavicongenerator.net
Om een fav icon te maken voor alle types, light theme, dark theme, voor alle apparaten en dan maakt het de html code voor jou en dan gwn gebruiken
-
href
Path v het bestand Als het bestand in dezelfde map als index staat => naam bestand
-
favicon.ico
Vroeger moest je zo een type gebruiken
-
Favicon
Icon maken voor tablat in een browser
-
L INFO ON COLORS
Notatie voor kleuren
-
Recommendations
Dus JPEG en WEBP, als het een klein foto is PNG
Recommend max 100kb gebruiken voor images
-
Example
Hier kan je voorbeelden vinden.
-
file types
Bij html wordt vaak webp gebruikt
-
- Nov 2025
-
itf-web-essentials.netlify.app itf-web-essentials.netlify.app
-
<em>
Je kan ook i gebruiken zoals word
-
<strong>
Je kan ook b gebruiken zoals word
-
<hr/>
Om een lijn over de pagina breedte te maken
-
<br/>
Om de lijn te stoppen en zo een nieuwe lijn te beginnen
-
the cod
Gewoon bekijken
-
Emmet
Is een hulpmiddel
-
HTML5 validato
Om te kijken of het structuur goed is https://validator.w3.org/
-
<p>
p*2>lorem30 kan je hetzelfde doen alleen, word dit tweekeer gedaan en limiet van 30 lijnen.
-
<p>
Handig om lorem te gebruiken voor random tekst. Door p>lorem TAB
-
paragraph
Extra spaties zie je niet => het pagina laat altijd 1 spatie zien.
-
The content of every webpage has to be well structured
Het eigenlijk op de zelfde werkwijze als een word bestand, dat je een titel maakt en inhoud geeft.
-
Description displayed in search engine results:
Is belangrijk, omdat dit aangeeft waarover de site gaat. Als dit leeg is dan pakt het een random text van de pagina. Wat raar is.
-