Išmokti į kuriamą tinklalapį įterpti paveikslus.

2

Susipažinti su paveikslų tipais ir formatais.

Išmokti koreguoti paveikslus.

Išmokti į kuriamą tinklalapį įterpti paveikslus.

Paveikslai yra labai svarbūs kiekvienai svetainei. Jie turi būti įterpti teisingai ir tinkamais formatais.

Šiuo metu internete populiariausi trys paveikslų formatai: JPG / JPEG: Joint Photographic Expert Group format

GIF: CompuServe’s Graphics Interchange Format

PNG: Progressive Network Graphics format

3

JPG yra Joint Photographic Experts Group akronimas. JPG labiausiai tinka nuotraukomis.

Nepaisant keisto pavadinimo, JPG failų yra visur. Tai gana tikėtina, kad jūsų skaitmeninis fotoaparatas saugo nuotraukas JPG formatu.

JPG formatas leidžia saugoti nuotraukas naudojant suspaudimo algoritmą. Algoritmas pašalina smulkius duomenis apie fotografiją, taip sumažindamas failo dydį. Kuo mažiau vietos užima failas, tuo greičiau jis atsiunčiamas ir įkraunamas.

4

Nefotografiniams paveikslams – logotipams, žemėlapiams, schemoms, diagramoms ir t. t. – naudojami GIF arba PNG formatai. GIF yra Graphics Interchange Format akronimas. Šį formatą 1987 m. sukūrė interneto paslaugų tiekėja CompuServe.

GIF paveiksle galima naudoti ne daugiau kaip 256 spalvas ir skaidrų foną, tačiau jis gali būti animuotas – besikeičiančių paveikslų seka. Tokie animuoti paveikslai pagyvina tinklalapį. Tik naudokite juos saikingai –per daug animacijos jūsų tinklalapį pavers neprofesionaliu.

GIF turėjo keletą teisinių ir techninių apribojimų, dėl to 1996 m. buvo sukurtas paveikslų formatas PNG (angl. Portable Network Graphics). PNG formatas leido naudoti 24 arba 32 bitų spalvų paletę. Praktiškai PNG paveikslai atrodo šiek tiek geriau nei GIF, bet jie yra tik statiniai –be animacijos.

5

Tipas Spalvų gylis Kompresija Animacija Skaidrumas

JPG / JPEG

24 bitai(1,6 mln. spalvų)

Su nuostoliais

Ne Ne

GIF 8 bitai(256 spalvos)

Be nuostolių

Taip Taip

PNG 24 arba 48 bitai

Be nuostolių

Ne Taip

6

Nuotraukos ir paveikslai į HTML dokumentą įterpiami naudojant neporinę gairę <img>. Ši gairė turi nemažai atributų, bet tik du iš jų yra būtini – src ir alt.

Atributo src reikšme nurodomas grafinio failo vardas – visas arba santykinis jo adresas.

Atributo alt reikšmė – tai alternatyvusis tekstas, kuris matomas paveikslo vietoje, kai šis būna išjungtas arba dėl kitų priežasčių nerodomas. Kai kurios naršyklės tinklalapio peržiūros metu parodo šį užrašą, užvedus pelės žymeklį ant paveikslo. Kitoms naršyklėms dėl šios operacijos reikalinga atributo title reikšmė. Patarimas: panaudokite abu atributus – alt ir title – su ta pačia reikšme.

Paveikslo įterpto į HTML dokumentą gairės pavyzdys:

<img src="tiger.jpg" alt="Tigras" title="Tigras" />

7

Gairės <img> vieta HTML dokumente turi įtakos paveikslo rodymui naršyklės lange.

Palyginkite tris pavyzdžius ir pamatysite skirtumus:

1. Prieš pastraipąPastraipa prasidės iš naujos eilutės po paveikslu.

2. Pastraipos pradžiojePastraipos pirmosios eilutės apačia sutampa su paveikslo apačia.

3. Pastraipos viduryjePaveikslas įsiterpia tarp pastraipos žodžių.

<img src="kolibris.gif" alt="" /><p>Kolibriai labai maži paukščiai, kurių stambiausi prilygsta kregždei, o smulkiausieji ne didesni už kamanę. Jų kūnas raumeningas, pėdos mažos, pritaikytos tik tupėti, o ne vaikščioti, snapas vamzdelio formos, patogus iš žiedų siurbti nektarą. Kolibriai skraido greitai ir vikriai.</p> <hr /><p><img src="kolibris.gif" alt="" />Kolibriai labai maži paukščiai, kurių stambiausi prilygsta kregždei, o smulkiausieji ne didesni už kamanę. Jų kūnas raumeningas, pėdos mažos, pritaikytos tik tupėti, o ne vaikščioti, snapas vamzdelio formos, patogus iš žiedų siurbti nektarą. Kolibriai skraido greitai ir vikriai.</p> <hr /><p>Kolibriai labai maži paukščiai, kurių stambiausi prilygsta kregždei, o smulkiausieji ne didesni už kamanę. <img src="kolibris.gif" alt="" /> Jų kūnas raumeningas, pėdos mažos, pritaikytos tik tupėti, o ne vaikščioti, snapas vamzdelio formos, patogus iš žiedų siurbti nektarą. Kolibriai skraido greitai ir vikriai.</p>

8

Rekomenduojama paveikslus saugoti atskirame aplanke, pavyzdžiui, paveikslai. Tuomet HTML dokumente reikėtų patikslinti atributo src reikšmę:

<img src="paveikslai/tiger.jpg" alt="Tigras" title="Tigras" />

9

Absoliutus ištekliaus adresas, pavyzdžiui D:/HTML/paveikslai/tiger.jpg, yra netinkamas, kadangi šiuo adresu pasiekiamas išteklius tik peržiūrint tinklalapį Jūsų kompiuteryje.

Kai tinklalapis su paveikslų aplanku bus įkeltas į paslaugų kompiuterį, jų adresai pasikeis ir minėtas absoliutus adresas nesutaps su naujuoju, todėl rekomenduojama nenaudoti absoliučių adresų, nebent tas adresas būtų jau įkelto į paslaugų kompiuterį ištekliaus.

10

Galite naudoti paveikslą, kuris jau publikuojamas saityne. Pavyzdys:

<img src="http://www.fwallpaper.net/pics/animals/tiger/Running-tiger-on-snow.jpg" alt="Tigras" title="Tigras" />

Šiuo atveju rizikuojate, kad Jūsų tinklalapyje nesimatys paveikslas, kai išteklius bus pervadintas ar perkeltas į kitą vietą arba visiškai pašalintas.

11

Jeigu paruoštas paveikslas yra per didelis arba per mažas, galite pakoreguoti jo aukštį ir / arba plotį pačiame HTML dokumente

Gairės <img> atributas width skirtas paveikslo pločiui, o atributas height – aukščiui nurodyti

Paveikslo aukštį ir plotį galima nurodyti taškų skaičiumi arba procentais lyginant su naršyklės langu

Didindami paveikslą galite gauti nekokybišką paveikslą, o mažindami jį nesutaupysite kilobaitų, todėl geriausia paveikslus paruošti tinkamo dydžio su grafikos rengykle

12

Į paveikslą reikia žiūrėti, kaip į simbolį, kuris dažniausiai būna daug didesnis už raides

Paveikslas įterptas į pastraipą šalia savęs palieka daug tuščios vietos. Jūs galite užpildyti šią tuštumą tekstu, jeigu paveikslą išlygiuosite prie kairiojo arba prie dešiniojo krašto

Gairės <img> atributas align skirtas paveikslo lygiavimui. Jo reikšmės: left ir right

Paveikslą išlygiuoti galite ir pakopiniais stiliais:

style="float:left" arba style="float:right"

13

Norėdami išlygiuoti paveikslą centre, turite pasinaudoti bloko gaire <div>:

<div style="text-align:center">

<img src=... alt=... /> </div>

Kitas metodas – CSS klasė:

.centre {

display: block;

margin-left: auto;

margin-right: auto;

}

14

Gairės <img> atributo align galimos dar trys reikšmės: bottom, middle, top

Vietoje atributo align patartina naudoti CSS savybę vertical-align

Pavyzdys:

<p><img src="kolibris.gif" alt=""

style="vertical-align:middle" />

Kolibriai labai maži paukščiai...</p>

15

Grafinę nuorodą sukurti visiškai nesudėtinga –tereikia prieš gairę <img> įterpti nuorodos gairę <a>, o už gairės <img> nepamiršti nuorodos pabaigos gairės – </a>

Pavyzdys:

<a href="index.html">

<img src="logo.png" alt="" />

</a>

16

Nors paveikslo rėmelį galite sukurti gairės <img> atributu border, geriau tai atlikti su pakopinių stilių savybe border. Tuomet galėsite pasirinkti ne tik rėmelio storį, bet ir stilių bei spalvą

Nenorėdami jokių rėmelių naudokite CSS savybę

border:none;

17

Gairės <img> atributai hspace ir vspace skirti tarpams šalia paveikslo sukurti, pavyzdžiui:

<img src="logo.png" hspace="10" />

Kadangi hspace leidžia nustatyti vienodus tarpus iš kairės ir dešinės, o vspace – vienodus tarpus iš viršaus ir apačios, patartina naudoti pakopinių stilių savybes margin arba padding

18

Po paveikslu arba vaizdu galima užrašyti pavadinimą ar autorių teises. Šis tekstas rašomas tarp HTML5 gairių <figurecaption> ir </figurecaption>

Paveikslas su pavadinimu tarsi sudaro vieną elementą –bloką, kurį apima HTML5 gairės <figure> ir </figure>

Pavyzdys:

<figure><img src="tigras.jpg" alt="Tigras"><figcaption>1 pav. Baltasis tigras</figcaption>

</figure>

19

Paveikslą galite panaudoti tinklalapio fonui, pavyzdžiui:

<body background="fonas.png">

Naudodami pakopinis stilius turėsite daugiau funkcijų foninio paveikslo panaudojimui:

background: url('fonas.png') ;

background-repeat: no-repeat; /* repeat, repeat-x arba repeat-y */

background-size: 50% 50%;

background-origin: content-box; /* border-box */

20