wo 14 jan
Datum van upload
wo 14 jan
Datum van upload
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
Portfolio
Voor info over project
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.
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
nested list
Belangrijk!!
: combined list
Wordt vaak fout gedaan bij studente.
<dl> definition list <dt> definition term <dd> definition description
Worden nooit gebruikt
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
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
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
<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.