Kiungo kwa picha ya html. Jinsi ya kufanya picha kuwa kiungo katika HTML, VKontakte, kwenye jukwaa na kutumia CSS. Faili kwenye folda nyingine

Halo, wasomaji wapenzi wa tovuti ya blogi! Kama unavyojua, ili kukuza tovuti kwa mafanikio na kuongeza nafasi yake katika matokeo ya utaftaji, inahitajika kutekeleza uboreshaji wa ubora wa SEO wa wavuti. Wazo la "", ambalo, kwa upande wake, limegawanywa ndani na nje, linaunganishwa bila usawa na dhana kama "viungo vya tovuti vya ndani na nje". Kwa hiyo, ni muhimu sana kwetu kujua jinsi viungo vingi vinapaswa kuwa kwenye tovuti, jinsi ya kuangalia idadi yao, jinsi ya kuondoa viungo visivyohitajika kutoka kwenye tovuti na kuzizuia kutoka kwa indexing, jinsi ya kuongeza misa ya kiungo, nk. Ili kujibu maswali haya yote na mengine kuhusu viungo vya ndani na nje, hebu kwanza tuelewe kiungo (au hyperlink) ni nini katika HTML.

Katika makala hii nitakuambia ni nini kiungo, jinsi ya kufanya hyperlink katika HTML kwenye tovuti, jinsi ya kufungua kiungo kwenye dirisha jipya, jinsi ya kuunda kiungo kwa barua pepe (barua pepe) na jinsi ya kufanya hivyo. tengeneza kiunga cha picha. Pia tutagusa dhana kama vile tagi za html na sifa za kiungo, nanga ya kiungo, nanga ya html na viungo vya hashi. Kwa hiyo, hebu tuanze.

Kiungo ni nini (hyperlink).

Ikiwa hyperlink inaongoza kwenye ukurasa wa wavuti au faili ambayo haipo (iliyofutwa, imehamishwa) au anwani yake si sahihi, basi kiungo hicho kinaitwa kiungo kilichovunjika. Haipaswi kuwa na viungo vilivyovunjika kwenye wavuti, kwani huwapotosha wageni na, baada ya kubofya kiungo kama hicho, mtu hawezi kurudi kwenye tovuti yako. Tutazungumzia zaidi kwa nini viungo vilivyovunjika vinaonekana, jinsi ya kupata na kurekebisha, katika makala tofauti. Sasa tuendelee.

Jinsi ya kutengeneza kiunga (hyperlink) katika HTML kwenye wavuti.

Ni rahisi sana kuunganisha kwa ukurasa mwingine kwenye tovuti yako au nyingine. Ili kuunda hyperlink, unahitaji kuwaambia kivinjari ni kiungo gani na uonyeshe anwani ya hati ambayo itaongoza. Hii inafanywa kwa kutumia lebo ya HTML na sifa ya href inayohitajika:

Hapa, URL ni anwani ya hati ya kwenda. Na maandishi ya kiungo kilichoko kati ya vitambulisho Na, inaitwa nanga ya kiungo na inaonekana kwa mgeni wa ukurasa wa wavuti. Kwa kuongezea ukweli kwamba maandishi ya kiunga (nanga) hufahamisha msomaji ambapo mpito utafanywa, pia ni muhimu sana katika uboreshaji wa injini ya utaftaji (SEO), kwani hutumika kama moja ya sababu za kuamua zinazoathiri kiwango cha tovuti yako. kwa maneno muhimu yaliyo katika nanga hii. Kwa kawaida aina hii ya cheo inaitwa cheo cha kiungo.

Kiungo kabisa

Zinatumika kuashiria hati kwenye tovuti nyingine (kiungo ni cha nje).

Pia inawezekana kufanya viungo kamili ndani ya tovuti moja, lakini ni sahihi zaidi kutumia anwani za jamaa, ambazo zinaonekana fupi, ili kuunda viungo vya ndani. Lakini, wakati wa kuchambua tovuti mbalimbali, niliona kwamba idadi kubwa ya wasimamizi wa wavuti hufanya viungo vya ndani na anwani kamili. Hii ina faida yake, kwa sababu ikiwa ukurasa wako unakiliwa, basi kwa njia hii utapokea backlink za kazi.

Kama unaweza kuona, na viungo kabisa kila kitu ni rahisi. Ni ngumu zaidi na jamaa, kwa sababu wakati wa kuziunda, unahitaji kuelewa ni thamani gani ya sifa ya href inapaswa kutajwa, kwani inategemea eneo la asili la hati. Kama nilivyosema tayari, hakuna mtu anayejisumbua na hii na hufanya viungo vyote kwenye tovuti kuwa kamili. Hata hivyo, ikiwa una nia ya kujifunza zaidi kuhusu jinsi ya kuunda kwa usahihi viungo vya jamaa kwa tovuti, naweza kupendekeza makala ya Dmitry, mwandishi wa blog ktonanovenkogo.ru. Sijawahi kuona maelezo ya kina na kueleweka zaidi.

Kwa mfano, nitakuonyesha jinsi kiungo kinachoongoza kwa faili inayohusiana na mzizi wa tovuti kitakavyoonekana (tunakata kila kitu upande wa kushoto wa kufyeka kwa tatu kwa kiungo sawa kabisa):

Kiungo jamaa

Kwa kuu

Unganisha maandishi (nanga)

Rangi na muundo wa maandishi ya pop-up hutegemea tu mfumo wa uendeshaji na mipangilio ya kivinjari.

Jinsi ya kufungua kiungo kwenye dirisha jipya.

Kwa chaguo-msingi, unapobofya kiungo, hati mpya itafunguliwa kwenye dirisha la sasa. Walakini, wakati wa kuvinjari tovuti, hii sio rahisi kwangu kibinafsi. Wakati wa kusoma makala na kufuata kiungo, ni rahisi kwangu kwamba ukurasa unafungua kwenye dirisha jipya na ninaweza kuendelea kusoma makala iliyopita wakati wowote. Sababu nyingine ya kufungua kiungo kwenye dirisha jipya ni kwamba unapoenda kwenye tovuti ya mtu mwingine, kuna uwezekano mkubwa kwamba msomaji hatarudi tena. Hasa ikiwa anafanya mabadiliko kadhaa na hakumbuki tu alikuwa wapi dakika chache zilizopita.

Sifa inayolengwa ya lebo itatusaidia kufungua kiungo katika dirisha jipya . Kwa chaguo-msingi ina thamani _self , ambayo kwa kawaida haijabainishwa. Ili kufungua hati katika dirisha jipya, badilisha thamani ya sifa inayolengwa kuwa _blank :

1 Dirisha jipya

Dirisha jipya

Unapaswa kufanya nini ikiwa, unapotembelea tovuti ya mtu mwingine, ambapo viungo vinafunguliwa kwenye dirisha la sasa, unataka kuifungua katika jipya? Unahitaji tu kubofya sio kwa kifungo, lakini kwa gurudumu la panya. Katika kesi hii, ukurasa mpya utafungua kwenye dirisha jipya.

Jinsi ya kutengeneza kiunga cha barua pepe (barua pepe).

Unapobofya kiungo hiki, programu yako chaguomsingi ya barua pepe itafunguliwa, huku sehemu ya "Kwa" ikiwa tayari imejazwa. Ili somo la barua lijazwe kiotomatiki, unahitaji kufanya kiunga cha barua pepe ya aina hii:

Dmitry KtoNaNovenkogo anashauri njia nyingine ya kuweka alamisho katika maandishi ya ukurasa wa wavuti, bila kutumia nanga za html. Ili kufanya hivyo, tunafanya alamisho kutoka kwa lebo yoyote ya HTML inayopatikana kwenye ukurasa, tukiipa sifa ya kitambulisho cha ulimwengu wote. Kwa mfano, wacha tualamishe lebo ya kichwa cha h3:

Maandishi ya kichwa

Ni muhimu kujumuisha herufi ya Kilatini katika sifa ya kitambulisho kama herufi ya kwanza ya jina la nanga, kisha unaweza kutumia herufi zingine zozote zinazoruhusiwa.

Hebu, kwa mfano, turudi kwenye kichwa ““, kisha tuendelee.

Unaweza kutumia viungo vya hashi kwenda kwenye eneo linalohitajika sio tu ndani ya ukurasa mmoja, lakini pia kwenda kwenye ukurasa mwingine kwenye tovuti. Ili kufanya hivyo, tunaweka nanga ya html mahali pazuri kwenye ukurasa wa kulia, na katika kiungo cha hashi yenyewe tunaandika anwani ya ukurasa huu kabla ya ishara ya hashi. Kwa mfano:

Unganisha maandishi kwa alamisho ya nanga ya html

Aina na rangi za viungo katika HTML.
  • Kiungo ambacho hakijatembelewa ni cha buluu na kimepigiwa mstari.
  • Kiungo kinachotumika - huwa nyekundu wakati kati ya kubofya kwa kipanya kwenye kiungo na mwanzo wa kupakia ukurasa mpya. Ni wazi kuwa yuko katika hali hii kwa muda mfupi tu.
  • Kiungo kilichotembelewa - hubadilisha rangi yake hadi zambarau baada ya kubofya.

Unaweza kubadilisha rangi ya viungo kwenye hati ya HTML kwa kutumia tepe na sifa zake zifuatazo:

  • Kiungo - rangi ya viungo ambavyo havijatembelewa.
  • Kiungo - rangi ya kiungo kinachotumika.
  • Vlink - rangi ya viungo vilivyotembelewa.

Sifa zote hapo juu zinaweza kuunganishwa:

1

Natumaini sasa ni wazi jinsi ya kuunda kiungo kwenye ukurasa wa HTML na kwa barua pepe, jinsi ya kufanya picha kuwa kiungo, ni nanga gani za maandishi, viungo vya hashi na nanga za html, ni vitambulisho gani vya html na sifa za kiungo. Nilijaribu, kadiri nilivyoweza, kusema kwa undani ni viungo gani katika HTML na ni nini. Acha nikukumbushe kwamba kuingiza viungo kwenye maandishi hufanywa tu katika hali ya HTML.

Sijawahi kuandika nakala ndefu kama hizi hapo awali, zaidi ya herufi 10,000. Lakini huu sio mwisho wa mada ya viungo, kuendelea.

Ikiwa nakala hii ilikuwa muhimu kwako, tafadhali bofya kwenye vifungo vya mitandao ya kijamii hapa chini. Tuonane tena kwenye kurasa!

Wacha tuzungumze juu ya swali rahisi, lakini wakati huo huo maarufu. Jinsi ya kufanya picha kuwa kiungo? Inatokea kwamba kuna haja ya kuongeza kiungo kwenye muundo wa tovuti, kwa rasilimali fulani, si kwa namna ya kiungo cha maandishi, lakini kwa namna ya picha. Ambayo ni mantiki kabisa, kwani kiungo katika mfumo wa picha kinaonekana kuvutia zaidi kuliko kiungo rahisi cha maandishi. Na, zaidi ya hayo, inaonekana kwa mgeni bora zaidi.

Swali ni rahisi sana, lakini sio kila mtu anayeweza kulitatua. Kama mfano, ninapendekeza kuchukua picha yoyote kwenye Mtandao na kuibadilisha kuwa kiungo cha rasilimali. Kwa mfano, nitaongeza kiungo kwenye mtandao wa kijamii wa VKontakte kwa makala hii. Na kuunda muonekano wa kiunga, nitatumia nembo ya VKontakte.

Kwa hiyo, ili kutekeleza mpango wako, unahitaji kupata au kuchora picha, ambayo baadaye itakuwa kiungo. Na ujue jinsi ya kuonyesha picha kwa kutumia html. Na pia jinsi ya kufanya picha kuwa kiungo, kikamilifu kubofya na kufanya kazi.

HTML - msimbo wa picha.

Ili kuonyesha picha katika msimbo wa HTML, unaweza kutumia lebo ya img iliyokusudiwa kwa hili. Kulingana na sintaksia ya msimbo wetu, matokeo ya picha yanaweza kuonekana tofauti. Kwa mfano, unapotumia syntax ya HTML, msimbo ungeonekana kama hii:

Na wakati wa kutumia syntax ya XHTML - kama hii:

Maelezo zaidi kuhusu sintaksia yanaweza kupatikana katika makala kuhusu DOCTYPE.

Zaidi kidogo juu ya nambari:

src="URL" - Badala ya URL, unahitaji kuingiza njia ya picha ambayo tutabadilisha kuwa kiungo.

alt = "maandishi mbadala" - nia ya kuonyesha maelezo ya maandishi kuhusu picha wakati kuonyesha picha imezimwa kwenye kivinjari.

Kwa kuongeza, lebo ya img ina sifa zingine. Ya kuu:

urefu - urefu wa picha

upana - upana wa picha

Hizi ni baadhi tu ya sifa zinazotumika kwa picha. Lakini katika hatua hii tunayo ya kutosha. Sifa hizi zote zinaweza kupewa katika msimbo wa html na katika mitindo ya css.

HTML - msimbo wa kiungo.

Maelezo ya kanuni:

Lebo pia ina sifa zingine, lakini kwa hatua hii tunaweza kupendezwa na chache tu kati yao:

lengo - iliyoundwa ili kuamua ni dirisha gani la kivinjari hati itafunguliwa kwa kutumia kiungo cha sasa. Kwa mfano, hati itafungua kwenye dirisha la sasa (chaguo-msingi) au kwenye dirisha jipya.

Kwa hiyo, sasa tunajua kwamba picha ni kiungo na ina sehemu mbili za kanuni. Kinachobaki ni kuzichanganya pamoja. Kama nilivyosema hapo juu, nitatumia nembo ya mtandao wa kijamii wa VKontakte kuonyesha picha na kuweka kiunga cha kikundi changu, ambacho, kwa kutumia sifa inayolengwa, nitaweka kiunga cha kufungua kwenye dirisha jipya.

Kwanza, unahitaji kupakia picha kwenye seva tunayotumia au kunakili kiungo kwenye picha kwenye mtandao. Ninapendelea kutumia seva yangu mwenyewe kuonyesha picha.

Ningependa kuweka nafasi mara moja kwamba nilipakia picha kwenye maktaba ya wordpress, yaani, kwa faili za midia. Kwa kuwa nitaongeza tu kiunga cha picha kwenye kifungu. Lakini wakati wa kuunda tovuti na kuongeza vipengele mbalimbali kwenye tovuti, ni sahihi zaidi kupakia picha kwa kutumia mteja wa FTP kwenye folda iliyokusudiwa kwa hili. Katika WordPress, folda mara nyingi iko kwenye folda ya mandhari na inaitwa picha au img.

Hivi ndivyo itakavyoonekana:

Kama tunaweza kuona, iligeuka, kuiweka kwa upole, sio vizuri sana. Sifa za img zitatusaidia kuboresha mwonekano na eneo. Pia niliongeza aya ambayo niliipa sifa ya upatanishi wa maandishi katikati. Hii ina maana kwamba maandishi na vipengele vingine ambavyo viko kati ya lebo za p vitapangwa.

Zaidi kidogo juu ya lebo ya p:

Imeundwa ili kufafanua aya ya maandishi. Ina vitambulisho vya kufungua na kufunga.

mtindo - Sifa hufafanua mitindo ya kipengele kwa kutumia sheria za CSS.

maandishi-align: katikati; - Sheria ya CSS. Inafafanua upatanishi mlalo wa kipengele (lebo ya p na vipengele vyote ndani). Katika kesi hii, kipengele kinaunganishwa katikati.

Kwa hivyo, tumepanga picha. Lakini bado haijawa kiungo.

Hiyo ni kimsingi yote. Kwa mtazamo wa kwanza inaweza kuonekana kuwa ngumu kidogo. Lakini kwa kweli kila kitu ni rahisi, jambo kuu ni kusoma kwa uangalifu kila kitu kilichoandikwa. Na kwa kweli, hakika unapaswa kujaribu kufanya kiunga na picha mwenyewe. Mazoezi bora hukusaidia kuelewa kila kitu ambacho hakieleweki katika nadharia, na pia hukusaidia kukumbuka vyema zaidi kile kinachohitajika kufanywa.

Viungo viligunduliwa ili kuunganisha hati kwenye mtandao na kila mmoja, na ikiwa tovuti yako ina kurasa kadhaa badala ya moja, basi unaweza kuziunganisha pamoja tu kwa kuunda viungo. Wacha tuone moja kwa moja na mfano jinsi hii inaonekana.

Kuunda kiungo rahisi








Nenda kwenye ukurasa mwingine


Kila kitu ni rahisi hapa, ili kuunda kiungo tunatumia lebo ambapo href=”” ni anwani ya ukurasa ambao mpito utafanywa, kwa upande wetu ukurasa huu uko katika saraka sawa. Unaweza pia kuingiza hapa anwani kama href="http://site.ru/page.html" au inaweza kuwa kiungo cha hifadhi ambayo iko katika folda nyingine kwenye tovuti yako href="arj/arhiv.zip" au kwa hati nyingine yoyote, ambayo kwa kweli haileti tofauti. Pia, sifa ya lazima ya hyperlink yoyote ni kichwa, hii ni maelezo ya kiungo, hii ni kipengele muhimu sana katika uboreshaji wa injini ya utafutaji na hapa unaandika maneno muhimu ya ukurasa au hati unayounganisha. Maandishi ambayo iko kati ya tag inaitwa nanga, na pia ni muhimu sana.

Kufungua kiungo katika ukurasa mpya

Kuna sifa nyingine ya kuvutia ambayo inaweza kuwa na manufaa kwako: