საიტები, ბლოგები, ვებგვერდები - ჩვენს დროში უკვე ნაცნობი ცნებები. ინტერნეტის განვითარებასთან ერთად, ვებ გვერდების ჰოსტინგის საიტები წარმოუდგენლად პოპულარული გახდა და ეს გასაკვირი არ არის: ზოგისთვის საკუთარი ვებსაიტის ქონა აუცილებლობაა, ზოგისთვის კი სასიამოვნო გასართობი. პირველ შემთხვევაში, ჩვენ ჩვეულებრივ ვსაუბრობთ ფირმებზე, კორპორაციებზე, კერძო მეწარმეებზე, როდესაც ისინი აცხადებენ რაიმე მოთხოვნად პროდუქტს ან მომსახურებას. მეორე ეხება ბლოგერებს.
გარდა ამისა, არიან ინტერნეტ მომხმარებლები, რომლებიც უბრალოდ ეძებენ ინფორმაციას, კითხულობენ ბლოგებს, უყურებენ ვიდეოებს და ა.შ.
ხარისხიანი ვებსაიტის შესაქმნელად, ბევრი ვარიანტია. ჩვენ ყურადღებას გავამახვილებთ ვებ პროგრამირებაზე HTML-ის საშუალებით.
რა არის HTML
HTML ნიშნავს ჰიპერტექსტის მარკირების ენას. ინგლისურიდან თარგმნილი, ეს ნიშნავს "ჰიპერტექსტის მარკირების ენას".
სხვა სიტყვებით რომ ვთქვათ, HTML არის კოდების ნაკრები, რომლითაც შეგიძლიათ შექმნათ საიტის ძირითადი ელემენტები, მისი ჩარჩო, მაგ.როგორ შედგება სიტყვები წინადადებებისაგან.
HTML კოდები იწერება ექსკლუზიურად ლათინური ასოებით და ეწოდება ტეგები და თითოეული კოდი ჩასმულია კუთხის ფრჩხილებში. ზოგიერთი ტეგი დაწყვილებულია, ზოგიც დაუწყვილებელი.
დაწყვილებული ნიშნავს, რომ ისინი უნდა იქნას გამოყენებული წყვილებში უშეცდომოდ. მაგალითად, გახსნის ტეგი მიუთითებს, თუ სად იწყება ის ვებ გვერდზე, ხოლო დახურვის ტეგი მიუთითებს სად ჩერდება. ეს უკანასკნელი განსხვავდება პირველისგან გახსნის კუთხის ფრჩხილის შემდეგ დახრილი სიმბოლოს არსებობით. მაგალითად, არის გახსნის ტეგი,არის დახურვის ტეგი.
დაწყვილებულ ტეგებს არ სჭირდება პარტნიორი.
ბევრ ტეგს შეიძლება ჰქონდეს ატრიბუტები - დამატებითი ელემენტები, რომლებიც მას უფრო კონკრეტულ მნიშვნელობას ანიჭებენ. მაგალითად, ტეგი.
სად გამოიყენება HTML
კლასიკური გაგება იმისა, თუ სად არის საჭირო HTML არის ვებსაიტის შექმნა.
პრაქტიკაში ეს შეიძლება იყოს საკმარისი, რადგან HTML გაძლევთ საშუალებას შექმნათ საიტის ძირითადი ელემენტები, მენიუები (მათ შორის მრავალ დონის), დააყენოთ ფონი, ჩასვათ ტექსტი, სურათები, აუდიო, ვიდეო, დაარედაქტიროთ შრიფტები. და ბევრი სხვა.
თუმცა, არის სხვა ენები, რომლებიც საშუალებას გაძლევთ დაამატოთ უფრო საინტერესო და ხშირად საჭირო ელემენტები ვებ გვერდზე:
- CSS აყალიბებს სტილებს მთელი საიტისთვის ტეგების გამოყენებით ცალკეული ელემენტების სტილის მახასიათებლების მუდმივად განსაზღვრის საჭიროების გარეშე - მაგალითად, ტექსტის ფერი და შრიფტი.
- სკრიპტის ენა საშუალებას გაძლევთ განავითაროთ და ჩადოთ საიტზე მინი-პროგრამები (სკრიპტები) დაწყებულიბანალური ესთეტიკური საგნები (ბმულის ფერის შეცვლა მაუსის გვერდით გადახვევისას) და დამთავრებული ფუნქციურით (მომხმარებლის ელფოსტის მისამართების, ტელეფონის ნომრების შეგროვება).
- PHP-ით შეგიძლიათ შექმნათ თქვენი სტუმრების წიგნი ან კომენტარების სისტემა.
ასევე HTML გამოიყენება ელ.ფოსტის შესაქმნელად განაწილებისთვის.
რა არის ბმული
ისინი საშუალებას გაძლევთ ნავიგაცია სხვა ვებ გვერდზე, როგორც საიტის შიგნით, ასევე გარედან.
ჩვეულებრივ გამოიყენება HTML ბმულები:
- გარე ვებ რესურსზე გადასასვლელად.
- საიტის გვერდებზე გადაადგილება.
- გუგლის ფორმებზე გადასასვლელად.
ხშირად მითითებულია წყაროს ბმული HTML-ში, მით უმეტეს, რომ სხვა საიტიდან მასალის კოპირებისას თქვენ უნდა მიუთითოთ ავტორი. წინააღმდეგ შემთხვევაში, კოპირება ატრიბუტის გარეშე შეიძლება მოხვდეს საავტორო უფლებების დარღვევის, შინაარსის ქურდობისა და უკუშედეგის განმარტებებში. გარდა ამისა, ნასესხები, არაუნიკალური მასალების გამოყენება ამცირებს SEO-ს მუშაობას, ხოლო წყაროზე ბმულის მითითება ამცირებს რისკებს.
ბმულების ტიპები
კლასიკური გაგებით, ბმული არის ვებ რესურსის მისამართი, რომელზეც შეგიძლიათ გადახვიდეთ მასზე დაწკაპუნებით.
ამის გარდა, არის ჰიპერბმულები: ტექსტი და სურათები. ამ შემთხვევაში, HTML ბმული "დამალულია" რომელიმე წინადადების (სიტყვის) ან სურათის ქვეშ და მის გასადევნად, თქვენ უნდა დააჭიროთ ტექსტს ან სურათს.
სხვა ტიპის ბმულები:
- Unvisited - ბმული, რომელზეც ჯერ არ არის დაწკაპუნებული კონკრეტული სესიის დროს. მაგალითად, თუ გუშინ მიჰყევით ამ ბმულს, შემდეგ გამორთეთ კომპიუტერი და ისევ ჩართეთ ის დღეს, ახლა ბმული ისევ გაუქმებულია, რადგან ახალი სესია დაიწყო.
- აქტიური - ამ მდგომარეობაში ბმული ინახება ძალიან მცირე დროით: ინტერვალი ბმულზე დაწკაპუნებასა და მის მიყოლას შორის.
- მონახულებული - ბმული, რომელიც უკვე მოინახულა ერთხელ მაინც ერთი სესიის განმავლობაში.
რეგულარული ტექსტური ბმულებისთვის, მონახულებული ბმულები ცვლის ფერს, თუ სხვაგვარად არ არის მითითებული.
ჰიპერბმული სურათი არ ცვლის მის გარეგნობას, მიუხედავად იმისა, მონახულებულია თუ არა.
როგორ ჩავსვათ ჩვეულებრივი ბმული
ბევრი ვებ რესურსი აღიქვამს საიტის მისამართს, როგორც ბმულს, დაუყოვნებლივ ხდის მას დაწკაპუნებას და ხაზს უსვამს მას ფერით. მაგალითად, თუ მისამართი იგზავნება მესენჯერში ან ელექტრონული ფოსტით, მასზე დაწკაპუნებით, შეგიძლიათ გადახვიდეთ საიტზე.
საიტის შექმნის შემთხვევაში HTML-ის გამოყენებით თქვენ უნდა ჩადოთ ბმული სპეციალური ტეგის გამოყენებით. ეს ასე გამოიყურება: ვებსაიტის მისამართი. HTML-ში ბმულის ტექსტი სრულად უნდა იყოს მითითებული პროტოკოლით.
როგორ ჩავსვათ ტექსტური ჰიპერბმული
ადრე ითქვა, რომ ტექსტური ჰიპერბმული ასრულებს იგივე ფუნქციას, როგორც ჩვეულებრივი ბმული, მაგრამ გამოიყურება უფრო ესთეტიურად სასიამოვნო: საიტის მისამართის ნაცვლად, რომელიც ხშირად ზედმეტად გრძელია, მითითებულია სიტყვა ან ფრაზა. მაგალითად, წინადადებაში "მოძებნეთ ინფორმაცია აქ", შეგიძლიათ დამალოთ ბმულისიტყვა "აქ". ის მონიშნული იქნება და მასზე დაჭერით მომხმარებელი სასურველ საიტზე მიიყვანს.
როგორ შევქმნათ HTML ბმული უკვე განვიხილეთ ადრე. თქვენ შეგიძლიათ ჩასვათ ტექსტური ჰიპერბმული იმავე ტეგის გამოყენებით. ერთადერთი განსხვავება ისაა, რომ ტეგებს შორის უნდა მიუთითოთ ტექსტი, რომლის ქვეშაც დაიმალება ბმული: ხილული ტექსტი.
როგორ ჩავსვათ სურათის ჰიპერბმული
აქ ცოტა უფრო რთულია. ჩვენ ვიყენებთ იგივე ტეგს, მაგრამ ტექსტის ნაცვლად, თქვენ უნდა მიუთითოთ გამოსახულების გზა.
გზა არის სურათის მდებარეობა. თუ სურათი (ფოტო) მდებარეობს ფაილების გაზიარების სერვისზე, მაშინ თქვენ უნდა მიუთითოთ ყველა საქაღალდე გამოსახულებისკენ მიმავალ გზაზე დახრილის საშუალებით. თქვენ ასევე შეგიძლიათ დაამატოთ ბმული სურათზე, თუ ეს შესაძლებელია.
მონიშვნა
src-ის გარდა, სხვა ატრიბუტებიც გამოიყენება, რაც საშუალებას გაძლევთ დაარეგულიროთ გამოსახულების სიმაღლე, სიგანე და მდებარეობა და მრავალი სხვა. ზოგიერთი მათგანი:
- Src - განსაზღვრავს გამოსახულების გზას.
- Lowsrc - წინა ატრიბუტის იდენტურია, მაგრამ მითითებულია დაბალი ხარისხის სურათებისთვის.
- სიმაღლე - სურათის სიმაღლე.
- სიგანე - მისი სიგანე.
- Alt - სურათის აღწერა. ფოტოზე ან სურათზე გადასვლისას ამ ატრიბუტში მითითებული ტექსტი გამოჩნდება.
- საზღვარი - განსაზღვრავს გამოსახულების გარშემო საზღვრის სისქეს.
ატრიბუტები მითითებულია ტეგის შემდეგ და შედის მასშიმისი შემადგენლობა. ატრიბუტს უნდა მოჰყვეს მისი მნიშვნელობა. მაგალითად, ატრიბუტებისთვის "სიმაღლე" ან "სიგანე" (სიმაღლე, სიგანე) განსაზღვრავს გამოსახულების სიმაღლეს ვებ გვერდზე. საზომი ერთეული არის პიქსელი, თუ სხვა რამ არ არის მითითებული.
ის ასე გამოიყურება: <a href="ვებ გვერდის მისამართი"
. ეს ატრიბუტები დაგეხმარებათ გამოსახულების შესაბამისი ზომის დაყენებაში. საზღვარი ხელს უწყობს სურათის გარშემო უხილავი საზღვრის შექმნას.
ზემოხსენებული ატრიბუტები ცალკე ვრცელდება სურათის ჩასმის ტეგზე. მაგალითად:.
რა არის წამყვანი ბმულები
წამყვანი ბმულების შექმნა ძალიან სასარგებლო უნარია. ხშირად საჭიროა ვებ გვერდის განლაგება გრძელი ტექსტური ბლოკით ან რამდენიმე ქვეგანყოფილებით ერთ გვერდზე. ამ შემთხვევაში, თქვენ შეგიძლიათ დაუყოვნებლივ დაიწყოთ ტექსტის ან ვებ გვერდის ქვეგანყოფილებების ბმულების სიით და როდესაც დააწკაპუნებთ მათზე, მომხმარებელი პირდაპირ გადავა მოთხოვნილ განყოფილებაში.
წამყვანი ბმულების შექმნა მოითხოვს ატრიბუტების თეგების უფრო მეტ გამოყენებას, ვიდრე სხვა ტიპის ბმულები.
პირველ რიგში, თქვენ უნდა დააყენოთ საერთო მნიშვნელობა ინფორმაციის თითოეული ბლოკისთვის ან ტექსტის ქვეგანყოფილებისთვის ზედა ატრიბუტის გამოყენებით და შემდეგ დააკავშიროთ იგი შესაბამის ბმულთან.
მათი მახასიათებლები უფრო ვრცელია, ამიტომ სასურველია ჯერ დაეუფლოთ უფრო მარტივი ბმულების შექმნას, შემდეგ კი გადავიდეთ წამყვანი ბმულების ფორმირებაზე.
რჩევები
დახმარება გამოცდილებისგანპროგრამისტები:
- შეგიძლიათ გახადოთ ისე, რომ ბმულის შესახებ ინფორმაცია HTML-ში ჰოვერზე გამოჩნდეს. ამისთვის, alt ატრიბუტი, რომელსაც ჩვენ ასევე ვიყენებთ გრაფიკული ელემენტებისთვის, გამოდგება.
- შესაძლებელია ბმულების სიის შედგენა HTML-ის გამოყენებით. კერძოდ, ეს შეიძლება სასარგებლო იყოს წამყვანი ბმულებისთვის, ასევე, როცა გჭირდებათ ვებ რესურსების სიის შედგენა, რომელსაც შეიძლება მოჰყვეს ბმული უშუალოდ მიმდინარე ვებ გვერდიდან.
- CSS და JavaScript-ის დახმარებით, ისევე როგორც ზოგიერთი HTML ფუნქციით, შეგიძლიათ შექმნათ ტექსტური ბმულებისა და ჰიპერბმულების განსხვავებული დიზაინი, ვიდრე ჩვეულებრივ. მაგალითად, როცა ლინკზე გადახვევთ, მას შეუძლია შეცვალოს ფერი და დაუბრუნდეს წინას, როცა კურსორი მისგან შორს არის. ეს შეიძლება გაკეთდეს მორგებული JavaScript სკრიპტით. გარდა ამისა, ბმულის ფერი შეიძლება დაყენდეს რაიმე სხვაზე, გარდა ლურჯისა, უხილავისთვის ან მეწამულისთვის, მონახულებისთვის. ეს არის CSS-ის სამუშაო.
- არ ბოროტად გამოიყენოთ ბმულები. ვებ გვერდი მრავალი შეუსაბამო ბმულით გამოიყურება დაუდევარი და დაუდევარი.
- დარწმუნდით, რომ მომხმარებელს ესმის, რომ სურათის ჰიპერბმული ნამდვილად არის სურათი და არა მხოლოდ სურათი.
დასკვნა
ძალიან მარტივია HTML-ში გვერდის მიბმა. მნიშვნელოვანია დაიცვას ამ ენის ყველა ძირითადი პუნქტი, რადგან მცირე შეცდომამაც კი შეიძლება გამოიწვიოს ის ფაქტი, რომ შედეგი არ იქნება და კოდი არ იმუშავებს.
