Kaip paveikslėlį paversti hipersaitu. Kas yra vaizdo nuoroda? Kaip padaryti paveikslėlį nuoroda į VKontakte

Sveiki, mieli tinklaraščio svetainės skaitytojai! Kaip žinia, norint sėkmingai reklamuoti svetainę ir padidinti jos pozicijas paieškos rezultatuose, būtina atlikti kokybišką svetainės SEO optimizavimą. Sąvoka „“, kuri savo ruožtu skirstoma į vidines ir išorines, yra neatsiejamai susijusi su tokiomis sąvokomis kaip „vidinės ir išorinės svetainės nuorodos“. Todėl mums labai svarbu žinoti, kiek nuorodų turi būti svetainėje, kaip patikrinti jų skaičių, kaip pašalinti iš svetainės nereikalingas nuorodas ir užblokuoti jų indeksavimą, kaip padidinti nuorodų masę ir pan. Norėdami atsakyti į visus šiuos ir kitus klausimus, susijusius su vidinėmis ir išorinėmis nuorodomis, pirmiausia išsiaiškinkime, kas yra nuoroda (arba hipersaitas) HTML.

Šiame straipsnyje papasakosiu, kas yra nuoroda, kaip svetainėje sukurti hipersaitą HTML, kaip atidaryti nuorodą naujame lange, kaip sukurti nuorodą į el. pašto adresą (el. paštą) ir kaip padaryti nuorodą į nuotrauką. Taip pat paliesime tokias sąvokas kaip html žymės ir hipersaitų atributai, nuorodų inkaras, html inkaras ir maišos nuorodos. Taigi, pradėkime.

Kas yra nuoroda (hipersaitas).

Jei hipersaitas nukreipia į tinklalapį ar failą, kurio nėra (ištrintas, perkeltas) arba jo adresas yra neteisingas, tokia nuoroda vadinama neveikiančia nuoroda. Svetainėje neturėtų būti neveikiančių nuorodų, nes jos klaidina lankytojus ir, paspaudęs tokią nuorodą, žmogus greičiausiai negrįš į jūsų svetainę. Apie tai, kodėl atsiranda neveikiančios nuorodos, kaip jas rasti ir ištaisyti, plačiau pakalbėsime atskirame straipsnyje. Dabar tęskime.

Kaip svetainėje sukurti nuorodą (hipersaitą) HTML.

Labai lengva susieti nuorodą į kitą savo ar kitos svetainės puslapį. Norėdami sukurti hipersaitą, turite pasakyti naršyklei, kas yra nuoroda, ir nurodyti dokumento, į kurį ji nuves, adresą. Tai atliekama naudojant HTML žymą ir būtinas href atributas:

Čia URL yra dokumento, į kurį reikia eiti, adresas. Ir hipersaito tekstas, esantis tarp žymų Ir, vadinamas nuorodų inkaru ir yra matomas tinklalapio lankytojui. Be to, kad nuorodos tekstas (inkaras) informuoja skaitytoją, kur bus atliktas perėjimas, jis taip pat labai svarbus optimizuojant paieškos sistemoms (SEO), nes yra vienas iš lemiančių veiksnių, turinčių įtakos jūsų svetainės reitingui. šiame inkare esantiems raktiniams žodžiams. Paprastai tokio tipo reitingavimas vadinamas nuorodų reitingavimu.

Absoliuti nuoroda

Jie naudojami nukreipti į dokumentą kitoje svetainėje (nuoroda yra išorinė).

Taip pat galima sukurti absoliučias nuorodas vienoje svetainėje, tačiau vidinėms nuorodoms sukurti teisingiau naudoti santykinius adresus, kurie atrodo trumpesni. Tačiau analizuodamas įvairias svetaines pastebėjau, kad didžioji dauguma žiniatinklio valdytojų vidines nuorodas kuria absoliučiais adresais. Tai turi savo pranašumą, nes jei jūsų puslapis yra nukopijuotas, tokiu būdu gausite veikiančias atgalines nuorodas.

Kaip matote, su absoliučiomis nuorodomis viskas paprasta. Su santykiniais yra sunkiau, nes juos kuriant reikia suprasti, kokią href atributo reikšmę reikia nurodyti, nes tai priklauso nuo pirminės dokumentų vietos. Kaip jau sakiau, niekas tuo nesijaudina ir visas svetainėje esančias nuorodas absoliutina. Tačiau jei norite sužinoti daugiau apie tai, kaip teisingai sukurti santykines nuorodas svetainėje, galiu rekomenduoti tinklaraščio ktonanovenkogo.ru autoriaus Dmitrijaus straipsnį. Niekada nemačiau išsamesnio ir suprantamesnio paaiškinimo.

Pavyzdžiui, parodysiu, kaip atrodys nuoroda, vedanti į failą, susijusį su svetainės šaknimis (paprasčiausiai nupjauname viską, kas yra kairėje nuo trečiojo pasvirojo brūkšnio panašioje absoliučioje nuorodoje):

Santykinė nuoroda

Į pagrindinį

Nuorodos tekstas (prierašas)

Iššokančio teksto spalvos ir dizainas priklauso tik nuo operacinės sistemos ir naršyklės nustatymų.

Kaip atidaryti nuorodą naujame lange.

Pagal numatytuosius nustatymus, kai spustelėsite nuorodą, dabartiniame lange bus atidarytas naujas dokumentas. Tačiau naršant interneto svetainėse man asmeniškai tai nėra patogu. Skaitant straipsnį ir sekant nuorodą man patogu, kad puslapis atsidaro naujame lange ir bet kada galiu tęsti ankstesnio straipsnio skaitymą. Kita priežastis atidaryti nuorodą naujame lange yra ta, kad, kai einate į kieno nors kito svetainę, yra didelė tikimybė, kad skaitytojas nebegrįš. Ypač jei jis atlieka keletą perėjimų ir tiesiog neprisimena, kur buvo prieš kelias minutes.

Tikslinis žymos atributas padės atidaryti nuorodą naujame lange . Pagal numatytuosius nustatymus jis turi reikšmę _self , kuri paprastai nenurodoma. Norėdami atidaryti dokumentą naujame lange, pakeiskite tikslinio atributo reikšmę į _blank :

1 Naujas langas

Naujas langas

Ką daryti, jei lankantis kieno nors kito svetainėje, kur nuorodos atsidaro dabartiniame lange, norite jas atidaryti naujame? Tereikia jas spustelėti ne mygtuku, o pelės ratuku. Tokiu atveju naujas puslapis atsidarys naujame lange.

Kaip sukurti nuorodą į el. laišką (el. pašto adresą).

Kai spustelėsite šią nuorodą, atsidarys numatytoji el. pašto programa, kurios laukas „Kam“ jau užpildytas. Kad laiško tema būtų užpildyta automatiškai, reikia padaryti nuorodą į tokio tipo el.

Dmitrijus KtoNaNovenkogo pataria kitą būdą, kaip tinklalapio tekste nustatyti žymes, nenaudojant html inkarų. Norėdami tai padaryti, iš bet kurios puslapyje esančios HTML žymos sukuriame žymę, priskirdami jai universalų id atributą. Pavyzdžiui, pažymėkime h3 pavadinimo žymą:

Pavadinimo tekstas

Svarbu įtraukti lotynišką raidę į id atributą kaip pirmąjį inkaro pavadinimo simbolį, tada galite naudoti bet kokius kitus leidžiamus simbolius.

Pavyzdžiui, grįžkime prie antraštės „ “ ir tęskime.

Maišos nuorodas galite naudoti norėdami patekti į norimą vietą ne tik viename puslapyje, bet ir į kitą svetainės puslapį. Norėdami tai padaryti, mes nustatome html inkarą tinkamoje tinkamo puslapio vietoje, o pačioje maišos nuorodoje prieš maišos simbolį įrašome šio puslapio adresą. Pavyzdžiui:

Susieti tekstą su html inkaro žyme

HTML hipersaitų tipai ir spalvos.
  • Nelankyta nuoroda yra mėlyna ir pabraukta.
  • Aktyvi nuoroda – tampa raudona per laikotarpį nuo pelės paspaudimo ant nuorodos iki naujo puslapio įkėlimo pradžios. Akivaizdu, kad ji tokioje būsenoje yra tik trumpą laiką.
  • Lankyta nuoroda – paspaudus pakeičia jos spalvą į violetinę.

Galite pakeisti hipersaitų spalvą HTML dokumente naudodami žymą ir jos atributus:

  • Nuoroda – nelankytų nuorodų spalva.
  • Alink – aktyvios nuorodos spalva.
  • Vlink – lankomų nuorodų spalva.

Visi aukščiau išvardyti atributai gali būti derinami:

1

Tikiuosi, dabar aišku, kaip sukurti hipersaitą HTML puslapyje ir į el. laišką, kaip paveikslėlį paversti nuoroda, kas yra teksto inkarai, maišos nuorodos ir html inkarai, kas yra html žymos ir nuorodų atributai. Stengiausi, kiek galėjau, išsamiai nupasakoti, kas yra nuorodos HTML ir kas jos yra. Leiskite jums priminti, kad hipersaitų įterpimas į tekstą atliekamas tik HTML režimu.

Dar niekada nebuvau rašęs tokių ilgų straipsnių, daugiau nei 10 000 simbolių. Bet tai dar ne nuorodų temos pabaiga, ją reikia tęsti.

Jei šis straipsnis jums buvo naudingas, spustelėkite toliau esančius socialinės žiniasklaidos mygtukus. Iki pasimatymo puslapiuose!

Išleidome naują knygą Socialinės medijos turinio rinkodara: kaip patekti į savo sekėjų galvas ir priversti juos įsimylėti savo prekės ženklą.

Tai reklaminė juosta dešinėje nuo kelio. Spalvingas vaizdas gali nusiųsti vairuotoją į pasaulį, kurį jis reklamuoja. Jei, žinoma, keliautojas nori ten vykti – tai yra, jis eina reklamjuoste nurodytu adresu.

Nuorodų tipai svetainėje

Kaip jau minėjome, nuorodos svetainėje gali būti kitokios. Du pagrindiniai nuorodų tipai yra prieraišo tekstas, ne prieraišo tekstas ir vaizdo nuorodos. Teksto nuorodos yra svarbios reklamai, nes padidina paieškos užklausų svarbą prieraišų sąraše. Vaizdo nuorodos taip pat perteikia svorį, tačiau dažniau jos naudojamos siekiant pagerinti svetainės patogumą.

Pavyzdžiui, skiltyje „nuotraukų galerija“ vartotojų patogumui logiška sukurti paveikslėlių nuorodas. Paspaudus nuotraukos piktogramą, atsidaro naujas didelis langas, kuriame žmogus gali pilnai peržiūrėti vaizdą dideliu formatu. Arba, pavyzdžiui, vairavimo žemėlapio vaizdas taip pat gali būti padidintas, jei vartotojas pageidauja. Jei jūsų tekste yra brėžinių ir grafikos, logiška pateikti nuorodą, kad galėtumėte atsisiųsti viso dydžio vaizdą.

Vaizdas gali nukreipti į kitą svetainės puslapį. Tai gali būti kelias iš reklaminės juostos, meniu elemento ir pan.

Primename, kad nepatartina savo svetainėje meniu tvarkyti paveikslėlių pavidalu – tai nepatogu tiek jums, tiek paieškos sistemai. Patartina naudoti tekstą.

Kaip įterpti nuorodą į paveikslėlį

Daugumoje TVS yra integruoti redaktoriai, leidžiantys dirbti įkeliant vaizdus ir nustatant iš jų nuorodas.

  • Vaizdo rengyklėje paprastai galite tiesiog pasirinkti paveikslėlį, spustelėti mygtuką „įterpti nuorodą“ ir nurodyti norimą URL.
  • Jei į paveikslėlį įterpiate nuorodą kaip HTML kodą, naudokite šią rašybą:



Žyma reiškia sekti nuorodą, a nurodo kelią į vaizdą, iš kurio kažkur siunčiate vartotoją. Tai yra, iš pradžių turite įkelti jį į savo serverį.

Papildomos instrukcijos:

  • aukštis, plotis - nurodykite vaizdo dydį;
  • kraštinė - dirbame su apvadu (rėmu);
  • alt - alternatyvus tekstas lankytojui, kurio vaizdas nebuvo rodomas.

Galite pridėti šešėlį prie vaizdo, pakeisti skaidrumą užvedus pelės žymeklį, pakeisti spalvą, suapvalinti kampus – visa tai įmanoma naudojant CSS priemones.

Jei kaip nuorodą padarote nuotrauką iš kitos svetainės

Šiuo tikslu galite naudoti vaizdą iš kito šaltinio reikia įklijuoti visą jos kelią.

Jei norite įdėti vaizdą į savo svetainę jo neatsisiųsdami, ty ištraukdami jį iš kitos svetainės:

  • Atminkite, kad naudoti kitų žmonių atvaizdus nepatartina ir apskritai neįmanoma, nes kiekviena grafinė medžiaga turi savo autorių.
  • Savo svetainėje rodydami vaizdą, įkeltą iš kito šaltinio, dalį savo svetainės pasitikėjimo perkeliate trečiosios šalies šaltiniui ir, be to, mokate už ilgesnį puslapio įkėlimo laiką.

Visa tai blogina svetainės reklamavimo rezultatus.

Nuorodų-nuotraukų talpinimo svetainėje taisyklės
  • Nuoroda tik iš jūsų vaizdų.
  • Naudokite unikalius vaizdus. Kaip ir tekstai, siekiant sėkmingos reklamos, vaizdai neturėtų kartotis internete.
  • Neįkelkite didelės nuotraukos. Vizualiai galite jį sumažinti naudodami žymos plotį ir aukštį , o vaizdas puslapyje bus mažas. Tačiau iš tikrųjų į puslapį kiekvieną kartą bus įkeliamas viso dydžio vaizdas, o tai padidins puslapio įkėlimo laiką ir turės neigiamos įtakos svetainės reklamai. Ir nukentės priverstinai suspausto vaizdo kokybė.
  • Parašykite kiekvienos nuotraukos aprašymą. Taip pat galite rašyti.
  • Nesijaudinkite naudodami tokias nuorodas. Vis dėlto teksto nuorodos vaidina svarbesnį vaidmenį reklamuojant šaltinį.

Nuorodos gali būti suskirstytos į dvi kategorijas:
nuorodos į išorinius išteklius – sukuriamos naudojant žymą ir naudojamos išplėsti esamo dokumento galimybes, kai jį apdoroja naršyklė;
hipersaitai – nuorodos į kitus išteklius, kuriuos vartotojas gali aplankyti arba atsisiųsti.

Kaip sukurti hipersaitus svetainėje 1. Nuorodų struktūra

Hipersaitai sukuriami naudojant suporuotą žymą. Tekstas, kuris bus rodomas tinklalapyje, yra įtrauktas į žymą. Nuorodos tekstas naršyklėje rodomas su pabraukimu, šrifto spalva yra mėlyna, o užvedus pelės žymeklį ant nuorodos keičiasi pelės žymeklio išvaizda.

Būtinas žymos parametras yra href atributas, nurodantis tinklalapio URL adresą.

nuorodų indeksas

Nuoroda susideda iš dviejų dalių – rodyklės ir adreso dalies. Nuorodos rodyklė yra teksto arba vaizdo dalis, kurią mato vartotojas. Nuorodos adreso dalis vartotojui nematoma; ji nurodo šaltinio, į kurį turite eiti, adresą.

Nuorodos adreso dalis susideda iš URL. URl (Uniform Resource Locator) – vienodas išteklių adresas. Kuriant adresus, norint atskirti žodžius, rekomenduojama naudoti brūkšnelį, o ne apatinį brūkšnį. Paprastai URL, kurio formatas yra toks:

Prieigos metodas: // serverio pavadinimas: prievadas / kelias

Prieigos metodas arba protokolas keičiasi duomenimis tarp darbo stočių skirtinguose tinkluose. Dažniausiai naudojami duomenų perdavimo protokolai:

failas leidžia nuskaityti failą iš vietinio disko:

Failas:/gallery/pictures/summer.html

http suteikia prieigą prie tinklalapio naudojant HTTP protokolą:

http://site.ru/

https yra specialus HTTP protokolo įgyvendinimas, kuris naudoja šifravimą (dažniausiai SSL arba TLS).

https://site.ru/

ftp pateikia užklausą FTP serveriui gauti failą:

Ftp://pgu/directory/library

mailto pradeda pašto sesiją su nurodyta paskirties vieta ir priegloba:

Mailto: [apsaugotas el. paštas]

Serverio pavadinimas apibūdina visą tinklo įrenginio pavadinimą, pavyzdžiui, site.ru. Jei serverio pavadinimas nenurodytas, tai nuoroda laikoma vietine, t.y. jis yra tame pačiame kompiuteryje kaip ir HTML dokumentas, kuriame yra nuoroda.

TCP prievado numeris, kuriame veikia žiniatinklio serveris. Tai skaičius, kuris turi būti nurodytas, jei metodas reikalauja prievado numerio (atskiri serveriai gali turėti savo skiriamąjį prievado numerį). Jei prievadas nenurodytas, numatytasis prievadas yra 80. Standartiniai prievadai yra:
21 - FTP
23 - Telnet
70 – Goferis
80 – HTTP

Kelyje yra aplanko, kuriame yra failas, pavadinimas.

2. Absoliutus ir santykinis kelias

Kai nuorodoje nurodomas tik failo pavadinimas, naršyklė daro prielaidą, kad failas yra tame pačiame aplanke kaip ir dokumentas, kuriame yra hipersaitas. Praktiškai svetainėse yra šimtai dokumentų, kurie dedami į atskirus aplankus, kad būtų lengviau juos tvarkyti. Norėdami sukurti nuorodą į failą, esantį už aplanko, kuriame yra dabartinis dokumentas, ribų, turite nurodyti failo vietą arba kelią. HTML palaiko dviejų tipų kelius: absoliutųjį ir santykinį.

Ryžiai. 1. Aplanko struktūros pavyzdys 2.1. Absoliutus kelias

Absoliutus kelias nurodo tikslią failo vietą visoje aplanko struktūroje kompiuteryje (serveryje). Absoliutus kelias į failą suteikia prieigą prie failo iš trečiųjų šalių išteklių ir apima šiuos komponentus:
1) protokolas, pavyzdžiui, http (neprivaloma);
2) domenas (domeno vardas arba kompiuterio IP adresas);
3) aplankas (aplanko pavadinimas, nurodantis kelią į failą);
4) failas (failo pavadinimas).

Yra dviejų tipų absoliutus kelio žymėjimas: su protokolo nuoroda ir be jo:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Jei failas yra šakniniame aplanke, kelias į failą bus toks:

http://site.ru/index.html

Jei failo pavadinimo nėra, bus įkeltas tinklalapis, kuris pagal numatytuosius nustatymus nustatytas žiniatinklio serverio nustatymuose (vadinamasis indekso failas).

http://site.ru/

Paprastai indekso failas yra dokumentas pavadinimu index.html. Jei yra pasvirasis brūkšnys /, tai reiškia, kad prieiga eina į aplanką; jei jo ten nėra, ji nukreipiama tiesiai į failą.

2.2. Santykinis kelias

Santykinis kelias apibūdina kelią iki nurodyto dokumento, palyginti su dabartiniu. Kelias nustatomas pagal tinklalapio, kuriame yra nuoroda, vietą. Santykinės nuorodos naudojamos kuriant nuorodas į kitus dokumentus toje pačioje svetainėje. Kai naršyklė nuorodoje neranda http:// protokolo, ji ieško nurodyto dokumento tame pačiame serveryje.

Santykinį kelią sudaro šie komponentai:
1) aplankas (aplanko pavadinimas, nurodantis kelią į failą);
2) failas (failo pavadinimas).

Santykinių nuorodų kelias turi tris specialius žymėjimus:
/ nurodo šakninį katalogą ir sako pradėti nuo dokumento šakninio katalogo ir pereiti į kitą aplanką
./ nurodo dabartinį aplanką
../ pakilti vienu aplanku (katalogu)

Pagrindinis skirtumas tarp santykinio kelio ir absoliutaus kelio yra tas, kad santykiniame kelyje nėra šakninio ir pirminių aplankų pavadinimo, todėl adresas sutrumpėja, o jei pereinate iš vieno domeno į kitą, jums nereikia įveskite naują absoliutų adresą. Bet jei trečiosios šalies šaltinis susieja, pavyzdžiui, į jūsų vaizdus su santykiniais adresais, jie nebus rodomi kitoje svetainėje.

3. Inkarai

Prieraiščiai arba vidinės nuorodos sukuria perėjimus į skirtingas dabartinio tinklalapio dalis, leidžiančius greitai pereiti tarp skyrių. Tai pasirodo labai patogu, kai puslapyje yra per daug teksto. Vidinės nuorodos taip pat sukuriamos naudojant žymą su skirtumu, kad href atribute yra rodyklės pavadinimas – vadinamasis inkaras, o ne URL adresas. Prieš žymeklio pavadinimą visada rašomas # ženklas.

Pagrindinis HTML dokumento bruožas yra jame esantys hipersaitai (arba tiesiog nuorodos) į kitus dokumentus, svetaines, failus, paveikslėlius ir pan. Tai galimybė įterpti nuorodas į objektus už puslapio ribų, todėl internetas tapo toks populiarus. ir patogus naudoti. Todėl kurdami savo svetainę visada prisiminkite nuorodų „magiją“.

Šioje pamokoje kalbėsime apie tai, kaip sukurti nuorodą į svetainę, į atskirą jos puslapį ar failą. Sužinosite, kaip pakeisti nuorodos tekstą, kaip ją atidaryti naujame lange, kaip padaryti nuorodą į paveikslėlį, kas yra išorinės ir vidinės nuorodos ir daug daugiau. Be to, jau turite informacijos apie darbą su nuorodomis, kurią palietėme ankstesnėse pamokose (pavyzdžiui, kalbėjome apie tai, kaip galite pakeisti nuorodos spalvą).

Apskritai, ši pamoka padės suprasti nuorodų kūrimą visapusiškai ir pakankamai. Suprasite, kaip sukurti hipersaitą HTML ir kodėl. Ir jūs išmoksite valdyti jo savybes.



Sąlygos § 1. Nuoroda į failą, nuoroda į svetainę, nuoroda į puslapį

Daugybė klausimų apie tai, kuo nuoroda į failą skiriasi nuo nuorodos į svetainę arba atskirą jos puslapį, privertė mane atsakyti į jį pačioje šios pamokos pradžioje. Atsakymas yra: nieko. Visos išvardytos nuorodos yra išorinės nuo pradinio puslapio ir yra sukurtos tokiu pačiu būdu.

Kad mintys neapleistų, viską parodysiu pavyzdžiu.

Naršyklėje pamatysime tai:

Naršyklėje pamatysime tai:

Kaip matote, visų tipų nuorodos sukuriamos vienodai. Vienintelis skirtumas yra nurodomo objekto adresas. Dabar pereikime prie pagrindinės pamokos dalies.

§ 2. Išorinių nuorodų kūrimas

Nuorodos viena nuo kitos skiriasi į išorines ir vidines, taip pat tekstines ir grafines. Išorinės nuorodos veda už html puslapio ribų, vidinės nuorodos veda į skirtingas to paties puslapio dalis. Teksto nuorodos yra tekstas (pagal numatytuosius nustatymus jis yra paryškintas mėlynai ir pabrauktas), o grafinėse nuorodose yra paveikslėlis kaip objektas, kurį reikia spustelėti, kad pereitumėte. Visų šių tipų nuorodos sukuriamos HTML naudojant žymą (sutrumpinimas iš inkaro). Pažvelkime į tai atidžiau.

Norėdami sukurti išorinę nuorodą į svetainę, puslapį ar failą, naudokite atributą href žyma. Šio atributo reikšmė yra svetainės, puslapio arba failo URL (apie tai aptarėme aukščiau). Tarp žymų yra matoma nuorodos dalis (nuorodos inkaras), t. y. tai, ką matome naršyklės ekrane. Nuorodos inkaras gali būti paprastas tekstas (teksto nuoroda) arba grafinis vaizdas (vaizdo nuoroda). Vaizdo nuoroda sukuriama įterpiant žinomą žymą tarp ir žymų. Apskritai nuorodos kūrimo sintaksė atrodo taip:

Pavyzdžiui, norėdami sukurti tekstinę nuorodą į šios svetainės pagrindinį puslapį, turite parašyti šį HTML kodą:

http://www.seoded.ru/">Pagrindinis svetainės puslapis

Naršyklėje tai atrodys taip:

Kaip rašiau pačioje šios pamokos pradžioje, nuorodos teksto (inkaro) spalvą galima pakeisti naudojant . Apskritai nuorodų tekstui galite taikyti tas pačias taisykles kaip ir pagrindiniam puslapio tekstui, t.y., paryškinti jį pusjuodžiu šriftu, kursyvu, naudoti antraštes ir pan.

§ 2.1 Grafinės nuorodos (nuorodos į paveikslėlius)

Kaip sakiau aukščiau, norėdami sukurti vaizdo nuorodą, turite naudoti . Tokios nuorodos pavyzdys atrodo taip:

Ir naršyklė parodys:

Pagal numatytuosius nustatymus naršyklė apjuosia vaizdą grafine nuoroda su rėmeliu. Jei to nenorite, IMG žymos kraštinės atributas turi būti nustatytas į 0:

border="0">

Pagrindinis puslapis

§ 3. Vidinės nuorodos

Vidinės nuorodos naudojamos patogiai naršyti puslapiuose, kuriuose yra daug turinio. Su jų pagalba aš sukūriau „Pamokos turinį“ (žr. šio puslapio pradžioje). Vidinės nuorodos kuriamos tuo pačiu principu kaip ir išorinės. Tik atributo href reikšmė nurodo nuorodos „inkarą“. "Inkaras" sukuriamas pagal pavadinimo atributą:

name="inkaro pavadinimas">tekstas

Ir "inkaro" pavadinimas nustatomas savavališkai. Čia verta pasakyti, kad ne visos naršyklės supranta rusiškus „inkarų“ pavadinimus, todėl rekomenduoju naudoti lotynišką abėcėlę. Tekstas tarp žymų, norint sukurti „inkarą“, nėra būtinas ir dažniausiai nenurodomas.

„Aš esu tymai“ yra tose puslapio vietose, kur vartotojas turėtų eiti spustelėjęs nuorodą.

Kaip minėjau aukščiau, vidinės nuorodos href atribute vietoj adreso norimos „inkaro“ pavadinimas nurodomas su privalomu maišos simboliu (#) prieš jį. Pažvelkime į tai su pavyzdžiu.

Sukūriau „inkarą“ pavadinimu „zagolovok“ ir įdėjau jį į puslapio kodą šalia šios pamokos pavadinimo (hipersaitai HTML). Inkaro kodas yra toks:

name="zagolovok">

href="#zagolovok">Į pavadinimą

O naršyklėje taip:

Jei pastebėjote, kad spustelėję vidinę pavadinimo nuorodą, pasikeitė URL naršyklės adreso juostoje:


Pradiniu adresu:

http://www..html

http://www..html#zagolovok

Naudodami šią funkciją galite susieti su konkrečia puslapio vieta iš bet kurio interneto šaltinio! Tai yra, tarkime, kad sukūrėte puslapį su ilgu straipsniu apie kažką (arba paskelbėte daug nuotraukų) ir pažymėjote jį vidinėmis nuorodomis. Būdami , turėjote susieti ne tik su straipsniu (ar nuotraukomis), bet ir į konkrečią jo vietą (arba konkrečią nuotrauką). Naudodami parinktį su vidine nuoroda adresu, galite lengvai pasiekti tai, ko jums reikia.

§ 4. Absoliučios ir santykinės nuorodos

Pagrindinis puslapis

Tačiau su santykinėmis nuorodomis viskas yra šiek tiek sudėtingiau. Tokiose nuorodose adresas nurodomas svetainės šakninio aplanko (to, kuriame yra pagrindinis puslapis) arba šaltinio puslapio atžvilgiu. Tokios nuorodos reikalingos, pavyzdžiui, jei svetainė yra jūsų namų kompiuteryje. Arba tai ne svetainė, o puslapis, kuris yra nuoroda į kitus dokumentus.

Tarkime, kad turime susieti puslapį klienty.html, kuris yra tame pačiame aplanke kaip ir pagrindinis svetainės puslapis. Tada santykinis nuorodos kodas atrodys taip:

/klienty.html">Klientai

Tarkime, kad tame pačiame aplanke su pagrindiniu puslapiu yra aplankas zakazy ir jame jau yra klientas.html puslapis. Tada santykinis nuorodos kodas bus toks:

/zakazy/klienty.html">Klientai

Dabar pažiūrėkime, kaip sukurti hipersaitus, susijusius su šaltinio puslapiu. Tarkime, kad turime puslapį kaina.html (šaltinio puslapis) ir iš jo reikia susieti į puslapį klienty.html Yra tokios tipinės parinktys:

    1. Puslapiai kaina.html ir klientas.html yra tame pačiame aplanke.

    klienty.html">Klientai


    2. svetainės šakniniame aplanke kaina.html puslapis yra vienu lygiu aukščiau esančiame zakazy aplanke).

    Kodas atrodys taip:

    ../klienty.html">Klientai

    Du taškai rodo, kad reikia pereiti iš dabartinio aplanko į aukštesnį lygį.


    3. Klienty.html puslapis ir aplankas zakazy yra svetainės šakniniame aplanke, aplankas mebel yra aplanke zakazy, puslapis price.html yra aplanke mebel (t. y. klientas.html puslapis, susijęs su pradinis kaina.html puslapis yra dviem lygiais aukštesnis ).

    ../../klienty.html">Klientai

    Tai reiškia, kad kiekvienas lygis žymimas dviem taškais ir pasviruoju brūkšniu „/“.


    4. Svetainės šakniniame aplanke klientas.html puslapis yra aplanke zakazy (t. y. dabar klientas.html puslapis, palyginti su pradiniu Price.html puslapiu, yra vienu lygiu žemiau).

    zakazy/klienty.html">Klientai

    Šiuo atveju taškai ir brūkšniai nenaudojami.


    5. Puslapis price.html (originalus puslapis) ir aplankas zakazy yra svetainės šakniniame aplanke, aplankas mebel yra aplanke zakazy, puslapis klienty.html yra aplanke mebel (t. y. dabar klientas .html puslapis yra palyginti su pradine kaina.html puslapis yra dviem lygiais žemiau).

    zakazy/mebel/klienty.html">Klientai


    6. Svetainės šakniniame aplanke yra du aplankai: zakazy ir oplata. Klienty.html puslapis yra zakazy aplanke, originalus price.html puslapis yra aplanke oplata (ty abu puslapiai yra skirtinguose aplankuose vienu lygiu žemiau svetainės šakninio aplanko).

    ../zakazy/klienty.html">Klientai

§ 5. Nuoroda į el

Norėdami sukurti nuorodą į el. laišką, atributo href vertės URL turite pakeisti el. pašto adresu, nurodančiu protokolą (mailto:). Ir tada, kai paspausite tokią nuorodą, atsidarys el. pašto programos langas su laukelyje „Kam“ įvestu el. pašto adresu. HTML kode tai atrodo taip:

mailto: [apsaugotas el. paštas]">Mano paštas

O naršyklėje taip yra.

Šiandien vaizdus paversime nuorodomis, kurias galima spustelėti. Jūs žinote, kad internetas yra visiškai pagrįstas hipersaitais, kurie leidžia vienu pelės paspaudimu pereiti iš vieno puslapio į kitą. Šiuo atžvilgiu paveikslėlių kaip nuorodų naudojimas turi pranašumą prieš įprastas tekstines nuorodas, nes tai leidžia gražiai ir organiškai viską sutalpinti į svetainės dizainą.

Paveikslėliai dažnai naudojami kaip užsakymo mygtukai komerciniuose šaltiniuose, toks pat modelis naudojamas reklaminiuose baneriuose, ne kartą matėte kitų pavyzdžių internete.

Pakalbėsiu apie tai, kaip paveikslėlį paversti nuoroda naudojant tradicinį HTML kodą ir alternatyvų CSS variantą. Taip pat paliesime paveikslėlio pavertimą „VKontakte“ socialinio tinklo nuoroda (ten viskas nėra taip paprasta). O paskutinėje straipsnio dalyje pakalbėsiu apie forumus, kur jie dažnai naudoja ne HTML kodavimą, o vaizdus ir nuorodas ten įterpia kitaip.

Kaip padaryti paveikslėlį nuoroda į HTML

HTML naudoja paprastą mechanizmą nuorodoms generuoti. Yra speciali žyma, nurodanti nuorodą. Jo viduje esantys objektai yra nuorodos. Būtinas žymos atributas yra href parametras, nurodantis tikslinį puslapį, į kurį nukreips nuoroda.

Gautas nuorodos vaizdo įterpimo kodas atrodo taip:

Iš teksto aišku, kad kuda-vedet-ssylka yra nukreipimo puslapio adresas, o gde-lezhit-kartinka/kartinka.png yra kelias į vaizdo failą ir jo pavadinimas.

Norėdami pritaikyti tokį vaizdą, galite naudoti visas standartines html ir css funkcijas, kurios leidžia keisti dydį, vietą ir nurodyti visokius atributus.

Dėl žymės Dažnai naudojamas atributas target=”_blank”, kuris atidaro nuorodą naujame skirtuke.

Žyma dažnai yra alt = "alternatyvus tekstas, rodomas, jei vaizdas neįkeliamas", title = "vaizdo pavadinimas", aukštis = "aukštis pikseliais", plotis = "plotis pikseliais".

Gautas kodas gali būti maždaug toks (mano tinklaraščio logotipas, vedantis į mano tinklaraščio pagrindinį puslapį):

Ir štai kaip tai veikia:

Vaizdo nuoroda į CSS

Kalbant apie CSS, tai yra neatsiejama šiuolaikinės svetainės dalis. Stiliaus lapai padeda atsikratyti nereikalingo panašių kodo dalių kartojimosi, vieną kartą nurodant tam tikrų elementų ypatybes, o po to tik nurodant jų pavadinimus.

1. Sukurkite objekto klasę ir įrašykite ją į stiliaus lapą (style.css failą).

Bendras kodas atrodo taip:

#link-img ( ekranas: blokas; plotis: 323 pikseliai; aukštis: 232 pikseliai; fonas: url(https://gde-lezhit-kartinka/kartinka.png) nekartoti; )

Šiuo atveju link-img yra objekto klasė, plotis ir aukštis yra vaizdo dydis, fonas yra objekto fonas (vaizdą nustatome kaip foną).

id=”link-img” rodo, kad nuoroda nėra įprasta, o priklauso šiai klasei, dėl ko objektas paima šios klasės savybes (aukštis, plotis ir fonas). Atkreipkite dėmesį, kad atidarymo ir uždarymo žymos viduje tuščios. Nieko nenurodėme, nes viskas, ko reikia, jau yra klasės savybėse, o reikiamą vaizdą nurodo objekto fonas.

Kaip padaryti paveikslėlį nuoroda į VKontakte

Socialiniuose tinkluose nuorodų iš vaizdų kūrimo procedūra skiriasi nuo įprastų svetainių dėl to, kad jūs neturite prieigos prie šaltinio kodo ir negalime naudoti html žymų, todėl procedūra primena šokį su tamburinu.

Taigi, užburkime pridėti nuorodas į paveikslėlius (arba paveikslėlius prie nuorodų, kaip jums patinka) ant sienos arba pranešimuose „VKontakte“ grupėse.

1 veiksmas. Paveikslėlio paruošimas

VK galite spustelėti tik didelį vaizdą, mažiausias dydis yra 537 x 240 pikselių, bet kas mažesnis bus rodomas šalia nuorodos, bet nenuves į norimą puslapį.

Palaikomi formatai yra jpg, gif ir png.

2 veiksmas. Įklijuokite nuorodą į VK

Pridėjus nuorodą į pranešimų laukelį, socialinis tinklas automatiškai nuskaito duomenis iš svetainės ir parodo puslapio pavadinimą (apie tai minėjau straipsnyje), nedidelį aprašymą ir peržiūros vaizdą (jei toks yra).

3 veiksmas. Įdėkite vaizdą

Suprantama, kad automatiškai sugeneruotas nuorodos blokas „VKontakte“ netinka (vaizdo nėra, jis mažas arba jums nepatinka) - jį reikia pakeisti.

Norėdami tai padaryti, pasirinkite mygtuką „Pasirinkite iliustraciją“ (fotoaparatas).

Atsiras failo pasirinkimo langas, čia, beje, matysite vaizdų formato ir dydžio reikalavimus. Spustelėkite „Pasirinkti failą“ ir pasirinkite, ką paruošėte pirmame žingsnyje.

Pasirinkę galėsite šiek tiek pakoreguoti – nukirpti perteklių ir pasukti. Spustelėkite „Išsaugoti pakeitimus“.

Po to pasikeis skelbiamų naujienų formatas. Jei viską padarėte teisingai, vaizdas užims visą pranešimo plotį ir taps nuoroda. Spustelėkite „Pateikti“ ir mėgaukitės rezultatu.

Kaip padaryti nuotrauką nuoroda forume

Daugeliu atvejų, kuriant įrašus forumuose, naudojami vaizdiniai redaktoriai, per kuriuos vienu mygtuku galite įterpti vaizdą ir paversti jį nuoroda su kitu.

Bet jei tai neįmanoma, pradedami naudoti BB kodai - tai yra tipiškas forumo žymėjimas, funkciškai panašus į HTML (dauguma funkcijų yra panašios), tačiau turi skirtingą sintaksę.

Įdomu tai, kad visi šie BB kodai galiausiai išverčiami į HTML, nes naršyklės negali jų nuskaityti.

Vaizdas BB kode nurodomas taip:

Žinoma, visa tai daroma redaktoriaus tekstiniu režimu, o ne vaizdiniu. Tai visa paslaptis.

Vizualiniai redaktoriai

Naudojant įvairius grafinius svetainių ir puslapių dizainerius, viską, kas aprašyta aukščiau, įgyvendinti yra paprasčiau ir greičiau, tereikia spustelėti porą mygtukų. Tiek WordPress, tiek HTML redaktoriuose, tiek forumuose veikimo principas tas pats, ir mygtukai panašūs.

1. Įdėkite vaizdą naudodami šiuos mygtukus (forumo pavyzdys buvo aukščiau, čia aš rodau „WordPress“):

(7 balsai, vidurkis: 5 iš 5)