Slike dodaju život na vaše web stranice i privuku pažnju gledatelja. Opisi pružaju dodatne informacije o vašim web-slikama, ali ih je teško dodati web stranicama bez naprednih HTML i CSS vještina. Evo pouzdane metode za dodavanje jednostavnog, ali atraktivnog naslova na sliku koja ostaje uz sliku gdje god se premjestite na web stranici.
Koraci za HTML slikovni prikaz
-
Dodajte sliku na svoju web stranicu.
-
U HTML-u za svoju web stranicu postavite div oznaku oko slike:
-
Dodajte atribut stila u div oznaku:
style = ""> -
Postavite širinu div na istu širinu kao i sliku, uz svojstvo stila širine:
-
Za naslove koji su nešto manji od okolnog teksta dodajte entitet veličine slova u stil div:
-
Opisi izgledaju najbolje ako su centrirani ispod slike pa dodajte entitet prilagodbe tekstu u atribut stila:
-
Konačno, dodajte malo dodatnog razmaka između slike i naslova dodavanjem atributa stila na sliku s entitetom stila alata za ispune:
style = "padding-bottom: 0.5em;" />
-
Zatim dodajte naslov teksta neposredno ispod slike:
Prenesite web stranicu na svoj poslužitelj i testirate ga u pregledniku.
Snimke za slaganje
- Dimenzije CSS-a mogu biti u različitim mjerenjima, tako da obično morate uključiti vrstu mjerenja. Na primjer:
širina: 100px; Međutim, dimenzije slike HTML uvijek su u pikselima, pa isključujete mjerenje.
širina = "100"
- Ako širinu div šire od širine slike, slika se može pojaviti pored slike. Ako je to ono što želite, a zatim dodajte a
označite izravno prije naslova i nakon oznake slike.
