Gebruik CSS om het uiterlijk van de webpagina te specificeren.
Een webpaginacoder gebruikt Hypertext Markup Language om de webbrowser het functionele doel van elk element op een pagina te vertellen, zoals een alinea, kop of lijst. Sinds HTML 4 bieden Cascading Style Sheets de codeur een manier om de browser te vertellen hoe elk van die elementen eruit moet zien, los van te definiëren wat ze zijn. Een pagina kan verschillende CSS-stijlen hebben voor verschillende soorten apparaten, zoals mobiele telefoons en desktopcomputers, waardoor het uiterlijk van de pagina kan veranderen zonder dat de codeur de HTML hoeft te wijzigen. Gebruik CSS-eigenschappen om een afbeelding te centreren.
Stap 1
Plaats de "img"-tag in het HTML-bestand waar u uw afbeelding op de webpagina wilt weergeven. Het moet tussen de "body"-tags en na de "h1"-tags staan. Bijvoorbeeld,
Video van de dag
Dit is uw tekst.
definieert een afbeelding met de naam photo.jpg die 170 pixels breed en 50 pixels hoog is. Het is het eerste op de pagina na de bovenste kop.
Stap 2
Gebruik het CSS-attribuut "marge" om de ruimte rond pagina-elementen, zoals afbeeldingen, te definiëren. De "auto"-waarde voor het marge-attribuut vertelt de webbrowser om automatisch de hoeveelheid ruimte te bepalen. Dus, definieert dat de ruimte rond de afbeelding wordt bepaald door de browser.
Stap 3
Gebruik de eigenschap "display" om te definiëren hoe een pagina-element wordt weergegeven. De "block"-waarde voor de display-eigenschap vertelt de webbrowser om het element op zijn eigen regel weer te geven, met ruimte erboven en eronder. Dus, definieert dezelfde afbeelding, maar de toevoeging van "display: block;" plaatst het nu op zijn eigen regel.
Stap 4
Bekijk de webpagina in verschillende browsers om te controleren of de afbeelding goed is gecentreerd.
Tip
Neem de beschrijving van de afbeelding op in een "alt" -tag. Dit maakt uw pagina toegankelijker voor slechtziende lezers en zorgt ervoor dat uw code voldoet aan de normen.
