HTML-də hiperlink necə daxil edilir? HTML-də hiperlinklərin yaradılması və istifadəsi. Şəkili forumda HTML, VKontakte-də bir keçid etmək və CSS Şəkilindən hiperlink kimi istifadə etmək
Bu dərsdə biz danışacağıq html-də necə əlaqələndirmək olar. Bağlantılar veb saytlarda çox istifadə olunur, onlar saytın bir səhifəsindən digərinə keçməyə imkan verir. Bağlantıların bir xüsusiyyəti ondan ibarətdir ki, onlar təkcə veb səhifəyə deyil, həm də fayllara, şəkillərə və s.
Bağlantılar daxili və ya xarici ola bilər. Daxili keçidlər eyni saytdakı səhifələrə və fayllara gedir. Xarici bağlantılar üçüncü tərəfin saytlarına, sənədlərinə və fayllarına aparır. Eyni zamanda, bu tip bağlantılar praktiki olaraq eyni şəkildə qurulur.
HTML-də necə keçid etmək olar, nümunələr
1. HREF— linkin hara aparacağına görə məsuliyyət daşıyır. Standart keçid aşağıdakı kimi müəyyən edilir: Link mətni.
2. HƏDƏF— sənədin açılacağı pəncərəyə görə məsuliyyət daşıyır. Defolt yeni sənəd cari brauzer pəncərəsində açılır. "Hədəf" atributu linki yeni brauzer pəncərəsində açmağa imkan verir. Bu atribut aşağıdakı parametrlərə malikdir:
- _blank - səhifəni yeni pəncərədə yükləyir;
- _self - cari pəncərədə səhifəni yükləyir;
- _parent - səhifəni ana çərçivəyə yükləyir;
- _top - Bütün çərçivələri ləğv edir və səhifəni yeni pəncərədə yükləyir.
3. NAME- səhifə daxilində müəyyən sahəyə getmək üçün istifadə olunur. Funt işarəsindən sonra dırnaq içərisində açar söz (əlfəcin və ya etiket) gəlir. Bu etiketə getmək üçün bu etiketin yazıldığı linkdən istifadə edin.
Xarici keçid nümunəsi Veb saytına keçin
Veb saytına keçin
Pulsuz wordpress dərsləri
Nümunə 4: Şəkillər keçid kimi.
Link kimi nümunə şəkil
Bir səhifədə müəyyən bir yerə keçid nümunəsi Mətnə keçin
Səhifə mətni...
Bu nümunədə, səhifə "ad" atributundan istifadə edərək "siyahı" ilə etiketlənir. Bu etiketə keçid səhifənin müəyyən sahəsinə keçəcək.
Faylı yüklə
Məktub yaz
Parametrlər kimi "bədən" etiketində göstərilən atributlardan istifadə edərək bağlantıların rəngini təyin edə bilərsiniz. Bu atributları nəzərdən keçirin:
- link - ziyarət edilməmiş keçid, standart olaraq mavi rəngdə göstərilir;
- alink - aktiv keçid, standart olaraq qırmızı;
- vlink ziyarət edilən linkdir, standart olaraq bənövşəyi.
Link rəng nümunəsi ...
Beləliklə, HTML-də bağlantıların necə yaradıldığını anladıq. Linklər üslub edilə bilər. Linkə daxil olaraq dərsdə baxa bilərsiniz.
Düşünürəm ki, siz artıq nəyi başa düşürsünüz müzakirə olunacaq bu fəsildə.. və siz linkin nə olduğunu bilirsiniz, əgər deyilsə, onda bura klikləyin.. Bir neçə növ link, eləcə də onları izləmək üçün "mexanizmlər" var. Bu fəsildə mən sizə bağlantıları necə qeydiyyatdan keçirəcəyinizi ətraflı izah etməyə çalışacağam, həmçinin onlarla işləməyin incəliklərini həsr edəcəyəm.
Lirik təxribat:
Bir dəfə orduda olanda qərargah rəisi yanıma gəlib əmr verdi, sitat gətirirəm:
O sənədi mənə gətirin, halbuki harada və nə olduğunu bilmirəm!! Nə dayanırsan? Gəl qaçaq!! gecikdim!!!
Bəs niyə mən eləyəm ki, o zaman mənim kimi brauzer stupora düşməsin, bilməlidir: sənədin dəqiq adını, sənədə gedən yolu və hara gətiriləcəyini, daha doğrusu hara onu açmaq üçün.
Aktiv Bu an notepaddan istifadə edərək cəmi bir HTML sənədi yaratdıq, məndə index.html adı var (niyə belə qəribə ad seçdim index.html və niyə baxmaq lazımdır) bilmirəm nə ilə, siz özünüz adı ilə gəldi, amma düşünürəm ki, siz xatırlayırsınız və harada olduğunu bilirsiniz, əlbəttə ki, mənim aparat rəhbərim deyilsinizsə :).Bu sənəddə hələ əlimizdə olmayan başqa bir sənədə keçid yaratmağa çalışacağıq .. Beləliklə, ona istinad etməzdən əvvəl, onu yaratmalısınız, təşəkkür edirəm, bunu artıq bilirsiniz.
- Notepad açın.
- üçün kod yazırıq html dili. Məsələn, bir sıra fotoşəkilləri olan bir səhifə.
- Biz onu html səhifəsi kimi ilk yaratdığımız sənədin artıq mövcud olduğu eyni işçi qovluğunda saxlayırıq. Gəlin, çaşqın olmamaq üçün onu primer.html adlandıraq və bəlkə də birincinin adını index.html olaraq dəyişək.
İndi mən bilirəm ki, sizin iki html sənədiniz index.html və primer.html var və indi əlavə öyrənmək üçün minimum dəstiniz var.
Mətn bağlantıları.
tag ilə tanış olun (lövbərdən - lövbər), ona mətn və ya şəkil əlavə edə bilərsiniz, bu da müəyyən sənədlərə keçid olacaqdır. Tag atributu href keçidin göstərdiyi sənədin adını və yolunu müəyyən edir.
Hamısı birlikdə belə yazılır:
Budur mənim şəkillərim!!Yəqin ki, başa düşdüyünüz kimi, primer.html ikinci html sənədimizin adıdır və "Budur mənim fotoşəkillərim!" bu index.html faylından mətn parçasıdır.
Şəkillər etiketinə bənzətməklə
Açılan sənədə keçid yolu eyni şəkildə yazılır:
Budur mənim şəkillərim!!- Bu isə o deməkdir ki, primer.html faylı sənəddən bir pillə yuxarı yerləşdirilib
Budur mənim şəkillərim!!- sənəd www.site.ru saytında yerləşir.
Yaxşı, cəhd edək? Aşağıda bir-birinə işarə edən keçidlərin qeydə alındığı iki sənədin nümunəsi verilmişdir.
index.html faylı:
Mənə deyin, əziz uşaq: hansı qulağımda uğultu var?
AT qanun və ya sol?
primer.html faylı:
Nümunə göstərir ki, bağlantılar rənglə vurğulanır, standart olaraq mavi bir keçiddir və qırmızı artıq ziyarət edilmiş bir keçiddir, bu rənglər bizə yaxşı tanış olan açılış etiketindən istifadə edərək dəyişdirilə bilər. < body > və onun atributları.
keçid- keçid rəngi.alink- kliklənmiş, aktiv linkin rəngi.
vlink- ziyarət edilən linkin rəngi.
Belə yazılıb:
>Mətn linkinin rəngi haqqında danışmağa davam edərək qeyd etmək lazımdır ki, lazım gələrsə, həm bütün linki, həm də onun ayrı-ayrı hissələrini (ifadələr, sözlər, hərflər) tanış etiketlə vurğulamağa məcbur edə bilərsiniz. və onun atributu rəng. Bununla belə, bu, yalnız rəngə aid deyil, həm də mətnin ölçüsünü, üslubunu və şriftini ayrıca təyin edə bilərsiniz. Ancaq unutmayın ki, rəng manipulyasiyası etiketin içərisində edilməlidir burada və həddindən artıq deyil, əks halda linkin rəngi ya standart olaraq, ya da etiketdə yazılmış kimi olacaq
index.html faylı:
link="#008000" alink="#ff0000" vlink="#ffff00">
Göy qurşağındakı rənglərin yerlərini yadda saxlamağa kömək edəcək bir ifadə axtarın.
R
VƏ
D
At
G
VƏ
primer.html faylı:
link="#008000" alink="#ff0000" vlink="#ffff00">
Hər
ovçu
arzular
bilmək
harada
oturur
qırqovul
Əsas səhifəyə qayıdın
Saytdakı səhifələrinizdən biri mütləqçağırılmalıdır index.html Bir şəxs saytınızın adını daxil etdikdə robot proqramının axtaracağı saytınızdakı bu adda olan fayldır. Səhifədən bəri index.htmləvvəlcə açılacaq, onu əsas edin. Qalan səhifələrə istədiyiniz kimi zəng edə bilərsiniz... adlarla bağlı daha nüanslar yoxdur.
İş haqqında.Yol və sənəd adlarını yazarkən yadda saxlayın ki, məsələn: Page.html, page.html və PAGE.html müxtəlif sənədlərin adlarıdır! Eyni şey əlfəcin adlarına və çertyojlara da aiddir. Kod yazarkən hər zaman hərflərə həssas olun, belə adların müəyyən brauzer tərəfindən tanınmama şansı yüksəkdir. Hər şeyi yazmağı və onu kiçik adlandırmağı bir qayda edin latın hərfləri ilə, onda insan faktorunun riski və proqramların kaprizləri sıfıra enəcək.
Üç klik qaydası.
"Bağlantılar ağacı" nı elə formalaşdırmağa çalışın ki, sayt ziyarətçisi onun istənilən səhifəsindən saytın istənilən yerinə keçidlərə minimum klik sayına çata bilsin. Saytda üçdən çox doğru yerə keçid yaxşı deyil.. İnsana lazım olmayan səhifələrin sonsuz yüklənməsi əsəb pozğunluğuna və saytın vaxtından əvvəl bağlanmasına səbəb ola bilər. İnsanların vaxtına, puluna və əsəblərinə qənaət edin.
HTML sənədinin əsas xüsusiyyəti onun tərkibində olmasıdır hiperlinklər(və ya sadəcə olaraq linklər) digər sənədlərə, saytlara, fayllara, şəkillərə və s. İnterneti bu qədər populyar edən və istifadə üçün rahat edən onun xaricində olan obyektlərə səhifələrə keçidlər daxil etmək imkanı idi. Buna görə də, saytınızı yaradarkən həmişə keçidlərin "sehrini" xatırlayın.
Bu dərsdə biz danışacağıq necə bir keçid yaratmaq olar sayta, onun ayrıca səhifəsinə və ya faylına. Siz linkin mətnini necə dəyişdirməyi, onu yeni pəncərədə necə açmağı, keçidi şəkilə çevirməyi, xarici və daxili keçidlərin nə olduğunu və s. öyrənəcəksiniz. Üstəlik, əvvəlki dərslərdə toxunduğumuz bağlantılarla işləmək haqqında artıq məlumatınız var (məsələn, linkin rəngini necə dəyişdirə biləcəyiniz haqqında danışdıq).
Ümumiyyətlə, bu dərs sizin link qurmaq fikrinizi tam və kifayət edəcək. HTML-də hiperlinkin necə yaradılacağını və nə üçün olduğunu başa düşəcəksiniz. Və onun xassələrini idarə etməyi öyrənin.
Şərtlər
§ 1. Fayla keçid, sayta keçid, səhifəyə keçid
Fayla keçid ilə sayta və ya onun fərdi səhifəsinə keçid arasındakı fərqlə bağlı çoxsaylı suallar məni bu dərsin əvvəlində ona cavab verməyə məcbur etdi. Cavab: heç nə. Siyahıda göstərilən bütün bağlantılar xaricidir ilkin səhifə və eyni şəkildə yaradılır.
Ağac boyu fikri yaymamaq üçün hər şeyi nümunə ilə göstərəcəyəm.
Brauzerdə bunu görəcəyik:
Brauzerdə bunu görəcəyik:
Gördüyünüz kimi, bütün növ bağlantılar eyni şəkildə yaradılır. Yeganə fərq ondadır ünvanı istinad ediləcək obyekt. İndi keçək dərsin əsas hissəsinə.
§ 2. Xarici keçidlərin yaradılması
Linklər bir-birindən fərqlənir xarici və daxili, həmçinin üzərində mətn və qrafik. Xarici bağlantılar html səhifəsinin "hüdudlarından" kənara çıxar, daxili keçidlər müxtəlif hissələrə eyni səhifələr. Mətn bağlantıları mətndir (defolt olaraq, mavi rənglə vurğulanır və altı xətt çəkilir) və qrafik bağlantılar getmək üçün üzərinə klikləməyiniz lazım olan bir obyekt kimi bir növ şəkil ehtiva edir. Bütün bu növ bağlantılar HTML-də etiketdən istifadə etməklə yaradılır (ingiliscə çapa üçün abbreviatura - çapa). Bunu daha ətraflı nəzərdən keçirək.
Sayta, səhifəyə və ya fayla xarici keçid yaratmaq üçün etiket atributundan istifadə olunur - href. Bu atribut öz dəyərini alır URL sayt, səhifə və ya fayl (bu barədə yuxarıda danışdıq). və teqləri arasında linkin görünən hissəsi (link anker), yəni brauzer ekranında gördüyümüz şeydir. Link lövbəri düz mətn (mətn keçidi) və ya ola bilər qrafik şəkil(link-şəkil). Şəkil bağlantısı və teqləri arasına tanış teq daxil etməklə yaradılır. Ümumiyyətlə, keçid yaratmaq üçün sintaksis belə görünür:
Məsələn, bu saytın ana səhifəsinə mətn bağlantısı yaratmaq üçün aşağıdakı HTML kodunu yazmalısınız:
http://www.seoded.ru/"> Saytın ana səhifəsi
Brauzerdə bu belə görünəcək:
Bu dərsliyin ən əvvəlində yazdığım kimi, keçid mətninin (lövbər) rəngi istifadə edərək dəyişdirilə bilər. Ümumiyyətlə, siz səhifənin əsas mətninə olan keçidlərin mətninə eyni şəkildə müraciət edə bilərsiniz, yəni qalın, kursiv, başlıqlardan istifadə edin və s.
§ 2.1 Qrafik bağlantılar (şəkil keçidləri)
Yuxarıda dediyim kimi, şəkil linki yaratmaq üçün istifadə etməlisiniz. Belə bir əlaqə nümunəsi belə görünür:
Və brauzer göstərəcək:
Varsayılan olaraq, brauzer şəkil linkindəki şəkli çərçivə ilə əhatə edir. Əgər bu arzu olunmursa, o zaman atribut sərhəd etiket img 0-a təyin edilməlidir:
sərhəd="0">
Əsas səhifə
§ 3. Daxili keçidlər
Çox məzmunlu səhifələrdə rahat naviqasiya üçün daxili keçidlərdən istifadə olunur. Məhz onların köməyi ilə Dərsin Məzmunu hazırladım (bu səhifənin əvvəlinə baxın). Daxili keçidlər xarici keçidlərlə eyni şəkildə yaradılır. Yalnız atribut dəyərində href keçidin "lövbəri" göstərilir. Anchor atribut tərəfindən yaradılmışdır ad:
name="lövbər adı">mətn
Və "lövbər" adı özbaşına qoyulur. Burada demək lazımdır ki, bütün brauzerlər rusca "lövbər" adlarını başa düşmür, ona görə də Latın əlifbasından istifadə etməyi məsləhət görürəm. "Anker" yaratmaq üçün teqlər arasındakı mətn isteğe bağlıdır və çox vaxt göstərilmir.
"Mən qızılcayam" istifadəçinin linkə kliklədikdən sonra getməli olduğu səhifədə həmin yerlərdə yerləşir.
Yuxarıda dediyim kimi, atributda hrefünvan əvəzinə daxili keçid, istədiyiniz "lövbərin" adı məcburi hash simvolu ilə göstərilir ( # ) onun qarşısında. Bir misal götürək.
adlı bir "lövbər" yaratdım başlıq və onu bu dərsin başlığının yanındakı səhifənin koduna yerləşdirin ("HTML-də hiperlinklər"). "Anker" kodu aşağıdakı kimidir:
name="title">
href="#zagolovok">Başlığa keçin
Və brauzerdə belə:
Diqqət etsəniz, başlığa daxili keçidə kliklədikdən sonra brauzerin ünvan çubuğundakı URL dəyişdi:
Orijinal ünvana:
http://www.html
http://www..html#başlıq
Və bu funksiyadan istifadə edərək, İnternetdəki istənilən resursdan səhifədə müəyyən bir yerə keçid edə bilərsiniz! Yəni, tutaq ki, siz nəsə haqqında uzun məqalə olan səhifə yaratdınız (və ya səhifədə çoxlu sayda fotoşəkil yerləşdirdiniz) və onu daxili keçidlərlə qeyd etmisiniz. -də olmaqla, sadəcə məqalə (və ya fotoşəkillər) olan səhifəyə deyil, onun üzərindəki müəyyən yerə (yaxud müəyyən bir şəkilə) müraciət etməlisiniz. Ünvanda daxili keçid olan seçimdən istifadə edərək, ehtiyac duyduğunuza asanlıqla nail ola bilərsiniz.
§ 4. Mütləq və nisbi istinadlar
Əsas səhifə
Ancaq nisbi bağlantılarla bu bir az daha mürəkkəbdir. Belə keçidlərdə ünvan da göstərilir nisbətən saytın kök qovluğu (əsas səhifənin yerləşdiyi qovluq) və ya orijinal səhifəyə nisbətən. Bu cür bağlantılar, məsələn, sayt yerləşirsə lazımdır ev kompüteri. Yaxud bu vebsayt deyil, digər sənədlərin səhifə göstəricisidir.
Tutaq ki, bir səhifəyə keçid etməliyik müştəri.html, yalan bir qovluqda ilə Əsas səhifə Sayt. Sonra nisbi keçid kodu belə görünəcək:
/clienty.html">Müştərilər
İndi əsas səhifə ilə eyni qovluqda olduğunu düşünək qovluq sırası və artıq içində klienty.html səhifəsi yerləşir.Sonra nisbi keçid kodu belə olacaq:
/zakazy/clienty.html">Müştərilər
İndi hiperlinklərin yaradılmasına baxaq orijinal səhifəyə nisbətən. Tutaq ki, bir səhifəmiz var qiymət.html(mənbə səhifəsi) və ondan səhifəyə keçid etməlisiniz müştəri.html Aşağıdakı tipik seçimlər bunlardır:
1. Price.html və clienty.html səhifələridir bir qovluqda.
clientty.html">Müştərilər
2. saytın kök qovluğunda, səhifənin qiyməti.html sifariş qovluğundadır bir səviyyə yuxarı).
Kod belə olacaq:
../clienty.html">Müştərilər
İki nöqtə cari qovluqdan daha yüksək səviyyəyə çıxmaq lazım olduğunu göstərir.
3. klienty.html səhifəsi və zakazy qovluğu bunlardır saytın kök qovluğunda, mebel qovluğu sifariş qovluğundadır, səhifənin qiyməti.html mebel qovluğundadır(yəni orijinal qiymət.html səhifəsinə nisbətən klienty.html səhifəsi yatır iki səviyyə yuxarı).
../../clienty.html">Müştərilər
Yəni, hər səviyyə iki nöqtə və slash işarəsi ilə göstərilir. / ».
4. saytın kök qovluğunda, səhifə müştəri.html sifariş qovluğundadır(yəni indi klienty.html səhifəsi orijinal qiymət.html səhifəsinə nisbətəndir bir səviyyə aşağı).
zakazy/clienty.html">Müştərilər
Bu vəziyyətdə nöqtələr və kəsiklər qoyulmur.
5. Price.html səhifəsi (orijinal səhifə) və zakazı qovluğudur saytın kök qovluğunda, mebel qovluğu sifariş qovluğundadır, səhifə müştəri.html mebel qovluğundadır(yəni indi klienty.html səhifəsi orijinal qiymət.html səhifəsinə nisbətəndir iki səviyyədən aşağıda yerləşir).
zakazy/furniture/clienty.html">Müştərilər
6. Saytın kök qovluğunda iki qovluq var: zakazı və oplata. clienty.html səhifəsi sifariş qovluğundadır, orijinal qiymət.html səhifəsi oplata qovluğunda yerləşir(yəni hər iki səhifə yalan deyir müxtəlif qovluqlarda bir səviyyə aşağı saytın kök qovluğundan).
../zakazy/clienty.html">Müştərilər
§ 5. Elektron poçta keçid
Üçün e-poçt linki yaradın, atribut dəyərindəki URL əvəzinə sizə lazımdır href protokolla bir e-poçt ünvanı yazın ( mailto:). Və sonra belə bir keçidə tıkladığınız zaman bir pəncərə açılacaq poçt proqramı"Kimə" sahəsinə daxil edilmiş e-poçt ünvanı ilə. HTML kodunda bu belə görünür:
mailto: [email protected]">Mənim poçtum
Brauzerdə də belədir.
Salam, blog saytının əziz oxucuları! Bildiyiniz kimi, bir saytı uğurla tanıtmaq və axtarış nəticələrində mövqeyini yüksəltmək üçün saytın yüksək keyfiyyətli SEO optimallaşdırılmasını həyata keçirmək lazımdır. Öz növbəsində daxili və xarici olaraq bölünən "" anlayışı "daxili və xarici sayt bağlantıları" kimi anlayışlarla ayrılmaz şəkildə bağlıdır. Buna görə də bizim üçün çox vacibdir ki, saytda neçə keçid olmalıdır, onların sayını necə yoxlayaq, lazımsız linkləri saytdan necə silib indeksləşdirmədən bağlayaq, link kütləsini necə artıra bilərik və s. Bütün bu suallara və daxili və xarici keçidlərlə bağlı daha çox suallara cavab vermək üçün əvvəlcə HTML-də linkin (və ya hiperlinkin) nə olduğunu anlayaq.
Bu yazıda linkin nə olduğunu, vebsaytda HTML-də necə hiperlink yaratmaq, linki yeni pəncərədə necə açmaq, e-poçt ünvanına (e-mail) keçid yaratmaq və necə etmək lazım olduğunu izah edəcəyəm. linki şəkil etmək. Biz həmçinin html teqləri və hiperlink atributları, keçid ankeri, html anker (anker) və hash keçidləri kimi anlayışlara toxunacağıq. Beləliklə, başlayaq.
Bağlantı nədir (hiperlink).
Hiperlink mövcud olmayan (silinmiş, köçürülmüş) veb-səhifəyə və ya fayla gətirib çıxarırsa və ya onun ünvanı səhvdirsə, belə bir keçid qırıq adlanır. Saytda pozulmuş bağlantılar olmamalıdır, çünki onlar ziyarətçiləri çaşdırır və belə bir keçidə klikləməklə, bir adamın saytınıza qayıtmaq ehtimalı azdır. Qırılan bağlantıların niyə görünməsi, onları necə tapmaq və düzəltmək barədə ayrı bir məqalədə daha ətraflı danışacağıq. İndi isə davam edək.
Veb saytında HTML-də necə bir keçid (hiperlink) etmək olar.
Saytınızdakı başqa bir səhifəyə və ya başqa bir sayta keçid etmək çox asandır. Hiperlink yaratmaq üçün brauzerə keçidin nə olduğunu söyləməli və onun aparacağı sənədin ünvanını göstərməlisiniz. Bu, HTML etiketindən istifadə etməklə edilir. və tələb olunan href atributu:
Burada URL sənədin getməli olduğu ünvandır. Və etiketlər arasında yerləşən hiperlink mətni və, link lövbəri adlanır və veb səhifənin ziyarətçisi üçün görünür. Link mətninin (lövbər) keçidin harada aparılacağını oxucuya bildirməsi ilə yanaşı, axtarış sisteminin optimallaşdırılmasında (SEO) da çox vacibdir, çünki bu, saytınızın reytinqinə təsir edən amillərdən biridir. bu lövbərdə olan açar sözlər. Tipik olaraq, bu növ sıralama referensial adlanır.
Mütləq əlaqə
Onlar başqa saytdakı sənədə işarə etmək üçün istifadə olunur (xarici keçid).
Eyni sayt daxilində mütləq keçidlər etməyə icazə verilir, lakin daha qısa görünən daxili keçid yaratmaq üçün nisbi ünvanlardan istifadə etmək daha düzgündür. Ancaq müxtəlif saytları təhlil edərkən, vebmasterlərin böyük əksəriyyətinin mütləq ünvanlarla daxili bağlantılar qurduğunu gördüm. Burada bir artı var, çünki səhifəniz kopyalanırsa, bu şəkildə xarici bağlantıları geri alacaqsınız.
Gördüyünüz kimi, mütləq istinadlarla hər şey sadədir. Nisbi olanlarla daha çətindir, çünki onları yaratarkən href atributunun hansı dəyərini təyin etməli olduğunuzu başa düşməlisiniz, çünki bu, sənədlərin orijinal yerindən asılıdır. Dediyim kimi, heç kim bununla məşğul olmur və saytdakı bütün bağlantıları mütləq edir. Bununla belə, bir sayt üçün nisbi bağlantıları necə düzgün yaratmaq barədə daha çox öyrənmək istəyirsinizsə, ktonanovenkogo.ru blogunun müəllifi Dmitrinin məqaləsini tövsiyə edə bilərəm. Mən hələ daha ətraflı və başa düşülən izahat görməmişəm.
Məsələn, mən saytın kökünə nisbətən fayla aparan keçidin necə görünəcəyini göstərəcəyəm (sadəcə oxşar mütləq keçiddə üçüncü kəsik xəttinin solunda olan hər şeyi kəsin):
Nisbi keçid
Əsasına
Link mətni (lövbər)
Açılan mətnin rəngləri və görünüşü yalnız parametrlərdən asılıdır əməliyyat sistemi və brauzer.
Linki yeni pəncərədə necə açmaq olar.
Varsayılan olaraq, bir keçidə kliklədiyiniz zaman cari pəncərədə yeni sənəd açılacaqdır. Ancaq saytlara şəxsən baxanda bu mənim üçün əlverişli deyil. Məqaləni oxuyarkən və keçidi izləyərkən səhifənin yeni pəncərədə açılması mənim üçün rahatdır və istənilən vaxt əvvəlki məqaləni oxumağa davam edə bilərəm. Linkin yeni pəncərədə açılmasının başqa bir səbəbi başqasının saytına daxil olanda oxucunun geri qayıtmama ehtimalının yüksək olmasıdır. Xüsusilə bir neçə keçid edirsə və sadəcə bir neçə dəqiqə əvvəl harada olduğunu xatırlamırsa.
Hədəf etiketi atributu bizə linki yeni pəncərədə açmağa kömək edəcək. . Adətən yazılmayan _self üçün standartdır. Sənədi yeni pəncərədə açmaq üçün hədəf atributunun dəyərini _blank olaraq dəyişdirin:
| 1 | <a href = "http://site" target = "_blank" > Yeni pəncərə</a> |
Yeni pəncərə
Əgər başqasının saytını ziyarət edərkən, keçidlərin cari pəncərədə açıldığı zaman onları yenisində açmaq istəsəniz necə olar? Sadəcə onlara düymə ilə deyil, siçan təkəri ilə vurmaq lazımdır. Bu halda yeni səhifə yeni pəncərədə açılacaq.
Elektron poçta necə keçid etmək olar (e-poçt ünvanı).
Bu linkə klikləməklə işləmək üçün proqram açılacaq e-poçt, defolt olaraq sizin tərəfinizdən quraşdırılmışdır, burada “Kimə” sahəsi artıq doldurulacaqdır. Məktubun mövzusunu avtomatik doldurmaq üçün aşağıdakı formanın elektron poçtuna keçid etməlisiniz:
“Məktubun_mövzu” sözləri əvəzinə istədiyiniz mövzunu və təbii ki, latın hərfləri ilə yazmalısınız. Biz bunu ona görə edirik ki, bir çox brauzerlər və e-poçt proqramları kiril əlifbası ilə yaxşı işləmir və mövzu xəttində hər cür boşboğazlığı görmək şansı var. Bu çətin olmayan məsləhətdən istifadə edərək, lazımsız sürprizlərdən qorxmadan e-poçta keçid yarada biləcəksiniz.
Şəkili necə bir keçid etmək olar.
Burada başlıq atributu alət ipucudur və brauzerdə şəkillər söndürüldükdə alt atributunda yazılmış mətn (alternativ məlumat mənbəyi) səhifədə görünəcək. Əgər başlıq atributu ilk növbədə oxucuların rahatlığına xidmət edirsə, onda axtarış sistemləri alt atributla şəkildə göstərilənləri anlamağa çalışır. Axtarış sisteminin optimallaşdırılmasında böyük əhəmiyyət kəsb edəcək bu teqlərə açar sözlər yazmaq tövsiyə olunur. Axı heç kim şəkillərlə axtarışı ləğv etmədi.
Bir html səhifəsində hiperlink (html anker) necə hazırlanır.
Yuxarıda, daxili və ya xarici olmasından asılı olmayaraq veb sayt səhifəsinə necə keçid yaratmağı artıq nəzərdən keçirdik. Ancaq bəzən eyni veb səhifədə hiperlinklər yaratmalı olursunuz. Nə üçün? Yaxşı, məsələn, çox uzun mətni oxuyarkən onun istənilən hissəsinə tez keçmək qabiliyyətimiz var. Və ya məqalənin əvvəlində onun məzmununu nöqtə-nöqteyi-nəzərdə dərc etsəniz, bu faydalı olacaq. Sonra istədiyiniz elementin üzərinə klikləməklə, siz dərhal maraqlandığınız materiala keçəcəksiniz. Bu cür keçidlər məqalənin gövdəsində əvvəlcədən quraşdırılmış əlfəcinlərdən istifadə etməklə həyata keçirilir, html lövbərləri (lövbər, mətn ankeri ilə qarışdırılmamalıdır) və xüsusi hash bağlantıları.
Çapa yaratmaq üçün əvvəlcə etiketin ad atributundan istifadə edərək müəyyən edilmiş hər hansı bir adla (yalnız Latın hərfləri, rəqəmlər, tire və alt xətt istifadə olunur) əlfəcin yaradın. :
Yuxarı
| 1 | <a href = "javascript:scroll(0,0);" > |
Dmitri KtoNaNovenkogo, html ankerlərindən istifadə etmədən veb səhifənin mətnində əlfəcinlər qoymağın başqa bir yolunu məsləhət görür. Bunun üçün səhifədə mövcud olan istənilən HTML teqindən əlfəcin düzəldirik və ona universal id atributunu təyin edirik. Məsələn, h3 başlıq teqindən əlfəcin edirik:
Başlıq mətni
Latın hərfini id atributunda çapa adının ilk simvolu kimi yazmaq vacibdir, sonra icazə verilən hər hansı digər simvollardan istifadə edə bilərsiniz.
Məsələn, “ “ başlığına qayıdıb davam edək.
Siz yalnız bir səhifə daxilində deyil, həm də saytın başqa səhifəsinə getmək üçün doğru yerə getmək üçün hash keçidlərindən istifadə edə bilərsiniz. Bunun üçün html lövbərini düzgün səhifədə lazımi yerə qoyuruq, hash linkinin özündə isə hash simvolundan əvvəl bu səhifənin ünvanını yazırıq. Misal üçün:
Mətni html əlfəcin ankerinə bağlayın
HTML-də hiperlinklərin növləri və rəngləri.
- Baxılmamış keçid mavi rəngdədir və altından xətt çəkilir.
- Aktiv Bağlantı - Linkə klikləməklə yeni səhifəni yükləməyə başlayana qədər qırmızı rəngə çevrilir. Təbii ki, o, uzun müddətdir ki, bu vəziyyətdə deyil.
- Ziyarət edilən link - üzərinə kliklədikdən sonra rəngini bənövşəyi rəngə dəyişir.
Teqdən istifadə edərək html sənədindəki hiperlinklərin rəngini dəyişə bilərsiniz
və aşağıdakı atributlar:- Link - ziyarət edilməmiş keçidlərin rəngi.
- Alink - aktiv keçid rəngi.
- Vlink ziyarət edilən linklərin rəngidir.
Yuxarıda göstərilən bütün atributlar birləşdirilə bilər:
| 1 | <bədən linki = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
Ümid edirəm ki, indi HTML səhifəsində və e-poçtda hiperlinkin necə yaradılacağı, şəklin necə keçid edilməsi, mətn ankerləri, hash keçidləri və html ankerləri, html teqləri və keçid atributları nədir, indi aydındır. HTML-də hansı keçidlərin olduğunu və onların nə olduğunu ətraflı təsvir etmək üçün əlimdən gələni etdim. Nəzərinizə çatdırım ki, mətnə hiperlinklərin daxil edilməsi yalnız HTML rejimində həyata keçirilir.
Heç vaxt belə uzun məqalələr, 10.000 simvoldan çox yazmaq lazım deyildi. Lakin bu bağlantılar mövzusu tükənməyib, davam etdiriləcək.
Bu məqalə sizin üçün faydalı oldusa, lütfən, aşağıdakı sosial şəbəkələrin düymələrinə klikləyin. Səhifələrdə görüşənədək!
Hər kəsə xeyirli gün, əziz dostlarım və oxucularım. Ümid edirəm ki, siz mənim müsabiqəmdə iştirak etmək qərarına gəldiniz və bloqçuluq yolunuz haqqında yazdınız. Yaxşı, mən html dilini öyrənməyimizi davam etdirmək istərdim və bu gün sizə ən vacib komponentlərdən biri, yəni hiperlinklər haqqında danışmaq istərdim.
Bəli, belə hiperlinklər olmasaydı, İnternet o qədər də rahat olmazdı. Xeyr, yalan deyirəm. Naviqasiya baxımından heç də rahat olmazdı. İnterneti onlarsız təsəvvür edə bilərsinizmi? Mən şəxsən etmirəm.
Və bu gün biz html-də hiperlink daxil etməyi öyrənəcəyik. Ancaq əvvəlcə sizdən soruşmaq istərdim: Hiperlinkin nə olduğunu və adi keçiddən nə ilə fərqləndiyini bilirsinizmi? Burada hər şey həqiqətən sadədir: keçid hansısa sənədə istinad edən məlumatın sadə yazısıdır. Eyni zamanda, bu mətnə klikləyə bilməzsiniz (heç nə olmayacaq), ancaq məlumatı harada axtaracağınızı bilirsiniz.
Nümunə: Photoshop-da saç seçməyi öyrənə bilərsiniz //website/adobe-photoshop/kak-vydelit-volosy/
Hiperlink eyni mətndir, yalnız onun mahiyyəti ondan ibarətdir ki, bu mətnin üzərinə klikləyib istədiyiniz səhifəyə, sayta və ya hər hansı digər obyektə keçə bilərsiniz. Üstəlik, mətnin özü hər hansı bir ola bilər, ünvan artıq içəridə ayrıca yazılmışdır və tamamilə fərqli ola bilər. Ancaq nə olursa olsun, eyni zamanda danışıq nitqində onlara sadəcə bağlantılar deyilir. Budur bir hiperlink nümunəsi:
Photoshop-da saçları necə düzgün seçmək barədə mənim birində oxuya bilərsiniz.
Hər halda. Yaxşı nəzəriyyə. İndi məşqə keçək və görək bütün bunlara görə hansılar məsuldur.
Cüt teq hiperlink üçün cavabdehdir, lakin özü heç nəyi təmsil etmir. Həmişə bir atributla birlikdə gedir. Və bu halda, biz daim bu çox href təyin etmək lazımdır. Atribut dəyərində biz istədiyiniz mənbəyə çox keçid qoyuruq. Və məzmunun özündə biz mətnin özünü yazırıq, bu da kliklənməli olmalıdır (kliklə işləyir). Nümunəyə baxın və məncə hər şeyi başa düşəcəksiniz.
Yandex axtarış sistemi
Anladığınız kimi, bu misalda yazdım ki, "Yandex axtarış sistemi" mətn parçasına kliklədiyiniz zaman bir adam href atributunun dəyərində yazılmış ünvana yönəldiləcək.
Düşünürəm ki, çoxlarınız daxili və xarici bağlantıların olduğunu bilirsiniz. Daxili bağlantılar bir kataloq, yəni sayt daxilində həyata keçirilir və xarici keçidlər bəzi üçüncü tərəf resursuna səbəb olur. İndi mən sizə hər ikisini necə edəcəyinizi göstərəcəyəm.
Daxili keçidlər
Eyni qovluqda fayl
Lakin belə keçid o şərtlə işləyəcək ki, əlaqə qurduğunuz fayl linki qoyduğunuz faylla eyni qovluqda olsun. Digər variantlar üçün hər şey bir az fərqlidir.
Fayl başqa qovluqda
- Pushkin.html faylını Notepad++ proqramında açın
- İndi şəkil sözünü tapın və onu etiketlərə sarın<href> .
- Və indi diqqət! Atribut dəyərində redaktə olunan fayla, yəni pushkin.html-nin özünə nisbətən yolu yazırıq. Sizdə belə bir şey olmalıdır:
İndi nə etdik? Və biz aşağıdakıları etdik: fotoşəkilin yolu pushkin.html faylı ilə eyni qovluqda yerləşən ayrıca img qovluğunda olduğundan, atribut dəyərində əvvəlcə qovluğun adını yazmalıyıq və sonra slash (/) vasitəsilə sənədin tam adı (bizim halda fotolarda).
İndi brauzerinizdə pushkin.html faylını saxlayıb işə salın. “Foto” sözünün mavi rənglə vurğulandığını və klik edilə bilən hala gəldiyini görəcəksiniz, bu o deməkdir ki, bu linkə klikləməklə biz img qovluğunda yerləşən fofo.jpg faylına keçəcəyik.
Yaxşı, necə? Hər şey aydındır? Bir şeyə ehtiyacınız varsa soruşmaqdan çekinmeyin.
Xarici keçidlər
Əlbəttə ki, kliklədikdən sonra tamamilə fərqli bir sayta keçəcəyimiz xarici bağlantıları qeyd etməyə kömək edə bilmərik. Ancaq burada mürəkkəb bir şey yoxdur. Məsələ ondadır ki, siz href dəyərinə saytın və ya veb səhifənin tam ünvanını daxil edirsiniz. Yuxarıda Yandex ilə bir nümunə göstərdim. Amma sizin üçün başqa bir nümunə:
Sosial layihələr üzrə magistr təhsili alacam.Burada konkret saytın xüsusi səhifəsinə keçirik.
Yeni pəncərədə açılır
Varsayılan olaraq, bir keçidə tıkladığınız zaman, sənəd səhifənizlə eyni pəncərədə açılır, yəni. səhifəniz çökəcək. Və bu yaxşı deyil. Xüsusilə, təbliğ olunan məzmun layihələri və ya bloqlar üçün, linkə kliklədiyiniz zaman sənədin səhifənizi bağlamadan yeni pəncərədə və ya tabda açılması tövsiyə olunur.
Bu işdə bizə “_blank” dəyərli hədəf atribut kömək edəcək. Burada mürəkkəb bir şey yoxdur. Bunu sadəcə açılış etiketinin içərisinə yapışdırmaq lazımdır href atributunun dəyərindən sonra. Pushkin.html səhifəsinə keçid etdiyimiz lukomorye.html faylından həmin çıxarışı götürək, yalnız indi məhz bu atributu yazacağıq. Bu belə görünməlidir:
Ruslan və Lyudmila poemasından (Müəllif - A.S. Puşkin)
Yaxşı, burada hər şey aydındır. İndi məzmunun üzərinə kliklədiyiniz zaman yeni pəncərədə istədiyiniz səhifə açılacaq. Bu şey çox lazımdır, çünki onu qeydiyyatdan keçirməsəniz, istifadəçi sadəcə səhifənizi tərk edəcək. Və beləliklə, hər halda, o, yalnız onu xüsusi olaraq bağlamasa, onun üzərində qalacaq. Hər şeyi özünüz etməyə çalışın, yalnız əllərinizlə hər şeyi gözəl edin. Kopyalayıb yapışdırmağa ehtiyac yoxdur.
Nədənsə belə. Deyəsən, o, bütün vacib şeyləri söylədi, amma bu istiqamətdə hərəkət etmək və peşəkar veb-saytlar, bloqlar və hətta onlayn mağazalar yaratmaq üçün HTML və CSS öyrənmək istəyirsinizsə, mütləq yoxlayın. əla video kurs bu mövzu haqqında. Dərslər həqiqətən əladır və veb saytın qurulması ilə hələ də az tanış olan və ya ümumiyyətlə tanış olmayan insanlar üçün deyilmişdir.
Beləliklə, bugünkü dərsimiz başa çatır. Ümid edirəm ki, məqaləmi bəyəndiniz və daimi oxucum olsanız, şad olaram. Maraqlı bir şeyi qaçırmamaq üçün blog yeniləmələrimə abunə olmağı unutmayın. Yaxşı, bütün işlərinizdə sizə uğurlar arzulayıram. Sağ ol!
Hörmətlə, Dmitri Kostin.
