HTML тілінде гиперсілтемені қалай кірістіруге болады? HTML тілінде гиперсілтемелерді құру және пайдалану. HTML, Вконтакте, форумда суретті сілтеме жасауға және CSS кескінін гиперсілтеме ретінде қалай пайдалануға болады
Бұл сабақта біз HTML тілінде сілтеме жасау туралы сөйлесеміз. Сілтемелер веб-сайттарда өте жиі пайдаланылады, олар веб-сайттың бір бетінен екіншісіне өтуге мүмкіндік береді. Сілтемелердің ерекшелігі - олар тек веб-параққа ғана емес, сонымен қатар файлдарға, суреттерге және т.б.
Сілтемелер ішкі және сыртқы болуы мүмкін. Ішкі сілтемелер бір сайттағы беттер мен файлдарға апарады. Сыртқы сілтемелер үшінші тарап сайттарына, құжаттарына және файлдарына әкеледі. Сонымен қатар, сілтемелердің бұл түрлері дерлік бірдей орнатылады.
HTML тілінде сілтеме жасау жолы, мысалдар1. HREF – сілтеме қайда апаратыны үшін жауапты. Стандартты сілтеме келесідей көрсетіледі: Сілтеме мәтіні.
2. TARGET – құжаттың қай терезеде ашылатынына жауапты. Әдепкі жаңа құжатағымдағы шолғыш терезесінде ашылады. «Target» атрибуты сілтемені жаңа браузер терезесінде ашуға мүмкіндік береді. Бұл атрибуттың келесі параметрлері бар:
- _blank – жаңа терезеге бетті жүктейді;
- _self - ағымдағы терезеде бетті жүктейді;
- _parent - бетті негізгі жақтауға жүктейді;
- _top - барлық кадрларды болдырмайды және бетті жаңа терезеге жүктейді.
3. NAME – беттің белгілі бір аймағына өту үшін қолданылады. Хэш белгісінен кейін кілт сөз (бетбелгі немесе тег) тырнақша ішінде көрсетіледі. Бұл белгіге өту үшін осы белгі жазылған сілтемені пайдаланыңыз.
Сыртқы сілтеме мысалыВеб-сайтқа өтіңіз
Сайтқа өтіңіз тегін WordPress сабақтары4-мысал: Суреттер сілтеме ретінде.
Анықтама ретінде мысал сурет
Мәтінге өтіңіз
Бет мәтіні...
Бұл мысалда бетке «name» төлсипаты арқылы «тізім» деп белгіленген. Бұл белгімен байланыстыру сізді беттің белгілі бір аймағына апарады.
Файлды жүктеп алу Хат жазуПараметрлер ретінде «дене» тегінде көрсетілген атрибуттарды пайдаланып сілтемелердің түсін орнатуға болады. Мына атрибуттарды қарастырыңыз:
- сілтеме - кірмеген сілтеме, әдепкі бойынша ол көк түспен көрсетіледі;
- alink - белсенді сілтеме, әдепкі бойынша қызыл;
- vlink - кірген сілтеме, әдепкі бойынша күлгін.
Осылайша, біз HTML тілінде сілтемелердің жасалу принципін анықтадық. Сілтемелерге арнайы стильдер берілуі мүмкін. Бұл туралы сілтеме арқылы сабақта көре аласыз.
Менің не айтқым келгенін түсіндіңіз деп ойлаймын сөйлесемізосы тарауда.. және сіз сілтеменің не екенін білесіз, егер жоқ болса, онда осы жерді басыңыз.. Сілтемелердің бірнеше түрі, сондай-ақ оларды басу «механизмдері» бар. Бұл тарауда мен сілтемелерді қалай тіркеу керектігі туралы егжей-тегжейлі сөйлесуге тырысамын, сондай-ақ олармен жұмыс істеудің қыр-сырын қарастырамын.
Лирикалық ауытқу:
Бірде әскерде штаб бастығы маған келіп бұйрық берді, мен келтіремін:
Ол құжаттың қайда екенін және не екенін білмесем де, маған әкеліңіз!! Неге тұрсың? Жүгірейік!! Мен кешігіп қалдым!!!
Сонымен, мен мұнымен не айтқым келеді, браузер сол кездегідей ессіз күйге түспеуі үшін, ол білуі керек: құжаттың нақты атауын, құжаттың жолын және оны әкелетін орынды, дәлірек айтқанда, оны қай жерде ашу керек.
Қосулы осы сәтблокнот арқылы біз тек бір HTML құжатын жасадық, менде index.html деген атау бар (неге index.html деген оғаш атауды таңдадыңыз және ол не үшін қажет, қараңыз) Қайсысын білмеймін, сіз ойлап таптыңыз. атымен өзіңіз, бірақ менің ойымша, сіз оны есте сақтаңыз және оның қайда екенін білдіңіз, егер сіз менің аппарат басшысы болмасаңыз :).. Бұл құжатта бізде әлі жоқ басқа құжатқа сілтеме жасауға тырысамыз. .. Сондықтан оған сілтеме жасамас бұрын, оны жасау керек, өйткені сіз мұны қалай істеу керектігін білесіз.
Енді мен сенің екеуің бар екенін білдім html құжатыжәне index.html және primer.html және енді сізде қосымша оқыту үшін ең аз жинақ бар.
Мәтіндік сілтемелер.Тегпен танысайық (зәкірден) сіз оған мәтінді немесе суретті қоса аласыз, ол белгілі бір құжаттарға сілтеме болады. Тег атрибуты href сілтеме көрсететін құжаттың атын және жолын көрсетеді.
Барлығы бірге былай жазылған:
Міне менің фотоларым!!Түсінгеніңіздей, primer.html - бұл екінші html құжатымыздың атауы және «Міне, менің фотоларым!!» деген жазу. бұл index.html файлындағы мәтін бөлігі.
Суреттерге ұқсас, тег Ашылатын құжатқа сілтеме жолы дәл сол әдістер арқылы көрсетіледі:
Міне менің фотоларым!! - Бұл primer.html файлының құжаттан бір деңгей жоғары орналасқанын білдіреді
Міне менің фотоларым!! - құжат www.site.ru сайтында орналасқан..
Ал, жасап көрейікші? Төменде бір-біріне сілтемелері бар екі құжаттың мысалы келтірілген.
Index.html файлы:
Мәтін бөлігіне сілтеме жасау
Айтшы, балам: қай құлақта ызылдап тұр?
Оң жақта ма, сол жақта ма?
Primer.html файлы:
Мұндағы сілтемені орындаңыз
Бірақ мен дұрыс ойламадым! Менің екі құлағымда ызылдаған.
Мен олай ойнамаймын...
Мысалдан сілтемелердің түспен бөлектелгенін көруге болады, әдепкі бойынша көк - сілтеме, ал қызыл - бұрыннан барған сілтеме, бұл түстер бізге бұрыннан белгілі ашылатын тег арқылы өзгертілуі мүмкін.< body >және оның атрибуттары.
сілтеме - сілтеме түсі.alink – басылған, белсенді сілтеменің түсі.
vlink - кірген сілтеменің түсі.
Ол былай жазылған:
Мәтіндік сілтеменің түсі туралы айтуды жалғастыра отырып, қажет болған жағдайда сіз бүкіл сілтемені де, оның жеке бөліктерін де (фразалар, сөздер, әріптер) таныс тег пен оның түсін пайдаланып түспен ерекшелеуге мәжбүрлей аласыз. атрибут. Дегенмен, бұл тек түске ғана қатысты емес, мәтіннің өлшемін, стилін және қаріпін бөлек орнатуға болады. Бірақ түс манипуляциясы тегтің ішінде жасалуы керек екенін есте сақтаңыз Мұндажәне шектен тыс емес, әйтпесе сілтеме түсі әдепкі бойынша немесе тегте көрсетілгендей болады
Index.html файлы:
Кемпірқосақ
Кемпірқосақтағы түстердің орнын есте сақтауға көмектесетін сөйлемді қараңыз
Р
А
D
У
Г
А
Primer.html файлы:
Кемпірқосақ
Әр
аңшы
тілектер
білу
Қайда
отыр
қырғауыл
Басты бетке оралу
Сайттағы беттеріңіздің бірі index.html деп аталу керек. Адам сіздің веб-сайтыңыздың атын енгізген кезде робот бағдарламасы веб-сайтыңыздан іздейтін осы атаудағы файл. index.html беті бірінші ашылатындықтан, оны негізгі бетке айналдырыңыз. Қалған беттерді қалағаныңызша атай аласыз... атаулармен нюанстар жоқ.
Регистр туралы... Құжаттардың жолын және атауларын жазғанда есте сақтаңыз, мысалы: Page.html, page.html және PAGE.html әртүрлі құжаттардың атаулары! Бұл бетбелгілер мен суреттердің атауларына да қатысты. Кодты жазу кезінде әрқашан жағдайды ескеріңіз; мұндай атауларды бір немесе басқа браузер танымауы ықтималдығы жоғары. Жазуды және бәрін кішкентай деп атауды ережеге айналдырыңыз латын әріптерімен, сонда адам факторы мен бағдарламаның қыңырлығының қаупі нөлге дейін төмендейді.
Үш басу ережесі...
«Сілтемелер ағашын» сайтқа кіруші кез келген беттен сайттың кез келген жеріне ең аз рет басу арқылы ала алатындай етіп құруға тырысыңыз. Сайттағы қажетті орынға үш реттен артық ауысу енді жақсы емес.Адамға қажетсіз беттерді шексіз жүктеу жүйкенің бұзылуына және сайттың мерзімінен бұрын жабылуына әкеледі. Адамдардың уақытын, ақшасын және жүйкесін үнемдеңіз.
HTML құжатының негізгі ерекшелігі - онда басқа құжаттарға, сайттарға, файлдарға, суреттерге және т.б. гиперсілтемелердің (немесе жай ғана сілтемелердің) болуы. Интернетті соншалықты танымал еткен парақтан тыс объектілерге сілтемелерді кірістіру мүмкіндігі. және пайдалануға ыңғайлы. Сондықтан, веб-сайтыңызды жасаған кезде сілтемелердің «сиқырын» әрқашан есте сақтаңыз.
Бұл сабақта біз веб-сайтқа, оның жеке бетіне немесе файлына сілтеме жасау туралы сөйлесеміз. Сілтеме мәтінін өзгерту, оны жаңа терезеде ашу, суретке сілтеме жасау, сыртқы және ішкі сілтемелер қандай және т.б. Бұған қоса, сізде алдыңғы сабақтарда айтқан сілтемелермен жұмыс істеу туралы ақпарат бар (мысалы, біз сілтеменің түсін қалай өзгертуге болатыны туралы айттық).
Тұтастай алғанда, бұл оқулық сілтеме жасау туралы түсінікті толық және жеткілікті етеді. Сіз HTML тілінде гиперсілтемені қалай жасау керектігін және неліктен екенін түсінесіз. Ал сіз оның қасиеттерін бақылауды үйренесіз.
Шарттары § 1. Файлға сілтеме, сайтқа сілтеме, бетке сілтеме
Файлға сілтеменің сайтқа немесе оның жеке бетіне сілтемеден қалай ерекшеленетіні туралы көптеген сұрақтар мені осы сабақтың басында оған жауапты қоюға мәжбүр етті. Жауап: ештеңе. Тізімдегі барлық сілтемелер бастапқы бетке сыртқы болып табылады және дәл осылай жасалады.
Менің ойларым ұшқыр болмас үшін, мен бәрін мысалмен көрсетемін.
Браузерде біз мынаны көреміз:
Браузерде біз мынаны көреміз:
Көріп отырғаныңыздай, сілтемелердің барлық түрлері бірдей жасалады. Жалғыз айырмашылық - сілтеме жасалатын нысанның мекенжайы. Енді сабақтың негізгі бөліміне көшейік.
§ 2. Сыртқы сілтемелерді құруСілтемелер бір-бірінен сыртқы және ішкі, сондай-ақ мәтіндік және графикалық болып ерекшеленеді. Сыртқы сілтемелер html бетінен тыс, ішкі сілтемелер бір беттің әртүрлі бөліктеріне апарады. Мәтіндік сілтемелер мәтін болып табылады (әдепкі бойынша ол көк түспен бөлектелген және асты сызылған), ал графикалық сілтемелер бару үшін басу керек нысан ретінде суретті қамтиды. Сілтемелердің барлық түрлері HTML тілінде тег (зәкірдің қысқаша) көмегімен жасалады. Оны толығырақ қарастырайық.
Сайтқа, бетке немесе файлға сыртқы сілтеме жасау үшін href тегі төлсипатын пайдаланыңыз. Бұл төлсипат өзінің мәні ретінде сайттың, беттің немесе файлдың URL мекенжайын алады (бұл туралы жоғарыда талқыладық). Тегтердің арасында сілтеменің көрінетін бөлігі (сілтеме анкері), яғни браузер экранында көретініміз бар. Сілтеме якоры қарапайым мәтін (мәтіндік сілтеме) немесе болуы мүмкін графикалық кескін(сілтеме-сурет). Кескін сілтемесі және тегтерінің арасына таныс тег енгізу арқылы жасалады. Жалпы, сілтеме жасау синтаксисі келесідей көрінеді:
Мысалы, осы сайттың басты бетіне мәтіндік сілтеме жасау үшін келесі HTML кодын жазу керек:
http://www.seoded.ru/">Сайт веб-сайтының негізгі беті
Браузерде ол келесідей болады:
Осы сабақтың басында жазғанымдай, сілтеме мәтінінің (зәкір) түсін пайдалану арқылы өзгертуге болады. Жалпы алғанда, сілтемелер мәтініне беттің негізгі мәтініндегідей ережелерді қолдануға болады, яғни оны қалың, курсивпен бөлектеңіз, тақырыптарды қолданыңыз және т.б.
§ 2.1 Графикалық сілтемелер (сурет сілтемелері)Жоғарыда айтқанымдай, сурет сілтемесін жасау үшін пайдалану керек. Мұндай сілтеменің мысалы келесідей:
Ал браузер көрсетеді:
Әдепкі бойынша, браузер кескінді кадрмен графикалық сілтемеде қоршайды. Бұл қажет болмаса, IMG тегінің шекаралық атрибуты 0-ге орнатылуы керек:
шекара = "0">
Басты бет
§ 3. Ішкі сілтемелерІшкі сілтемелер көп мазмұнды беттер арқылы ыңғайлы шарлау үшін пайдаланылады. Солардың көмегімен мен «Сабақ мазмұнын» жасадым (осы беттің басынан қараңыз). Ішкі сілтемелер сыртқы сілтемелер сияқты принципті қолдану арқылы жасалады. Тек href төлсипатының мәні сілтеменің «зәкірін» көрсетеді. «Зәкір» name атрибуты арқылы жасалады:
name="зәкір атауы">мәтін
Ал «зәкірдің» атауы ерікті түрде белгіленеді. Бұл жерде айта кету керек, барлық браузерлер «зәкірлердің» орысша атауларын түсінбейді, сондықтан мен латын әліпбиін пайдалануды ұсынамын. «Зәкір» жасау үшін тегтер арасындағы мәтін қажет емес және көбінесе көрсетілмейді.
«Мен қызылшамын» сілтемені басқаннан кейін пайдаланушы өтуі керек беттегі сол жерлерде орналасқан.
Жоғарыда айтқанымдай, ішкі сілтеменің href атрибутында мекенжайдың орнына қажетті «зәкірдің» атауы оның алдында міндетті хэш белгісімен (#) көрсетілген. Оны мысалмен қарастырайық.
Мен zagolovok деп аталатын «зәкір» жасап, оны осы сабақтың тақырыбының жанындағы бет кодына орналастырдым (HTML тіліндегі гиперсілтемелер). Анкерлік код келесідей:
name="заголовок">
href="#zagolovok">Тақырыпқа
Ал браузерде келесідей:
Байқасаңыз, тақырыптың ішкі сілтемесін басқаннан кейін браузердің мекенжай жолағындағы URL мекенжайы өзгерді:
Түпнұсқа мекенжайға:
http://www..html
http://www..html#zagolovok
Және бұл мүмкіндікті пайдалана отырып, сіз Интернеттегі кез келген ресурстан беттегі белгілі бір орынға сілтеме жасай аласыз! Яғни, сіз бір нәрсе туралы ұзақ мақаласы бар бетті жасап (немесе бетте көптеген фотосуреттерді орналастырдыңыз) және оны ішкі сілтемелермен белгіледіңіз делік. ішінде болған кезде мақала (немесе фотосуреттер) бар бетке ғана емес, ондағы белгілі бір жерге (немесе белгілі бір фотосуретке) сілтеме жасау керек болды. Мекенжайдағы ішкі сілтемесі бар опцияны пайдалану арқылы сіз өзіңізге қажет нәрсеге оңай қол жеткізе аласыз.
§ 4. Абсолютті және салыстырмалы сілтемелерБасты бет
Бірақ салыстырмалы сілтемелермен бұл біршама күрделірек. Мұндай сілтемелерде мекенжай сайттың түбірлік қалтасына (негізгі бет орналасқан) немесе бастапқы бетке қатысты көрсетіледі. Мұндай сілтемелер қажет, мысалы, егер сайт орналасқан болса үй компьютері. Немесе бұл сайт емес, басқа құжаттарға көрсеткіш болатын бет.
Бір қалтада орналасқан klienty.html бетіне сілтеме жасау керек делік басты бетсайт. Содан кейін салыстырмалы сілтеме коды келесідей болады:
/klienty.html">Клиенттер
Енді негізгі парағы бар бір қалтада zakazy қалтасы бар және klienty.html беті бар деп есептейік.Содан кейін салыстырмалы сілтеме коды келесідей болады:
/zakazy/klienty.html">Клиенттер
Енді бастапқы бетке қатысты гиперсілтемелерді құруды қарастырайық. Бізде price.html (бастапқы бет) беті бар делік және одан klienty.html бетіне сілтеме жасау керек.Келесі типтік опциялар бар:
1. price.html және klienty.html беттері бір қалтада орналасқан.
klienty.html">Клиенттер
2. сайттың түбірлік папкасында price.html беті бір деңгей жоғары zakazы папкасында орналасқан).
Код келесідей болады:
../klienty.html">Клиенттер
Екі нүкте ағымдағы қалтадан жоғары деңгейге өту керек екенін көрсетеді.
3. klienty.html беті мен zakazy папкасы сайттың түбірлік папкасында, mebel папкасы zakazy папкасында, price.html беті жиһаз қалтасында (яғни, klienty.html парағы қатысты). бастапқы price.html беті екі деңгей жоғары ).
../../klienty.html">Клиенттер
Яғни, әрбір деңгей екі нүктемен және қиғаш сызық «/» арқылы белгіленеді.
4. сайттың түбірлік қалтасында klienty.html беті zakazy қалтасында (яғни қазір бастапқы price.html бетіне қатысты klienty.html беті бір деңгейге төмен орналасқан).
zakazy/klienty.html">Клиенттер
Бұл жағдайда нүктелер мен қиғаш сызықтар қолданылмайды.
5. Price.html парағы (түпнұсқа парағы) және zakazy папкасы сайттың түбірлік папкасында, мебель папкасы zakazy папкасында, klienty.html беті жиһаз қалтасында (яғни, қазір klienty) орналасқан. .html беті бастапқы бағасына қатысты.html беті төменде екі деңгейде орналасқан).
zakazy/mebel/klienty.html">Клиенттер
6. Сайттың түбірлік қалтасында екі қалта бар: zakazы және oplata. klienty.html беті zakazy қалтасында, бастапқы price.html беті oplata қалтасында (яғни, екі бет де сайттың түбірлік қалтасынан бір деңгей төмен әртүрлі қалталарда орналасқан).
../zakazy/klienty.html">Клиенттер
Электрондық поштаға сілтеме жасау үшін href төлсипат мәніндегі URL мекенжайын хаттаманы көрсететін электрондық пошта мекенжайымен (mailto:) ауыстыру қажет. Содан кейін осы сілтемені басқан кезде терезе ашылады пошта бағдарламасы«Кімге» өрісіне енгізілген электрондық пошта мекенжайымен. HTML кодында ол келесідей көрінеді:
mailto: [электрондық пошта қорғалған]">Менің поштам
Ал браузерде солай.
Сәлем, құрметті блог сайтының оқырмандары! Өздеріңіз білетіндей, веб-сайтты сәтті жылжыту және оның іздеу нәтижелеріндегі орнын арттыру үшін веб-сайтты жоғары сапалы SEO оңтайландыруын жүргізу қажет. Өз кезегінде ішкі және сыртқы болып бөлінетін «» түсінігі «ішкі және сыртқы сайт сілтемелері» сияқты ұғымдармен тығыз байланысты. Сондықтан біз үшін сайтта қанша сілтеме болуы керек, олардың санын қалай тексеру керек, сайттан қажет емес сілтемелерді қалай алып тастау және оларды индекстеуге тыйым салу, сілтеме массасын қалай көбейту және т.б. білу өте маңызды. Ішкі және сыртқы сілтемелерге қатысты осы және басқа да сұрақтарға жауап беру үшін алдымен HTML тіліндегі сілтеме (немесе гиперсілтеме) не екенін түсінейік.
Бұл мақалада мен сізге сілтеменің не екенін, веб-сайтта HTML тілінде гиперсілтемені қалай жасауға болатынын, сілтемені жаңа терезеде қалай ашуға болатынын, электрондық пошта мекенжайына (электрондық поштаға) сілтемені қалай жасау керектігін және қалай жасауға болатынын айтамын. суретке сілтеме жасаңыз. Біз сондай-ақ html тегтері мен гиперсілтеме атрибуттары, сілтеме анкері, html анкері және хэш сілтемелері сияқты ұғымдарға тоқталамыз. Сонымен, бастайық.
Сілтеме (гиперсілтеме) дегеніміз не.Егер гиперсілтеме жоқ (жойылған, жылжытылған) веб-бетке немесе файлға апарса немесе оның адресі дұрыс болмаса, онда мұндай сілтеме үзілген сілтеме деп аталады. Сайтта бұзылған сілтемелер болмауы керек, өйткені олар келушілерді адастырды және мұндай сілтемені басқан адамның сіздің сайтыңызға оралуы екіталай. Неліктен бұзылған сілтемелер пайда болатыны, оларды қалай табуға және түзетуге болатыны туралы бөлек мақалада сөйлесеміз. Енді жалғастырайық.
Веб-сайтта HTML тілінде сілтеме (гиперсілтеме) қалай жасалады.Өзіңіздің немесе басқа сайтыңыздағы басқа бетке сілтеме жасау өте оңай. Гиперсілтеме жасау үшін браузерге қандай сілтеме екенін айтып, ол апаратын құжаттың мекенжайын көрсету керек. Бұл HTML тегі арқылы жасалады және қажетті href төлсипаты:
Мұнда URL мекенжайы – баратын құжаттың мекенжайы. Және тегтер арасында орналасқан гиперсілтеме мәтіні Және, сілтеме якоры деп аталады және веб-беттің келушісіне көрінеді. Сілтеме мәтіні (зәкір) оқырманға көшудің қайда болатынын хабарлауымен қатар, ол іздеу жүйесін оңтайландыруда (SEO) өте маңызды, өйткені ол сіздің сайтыңыздың рейтингісіне әсер ететін анықтаушы факторлардың бірі ретінде қызмет етеді. осы якорьдегі кілт сөздер үшін. Әдетте рейтингтің бұл түрі сілтеме рейтингі деп аталады.
Абсолютті сілтеме
Олар басқа сайттағы құжатты көрсету үшін қолданылады (сілтеме сыртқы).
Сондай-ақ бір сайттың ішінде абсолютті сілтемелер жасауға болады, бірақ ішкі сілтемелерді жасау үшін қысқарақ көрінетін салыстырмалы адрестерді пайдалану дұрысырақ. Бірақ әртүрлі сайттарды талдай отырып, мен веб-шеберлердің басым көпшілігі абсолютті мекенжайлары бар ішкі сілтемелер жасайтынын байқадым. Мұның артықшылығы бар, өйткені сіздің бетіңіз көшірілген болса, осылайша сіз жұмыс істейтін кері сілтемелерді аласыз.
Көріп отырғаныңыздай, абсолютті сілтемелермен бәрі қарапайым. Салыстырмалылармен қиынырақ, өйткені оларды жасау кезінде сіз href атрибутының қандай мәнін көрсету керектігін түсінуіңіз керек, өйткені ол құжаттардың бастапқы орнына байланысты. Жоғарыда айтқанымдай, мұнымен ешкім алаңдамайды және сайттағы барлық сілтемелерді абсолютті етеді. Дегенмен, егер сіз веб-сайтқа қатысты сілтемелерді қалай дұрыс жасау туралы көбірек білгіңіз келсе, мен ktonanovenkogo.ru блогының авторы Дмитрийдің мақаласын ұсына аламын. Мен ешқашан егжей-тегжейлі және түсінікті түсініктемені көрген емеспін.
Мысалы, мен сізге сайт түбіріне қатысты файлға апаратын сілтеменің қандай болатынын көрсетемін (біз жай ғана ұқсас абсолютті сілтемедегі үшінші қиғаш сызықтың сол жағындағы барлығын қиып аламыз):
Салыстырмалы сілтеме
Негізгіге
Сілтеме мәтіні (зәкір)
Қалқымалы мәтіннің түстері мен дизайны тек параметрлерге байланысты операциялық жүйежәне браузер.
Сілтемені жаңа терезеде қалай ашуға болады.Әдепкі бойынша, сілтемені басқан кезде, ағымдағы терезеде жаңа құжат ашылады. Дегенмен, веб-сайттарды шолу кезінде бұл жеке маған ыңғайлы емес. Мақаланы оқығанда және сілтемені орындаған кезде, мен үшін парақтың жаңа терезеде ашылуы ыңғайлы және алдыңғы мақаланы кез келген уақытта оқуды жалғастыра аламын. Сілтемені жаңа терезеде ашудың тағы бір себебі - басқа біреудің сайтына кірген кезде оқырманның қайтып оралмауы ықтималдығы жоғары. Әсіресе, егер ол бірнеше ауысулар жасаса және бірнеше минут бұрын қайда болғанын есіне түсірмесе.
Тегтің мақсатты атрибуты сілтемені жаңа терезеде ашуға көмектеседі . Әдепкі бойынша оның _self мәні бар, ол әдетте көрсетілмейді. Құжатты жаңа терезеде ашу үшін мақсатты төлсипаттың мәнін _blank мәніне өзгертіңіз:
| 1 | Жаңа терезе |
Жаңа терезе
Ағымдағы терезеде сілтемелер ашылатын басқа біреудің сайтына кіргенде, оларды жаңасында ашқыңыз келсе, не істеу керек? Сіз оларды түймемен емес, тінтуірдің дөңгелегімен басуыңыз керек. Бұл жағдайда Жаңа бетжаңа терезеде ашылады.
Электрондық поштаға сілтемені қалай жасауға болады (электрондық пошта мекенжайы).Осы сілтемені басу арқылы жұмыс істеуге арналған бағдарлама ашылады электрондық пошта арқылы, әдепкі бойынша орнатылған, мұнда «Кімге» өрісі әлдеқашан толтырылады. Хаттың тақырыбы автоматты түрде толтырылуы үшін сізге осы түрдегі электрондық поштаға сілтеме жасау қажет:
Дмитрий КтоНаНовенкого веб-бет мәтінінде бетбелгілерді html анкерлерін қолданбай орнатудың тағы бір әдісін ұсынады. Ол үшін біз беттегі кез келген HTML тегінен бетбелгі жасаймыз, оған әмбебап id төлсипатын тағайындаймыз. Мысалы, h3 тақырып тегін белгілейік:
Тақырып мәтіні
Зәкір атауының бірінші таңбасы ретінде id төлсипатында латын әрпін қосу маңызды, содан кейін кез келген басқа рұқсат етілген таңбаларды пайдалануға болады.
Мысалы, « » тақырыбына оралайық, содан кейін жалғастырайық.
Сіз бір беттің ішінде ғана емес, сонымен қатар сайттың басқа бетіне өту үшін де қажетті орынға өту үшін хэш сілтемелерін пайдалана аласыз. Ол үшін html зәкірін оң жақ беттегі дұрыс жерге орнатамыз, ал хэш-сілтеменің өзінде хэш символының алдына осы беттің адресін жазамыз. Мысалы:
Мәтінді html анкерлік бетбелгіге байланыстырыңыз
HTML тіліндегі гиперсілтемелердің түрлері мен түстері.- Қаралмаған сілтеме көк және асты сызылған.
- Белсенді сілтеме – сілтемені тінтуірмен шерткенде және жаңа бетті жүктеудің басталуы арасындағы уақыт ішінде қызыл түске айналады. Оның бұл күйде жүргеніне аз ғана уақыт болғаны анық.
- Кірілген сілтеме – оны басқаннан кейін оның түсін күлгінге өзгертеді.
HTML құжатындағы гиперсілтемелердің түсін тег пен оның келесі атрибуттары арқылы өзгертуге болады:
- Сілтеме – кірмеген сілтемелердің түсі.
- Alink – белсенді сілтеменің түсі.
- Vlink – кірген сілтемелердің түсі.
Жоғарыда аталған барлық атрибуттарды біріктіруге болады:
| 1 |
Енді HTML бетінде және электрондық поштаға гиперсілтемені қалай жасау керек, суретті қалай сілтеме жасау керек, мәтіндік якорлар, хэш сілтемелер және html анкерлері, html тегтері мен сілтеме атрибуттары қандай екені түсінікті болды деп үміттенемін. Мен HTML тіліндегі қандай сілтемелер және олардың не екенін егжей-тегжейлі айтып беруге тырыстым. Мәтінге гиперсілтемелер кірістіру тек HTML режимінде орындалатынын еске саламын.
Мен бұрын-соңды мұндай ұзақ мақалалар жазған емеспін, 10 000 таңбадан астам. Бірақ бұл жалғасу керек сілтемелер тақырыбының соңы емес.
Бұл мақала сізге пайдалы болса, төмендегі әлеуметтік медиа түймелерін басыңыз. Парақшаларда тағы кездескенше!
Баршаңызға қайырлы күн, қымбатты достарым және оқырмандарым. Сіз менің байқауыма қатысуға шешім қабылдадыңыз және қазірдің өзінде блогерлік саяхатыңыз туралы жазып жатырсыз деп үміттенемін. Мен html тілін зерттеуді жалғастырғым келеді және бүгін мен сізге ең маңызды компоненттердің бірі, атап айтқанда гиперсілтемелер туралы айтқым келеді.
Иә, мұндай гиперсілтемелерсіз Интернет соншалықты ыңғайлы болмас еді. Жоқ, өтірік айтамын. Шарлау мүлде оңай болмас еді. Интернетті оларсыз елестете аласыз ба? Жеке мен емес.
Ал бүгін біз html-де гиперсілтемені енгізуді үйренеміз. Бірақ алдымен мен сізден сұрағым келеді: гиперсілтеменің не екенін және оның қарапайым сілтемеден қандай айырмашылығы бар екенін білесіз бе? Мұнда бәрі қарапайым: сілтеме құжатқа сілтеме жасайтын қарапайым ақпарат бөлігі. Бұл ретте сіз бұл мәтінді баса алмайсыз (ештеңе болмайды), бірақ ақпаратты қайдан іздеу керектігін білесіз.
Мысал: Photoshop бағдарламасында шашты қалай бөлектеу керектігін //site/adobe-photoshop/kak-vydelit-volosy/ сайтынан біле аласыз.
Гиперсілтеме – дәл сол мәтін, тек оның мәні мынада: осы мәтінді басып, қажетті бетке, сайтқа немесе кез келген басқа нысанға өтуге болады. Сонымен қатар, мәтіннің өзі кез келген нәрсе болуы мүмкін, ал мекен-жай ішінде бөлек жазылған және мүлдем басқаша болуы мүмкін. Дегенмен, ауызекі сөйлеуде олар әлі де жай сілтемелер деп аталады. Мұнда гиперсілтеменің мысалы берілген:
Photoshop бағдарламасында шашты қалай дұрыс бояу керектігі туралы менің оқулықтарымның бірінен оқи аласыз.
Бәрібір. Жақсы теория. Енді тәжірибеге көшейік және осы мәселелердің барлығына қайсысы жауапты екенін көрейік.
Жұптастырылған тег гиперсілтеме үшін жауап береді, бірақ ол өздігінен ештеңені білдірмейді. Ол әрқашан атрибутпен бірге жүреді. Және бұл жағдайда біз үнемі дәл сол href жазуымыз керек. Атрибут мәнінде біз қажетті ресурстың өзіне сілтеме қоямыз. Ал мазмұнның өзінде біз мәтіннің өзін жазамыз, ол басылатын болуы керек (басылған кезде жұмыс істейді). Мысалға қараңыз, сіз бәрін түсінесіз деп ойлаймын.
Яндекс іздеу жүйесі
Түсінгеніңіздей, бұл мысалда мен «Яндекс іздеу жүйесі» мәтінінің бір бөлігін басқан кезде, адам href атрибутының мәнінде жазылған мекенжайға бағытталатынын жаздым.
Менің ойымша, сіздердің көпшілігіңіз ішкі және сыртқы сілтемелер бар екенін білесіз. Ішкі сілтемелер бір каталогта, яғни сайтта жүзеге асырылады, ал сыртқы сілтемелер кейбір үшінші тарап ресурсына әкеледі. Ал енді мен екеуін де қалай жасау керектігін көрсетемін.
Ішкі ауысулар Бір қалтадағы файл
Бірақ мұндай ауысу сіз байланыстыратын файл сілтемені орналастыратын файлмен бір қалтада орналасқан жағдайда жұмыс істейді. Басқа опциялар үшін бәрі сәл өзгеше.
Енді не істедік? Және біз келесі әрекеттерді орындадық: фотосуретке апаратын жол pushkin.html файлымен бір қалтада орналасқан бөлек img қалтасында болғандықтан, төлсипат мәніне алдымен қалтаның атын жазуымыз керек және содан кейін қиғаш сызық (/) арқылы құжаттың толық атауы (біздің жағдайда фотосуреттер).
Енді браузерде pushkin.html файлын сақтаңыз және іске қосыңыз. Сіз «Фото» сөзі көк түспен боялғанын және басуға болатынын көресіз, яғни осы сілтемені басу арқылы біз img қалтасында орналасқан fofo.jpg файлына өтеміз.
Қалай? Бәрі түсінікті? Егер бірдеңе болса, сұраудан тартынбаңыз.
Сыртқы ауысуларӘрине, біз сыртқы сілтемелерді атап өтуге болмайды, оны басқаннан кейін біз мүлдем басқа сайтқа апарамыз. Бірақ мұнда күрделі ештеңе жоқ. Мәселе мынада, сіз href мәніне сайттың немесе веб-беттің толық мекенжайын енгізесіз. Мен жоғарыда Яндекспен мысал көрсеттім. Бірақ тағы бір мысал:
Әлеуметтік жобалардың шебері болу үшін оқимын.Мұнда біз белгілі бір сайттың белгілі бір бетіне өтеміз.
Әдепкі бойынша, сілтемені басқан кезде құжат сіздің бетіңізбен бір терезеде ашылады, яғни. сіздің парақшаңыз жабылады. Және бұл жақсы емес. Атап айтқанда, жарнамаланған мазмұн жобалары немесе блогтар үшін сілтемені басқан кезде құжат бетіңізді жаппастан жаңа терезеде немесе қойындыда ашылуы ұсынылады.
Бұл бізге «_blank» мәні бар мақсатты атрибут көмектеседі. Мұнда күрделі ештеңе жоқ. Мұны тек ашылу тегінің ішіне енгізу керек href төлсипатының мәнінен кейін. Біз pushkin.html бетіне сілтеме жасаған lukomorye.html файлынан үзіндіні алайық, тек қазір біз дәл осы атрибутты жазамыз. Ол келесідей болуы керек:
Руслан мен Людмила поэмасынан (Авторы - А.С. Пушкин)
Бұл жерде бәрі түсінікті. Енді мазмұнды басқан кезде жаңа терезеде қажетті бет ашылады. Бұл өте қажет, өйткені егер сіз оны тіркемесеңіз, пайдаланушы сіздің парақшаңызды қалдырады. Сонымен, кез келген жағдайда, ол оны арнайы жаппаса ғана қалады. Барлығын өзіңіз жасауға тырысыңыз, тек өз қолыңызбен бәрін әдемі етіңіз. Көшіру және қою қажет емес.
Әйтеуір осылай. Мен сізге ең маңызды нәрселердің барлығын айтқан сияқтымын, бірақ егер сіз осы бағытта қозғалғыңыз келсе және кәсіби веб-сайттар, блогтар және тіпті интернет-дүкендер жасау үшін HTML және CSS үйренгіңіз келсе, онда осы тақырып бойынша тамаша бейне курсты қараңыз. Сабақтар өте жақсы және веб-сайт құрумен әлі де таныс емес немесе мүлде таныс емес адамдар үшін айтылады.
Міне, осымен бүгінгі сабағымыз аяқталды. Сізге менің мақалам ұнады деп үміттенемін және менің тұрақты оқырманым болсаңыз, қуанышты боласыз. Сондықтан қызықты ештеңені жіберіп алмау үшін менің блог жаңартуларыма жазылуды ұмытпаңыз. Жарайды, барлық бастамаларыңызға сәттілік тілеймін. Сау бол!
Құрметпен, Дмитрий Костин.
