HTML-i põhialused - piltide kuvamine

• Mai 7, 2024

Kui olete oma veebisaidi teksti postitanud ja oma maitse järgi vormindanud, on aeg lehte mõne pildi abil vürtsitada. Pildid ei saa ainult teie lehtedele värvi ja elu lisada, vaid saate neid kasutada ka tekstirefektide loomiseks, mida tavalise teksti ja vormindamise korral oleks keeruline või võimatu teha. Näiteks piirduvad teie fondi valikud tavaliselt väikese arvu fondidega, mille osas võite olla kindel, et olete installitud külastajate arvutisse, sest kui neil pole fonti installitud, ei näe nad seda teie saidil! Kui postitate teksti kättesaamatus kirjas, siis renderdavad külastajate arvutid selle mis tahes saadaolevas kirjas, mis on stiililt kõige lähedasem, mis võib teie veebisaidi kujundusele sageli häiri anda.

Teisest küljest, kui kasutate väljamõeldud fondi teksti jäädvustamiseks pildiedastusprogrammi ja postitate selle oma saidile GIF- või JPEG-vormingus, näeb iga külastaja seda täpselt nii, nagu te kavatsesite - kuna see on nüüd pigem teksti pilt kui tekst ise. See võib vabastada teie päistes väljamõeldud fondide kasutamise ja ebaharilikul viisil rühmitamise.

Piltide kuvamiseks kasutatav põhimärgend on järgmine:



Ülaltoodud kood töötab HTML-is suurepäraselt. Kui kasutate XHTML-i või soovite olla kindel, et teie sait on XHTML-iga valmis, peaksite sildi sulgemiseks lisama kaldkriipsu, kuna XHTML-is ei saa te avamata silte kasutada:



'Src' on lühike lähteallikas ja te kasutate seda oma faili asukoha määramiseks - teisisõnu, et öelda oma brauserile, kust pilt teie saidil asub. Kui hoiate oma pilte oma veebilehtedega samas kaustas, ei pea te kausta 'src' tekstis loetlema - võite lihtsalt sisestada pildifaili nime.

Kui olete oma pildiallika täpsustanud, saate seda põhiraamistikku täiustada mitmesuguste valikuliste atribuutidega, et oma piltidest maksimumi saada. Üks atribuut, mida peaksite peaaegu alati kasutama, on atribuut „alt”. See võimaldab teil täpsustada, millist teksti brauser peaks kuvama, kui see ei suuda mingil põhjusel teie pilti näidata. Alt-tekst on koostatud järgmiselt:



Veel üks kasulik atribuutide komplekt on sildid 'laius' ja 'kõrgus'. Need võimaldavad kuvada pilte tegelikust suurusest erinevas suuruses. Saate neid kasutada oma pildi kohandamiseks, nii et see sobib ideaalselt teie lehe üldise kujundusega. Kuid üldiselt on eelistatav pildi tegelikku suurust muuta pilditöötlusprogrammide abil ja seejärel pilt Internetis postitada kahel põhjusel. Esiteks annab pilditöötlustarkvara peaaegu alati parema väljanägemise kui suuruse käsitsi kohandamine. Teiseks, siltide 'laius' ja 'kõrgus' muutmine ei muuda pildi tegelikku failisuurust, nii et kui teil on tohutult suurt pilti, mida kuvatakse pisipildina, võtab pildi laadimine sama kaua aega ja näritakse samamoodi palju ribalaiust, justkui oleksite seda näidanud täissuuruses.

Kujutise suuruse määramisel võite loetleda kõrguse, laiuse või mõlemad. Suurused täpsustatakse piksli järgi, nagu näete allpool:



Samuti saate pilte joondada, et need sujuvalt teksti vooluga sobiksid. Kui valite joondamise vasakule, algab tekst pildist paremal. Kui valite õige joondamise, kuvatakse pilt lehe paremal küljel ja teie tekst tõuseb pildi vasakusse serva ja murdub seejärel uuele reale.

Kujutise joondamine seatakse järgmiselt:



Samuti saate seada joonduse väärtuseks "ülaosa", "alumine" või "keskmine", et muuta pilt rea üla- või alaosas ülespoole. Kui te joondamist ei täpsusta, vaikimisi kuvatakse pilt alumisse.

Kõrvalmärkusena võite lisada oma pildi atribuudid (src, joondada, alt jne) pildisiltidesse suvalises järjekorras. Minu isiklik eelistus on loetleda esmalt atribuut src, kuna see on kõige elementaarsem atribuut ja see peab sisalduma igas pildisildis, kuid võite kasutada mis tahes järjestust, mis teile kõige loomulikum tundub.

Video Juhiseid: Python Web Apps with Flask by Ezra Zigmond (Mai 2024).