Enamik veebilehti sisaldab graafikat. See võimaldab teil teavet värvikalt ja selgelt esitada. Paljudel juhtudel on parem näidata pilti kui anda pikk tekstikirjeldus.

Graafika paigutamiseks lehele on kaks võimalust:

• üksikute piltide sisestamine;
• tausta täitmine pildiga.

Graafiline pilt võetakse igal juhul failist.

Graafika sisestamine

Graafiline kujutis graafilisest failist sisestatakse lehele märgendi abil (inglise keelest, pilt - pilt), määrates SRC atribuudi argumendina faili aadressi:

< IMG SRC = "адрес_графического_файла" >

Pildifaili aadress on kas URL või failinimi, võib -olla koos teega. Näiteks graafilise faili logotip.jpg kuvamiseks kirjutage silt:

< IMG SRC = "logotip.jpg" >

Sildil oleva graafilise pildi edastuskiiruse suurendamiseks saate kasutada atribuuti (valikuline) LOWSRC, mis võtab argumendiks graafilise faili aadressi. Saate luua kaks graafilist faili: üks (näiteks olgu see fail logotip.jpg) sisaldab pilti, mis on kõrgresolutsiooniga ja teine ​​(näiteks logotip.gif) on madala eraldusvõimega pilt. Siis on silt:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... annab brauserile käsu kõigepealt logotip.gif -fail alla laadida ja seejärel asendada see logotip.jpg -failiga.

Teine viis graafika laadimise kiirendamiseks on atribuutide abil ristkülikukujulise ala suurus, kuhu graafika paigutatakse LAIUS(laius) ja KÕRGUS(kõrgus) pikslites. Kui määrate need atribuudid, eraldab brauser esmalt graafika jaoks ruumi, valmistab ette dokumendi paigutuse, kuvab teksti ja alles seejärel laadib graafika. Pange tähele, et brauser kahandab või venitab pilti, et see sobiks määratud suurusega raamidega. Näide pildi suuruse määramisest:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Graafikat kasutatakse tavaliselt koos tekstiga, seega tekib teksti ja graafika joondamise ülesanne. See ülesanne täidetakse atribuudi abil ALIGN silt kasutades erinevaid argumente. Näiteks võime soovida, et tekst liiguks ümber pildi paremale või vasakule. Tavaliselt on pilt manustatud teksti lähedale, mis võib olla kole. Selle vältimiseks saate joonisele ümber seada tühjad veerised. Väljad luuakse atribuutide abil VSPACEülemise ja alumise veerise jaoks ja НRUUM sildi külgmiste veeriste jaoks ... Nende atribuutide argumendid on määratud numbritega, mis määravad väljade suuruse pikslites. Graafika ümber tekstivoo tühistamiseks kasutage silti
.

Järgmine silt määrab graafika voo failist logotip.jpg paremale (pilt jääb tekstist vasakule):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Kui soovite pildi paigutada tekstist paremale, on teil vaja atribuuti ALIGN argumenti määrata ÕIGE:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Pildi ümber väljade määramiseks peate kirjutama järgmise sildi:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Siin määravad väljade suurused numbrid 20 ja 10.

Vaatleme graafika ja tekstide jagamise näidet. Avage Notepad ( tekstiredaktor Notepad) Windows. Kirjutage sellesse HTML -kood, kasutades ülalkirjeldatud silte. Allpool on programm, mis väljastab teksti ja graafikat. Kõiki teie faile saab kasutada graafilise failina. See kasutab logotip.gif -faili.

< HTML >

< HEAD >

< TITLE >Harjutus 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Tekst ümbritseb graafikat paremale< / H1 >

Riis. 657... Tekst ümbritseb pilti paremal

Pakub palju võimalusi piltide (nagu ka muude elementide) täpseks positsioneerimiseks lehel tabelid ja stiilid... Need HTML elemendid arutatakse hiljem. Näiteks saate määratleda tabeli ilma nähtavate raamideta ja paigutada selle tabeli lahtritesse pilte, tekste ja muid elemente.

See õpetus näitab teile, kuidas veebisaiti kaunistada, lisades sellele graafikat. Tutvume enamlevinud pildivormingutega, saame teada, millist silti kasutatakse lehele piltide lisamiseks, tegeleme alternatiivsete pealdistega ning teksti ja graafika joondamisega. Samuti tutvume piltide peamiste atribuutidega ja õpime, kuidas pildi laiust ja kõrgust reguleerida. Järgmisena paar sõna piltide kasutamise kohta linkidena ja piltide pisipildid. Lõpuks on mõned üldised näpunäited veebilehe graafika kasutamiseks.

Piltide lisamine veebilehele
Kui veebileht sisaldab ainult tekstiteavet, võib see tunduda kellelegi huvitav tänu sellel esitatud teabele, kuid on ebatõenäoline, et kellelgi oleks kiusatus seda atraktiivseks nimetada. Piltide lisamine veebilehele on väga lihtne. Graafika lisamine, mis võib anda lehele professionaalse ilme, nõuab mõningaid teadmisi. Millele tegelikult on tänane õppetund pühendatud.

Internetis on kaks kõige sagedamini kasutatavat graafilist vormingut GIF ja JPEG. Ühise fotograafiaekspertide töörühma (JPEG) välja töötatud ja nimetatud vormingut kasutatakse tavaliselt sujuvate värvide üleminekuga piltide, näiteks fotode, salvestamiseks.

Peaaegu kõik muud graafilised elemendid salvestatakse GIF -i (Graphics Interchange Format), mis on graafiliste andmete vahetamise vorming. Praegu on populaarsust kogumas veel üks uus graafiline formaat: PNG (Portable Network Graphics). Eeldatakse, et see asendab lõpuks GIF -vormingu. Kuid ärge kiirustage kõiki oma graafikafaile selles vormingus uuesti salvestama, kuigi seda ei toeta endiselt kõik brauserid.

Kõik pildid lisatakse veebilehele, kasutades sama silti, mida nimetatakse pildiallikasildiks ... Tõenäoliselt saate nüüd ise selle kindlaks teha see sissekanne koosneb sildist endast , selle atribuut (scr) ja selle atribuudi väärtus (asukoht). Kuna aga atribuut scr on kohustuslik, on seda kirjet mugavam mõelda ühe ühise märgendina. Olete ilmselt ka märganud, et pildiallikasildil pole vastavat lõpusilti. See on eraldi iseseisev silt, seega ärge unustage selle lõppu lisada kaldkriipsu: .

# 1058; D XHTML 1.0 Transitional // ET "" http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd "> Esimesed pildid f> See pilt lisati minu esimesele veebilehele.>

Alternatiivsete siltide lisamine
Internetis surfates olete ilmselt märganud mitmesuguseid kirju, mis kuvatakse, kui hõljutate hiirekursorit mõne veebilehe graafilise elemendi kohal. Need pealdised viitavad tavaliselt mingile Lisainformatsioon pildi enda või selle lehe ala kohta, mida see hõivab.

Allpool olev HTML -kood näitab, kuidas atribuut alt lisatakse märgendi sisse. ... Nagu atribuut src, annab ka atribuut alt veebibrauserile pildi kohta lisateavet ning seda saab alati kasutada koos märgendiga .

Atribuut alt määratleb veebilehele lisatud graafilise elemendi alternatiivse teksti. Seda teksti nimetatakse alternatiivseks, kuna seda saab ekraanil kuvada kujutise enda alternatiivina. Atribuudil alt on veel üks väga oluline eesmärk. Paljud Interneti -külastajad, kes kasutavad madala andmeedastuskiirusega kanaleid, võivad oma brauseritele anda korralduse mitte alla laadida ega kuvada graafilist teavet. See võimaldab neil kiirendada veebilehtede laadimist oma arvutisse.

Samuti pidage meeles, et mitte kõik brauserid ei suuda oma akendes graafikat kuvada. Näiteks Lynxi brauser ei toeta seda funktsiooni üldse. Seega võimaldab atribuut alt veebidisaineril olla kindel, et kui tema veebilehe külastaja ei näe oma ekraanil pilti, näeb ta vähemalt sellele pildile lisatud tekstiteavet.

Kuigi atribuuti alt saab määratleda iga märgendi jaoks , olge ettevaatlik ja ärge määrake mõnele graafilisele elemendile sobimatuid tekstisõnumeid. Näiteks ei ole mõtet lisada alternatiivseid tekstisilte veebilehe väliskujunduse erinevatele elementidele. Selliste vigade vältimiseks saate määrata selliste elementide atribuudi alt tühja väärtuse (alt = ""). Kui te muid atribuute ei määra, renderdab brauser pildi algsuuruses, joondades pildi ülemise serva külgneva tekstirea ülemise servaga. Mõlemat parameetrit saate muuta stiililehe siltide abil.

Kujutise atribuudid
Sildi jaoks pildi suuruse muutmiseks pakutakse atribuute. Mõned neist atribuutidest on loetletud allpool.
kõrgus- Määratud pikslites või protsentides - määrab pildi kõrguse
laius- Määratud pikslites või protsentides - määrab pildi laiuse.

Pildi kõrguse ja laiuse reguleerimine
Veebilehele paigutatud pildi mõõtmeid saab määrata kõrguse ja laiuse atribuutide abil. Nende atribuutide väärtused on määratud kas fikseeritud pikslite arvuna või protsendina lehe suurusest. Vaadake allolevat HTML -koodi. Esimene silt määrab algse pildi mõõtmed, mida olete juba selle õpetuse eelmistel piltidel näinud, väärtuseks 60 pikslit vertikaalselt ja 60 pikslit horisontaalselt. Teine märgend määrab sama pildi laiuseks 6% lehe laiusest ja kõrguseks 10% lehe kõrgusest. Joonisel on näidatud, kuidas mõlemad pildid kuvatakse brauseriaknas.

Kujutist oma aknas näidates oskab brauser ühtviisi hästi käsitseda nii pikslites kui ka protsentides määratud väärtusi. Arvestage siiski, et teie veebilehe külastajate arvutid võivad olla seadistatud teistsugusele ekraani eraldusvõimele kui oma monitori. Mis sellest järeldub? Näiteks on monitori eraldusvõime 800x600. Eelmises näites määrati veebilehele lisatud pildi laiuseks 6% lehe laiusest, mis selle eraldusvõime korral oleks 48 pikslit. Kui vaatate sama pilti monitoril eraldusvõimega 1024x800, vastab määratud 6% lehe laiusest 61 piksli laiusele.

Pildi suuruse muutmisel ärge unustage määrata mõlemad väärtused, mis vastavad selle kõrgusele ja laiusele. Kui muudate ainult ühte neist väärtustest, venitatakse pilti ekraanil vertikaalselt või horisontaalselt. Alternatiivne variant koosneb pildi suuruse reguleerimisest graafilise redaktori abil.

Saate luua illusiooni rohkemast kiire laadimine Pildid. Olenemata sellest, kas pildi suurust muudetakse või mitte, lisage alati kõrguse ja laiuse atribuutide väärtused, kuna need annavad brauserile olulist teavet selle kohta, kui palju ruumi tuleks lehele pildi paigutamiseks eraldada. Sellisel juhul saab brauser määrata pildi jaoks vajaliku ruumi ja jätkata muude leheelementide loomist, ilma et pilt ise alla laaditaks. See jätab mulje, et leht laaditakse kiiremini, sest selle külastajad ei pea ootama, kuni pilt on täielikult laetud, et lõpuks näha ka muud lehel esitatud teavet.

Kui soovite tõesti, et pilt sobiks täpselt lehe laiuse ulatuses, kasutage protsente. Sel juhul hõivab pilt mis tahes kuvari ekraanil lehe sama osa, mis teie ekraanil. Kui soovite, et joonise enda eraldusvõime (selle suurus pikslites) jääks konstantseks, kasutage pikslites väljendatud väärtusi.

Joondage tekst ja graafika
Atribuut märgendi joondamine Võimaldab joondada pildi tekstirida paremale (parem väärtus) või vasakule (vasak väärtus). Selle atribuudi kasutamise näited on toodud joonisel.

Sama atribuuti saab kasutada pildi vertikaalseks joondamiseks (jällegi tekstistringi suhtes). See võib omandada veel kolm väärtust: ülalt, alt ja keskelt. Kui joondamise atribuut on seatud ülaossa, joondatakse pildi ülaosa ümbritseva teksti ülaosaga. Kui joondamise atribuut on seatud põhja, joondatakse pildi alumine osa ümbritseva teksti põhjaga. Kui joondamise atribuut on seatud keskele, joondatakse pildi keskosa tekstirea keskele.

Piltide kasutamine linkidena
Pildid ei sobi ainult veebilehe kujundamiseks. Neid saab edukalt kasutada teiste dokumentide hüperlinkidena. HTML -is on see lihtne, sest pildid muutuvad hüperlinkideks täpselt samamoodi nagu tekstiväljad. Selleks peate rakendama ka märgendi, lisades veebilehe elemendi, millest peaks saama link teisele dokumendile. Seega, kui üleminek hüperlingile viiakse läbi pärast mõnele pildile klõpsamist, tuleb silt lisada selle pildi märgendiga.

a>

V sel juhul, pärast veebilehe külastaja hõljumist pildi kohal kuvatakse kursori kõrval tekstisõnum "See on minu autoportree!" Pärast pildil klõpsamist avatakse DOC2.htm dokument, millele viitab hüperlink.

Pildi pisipildid
Teine HTML -i hüperlinkimisvõimaluste levinud kasutusviis on mõne pildi kasutamine teistele navigeerimiseks. Milleks see mõeldud on? Asi on selles, et üsna sageli on veebilehel avaldatavate piltide suurus liiga suur ja pole kindlat, et külastajatel on kannatust oodata, kuni nad laadimise lõpetavad. Sellistel juhtudel luuakse algpildist väike koopia, mida nimetatakse pisipildiks, mille brauser saab laadimisega palju kiiremini hakkama. Kui külastaja on pildist huvitatud ja soovib selle täiskoopia alla laadida, peab ta vaid sellel pisipildil klõpsama. Nii näevad välja vastavad HTML -koodid.

a>

Nagu näete, avaneb pisipildil.jpg klõpsates teine ​​pildifail (image.jpg). Teksti string, mis on määratud atribuudi alt väärtusena, ütleb külastajale, kuidas põhipilti avada.

Piltide eduka kasutamise saladused
Pildid on huvitavad ja atraktiivsed, sisaldavad palju visuaalset teavet ja neid on väga lihtne veebilehtedele lisada, kuid kui soovite tõesti luua Interneti -kasutajate seas populaarseks muutuvat saiti, peaksite siiski järgima mõnda järgmistest reeglitest.

Kuidas rohkem suurusi pildifail, seda kauem kulub selle allalaadimiseks kasutaja arvutisse. Kuna enamik Interneti -külastajaid kasutab võrku pääsemiseks endiselt madalaid sidekanaleid läbilaskevõime, on allalaaditud failide suurused neile endiselt väga olulised. Pidage seda kindlasti meeles ja proovige hoida oma veebilehtedel pilte võimalikult väikestena.

Tähtis pole mitte ainult üksiku pildi failisuurus, vaid ka kogu HTML -dokumendi failisuurus. Mida rohkem pilte veebilehele lisatakse, isegi kui need on väikesed, seda suurem on lõppdokumendi failisuurus. Käivita eelvaade oma lehte erinevates brauserites ja hinnake, kui kaua kulub iga brauseri laadimiseks.

Kuna atribuut alt on nii oluline (soovitatav on see iga märgendi jaoks määratleda , olge selle kasutamisel ettevaatlik. Veenduge, et sisu tekstisõnum vastab alati pildile endale, vastasel juhul võivad teie lehe külastajad olla segaduses. Sama märkus kehtib ka vastupidine suund: Ühendage pildid kindlasti veebilehel esitatud tekstiteabega. Lennuki foto oleks sobiv lennureiside saidil ja metsloomade saidil täiesti üleliigne.

Internetist leiate palju huvitavaid pilte ja saate need hõlpsalt oma arvutisse salvestada. Paljud neist piltidest on aga autoriõigusega kaitstud. Kui leiate kommertssaidilt endale meelepärase pildi, vaadake, kas seal on autoriõigusega seotud teateid ja kas see pilt on tasuta kasutamiseks saadaval.

Kui veebilehel olev pilt pole autoriõigusega kaitstud, saate selle oma arvutisse kopeerida. Selleks paremklõpsake sellel pildil ja valige avanevast menüüst käsk Salvesta pilt kui. Pärast pildi arvutisse salvestamist saate seda edasi kasutada nagu mis tahes muud joonist.

Praktiline töö number 2

Piltide sisestamine HTML -dokumenti

Töö eesmärk. Põhitunnuste tundmine piltide HTML -dokumenti sisestamiseks, dokumentide piltide teisendamise atribuutide tundmaõppimine.

Kirjandus. Loengu märkmed.

3. Ettevalmistus tööks. Uurige loengu märkmeid teemal "Graafika".

Varustuse nimekiri. Arvuti.

Harjutus.

5.1. Lisateave piltide HTML -dokumenti sisestamise põhiliste siltide kohta.

5.2. Uurige piltide teisendamise põhiatribuute.

5.4. Õppige veebisaitidel pilte kaunistama.

Tööde järjekord.

6.1. Piltide sisestamine veebilehele.

1. Avama Värvimisprogramm ja looge sellesse vastavalt näidisele kolm pilti: iga pilt on eraldi failis.

Joonis 1 Joonis 2 Joonis 3

Salvestage need failid nimede alla bloc1.gif, bloc2.gif, bloc3.gif oma kaustas.

2. Avage tekstiredaktori Notepad ja looge veebileht vastavalt näitele:

Veebilehe kood:

algoritm.html.

6.2. Horisontaalsete joonte ja muude objektide loomine.

1. Avage tekstiredaktori Notepad ja looge näite kohaselt 2 veebilehte:

Veebilehe koodilõik:

3. Salvestage vastuvõetud dokument oma kausta, andes failile nime linii.html.

4. Käivitage oma brauser Internet Explorer... Vaadake sellest saadud veebilehte.

5. Looge teine ​​veebileht.

Veebilehe koodilõik:

6. Salvestage vastuvõetud dokument oma kausta, andes failile nime list.html.

7. Jookse interneti lehitseja Explorer. Vaadake sellest saadud veebilehte.

Pildikaardi loomine ja hiiliva joone sisestamine.

1. Looge järgmise pildi abil veebileht. See asub kausta töölaual Praktiline töö HTML -i järgi.

2. Looge pildikaart, nii et kui viite hiire oma arvuti konkreetse seadme kohale, kuvatakse selle nimi.

3. Looge samal lehel hiiliv joon:

Kas sulle meeldib mängida Arvutimängud, armastan ise programmeerimist!

4. Salvestage vastuvõetud dokument oma kausta, andes failile nime carta.html.

5. Käivitage Internet Exploreri brauser. Vaadake sellest saadud veebilehte.

7.1. Failid algoritm.html, linii.html, list.html, carta.html oma kaustas.

8. Testi küsimused.

8.1. Millist märgendit kasutatakse piltide lisamiseks HTML -dokumenti?

8.2. Milline atribuut võimaldab teil määrata pildifaili nime?

8.3. Millised atribuudid võimaldavad teil pildi suurust määrata?

8.4. Milline atribuut võimaldab teil määrata pildi asukoha ümbritseva teksti suhtes?

8.5. Milline atribuut võimaldab teil määrata pildi ümber oleva äärise paksuse?

8.6. ... Millised atribuudid määravad vaba ruumi hulga vasakul, paremal, pildi kohal ja all?

8.7. Millist silti kasutatakse pildikaartide loomiseks? Milliseid atribuute kasutatakse?

8.8. Milline silt on mõeldud roomamisjoone loomiseks?

Rakendus.

Graafika

Graafika paigutamine veebilehele. Graafilised failivormingud

Internetis on kaks kõige populaarsemat graafilist vormingut GIF ja JPEG.

Tavaliselt kasutavad nad:

JPEG - väga keeruka värvigammaga fotode ja piltide jaoks, millel on sujuvad värvide üleminekud (laienduses on see kirjutatud JPG -na).

GIF - logode, pealdiste, pealkirjade, selgete värvipiiridega piltide jaoks.

GIF -vormingus

Selles vormingus pildid toetavad 256 värvi. GIF -vormingus on kolm lisavõimalusi:

Animatsioon. Animeeritud GIF -redaktori abil on lihtne kokku panna lihtne "koomiks": joonistada üksikuid kaadreid, reguleerida kuvamise järjekorras viivitust, "loopida filmi" või näidata kaadreid ainult üks kord. Kui animatsioon on valmis, kirjutatakse see kettale tavalise GIF -failina. Kuid see fail ei sisalda mitte ühte, vaid tervet kogumit GIF -e ja mitmesugust konfiguratsiooniteavet.

HTML -is ei tehta vahet lihtsa GIF -i või animeeritud GIF -i määramisel.

Läbipaistev graafika. GIF -vorming võimaldab pildi ühe või mitu värvi läbipaistvaks kuulutada. See aitab vabaneda rangelt ristkülikukujulistest illustratsioonidest ja sobitada joonis dokumenti atraktiivsemalt:

Põimitud skaneerimine. Kasutatakse suurte GIF -ide jaoks. Illustratsioon on jagatud neljaks osaks, algse pildi suuruseks. Esimene osa sisaldab 1, 5, 9 jne. algse pildi read. Teine on 2., 6., 10. jne. Kolmas on 3., 7., 11. jne. Neljas - 4., 8., 12. jne.

Brauser ehitab ekraanile esmalt pildi esimese osa, seejärel millise, seejärel kolmanda ja neljanda. Saavutatakse pildi järkjärgulise arendamise efekt.

JPEG -vormingus

See formaat on välja töötatud spetsiaalselt fotode edastamiseks. See toetab miljoneid värve ja toodab väga kvaliteetseid pilte.

Muidugi kajastub kõrge kvaliteet failide suuruses. Aga JPEG -vormingus Sellel on üks eripära: JPG-redaktoris saate kettale salvestamisel määrata vajaliku kvaliteeditaseme ja seega tasakaalustada „kvaliteedi-faili suuruse” ribal soovitud kompromissi. Tõepoolest, kui jätta skaneeritud fotol miljonist värvist ainult 10 000, asendades ülejäänud värvid lähedastega, on sellist asendust silma järgi peaaegu võimatu tuvastada ja faili suurus väheneb oluliselt.

JPEG -vorming toetab režiimi, mis sarnaneb põimitud GIF -iga. Kuid erinevalt GIF-st ei toimu osadeks jagamine mitte ridade, vaid algoritmi järgi, mis võimaldab täissuuruses osi pildilt eraldada. Pealegi on iga järgmine osa kvaliteetsem kui eelmine. Selle omadusega JPEG -d nimetatakse progressiivseks.

Element

Element kasutatakse graafilise pildi sisestamiseks dokumendi põhiosasse.

Süntaks:

Lisaks element toetab erinevaid atribuute, mis määravad pildi asukoha ümbritseva teksti ja sisu suhtes võrk lehed üldiselt. Kujutise saab joondada rea ​​vasakule, paremale, üla- või alaosale või paigutada akna keskele.

Atribuudid:

src(osutab graafikafailile, määrates selle URL -i).
Süntaks:
alt(pildi asemel kuvatakse seda tüüpi alternatiivne tekst, siia joonistatakse ettevõtte logo).
Süntaks:
joondama(määrab pildi asukoha aknas ja selle joondamise, võib võtta järgmisi väärtusi: top- mööda ülemist serva, alt- mööda alumist serva, keskel-keskel, õige-õige, vasakule-vasakule).

Süntaks:

laius(määrab ala laiuse pikslites, mis on pildi jaoks aknas eraldatud).

Süntaks:

kõrgus(määrab piirkonna kõrguse pikslites, mis on pildi jaoks aknas eraldatud).

Süntaks:

hspace(määrab tühiku pikslites pildist paremale ja vasakule).
Süntaks:
piir(määrab pildi ümber oleva äärise laiuse pikslites).
Süntaks:
vspace(määrab tühiku pikslites pildi kohal ja all).
Süntaks:
ismap(võimaldab kasutada pilte, mille osad on linkidega lingitud ja võimaldavad üleminekuid. Selliseid pilte nimetatakse MAP -kaardiks, neid kasutatakse koos elemendiga ... Sel juhul reageerib server kaardil tehtud klõpsule).
Süntaks:

kasutajakava ( võimaldab kasutada pilte, mille mõned osad on seotud kaartidega, neid kasutatakse koos elemendiga

Pildikaardid.

Element

Element

Süntaks:

Element

Element määrab kaardi aktiivsed alad, mida saate linkimiseks klõpsata. Üksusel pole lõppmärgendit. Kaardipiltidega on mugav töötada standardne rakendus Windowsi jaoks - Paint -redaktor, mille jaoks pilt tuleb muuta BMP -vormingusse. Kui suumimisrežiimides kasutatakse ruudustikku, vajutades klahvikombinatsiooni Ctrl + G ja valides tööriista Selection, kui hiirekursor muutub õhukeseks ristiks, saab kursori koordinaate määrata ühe piksli täpsusega. See täpsus võib olla väga kasulik kaardi aktiivsete alade koordinaatide määramisel. Element toetab erinevaid atribuute:

Süntaks: URL ">

alt(määrab brauseritele, mis ei toeta alternatiivteksti seda eset).
Süntaks:

tiitel(määrab brauseritele alternatiivse teksti, mis ilmub selle elemendi kohal hõljutamisel).

Süntaks:

kuju(määrab kaardil aktiivse ala kuju ja selle koordinaadid, see võib võtta järgmisi väärtusi: "ringjooned" = X, Y, R, kus X, Y, R - ringi keskpunkti ja selle raadiuse koordinaadid , "polü" koordid = X1, Y1, X2, Y2, X3, Y3 ..., kus X1, Y1, X2, Y2, X3, Y3 ... on hulknurga tippude koordinaadid, kui hulknurk on ristkülik, siis piisab, kui täpsustada selle ülemine vasak ja parem alumine tipp "sirged" koordid = X1, Y1, X3, Y3).
Süntaks: ring"Koordid = X, Y, R >

Näidispilt - kaardid:

Veebilehtede täitmise teine ​​kõige olulisem komponent teksti järel on kahtlemata graafiline disain. Need on mitmesugused joonised, fotod ja võib -olla isegi videoklipid. Veebilehtede kuvamiseks saame kasutada ka heliriba.
Alustame graafika paigutamisega. Brauserid suudavad kuvada ainult kolme tüüpi graafilisi faile. Need on GIF-, JPEG- ja PNG -failid. GIF -failid võimaldavad teil luua animeeritud pilte. JPEG -faile kasutatakse tavaliselt fotode salvestamiseks. Äsja tekkinud PNG -vormingus võimaldab kombineerida hea kvaliteet pildid ja väike kogus graafilist faili. Kuid pärast pildi pakkimist graafilisse faili tuleb see ikkagi mingil viisil veebilehele manustada.

Selleks rakendatakse silt paljude parameetritega. Sellel märgendil ei ole lõpppaari, kuna see ei loo kuvamisreeglile mingit ulatust, vaid manustab veebilehe sisusse ainult graafilise pildi. Tegelikult võib graafiline pilt olla ka hüperlink või isegi peita enda taha mitu hüperlingi, kuid hüperlinkidest räägime selle peatüki järgmises osas, kuid nüüd mõtleme välja märgendi kasutamise reeglid .

Märgendi peamine ja kohustuslik atribuut on atribuut src. Selle atribuudi väärtus on lisatava graafikafaili aadress või täpsemalt selle URL. Kui graafiline fail asub samas veebiserveris, piisab faili täisnime, sealhulgas alamkataloogidesse ka tee, kirjutamisest, st kui piltide kataloog asub HTML -failidega samas kaustas veebilehtede piltidega, näeb graafilise pildi sisestamise märgend välja selline:

Selles näites kasutame GIF -pilti, mis on leitud failist nimega pictl.gif, mis omakorda asub kataloogis nimega images. Tuleb märkida, et kaldkriipsud on kaldkriipsud, mis on kaldu vastupidises suunas kui siis, kui neid kasutatakse DOS- ja Windowsi perekondade operatsioonisüsteemide failiteedel. Fakt on see, et veebiserverid põhinesid algselt Unixi operatsioonisüsteemil, mis toetab failisüsteemi selliste kaldkriipsudega. Nüüd pole vahet, milline operatsioonisüsteem toetab veebisaiti majutavat serverit, kõik teed salvestatakse ühtemoodi ja neid käsitletakse õigesti. tarkvara server.

WWW väljatöötamise alguses näitasid brauserid ainult tekstiteavet, graafikat ei toetatud. Nüüd pole neid praktiliselt leitud, kuid igal brauseril on võimalus graafika allalaadimine keelata. Seetõttu peaksite alati kasutama pildi alternatiivset tekstilist esitusviisi. Lihtsalt peate ette valmistama teksti, mis kuvatakse pildi asemel, kui brauser seda mingil põhjusel laadida ei saa. See tekst lisatakse märgendile kasutades parameetrit ait, mille väärtus on soovitud tekstistring, st saame ligikaudu järgmise konstruktsiooni:

Kui brauser kuvab graafilist pilti endiselt, kuvatakse alternatiivse tekstiesituse tekst "vihje", lühikese tekstivihje kujul, kui kasutaja viib hiirekursori soovitud graafilise pildi kohale.

Siiski on selliste tekstiviipade loomiseks ka üksikasjalikum valik. Parameeter longdesc määrab Interneti -ressursi aadressi, kus Täielik kirjeldus sellest graafikast. Selle parameetri väärtus on loomulikult ressursi URL koos pildi kirjeldusega.

Nime parameeter võimaldab määrata pildi unikaalse nime, mis tuvastab selle veebilehe kujunduselemendi. See parameeter säilitatakse tagurpidi ühilduvuse eesmärgil, see jäetakse alles varasemad versioonid HTML standard. Nüüd kasutavad kõik sildid selleks parameetrit id.

Vaikimisi kuvatakse graafiline pilt täpselt sellisena, nagu see loodi, sama vertikaalse ja horisontaalse mõõtmega. Siiski on meil võimalus pildi suurus oma äranägemise järgi selgesõnaliselt määrata. Selleks kasutatakse kõrguse ja laiuse parameetreid. Me juba teame, kuidas määrata mõõtmeid pikslites või protsentides. Tuleb ainult märkida, et brauserid kipuvad säilitama pildi proportsioone, seetõttu võib brauser ignoreerida proportsioone muutvaid sõnaselgeid mõõtmete sätteid ja brauser valib sellised mõõtmed, mis oleksid pildile võimalikult lähedal kasutaja määratud, proportsioone rikkumata. Seetõttu valmistatakse graafilisi pilte tavaliselt veebilehtede jaoks ette sellises suuruses, mida kasutatakse veebilehtedel kuvamisel. Ja kui ühte pilti tuleb kuvada mitu korda erineva suurusega, on mitu graafikafaili lihtsam ette valmistada, kui anda oma pilte volitamata kuvamiseks brauserile, mis võib rikkuda kogu veebilehtede paigutuse.

Parameetrite abil saame määrata vaba ruumi hulga, mis eraldab graafilise pildi ümbritsevatest muudest veebilehe kujunduse elementidest, st tegelikult määrata pildi taande. Selleks kasutatakse parameetreid hspace ja vspace. Parameeter hspace määrab horisontaalse polstri pikslites ja vspace parameetri vertikaalse polstri. Pange tähele, et nende parameetrite väärtustena saab kasutada ainult arvväärtusi, mis näitavad kaugusi pikslites. Nendel parameetritel pole nullväärtust, kuid tavaliselt kasutab iga brauser väikest nullivälist väärtust.

Ja parameetri äärisega saame määrata pildi ümbritseva äärise paksuse. Nagu tavaliselt, on parameetri väärtus number, mis näitab paksust pikslites. Vaikimisi on null, mis muudab piiri nähtamatuks.

Samuti on vaja mainida graafilise objekti joondamist selle ümber voolava teksti suhtes. Selleks kasutatakse joondamisparameetrit. Väärtusena saab kasutada ühte märksõna eelmääratletud märksõnade komplektist. Alumist, keskmist ja ülemist väärtust kasutatakse pildi esimese vertikaalselt voolava teksti esimese rea paigutamiseks. Ülemine väärtus liigutab selle üles, alumine - alla ja keskmine võimaldab rida vertikaalselt tsentreerida. Graafika horisontaalseks joondamiseks kasutatakse vasakut ja paremat väärtust. Esimene vasakpoolne väärtus, nagu võite arvata, nihutab pildi selle ploki vasakusse serva, kus see on kuvatud, ja paremale paremale.

Nüüd on aeg näha näidetega, kuidas saaksime pildi paigutada ja kombineerida tekstiga, mis peaks soovitud graafika ümber voolama.

Loetelu 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
See on tekst, mis ümbritseb joonist.
See on tekst, mis ümbritseb joonist.

Selle HTML -dokumendi välimus brauseri abil kuvamisel on näidatud joonisel fig. 1.11.

Riis. 1.11. Brauseriaken, mis näitab faili kuvamise tulemust loendis 1.11

Selles näites oleme kasutanud puhta pildi sisestamise silti ilma selleta täiendavad parameetrid... Nagu näeme, sisestatakse pilt kohe esimese lause järele, kuhu me sildi asetasime ... Samal ajal, kui vähendame brauseri vaateakna suurust horisontaalselt, nii et esimene lause ja pilt ei mahu sinna ühele reale, kuvatakse kõigepealt lause ja juba selle all vasakule vajutatud pilt vaateava serva. Sellest paremal pool hakkaks sellele järgnev tekst ilmuma nii, et rea algjoon langeb kokku pildi alumise servaga.

Nüüd lisame pildi kuvamise sildile horisontaalse joondamise valiku. Saadud kood on näidatud loendis 1.12.

Loetelu 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>See on tekst, mis ümbritseb joonist. align = "ieft">
See on tekst, mis ümbritseb joonist. See on tekst, mis ümbritseb joonist.
See on tekst, mis ümbritseb joonist.

Nagu näete, hakatakse sel juhul teksti uuesti kuvama, seejärel vasakule servale vajutatud graafilist pilti vastavalt joondamisparameetri abil antud juhisele ja ülejäänud tekst paigutatakse paremale pilt (joonis 1.12), see tähendab, et pilt ei saa esimest rida, kuna tekst algab enne seda. Sama juhtub siis, kui rakendate joondamisparameetrit väärtusega paremal, kuid pilt joondatakse ainult vaateava paremale servale ja tekst voolab selle ümber vasakult poolt. See on kõik muudatused.

Nüüd vaatame, kuidas vertikaalne joondamine toimib. Kuigi joondusseade on pildimärgendisse sisestatud, on kõige märgatavamad muudatused siiski pilti ümbritsevas tekstis. Vaatame näite abil vertikaalse joondamise parameetri mõju.

Riis. 1.12. Brauseriaken, mis näitab faili kuvamise tulemust loendis 1.12

Loetelu 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>See on tekst, mis ümbritseb joonist. align = "keskel">
See on tekst, mis ümbritseb joonist. See on tekst,
mis ümbritseb joonist.
See on tekst, mis ümbritseb joonist.

Selle HTML -dokumendi renderdamise tulemus on näidatud joonisel fig. 1.13.

Riis. 1.13. Brauseriaken, mis näitab faili kuvamise tulemust loendis 1.13

Selles näites seadsime vertikaalse joondamise keskele, see tähendab teksti esimese rea pärast pildi sisestamise märgendit pildist paremal asuva vaba ruumi vertikaalses keskel. Ülejäänud tekst kuvatakse pildi all. Kui seadistame joondamisparameetri ülaossa, kuvatakse esimene rida pildi ülemise serva kõrval. Ja kui kasutate alumist väärtust, kuvatakse teksti esimene rida pildi allosas. Pange tähele, et brauser tuvastab ainult ühe joondamisparameetri, st saame määrata kas vertikaalse või horisontaalse joonduse. Kui pildi paigutamise ja joondamise sisseehitatud vahenditest ei piisa, saate tabelite abil küljendusprotsessi juurde pöörduda. Tabelite kasutamist vaatame selle peatüki hilisemas osas.

Meil on võimalus kasutada videoid veebilehtede kujundamisel. Nende kasutamisel peaksite olema väga ettevaatlik, kuna neid videoressursse sisaldavad failid on tavaliselt üsna suured. Ja selleks, et kaugkasutaja saaks neid oma brauseris vaadata, peab ta selle faili oma arvutisse täielikult alla laadima. Kasutades kanaleid, mis on kättesaadavad enamikule Interneti -kasutajatele, võib selline protseduur võtta üsna kaua aega. Kellelegi meist ei meeldi oodata veebilehe laadimist.

Brauserid suudavad tavaliselt videofaile esitada AVI, Real Video ja Windows Media... Ja nende sisestamine veebilehele toimub sama märgendi abil ... Kuid parameetrit dunscr kasutatakse videofaili asukoha määramiseks. Vaikimisi esitatakse veebilehele manustatud videoklippi üks kord, kohe pärast lehe täielikku laadimist. Kuid meil on mõningaid võimalusi klipi esitamise protsessi reguleerimiseks või anda kasutajale võimalus taasesitust juhtida.

Kui silt lubame start -parameetri, siis saame selgesõnaliselt määrata sündmuse, mille järel peab brauser laaditud videoklipi esitama. Selle parameetri väärtusi saab kasutada märksõnad hiirekursor ja faili avamine. Esimene neist näitab, et klipp tuleks esitada pärast seda, kui kasutaja viib hiirekursori video sisestamiseks eraldatud ruumi kohale, ja teine ​​- et taasesitus algab kohe pärast HTML -faili täielikku laadimist. Siiski võime need kaks võimalust kombineerida. Sel juhul näeb video sisestamise märgend välja selline:

Saame määrata parameetri loop abil, mitu korda videot tuleb esitada. Selle parameetri väärtus on number, mis määrab videoklipi korduste arvu. Kui aga tahame, et videot esitataks pidevalt, ilma kindla korduste arvuta, peaksime kasutama lõpmatut väärtust. Ja parameetri loopdelay abil saame määrata videoklipi korduste vahelise viivituse. Selle parameetri väärtus on number, mis näitab aega millisekundites. Vaatame nende parameetrite rakendamist, kasutades näiteks järgmist koodilõiku:

Siinkohal ütleme selgesõnaliselt, et videoklippi esitatakse kohe pärast veebilehe laadimist kaks korda, korduste vahel on viiesekundiline viivitus.

Sel juhul kontrollime ise videofaili kuvamist. Kuid võime selle eelisõiguse üle anda ka kaugkasutajale, kes laadib veebilehe. Selleks peate sildi sisestama kontrollparameetrit ilma väärtuseta. Selle parameetri olemasolu märgendis näitab selgelt, et taasesituse juhtelemendid kuvatakse koos veebilehe videoklipiga.

Meie kaalutud parameetrid on piisavad videofailide õigeks manustamiseks veebilehe sisusse. Vaatleme üksikasjalikku näidet (joonis 1.14).

Loetelu 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Lihtne tekst.

Riis. 1.14. Brauseriaken, mis näitab faili kuvamise tulemust loendis 1.14

Loomulikult, kuna videofragmendi sisestamine veebilehe kehasse on graafika lisamise erijuhtum, rakendatakse videofragmendi sisestussildile ka kõik muud märgendile kohaldatavad parameetrid. , näiteks joondamisvalikud, selged suurused ja muud.

Veebilehe helikujundus kuulub ka multimeediavõimaluste hulka. Kuid me saame heli kasutada ainult taustavormina, see tähendab, et pärast veebilehe laadimist mängitakse kaugkasutaja arvutis teatud helifail. Kui muidugi on tema arvutisse installitud helikaart, st veebilehega HTML -fail laaditakse algselt kaugkasutaja arvutisse ja seejärel laaditakse kõik muud selle veebilehe kujundamisel kasutatud failid, näiteks graafiliste failide, video- ja heliklippidena.

Seega, et veebilehe vaatamisega kaasneks heli taasesitus, peate sisestama märgendi lehe koodi ... Märgendit ei paigutata veebilehe põhiosasse, vaid selle päisesse, st siltide vahele ja... Sellel sildil on nõutav src parameeter, mille väärtus on kaasatud URL helifail... Tuleb märkida, et brauserid tunnistavad ja esitavad MIDI- ja WAV -helifaile. Teiste vormingute, näiteks MP3 ja Real Audio, reprodutseerimine on võimalik ainult siis, kui brauseritega on ühendatud täiendavad moodulid.

Nagu videoklippide puhul, saame ka loop parameetri abil määrata helifaili esitamise arvu. Selle parameetri väärtus on korduste arv. Kui peate helifragmenti pidevalt esitama, peaksite kasutama väärtust "-1", st kui tahame, et teatud helifaili esitataks veebilehe laadimisel pidevalt, peaksite kasutama järgmist konstruktsiooni:

Sellega lõpeb meie kaalumine multimeedia ja graafilised objektid veebilehtede kujundamisel ja liikuge edasi esimese peatüki järgmise osa juurde.

Peal Sel hetkel peaaegu kõik veebis olevad pildid on kahes vormingus: GIF ja JPEG. Kolmas mainimist vääriv kandidaat PNG võitleb brauseri toe ja tähelepanu eest. Edasi - lühike ülevaade"kolm suurt" veebipõhist graafilist vormingut. Lisateavet leiate iga vormingu peatükkidest.

GIF- GraficInteri muutmisvormingut võib nimetada traditsiooniliseks veebifailivorminguks. See oli esimene veebibrauserite poolt toetatud failivorming ja on siiani veebis peamine graafikavorming.

Selle omadused on järgmised:

• - toetab kuni 256 värvi (vähem on võimalik ja sageli vajalik);
• - kasutab värvipaleti;
• - kasutab tihendamist ilma teabe kadumiseta, kasutades LZW meetodit (mis sarnaneb PKZIP -i arhiveerijaga ja seetõttu ei pakita GIF -faile tulevikus praktiliselt kokku);
• - toetab põimitud skaneerimist;
• - on voogesitusvorming, s.t. pildi kuvamine algab ülekande ajal;
• - võimaldab määrata paleti ühele värvile läbipaistva atribuudi, mida kasutatakse nn läbipaistvate GIF-ide loomisel;
• - tal on võimalus salvestada mitu pilti ühte faili, mida kasutatakse animeeritud GIF -ide valmistamisel;
• - Toetab võimalust sisestada faili juhtplokke, mis võimaldavad teil lisada faili kommentaare (näiteks autoriõiguse kohta), viivitada piltide kuvamise vahel jne.

Ja nüüd väike täpsustus - milleni need omadused võivad viia. Nagu me kirjutasime, toetab GIF mitte rohkem kui 256 värvi, mis tähendab, et kõik GIF -vormingus salvestatud pildid vähendavad selgesõnaliselt või kaudselt värvide arvu, et need selle piiresse mahuksid ( erinevaid programme vahelduva eduga). Ja siit järeldus - kui võtame ilus pilt koos sujuvad üleminekud ja peened värvitoonid, siis on pärast ümberkujundamist kõik palju hullem - toonid pole enam tabamatud ja kogu foto saab ebaloomuliku, ebareaalse ilme. Seega, kui teil on siiski vaja salvestada foto GIF -vormingus ja edastada kõik toonid, siis peate minema trikkide juurde. Näiteks saate fotole rakendada mingisuguse kunstilise filtri ja muuta selle jooniseks või rakendada toonimist. Kuid jooniste ja jooniste salvestamisel selles vormingus pole probleeme, reeglina on need hästi kokku surutud ega sisalda palju värve.

Populaarsuselt teine ​​pildivorming veebis on JPEG - Joint Photographic Experts Group. See sisaldab 24-bitist värviteavet. See on 16,77 miljonit värvi, erinevalt GIF -vormingu 256 värvist. JPEG kasutab nn kadudega tihendamist. See tähendab, et tihendusprotsessi käigus visatakse osa teavet piltide kohta ära, kuid enamikul juhtudel on pildikvaliteedi halvenemine kahjutu ja sageli isegi mitte märgatav.

Fotod või kõik sujuva värvigraditsiooniga pildid on kõige parem salvestada JPEG -vormingus, kuna see pakub väiksema faili mahutavaid parema kvaliteediga pilte. JPEG aga mitte parim lahendus monokromaatiliste aladega graafika puhul, kuna see formaat kipub olema värvidega täpiline ja tulemuseks olev fail on tavaliselt veidi suurem kui sama pildi GIF.

Veebis püsiva kasutamise eest konkureerib kolmas graafiline formaat. See on PNG - Portable Net work Graphic formaat, mis vaatamata mõningatele eelistele on alates 1994. aastast enam -vähem varju jäänud. Alles hiljuti on brauserid hakanud PNG -d toetama manustatud graafikana, kuid PNG -st võib saada veebis väga populaarne vorming. Sellepärast on ta siia "kolme suure" hulka arvatud. PNG toetab kadudeta tihendusskeemi kasutades 8-bitiseid indekseeritud värve, 16-bitiseid pooltoone või 24-bitiseid täisvärvilisi pilte. See pakub kõrgema kvaliteediga pilte ja mõnikord vähem faile kui GIF -id. Pealegi, PNG -failid millel on mõned suurepärased funktsioonid, näiteks sisseehitatud gammakontroll ja muutuv läbipaistvuse tase (see võimaldab taustpilti näidata pehmete varjude kaudu).

Kuna veebipildid eksisteerivad ainult ekraanil, on tehniliselt õige mõõta nende eraldusvõimet pikslites tolli kohta (ppi - pixelsperinch). Teine eraldusvõime mõõtühik - punktid tolli kohta (dpi - dotsperinch) viitab prinditud piltide eraldusvõimele ja sõltub trükiseadme eraldusvõimest.

Aga, kuna graafika tegelikud mõõtmed sõltuvad ekraani eraldusvõimest, muutub tollides mõõtmine veebikeskkonna jaoks vastuvõetamatuks. Ainus tähenduslik mõõtühik on piksel.

On otstarbekas luua 72 ppi pilte (see on parim viis kuvamiseks), pöörates tähelepanu ainult üldmõõtmetele pikslites. Graafika veebis loomise protsessis ei pea te üldse tolli kasutama. Oluline on pildi suurus võrreldes teiste lehe piltidega ja brauseriakna üldine suurus.

Näiteks kasutavad paljud kasutajad endiselt 14-tolliseid 640x480 piksliga kuvareid. Tagamaks, et pritsmeekraan täidab kogu ekraaniruumi, on kõige parem teha selle laius mitte üle 600 piksli (eeldusel, et mõnda paremal ja vasakul asuvat pikslit kasutatakse akna ja kerimisriba jaoks). Lehe ülejäänud nuppude ja piltide suurust tuleks mõõta pikslites bänneri suhtes, mille laius on 600 pikslit.

Kahtlemata tegi graafika veebi selliseks, nagu me seda täna näeme, kuid disainerina peaksite teadma, et paljud kasutajad tunnevad veebis graafika vastu armastust ja vihkamist. Pidage meeles, et graafika pikendab veebilehe võrgu kaudu ülekandmiseks kuluvat aega; suur hulk graafikat tähendab märkimisväärset allalaadimisaega, mis paneb lugeja kannatlikkuse proovile, eriti kui ta helistab tavalise sissehelistamisühenduse abil.

V Sellega seoses on veebidisaineri jaoks üks kõige olulisem reegel: graafilise pildi failisuurus peaks olema võimalikult väike! Võrgu kaudu edastamiseks mõeldud piltide loomine kohustab arendajaid laadimisaegu tõsiselt võtma.