Een webpagina coder gebruikt Hypertext Markup Language om de webbrowser vertellen het functionele doel van elk element op een pagina , zoals een paragraaf , kop of lijst. Sinds HTML 4 , zijn Cascading Style Sheets die de coder met een manier om de browser te vertellen hoe elk van deze elementen moet kijken , los van het definiëren van wat ze zijn . Een pagina kan verschillende CSS- stijlen hebben voor verschillende soorten apparaten , zoals mobiele telefoons en desktop computers, zodat de pagina verschijnen zonder dat de programmeur nodig om de HTML te veranderen om te veranderen . Gebruik CSS eigenschappen te midden van een afbeelding . Instructies
Plaats 1 de " img " tag in het HTML-bestand waar u wilt dat uw afbeelding weer te geven op de webpagina . Het moet tussen de "body " tags en na de " h1 " tags. Bijvoorbeeld ,
Dit is de tekst . < /H1 > < img src = " photo.jpg " alt = " Een beschrijving van de foto " width = " 270 " height = " 50 " >
< /body >
/definieert een afbeelding met de naam photo.jpg dat is 170 pixels breed en 50 pixels hoog . Het is het eerste wat op de pagina na de top titel . Kopen van 2 Gebruik de " marge " CSS- attribuut om de ruimte te definiëren rond pagina-elementen , zoals foto's . De "auto " waarde voor het attribuut marge vertelt de webbrowser om de hoeveelheid ruimte automatisch te bepalen . Dus ,  bepaalt dat de ruimte rond het beeld wordt bepaald door de browser .
3 Gebruik de "display" eigenschap om te bepalen hoe een pagina-element wordt weergegeven . De " block" waarde voor de eigenschap display geeft de webbrowser om het element weer te geven op zijn eigen lijn , met ruimte boven en onder het. Dus , < img src = " photo.jpg " alt = " Een beschrijving van de foto " width = " 170 " height = " 50 " style = " margin : auto ; display: block ; " /> definieert hetzelfde beeld , maar de toevoeging van . ' display: block ; " legt nu het op zijn eigen lijn
4 Bekijk de webpagina in verschillende browsers om te controleren of het beeld goed gecentreerd is .
|
