Kiel ligi bildon sur via retejo

Retejoj kontraste kun iu ajn komunikilo, kiu venis antaŭ ili. Unu el la ĉefaj aferoj, kiuj starigas retejojn aparte al antaŭaj amaskomunikaj formatoj kiel presado, radioaparato, kaj eĉ televido estas la koncepto de la " hiperligilo ".

Hiperligoj, ankaŭ ofte nur konataj kiel "ligiloj", estas kio faras la retejon tiel dinamikan. Kontraste kun presita publikigado, kiu povas referencigi alian artikolon aŭ alian rimedon, retejoj povas uzi ĉi tiujn ligojn por efektive sendi vizitantojn al tiuj aliaj paĝoj kaj rimedoj. Neniu alia elsendo povas fari ĉi tion. Vi povas aŭskulti anoncon sur radioaparato aŭ vidi televidilon, sed ne estas hipervojoj, kiuj povas konduki vin al la kompanioj en tiuj anoncoj kiel la retejo povas facile fari. Ligiloj vere estas mirinda komunikado kaj interaga ilo!

Ofte, la ligoj, kiuj troviĝas en retejo, enhavas tekston, kiu direktas vizitantojn al aliaj paĝoj de tiu sama retejo. Reteja navigado estas ekzemplo de tekstaj ligiloj en la praktiko, sed ligiloj ne bezonas esti tekston. Vi ankaŭ povas facile ligi bildojn en via retejo. Ni rigardu kiel tio estas farita, kaj sekvitaj de iuj okazoj, kie vi volas uzi bildajn bazajn hiperligojn.

Kiel ligi bildon

La unua afero, kiun vi devas fari estas meti la bildon mem en via HTML- dokumento. Komuna uzo de bildo bazita en ligo estas la logo-grafikaĵo de la retejo, kiu tiam estas ligita al la hejmpaĝo de la retejo. En nia ekzemplo kodo sube, la dosiero, kiun ni uzas estas SVG por nia logoo. Ĉi tiu estas bona elekto pro tio ke ĝi permesos nian bildon grimpi por malsamaj rezolucioj, dum la tuta konservado de bildkvalito kaj malgranda entuta grandeco de dosieroj.

Jen kiel vi metus vian bildon en la HTML-dokumento:

Ĉirkaŭ la bildo etikedo, vi nun aldonus la ankron ligilon, malfermante la ankron elementon antaŭ la bildo kaj fermante la ankron post la bildo. Ĉi tio estas simila al kiel vi ligus tekston, nur anstataŭ envolvi la vortojn, kiujn vi volas esti ligilo kun la ankraj etikedoj, vi envolvas la bildon. En nia ekzemplo sube, ni ligas reen al la hejmpaĝo de nia retejo, kiu estas "index.html".

Aldoninte ĉi tiun HTML al via paĝo, ne metu spacojn inter la ankro etikedo kaj la bildo etikedo. Se vi faros, iuj foliumiloj aldonos malgrandajn lekojn apud la bildo, kiu aspektas stranga.

La logo-bildo ankaŭ funkcios kiel hejmpaĝo-butonon, kiu estas sufiĉe retejo en ĉi tiuj tagoj. Rimarku, ke ni ne inkluzivas ajnajn vidajn stilojn, kiel la larĝeco kaj alteco de la bildo, en nia HTML-marko. Ni lasos ĉi tiujn vidajn stilojn al CSS kaj konservos purajn apartigon de HTML-strukturo kaj CSS-stiloj.

Unufoje vi atingas CSS, la stilojn, kiujn vi skribas por celigi ĉi tiun logo-grafikon, povus inkluzivigi sizing la bildon, inkluzive de respondemaj stiloj por plur-aparataj amikaj bildoj kaj ankaŭ iujn bildojn, kiujn vi ŝatas aldoni al la bildo / ligilo, kiel limoj aŭ CSS faligi ombrojn. Vi ankaŭ povus doni vian bildon aŭ ligi klasan atributon, se vi bezonas kromajn "hokojn" por uzi kun viaj CSS-stiloj.

Uzu Kazojn por bildaj ligoj

Do aldoni bildan ligilon estas sufiĉe facila. Kiel ni nur vidis, ĉio, kion vi devas fari, envolvu la bildon per la taŭga ankro-etikedoj. Via sekva demando povus esti "kiam vi efektive efektive faros tion krom la menciita logoo / hejmpaĝo-ligilo ekzemplo?"

Jen kelkaj pensoj:

Rememorilo Uzinte Bildojn

Bildoj povas ludi gravan rolon en la sukceso de retejo. Unu el la ekzemploj menciitaj antaŭe uzas bildojn kune kun alia enhavo por nomi atenton pri tiu enhavo kaj akiri homojn por legi ĝin.

Kiam vi uzas bildojn, vi devas memori elekti la ĝustan bildon por viaj bezonoj , ĉi tio inkluzivas la ĝustan bildan temon, formaton, kaj ankaŭ certigante, ke iuj bildoj, kiujn vi uzas en via retejo, estas bone optimumigitaj por retpaĝado . Ĉi tio eble ŝajnas multe da laboro nur por aldoni bildojn, sed la rekompenco valoras ĝin! Bildoj vere povas aldoni tiom al la sukceso de la retejo.

Ne hezitu uzi taŭgajn bildojn en via retejo kaj ligi tiujn bildojn kiam necese aldonu iomete interagie al via enhavo, sed ankaŭ memoru ĉi tiujn bildajn plej bonajn praktikojn kaj uzu ĉi tiujn grafikojn / ligojn korekte kaj kompreneble en via retejo.