Lielākajā daļā Web lapu ir grafika. Tas ļauj krāsaini un skaidri pasniegt informāciju. Daudzos gadījumos labāk ir parādīt attēlu, nevis sniegt garu teksta aprakstu.
Ir divi veidi, kā ievietot grafiku lapā:
- atsevišķu attēlu ievietošana;
- aizpildot fonu ar attēlu.
Jebkurā gadījumā grafiskais attēls tiek ņemts no faila.
Grafikas ievietošana
Grafiskais attēls no grafiskā formāta faila tiek ievietots lapā, izmantojot tagu
(no angļu valodas, attēls - attēls), norādot faila adresi kā argumentu SRC atribūtam:
< IMG SRC = "адрес_графического_файла" >
Attēla faila adrese ir vai nu URL, vai faila nosaukums, iespējams, ar ceļu. Piemēram, lai parādītu grafisko failu logotip.jpg, uzrakstiet tagu:
< IMG SRC = "logotip.jpg" >
Lai palielinātu grafiskā attēla pārsūtīšanas ātrumu tagā
varat izmantot atribūtu (pēc izvēles) LOWSRC, kas kā argumentu ņem grafiskā faila adresi. Varat izveidot divus grafiskos failus: vienā (piemēram, lai tas būtu fails logotip.jpg) ir attēls, kas iegūts no augstas izšķirtspējas un otrs (piemēram, logotip.gif) ir attēls ar zemu izšķirtspēju. Tad atzīme ir šāda:
< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >
... norādīs pārlūkam vispirms lejupielādēt failu logotip.gif un pēc tam to aizstāt ar failu logotip.jpg, tiklīdz tas ir saņemts.
Vēl viens veids, kā paātrināt grafikas ielādi, ir iestatīt taisnstūra laukuma lielumu, kurā grafika tiks ievietota, izmantojot atribūtus PLATUMS(platums) un AUGSTUMS(augstums), ko mēra pikseļos. Ja norādīsit šos atribūtus, pārlūkprogramma vispirms piešķirs vietu grafikai, sagatavos dokumenta izkārtojumu, parādīs tekstu un tikai pēc tam ielādēs grafiku. Ņemiet vērā, ka pārlūks samazina vai izstiepj attēlu, lai tas atbilstu norādītā izmēra rāmjiem. Attēla lieluma norādīšanas piemērs:
< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >
Grafika parasti tiek izmantota kopā ar tekstu, tāpēc rodas uzdevums saskaņot tekstu un grafiku. Šis uzdevums tiek izpildīts, izmantojot atribūtu ALIGN tagu
izmantojot dažādus argumentus. Piemēram, mēs varam vēlēties, lai teksts plūst pa attēlu pa labi vai pa kreisi. Parasti attēls ir iestrādāts tuvu tekstam, kas var būt neglīts. Lai no tā izvairītos, ap ilustrāciju varat iestatīt tukšus laukus. Lauki tiek veidoti, izmantojot atribūtus VSPACE augšējām un apakšējām malām un TĀRTĪBA taga malām
... Šo atribūtu argumenti ir norādīti kā skaitļi, kas norāda lauku lielumu pikseļos. Lai atceltu teksta plūsmu ap grafiku, izmantojiet tagu
.
Nākamais tags nosaka grafikas plūsmu no faila logotip.jpg pa labi (attēls būs pa kreisi no teksta):
< IMG SRC = "logotip.jpg" ALIGN = LEFT >
Ja vēlaties novietot attēlu pa labi no teksta, jums ir nepieciešams atribūts ALIGN piešķirt argumentu TAISNĪBA:
< IMG SRC = "logotip.jpg" ALIGN = RIGHT >
Lai iestatītu laukus ap attēlu, jums jāraksta šāds tags:
< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >
Šeit skaitļi 20 un 10 nosaka lauku lielumus.
Apskatīsim grafikas un tekstu koplietošanas piemēru. Atveriet Notepad ( teksta redaktors Notepad) Windows. Ierakstiet tajā HTML kodu, izmantojot iepriekš aplūkotos tagus. Zemāk ir programma, kas izvada tekstu un grafiku. Jebkurš no jūsu failiem var tikt izmantots kā grafiskais fails. Tas izmanto failu logotip.gif.
< HTML >
< HEAD >
< TITLE >1. uzdevums< / TITLE >
< / HEAD >
< BODY BGCOLOR = "YELLOW" >
< IMG SRC = "logotip.gif " ALIGN = LEFT >
< H1 >Teksts ap grafiku ietin pa labi< / H1 >
Rīsi. 657... Teksts apvijas ap attēlu pa labiPlašas iespējas precīzai attēlu (kā arī citu elementu) pozicionēšanai lapā nodrošina tabulas un stili... Šīs HTML elementi tiks apspriests vēlāk. Piemēram, varat definēt tabulu bez redzamiem rāmjiem un ievietot attēlus, tekstus un citus elementus šīs tabulas šūnās.
Šī apmācība parādīs, kā izrotāt tīmekļa lapu, pievienojot tai grafiku. Mēs iepazīsimies ar izplatītākajiem attēlu formātiem, uzzināsim, kurš tags tiek izmantots attēlu pievienošanai lapai, tiksim galā ar alternatīviem parakstiem un teksta un grafikas izlīdzināšanu. Mēs arī iepazīsimies ar attēlu galvenajiem atribūtiem un uzzināsim, kā pielāgot attēla platumu un augstumu. Tālāk daži vārdi par attēlu izmantošanu kā saitēm un kas ir attēlu sīktēli. Visbeidzot, ir daži vispārīgi padomi par grafikas izmantošanu tīmekļa lapā.
Attēlu pievienošana tīmekļa lapai
Ja tīmekļa lapa satur tikai tekstuālu informāciju, tā kādam var šķist interesanta, pateicoties tajā uzrādītajai informācijai, taču maz ticams, ka kādam būtu kārdinājums to saukt par pievilcīgu. Tīmekļa lapai ir ļoti viegli pievienot attēlus. Lai pievienotu grafiku, kas lapai var piešķirt profesionālu izskatu, ir nepieciešamas zināmas zināšanas. Kam patiesībā ir veltīta šodienas stunda.
Divi visbiežāk izmantotie grafiskie formāti internetā ir GIF un JPEG. Apvienotās fotogrāfijas ekspertu grupas (JPEG) izstrādāto un nosaukto formātu parasti izmanto, lai saglabātu attēlus ar vienmērīgu krāsu pāreju, piemēram, fotogrāfijas.
Gandrīz visi pārējie grafiskie elementi tiek saglabāti GIF (Graphics Interchange Format) formātā, kas ir grafisko datu apmaiņas formāts. Pašlaik ir vēl viens jauns grafikas formāts, kas iegūst arvien lielāku popularitāti: PNG (Portable Network Graphics). Paredzams, ka tas galu galā aizstās GIF formātu. Tomēr nesteidzieties atkārtoti saglabāt visus grafiskos failus šādā formātā, lai gan to joprojām neatbalsta visas pārlūkprogrammas.
Visi attēli tiek pievienoti tīmekļa lapai, izmantojot to pašu tagu, ko sauc par attēla avota tagu 
... Iespējams, tagad jūs pats to varat noteikt šo ierakstu sastāv no pašas atzīmes , tā atribūts (scr) un šī atribūta vērtība (atrašanās vieta). Tomēr, tā kā ir nepieciešams atribūts scr, šo ierakstu ir ērtāk uzskatīt par vienu kopīgu tagu. Jūs droši vien arī ievērojāt, ka attēla avota tagam nav atbilstoša beigu taga. Šis ir atsevišķs, patstāvīgs tags, tāpēc neaizmirstiet tā beigās pievienot slīpsvītru:
.
# 1058; D XHTML 1.0 Transitional // LV "" http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd "> Pirmie attēli f> Šis attēls tika pievienots manai pirmajai tīmekļa lapai.> 
Alternatīvo etiķešu pievienošana
Sērfojot internetā, jūs, iespējams, pamanījāt dažādus uzrakstus, kas parādīti, novietojot peles kursoru virs kāda tīmekļa lapas grafiskā elementa. Šie uzraksti parasti norāda uz kaut kādu Papildus informācija par pašu attēlu vai par lapas apgabalu, ko tas aizņem.
Tālāk redzamais HTML kods parāda, kā tagā tiek pievienots atribūts alt. ... Līdzīgi kā atribūts src, arī atribūts alt tīmekļa pārlūkprogrammai sniedz papildu informāciju par attēlu, un to vienmēr var izmantot arī kopā ar tagu
.
Atribūts alt definē alternatīvu tekstu tīmekļa lapai pievienotajam grafiskajam elementam. Šo tekstu sauc par alternatīvu, jo to var parādīt ekrānā kā alternatīvu pašam attēlam. Alt atribūtam ir vēl viens ļoti svarīgs mērķis. Daudzi interneta apmeklētāji, kas izmanto zema datu pārraides ātruma kanālus, var norādīt pārlūkprogrammām neielādēt vai nerādīt grafisko informāciju. Tas ļauj viņiem paātrināt tīmekļa lapu ielādi savos datoros.
Atcerieties arī, ka ne visas pārlūkprogrammas savos logos spēj parādīt grafiku. Piemēram, Lynx pārlūks šo funkciju vispār neatbalsta. Tādējādi atribūts alt ļauj tīmekļa dizainerim būt pārliecinātam, ka, ja viņa tīmekļa lapas apmeklētājs neredz attēlu savā ekrānā, viņš vismaz var redzēt šim attēlam pievienoto teksta informāciju.
Lai gan alt atribūtu var definēt katram tagam , esiet piesardzīgs un nepiešķiriet dažiem grafiskiem elementiem nepiemērotas īsziņas. Piemēram, nav jēgas pievienot alternatīvas teksta etiķetes dažādiem tīmekļa lapas ārējā dizaina elementiem. Lai izvairītos no šādām kļūdām, varat iestatīt šādu elementu alt atribūtu uz tukšu vērtību (alt = ""). Ja neiestatāt citus atribūtus, pārlūkprogramma atveido attēlu tā sākotnējā izmērā, izlīdzinot attēla augšējo malu ar blakus esošās teksta rindas augšējo malu. Abus šos parametrus var mainīt, izmantojot stila lapu tagus.
Attēla atribūti
Par tagu tiek piedāvāti atribūti, lai mainītu attēla izmērus. Daži no šiem atribūtiem ir uzskaitīti zemāk.
augstums- Norādīts pikseļos vai procentos - Norāda attēla augstumu
platums- Norādīts pikseļos vai procentos - Norāda attēla platumu.
Attēla platuma un augstuma regulēšana
Tīmekļa lapā ievietotā attēla izmērus var norādīt, izmantojot augstuma un platuma atribūtus. Šo atribūtu vērtības ir norādītas vai nu kā fiksēts pikseļu skaits, vai procentos no lapas lieluma. Apskatiet zemāk esošo HTML kodu. Pirmais tags nosaka sākotnējā attēla izmērus, kurus redzējāt šīs apmācības iepriekšējos attēlos, uz 60 pikseļiem vertikāli un 60 pikseļiem horizontāli. Otrais tags nosaka tā paša attēla platumu līdz 6% no lapas platuma un augstumu līdz 10% no lapas augstuma. Attēlā parādīts, kā abi šie attēli parādās pārlūkprogrammas logā.
Parādot attēlu savā logā, pārlūkprogramma vienlīdz labi pārvalda vērtības, kas noteiktas gan pikseļos, gan procentos. Tomēr ņemiet vērā, ka jūsu tīmekļa lapas apmeklētāju datoriem var būt iestatīta cita ekrāna izšķirtspēja nekā uzstādīts jūsu monitoram. Kas no tā izriet? Piemēram, monitora izšķirtspēja ir 800x600. Iepriekšējā piemērā tīmekļa lapai pievienotajam attēlam tika iestatīts platums 6% no lapas platuma, kas šajā izšķirtspējā būtu 48 pikseļi. Ja skatāties to pašu attēlu monitorā ar izšķirtspēju 1024x800, norādītie 6% no lapas platuma atbilst platumam, kas vienāds ar 61 pikseļiem.
Mainot attēla izmērus, neaizmirstiet iestatīt abas vērtības atbilstoši tā augstumam un platumam. Ja maināt tikai vienu no šīm vērtībām, attēls ekrānā tiks izstiepts vertikāli vai horizontāli. Alternatīva iespēja sastāv no attēla izmēra pielāgošanas, izmantojot grafisko redaktoru.
Jūs varat radīt ilūziju par vairāk ātra iekraušana Attēli. Neatkarīgi no tā, vai attēla izmērs ir mainīts vai nē, vienmēr iekļaujiet augstuma un platuma atribūtu vērtības, jo tās pārlūkprogrammai sniegs svarīgu informāciju par to, cik daudz vietas lapā jāpiešķir attēla uzņemšanai. Šajā gadījumā pārlūkprogramma varēs noteikt attēlam nepieciešamo vietu un turpināt veidot citus lapas elementus, nepārtraucot paša attēla lejupielādi. Tas rada iespaidu, ka lapa tiek ielādēta ātrāk, jo tās apmeklētājiem nav jāgaida, līdz attēls ir pilnībā ielādēts, lai beidzot redzētu citu lapā sniegto informāciju.
Ja jūs patiešām vēlaties, lai attēls lapas platumā ietilptu tieši vajadzīgajā vietā, izmantojiet procentus. Šādā gadījumā jebkura monitora ekrānā attēls aizņems to pašu lapas daļu kā ekrānā. Ja vēlaties, lai paša zīmējuma izšķirtspēja (tā lielums pikseļos) paliktu nemainīga, izmantojiet pikseļos izteiktās vērtības.
Izlīdziniet tekstu un grafiku
Atribūts izlīdzināt tagu Ļauj izlīdzināt attēlu uz teksta rindas labās (labās vērtības) vai kreisās (kreisās vērtības) malas. Šī atribūta izmantošanas piemēri ir parādīti attēlā.
To pašu atribūtu var izmantot, lai izlīdzinātu attēlu vertikāli (atkal attiecībā pret teksta virkni). Tam var būt trīs citas vērtības augšā, apakšā un centrā. Ja līdzināšanas atribūts ir iestatīts uz augšu, attēla augšdaļa ir izlīdzināta ar jebkura apkārtējā teksta augšdaļu. Ja līdzināšanas atribūts ir iestatīts uz leju, attēla apakšdaļa ir izlīdzināta ar apkārtējā teksta apakšdaļu. Ja līdzināšanas atribūts ir iestatīts uz centru, attēla centrs ir izlīdzināts ar teksta rindas centru.
Attēlu izmantošana kā saites
Attēli ir piemēroti ne tikai tīmekļa lapu noformēšanai. Tos var veiksmīgi izmantot kā hipersaites uz citiem dokumentiem. HTML tas ir viegli, jo attēli pārvēršas hipersaitēs tieši tāpat kā tekstlodziņi. Lai to izdarītu, jums jāpielieto arī tags, iekļaujot tīmekļa lapas elementu, kuram vajadzētu kļūt par saiti uz citu dokumentu. Tādējādi, ja pāreja uz hipersaiti jāveic pēc noklikšķināšanas uz kāda attēla, tagā ir jāiekļauj šī attēla tags.
V Šis gadījums, pēc tam, kad tīmekļa lapas apmeklētājs novieto kursoru virs attēla, blakus kursoram tiek parādīta īsziņa “Šis ir mans pašportrets!”. Pēc noklikšķināšanas uz attēla tiks atvērts dokuments DOC2.htm, uz ko norāda hipersaite.
Attēlu sīktēli
Vēl viena izplatīta HTML hipersaites iespēju izmantošana ir dažu attēlu izmantošana, lai pārietu uz citiem. Kam tas paredzēts? Fakts ir tāds, ka diezgan bieži to attēlu izmēri, kurus vēlaties publicēt tīmekļa lapā, ir pārāk lieli, un nav pārliecības, ka apmeklētājiem būs pacietība gaidīt, līdz tiks pabeigta ielāde. Šādos gadījumos tiek izveidota sākotnējā attēla miniatūra kopija, ko sauc par sīktēlu, ar kuru pārlūkprogramma tiks ielādēta daudz ātrāk. Ja apmeklētājs ir ieinteresēts attēlā un vēlas lejupielādēt pilnu tā kopiju, viņam atliek tikai noklikšķināt uz šī sīktēla. Šādi izskatās atbilstošie HTML kodi.
Kā redzat, noklikšķinot uz sīktēla.jpg attēla, tiek atvērts cits attēla fails (image.jpg). Teksta virkne, kas norādīta kā atribūta alt vērtība, apmeklētājam norāda, kā atvērt galveno attēlu.
Veiksmīgu attēlu izmantošanas noslēpumi
Attēli ir interesanti un pievilcīgi, satur daudz vizuālas informācijas un ir ļoti viegli pievienojami tīmekļa lapām, taču, ja patiešām vēlaties izveidot vietni, kas kļūs populāra interneta lietotāju vidū, jums tomēr jāievēro daži no šiem noteikumiem.
Kā vairāk izmēru attēla failu, jo ilgāk tas būs jāielādē lietotāja datorā. Tā kā lielākā daļa interneta apmeklētāju, lai piekļūtu tīklam, joprojām izmanto zemus sakaru kanālus caurlaidspēja, lejupielādēto failu izmēri viņiem joprojām ir ļoti svarīgi. Noteikti paturiet to prātā un mēģiniet savās tīmekļa lapās saglabāt pēc iespējas mazākus attēlus.
Svarīgs ir ne tikai atsevišķa attēla faila lielums, bet arī visa HTML dokumenta kopējais faila lielums. Jo vairāk attēlu tiks pievienoti tīmekļa lapai, pat ja tie ir mazi, jo lielāks būs gala dokumenta faila lielums. Izpildīt priekšskatījums savu lapu dažādās pārlūkprogrammās un novērtējiet, cik ilgs laiks būs nepieciešams, lai katra pārlūkprogramma to ielādētu.
Tā kā atribūts alt ir tik svarīgs (ieteicams to definēt katram tagam , esiet uzmanīgi, to lietojot. Pārliecinieties, ka saturs īsziņa vienmēr atbilst pašam attēlam, pretējā gadījumā jūsu lapas apmeklētāji var būt apjukuši. Tāda pati piezīme attiecas uz pretējā virzienā: Noteikti saskaņojiet attēlus ar teksta informāciju, kas sniegta tīmekļa lapā. Lidmašīnas fotogrāfija būtu piemērota gaisa ceļojumu vietnē, bet savvaļas dzīvnieku vietā - pilnīgi lieka.
Internetā varat atrast daudz interesantu attēlu un viegli tos saglabāt savā datorā. Tomēr daudzi no šiem attēliem ir aizsargāti ar autortiesībām. Ja komerciālā vietnē atrodat attēlu, kas jums patīk, pārbaudiet, vai tajā nav autortiesību ziņojumu un vai šis attēls ir pieejams bezmaksas lietošanai.
Ja tīmekļa lapas attēls nav aizsargāts ar autortiesībām, varat to kopēt savā datorā. Lai to izdarītu, vienkārši ar peles labo pogu noklikšķiniet uz šī attēla un atvērtajā izvēlnē atlasiet komandu Saglabāt attēlu kā. Pēc attēla saglabāšanas datorā varat to izmantot tāpat kā jebkuru citu zīmējumu.
Praktiskā darba numurs 2
Attēlu ievietošana HTML dokumentā
Darba mērķis. Iepazīstieties ar pamata tagiem attēlu ievietošanai HTML dokumentā, iepazīstieties ar atribūtiem attēlu pārveidošanai dokumentā.
Literatūra. Lekciju piezīmes.
3. Sagatavošanās darbam. Izpētiet lekciju piezīmes par tēmu "Grafika".
Aprīkojuma saraksts. Dators.
Vingrinājums.
5.1. Uzziniet par pamata tagiem attēlu ievietošanai HTML dokumentā.
5.2. Izpētiet attēlu atveidošanas pamatatribūtus.
5.4. Uzziniet, kā izrotāt attēlus tīmekļa lapās.
Darba secība.
6.1. Attēlu ievietošana tīmekļa lapā.
1. Atvērt Krāsošanas programma un izveidojiet tajā trīs attēlus atbilstoši paraugam: katrs attēls atrodas atsevišķā failā.
 |  |
1. attēls 2. attēls 3. att
Saglabājiet šos failus zem nosaukumiem bloc1.gif, bloc2.gif, bloc3.gif savā mapē.
2. Atveriet teksta redaktora piezīmju grāmatiņu un izveidojiet tīmekļa lapu saskaņā ar piemēru:
Tīmekļa lapas kods:
algoritm.html.
6.2. Horizontālu līniju un citu objektu izveidošana.
1. Atveriet teksta redaktora piezīmju grāmatiņu un izveidojiet 2 tīmekļa lapas saskaņā ar piemēru:
Tīmekļa lapas koda fragments:
3. Saglabājiet saņemto dokumentu savā mapē, piešķirot failam nosaukumu linii.html.
4. Palaidiet pārlūkprogrammu Internet Explorer... Skatiet tajā iegūto tīmekļa lapu.
5. Izveidojiet otru tīmekļa lapu.
Tīmekļa lapas koda fragments:
6. Saglabājiet saņemto dokumentu savā mapē, piešķirot failam nosaukumu list.html.
7. Skrien Interneta pārlūks Explorer. Skatiet tajā iegūto tīmekļa lapu.
Attēlu kartes izveide un ložņu līnijas ievietošana.
1. Izveidojiet tīmekļa lapu, izmantojot šādu attēlu. Tas atrodas darbvirsmas mapē Praktisks darbs pēc HTML.
2. Izveidojiet attēlu karti, lai, virzot peles kursoru virs konkrētas datora ierīces, tiktu parādīts tās nosaukums.
3. Tajā pašā lapā izveidojiet ložņojošu līniju:
Vai jums patīk spēlēt Datorspēles, patīk programmēt sevi!
4. Saglabājiet saņemto dokumentu savā mapē, piešķirot failam nosaukumu carta.html.
5. Palaidiet pārlūkprogrammu Internet Explorer. Skatiet tajā iegūto tīmekļa lapu.
7.1. Faili algoritm.html, linii.html, list.html, carta.html savā mapē.
8. Pārbaudes jautājumi.
8.1. Kādu tagu izmanto attēlu ievietošanai HTML dokumentā?
8.2. Kāds atribūts ļauj norādīt attēla faila nosaukumu?
8.3. Kādi atribūti ļauj iestatīt attēla izmēru?
8.4. Kāds atribūts ļauj iestatīt attēla stāvokli attiecībā pret apkārtējo tekstu?
8.5. Kāds atribūts ļauj iestatīt apmales biezumu ap attēlu?
8.6. ... Kādi atribūti nosaka brīvās vietas daudzumu kreisajā, labajā, virs un zem attēla?
8.7. Kādu tagu izmanto, lai izveidotu attēlu kartes? Kādi atribūti tiek izmantoti?
8.8. Kurš tags ir paredzēts rāpuļprogrammas rindas izveidošanai?
Pieteikums.
Grafika
Grafikas ievietošana tīmekļa lapā. Grafikas failu formāti
Divi populārākie grafiskie formāti internetā ir GIF un JPEG.
Parasti viņi izmanto:
JPEG - fotogrāfijām un attēliem ar ļoti sarežģītu krāsu gammu ar vienmērīgām krāsu pārejām (paplašinājumā tas ir rakstīts kā JPG).
GIF - logotipiem, parakstiem, virsrakstiem, attēliem ar skaidrām krāsu robežām.
GIF formāts
Šī formāta attēli atbalsta 256 krāsas. GIF formātā ir trīs papildus iespējas:
Animācija. Izmantojot animētu GIF redaktoru, ir viegli salikt vienkāršu "karikatūru": uzzīmēt atsevišķus kadrus, pielāgot aizkaves laiku displeja secībā, "pārvērst filmu" vai parādīt kadrus tikai vienu reizi. Kad animācija ir gatava, tā tiek ierakstīta diskā kā parasts GIF fails. Bet šajā failā ir nevis viens, bet vesels GIF un dažādas konfigurācijas informācijas kolekcija.
HTML valodā nav atšķirības starp vienkārša GIF vai animēta GIF norādīšanu.
Caurspīdīga grafika. GIF formāts ļauj vienu vai vairākas attēla krāsas pasludināt par caurspīdīgām. Tas palīdz atbrīvoties no stingri taisnstūra ilustrācijām un pievilcīgāk iekļaut zīmējumu dokumentā:
Savstarpējā skenēšana. Izmanto lieliem GIF. Ilustrācija ir sadalīta četrās daļās, sākotnējā attēla izmērā. Pirmajā daļā ir 1, 5, 9 utt. sākotnējā attēla līnijas. Otrais ir 2., 6., 10. utt. Trešais ir 3., 7., 11. utt. Ceturtais - 4., 8., 12. utt.
Pārlūkprogramma vispirms uz ekrāna balstās attēla pirmajā daļā, pēc tam - trešajā un ceturtajā. Tiek iegūts attēla pakāpeniskas attīstības efekts.
JPEG formāts
Šis formāts tika īpaši izstrādāts fotoattēlu pārsūtīšanai. Tas atbalsta miljoniem krāsu un rada ļoti augstas kvalitātes attēlus.
Protams, augsta kvalitāte atspoguļojas failu izmēros. Bet JPEG formāts ir viena īpatnība: JPG redaktorā, ierakstot diskā, varat norādīt nepieciešamo kvalitātes pakāpi un tādējādi, balansējot uz “kvalitātes faila lieluma” joslas, panākt vēlamo kompromisu. Patiešām, ja skenētajā fotoattēlā atstājat tikai 10 000 no miljona krāsu, pārējās krāsas aizstājot ar tuvām, šādu nomaiņu ar acīm būs gandrīz neiespējami noteikt, un faila izmērs tiks ievērojami samazināts.
JPEG formāts atbalsta režīmu, kas līdzīgs GIF sasaistītam. Bet atšķirībā no GIF, sadalīšana daļās notiek nevis pēc līnijām, bet ar algoritmu pilna izmēra detaļu izvilkšanai no attēla. Turklāt katra nākamā daļa ir augstākas kvalitātes nekā iepriekšējā. JPEG ar šo īpašību sauc par progresīvo.
Elements
Elements izmanto, lai ievietotu grafisko attēlu dokumenta pamattekstā.
Sintakse:
Turklāt elements
atbalsta dažādus atribūtus, kas nosaka attēla stāvokli attiecībā pret apkārtējo tekstu un saturu Tīmeklis lapas kopumā. Attēlu var izlīdzināt līnijas kreisajā, labajā, augšējā vai apakšējā daļā vai novietot loga centrā.
Atribūti:
src(norāda uz grafikas failu, norādot tā URL).
Sintakse:
alt(attēla vietā tiek parādīts cita veida teksts, šeit ir uzzīmēts uzņēmuma logotips).
Sintakse:
izlīdzināt(iestata attēla pozīciju logā un tā izlīdzināšanu, var iegūt šādas vērtības: tops- gar augšējo malu, apakšā- gar apakšējo malu, vidū-centrā, taisnība-pareizi, pa kreisi-pa kreisi).
Sintakse:
platums(iestata laukuma platumu pikseļos, kas atvēlēts attēla logā).
Sintakse:
augstums(iestata laukuma augstumu pikseļos, kas atvēlēts attēla logā).
Sintakse:
hspace(norāda balto atstarpi pikseļos pa labi un pa kreisi no attēla).
Sintakse:
robeža(iestata attēla apmales platumu pikseļos).
Sintakse:
vspace(iestata balto atstarpi pikseļos virs un zem attēla).
Sintakse:
ismap(ļauj izmantot attēlus, kuru daļas ir saistītas ar saitēm un ļauj veikt pārejas. Šādus attēlus sauc par MAP karti, tie tiek izmantoti kopā ar elementu ... Šajā gadījumā serveris reaģē uz klikšķi uz kartes).
Sintakse:
lietotkarte (ļauj izmantot attēlus, kuru dažas daļas ir saistītas ar kartēm, tās tiek izmantotas kopā ar elementu
Attēlu kartes.
Elements
Elements
Sintakse:
Elements
Elements norāda kartes aktīvos apgabalus, uz kuriem varat noklikšķināt, lai tos saistītu. Vienumam nav beigu taga. Ir ērti strādāt ar kartes attēliem standarta aplikācija operētājsistēmai Windows - Paint redaktors, kuram attēls ir jāpārveido BMP formātā. Izmantojot režģi tālummaiņas režīmos, nospiežot Ctrl + G un izvēloties atlases rīku, kad peles rādītājs mainās uz plānu krustu, kursora koordinātas var noteikt ar viena pikseļa precizitāti. Šī precizitāte var būt ļoti noderīga, norādot kartes aktīvo apgabalu koordinātas. Elements atbalsta dažādus atribūtus:
Sintakse: URL ">
alt(iestata alternatīvo tekstu pārlūkprogrammām, kuras neatbalsta šis priekšmets).
Sintakse:
titulu(nosaka pārlūkprogrammām alternatīvu tekstu, kas parādās, kad virzāt kursoru virs šī elementa).
Sintakse:
forma(nosaka kartē aktīvās zonas formu un tās koordinātas, tai var būt šādas vērtības: "apļa" koordinātas = X, Y, R, kur X, Y, R - apļa centra koordinātas un tā rādiuss , "poli" saites = X1, Y1, X2, Y2, X3, Y3 ..., kur X1, Y1, X2, Y2, X3, Y3 ... ir daudzstūra virsotņu koordinātas, ja daudzstūris ir taisnstūris, tad pietiek norādīt tā augšējās kreisās un labās apakšējās virsotnes "taisnās" koordinātas = X1, Y1, X3, Y3).
Sintakse:
aplis"koordinātas = X, Y, R >
Attēla piemērs - kartes:
Otra vissvarīgākā tīmekļa lapu aizpildīšanas sastāvdaļa pēc teksta neapšaubāmi būs Grafiskais dizains. Tie ir dažāda veida zīmējumi, fotogrāfijas un varbūt pat videoklipi. Mēs varam izmantot arī skaņu celiņu, lai parādītu Web lapas.
Sāksim ar grafikas ievietošanu. Pārlūkprogrammas var parādīt tikai trīs veidu grafiskos failus. Tie ir GIF, JPEG un PNG faili. GIF faili ļauj izveidot animētus attēlus. JPEG failus parasti izmanto fotoattēlu glabāšanai. Tikko parādījās PNG formātsļauj apvienot laba kvalitāte attēlus un nelielu grafiskā faila daudzumu. Bet pēc tam, kad attēls ir iesaiņots grafiskā failā, tas joprojām ir kaut kādā veidā jāiekļauj tīmekļa lapā.
Šim nolūkam tiek izmantots tags ar daudziem parametriem. Šim tagam nav beigu pāra, jo tas nerada nekādas darbības attēlošanas kārtulai, tas tīmekļa lapas saturā ievieto tikai grafisku attēlu. Faktiski grafiskais attēls var būt arī hipersaite vai pat slēpt vairākas hipersaites aiz sevis, bet par hipersaitām mēs runāsim šīs nodaļas nākamajā sadaļā, bet pagaidām izdomāsim taga lietošanas noteikumus.
.
Taga galvenais un nepieciešamais atribūts ir src atribūts. Šī atribūta vērtība ir ievietojamā grafiskā faila adrese vai, precīzāk, tā URL. Ja grafiskais fails atrodas tajā pašā tīmekļa serverī, pietiek ar to, lai pierakstītu pilnu faila nosaukumu, ieskaitot ceļu uz to apakšdirektorijos, t.i., ja attēlu katalogs ar attēliem, tad grafiskā attēla ievietošanas tags izskatās šādi:
Šajā piemērā mēs izmantojam GIF attēlu, kas atrodams failā ar nosaukumu pictl.gif, kas savukārt atrodas direktorijā ar nosaukumu attēli. Jāatzīmē, ka slīpsvītras ir slīpsvītras, kas ir slīpas pretējā virzienā nekā tad, ja tās tiek izmantotas DOS un Windows saimju operētājsistēmu failu ceļos. Fakts ir tāds, ka tīmekļa serveri sākotnēji tika balstīti uz Unix operētājsistēmu, kas atbalsta failu sistēmu ar šādām slīpsvītrām. Tagad nav svarīgi, kura operētājsistēma atbalsta serveri, kas mitina vietni, visi ceļi tiek ierakstīti vienādi un pareizi apstrādāti. programmatūru serveris.
WWW izstrādes sākumā pārlūkprogrammas parādīja tikai teksta informāciju, grafika netika atbalstīta. Tagad tie praktiski nav atrasti, taču katrā pārlūkprogrammā ir iespēja atspējot grafikas lejupielādi. Tāpēc jums vienmēr jāizmanto alternatīvs attēla teksta attēlojums. Vienkārši jums ir jāsagatavo teksts, kas tiks parādīts attēla vietā, ja pārlūks to kāda iemesla dēļ nevar ielādēt. Šis teksts ir pievienots atzīmei izmantojot parametru ait, kura vērtība ir vēlamā teksta virkne, tas ir, mēs iegūstam aptuveni šādu konstrukciju:
Gadījumā, ja grafiskais attēls joprojām tiek parādīts pārlūkprogrammā, alternatīvā teksta attēlojuma teksts tiek parādīts kā "mājiens", īsa teksta uzvedne, kad lietotājs novieto peles kursoru virs vēlamā grafiskā attēla.
Tomēr ir arī detalizētāka iespēja šādu teksta uzvedņu izveidei. Parametrs longdesc nosaka interneta resursa adresi, kur Pilns apraksts no šīs grafikas. Šī parametra vērtība, protams, ir resursa URL ar attēla aprakstu.
Nosaukuma parametrs ļauj norādīt attēlam unikālu nosaukumu, kas identificē šo tīmekļa lapas dizaina elementu. Šis parametrs tiek saglabāts atpakaļsaderības nolūkos, tas ir atstāts no iepriekšējās versijas HTML standarts. Tagad visi tagi šim nolūkam izmanto parametru id.
Pēc noklusējuma grafiskais attēls tiek parādīts tieši tāds, kāds tas tika izveidots, ar vienādiem vertikālajiem un horizontālajiem izmēriem. Tomēr mums ir iespēja skaidri noteikt attēla izmēru pēc saviem ieskatiem. Šim nolūkam tiek izmantoti augstuma un platuma parametri. Mēs jau zinām, kā iestatīt izmērus pikseļos vai procentos. Jāatzīmē tikai tas, ka pārlūkprogrammas mēdz saglabāt attēla proporcijas, tāpēc pārlūks var ignorēt skaidru izmēru iestatījumu, kas maina proporcijas, un pārlūkprogramma izvēlēsies tādus izmērus, kas būtu pēc iespējas tuvāk tos, kurus norādījis lietotājs, nepārkāpjot proporcijas. Tāpēc grafiskie attēli Web lapām parasti tiek sagatavoti tādā izmērā, kāds tiks izmantots, kad tie tiks parādīti Web lapās. Un, ja viens attēls ir jāparāda vairākas reizes ar dažādiem izmēriem, tad ir vieglāk sagatavot vairākus grafiskos failus, nekā nodot attēlus pārlūkprogrammai, kas var izjaukt visu Web lapu izkārtojumu.
Ar parametru palīdzību mēs varam norādīt baltās vietas daudzumu, kas atdalīs grafisko attēlu no apkārtējiem citiem Web lapas dizaina elementiem, tas ir, faktiski, iestatīt attēla atkāpi. Šim nolūkam tiek izmantoti hspace un vspace parametri. Parametrs hspace iestata horizontālo polsterējumu pikseļos, bet vspace parametrs - vertikālo polsterējumu. Ņemiet vērā, ka par šiem parametriem var izmantot tikai skaitliskas vērtības, kas norāda attālumus pikseļos. Šiem parametriem nav nulles vērtības, bet parasti katrā pārlūkprogrammā tiek izmantota neliela vērtība, kas nav nulle.
Izmantojot apmales parametru, mēs varam iestatīt robežas biezumu, kas ieskauj attēlu. Kā parasti, parametra vērtība ir skaitlis, kas norāda biezumu pikseļos. Noklusējuma vērtība ir nulle, kas padara robežu neredzamu.
Jāpiemin arī grafiskā objekta izlīdzināšana attiecībā pret tekstu, kas ap to plūst. Šim nolūkam tiek izmantots līdzināšanas parametrs. Kā vērtību var izmantot vienu atslēgvārdu no iepriekš definētas atslēgvārdu kopas. Apakšējās, vidējās un augšējās vērtības tiek izmantotas, lai novietotu pirmo teksta rindu, kas vertikāli plūst ap attēlu. Augstākā vērtība pārvieto to uz augšu, apakšā - uz leju, un vidējā ļauj rindu novietot vertikāli. Kreisās un labās vērtības tiek izmantotas, lai horizontāli izlīdzinātu grafiku. Pirmā kreisā vērtība, kā jūs varētu uzminēt, pārvieto attēlu uz bloka kreiso malu, kurā tas tiek parādīts, un pa labi pa labi.
Tagad ir pienācis laiks ar piemēriem aplūkot, kā mēs varam pozicionēt attēlu un apvienot to ar tekstu, kas jāapvelk ap vēlamo grafiku.
Saraksts 1.11
"http://www.w3.org/TR/htm!4/strict.dtd">
<р>
Šis ir teksts, kas apvij zīmējumu.
Šis ir teksts, kas apvij zīmējumu.
Šī HTML dokumenta izskats, kad tas tiek parādīts, izmantojot pārlūkprogrammu, ir parādīts attēlā. 1.11.
Rīsi. 1.11. Pārlūkprogrammas logs, kas parāda faila parādīšanas rezultātu sarakstā 1.11
Šajā piemērā mēs esam izmantojuši tīru attēla ievietošanas tagu bez tā papildu parametri... Kā redzam, attēls tiek ievietots tūlīt pēc pirmā teikuma, kur mēs ievietojām tagu ... Tajā pašā laikā, ja mēs samazinām pārlūkprogrammas skata loga izmēru horizontāli, lai pirmais teikums un attēls nevarētu tur ietilpt vienā rindā, tad vispirms tiktu parādīts piedāvājums un jau zem tā attēls, nospiests pa kreisi skatu punkta malā. Pa labi no tā teksts, kas seko tam, sāks parādīties tā, lai līnijas pamatlīnija sakristu ar attēla apakšējo malu.
Tagad pievienosim attēla attēla tagam horizontālas izlīdzināšanas opciju. Iegūtais kods ir parādīts 1.12. Sarakstā.
Saraksts 1.12
"http://www.w3.org/TR/html4/strict.dtd">
<р>Šis ir teksts, kas apvij zīmējumu. 
align = "ieft">
Šis ir teksts, kas apvij zīmējumu. Šis ir teksts, kas apvij zīmējumu.
Šis ir teksts, kas apvij zīmējumu.
Kā redzat, šajā gadījumā teksts atkal tiek parādīts, pēc tam grafiskais attēls, nospiests uz kreiso malu, saskaņā ar direktīvu, kas dota, izmantojot līdzināšanas parametru, un pārējais teksts tiek ievietots labajā pusē attēls (1.12. att.), tas ir, attēls nevar uzņemt pirmo rindu, jo teksts sākas pirms tā. Tas pats notiks, ja lietosit izlīdzināšanas parametru ar vērtību pa labi, bet attēls tiks pielīmēts tikai pie skata punkta labās malas, un teksts ap to plūdīs no kreisās puses. Tas ir visas izmaiņas.
Tagad apskatīsim, kā darbojas vertikālā izlīdzināšana. Lai gan līdzinājuma iestatījums ir ievietots attēla tagā, visievērojamākās izmaiņas joprojām ir tekstā, kas ieskauj attēlu. Apskatīsim vertikālās izlīdzināšanas parametra efektu, izmantojot piemēru.
Rīsi. 1.12. Pārlūkprogrammas logs, kas parāda faila parādīšanas rezultātu sarakstā 1.12
Ieraksts 1.13
"http://www.w3.org/TR/html4/striqt.dtd">
<р>Šis ir teksts, kas apvij zīmējumu. align = "vidū">
Šis ir teksts, kas apvij zīmējumu. Šis ir teksts,
kas apvij ap zīmējumu.
Šis ir teksts, kas apvij zīmējumu.
Šī HTML dokumenta atveidošanas rezultāts ir parādīts attēlā. 1.13.
Rīsi. 1.13. Pārlūkprogrammas logs, kas parāda faila parādīšanas rezultātu sarakstā 1.13
Šajā piemērā mēs iestatījām vertikālo izlīdzinājumu uz vidu, tas ir, teksta pirmo rindiņu pēc attēla ievietošanas birkas attēlošanas brīvas vietas vertikālajā centrā pa labi no attēla. Pārējais teksts tiek parādīts zem attēla. Ja mēs iestatām līdzināšanas parametru uz augšu, pirmā rinda tiks parādīta blakus attēla augšējai malai. Un, izmantojot apakšējo vērtību, pirmā teksta rinda tiks parādīta attēla apakšdaļā. Lūdzu, ņemiet vērā, ka pārlūkprogramma atpazīst tikai vienu līdzināšanas parametru, tas ir, mēs varam norādīt vertikālu vai horizontālu līdzinājumu. Ja ar iebūvētajiem attēla pozicionēšanas un izlīdzināšanas līdzekļiem nepietiek, varat pievērsties izkārtojuma procesam, izmantojot tabulas. Mēs apskatīsim tabulu izmantošanu šīs nodaļas vēlākajā sadaļā.
Mums ir iespēja izmantot video, veidojot Web lapas. Jums vajadzētu būt ļoti uzmanīgiem ar to izmantošanu, jo faili, kas satur šos video resursus, parasti ir diezgan lieli. Un, lai attālais lietotājs tos varētu apskatīt savā pārlūkprogrammā, viņam šis fails būs pilnībā jāielādē savā datorā. Izmantojot kanālus, kas ir pieejami lielākajai daļai interneta lietotāju, šāda procedūra var aizņemt diezgan ilgu laiku. Nevienam no mums nepatīk gaidīt tīmekļa lapas ielādi.
Pārlūkprogrammas parasti spēj atskaņot video failus AVI, Real Video un Windows Media... Un to ievadīšana Web lapā tiek veikta, izmantojot to pašu tagu ... Bet parametru dunscr izmanto, lai norādītu video faila atrašanās vietu. Pēc noklusējuma Web lapā iestrādāts videoklips tiek atskaņots vienu reizi, tūlīt pēc lapas pilnas ielādes. Bet mums ir dažas iespējas regulēt klipa atskaņošanas procesu vai dot lietotājam iespēju kontrolēt tā atskaņošanu.
Ja atzīme mēs iespējojam sākuma parametru, tad mēs varam skaidri norādīt notikumu, pēc kura pārlūkprogrammai būs jāatskaņo ielādētais videoklips. Var izmantot šī parametra vērtības atslēgvārdus peles kursors un atverama. Pirmais no tiem norāda, ka klips jāspēlē pēc tam, kad lietotājs novieto peles kursoru virs video ieliktnim piešķirtās vietas, bet otrais norāda, ka atskaņošana sāksies uzreiz pēc HTML faila pilnas ielādes. Tomēr mēs varam apvienot šīs divas iespējas. Šajā gadījumā video ievietošanas tags izskatīsies šādi:
Mēs varam norādīt, cik reizes videoklips jāspēlē, izmantojot cilpas parametru šim nolūkam. Šī parametra vērtība ir skaitlis, kas nosaka videoklipa atkārtošanās apjomu. Tomēr, ja mēs vēlamies, lai videoklips tiktu atskaņots nepārtraukti, bez noteikta atkārtojumu skaita, mums jāizmanto bezgalīgā vērtība. Un, izmantojot cilpas aiztures parametru, mēs varam iestatīt laika aizturi starp videoklipa atkārtojumiem. Šī parametra vērtība ir skaitlis, kas norāda laiku milisekundēs. Apskatīsim šo parametru pielietojumu, kā piemēru izmantojot šādu koda fragmentu:
Šeit mēs skaidri paziņojam, ka videoklips tiks atskaņots divas reizes tūlīt pēc tīmekļa lapas ielādes, ar piecu sekunžu aizkavi starp atkārtojumiem.
Šajā gadījumā mēs paši kontrolējam video faila parādīšanu. Bet mēs varam arī nodot šo prerogatīvu attālajam lietotājam, kurš ielādēs tīmekļa lapu. Lai to izdarītu, jums jāievada atzīme vadības parametrs bez vērtības. Šī parametra klātbūtne tagā skaidri norāda, ka atskaņošanas vadīklas tiks parādītas kopā ar videoklipu tīmekļa lapā.
Mūsu aplūkotie parametri ir pietiekami, lai pareizi iekļautu video failus tīmekļa lapas saturā. Aplūkosim detalizētu piemēru (1.14. Att.).
Saraksts 1.14
"http://www.w3.org/TR/html4/strict.dtd">
.
<р>Vienkāršs teksts.
Rīsi. 1.14. Pārlūkprogrammas logs, kas parāda faila parādīšanas rezultātu sarakstā 1.14
Protams, tā kā video fragmenta ievietošanas procedūra Web lapas pamattekstā ir īpašs grafikas ievietošanas gadījums, tad visi citi tagam piemērojamie parametri tiek piemēroti video fragmenta ievietošanas tagam. , piemēram, līdzināšanas opcijas, skaidrs izmērs un citi.
Tīmekļa lapas skaņas dizains pieder arī multivides iespējām. Bet mēs varam izmantot skaņu tikai kā fona veidlapu, tas ir, noteikts skaņas fails tiks atskaņots attālā lietotāja datorā pēc tam, kad viņš būs ielādējis Web lapu. Ja, protams, viņa datorā ir instalēta skaņas karte, tas ir, HTML fails ar Web lapu sākotnēji tiek lejupielādēts attālā lietotāja datorā un pēc tam tiek ielādēti visi citi šīs tīmekļa lapas dizainā izmantotie faili, piemēram, kā grafiskos failus, video un audio klipus.
Tātad, lai tīmekļa lapas skatīšanai tiktu pievienota skaņas reproducēšana, jums jāievieto tags lapas kodā
Tāpat kā videoklipos, mēs varam iestatīt, cik reizes audio fails tiek atskaņots, izmantojot cilpas parametru. Šī parametra vērtība ir atkārtojumu skaits. Ja jums ir nepieciešams nepārtraukti atskaņot audio fragmentu, jums jāizmanto vērtība "-1", tas ir, ja mēs vēlamies, lai, ielādējot Web lapu, tiktu nepārtraukti atskaņots noteikts audio fails, jums jāizmanto šāda konstrukcija:
Tas noslēdz mūsu apsvērumus par multivides izmantošanu un grafiskie objekti Web lapu noformēšanā un pārejiet pie pirmās nodaļas nākamās daļas.
Ieslēgts Šis brīdis gandrīz visi attēli tīmeklī ir divos formātos: GIF un JPEG. Trešais pieminēšanas vērts sāncensis - PNG formāts - cīnās par pārlūkprogrammas atbalstu un uzmanību. Tālāk - īss pārskats"lielie trīs" tiešsaistes grafiskie formāti. Plašāku informāciju skatiet katra formāta nodaļās.
GIF- GraficInter izmaiņu formātu var saukt par tradicionālo Web faila formātu. Tas bija pirmais faila formāts, ko atbalstīja tīmekļa pārlūkprogrammas, un tas joprojām ir galvenais grafikas formāts tīmeklī līdz šai dienai.
Tās īpašības ir šādas:
- - Atbalsta ne vairāk kā 256 krāsas (mazāk ir iespējams un bieži vien ir nepieciešams);
- - izmanto krāsu paleti;
- - izmanto saspiešanu, nezaudējot informāciju, izmantojot LZW metodi (kas ir līdzīga tai, ko izmanto PKZIP arhivētājā, un tāpēc GIF faili nākotnē praktiski netiek saspiesti);
- - Atbalsta savstarpējo skenēšanu;
- - ir straumēšanas formāts, t.i. pārsūtīšanas laikā sākas attēla parādīšana;
- - ļauj vienai no paletes krāsām piešķirt caurspīdīgu atribūtu, kas tiek izmantots, veidojot tā saucamos caurspīdīgos GIF;
- - ir iespēja saglabāt vairākus attēlus vienā failā, kas tiek izmantots animētu GIF attēlu ražošanā;
- - Atbalsta iespēju failā ievietot vadības blokus, kas ļauj failā ievietot komentārus (piemēram, par autortiesībām), aizkavēšanos starp attēlu parādīšanu utt.
Un tagad neliels precizējums - pie kā šīs īpašības var novest. Kā mēs rakstījām, GIF atbalsta ne vairāk kā 256 krāsas, kas nozīmē, ka visi attēli, kurus saglabājam GIF formātā, tieši vai netieši samazina krāsu skaitu, lai ietilptu šajā ierobežojumā ( dažādas programmas ar dažādu panākumu pakāpi). Un līdz ar to secinājums - ja ņemam skaisti foto ar gludas pārejas un smalki krāsu toņi, tad pēc pārveidošanas viss būs daudz sliktāk - toņi vairs nebūs nenotverami, un visa fotogrāfija iegūs nedabisku, nereālu izskatu. Tāpēc, ja jums joprojām ir jāsaglabā fotoattēls GIF formātā un jāpārnes visi toņi, tad jums jādodas uz trikiem. Piemēram, fotoattēlam varat pielietot kādu māksliniecisku filtru un pārvērst to zīmējumā vai piemērot tonējumu. Bet ar zīmējumu un zīmējumu saglabāšanu šajā formātā nav problēmu, parasti tie ir labi saspiesti un nesatur daudz krāsu.
Otrs populārākais attēla formāts tīmeklī ir JPEG - Apvienotā fotogrāfijas ekspertu grupa. Tas satur 24 bitu krāsu informāciju. Tas ir 16,77 miljoni krāsu, atšķirībā no 256 GIF formāta krāsām. JPEG izmanto tā saukto zudumu saspiešanu. Tas nozīmē, ka daļa informācijas par attēliem tiek izmesta saspiešanas procesā, taču vairumā gadījumu attēla kvalitātes pasliktināšanās ir nekaitīga un bieži vien pat nav pamanāma.
Fotoattēlus vai attēlus ar vienmērīgu krāsu gradāciju vislabāk var saglabāt JPEG formātā, jo tas piedāvā augstākas kvalitātes attēlus, kas ietilpst mazākā failā. Tomēr JPEG nav labākais risinājums grafikai ar monohromatiskiem apgabaliem, jo šis formāts mēdz būt raibs krāsās, un iegūtais fails parasti būs nedaudz lielāks par tā paša attēla GIF.
Ir trešais grafiskais formāts, kas konkurē par pastāvīgu izmantošanu tīmeklī. Šis ir PNG - Portable Net work Graphic formāts, kas, neraugoties uz dažām priekšrocībām, kopš 1994. gada ir bijis vairāk vai mazāk ēnā. Tikai nesen pārlūkprogrammas ir sākušas atbalstīt PNG kā iegulto grafiku, taču PNG var kļūt par ļoti populāru formātu tīmeklī. Tāpēc viņš šeit ir iekļauts "lielajā trijniekā". PNG var atbalstīt 8 bitu indeksētas krāsas, 16 bitu pustoņus vai 24 bitu pilnkrāsu attēlus, izmantojot bezzudumu saspiešanas shēmu. Tas nodrošina augstākas kvalitātes attēlus un dažreiz mazāk failu nekā GIF. Turklāt, PNG faili ir dažas lieliskas funkcijas, piemēram, iebūvēta gamma vadība un mainīgs caurspīdīguma līmenis (tas ļauj parādīt fona attēlu, izmantojot mīkstas ēnas).
Tā kā tīmekļa attēli eksistē tikai displeja ekrānā, ir tehniski pareizi izmērīt to izšķirtspēju pikseļos collā (ppi - pikseļi per collas). Vēl viena izšķirtspējas mērvienība - punkti collā (dpi - dotsperinch) attiecas uz izdrukāto attēlu izšķirtspēju un ir atkarīga no drukas ierīces izšķirtspējas.
Bet, tā kā faktiskie grafikas izmēri ir atkarīgi no displeja izšķirtspējas, mērīšana collās kļūst nepieņemama tīmekļa videi. Vienīgā nozīmīgā mērvienība ir pikselis.
Ir praktiski izveidot 72 ppi attēlus (tas ir labākais veids displejam), pievēršot uzmanību tikai kopējiem izmēriem pikseļos. Grafikas veidošanas procesā tīmeklī jums vispār nav jāizmanto collas. Svarīgs ir attēla izmērs salīdzinājumā ar citiem lapas attēliem un pārlūka loga kopējais izmērs.
Piemēram, daudzi lietotāji joprojām izmanto 14 collu displejus ar 640x480 pikseļiem. Lai nodrošinātu, ka ekrāns aizpilda visu ekrāna laukumu, vislabāk ir padarīt to ne vairāk kā 600 pikseļu platu (pieņemot, ka daži pikseļi labajā un kreisajā pusē tiks izmantoti logam un ritjoslai). Pārējo lapas pogu un attēlu izmērs jāmēra pikseļos attiecībā pret reklāmkarogu, kura platums ir 600 pikseļi.
Bez šaubām, tieši grafika padarīja tīmekli tādu, kādu mēs to redzam šodien, taču kā dizainerim jums jāzina, ka daudziem lietotājiem ir mīlestības un naida sajūta pret grafiku tīmeklī. Paturiet prātā, ka grafika palielina laiku, kas nepieciešams Web lapas pārsūtīšanai tīklā; lielais grafikas daudzums nozīmē ievērojamu lejupielādes laiku, kas pārbaudīs lasītāja pacietību, it īpaši, ja viņš izsauc numuru, izmantojot standarta iezvanpieejas savienojumu.
VŠajā sakarā tīmekļa dizaineram ir viens vissvarīgākais noteikums: grafiskā attēla faila izmēram jābūt pēc iespējas mazākam! Izveidojot attēlus, kas paredzēti pārraidei tīklā, izstrādātāji ir atbildīgi par nopietnu ielādes laiku.
