Defnyddio'r Tag IMG HTML ar gyfer Lluniau ac Amcanion
Mae'r tag IMG HTML yn rheoli gosod lluniau a gwrthrychau graffigol sefydlog eraill o fewn tudalen we. Mae'r tag cyffredin hwn yn cefnogi nifer o nodweddion gorfodol a dewisol sy'n ychwanegu cyfoeth i'ch gallu i gynllunio gwefan ddeniadol sy'n canolbwyntio ar ddelwedd.
Mae enghraifft o tag IMG gwbl ffurfiedig HTML yn edrych fel hyn:
Nodweddion Tag IMG Angenrheidiol
SRC. Yr unig briodoldeb y mae angen i chi gael llun i'w ddangos ar dudalen we yw priodoldeb SRC. Mae'r nodwedd hon yn nodi enw a lleoliad y ffeil delwedd i'w harddangos.
ALT. I ysgrifennu XHTML a HTML4 dilys, mae angen priodoldeb ALT hefyd. Defnyddir y priodoldeb hwn i ddarparu testun porwr nad yw'n edrych ar y porwyr nad ydynt yn edrych ar y ddelwedd. Mae porwyr yn arddangos y testun amgen mewn gwahanol ffyrdd. Mae rhai'n ei arddangos fel pop-up pan fyddwch chi'n gosod eich llygoden dros y ddelwedd, mae eraill yn ei arddangos mewn eiddo pan fyddwch yn clicio ar y ddelwedd, ac nid yw rhai yn ei arddangos o gwbl.
Defnyddiwch y testun alt i roi manylion ychwanegol am y ddelwedd nad yw'n berthnasol neu'n bwysig i destun y We. Ond cofiwch fod darllenwyr sgrin a phorwyr testun-yn-unig yn unig, bydd y testun yn cael ei ddarllen yn unol â gweddill y testun ar y dudalen. Er mwyn osgoi dryswch, defnyddiwch destun alt disgrifiadol sy'n dweud (er enghraifft), "Amdanom ni Dylunio Gwe a HTML" yn hytrach na dim ond "logo".
Yn HTML5, nid oes angen y priodoldeb ALT bob amser, oherwydd gallwch chi ddefnyddio pennawd i ychwanegu mwy o ddisgrifiad ato. Gallwch hefyd ddefnyddio'r priodwedd ARIA-DESCRIBEDBY i nodi ID sy'n cynnwys disgrifiad llawn.
Nid oes angen testun Alt hefyd os yw'r delwedd yn unig addurnol, fel graffig ar frig tudalen we neu eiconau. Ond os nad ydych chi'n siŵr, dylech gynnwys testun alt mewn unrhyw achos.
Nodweddion IMG a Argymhellir
WIDTH a HEIGHT . Dylech fynd i mewn i'r arfer o ddefnyddio'r nodweddion WIDTH a HEIGHT bob amser. A dylech bob amser ddefnyddio'r maint go iawn a pheidio â newid maint eich delweddau gyda'r porwr.
Mae'r nodweddion hyn yn cyflymu'r broses o rendro'r dudalen oherwydd gall y porwr ddyrannu lle yn y dyluniad ar gyfer y ddelwedd, ac yna parhau i lawrlwytho gweddill y cynnwys, yn hytrach nag aros am y ddelwedd gyfan i'w lawrlwytho.
Nodweddion IMG Defnyddiol Eraill
TEITL . Mae'r priodoldeb yn briodoldeb byd-eang y gellir ei ddefnyddio i unrhyw elfen HTML . At hynny, mae'r priodoldeb TITLE yn gadael i chi ychwanegu gwybodaeth ychwanegol am y ddelwedd.
Mae'r rhan fwyaf o borwyr yn cefnogi'r briodoldeb TITLE, ond maent yn ei wneud mewn gwahanol ffyrdd. Mae rhai'n arddangos y testun fel pop-up tra bod eraill yn ei arddangos mewn sgriniau gwybodaeth pan fydd y defnyddiwr yn clicio ar y ddelwedd. Gallwch ddefnyddio'r priodwedd TITLE i ysgrifennu gwybodaeth ychwanegol am y ddelwedd, ond nid ydynt yn cyfrif ar y wybodaeth hon naill ai'n gudd neu'n weladwy. Yn sicr, ni ddylech ddefnyddio hyn i guddio keywords ar gyfer peiriannau chwilio. Mae'r arfer hwn bellach yn cael ei gosbi gan y rhan fwyaf o beiriannau chwilio.
USEMAP ac ISMAP . Mae'r ddau nodwedd hyn yn gosod mapiau ochr cleientiaid ochr () a gweinydd (ISMAP) at eich delweddau.
LONGDESC . Mae'r priodoldeb yn cefnogi URLau i ddisgrifiad hwy o'r delwedd. Mae'r nodwedd hon yn gwneud eich delweddau yn fwy hygyrch.
Nodweddion IMG Diddymedig ac Eithriedig
Mae sawl nodwedd bellach yn ddarfodedig yn HTML5 neu heb eu hamgáu yn HTML4. Ar gyfer y HTML gorau, dylech ddod o hyd i atebion eraill yn lle defnyddio'r nodweddion hyn.
BORDER . Mae'r priodoldeb yn diffinio lled mewn picsel o unrhyw ffin o gwmpas y ddelwedd. Mae wedi bod yn anghymwys o blaid CSS yn HTML4 ac mae'n ddarfodedig yn HTML5.
ALIGN . Mae'r nodwedd hon yn eich galluogi i osod delwedd y tu mewn i'r testun a bod y testun yn llifo o'i gwmpas. Gallwch alinio delwedd i'r dde neu i'r chwith. Mae wedi cael ei ddiddymu o blaid eiddo CSS arnofio yn HTML4 ac mae'n ddarfodedig yn HTML5.
HSPACE a VSPACE . Y HSPACE ac mae nodweddion VSPACE yn ychwanegu gofod gwyn yn llorweddol (HSPACE) ac yn fertigol (VSPACE). Bydd gofod gwyn yn cael ei ychwanegu at ddwy ochr y graffig (ar y brig a'r gwaelod neu'r chwith ac i'r dde), felly os oes angen lle ar un ochr, dylech ddefnyddio CSS. Mae'r nodweddion hyn wedi'u hamddifadu yn HTML4 o blaid eiddo CSS, ac maent yn ddarfodedig yn HTML5.
LOWSRC . Mae priodoldeb LOWSRC yn darparu delwedd arall pan fydd eich ffynhonnell delwedd mor fawr a'i fod yn lawrlwytho'n araf iawn. Er enghraifft, efallai y bydd gennych ddelwedd sy'n 500KB yr hoffech ei arddangos ar eich tudalen we, ond byddai 500KB yn cymryd amser hir i'w lawrlwytho. Felly, rydych chi'n creu copi llawer llai o'r ddelwedd, efallai yn ddu a gwyn, neu efallai ei fod wedi'i optimeiddio'n fawr iawn, a'i roi yn y priodoldeb LOWSRC. Bydd y ddelwedd lai yn cael ei lawrlwytho a'i arddangos yn gyntaf, ac yna pan fydd y ddelwedd fwy yn ymddangos bydd yn disodli'r ffynhonnell isel.
Ychwanegwyd priodoldeb LOWSRC i Netscape Navigator 2.0 i'r tag IMG. Roedd yn rhan o DOM lefel 1 ond fe'i symudwyd o DOM lefel 2. Mae cefnogaeth porwr wedi bod yn fras am y priodoldeb hwn, er bod llawer o safleoedd yn honni ei bod yn cael ei gefnogi gan bob porwr modern. Nid yw'n ddibwysiedig yn HTML4 nac wedi'i ddarfod yn HTML5 gan nad oedd erioed yn rhan swyddogol o'r naill fanyleb na'r llall.
Peidiwch â defnyddio'r priodoldeb hwn ac yn hytrach gwneud y gorau o'ch delweddau fel eu bod yn llwytho'n gyflym. Mae cyflymder llwytho tudalen yn rhan hanfodol o ddylunio Gwe da, a thudalennau mawr yn araf yn isel iawn-hyd yn oed os ydych chi'n defnyddio'r priodoldeb LOWSRC.