Šodien apmeklējiet jebkuru tīmekļa lapu tiešsaistē, un jūs pamanīsit, ka viņiem ir kopīgas dažas kopīgas lietas. Viena no šīm kopīgām iezīmēm ir attēli. Pareizos attēlus tīmekļa vietnes prezentācijai tiek pievienots tik daudz. Daži no šiem attēliem, piemēram, firmas logotips, palīdz zīmolu vietni un savieno šo digitālo vienību ar savu fizisko uzņēmumu.
Lai tīmekļa lapai pievienotu attēlu, ikonu vai grafiku, lapas atzīmēšanā ir jāizmanto HTML kods. Jūs ievietojat IMG tagu savā HTML tieši tā, kā vēlaties, lai attēls tiktu parādīts. Tīmekļa pārlūkprogramma, kas tiek padarīta par lapas kodu, aizstās šo tagu ar atbilstošu grafiku, tiklīdz lapa tiks skatīta. Lai atgrieztos mūsu uzņēmuma logotipa piemērā, šeit ir redzams, kā jūs varētu pievienot šo attēlu savai vietnei:
Attēlu atribūti
Aplūkojot iepriekš minēto HTML kodu, jūs redzēsiet, ka elements ietver divus atribūtus. Katrs no tiem ir nepieciešams attēlam.
Pirmais atribūts ir "src". Tas ir diezgan burtiski attēla fails, kuru vēlaties parādīt lapā. Mūsu piemērā mēs izmantojam failu ar nosaukumu "logo.png". Šis ir grafiskais attēls, kuru tīmekļa pārlūkprogramma varētu parādīt, kad tā izveidoja vietni.
Jūs arī pamanīsit, ka pirms šī faila nosaukuma mēs pievienojām papildu informāciju "/ images /". Šis ir faila ceļš. Sākotnējā uz priekšu vērstā slash norāda serverim, lai izpētītu direktorijas sakni. Pēc tam tiks meklēta mape ar nosaukumu "attēli" un visbeidzot fails ar nosaukumu "logo.png". Izmantojot mapi ar nosaukumu "attēli", lai saglabātu visas vietnes grafikas, ir diezgan izplatīta prakse, taču jūsu faila ceļš tiek mainīts uz to, kas ir piemērots jūsu vietnei.
Otrais vajadzīgais atribūts ir "alt" teksts. Šis ir "alternatīvais teksts", kas tiek parādīts, ja attēls kāda iemesla dēļ netiek ielādēts. Šis teksts, kas mūsu piemērā skan "Uzņēmuma logotips", tiks parādīts, ja attēls nav ielādēts. Kāpēc tas notiks? Dažādu iemeslu dēļ:
- Nepareizs faila ceļš
- Nepareizs faila nosaukums vai pareizrakstības kļūda
- Pārraides kļūda
- Fails tika izdzēsts no servera
Šīs ir tikai dažas iespējas, kāpēc mūsu norādītajam attēlam trūkst. Šajos gadījumos mūsu vietā parādīsies mūsu alt teksts.
Alt tekstu izmanto arī ekrāna lasītāja programmatūra, lai "nolasītu" attēlu apmeklētājam, kam ir redzes traucējumi. Tā kā viņi nevar redzēt tādu attēlu kā mēs, šis teksts ļauj viņiem uzzināt, kas pats attēls ir. Tāpēc alt teksts ir vajadzīgs un kāpēc tam skaidri jānorāda, kāds ir attēls!
Vienkāršs alt teksta pārpratums ir tāds, ka tas ir domāts meklētājprogrammu vajadzībām. Tā nav taisnība. Kamēr Google un citas meklētājprogrammas lasa šo tekstu, lai noteiktu, kas ir attēls (atcerieties, ka viņi arī nevar "redzēt" jūsu attēlu), jums nevajadzētu rakstīt alt tekstu, lai pārsūdzētu tikai meklētājprogrammas. Autors skaidrs alt teksts, kas domāts cilvēkiem. Ja jūs varat pievienot arī dažus atslēgvārdus tagā, kas piesaista meklētājprogrammas, tas ir labi, taču vienmēr pārliecinieties, vai alt teksts atbilst tā galvenajam mērķim, norādot, kāds ir attēls ikvienam, kurš neredz grafisko failu.
Citi atribūti
IMG tagam ir arī divi citi atribūti, kurus jūs, iespējams, redzēsit, kad savā tīmekļa lapā ievietosiet grafiku - platumu un augstumu. Piemēram, ja jūs izmantojat WYSIWYG redaktoru, piemēram, Dreamweaver, tas automātiski pievieno šo informāciju jums. Šeit ir piemērs:
Atribūti WIDTH un HEIGHT norāda pārlūkam attēla lielumu. Tad pārlūkprogramma precīzi zina, cik lielu vietu izkārtojumā piešķirt, un, kad attēls tiek lejupielādēts, tā var pāriet uz nākamo lapas elementu. Problēma, izmantojot šo informāciju jūsu HTML, nozīmē, ka jūs ne vienmēr vēlaties, lai jūsu attēls tik precīzi parādās. Piemēram, ja jums ir pielāgojama vietne, kuras izmēru maiņa ir atkarīga no apmeklētāju ekrāna un ierīces lieluma, jūs arī vēlaties, lai jūsu attēli būtu elastīgi. Ja jūs norādījāt savā HTML, kāds ir fiksētais lielums, jums būs ļoti grūti ignorēt ar atsaucīgiem CSS multivides vaicājumiem . Šī iemesla dēļ, lai saglabātu stilu nošķiršanu (CSS) un struktūru (HTML), ieteicams neielādēt HTML koda platuma un augstuma atribūtus.
Viena piezīme. Ja jūs izslēdzat šos izmēru norādījumus un nenosakāt izmēru CSS, pārlūks jebkurā gadījumā parāda attēlu pēc noklusējuma, vietējā lieluma.
Rediģējis Jeremijs Girards