Kasulikke näpunäiteid

HTML-pildid - petuleht algajatele

Pin
Send
Share
Send
Send


Viimati vaatasime taganemisvõimalust. pilte PHP kaustast.

Ülaltoodud näitest mõistsime, et pilt kuvatakse lehel HTML-siltide abil.
Ja pildi mõõtmed registreerisime otse HTML-koodi.

Nüüd näitan teile, kuidas stiilitabeli abil pildi suurusi määrata. Kõik need andmed paigutatakse css-laiendiga eraldi faili ja nimetage see näiteks stiil.css.

Kujutise mõõtmed määravad laiuse ja kõrguse parameetrid.
Kujutise mõõtmete seadmiseks ja CSS-faili kaudu registreerimiseks peate looma src-sildi klassi. Kirjutage näiteks>

Siis kirjutatakse css-failis mõõtmed sel viisil

Selle salvestusvaliku korral kuvatakse pildil moonutatud pilt, kui tegelik pildi kõrgus on üle 170 piksli, näiteks 400 pikslit. See on lapik.

Selle vältimiseks saate seada ainult ühe parameetri, pildi laiuse, vaikekõrgus seatakse ilma pildi proportsioone automaatselt kahjustamata:

Samal viisil saate seadistada kõrguse, siis seadistatakse laius automaatselt, säilitades pildi proportsioonid.

Kui tahame näha pildi tegelikku suurust, siis pole vaja failis pildi suurust täpsustada. Ainult siis, kui me teame peaaegu, et pildi suurus võtab terve lehe, ei tohiks sellel lehel olla suurust määravaid silte.

Näiteks laud

või blokeerida div

Kui soovime, et pilt hõlmaks kogu brauseri lehe või saidi veeru kogu laiust, tuleb laius täpsustada protsentides.

Sel viisil:

Selles näites vaatasime piltide suuruse määramise võimalust css-i abil. Kuid tegelikult on css-faili abil kõik parameetrid seatud kogu saidi kujundusele. See sisaldab kõiki parameetreid suuruse, välimuse, kõigi menüüelementide ja nii edasi.

Veebidisainerite jaoks on halb vorm, kui stiilid omistatakse HTML-vormingus. Ainult iga elemendi klassid ja id registreeritakse mallis. Ja kõik stiilid võetakse eraldi CSS-failina.

Lisaks, kui soovite luua oma saidi üllatavalt ilusa ja ainulaadse kujunduse, ei saa te ilma taustapildita hakkama. Kuidas ilma selleta? Selles osas kirjeldatakse, kuidas seda teha, ja selle, kuhu taustpilt ise paigutada, leiate siit.

Ja kui teil on arvamusi allpool oleva loetud kommentaarivormi kohta.

Kuidas manustada pilti HTML-i?

Kujutise lisamiseks HTML-lehele kasutatakse ühte lihtsat silti:

kus xxx on pildi aadress. Kui pilt asub lehega samas kataloogis, näeb silt välja järgmine:

Kiire ja stabiilne internetiühendus pole aga veel kõikidele maailma nurkadele jõudnud ja juhtub, et veebisaidil olev pilt lihtsalt ei laadita. Selliste juhtumite jaoks on olemas alternatiivse teksti mõiste.

Seda kuvatakse pildi saidil ligipääsmatuse, laadimise ajal või brauseri režiimis "ilma piltideta". Selle lisamiseks kasutatakse sildi atribuuti alt.

Näide alternatiivse teksti lisamisest pildifailile:

HTML-pildi suurus

Piltfaili kuvasuuruse muutmiseks kasutage kõrguse ja laiuse silte, kus kõrgus on kõrgus ja laius on laius, mõõdetuna pikslites.

Nende atribuutide kasutamisel eraldab brauser kõigepealt ruumi graafilisele sisule, koostab lehe üldise paigutuse, kuvab teksti ja seejärel laadib pildi ise.

Pilt paigutatakse antud suurustega ristkülikusse ja juhul, kui parameetrid on väiksemad või suuremad kui originaal, pilt venitatakse või tihendatakse.

Kui kõrguse ja laiuse atribuute ei kasutata, laadib brauser pildi kohe, viivitades teksti ja muude leheelementide kuvamisega.

Neid parameetreid saab täpsustada nii pikslites (pildi suurus on konstantne ja see ei sõltu kasutaja ekraani eraldusvõimest) kui ka protsentides (pildi suurus sõltub ekraani eraldusvõimest).

Tuleb meeles pidada, et hetkel, kui muudate pildi algset suurust, peate hoidma selle proportsioone.

Selleks määrake ainult ühe parameetri (laius või kõrgus) väärtus ja teise väärtus arvutatakse automaatselt.

HTML-pildi paigutus

Nagu paljude HTML-siltide puhul,

Kujutise link

HTML-is kasutage lingi loomiseks silti:

Graafilise lingi määramiseks peate lihtsalt ühendama pildisildi lingisildiga.

Seda tehakse järgmiselt:

Nagu näete, võib graafiline sisend olla lingiks ja klõpsamisel suunata tagasi mis tahes aadressile, mis on salvestatud täisversioonina või lühendatud versioonina.

Kuidas saaksin pildi HTML-is taustaks muuta?

Pilti ei saa mitte ainult lisada lehele nähtava objektina, vaid ka taustaks. Pildi määratlemiseks taustana on vaja sildis määratleda atribuut background = ”xxx”, kus xxx on pildi aadress, nagu on täpsustatud ülaltoodud näidetes.

Näitena seame sellise tekstuuripildi taustpildiks:

See teave saidi HTML-lehele pildi lisamiseks vajalike siltide ja atribuutide kohta on ammendatud.

Pin
Send
Share
Send
Send