Edrychwch ar unrhyw dudalen we ar-lein heddiw a byddwch yn sylwi eu bod yn rhannu rhai pethau yn gyffredin. Un o'r nodweddion a rennir yw delweddau. Mae'r delweddau cywir yn ychwanegu cymaint at gyflwyniad gwefan. Mae rhai o'r delweddau hynny, fel logo cwmni, yn helpu i frandio'r wefan ac yn cysylltu yr endid digidol hwnnw i'ch cwmni corfforol.
I ychwanegu delwedd, eicon, neu graffeg i'ch tudalen we, mae angen i chi ddefnyddio'r tag mewn cod HTML tudalen. Rydych chi'n gosod y tag IMG yn eich HTML yn union lle rydych chi am i'r graffig ei arddangos. Bydd y porwr gwe sy'n rhoi cod y dudalen yn disodli'r tag hwn gyda'r graffig briodol unwaith y bydd y dudalen yn cael ei weld. Gan fynd yn ôl at enghraifft logo ein cwmni, dyma sut y gallech chi ychwanegu'r ddelwedd honno i'ch gwefan:
Nodweddion Delwedd
Gan edrych ar y cod HTML uchod, fe welwch fod yr elfen yn cynnwys dau nodwedd. Mae angen pob un ohonynt ar gyfer y ddelwedd.
Y priodoldeb cyntaf yw'r "src". Mae hyn yn gwbl llythrennol yn y ffeil delwedd yr ydych am ei arddangos ar y dudalen. Yn ein hes enghraifft, rydym ni'n defnyddio ffeil o'r enw "logo.png". Dyma'r graffig y byddai'r porwr gwe yn ei arddangos wrth iddo rendro'r safle.
Byddwch hefyd yn sylwi, cyn yr enw ffeil hwn, ychwanegwyd rhywfaint o wybodaeth ychwanegol, "/ images /". Dyma'r llwybr ffeiliau. Mae'r slash ymlaen cychwynnol yn dweud wrth y gweinydd edrych ar wraidd y cyfeirlyfr. Yna bydd yn chwilio am ffolder o'r enw "delweddau" ac yn olaf y ffeil o'r enw "logo.png". Mae defnyddio ffolder o'r enw "delweddau" i storio holl graffeg y wefan yn arfer eithaf cyffredin, ond byddai'ch llwybr ffeiliau yn cael ei newid i beth sy'n berthnasol i'ch safle.
Yr ail briodoldeb gofynnol yw'r testun "alt". Dyma'r "testun arall" a ddangosir os na fydd y ddelwedd yn llwytho am ryw reswm. Byddai'r testun hwn, sydd yn ein hagwedd yn darllen "Logo Cwmni" yn cael ei arddangos os na fydd y ddelwedd yn llwytho. Pam fyddai hynny'n digwydd? Amrywiaeth o resymau:
- Llwybr ffeil anghywir
- Enw ffeil anghywir neu feth-gipio
- Gwall trosglwyddo
- Cafodd y ffeil ei ddileu o'r gweinydd
Dim ond ychydig o bosibiliadau yw'r rhain ar gyfer pam y gall ein delwedd benodol fod ar goll. Yn yr achosion hyn, byddai ein testun alt yn dangos yn lle hynny.
Mae testun Alt hefyd yn cael ei ddefnyddio gan feddalwedd darllenydd sgrin i "ddarllen" y ddelwedd i ymwelydd sydd â nam ar eu golwg. Gan na allant weld y ddelwedd fel yr ydym yn ei wneud, mae'r testun hwn yn gadael iddynt wybod beth yw'r ddelwedd ei hun. Dyna pam mae angen testun alt a pham y dylai nodi'n glir beth yw'r ddelwedd!
Camddealltwriaeth cyffredin o destun alt yw ei fod yn golygu at ddibenion peiriannau chwilio. Nid yw hyn yn wir. Er bod Google a pheiriannau chwilio eraill yn darllen y testun hwn i benderfynu beth yw'r ddelwedd (cofiwch, na allant "weld" eich delwedd naill ai), ni ddylech ysgrifennu testun alt i apelio yn unig i beiriannau chwilio. Awdur clear text alt sy'n cael ei olygu i bobl. Os gallwch chi hefyd ychwanegu rhai geiriau allweddol i'r tag sy'n apelio at beiriannau chwilio, mae hynny'n iawn, ond bob amser yn sicrhau bod y testun alt yn gwasanaethu ei phrif ddiben trwy ddweud beth yw'r ddelwedd ar gyfer unrhyw un na allant weld y ffeil graffeg.
Nodweddion Eraill
Mae gan y tag IMG ddau nodweddion arall y gallech eu gweld wrth eu defnyddio pan fyddwch chi'n rhoi graffig ar eich tudalen we - y lled a'r uchder. Er enghraifft, os ydych chi'n defnyddio golygydd WYSIWYG fel Dreamweaver, mae'n ychwanegu'r wybodaeth hon yn awtomatig i chi. Dyma enghraifft:
Mae nodweddion WIDTH a HEIGHT yn dweud maint y delwedd i'r porwr. Yna, mae'r porwr yn gwybod yn union faint o le yn y cynllun i'w ddyrannu, a gall symud ymlaen i'r elfen nesaf ar y dudalen tra bod y ddelwedd yn cael ei lawrlwytho. Y broblem wrth ddefnyddio'r wybodaeth hon yn eich HTML yw na fyddwch chi bob amser eisiau i'ch delwedd ddangos ar yr union faint. Er enghraifft, os oes gennych wefan ymatebol y mae ei newidiadau sizing yn seiliedig ar sgrin ymwelwyr a maint y dyfais, byddwch hefyd eisiau i'ch delweddau fod yn hyblyg. Os ydych chi'n nodi yn eich HTML beth yw'r maint sefydlog, fe welwch hi'n anodd iawn ei orchuddio gydag ymholiadau cyfryngau CSS ymatebol. Am y rheswm hwn, ac i gynnal gwahaniad o arddull (CSS) a strwythur (HTML), argymhellir NA CHIWCH ychwanegu nodweddion lled a thaldra i'ch cod HTML.
Un nodyn: Os ydych chi'n gadael y cyfarwyddiadau sizing hyn i ffwrdd ac nad ydynt yn pennu maint yn CSS, bydd y porwr yn dangos y ddelwedd yn ei ddiffyg, maint brodorol beth bynnag.
Golygwyd gan Jeremy Girard