Dodajte web titlov koji ostane sa slikom

Dodajte HTML predodžbe na web slike u 9 jednostavnih koraka

Slike dodaju život na vaše web stranice i privuku pozornost 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.

9 koraka do HTML slike

Dodajte opis na sliku i pomaknite ga zajedno gdje god želite:

1. Dodajte sliku na svoju web stranicu.
2. U HTML-u za svoju web stranicu postavite div oznaku oko slike:
3. Dodajte atribut stila u div oznaku:
   style = "" >
4. Postavite širinu div na istu širinu kao i sliku, sa svojstvom stila širine :
   širina: širina slike širina; ">
5. Za opise koji su nešto manji od okolnog teksta dodajte entitet veličine slova u stil div:
   font-size: 80%; ">
6. Opisi izgledaju najbolje ako su centrirani ispod slike, stoga dodajte svojstvo prilagodbe tekstu na atribut stila:
   text-align: center; "> < img src = "URL" alt = "alternativni tekst" width = "width" height = "height" />
7. Naposljetku, dodajte malo dodatnog razmaka između slike i naslova dodavanjem atributa stila na sliku s entitetom stila dna padding-dna :
   style =" padding-bottom: 0.5em; " />

1. Zatim dodajte opis teksta ispod slike:
   Ovo je moja oznaka

Prenesite web stranicu na svoj poslužitelj i testirate ga u pregledniku.

Snimke za slaganje

• Širine : Dimenzije CSS-a mogu biti u različitim mjerenjima, tako da obično morate uključiti vrstu mjerenja. Na primjer: širina: 100 px ; 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, dodajte oznaku
  izravno prije naslova i nakon oznake slike.