Kuvan keskittäminen HTML-ohjelmoinnin avulla

click fraud protection
...

Käytä CSS: ää määrittääksesi Web-sivun ulkoasun.

Web-sivun koodaaja käyttää Hypertext Markup Language -kieltä kertomaan selaimelle sivun jokaisen elementin, kuten kappaleen, otsikon tai luettelon, toiminnallisen tarkoituksen. HTML 4:stä lähtien Cascading Style Sheets on tarjonnut koodaajalle tavan kertoa selaimelle, miltä kunkin elementin pitäisi näyttää, erillään niiden määrittelystä. Sivulla voi olla erilaisia ​​CSS-tyylejä erityyppisille laitteille, kuten matkapuhelimille ja pöytätietokoneille, jolloin sivun ulkoasu voi muuttua ilman, että koodaajan tarvitsee muuttaa HTML-koodia. Käytä CSS-ominaisuuksia kuvan keskittämiseen.

Vaihe 1

Aseta "img"-tunniste HTML-tiedostoon kohtaan, johon haluat kuvan näkyvän Web-sivulla. Sen on oltava "body"-tunnisteiden välissä ja "h1"-tunnisteiden jälkeen. Esimerkiksi,

Päivän video

Tämä on sinun tekstisi.

Kuvan kuvaus

määrittää kuvan nimeltä photo.jpg, joka on 170 pikseliä leveä ja 50 pikseliä korkea. Se on ensimmäinen asia sivulla yläotsikon jälkeen.

Vaihe 2

Käytä "marginaali" CSS-attribuuttia määrittääksesi tilan sivuelementtien, kuten kuvien, ympärille. Marginaaliattribuutin "auto"-arvo kertoo verkkoselaimen määrittämään automaattisesti tilan määrän. Niin,

Kuvan kuvaus määrittää, että selain määrittää kuvan ympärillä olevan tilan.

Vaihe 3

Käytä "näyttö"-ominaisuutta määrittääksesi, miten sivuelementti näytetään. Näyttöominaisuuden "block"-arvo käskee web-selainta näyttämään elementin omalla rivillään siten, että sen ylä- ja alapuolella on tilaa. Niin, Kuvan kuvaus määrittää saman kuvan, mutta lisäys "display: block;" asettaa sen nyt omalle rivilleen.

Vaihe 4

Tarkastele Web-sivua useilla eri selaimilla varmistaaksesi, että kuva on keskitetty oikein.

Kärki

Sisällytä kuvan kuvaus "alt"-tunnisteeseen. Tämä tekee sivustasi helpommin näkövammaisten lukijoiden saatavilla ja varmistaa, että koodisi on standardien mukainen. Kuvan kuvaus