კარგი დღე ყველას, ჩემო ძვირფასო მეგობრებო და მკითხველებო. იმედი მაქვს, რომ თქვენ გადაწყვიტეთ მონაწილეობა მიიღოთ ჩემს კონკურსში და უკვე წერთ თქვენი ბლოგის მოგზაურობის შესახებ. ჰოდა, მინდა გავაგრძელო html ენის შესწავლა და დღეს მინდა გითხრათ ერთ-ერთი ყველაზე მნიშვნელოვანი კომპონენტის, კერძოდ ჰიპერბმულების შესახებ.

დიახ, ასეთი ჰიპერბმულების გარეშე ინტერნეტი არც ისე მოსახერხებელი იქნებოდა. არა, ვიტყუები. სულაც არ იქნებოდა ადვილი ნავიგაცია. წარმოგიდგენიათ ინტერნეტი მათ გარეშე? მე პირადად არა.

და დღეს ჩვენ ვისწავლით თუ როგორ უნდა ჩავსვათ ჰიპერბმული html-ში. მაგრამ ჯერ მინდა გკითხოთ: იცით, რა არის ჰიპერბმული და რით განსხვავდება ის ჩვეულებრივი ბმულისგან? აქ ყველაფერი რეალურად მარტივია: ბმული არის მარტივი ინფორმაცია, რომელიც ეხება დოკუმენტს. ამავდროულად, თქვენ არ შეგიძლიათ დააწკაპუნოთ ამ ტექსტზე (არაფერი მოხდება), მაგრამ იცით, სად უნდა მოძებნოთ ინფორმაცია.

მაგალითი: თქვენ შეგიძლიათ ისწავლოთ თმის მოხაზვა Photoshop-ში: //site/adobe-photoshop/kak-vydelit-volosy/

ჰიპერბმული არის იგივე ტექსტი, მხოლოდ მისი არსი არის ის, რომ თქვენ შეგიძლიათ დააჭიროთ ამ ტექსტს და მოხვდეთ სასურველ გვერდზე, საიტზე ან ნებისმიერ სხვა ობიექტზე. უფრო მეტიც, თავად ტექსტი შეიძლება იყოს ნებისმიერი, ხოლო მისამართი იწერება ცალკე შიგნით და შეიძლება იყოს სრულიად განსხვავებული. როგორც ეს შეიძლება იყოს, სასაუბრო მეტყველებაში მათ ჯერ კიდევ უბრალოდ ბმულებს უწოდებენ. აქ არის ჰიპერბმულის მაგალითი:

თქვენ შეგიძლიათ წაიკითხოთ იმის შესახებ, თუ როგორ უნდა გამოვყოთ თმა სწორად Photoshop-ში, ჩემს ერთ-ერთ გაკვეთილზე.

ოჰ კარგად. კარგი თეორია. ახლა მოდით გადავიდეთ პრაქტიკაზე და ვნახოთ, ვინ არის პასუხისმგებელი ყველა ამ საკითხზე.

დაწყვილებული ტეგი პასუხისმგებელია ჰიპერბმულზე, მაგრამ თავისთავად ის არაფერს წარმოადგენს. ის ყოველთვის ატრიბუტთან ერთად მიდის. და ამ შემთხვევაში, ჩვენ მუდმივად უნდა დავწეროთ იგივე href. ატრიბუტის მნიშვნელობაში ჩვენ ვდებთ ბმულს სასურველ რესურსზე. და თავად შინაარსში ვწერთ ტექსტს, რომელიც უნდა გახდეს დაწკაპუნება (მუშაობა დაწკაპუნებისას). შეხედე მაგალითს და მგონი ყველაფერს მიხვდები.

Yandex საძიებო სისტემა

როგორც გესმით, ამ მაგალითში მე დავწერე, რომ როდესაც თქვენ დააწკაპუნებთ ტექსტის ნაწილზე "Yandex საძიებო სისტემა", ადამიანი მიმართული იქნება მისამართზე, რომელიც დაწერილია href ატრიბუტის მნიშვნელობაში.

ვფიქრობ, ბევრმა თქვენგანმა იცის, რომ არსებობს შიდა და გარე ბმულები. შიდა ბმულები ხორციელდება ერთი დირექტორიაში, ანუ საიტზე, ხოლო გარე ბმულები იწვევს მესამე მხარის რესურსს. ახლა კი გაჩვენებთ როგორ გააკეთოთ ორივე.

შიდა გადასვლები

ფაილი იმავე საქაღალდეში

მაგრამ ასეთი გადასვლა იმუშავებს იმ პირობით, რომ ფაილი, რომელსაც თქვენ აკავშირებთ, მდებარეობს იმავე საქაღალდეში, სადაც ფაილი, რომელშიც თქვენ ათავსებთ ბმულს. სხვა ვარიანტებისთვის, ყველაფერი ცოტა განსხვავებულია.

ფაილი სხვა საქაღალდეში

1. გახსენით pushkin.html ფაილი Notepad++-ში
2. ახლა იპოვნეთ სიტყვა ფოტო და გადაიტანეთ იგი ტეგებში<a href> .
3. ახლა ყურადღება! ატრიბუტის მნიშვნელობაში ჩვენ განვსაზღვრავთ გზას რედაქტირებულ ფაილთან მიმართებაში, ანუ თავად pushkin.html. თქვენ უნდა დაასრულოთ ასეთი რამ:

ფოტო

რა გავაკეთეთ ახლა? და ჩვენ გავაკეთეთ შემდეგი: რადგან ფოტოგრაფიის გზა დევს ცალკე საქაღალდე img, რომელიც მდებარეობს იმავე საქაღალდეში, სადაც pushkin.html ფაილი, შემდეგ ატრიბუტის მნიშვნელობაში ჯერ უნდა ჩავწეროთ საქაღალდის სახელი, შემდეგ კი, ხაზის (/) საშუალებით, დოკუმენტის სრული სახელი (in ჩვენი საქმე, ფოტოები).

ახლა შეინახეთ და გაუშვით pushkin.html ფაილი თქვენს ბრაუზერში. დაინახავთ, რომ სიტყვა „ფოტო“ ლურჯად არის მონიშნული და გახდა დაწკაპუნებული, რაც ნიშნავს, რომ ამ ბმულზე დაწკაპუნებით გადავალთ ფაილში fofo.jpg, რომელიც მდებარეობს img საქაღალდეში.

მაშ როგორ? ყველაფერი გასაგებია? თუ რამე მოხდება, ნუ დააყოვნებთ კითხვას.

გარე გადასვლები

და რა თქმა უნდა, არ შეიძლება არ აღვნიშნოთ გარე ბმულები, რომლებზედაც დაწკაპუნების შემდეგ გადავიყვანთ სრულიად განსხვავებულ საიტზე. მაგრამ აქ არაფერია რთული. მთელი საქმე იმაშია, რომ თქვენ განათავსებთ საიტის ან ვებ გვერდის სრულ მისამართს href მნიშვნელობაში. მე ვაჩვენე მაგალითი Yandex-თან ზემოთ. მაგრამ აქ არის კიდევ ერთი მაგალითი:

ვისწავლი, რომ გავხდე სოციალური პროექტების მაგისტრი.

აქ მივდივართ კონკრეტული საიტის კონკრეტულ გვერდზე.

იხსნება ახალ ფანჯარაში

ნაგულისხმევად, ბმულზე დაწკაპუნებისას, დოკუმენტი იხსნება იმავე ფანჯარაში, სადაც თქვენი გვერდი, ე.ი. თქვენი გვერდი დაიხურება. და ეს არ არის კარგი. კერძოდ, პრომოირებული კონტენტის პროექტებისა თუ ბლოგებისთვის, რეკომენდებულია, რომ ბმულზე დაწკაპუნებისას დოკუმენტი გაიხსნას ახალ ფანჯარაში ან ჩანართში თქვენი გვერდის დახურვის გარეშე.

ამაში დაგვეხმარება სამიზნე ატრიბუტი მნიშვნელობით „_blank“. აქ არაფერია რთული. თქვენ უბრალოდ დაგჭირდებათ ამის ჩასმა გახსნის ტეგში href ატრიბუტის მნიშვნელობის შემდეგ. ავიღოთ ის ამონაწერი ფაილიდან lukomorye.html, სადაც დავაყენეთ ბმული pushkin.html გვერდზე, მხოლოდ ახლა დავწერთ სწორედ ამ ატრიბუტს. ეს ასე უნდა გამოიყურებოდეს:

ლექსიდან რუსლან და ლუდმილა (ავტორი - A.S. პუშკინი)

ისე, აქ ყველაფერი გასაგებია. ახლა, როდესაც დააწკაპუნებთ შინაარსზე, სასურველი გვერდი გაიხსნება ახალ ფანჯარაში. ეს ძალიან აუცილებელია, რადგან თუ არ დარეგისტრირდებით, მომხმარებელი უბრალოდ დატოვებს თქვენს გვერდს. ასე რომ, ნებისმიერ შემთხვევაში, ის დარჩება მასზე, მხოლოდ იმ შემთხვევაში, თუ კონკრეტულად არ დახურავს მას. ეცადე ყველაფერი თავად გააკეთო, უბრალოდ შენი ხელით გაალამაზე ყველაფერი. არ არის საჭირო კოპირება და ჩასმა.

აბა, რაღაც ამდაგვარი. როგორც ჩანს, მე გითხარით ყველა ყველაზე მნიშვნელოვანი რამ, მაგრამ თუ გსურთ ამ მიმართულებით გადაადგილება და ისწავლეთ HTML და CSS პროფესიონალური ვებსაიტების, ბლოგების და თუნდაც ონლაინ მაღაზიების შესაქმნელად, აუცილებლად შეამოწმეთ ეს შესანიშნავი ვიდეო კურსიამ თემაზე. გაკვეთილები მართლაც შესანიშნავია და ნამდვილად არის მოთხრობილი მათთვის, ვინც ჯერ კიდევ ნაკლებად იცნობს ვებსაიტების შექმნას ან საერთოდ არ იცნობს.

კარგი, ამით დასრულდა ჩვენი დღევანდელი გაკვეთილი. იმედი მაქვს მოგეწონათ ჩემი სტატია და მოხარული ვიქნები, თუ გახდებით ჩემი რეგულარული მკითხველი. ასე რომ, არ დაგავიწყდეთ ჩემი ბლოგის განახლებების გამოწერა, რათა არ გამოგრჩეთ რაიმე საინტერესო. ისე, წარმატებებს გისურვებ ყველა მცდელობაში. ნახვამდის!

პატივისცემით, დიმიტრი კოსტინი.

ამ გაკვეთილზე ვისაუბრებთ როგორ გავაკეთოთ ბმული HTML-ში. ბმულები ძალიან ხშირად გამოიყენება ვებსაიტებზე, ისინი საშუალებას გაძლევთ გადახვიდეთ ვებსაიტის ერთი გვერდიდან მეორეზე. ბმულების თავისებურება ის არის, რომ მათ შეუძლიათ მიიყვანონ არა მხოლოდ ვებ გვერდზე, არამედ ფაილებამდე, სურათებამდე და ა.შ.

ბმულები შეიძლება იყოს შიდა და გარე. შიდა ბმულები მივყავართ გვერდებსა და ფაილებს ერთ საიტზე. გარე ბმულები მიდის მესამე მხარის საიტებზე, დოკუმენტებსა და ფაილებზე. ამავდროულად, ამ ტიპის ბმულები დაყენებულია თითქმის იდენტურად.

როგორ გავაკეთოთ ბმული HTML-ში, მაგალითები

1. HREF— პასუხისმგებელია იმაზე, თუ სად უნდა მივიდეს ბმული. სტანდარტული ბმული მითითებულია შემდეგნაირად: ბმული ტექსტი.

2. სამიზნე— პასუხისმგებელია ფანჯარაზე, რომელშიც გაიხსნება დოკუმენტი. ნაგულისხმევად, ახალი დოკუმენტი იხსნება ბრაუზერის მიმდინარე ფანჯარაში. "სამიზნე" ატრიბუტი საშუალებას გაძლევთ გახსნათ ბმული ბრაუზერის ახალ ფანჯარაში. ამ ატრიბუტს აქვს შემდეგი პარამეტრები:

• _blank - იტვირთება გვერდი ახალ ფანჯარაში;
• _self - იტვირთება გვერდი მიმდინარე ფანჯარაში;
• _parent - იტვირთება გვერდი მშობლის ჩარჩოში;
• _top - აუქმებს ყველა ფრეიმს და იტვირთება გვერდი ახალ ფანჯარაში.

3. NAME- გამოიყენება გვერდის კონკრეტულ ზონაში ნავიგაციისთვის. ჰეშის სიმბოლოს შემდეგ საკვანძო სიტყვა (სანიშნე ან ტეგი) მითითებულია ბრჭყალებში. ამ ეტიკეტზე გადასასვლელად გამოიყენეთ ბმული, რომელშიც ეს ლეიბლი წერია.

გადადით საიტზე

გადადით საიტზე

WordPress-ის უფასო გაკვეთილები

მაგალითი 4: სურათები, როგორც ბმულები.

გადადით ტექსტზე

გვერდის ტექსტი...

IN ამ მაგალითშიგვერდი იარლიყით არის „სიტი“ „სახელი“ ატრიბუტის გამოყენებით. ამ ლეიბლის ბმული მიგიყვანთ კონკრეტული ტერიტორიაგვერდები.

ფაილის ჩამოტვირთვა

დაწერე წერილი

თქვენ შეგიძლიათ დააყენოთ ბმულების ფერი ატრიბუტების გამოყენებით, რომლებიც მითითებულია "სხეულის" ტეგში, როგორც პარამეტრები. განვიხილოთ ეს ატრიბუტები:

• ბმული - დაუთვალიერებელი ბმული, ნაგულისხმევად გამოსახულია ლურჯად;
• alink - აქტიური ბმული, ნაგულისხმევად წითელი;
• vlink - მონახულებული ბმული, ნაგულისხმევად იასამნისფერი.

...

ამრიგად, ჩვენ გავარკვიეთ პრინციპი, რომლითაც იქმნება ბმულები HTML-ში. ბმულებს შეიძლება მიეცეს კონკრეტული სტილი. ამის შესახებ გაკვეთილზე შეგიძლიათ იხილოთ ბმულზე.

გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო. ამ განყოფილების შემდეგ სტატიაში ჩვენ გავაგრძელებთ ტეგების ყურებას. ადრე ვისწავლეთ ), ვისაუბრეთ კომენტარების ფორმატირებაზე და ) და ასევე შევეხეთ კოსმოსური სიმბოლოების თემას HTML კოდიდა . დიახ, ჩვენ ასევე განვიხილეთ შესაძლებლობები.

დღეს მინდა უფრო დეტალურად ვისაუბრო ჰიპერტექსტის მარკირების ენის იმ ელემენტებზე, რომლებსაც ყველაზე ხშირად შეხვდებით თქვენს ვებ პროექტზე მუშაობისას. მე ვლაპარაკობ სურათების და ჰიპერბმულების ჩასმავებ გვერდების კოდში. ამის ცოდნის გარეშე, ძალიან რთული იქნება ვებსაიტის დიზაინზე პროდუქტიული მუშაობა. ეს ტეგები აქტიურად გამოიყენება როგორც სტატიების წერისა და დიზაინის დროს, ასევე ძრავის ჩარჩოზე გადაჭიმული შაბლონის შექმნისას.

როგორ ჩავსვათ სურათი - html Img ტეგები

ვთქვათ, რომ იყენებთ ვიზუალურ რედაქტორს სტატიების დასაწერად, რაც საშუალებას გაძლევთ არ იფიქროთ იმაზე, თუ როგორ იწერება კოდში სურათების და ჰიპერბმულების ტეგები. მაგრამ ფაქტია, რომ არცერთი რედაქტორი არ არის იდეალური და ხშირად სტატიის ტექსტის დიზაინში კიდევ ერთი ხარვეზის გამოსასწორებლად, თქვენ უბრალოდ უნდა გადახვიდეთ html რედაქტორის რეჟიმში და შეცვალოთ პირდაპირ სურათების ტეგებში და თავად ბმულები.

თუ იცით, როგორ ჩასვათ სურათები და ბმულები HTML დოკუმენტში, ეს მნიშვნელოვნად გაამარტივებს თქვენს ცხოვრებას და დაზოგავს დროს. უფრო მეტიც, ათი ყველაზე გავრცელებული ელემენტის შესწავლა არ არის რთული. სინამდვილეში, არც ისე ბევრი ტეგი დარჩა და, რა თქმა უნდა, დღევანდელი გმირები ყველაზე გავრცელებული და ხშირად გამოყენებულია.

მეორეს მხრივ, იგივე ელემენტები ასევე აქტიურად გამოიყენება იმ შაბლონის დიზაინში, რომელსაც იყენებთ - ლინკების, სურათების, კონტეინერების, სიების ჩასმა (მათზე ვსაუბრობთ), სხვადასხვა და ა.შ.

და, შესაბამისად, შაბლონის სტრუქტურის გასაგებად (იგი საუბრობს ჯომლას შაბლონებზე და WordPress თემები) და, საჭიროების შემთხვევაში, შეიტანეთ ცვლილებები მასში, კვლავ უნდა იცოდეთ კოდის ელემენტების მცირე რაოდენობა მაინც. მერწმუნეთ, ამაზე დახარჯული დრო სამომავლოდ უფრო მეტს გამოიღებს. კარგი, დავუშვათ, რომ მე დაგარწმუნეთ მარკირების ენის გაცნობის აუცილებლობაში და დროა პირდაპირ გადავიდეთ ჩვენი დღევანდელი გამოცემის გმირებზე.

სურათების ჩასმაგვერდზე გამოიყენება HTML Img ტეგი. ქვემოთ მოყვანილი სურათი ჩასმულია მისი გამოყენებით:

Src ატრიბუტი საშუალებას გაძლევთ მიუთითოთ სურათის ფაილის სახელი და შენახვის ადგილი (სხვა სიტყვებით რომ ვთქვათ, მისკენ მიმავალი გზა). ამ შემთხვევაში, ის შეიძლება მიუთითებდეს ფაილზე გამოსახულების მქონე. ბილიკები მითითებულია "/" სიმბოლოს გამოყენებით, რომელიც ემსახურება როგორც გამყოფს იმ ქვედირექტორიების სახელებს შორის, რომლებშიც ინახება სურათების ფაილები.

Src-ის აბსოლუტური გზა დაიწყება http://vash_sait.ru-დან (ჩემი ბლოგისთვის -). შემდეგი, "/"-ის გამოყენებით ქვესაქაღალდეების სახელების გამოსაყოფად, იწერება სურათის ფაილის სრული გზა, რომელიც მთავრდება თავად ფაილის სახელით და გაფართოებით. მაგალითად,

ფარდობითი გზა Src-ში დგინდება ფარდობითი გზის განსაზღვრით წყაროს საქაღალდედან, რომელიც შეიცავს თავად HTML დოკუმენტის ფაილს და საიდანაც ცდილობთ სურათის გახსნას გრაფიკულ ფაილამდე. თუ ეს ფაილი სერვერზე მდებარეობს იმავე საქაღალდეში, როგორც დოკუმენტი, საიდანაც მასზე წვდომა ხდება, მაშინ არ გჭირდებათ მისკენ მიმავალი ბილიკის მითითება - თქვენ მხოლოდ უნდა მიუთითოთ გრაფიკული ფაილის სახელი (ასოების ქეისის შენახვა ).

თუ ეს ფაილი მდებარეობს იმავე სერვერზე, მაგრამ სხვა დირექტორიაში, თქვენ უნდა მიუთითოთ მისკენ მიმავალი გზა იმ დირექტორიადან, სადაც მდებარეობს დოკუმენტი, საიდანაც მასზე წვდომა ხდება (ზემოთ ნაჩვენები მაგალითში, გამოიყენება შედარებითი გზა - image/finik.jpg) .

დააყენეთ გამოსახულების სიგანე და სიმაღლე Width და Height ატრიბუტების გამოყენებით

Html ატრიბუტები Width და Height საშუალებას გაძლევთ დააყენოთ ფართობის ზომა (სიგანე და სიმაღლე, შესაბამისად), რომელიც გამოყოფილი იქნება გვერდზე ამ სურათისთვის. ისინი ჩასმულია Img ტეგის შიგნით, მაგალითად ასე:

თუ ეს ტერიტორია არ ემთხვევა რეალური ზომასურათი, რომლის ჩასმაც გსურთ, სურათი დაიჭიმება ან ვიწროვდება მითითებული ზომის შესაბამისად. თუმცა, თქვენ არ უნდა გამოიყენოთ ეს მეთოდი, ვთქვათ, დოკუმენტში ჩასმული სურათის ზომის შესამცირებლად. ყოველივე ამის შემდეგ, მისი წონა კვლავ დიდი დარჩება და ეს შეანელებს ვებ გვერდის დატვირთვას.

უმჯობესია ჯერ სურათის ზომა შეცვალოთ გრაფიკული რედაქტორი(შეგიძლიათ ამის გაკეთებაც კი) და მხოლოდ ამის შემდეგ ჩადეთ დოკუმენტში. ასევე, გრაფიკული ფაილის შენახვისას ყურადღება უნდა მიაქციოთ მის საბოლოო წონას. ის არ უნდა იყოს ძალიან დიდი. ხანდახან უმჯობესია შესწიროთ სურათის მცირე ხარისხი (საბედნიეროდ, მცირე ზომებით ეს პრაქტიკულად შეუმჩნეველი იქნება) საბოლოო წონის შესამცირებლად.

ნახატების შენახვისას გამოიყენეთ კომპაქტური ტიპის GIF (სქემური სურათების ჩასართავად) ან JPG (ფოტოების ჩასართავად). სიგანე და სიმაღლე, განსხვავებით Src ატრიბუტისაგან (ერთადერთი სავალდებულო Img ტეგში), არჩევითია. ბევრი უბრალოდ არ მიუთითებს მათ, მაგრამ ისინი, მიუხედავად ამისა, ოდნავ უშვებენ დააჩქარეთ დოკუმენტის ჩატვირთვა.

ფაქტია, რომ თუ ბრაუზერი ვერ პოულობს სიგანეს და სიმაღლეს html Img ტეგში, მაშინ დრო დასჭირდება სურათის ზომის გარკვევას, ჩატვირთვას და მხოლოდ ამის შემდეგ გააგრძელეთ დოკუმენტის დანარჩენი შინაარსის ჩამოტვირთვა. . იმ შემთხვევაში, როდესაც თქვენ მიუთითეთ სიმაღლე და სიგანე, ბრაუზერი ავტომატურად იტოვებს ადგილს ამ ატრიბუტებში მითითებული ზომების გამოსახულებაზე და განაგრძობს ვებ გვერდის შემდგომ ჩატვირთვას.

თუ გრაფიკული ფაილები გამოდის ამ გვერდზეძალიან მძიმეა და ბევრია, შემდეგ Height and Width-ის ჩასმა მომხმარებლებს საშუალებას მისცემს დაიწყონ საიტის ტექსტის კითხვა, სანამ გრაფიკა ჯერ კიდევ იტვირთება.

ასევე, თუ Img-ში არ მიუთითებთ სიგანესა და სიმაღლეზე, მაშინ შეიძლება წარმოიქმნას სიტუაცია, როდესაც პატარა სურათით და ძალიან გრძელი ალტერნატიული ტექსტით (დაყენებულია Alt ატრიბუტით Img ტეგში, განხილული ქვემოთ), მოხდება დროებითი ცვლა. სანამ გრაფიკა იტვირთება ვებ-გვერდის დიზაინი, რადგან გრძელი ალტ ტექსტი დაიკავებს იმდენ ადგილს, რამდენიც სჭირდება.

თუ გამოიყენება სიგანე და სიმაღლე, ალტერნატიული ტექსტის ჩვენების სივრცე შემოიფარგლება მათში მითითებული ზომებით. უმეტესწილად, სწორედ ამიტომ ვცდილობ დავწერო ეს ატრიბუტები Img ტეგში.

Alt და Title html Img ტეგში

ძალიან სასარგებლოა შიდა თვალსაზრისით საძიებო სისტემის ოპტიმიზაციასაიტი არის Alt და Title ატრიბუტები. წაიკითხეთ და დააწინაურეთ საიტი თავად ან "" პუბლიკაციაში.

პირველი მათგანი გამოსახულების ალტერნატიულ ტექსტს ადგენს. თქვენ შეგიძლიათ ნახოთ ეს ტექსტი, თუ გამორთავთ გრაფიკას თქვენს ბრაუზერში. Alt განკუთვნილია ამისათვის - გითხრათ საძიებო სისტემებიიმის შესახებ, თუ როგორი ნახატი უნდა იყოს. სათაური მიზნად ისახავს მომხმარებლის ინფორმირებას სურათის შინაარსის შესახებ.

სათაურის შიგთავსი Img ტეგიდან ნაჩვენებია ამომხტარი ხაზით, თუ მომხმარებელი გადააადგილებს მაუსს სურათზე. ორივე ეს ატრიბუტი (თუ თქვენ მითითებული გაქვთ) საშუალებას გაძლევთ ჩართოთ თქვენი ვებ პროექტის სურათები . ამიტომ, არ უნდა უგულებელყოთ ეს შესაძლებლობა და აუცილებლად დაარეგისტრირეთ მინიმუმ Alt. თქვენი სურათების განლაგება უნდა იყოს მსგავსი:

სინამდვილეში, არსებობს საკმაოდ ბევრი ატრიბუტი, რაც შეიძლება იყოს და თქვენ შეგიძლიათ ნახოთ ისინი, სულ მცირე, მოცემული ბმულის გამოყენებით. მაგრამ პრაქტიკაში, თქვენ, სავარაუდოდ, გამოიყენებთ მხოლოდ ჩემს მიერ ჩამოთვლილ ამ სტატიაში.

კიდევ ერთხელ შეგახსენებთ ტეგების დაწერის წესებს. გახსნის სამკუთხა ფრჩხილის შემდეგ, ყოველთვის ინტერვალის გარეშე, იწერება მისი სახელი, შემდეგ ინტერვალით გამოყოფილი იწერება მისთვის დაშვებული ატრიბუტის სახელი. ატრიბუტის სახელის შემდეგ, ინტერვალის გარეშე, მოთავსებულია ტოლობის ნიშანი და მისი პარამეტრი იწერება ბრჭყალებში (მაგალითად, სიგანე პიქსელებში Width-ისთვის).

შემდეგი ატრიბუტი html ტეგის შიგნით წინა ატრიბუტისაგან გამოყოფილია ინტერვალით. ბოლოში არის დახურული სამკუთხა სამაგრი. გთხოვთ გაითვალისწინოთ, რომ Img არ არის დაწყვილებული, ე.ი. მას არ აქვს დახურვის ტეგი.

იდეალურ შემთხვევაში, ასე უნდა იყოს შექმნილი თქვენს ვებ პროექტში გამოყენებული ყველა სურათი. ამ იერის მიღწევა შესაძლებელია თითოეული სურათისთვის HTML კოდის ხელით რედაქტირების გარეშე. სხვადასხვა CMS-ის ვიზუალური რედაქტორები (Joomla, WordPress და ა.შ.) საშუალებას გაძლევთ დააყენოთ მთელი ეს სიმდიდრე მომხმარებლისთვის მოსახერხებელი გზით. გრაფიკული ინტერფეისი, მაგრამ საცდელი დაყენების შემდეგ, დარწმუნდით, რომ შეამოწმეთ კოდი (ნებისმიერი ვიზუალური რედაქტორიშეგიძლიათ გადახვიდეთ სტატიის html კოდის ჩვენებაზე).

შექმენით ჰიპერბმულები html ბმულის ტეგის "A" გამოყენებით

ბმული HTML-ში დოკუმენტის ორგანიზების ერთ-ერთი მთავარი ელემენტია. მათ გარეშე ვებ გვერდი უბრალოდ გვერდი იქნებოდა. ისინი იქმნება "A" ტეგის გამოყენებით. ერთადერთი საჭირო ატრიბუტი არის Href. იგი განსაზღვრავს URL-ს (გზას), სადაც მომხმარებელი უნდა წავიდეს ამ ჰიპერბმულზე დაწკაპუნებით.

ბმული შეიძლება მიგიყვანოთ თქვენი რესურსის შიდა გვერდზე (შიდა ოპტიმიზაციის ძალიან მნიშვნელოვანი პუნქტი კონკრეტულად არის დაკავშირებული) ან სხვა პროექტის გვერდზე. HTML ტეგი A დაწყვილებულია და, შესაბამისად, აქვს დახურვის ელემენტი. ჰიპერბმულის ტექსტი (წამყვანი - მასზე დაწვრილებით არის დაწერილი პოპულარიზაციის თვალსაზრისით SEO პოპულარიზაცია) მოთავსებულია გახსნის და დახურვის "A" ტეგებს შორის.

საძიებო სისტემები აანალიზებენ არა მხოლოდ თავად წამყვანს, არამედ მის გარშემო არსებულ სიტყვებსაც. ეს გასათვალისწინებელია თქვენი საიტის სხვა რესურსებზე ბმულების განთავსებისას. იმისათვის, რომ ის უფრო ბუნებრივად გამოიყურებოდეს, შეგიძლიათ ტექსტის ნაწილი გადაიტანოთ წამყვანის გარეთ, მაგალითად:

იხსნება ახალ ფანჯარაში და ბმული სურათიდან (სურათი)

კარგი, საძიებო სისტემის ოპტიმიზაციით ისევ გავფანტეთ ყურადღება. დავუბრუნდეთ ტეგებს. html ტეგისთვის "A" არის ერთი ძალიან აუცილებელი ატრიბუტი, რომელიც საშუალებას მოგცემთ გახსნათ გვერდი, სადაც ეს ბმული მიდის ახალ ფანჯარაში. ეს შეიძლება საჭირო გახდეს, თუ ბმულს უგზავნით ბევრ გარე დოკუმენტს ერთი გვერდიდან. ამ შემთხვევაში, ვიზიტორისთვის უფრო მოსახერხებელი იქნება, რომ თქვენი გვერდი ყოველთვის ღია იყოს.

Target-ს აქვს ამ მიზნით ვარიანტი, რომელიც საშუალებას გაძლევთ გახსნათ გვერდი ახალ ფანჯარაში, სახელწოდებით _ბლანკი. თუ Target არ არის მითითებული A ტეგში, მაშინ ბმული გაიხსნება იმავე ფანჯარაში. გამოყენების მაგალითი სამიზნე ატრიბუტი:

წამყვანი (თუ ბმული გამოიყენება შიდა ბმულისთვის, მაშინ ეს ტექსტი უნდა შეიცავდეს საკვანძო სიტყვებს, რომლებითაც გსურთ სტატიის პოპულარიზაცია, რომლისკენაც მიდის ეს ჰიპერბმული)

გთხოვთ გაითვალისწინოთ, რომ ტეგებში ატრიბუტების თანმიმდევრობა არანაირად არ არის რეგულირებული. იგივე წარმატებით შეგიძლიათ დაწეროთ:

არსებობს მოსაზრება, რომ საძიებო სისტემები უფრო მეტად აფასებენ ბმულებს სურათებიდან, მაგრამ ზოგიერთი მონაცემის მიხედვით პირიქითაა. მაგრამ ამ ტიპის ბმულების გამოყენებისას, არ არსებობს წამყვანი, რომელშიც შეგეძლოთ საჭიროების ჩასმა საკვანძო სიტყვები. ამ შემთხვევაში, შეგიძლიათ გამოიყენოთ Title ატრიბუტი A ტეგისთვის.

Ru/image/finik.jpg" სიგანე = "200" სიმაღლე = "150">

სათაური ასევე შეიძლება გამოყენებულ იქნას ჩვეულებრივი ტექსტის წამყვანის შემთხვევაში. ამ შემთხვევაში, მასში დაწერილი ინფორმაცია გამოჩნდება, თუ მაუსის კურსორს გადაიტანთ ჰიპერბმულზე. სინამდვილეში, ეს ატრიბუტი შეიძლება გამოყენებულ იქნას თითქმის ყველა ტეგში HTML ენა, მაგრამ ეს დიდად არ გამოდგება.

აქ თქვენ უნდა ჩაწეროთ საკვანძო სიტყვები, რომლებითაც გსურთ სტატიის პოპულარიზაცია, რომლისკენაც მიდის ეს ჰიპერბმული

წამყვანების და ჰეშის ბმულების შექმნა

კიდევ ერთი საინტერესო ატრიბუტი არის NAME, რომელიც საკმაოდ ფართოდ გამოიყენებოდა ე.წ. ცოტა გაუგებარია, მაგრამ ახლა ვეცდები გარკვევას. ვთქვათ გჭირდებათ მიუთითეთ კონკრეტული ადგილი დოკუმენტის ტექსტში(დასაწყისში არა), სადაც განიხილება გარკვეული საკითხი.

თუ ამ სტატიას უბრალო ჰიპერბმულს დაუსვამთ, მასზე დაწკაპუნების შემდეგ სტატია თავიდანვე გაიხსნება და მომხმარებელს მოუწევს მასში მოძებნოს ის ადგილი, რომელზეც სურდათ ყურადღების გამახვილება. ასე რომ, წამყვანების და ჰეშის ბმულების დახმარებით შეგიძლიათ დარწმუნდეთ, რომ სტატია იხსნება ზუსტად იქ, სადაც თქვენ აპირებდით და მომხმარებელს არ მოუწევს ზედმეტი მასალის გათხრა.

Html დოკუმენტში ჰიპერბმულების შექმნის აღწერილი მეთოდის განსახორციელებლად, მანამდე საჭირო იყო ჯერ სტატიაში ჩასვათ წამყვანმა, რომლისკენაც მიიყვანდა ჰეშის ბმული. წამყვანი იყო სტრუქტურა, რომელიც მოგაგონებდათ ჩვეულებრივ ბმულს, მაგრამ ამავე დროს იგი უხილავი რჩებოდა მნახველისთვის. ის ასე გამოიყურებოდა:

იმათ. ირკვევა, რომ წამყვანი შედგებოდა მხოლოდ გახსნისა და დახურვის ტეგისაგან „A“, მაშინ როცა ის არ შეიცავდა წამყვანს და ჰქონდა ერთი საჭირო NAME ატრიბუტი. ამ ატრიბუტის პარამეტრი იყო ლეიბლი, რომლის სახელი თქვენ თავად უნდა მიუთითოთ. ეს ლეიბლი მოგვიანებით გამოიყენეს ჰეშის ბმულის შესაქმნელად.

ახლა ეს არის წამყვანების ჩასმის გზა მოძველებულად ითვლებადა Html კოდის ვალიდატორი ჩაითვლება როგორც შეცდომა. გთხოვთ მიაქციოთ ამას ყურადღება. წამყვანები ახლა განთავსებულია უახლოეს ტეგზე დამატებით.

ვთქვათ, რომ სტატიის სათაური შეიძლება ასე გამოიყურებოდეს:

სათაური

ასე რომ, მას შემდეგ, რაც სტატიის ტექსტში მოვათავსებთ ყველა აუცილებელ წამყვანს, შეგვიძლია დავიწყოთ ჰეშის ბმულების შექმნა, რომლებიც მიუთითებენ სტატიის ტექსტში არსებულ ადგილებზე, რომლებიც ადრე იყო მონიშნული ზემოთ აღწერილი წესით (ID-ის ამომრჩეველის გამოყენებით) .

ჰიპერბმული იქმნება სტანდარტული გზით, გარდა იმისა, რომ Url-ის ბოლოს, რომელიც წერია Href-ში, მოთავსებულია ჰეშის ნიშანი (მკვეთრი ნიშანი ან ჰეშის სიმბოლო) და მის შემდეგ მოდის წამყვანის ეტიკეტის სახელი. რომელიც სტატიის ტექსტში საჭირო ადგილზეა.

წამყვანი

თუ წამყვანი არის იმავე Html დოკუმენტში, როგორც ჰეშის ბმული, მაშინ მხოლოდ წამყვანის მითითება შეიძლება.

წამყვანი

წარმატებებს გისურვებთ! მალე შევხვდებით ბლოგის საიტის გვერდებზე

შეიძლება დაგაინტერესოთ

სიები Html კოდით - UL, OL, LI და DL ტეგები
როგორ არის დაყენებული ფერები Html და CSS კოდებში, RGB ჩრდილების შერჩევა ცხრილებში, Yandex გამომავალი და სხვა პროგრამები
HTML ფორმებისაიტისთვის - ტეგები Form, Input and Select, Option, Textarea, Label და სხვა ვებ ფორმის ელემენტების შესაქმნელად
Img - Html ტეგი სურათის ჩასართავად (Src), მის გარშემო ტექსტის გასწორებისა და შესაფუთისთვის (გასწორება), ასევე ფონის დასაყენებლად (ფონი)
როგორ შევქმნათ ჰიპერბმული (A, Href, Target blank), როგორ გავხსნათ იგი საიტის ახალ ფანჯარაში და ასევე გავხადოთ სურათი Html კოდით ბმული
Iframe და Frame - რა არის ისინი და როგორ საუკეთესოდ გამოვიყენოთ ჩარჩოები Html-ში
MailTo - რა არის და როგორ შევქმნათ ბმული Html-ში ელფოსტის გასაგზავნად აირჩიეთ, Option, Textarea, Label, Fieldset, Legend - Html ტეგები ჩამოსაშლელი სიებისა და ტექსტური ველებისთვის
ჩაშენება და ობიექტი - HTML ტეგებივებ გვერდებზე მედია კონტენტის (ვიდეო, ფლეშ, აუდიო) ჩვენებისთვის
კომენტარების დირექტივები და Doctype Html კოდში, ასევე ბლოკის და ინლაინ ელემენტების კონცეფცია (ტეგები)

ჰიპერბმულები გამოიგონეს ქსელში არსებული დოკუმენტების ერთმანეთთან დასაკავშირებლად და თუ თქვენი საიტი შედგება რამდენიმე გვერდისგან და არა ერთისგან, მაშინ მათი დაკავშირება შეგიძლიათ მხოლოდ ჰიპერბმულების შექმნით. მოდით პირდაპირ ვნახოთ მაგალითით როგორ გამოიყურება ეს.

მარტივი ჰიპერბმულის შექმნა

გადადით სხვა გვერდზე

აქ ყველაფერი მარტივია, ჰიპერბმულის შესაქმნელად ვიყენებთ ტეგს სადაც href=”” არის გვერდის მისამართი, რომელზეც განხორციელდება გადასვლა, ჩვენს შემთხვევაში ეს გვერდი მდებარეობს იმავე დირექტორიაში. თქვენ ასევე შეგიძლიათ აქ ჩასვათ მისამართი, როგორიცაა href=”http://site.ru/page.html“ ან შეიძლება იყოს ბმული არქივისაკენ, რომელიც მდებარეობს სხვა საქაღალდეში თქვენს საიტზე href=”arj/arhiv.zip” ან ნებისმიერ სხვა დოკუმენტს, რომელიც რეალურად არაფერ შუაშია. ასევე, ნებისმიერი ჰიპერბმულის სავალდებულო ატრიბუტია სათაური, ეს არის ბმულის აღწერა, ეს არის ძალიან მნიშვნელოვანი ელემენტი საძიებო სისტემის ოპტიმიზაციაში და აქ წერთ იმ გვერდის ან დოკუმენტის საკვანძო სიტყვებს, რომლებსაც აკავშირებთ. ტექსტს, რომელიც მდებარეობს ტეგს შორის, ჰქვია წამყვანი და ასევე ძალიან მნიშვნელოვანია.

ბმულის გახსნა ახალ გვერდზე

არის კიდევ ერთი საინტერესო ატრიბუტი, რომელიც შეიძლება გამოგადგეთ:

გადადით სხვა გვერდზე

სამიზნე ატრიბუტი მნიშვნელობით _blank ხსნის ბმულს ახალ ფანჯარაში, ეს ხშირად გამოიყენება, თუ არ გსურთ ადამიანმა დაკარგოს თქვენი გვერდი და ამავე დროს მიიღოს მისთვის საჭირო ინფორმაცია უბრალოდ ახალ ჩანართში ან ფანჯარაში.

გამოსახულების ბმულები

შედეგი ბრაუზერში:

არსებითად, აქ ყველაფერი მარტივია, მე მოვათავსე სურათის ტეგი გახსნის და დახურვის ჰიპერბმულის ტეგს შორის , მაგრამ ისევ არ ჩავდე მხოლოდ ორი სურათი, ერთს მივანიჭე img კლასი, რომელშიც გადავაყენე სურათის ირგვლივ ჩარჩო, რადგან როცა ხდება ჰიპერლინკი ჩნდება, მაგრამ არა ყველა ბრაუზერში, მაგალითად თქვენ ნახავთ. IE-ში, მაგრამ არა Google Chrome-ში.

ხაზგასმა ბმულებში

გადადით სხვა გვერდზე
გადადით სხვა გვერდზე

სიცხადისთვის მე მივეცი ამ პრობლემის გადასაჭრელად ორი ვარიანტი, მივაკუთვნე კლასის ამომრჩეველს და ამ კლასის დარეგისტრირებით თქვენ ამოიღებთ არასაჭირო ხაზგასმას კონკრეტულ ადგილებში. პრობლემის მეორე გამოსავალი არის ხაზგასმის ამოღება ტეგის ყველა ბმულიდან<а>, რაც რა თქმა უნდა იშვიათად იწვევს მოთხოვნილებას, მაგრამ ცოდნა მაინც არ არის ზედმეტი.

ბმულები დოკუმენტში

იშვიათი არაა, როდესაც დოკუმენტი საკმაოდ გრძელია და გვერდის დასაწყისში არის პატარა მენიუ ამ გვერდის ქვეგანყოფილებების ბმულებით. ამ ბმულებს უწოდებენ ბმულებს დოკუმენტში და ეს ყველაფერი ხორციელდება საკმაოდ მარტივად. დასაწყისისთვის, წამყვანები მოთავსებულია დოკუმენტში, ეს არის ეტიკეტები, ისინი მოთავსებულია დოკუმენტში, სადაც საჭირო იქნება მისი გადატანა შიდა ბმულზე დაწკაპუნებისას, როგორც წესი, ეს არის განყოფილების სათაურები, ეტიკეტი ასე გამოიყურება. :

< /a>

თავი….< /a>

და ბოლო, რაც უნდა ვიცოდეთ ჰიპერბმულების შესახებ არის ბმულები ელექტრონულ საფოსტო ყუთებთან, მისი განხორციელება შეიძლება ძალიან მარტივად, უბრალოდ დაამატეთ ჩანაწერი, როგორიცაა mailto: და საფოსტო ყუთის მისამართი href ატრიბუტზე:

ჩემი ფოსტა< /a>

სწორედ აქ ვამთავრებ გაკვეთილს „ჰიპერლინკების შექმნა html-ში“, როგორც თქვენ შენიშნეთ, აქ CSS-ის გარეშე ვერ მოვახერხეთ, ზოგადად მასალა საკმაოდ მარტივია, მგონი ყველაფერი მარტივი და გასაგები იქნება თქვენთვის, თუ თქვენ გაქვთ რაიმე შეკითხვა, დაწერეთ.

გამოქვეყნების თარიღი: 2014-04-23

გააზიარეთ ეს სტატია: