computers

HTML Fundamentals - Layout Elements

Januari- 2021

Als je de andere componenten van de HTML Fundamentals-serie hebt doorlopen, weet je hoe je tekst opmaakt, afbeeldingen toevoegt en links maakt. De volgende stap is om te leren hoe u deze onderdelen op de webpagina kunt samenstellen om de gewenste look te krijgen.

Veel HTML-elementen bestaan ​​om verschillende delen van de pagina te helpen opmaken; we zullen ons concentreren op de twee die het meest worden gebruikt om paginasecties op te maken. De twee primaire lay-outelementen zijn de tabel en de div.

Sinds het begin van HTML zijn tabellen gebruikt om elementen ten opzichte van elkaar te plaatsen. De HTML-tabel was oorspronkelijk bedoeld voor het weergeven van gegevens en dergelijke, net als een Excel-spreadsheet. Webontwerpers realiseerden zich echter al snel dat ze tabellen konden gebruiken om afbeeldingen en tekst in meer geavanceerde lay-outs te positioneren dan het gebruik van tags en andere HTML-ontwerpelementen zou toelaten.

De HTML-tabel bevat rijen (aangegeven met de tags) en deze rijen bevatten kolommen (aangegeven met de -tags). De meeste tabellen hebben meerdere rijen en kolommen om te helpen bij het positioneren van elementen. De code voor een basistabel ziet er ongeveer zo uit:







Het bovenstaande codevoorbeeld zou een tabel met één rij en één kolom bouwen. U kunt meerdere rijen en kolommen gebruiken om een ​​meer gecompliceerde tabel te maken voor gebruik bij het positioneren van tekst en afbeeldingen. Een tabel met meerdere rijen en kolommen ziet er zo uit:









   
   


Door tekst en afbeeldingen in de juiste rijen en kolommen te plaatsen, kunt u deze elementen naar wens op uw webpagina plaatsen. Tabellen kunnen zichtbaar zijn, zoals in het bovenstaande voorbeeld, als u de rand instelt op "1" of meer. Als u 'border = "0' instelt, wordt een onzichtbare tabel gemaakt. Veel webpagina's bestaan ​​uit geneste onzichtbare tabellen, met één grote tabel met de belangrijkste paginasecties (zoals menu's) en kleinere tabellen waarin het hoofdgedeelte van de pagina wordt weergegeven.

Met de opname van CSS (Cascading Style Sheets) kwam het div-element goed tot zijn recht als lay-outelement. Ontwerpers kunnen nu CSS gebruiken om divs op specifieke locaties op de pagina te plaatsen, met nog preciezere resultaten dan tabellen kunnen bereiken. Een ontwerper kan bijvoorbeeld de volgende div-tag gebruiken om een ​​afbeelding in het midden van de webpagina te plaatsen:





Veel ontwerpers voeren tabellen geleidelijk uit ten gunste van divs. Als alles gelijk is, is het beter om divs en CSS te gebruiken voor lay-out in plaats van afhankelijk van tabellen. Tabellen zijn niet ontworpen voor gebruik als lay-outtool en het gebruik van geneste tabellen zal het moeilijk maken voor toegankelijkheidssoftware (zoals de sprekende interfaces die door blinden worden gebruikt) om uw website te begrijpen. Aan de andere kant is het mogelijk om te ver in de andere richting te gaan. Als u tien geneste divs gebruikt om een ​​lay-out te realiseren waarmee u één tabel kunt maken, bent u waarschijnlijk beter af met de tabel.

HTML & CSS Crash Course Tutorial #9 - Pseudo Classes & Elements (Januari- 2021)



Labels Artikel: HTML Fundamentals - Layout Elements, HTML, HTML, CSS, cascading style sheets, table, tables, div, divs, div tags, table tags, table layout, div layout, tabelrijen, tabelkolommen

Stijlen van haarrollers

Stijlen van haarrollers

schoonheid & zelf