Za početnike: kako nacrtati tekst oko slike

U ovom članku ćemo vam reći o značajkama HTML-a i CSS-a koji su povezani sa slikama. Naučit ćete kako ih umetnuti u HTML dokument. Također u članku naći ćete informacije o tome kako promijeniti parametre slike i organizirati tijek oko slike pomoću teksta.

Prvo - o umetanju slike. Da biste to učinili, postoji oznaka "img" koji ima nekoliko atributa. Glavni je "src". Pohranjuje adresu s kojeg preglednik može umetnuti sliku. Možete odrediti put do slike već spremljene na računalu ili dati vezu na web resurs.

Sljedeći važan par dodijeljenih atributa je "širina" i "visina". Koriste se za ručno promjenu veličine slike (korisna opcija za istezanje i komprimiranje slike).

Zatim, parametri "hspace" i "vspace" (udaljenost od slike do okolnog teksta). Jasno, "hspace" je horizontalna uvlaka, a "vspace" je vertikalna.

Mi oznaka ima atribute kao što su „alt” i „naslov”. Oni su slični jedni drugima, jer je njihova svrha je opisati sliku. No, u „naslov” propisan tekst koji se prikazuje kada prelazite mišem preko slike, a doslovan vrijednost „alt” atribut prikazuje se u slučaju da nije bilo moguće prenijeti sliku.

Postoji nekoliko specifičnijih atributa koji su prisutni u većini oznaka. Oni su "pristupni ključ", "klasa", "id" i "stil". Postavlja "pristupni ključ" kombinacija tipki, s kojim se pristupa objektu. "Klasa" i "id" su parametri koji se odnose na CSS. Oni opisuju kojoj klasi pripada slika (ili njegov identifikator). "Stil" je tekstualni atribut koji vam omogućuje da odredite ugrađenu sliku u stilu CSS-a.

Jedan od parametara koji određuje izgled slike je "granica". Određuje debljinu okvira oko objekta i može se odrediti bilo kojim pozitivnim brojem (u pikselima).

Sljedeći atribut - „poravnati”. On opisuje tijek teksta oko slike. Ova opcija može biti postavljena na „dnu”, „srednja”, „lijevo”, „desno” i „top”. Svaki od vrijednosti određuje gdje staviti sliku na tekst. Na primjer, vrijednost „sredini” srednjeg slika je usklađen s donje granice teksta, dok je „lijevo” - objekt će biti s lijeve strane teksta. Ali to je samo jedan od načina da postavite toka teksta oko slike - HTML.

Tu je još jedan moćan alat - CSS (više raznolikosti). Može se koristiti mnogo učinkovitije postaviti oznaku atribute, uključujući toka teksta oko slike. CSS omogućuje definiranje parametara, a ne samo određeni objekt i sve one poput njega. Na primjer, ako želite odrediti uvlačenje svih slika u dokumentu je deset piksela, dovoljno je spojiti na CSS-predati je jednim bodom: „img {margin: 10px 10px 10px 10px;}” (u praksi, citati nisu potrebni!).

I protok oko slike s tekstom, na primjer, na lijevoj strani postavljen je ovako: "img {align: left;}".

Usput, dodavanje CSS koda ne mora ga zapisati u datoteku. Da biste to učinili, HTML nudi oznaku "stil" u kojoj možete umetnuti CSS kôd. No, to će raditi samo za ovaj dokument (ako želite dodati isti kôd u nekoliko HTML datoteka, tada biste trebali izraditi zaseban stilski list).

Sada možete "razrijediti" stranicu sa slikama, koristeći korisna svojstva oznake koja je odgovorna za to. Slobodno možete primijeniti veličinu ili omatanje teksta oko slike. Web stranice bez grafičkih komponenti prilično su dosadan pogled, zar ne?