Tables
Toch veel voorbeelden laten zien dus toch wel oefenen
Tables
Toch veel voorbeelden laten zien dus toch wel oefenen
border-style border-style: solid; specifies the style of a border border-width border-width: 2px; specifies the width of a border border-color border-color: #f04c25; specifies the color of a border
De drie die je moet onthouden en gebruiken
A link can be in 5 different states,
a is voor alles als je ze appart doe, moet het in de juiste volgorde.
Color contrast
Vooral voor slechtzienden
RGBA
A is om te doorschijbaarheid te kiezen
2px
groote li, re, hoogte, kleur
line-height
Dit is erg belangrijk volgens de leerkracht
1,5 is vaak het beste
Open these examples of good and bad line-heights
Makkelijk testen wat beter is => geeft daarna ook de html 1,5 is vaak het beste zegt de leerkracht.
px;
Dit is beter te vermijden.
=> Inzoomen in een smartphone vergroot niet mee. => Blijft klein.
2rem;
Dit is beter om te gebruiken.
=> Inzoomen in een smartphone vergroot mee.
font-family: Verdana, Geneva, sans-serif;
3 opties v fonts: standaard fond windows, standaard font mac, Basic dat alles zoiso werkt
=> Gewoon om zeker te zijn.
font-family font-family: Verdana; font in Verdana font-size font-size: 25px; size of the font is 25px font-style font-style: italic; italic font
Meest gebruikt
!important
In de vb hieronde zie het in bestand green.css dat eigenlijk de hierargy wordt overschreven
: !important
waar link rel staat = manier om een CSS bestand te koppelen aan html
Hierarchy
Belangrijk om dit te respecteren * Dus kijken wanneer een spatie of een comma of niets te gebruiken. * Hangt af van is er een class of Id of niet
id
1 keer max gebruiken, als je weet dat het maar 1 keer wordt gebruikt
5 different types of selectors
De meest gebruikte in de tabel
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.