HTML Osnove - Prikazivanje slika

• Svibanj 18, 2024

Nakon što postavite tekst svoje web stranice i formatirate po vašoj želji, vrijeme je da stranicu začinite s nekoliko slika. Slike ne samo da dodaju boju i život vašim stranicama, već ih možete koristiti i za stvaranje tekstualnih efekata koji bi bili teški ili nemogući s redovitim tekstom i oblikovanjem. Na primjer, odabir vaših fontova obično će biti ograničen na mali broj fontova za koje možete biti sigurni da su instalirani na računalima posjetitelja, jer ako nemaju instaliran font, oni ga ne mogu vidjeti na vašoj web lokaciji! Kad god objavite tekst nedostupnim fontom, računala posjetitelja prikazat će ga onim raspoloživim fontom koji je stilski najbliži stilu, što često može uništiti dizajn vašeg web mjesta.

S druge strane, ako koristite program za uređivanje slika za snimanje teksta fantastičnim fontom i objavljivanje kao GIF ili JPEG na vašoj web lokaciji, svaki posjetitelj će ga vidjeti točno onako kako ste namjeravali - jer je to sada slika teksta, a ne tekst sam. To vas može osloboditi korištenja fantastičnih fontova u zaglavlju i grupirati ih na neobične načine.

Osnovna oznaka koja se koristi za prikazivanje slika je sljedeća:



Gornji kôd savršeno će raditi u HTML-u. Ako koristite XHTML ili želite biti sigurni da je vaša web lokacija spremna za XHTML, dodajte koso crte da biste zatvorili oznaku, jer u XHTML-u ne možete upotrebljavati otvorene oznake:



'Src' je kratki za izvor, a vi ćete ga koristiti za određivanje putanje datoteke do vaše slike - drugim riječima, da biste pretraživaču rekli gdje se slika može pronaći na vašoj web lokaciji. Ako slike držite u istoj mapi kao i vaše web stranice, mapu ne trebate listati u tekstu "src" - možete samo unijeti naziv datoteke slike.

Nakon što odredite izvor slike, možete poboljšati ovaj osnovni okvir raznim neobaveznim atributima da biste maksimalno iskoristili svoje slike. Jedan atribut koji biste gotovo uvijek trebali koristiti je atribut 'alt'. To vam omogućuje da odredite koji tekst preglednik treba prikazati ako iz nekog razloga ne može prikazati vašu sliku. Tekst 'alt' priprema se na sljedeći način:



Još jedan koristan skup atributa su oznake 'width' i 'height'. Omogućuju prikaz slika u različitoj veličini od stvarne veličine slike. Možete ih koristiti za podešavanje slike kako bi se savršeno uklopila u vaš cjelokupni dizajn stranice. Međutim, uglavnom je poželjno promijeniti stvarnu veličinu slike pomoću programa za uređivanje slika i potom sliku objaviti na liniji iz dva razloga. Prvo, softver za uređivanje slika gotovo uvijek će vam dati bolji rezultat od podešavanja veličine rukom. Drugo, promjena oznake 'širina' i 'visina' ne mijenja stvarnu veličinu datoteke slike, tako da ako imate ogromnu sliku koja se prikazuje kao minijaturu, slika će se trajati toliko dugo koliko će se i žvakati jednako kao i širinu propusnosti kao da ste je prikazali u punoj veličini.

Kad određujete veličinu slike možete navesti visinu, širinu ili oboje. Veličine su određene pikselom kao što možete vidjeti dolje:



Svoje slike također možete "uskladiti" tako da ih nesmetano rade s protokom teksta. Ako odaberete poravnanje ulijevo, tekst će se početi s desne strane slike. Ako odaberete ispravno poravnanje, slika će se prikazati na desnoj strani stranice, a vaš tekst će se pojaviti na lijevoj strani slike, a zatim će se prebaciti na novi redak.

Poravnavanje slike postavlja se na sljedeći način:



Možete postaviti i poravnanje na "vrh", "dno" ili "sredina" kako biste sliku poravnali s gornjim ili donjim dijelom teksta. Ako ne odredite poravnanje, slika će se zadati na "dnu".

Kao bočne napomene možete uključiti atribute slika (src, poravnati, alt itd.) Bilo kojim redoslijedom unutar slikovnih oznaka. Moja osobna preferencija je prvo navesti atribut 'src' jer je to najosnovniji atribut i mora biti uključen u svaku slikovnu oznaku, ali možete koristiti bilo koji slijed koji vam se čini najprirodnijim.

Upute Video: HTML i CSS za pocetnike #19 - Ubacivanje i uredjivanje slika (Svibanj 2024).