Rigardu iun retpaĝon enrete hodiaŭ kaj vi rimarkos, ke ili dividas iujn aferojn komune. Unu el tiuj dividitaj trajtoj estas bildoj. La dekstraj bildoj aldonas tiom al la prezento de retejo. Kelkaj el tiuj bildoj, kiel logoo de kompanio, helpas marki la retejon kaj konekti tiun ciferecan enton al via fizika kompanio.
Por aldoni bildon, ikonon aŭ grafikojn al via retpaĝo, vi devas uzi la etikedon en la HTML-kodo de paĝo. Vi lokas la IMG-etikedon en via HTML ĝuste kie vi volas ke la grafikaĵo montriĝu. La retumilo, kiu montras la kodon de la paĝo, anstataŭigos ĉi tiun etikedon per la taŭga grafikaĵo, kiam la paĝo estas vidita. Revenante al la logoo de nia kompanio, jen kiel vi povus aldoni tiun bildon al via retejo:
Bildaj Atributoj
Rigardante la HTML-supran kodon, vi vidos, ke la elemento inkluzivas du atributojn. Ĉiu el ili estas postulita por la bildo.
La unua atributo estas la "src". Ĉi tio estas tute laŭvorte la bild-dosiero, kiun vi volas montri en la paĝo. En nia ekzemplo ni uzas dosieron nomatan "logo.png". Jen la grafikaĵo, kiun la retumilo montriĝus kiam ĝi prezentis la retejon.
Vi ankaŭ rimarkos, ke antaŭ ĉi tiu dosiernomo, ni aldonis iujn pliajn informojn, "/ images /". Jen la dosiero. La komenca antaŭa slash diras al la servilo rigardi la radikon de la dosierujo. Ĝi tiam serĉos dosierujon nomitan "bildojn" kaj fine la dosieron nomatan "logo.png". Uzante dosierujon nomitan "bildojn" por stoki ĉiujn grafikojn de la retejo estas sufiĉe komuna praktiko, sed via dosiero estus ŝanĝita al ĉiu ajn grava por via retejo.
La dua postulita atributo estas la "alt" teksto. Jen la "alterna teksto", kiu montras, se la bildo ne povas ŝarĝi por iu kialo. Ĉi tiu teksto, kiu en nia ekzemplo legas "Kompanio Logo" montriĝus se la bildo malŝarĝos. Kial tio okazus? Vario da kialoj:
- Malĝusta dosiero
- Malĝusta dosiernomo aŭ miskomprenado
- Transdono eraro
- Dosiero estis forigita de la servilo
Ĉi tiuj estas nur kelkaj eblecoj por kial nia specifa bildo eble mankas. En ĉi tiuj kazoj, nia alt-teksto montriĝus anstataŭe.
Alt-teksto ankaŭ estas uzata per ekrano-legilo-programaro por "legi" la bildon al vizitanto, kiu estas vidpunktita. Ĉar ili ne povas vidi la bildon kiel ni faras, ĉi tiu teksto lasas al ili scii, kio estas la bildo mem. Jen kial alta teksto estas bezonata kaj kial ĝi klare deklaras, kio estas la bildo!
Komuna miskompreno de alt-teksto estas, ke ĝi signifas serĉilon. Ĉi tio ne estas vera. Dum Google kaj aliaj serĉiloj legas ĉi tiun tekston por determini, kio estas la bildo (memoru, ili ankaŭ ne povas "vidi" vian bildon), vi ne devas skribi altan tekston por apelacii nur al serĉiloj. Aŭtoro klara alt-teksto, kiu signifas homojn. Se vi ankaŭ povas aldoni iujn ŝlosilvortojn en la etikedo, kiu alvokas serĉilojn, tio estas bone, sed ĉiam certigu, ke la teksto alt servas sian priman celon, dirante, ke la bildo estas por iu ajn, kiu ne povas vidi la grafikan dosieron.
Aliaj Atributoj
La IMG-etikedo ankaŭ havas du aliajn atributojn, kiujn vi povas uzi dum vi enmetas grafikon sur via retpaĝaro - la larĝo kaj la alteco. Ekzemple, se vi uzas WYSIWYG-redaktilon kiel Dreamweaver, ĝi aŭtomate aldonas ĉi tiun informon por vi. Jen ekzemplo:
La atributoj WIDTH kaj HEIGHT rakontas al la retumilo la grandecon de la bildo. La retumilo tiam scias precize kiom da spaco en la aranĝo por atribui, kaj ĝi povas translokiĝi al la sekva elemento en la paĝo dum la bildo malŝarĝas. La problemo per uzado de ĉi tiu informo en via HTML estas ke vi ne ĉiam volas ke via bildo montriĝu ĉe tiu ĝusta grandeco. Ekzemple, se vi havas respondeman retejon, kies sizajn ŝanĝojn baziĝas sur vizitantoj ekrano kaj mekanismo, vi ankaŭ volas ke viaj bildoj estu malrigidaj. Se vi indikas en via HTML, kio estas la fiksa grandeco, vi trovos ĝin tre malfacile anstataŭi per respondemaj komunikiloj pri CSS . Por ĉi tiu kialo, kaj por konservi apartigon de stilo (CSS) kaj strukturo (HTML), rekomendas, ke vi NE aldonu larĝecon kaj altecon-atributojn al via HTML-kodo.
Unu noto: Se vi lasos ĉi tiujn sizajn instrukciojn for kaj ne specifas grandecon en CSS, la retumilo montros la bildon laŭ ĝia antaŭdosiero, denaska grandeco de ĉiuj modoj.
Redaktita de Jeremy Girard