Paskaties uz jebkuru tīmekļa lapu šodien tiešsaistē, un jūs ievērosiet, ka viņiem ir kopīgas noteiktas lietas. Viena no šīm kopīgajām iezīmēm ir attēli. Pareizie attēli tik daudz papildina vietnes prezentāciju. Daži no šiem attēliem, piemēram, uzņēmuma logotips, palīdz izveidot vietni zīmolā un savienot šo digitālo vienību ar savu fizisko uzņēmumu.
Kā pievienot attēlu tīmekļa lapai, izmantojot HTML
Lai savai tīmekļa lapai pievienotu attēlu, ikonu vai grafiku, jums ir jāizmanto tags lapas HTML kodā. Jūs ievietojat.
IMGtagu jūsu. HTML tieši tur, kur vēlaties attēlot grafiku. Tīmekļa pārlūks, kas atveido lapas kodu, pēc lapas skatīšanas aizstās šo tagu ar atbilstošu grafiku. Atgriežoties pie mūsu uzņēmuma logotipa piemēra, šeit ir norādīts, kā jūs varētu pievienot šo attēlu savai vietnei:
SRC atribūts
Aplūkojot HTML kodu iepriekš, 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 burtiski tā attēla fails, kuru vēlaties parādīt lapā. Šajā piemērā mēs izmantojam failu ar nosaukumu "logo.png". Šis ir grafiskais attēls, ko tīmekļa pārlūkprogramma parādīs, atveidojot vietni.
Jūs ievērosiet arī to, ka pirms šī faila nosaukuma mēs pievienojām papildu informāciju "/ images /". Šis ir faila ceļš. Sākotnējā slīpsvītra uz priekšu liek serverim meklēt direktorija sakni. Pēc tam tā meklēs mapi ar nosaukumu "attēli" un visbeidzot failu ar nosaukumu "logo.png". Mapes ar nosaukumu "attēli" izmantošana, lai saglabātu visas vietnes grafikas, ir diezgan izplatīta prakse, taču faila ceļš tiktu mainīts uz visu, kas attiecas uz jūsu vietni.
Alt atribūts
Otrais nepieciešamais atribūts ir "alt" teksts. Šis ir "alternatīvais teksts", kas tiek parādīts, ja attēlu kāda iemesla dēļ neizdodas ielādēt. Šis teksts, kas mūsu piemērā ir “Uzņēmuma logotips”, tiktu parādīts, ja attēlu neizdodas ielādēt. Kāpēc tas notiktu? Dažādi iemesli:
- 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ītais attēls var pazust. Šādos gadījumos tā vietā tiktu parādīts mūsu alternatīvais teksts.
Kāpēc tiek izmantots Alt teksts?
Alt tekstu izmanto arī ekrāna lasītāja programmatūra, lai "nolasītu" attēlu apmeklētājam ar redzes traucējumiem. Tā kā viņi nevar redzēt attēlu tāpat kā mēs, šis teksts ļauj viņiem uzzināt, kāds ir pats attēls. Tāpēc ir nepieciešams alternatīvais teksts un kāpēc tajā skaidri jānorāda, kāds ir attēls!
Parasti Alt teksta pārpratums ir tāds, ka tas ir paredzēts meklētājprogrammu vajadzībām. Tā nav taisnība. Kamēr Google un citas meklētājprogrammas patiešām lasa šo tekstu, lai noteiktu attēlu (atcerieties, arī viņi nevar "redzēt" jūsu attēlu), jums nevajadzētu rakstīt alternatīvo tekstu, lai aicinātu tikai uz meklēšanu dzinēji. Autors skaidru alternatīvo tekstu, kas domāts cilvēkiem. Ja tagā varat pievienot arī dažus atslēgvārdus, kas patīk meklētājprogrammām, tas ir labi, taču vienmēr pārliecinieties alt teksts kalpo galvenajam mērķim, norādot, kāds attēls ir paredzēts ikvienam, kurš neredz grafiku failu.
Citi attēlu atribūti
The.
IMG.
tagam ir arī divi citi atribūti, kurus, iespējams, redzēsit lietojot, ievietojot grafiku savā tīmekļa lapā, - platumu un augstumu. Piemēram, ja izmantojat WYSIWYG redaktoru, piemēram, Dreamweaver, tas automātiski jums pievienos šo informāciju. Lūk, piemērs:
The.
PLATUMS.
un.
AUGSTUMS.
atribūti pārlūkam norāda attēla lielumu. Pēc tam pārlūkprogramma precīzi zina, cik daudz vietas izkārtojumā jāpiešķir, un tā var pāriet uz nākamo lapas elementu, kamēr attēls tiek lejupielādēts. Problēma ar šīs informācijas izmantošanu HTML ir tāda, ka jūs ne vienmēr vēlaties, lai attēls tiktu parādīts tieši tādā izmērā. Piemēram, ja jums ir.
atsaucīga vietne
kuru izmērs mainās, pamatojoties uz apmeklētāju ekrānu un ierīces lielumu, jūs arī vēlaties, lai attēli būtu elastīgi. Ja HTML failā norādīsit fiksēto izmēru, jums būs ļoti grūti ignorēt atsaucīgo.
CSS multivides vaicājumi
. Šī iemesla dēļ un, lai saglabātu stila (CSS) un struktūras (HTML) nošķiršanu, ieteicams HTML kodam NEpievienot platuma un augstuma atribūtus.
Viena piezīme: ja jūs atstājat šos izmēru norādījumus izslēgtus un CSS nenorādāt izmēru, pārlūkprogramma tik un tā parādīs attēlu pēc noklusējuma.
Rediģējis Džeremijs Žirards