როგორ განვათავსოთ სურათები HTML-ში
HTML ეს არის მარკირების ენა რომელიც გამოიყენება ვებ გვერდის შინაარსის შექმნა და სტრუქტურირება. ვებ გვერდზე ერთ-ერთი ყველაზე გავრცელებული ელემენტია სურათები, რომელთა გამოყენებაც შესაძლებელია მომხმარებლის ყურადღების მიპყრობისა და ვიზუალური ინფორმაციის გადასაცემად. ეფექტურადამ სტატიაში ჩვენ შევისწავლით ეტაპობრივად როგორც განათავსეთ სურათები HTML-ში სწორად და ოპტიმიზირებულია.
ნაბიჯი 1: სურათის მომზადება
პირველი ნაბიჯი ადგილი სურათი HTML-ში არის დავრწმუნდეთ, რომ სურათი არის მომზადებული და ოპტიმიზირებული თქვენი გამოყენება ინტერნეტშიეს გულისხმობს ზომის შეცვლა სურათი სასურველ ზომაზე, შეკუმშვა მისი წონა უფრო სწრაფად ჩატვირთვისა და შესანახად შესაფერის ფორმატში, როგორიცაა JPEG ან PNG. გარდა ამისა, მნიშვნელოვანია გამოსახულების აღწერილობითი სახელის მინიჭება საძიებო სისტემებში მისი რეიტინგის გასაუმჯობესებლად.
ნაბიჯი 2: ჩასვით ეტიკეტი
ამისთვის განათავსეთ სურათი HTML-ში, ჩვენ ვიყენებთ ტეგს . ეს ტეგი ცარიელი ტეგია, რაც იმას ნიშნავს, რომ მას არ აქვს დახურვის ტეგი. ეტიკეტის შიგნით, ჩვენ უნდა მივუთითოთ URL სურათის, რომელიც გვინდა ჩავსვათ "src" ატრიბუტში. ჩვენ ასევე შეგვიძლია დავამატოთ დამატებითი ატრიბუტები, როგორიცაა "alt", რათა მივაწოდოთ ალტერნატიული ტექსტი იმ შემთხვევაში, თუ სურათი არ ჩაიტვირთება სწორად, და "სათაური", რათა აჩვენოს ამომხტარი შეტყობინება, როდესაც მომხმარებელი აჩერებს სურათს.
ნაბიჯი 3: მიუთითეთ სურათის ზომა და ადგილმდებარეობა
მას შემდეგ რაც ჩავსვით ტეგი სურათის URL-ით, ჩვენ შეგვიძლია მიუთითეთ ზომა და ადგილმდებარეობა გამოსახულების გამოყენებით "სიგანე" და "სიმაღლე" ატრიბუტები. ეს ატრიბუტები იღებს მნიშვნელობებს პიქსელებში ან პროცენტებში და საშუალებას გვაძლევს დავარეგულიროთ სურათის ზომა ჩვენი საჭიროებების შესაბამისად. გარდა ამისა, ჩვენ შეგვიძლია გამოვიყენოთ ისეთი ატრიბუტები, როგორიცაა "align" გამოსახულების გასასწორებლად ტექსტის მიმართ, ან "საზღვარი" გამოსახულების საზღვრის დასამატებლად.
ამ მარტივი ნაბიჯებით, ახლა თქვენ გაქვთ საჭირო ცოდნა განათავსეთ სურათები HTML-ში და გააუმჯობესეთ თქვენი ვებ გვერდების ვიზუალური გარეგნობა. არ დაგავიწყდეთ, რომ დაარეგულიროთ სურათების ზომა და ოპტიმიზაცია კარგი დატვირთვის შესანარჩუნებლად და არ დაგავიწყდეთ გამოიყენოთ დამატებითი ატრიბუტები თქვენი ვებსაიტის ხელმისაწვდომობისა და გამოყენებადობის გასაუმჯობესებლად. სცადეთ და გააცოცხლეთ თქვენი შინაარსი განსაცვიფრებელი სურათებით!
როგორ დავამატოთ სურათები HTML-ში
ამ გაკვეთილზე ჩვენ ვისწავლით როგორ მოვათავსოთ სურათები HTML დოკუმენტში. სურათების დამატება არის ა ეფექტურად გააუმჯობესოს თქვენი ვებსაიტის ვიზუალური იერსახე და გახადოს ის უფრო მიმზიდველი ვიზიტორებისთვის. საბედნიეროდ, HTML გთავაზობთ სპეციალურ ტეგებს სურათების თქვენს გვერდზე ჩასართავად.
1. img ტეგის გამოყენება
HTML-ში სურათების დამატების ყველაზე გავრცელებული გზა არის ტეგის გამოყენება . ამისათვის თქვენ უნდა დააყენოთ src ატრიბუტი, რომელიც განსაზღვრავს იმ სურათის URL-ს, რომლის ჩვენებაც გსურთ. Მაგალითად,
. გახსოვდეთ, რომ მიზანშეწონილია გამოიყენოთ სურათის ფაილები ბრაუზერთან თავსებადი ფორმატებში, როგორიცაა JPEG ან PNG.
გარდა ამისა, თქვენ შეგიძლიათ დააკონფიგურიროთ გამოსახულების გარეგნობა სხვა ატრიბუტების გამოყენებით, როგორიცაა სიმაღლე და სიგანე სურათის ზომის დასაყენებლად, ალტერნატიული ტექსტის უზრუნველსაყოფად, თუ სურათი ვერ იტვირთება, და სათაური, რათა დაამატოთ ტექსტი, რომელიც ნაჩვენებია. როდესაც სურათს აფარებთ.
2. ფაილის ბილიკები და URL ბილიკები
როდესაც საქმე ეხება გამოსახულების ბილიკის დაზუსტებას, თქვენ უნდა განიხილოთ ორი ვარიანტი: ადგილობრივი ფაილის გზა ან URL ბილიკი. თუ სურათი მდებარეობს თქვენს კომპიუტერში და გსურთ მისი ატვირთვა იქიდან, თქვენ უნდა მიუთითოთ ფაილის სრული გზა, როგორიცაა "C:imagefolder.jpg". მეორეს მხრივ, თუ სურათი განთავსებულია ვებ სერვერზე, თქვენ უნდა მიუთითოთ სურათის სრული URL, როგორიცაა "http://www.example.com/image.jpg".
გახსოვდეთ, რომ URL ბილიკები უფრო ხშირია, რადგან ისინი საშუალებას აძლევს თქვენს ვებსაიტს ატვირთოს სურათები გარე სერვერიდან და არ დაეყრდნოს ვიზიტორის აპარატში შენახულ ფაილებს.
3. გამოსახულების ოპტიმიზაცია
მნიშვნელოვანია თქვენი სურათების ოპტიმიზაცია ვებ-გვერდისთვის მათ თქვენს HTML გვერდზე დამატებამდე. ეს ნიშნავს სურათების ფაილის ზომის შემცირებას მათი ვიზუალური ხარისხის დარღვევის გარეშე. ამის მისაღწევად შეგიძლიათ გამოიყენოთ გამოსახულების რედაქტირების ხელსაწყოები ან ონლაინ კომპრესორები. სურათების ოპტიმიზაციით, თქვენი გვერდი უფრო სწრაფად იტვირთება და ვიზიტორებს არ დაუშლის იმედგაცრუება ხანგრძლივი დატვირთვის დროით.
დასასრულს, HTML-ში სურათების დამატება მარტივი ამოცანაა, მაგრამ ის მოითხოვს რამდენიმე მნიშვნელოვანი ასპექტის გათვალისწინებას, როგორიცაა სწორი ტეგი, ფაილის ბილიკი ან URL და სურათების ოპტიმიზაცია მომხმარებლის კარგი გამოცდილების უზრუნველსაყოფად. მიჰყევით ამ ინსტრუქციებს და თქვენ გზაზე იქნებით ვიზუალურად მიმზიდველი ვებ გვერდების შესაქმნელად.
ეტიკეტების მნიშვნელობა ![]()
HTML-ში
1. ვიზუალური ხელმისაწვდომობის გაზრდა: ეტიკეტები HTML-ში თამაშობენ ფუნდამენტურ როლს ვებსაიტზე სურათების პრეზენტაციაში. გვერდზე გამოსახულების დამატებისას, ეს ტეგი გამოიყენება მის სწორად საჩვენებლად. თუმცა, მისი მნიშვნელობა სცილდება მარტივ ვიზუალურ პრეზენტაციას. ტეგები
ისინი საშუალებას აძლევს საძიებო სისტემებს და ეკრანის მკითხველებს ინტერპრეტაცია გაუკეთონ გამოსახულების შინაარსს, რაც ხელს უწყობს წვდომას მხედველობის შეზღუდული შესაძლებლობის მქონე ადამიანებისთვის ან დამხმარე ტექნოლოგიების გამოყენებით.
2. შესრულების ოპტიმიზაცია: ეტიკეტების გამოყენებით HTML-ში სწორად, შეგიძლიათ მნიშვნელოვნად გააუმჯობესოთ შესრულება საიტიდან ვებ. ეს ტეგები საშუალებას გაძლევთ მიუთითოთ სურათის ზომა, შეამციროთ მისი გარჩევადობა და შეკუმშვაც კი, რაც გამოიწვევს გვერდის უფრო სწრაფად ჩატვირთვას. გარდა ამისა, შეიძლება დაინერგოს ისეთი ტექნიკები, როგორიცაა ზარმაცი ჩატვირთვა, რომელიც იტვირთება სურათებს მომხმარებლის საჭიროების მიხედვით, რაც ამცირებს გვერდის საწყისი ჩატვირთვის დროს.
3. გაუმჯობესებული მომხმარებლის გამოცდილება: სურათები მნიშვნელოვან როლს თამაშობს ვებსაიტზე მომხმარებლის გამოცდილებაში. ეტიკეტების სწორად გამოყენებით HTML-ში შეგიძლიათ უზრუნველყოთ ვიზუალურად მიმზიდველი და თანმიმდევრული გამოცდილება. გარდა ამისა, შეგიძლიათ დაამატოთ ატრიბუტები, როგორიცაა ალტერნატიული ტექსტი, რომელიც უზრუნველყოფს სურათის ტექსტურ აღწერას მათთვის, ვინც ვერ ხედავს მას. ეს აუმჯობესებს შინაარსის გაგებას და თავიდან აიცილებს დაბნეულობას ყველა მომხმარებლისთვის.
სწორი სინტაქსი HTML-ში სურათების ჩასართავად
1. ეტიკეტის გამოყენება
HTML-ში სურათების ჩასმის ძირითადი და გავრცელებული გზაა ტეგის გამოყენება . ეს ტეგი საშუალებას გვაძლევს დავაზუსტოთ სურათის მდებარეობა, მისი ზომა და სხვა თვისებები. The
ტეგს აქვს შემდეგი საჭირო და არჩევითი ატრიბუტები:
– src: ეს ატრიბუტი განსაზღვრავს გამოსახულების გზას. ეს შეიძლება იყოს URL ან გამოსახულების ფაილის შედარებითი გზა.
– alt: ეს ატრიბუტი იძლევა ალტერნატიულ ტექსტს გამოსაჩენად, თუ სურათი ვერ იტვირთება სწორად.
– სიგანე: ეს ატრიბუტი განსაზღვრავს სურათის სიგანეს პიქსელებში.
– სიმაღლე: ეს ატრიბუტი განსაზღვრავს გამოსახულების სიმაღლეს პიქსელებში.
აქ არის მაგალითი იმისა, თუ როგორი იქნება სინტაქსი სურათის ჩასმა ტეგის გამოყენებით :
«`
«`
2. ეტიკეტის გამოყენება
HTML-ში სურათების ჩასმის კიდევ ერთი გზა არის ტეგის გამოყენება
ეტიკეტის გამოსაყენებლად
"html"
«`
3. CSS-ის გამოყენება სურათების სტილიზებისთვის
გარდა ზემოთ ნახსენები HTML ტეგებისა, ჩვენ ასევე შეგვიძლია გამოვიყენოთ CSS ჩვენი სურათების სტილიზებისთვის. ჩვენ შეგვიძლია გამოვიყენოთ ისეთი სტილები, როგორიცაა საზღვრები, ჩრდილები, გამჭვირვალობა და ა.შ.
ჩვენ შეგვიძლია გამოვიყენოთ ქონება საზღვარი გამოსახულებაზე საზღვრის დასამატებლად, თვისება ყუთის ჩრდილი ჩრდილისა და ქონების დასამატებლად გაუმჭვირვალობა გამოსახულების გამჭვირვალობის დასარეგულირებლად. აქ არის მაგალითი იმისა, თუ როგორი იქნება CSS სინტაქსი გამოსახულების სტილისთვის:
"css
სურათი {
საზღვარი: 1px მყარი შავი;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
გამჭვირვალობა: 0.8;
}
«`
ამ ტექნიკით, თქვენ შეძლებთ სურათების ჩასმა და მორგება თქვენს HTML გვერდებზე სწორად და ეფექტურად. ყოველთვის გახსოვდეთ, რომ გამოიყენოთ alt ატრიბუტი ალტერნატიული ტექსტის უზრუნველსაყოფად, რაც აუცილებელია მხედველობის დაქვეითებული ადამიანებისთვის ხელმისაწვდომობისთვის.
რეკომენდაციები გამოსახულების ბილიკების მართვისთვის
სურათების HTML-ში განთავსებისას აუცილებელია ფაილის ბილიკის გათვალისწინება. არასწორმა გზამ შეიძლება გამოიწვიოს სურათების არასწორად ჩვენება ვებ გვერდზე. ამ პრობლემის თავიდან ასაცილებლად, მიზანშეწონილია გამოიყენოთ შედარებითი გზები აბსოლუტური გზების ნაცვლად.
შედარებითი გზა ეხება სურათის მდებარეობას HTML ფაილთან მიმართებაში, რომელშიც ის მდებარეობს. თუ HTML და სურათი ერთსა და იმავე საქაღალდეშია, უბრალოდ მიუთითეთ სურათის სახელი სურათის ტეგში. იმ შემთხვევაში, თუ სურათი სხვა საქაღალდეშია, გამოსახულებამდე მისასვლელად უნდა იქნას გამოყენებული შესაბამისი დირექტორიები.
საქაღალდეებთან ან დირექტორიებთან მუშაობისას, უნდა იქნას გამოყენებული შედარებითი გზები, რომლებიც თანმიმდევრულია. მაგალითად, თუ იყენებთ ფარდობით გზას "../../../images/image1.jpg" HTML ფაილიდან სურათზე წვდომისთვის ერთ საქაღალდეში, თქვენ უნდა გააგრძელოთ იგივე ფარდობითი ბილიკის გამოყენება ყველა დანარჩენ HTML-ში. ფაილები ამ საქაღალდეში. ეს უზრუნველყოფს სურათის სწორად ჩვენებას ამ დირექტორიაში ყველა ვებ გვერდზე. ყოველთვის გახსოვდეთ, რომ შეამოწმეთ ბილიკები და შეამოწმეთ, რომ სურათები სწორად იტვირთება ვებსაიტის გამოქვეყნებამდე.
სურათების ზომის შეცვლა HTML-ში
HTML-ში, დაარეგულირეთ სურათის ზომა ეს აუცილებელი ამოცანაა მომხმარებლის ოპტიმალური გამოცდილების უზრუნველსაყოფად. საბედნიეროდ, ამ მიზნის მისაღწევად რამდენიმე მარტივი და ეფექტური გზა არსებობს. HTML-ში სურათების ზომის კონტროლის საერთო გზაა გამოსახულების ტეგში "width" ატრიბუტის გამოყენება. მაგალითად, თუ გსურთ დააყენოთ სიგანე სურათიდან 300 პიქსელზე, შეგიძლიათ უბრალოდ დაამატოთ კოდის შემდეგი ხაზი თქვენს გამოსახულების ტეგში: სიგანე="300".
სურათების ზომის კორექტირების კიდევ ერთი გზაა "სიმაღლე" ატრიბუტის გამოყენება "სიგანის" ნაცვლად. წინა მაგალითის მსგავსად, თქვენ შეგიძლიათ დააყენოთ გამოსახულების სიმაღლე 200 პიქსელზე, მის გამოსახულების ტეგზე კოდის შემდეგი ხაზის დამატებით: სიმაღლე=”200″. გაითვალისწინეთ, რომ ამ ატრიბუტიდან მხოლოდ ერთის მითითებამ შეიძლება გამოიწვიოს გამოსახულების დამახინჯება, ამიტომ სასურველია ორივე ატრიბუტის გამოყენება სწორი ასპექტის თანაფარდობის შესანარჩუნებლად.
თუ გსურთ მეტი კონტროლი სურათების ზომასა და განლაგებაზე, ასევე შეგიძლიათ გამოიყენოთ CSS HTML-თან ერთად. მაგალითად, შეგიძლიათ შექმნათ ცალკე CSS სტილი, რომელიც განსაზღვრავს გამოსახულების სასურველ ზომებს და შემდეგ გამოიყენეთ იგი შესაბამის გამოსახულების ტეგებზე. ეს საშუალებას მოგცემთ მარტივად დაარეგულიროთ სურათების ზომა მთელ თქვენს ვებ გვერდზე, თითოეული სურათის ტეგში "სიგანე" ან "სიმაღლე" ატრიბუტის ინდივიდუალურად მითითების გარეშე. უბრალოდ დაამატეთ კოდის შემდეგი ხაზი თქვენს განყოფილებაში