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

ტეგის სტრუქტურა SRC ატრიბუტით ასე გამოიყურება:

.

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

.

ფაილის სახელი ფორმატი

გრაფიკული ფაილის დასაყენებლად სახელწოდებით MINSK, რომელიც მდებარეობს მისამართზე D:\Collection\Cities\MINSK.GIF, უნდა დაწეროთ .

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

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

ჩვენი ინსტიტუტი

ბრინჯი. 4.1. ვებ გვერდი ინსტიტუტის ფოტოთი

ზემოთ მოცემულ მაგალითში, ფოტოს სიმაღლე (HEIGHT) არის 200 პიქსელი, ხოლო სიგანე (WIDTH) არის 300 პიქსელი. ფოტოს დასაყენებლად იქმნება აბზაცი ცენტრის გასწორებით.

ჰორიზონტალური ხაზები

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

---

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

მოდით შევხედოთ რამდენიმე მაგალითს ჰორიზონტალური ხაზების განლაგების ასახსნელად:

1.

---

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

2.

---

WIDTH = "200" ALIGN="RIGHT"> – მწვანე ფერის ჰორიზონტალური ხაზი, 15 პიქსელი სისქით, 200 პიქსელი სიგანით და მარჯვნივ გასწორებული.

3.

---

– ჰორიზონტალური ლურჯი ხაზი, რომელიც მოიცავს მთელ გვერდს, 25 პიქსელის სისქით.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – წითელი ფერის ჰორიზონტალური ხაზი, 20 პიქსელი სისქით, 300 პიქსელი სიგანით და გასწორებული მარცხნივ.

ოთხი ჩაწერილი მაგალითის ხაზის ჩვენება ნაჩვენებია ნახ. 4.2.

ბრინჯი. 4.2. ხაზები ვებ გვერდზე

მაგიდები

ცხრილების შექმნა

ცხრილი იქმნება დაწყვილებული ტეგის გამოყენებით

… . ეს ტეგი ქმნის ცხრილს იმ ადგილას, სადაც ის დამატებულია
HTML კოდში.

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

... - ახალი ხაზი;

... - სათაურის უჯრედი;

... - ჩვეულებრივი ცხრილის უჯრედი.

ეს ტეგები იწერება დაწყვილებული ტეგის შიგნით

… .

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

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

ბრინჯი. 5.1. მაგიდის გვერდი

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

უნდა აღინიშნოს, რომ ზემოაღნიშნული გვერდის HTML კოდში ტეგი

მანქანები	ფასი	ფორდი	5000	გოლფი	6000

შეიცავს BORDER ატრიბუტს "1" მნიშვნელობით. ეს ნიშნავს, რომ ნახ. 5.1, გარე საზღვრის სისქე არის
1 პიქსელი. თუ დავწერთ

… ,

მაშინ გარე საზღვრის სისქე იქნება 6 პიქსელი. ცხრილის საზღვრების ჩვენების თავიდან ასაცილებლად, თქვენ უნდა დააყენოთ BORDER ატრიბუტი 0-ზე, ან უბრალოდ გამოტოვოთ ეს ატრიბუტი.

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

გვერდზე გრაფიკის განთავსების ორი გზა არსებობს:

• ინდივიდუალური სურათების ჩასმა;
• ფონის შევსება სურათით.

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

გრაფიკის ჩასმა

გრაფიკული გამოსახულების ჩასმა გრაფიკული ფორმატის ფაილიდან გვერდზე ხდება ტეგის გამოყენებით (ინგლისურიდან, სურათი - სურათი) ფაილის მისამართის მითითებით SRC ატრიბუტის არგუმენტად:

< IMG SRC = "адрес_графического_файла" >

გრაფიკული ფაილის მისამართი არის URL ან ფაილის სახელი, შესაძლოა ბილიკით. მაგალითად, გრაფიკული ფაილის logotip.jpg საჩვენებლად თქვენ უნდა დაწეროთ ტეგი:

< IMG SRC = "logotip.jpg" >

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

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... ავალებს ბრაუზერს, ჯერ გადმოწეროს logotip.gif ფაილი და შემდეგ შეცვალოს იგი logotip.jpg ფაილით, როგორც კი მიღებულია.

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

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

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

შემდეგი ტეგი აყენებს გრაფიკას logotip.jpg ფაილიდან მარჯვნივ (სურათი განთავსდება ტექსტის მარცხნივ):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

თუ გსურთ სურათის განთავსება ტექსტის მარჯვნივ, მაშინ გჭირდებათ ატრიბუტი გასწორებაარგუმენტის მინიჭება უფლება:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

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

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

აქ რიცხვები 20 და 10 განსაზღვრავს ველების ზომას.

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

< HTML >

< HEAD >

< TITLE >სავარჯიშო 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >ტექსტი ახვევს გრაფიკას მარჯვნივ< / H1 >

ბრინჯი. 657. ტექსტი ახვევს სურათს მარჯვნივ

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

განმარტება 1

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

HTML-ის გამოყენებით შეგიძლიათ:

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

შენიშვნა 1

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

სურათების დამატება ვებ გვერდზე

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

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

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

ალტერნატიული წარწერების დამატება

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

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

alt="ეს სურათია!" />!}

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

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

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

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

• სიმაღლე – გამოიყენება გამოსახულების სიმაღლის დასადგენად პიქსელებში ან პროცენტებში;
• სიგანე – გამოიყენება გამოსახულების სიგანის დასადგენად პიქსელებში ან პროცენტებში.

გამოსახულების სიმაღლისა და სიგანის რეგულირება

ვებ გვერდებზე განთავსებული სურათების ზომების დაყენება შესაძლებელია ზემოაღნიშნული ატრიბუტების გამოყენებით. უფრო მეტიც, მათი მნიშვნელობები მითითებულია როგორც პიქსელების ფიქსირებული რაოდენობა, ან პროცენტულად გვერდის ზომასთან შედარებით. ქვემოთ მოცემულ HTML კოდში, პირველი ტეგი შეიცავს ორიგინალური სურათის ზომებს პიქსელებში (60 პიქსელი ვერტიკალურად და 60 პიქსელი ჰორიზონტალურად), მეორე ტეგი ადგენს იმავე სურათის სიგანეს გვერდის სიგანის 6%-მდე, ხოლო სიმაღლე - გვერდის სიმაღლის 10%.

alt="ეს სურათია!" height="60" width="60" />

alt="ეს სურათია!" height="10%" width="6%" />

შენიშვნა 2

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

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

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

ტექსტისა და გრაფიკის გასწორება

გამოსახულების გასასწორებლად ტექსტის ხაზის მარჯვენა ან მარცხენა კიდეზე გამოიყენეთ ტეგის align ატრიბუტი. Მაგალითად:

alt="ეს სურათია!" height="60" width="60" align="მარჯვნივ" />

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

სურათების ლინკებად გამოყენება

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

მინიატურების სურათები

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

alt="დააწკაპუნეთ ნორმალური სურათის სანახავად."

height="60" width="60" />

სურათების წარმატებით გამოყენების საიდუმლოებები

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

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

შენიშვნა 3

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

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

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

სახლში

შეუკვეთე ვებგვერდი და დაიწყე ბიზნესის კეთება!

ეს ფრაზა ბევრ საიტზე ისმის და ჩანს და ეს ტყუილად არ არის!

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

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

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

HTML-ის ყველაზე მნიშვნელოვანი უპირატესობებია:

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

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

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

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

მოდით განვათავსოთ გრაფიკული გამოსახულება Clip Art ბიბლიოთეკიდან, რომელიც შედის Microsoft Office-ში, ვებსაიტის მთავარ გვერდზე, რომელსაც ჩვენ ვქმნით. ამისათვის მიჰყევით ამ ნაბიჯებს:

1. გახსენით შექმნილი ვებ გვერდი.
2. გახსენით მთავარი გვერდიპანელში index.htm ფაილის სახელზე ორჯერ დაწკაპუნებით საქაღალდეების სია(საქაღალდის სია).
3. მენიუში ჩასმა(ჩასმა) აირჩიეთ ბრძანება ნახატი სურათები(კლიპ არტი). FrontPage პროგრამის ფანჯარაში გამოჩნდება პანელი სურათის ჩასმა(Clip Art-ის ჩასმა).
4. აირჩიეთ ბრძანება ამ პანელიდან სურათების კოლექცია(მედია გალერეა). იხსნება დიალოგური ფანჯარა, რომელიც საშუალებას გაძლევთ აირჩიოთ გრაფიკული სურათი (ნახ. 15.8).

ბრინჯი. 15.8.

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

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

1. დააწკაპუნეთ ისრის ღილაკზე არჩეული სურათის მარჯვენა მხარეს. ჩნდება კონტექსტური მენიუ.
2. აირჩიეთ ბრძანება კონტექსტური მენიუდან კოპირება(სორა).
3. გადადით ვებ გვერდზე და ჩასვით სურათი ბუფერიდან მასზე ნებისმიერი მოსახერხებელი ხელსაწყოს გამოყენებით. მაგალითად, დააჭირეთ კლავიშთა კომბინაციას +.
4. შეინახეთ ვებ გვერდი, რომელიც შეიცავს გრაფიკულ სურათს ღილაკზე დაჭერით Გადარჩენა(შენახვა) სტანდარტულ ინსტრუმენტთა პანელზე. გამოჩნდება დიალოგური ფანჯარა ჩაშენებული ფაილების შენახვა(Save Embedded Files) (ნახ. 15.10), გვთავაზობს გვერდზე განთავსებული სურათის შენახვას საქაღალდეში. სურათებივებ საიტი სახელწოდებით, რომლითაც ფაილი განთავსებული იყო ბიბლიოთეკაში. ეს ფანჯარა შეიცავს შემდეგ ღილაკებს:
   • გადარქმევა(გადარქმევა) - საშუალებას გაძლევთ გადარქმევა ფაილი.
   • საქაღალდის შეცვლა(Change Folder) - იხსნება დიალოგური ფანჯარა საქაღალდის შეცვლა(Change Folder), რომელიც შეიცავს მიმდინარე ვებსაიტის საქაღალდეებს, რაც საშუალებას გაძლევთ აირჩიოთ სხვა საქაღალდე ფაილის შესანახად.
   • მოქმედება(მოქმედების დაყენება) ხსნის დიალოგურ ფანჯარას სამოქმედო დავალება,საშუალებას გაძლევთ შეცვალოთ მნიშვნელობა Გადარჩენაშეინახეთ მოქმედების სვეტი არ შეინახოთ(არ შეინახოთ მნიშვნელობის არჩევისას). Გადარჩენანახატი ინახება თქვენს მიერ მითითებულ ვებ საიტის საქაღალდეში, წინააღმდეგ შემთხვევაში ვებ გვერდი შეიცავს ბმულს კლიპ არტის ბიბლიოთეკაში მდებარე სურათზე.

რეგიონი ნახატი(სურათის გადახედვა) აჩვენებს მოთავსებულ სურათს. დიალოგურ ფანჯარაში დაყენებით ჩაშენებული ფაილების შენახვასასურველი პარამეტრები, დააჭირეთ ღილაკს ᲙᲐᲠᲒᲘ.გრაფიკული ფაილი შეინახება თქვენს მიერ მითითებულ ვებ საიტის საქაღალდეში.

ბრინჯი. 15.10.

გრაფიკული სურათის განთავსება ფაილიდან

ჩვენ შევხედეთ გრაფიკული გამოსახულების განთავსებას Clip Ait ბიბლიოთეკიდან ვებ გვერდზე. ფაილიდან გრაფიკული გამოსახულების გვერდზე დასაყენებლად, გააკეთეთ შემდეგი:

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

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

ბრინჯი. 15.11.

სურათის თვისებების დაყენება

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

• მენიუში ფორმატი(ფორმატი) აირჩიეთ ბრძანება Თვისებები(Თვისებები)
• აირჩიეთ გუნდი კონტექსტური მენიუ სურათის თვისებები(სურათის თვისებები)
• დააჭირეთ კლავიშთა კომბინაციას +

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