HTML en CSS Tutorial voor Beginners

HTML Basis

Introductie HTML Taal HTML Tags Attributen Stijlen Basis Paginastructuur Basis Tags Paragrafen Koppen Vetgedrukte tekst Cursieve tekst Ongesorteerde lijsten Gesorteerde lijsten Links Interne links Afbeeldingen Afbeeldingbreedte Afbeeldinghoogte Breedte en hoogte van afbeelding instellen Tabellen Breedte en hoogte van tabel Kopcellen Practicum

CSS Grondbeginselen

Inleiding tot CSS Hoe CSS te gebruiken Kleurnaamwaarden Alle kleuren Breedte en hoogte Tekstuitlijning Tekst rechts uitlijnen Tekst centreren Tekst links uitlijnen Tekst uitvullen Praktijk tekstuitlijning Vetgedrukt Cursief Lettergrootte Lettertypefamilie Regelhoogte Line-height waarde zonder eenheden Font shorthand eigenschap Inspringen eerste regel Teksteffecten Onderstreping tekst Bovenlijntekst Doorgestreepte tekst Teksteffecten uitzetten Practicum

Selectors

Tags Relaties Eigenschapsovererving Selectoren Groeperen Algemene Eigenschappen Afstammeling Selectoren Kind Selector Klasse Selector Span Tag Div Tag Klassen Groeperen Tag met Specifieke Klasse Afstammeling Selector en Klassen Complexe Combinaties van Afstammeling Selector en Klassen Beginnersfout in Afstammeling Selector Element met Meerdere Klassen Selector op ID Selector op ID en Klassen ID Gebruik Selector op Meerdere Klassen Meerdere Selectoren Aaneengesloten Fout Meerdere Selectoren Complexe Selectoren Groeperen Fout bij Groeperen Training Selector Combinaties Selector Prioriteit Opmerking over Eigenschapsconflicten Specificiteitsregels Prioriteit van Afstammeling Selectoren Aangrenzende Selector Algemene Sibling Selector Universele Selector Attribuut Selectoren Linkstatussen Nuances van Linkstatus Volgorde Link en Visited Statussen Normaal Gebruik van Linkstatussen Complexe Selectoren met Links Link met Klasse Selectie van Eindelementen Selectie op Positie Selectie van Enig Kind Selectie van Lege Elementen Selectie op Positie en Elementtype Ontkenning not

Opmaak

Achtergrondkleur Basis van randen Effen rand Gestippelde rand Gestreepte rand Verhoogde rand Dubbele rand Korte notatie voor rand Randen voor verschillende zijden Afgeronde randen van blok Afgeronde randen van achtergrond Cirkel maken Afronding voor verschillende hoeken Vier waarden Twee waarden Drie waarden Afronding in procenten Cirkel maken bij afronding in procenten Afbeelding voor achtergrond Herhaling van achtergrondafbeelding Andere eigenschappen voor achtergrond Markeringen van ul-lijsten Vierkante markeringen van ul-lijsten Markeringen van ul-lijsten in de vorm van cirkels Markeringen van ul-lijsten in de vorm van ingekleurde cirkels Geen markeringen voor ul-lijsten Markeringen van ol-lijsten Kleine Romeinse cijfers voor ol-lijsten Hoofdletter Romeinse cijfers voor ol-lijsten Kleine Latijnse letters voor ol-lijsten Hoofdletter Latijnse letters voor ol-lijsten Kleine Griekse letters voor ol-lijsten Getallen met voorloopnul voor ol-lijsten

Blokmodel

Buitenste marge margin Marges margin voor verschillende kanten Meerdere waarden in margin Vier waarden in margin Twee waarden in margin Drie waarden in margin Binnenste marge padding Marges padding voor verschillende kanten Meerdere waarden in padding Uitbreiding van elementen Invloed van rand op uitbreiding van elementen Gezamenlijke invloed van padding en rand op uitbreiding van elementen Annulering van uitbreiding van elementen Blokelementen Breedte en hoogte van een blokelement Breedte van een blokelement Hoogte van een blokelement Hoogte zonder inhoud Meerdere blokelementen naast elkaar Inline-elementen Breedte en hoogte van een inline-element Meerdere inline-elementen naast elkaar Marges tussen inline-elementen Definitie van het blokmodel Eigenschap display Inline-blokelementen Breedte en hoogte van een inline-blokelement Breedte van een inline-blokelement Hoogte van een inline-blokelement Meerdere inline-blokelementen naast elkaar Uitlijning van blokelementen Uitlijning van blokelement met marge links Uitlijning van blokelement met marge rechts Uitlijning van inline-elementen Centreren van inline-elementen Centreren van meerdere inline-elementen Uitlijning van inline-elementen rechts Uitlijning van inline-blokelementen Centreren van inline-blokelementen Uitlijning van inline-blokelementen rechts Flex-elementen Hoogte van de ouder van flex-elementen Breedte van de ouder van flex-elementen Inline-blok ouder Padding marges van de ouder Margin marges voor kinderen Uitlijning van flex-elementen Uitlijning van flex-elementen in het midden Uitlijning van flex-elementen over de ouder Uitlijning van flex-elementen over de ouder met marges Uitlijning van flex-elementen over de ouder met gelijke marges

Positionering

Absoluut Relatief Absoluut ten opzichte van ouder Absoluut ten opzichte van absoluut Absoluut zonder coördinaten Centreren via absolute Negatieve waarden absolute Vaste positionering Blok over volledige schermbreedte Elementen stapelen op de Z-as Regulering van elementstapeling op de Z-as Nuances van het gebruik van negatieve z-index waarde

Floats

Introductie tot de float eigenschap Float eigenschap en tags Combinatie van float en margin Combinatie van float en padding Float elementen onder tags Effect van floats op de ouder Hoogte van de ouder van floats Tekst in de ouder van floats Vloeiende omloop Opheffen van vloeiende omloop Aparte div met clearfix Hoogte van de ouder en clearfix Float eigenschap voor blokken Float eigenschap en meerdere blokken Float eigenschap en ouder zonder tekst

Flexbox

Plaatsing in rij of kolom Plaatsing van flex elementen in omgekeerde rij Plaatsing van flex elementen in kolom Omkeren van kolom met flex elementen Hoofd- en kruisas Uitlijning op hoofd-as Uitlijning op kruis-as Waarde center van eigenschap align-items Centreren zonder hoogte van blokken Centreren met verschillende hoogte van blokken Waarde stretch van eigenschap align-items Practicum op uitlijning op assen Uitlijning van afzonderlijk element Volgorde van flex blokken

Grids

Introductie tot grids Tracks en lijnen Weergave in debugger Kolommen Fr-eenheid Fractionele fr Pixels en fr Procenten en fr Repeat-functie Auto-waarde Auto-fill waarde Minmax-functie Auto-fit waarde Rijen Korte notatie voor rijen en kolommen Rijen combineren Kolommen combineren Combinaties van samenvoegingen Kolomoverlapping Afstand tussen kolommen Afstand tussen rijen Afstand tussen kolommen en rijen Tegels

Lay-outs

Menu maken Eenvoudige lay-outs met één kolom voor websites Lay-outschema met meerdere wrappers Structurele blokken van een website Schema voor een lay-out met twee kolommen Schema voor een lay-out met drie kolommen voor een website Speciale tags voor elementen van een websitelay-out Belangrijkste lay-out tags Tag voor secties Praktijk met lay-outs

↑