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

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

• დამატებითი სურათების ჩასმა;
• zapovnennya ფონის სურათი.

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

გრაფიკული სურათების ჩასმა

გრაფიკული გამოსახულების გვერდზე ჩასმა გრაფიკული ფაილის ფორმატში ხორციელდება დამატებითი ტეგის მიღმა (იხილეთ ინგლისური, სურათი - სურათი) მისამართისა და ფაილის მნიშვნელობიდან, როგორც 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(Visota), vimіryuvanih პიქსელებში. თუ დაამატებთ ატრიბუტებს, მაშინ ბრაუზერს შეუძლია ნახოს სწრაფი გრაფიკი, წაიკითხოს დოკუმენტის განლაგება, აჩვენოს ტექსტი და შემდეგ დაამატოთ გრაფიკა. მშვენიერია, რომ ბრაუზერი იკუმშება ან ჭიმავს სურათს, აყენებს მას დანიშნულ ზომის ჩარჩოში. გამოსახულების ზომის შეკვეთის ბოლო:

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

გრაფიკა იწვევს vikorizovatsya ერთდროულად ტექსტი, რომ ამოცანა virivnyuvannya ტექსტი და გრაფიკული სურათები. Tse zavdannya მოძებნეთ დამატებითი ატრიბუტი გასწორებატეგი სხვადასხვა არგუმენტების სტაზისისაგან. მაგალითად, ჩვენ შეგვიძლია pobazhati, schob ტექსტი გახვეული სურათის მარჯვნივ, Abo Evil. Zazvychay სურათი vbudovutsya ტექსტში, რომელიც შეიძლება იყოს მახინჯი. თუ გსურთ იყოთ უნიკალური, შეგიძლიათ დააყენოთ ცარიელი ველები ილუსტრაციის მახლობლად. ველები დაყენებულია დამატებითი ატრიბუტებისთვის 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 >ტექსტი obtykaє გრაფიკული მარჯვენა ხელით< / H1 >

Პატარა. 657... ტექსტი obtykaє სურათი მარჯვნივ

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

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

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

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

Პატარა. 15.8.

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

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

1. დააჭირეთ ღილაკს ისრით მარჯვენა მხარესაპირისპირო სურათი. კონტექსტურ მენიუში გამოსაჩენად.
2. Viber ბრძანება კონტექსტურ მენიუში კოპირება(სორუს.)
3. გადადით ვებ-გვერდზე და ჩადეთ მასზე ბუფერიდან სურათების გაცვლა, რაიმე მიზეზით. მაგალითად, გასაღებების კომბინაციის იძულება +.
4. შეინახეთ ვებგვერდი გრაფიკულ სურათებში ჩანაცვლებით ღილაკზე დაჭერით იზრუნოს(შენახვა) სტანდარტულ ინსტრუმენტთა პანელზე. არის დიალოგის ფანჯარა შეინახეთ მართვის ფაილები(ჩაშენებული ფაილების შენახვა) (ნახ. 15.10), სურათებივებ-უნივერსიტეტის pid im'yam, ფაილით, რომელიც მდებარეობს ბიბლიოთეკაში. ღირს შურისძიება შეურაცხმყოფელ ღილაკებზე:
   • შეცვლა(გადარქმევა) - გაძლევთ საშუალებას შეცვალოთ ფაილის სახელი.
   • საქაღალდის შეცვლა(შეცვალეთ საქაღალდე) - შეცვალეთ დიალოგი вікно zmіna საქაღალდეები(Change Folder) სტრიმინგის ვებსაიტის საქაღალდეების შესაცვლელად, ფაილის შესანახად შეგიძლიათ საქაღალდის ვიბრაცია.
   • დია(Set Action) დიალოგური ფანჯრის ჩვენება ზავდანნია დიი,მნიშვნელობის შეცვლას აძლევთ უფლებას იზრუნოს(შენახვა) stovpchik Дия (მოქმედება) on ნიკოლოზს არ ზბერიგათ(არ შეინახოთ). მნიშვნელობის არჩევისას იზრუნოსპატარები შეხედეთ თქვენი დანიშნული მამის ვებ-უნივერსიტეტს, პირველ რიგში ვებ-გვერდზე ისინი იკარგებიან სურათზე, როდესაც მიდიან Clip Art-ის ბიბლიოთეკაში.

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

Პატარა. 15.10.

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

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

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

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

Პატარა. 15.11.

ნალაშტუვანია გამოსახულების იმპერიულობა

ვებ-გვერდზე სურათების გასავრცელებლად აუცილებელია ძალაუფლების ძალაუფლების დამკვიდრება, გამარჯვებულის და დიალოგი აუცილებელია მცირე ძალა(სურათის თვისებები) (სურ.15.12). მის საჩვენებლად, დააწკაპუნეთ მაუსის სურათზე და შემდეგ დააჭირეთ ერთ-ერთ შემდეგს:

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

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

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

ტეგის სტრუქტურა SRC ატრიბუტით ma viglyad:

.

ვინაიდან ინსტიტუტის გრაფიკული ფაილი მდებარეობს იმავე პაპაში, ასევე ვებ-გვერდზე, მაშინ პირველად უნდა ჩაწეროთ:

.

Ფაილის ფორმატი

გრაფიკული ფაილის გასავრცელებლად IM'yam MINSK-დან, რომელიც მდებარეობს მისამართის უკან D: \ Kollekts_ya \ Mista \ 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. ხაზები ვებსაიტზე

მაგიდა

ძირეული მაგიდა

შექმენით ცხრილები

… ... Tsey tag მაგიდის მოცულობაში, de vin დამატება
HTML კოდში.

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

... - ახალი რიგი;

... - სათაურის შუაში;

... - zvychana მაგიდა com_r.

Tsi ტეგები ჩაწერილია დაწყვილებული ტეგის შუაში

… .

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

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

Პატარა. 5.1. გვერდითი ზოლი მაგიდით

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

სლაიდი ნიშნავს ტეგს

ავტომობილები	ფასი	ფორდი	5000	გოლფის	6000

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

… ,

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

მიეცით ბლოგის საერთო მკითხველები! გქონდეთ tsiy statty თქვენ იცით ყველაფერი ამის შესახებ როგორ ჩავსვათ სურათი html მხარე ... გაქვთ სურათი, თუ გსურთ ლოგოს დადება თქვენს მხარეს? ყველაფერი მარტივია. ამ სტატიის წაკითხვის შემდეგ, თქვენ შეგიძლიათ ჩასვათ სურათები თქვენს html მხარეს უპრობლემოდ. ცოი მისთვის დეტალურად ვისაუბროთ tezi imgმე-4 ატრიბუტები, მოკლედ ხილული გრაფიკული ფაილების ფორმატები, როგორიცაა gif, jpeg და png, ისევე როგორც HTML5-ის ახალი შესაძლებლობები, როგორიცაა ვიდეო და აუდიოს საიტზე ჩასმის დაშვება.

იმ გრაფიკული საჩუქრების მეშვეობით და html ტექსტიუგუნურია მისი ერთ ფაილში გაერთიანება, რომ საიტზე გამოჩნდეს ის სტაგნაცია იქნება, მაგრამ არა html ბმულების იგივე ელემენტებით. პირველ რიგში, გრაფიკული სურათები, ეს და іnshі მულტიმედიური მონაცემები ინახება okremikh ფაილებში. მათთვის კი ვებ-გვერდს ემატება სპეციალური ტეგები, რომელთა გამოყენება შესაძლებელია ფაილებზე. Zokrema ამ ტეგით є img ტეგი... ასეთი ტეგის მისამართის დაყენების შემდეგ, ბრაუზერი იკვებება ვებ სერვერიდან ნახვის ფაილით სურათებიდან, აუდიო ან ვიდეო კლიპებიდან და მხოლოდ ვებ-გვერდზე გამოტანისას.

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

ჯერ ჩადეთ სურათები და დაწვრილებით დაათვალიერეთ "img" ტეგი და შეიტყვეთ მეტი გრაფიკული ფორმატების შესახებ.

გრაფიკული სურათების ფორმატირება.

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

1. JPEG ფორმატი(ერთობლივი ფოტოგრაფიის ექსპერტთა ჯგუფი). პოპულარული ფორმატის მისაღწევად, სურათის შენახვა. Pіdtrimu 24-bit colіr і sberіgє ყველა pіvton ფოტოებზე უმნიშვნელოა. Ale jpeg არ იძლევა ხედვას და სურათებში სხვა დეტალებისა და ტექსტის შექმნის საშუალებას. JPEG ფაილები ძირითადად გამოიყენება ფოტოების გადასაღებად. ფაილები ფორმატში შეიძლება გაფართოვდეს jpg, jpe, jpeg.

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

3. PNG ფორმატი(პორტატული ქსელური გრაფიკა). Tse ფორმატი buv იშლება როგორც ცვლის ძველ GIF-ს, ისევე როგორც, deyakiy მსოფლიოში, JPEG-ს. ვაღიარებ ჩემს ხედვას, მაგრამ არ ვაძლევ უფლებას ანიმაციის შექმნას. დანია არის დიდი გაფართოებული png ფორმატი.

როდესაც საიტები ღიაა, დაურეკეთ სტუმარს სურათზე JPEG ფორმატიიყიდება GIF, ale inodi vikoristovuyt PNG. უფრო ჭკვიანურად გადადი რომელ ფორმატზე უფრო ლამაზია ვიდრე ვიკორისტოვუვატი. მოკლედ, მაშინ:

JPEG საუკეთესო არჩევანია ფოტოების ან ნაპივტონის სურათების გადასაღებად;

• GIF vikoristovuєtsya ძირითადში ანიმაციისთვის;
• PNG არის ფორმატი ყველაფრისთვის (ხატები, ღილაკები და ა.შ.).

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

ოტჟე, როგორ შემიძლია მაინც ჩავსვა სურათი ვებ-გვერდზე? სურათის ჩასმა დასაშვები სინგლი img ტეგი... ბრაუზერი აჩვენებს სურათს ვებსაიტის მოცულობაში, არღვევს img ტეგს.

ჩადეთ სურათის კოდი html-შიგვერდით მაє ასეთი ვიგლიადი:

განათავსეთ დანიის html-კოდი გამოსახულების ვებ-გვერდზე, რადგან ის ინახება image.jpg ფაილში, რომელიც განთავსებულია იმავე პაპის გვერდიდან. Yak vi-ს შეუძლია მიუთითოს სურათის მისამართი src ატრიბუტები... თანაც, უკვე ვილაპარაკე. ამრიგად, ღერძი, src ატრიბუტი, არის სავალდებულო ატრიბუტი, რომელიც ემსახურება მისამართის ფაილთან სურათების დაკავშირებას. src ატრიბუტის გარეშე, img ტეგი არ არის masseu.

მე დავამატებ ფაილს დამატებით ბმულებს სურათებიდან:

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

src ატრიბუტებში შეგიძლიათ დაამატოთ მეტი, ვიდრე უბრალოდ სურათი. მაშ ასე, როგორც სურათები აღიჭურვება ჰემში, ამავე დროს html ბმულებით, რომ სურათების სკინ ფაილში არის საკუთარი url-მისამართები. ასე რომ, შეგიძლიათ სურათის url ჩასვათ src ატრიბუტში. მაგალითად:

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

img ტეგი არის რიგის ელემენტი, ამიტომ უფრო ლამაზია მისი დაყენება ბლოკის ელემენტის შუაში, მაგალითად, P ტეგის შუაში - აბზაცი:

მოდით ვივარჯიშოთ და ჩავსვათ წინა სტატიების შესახებ html სურათი... ვხსნი საქაღალდეს ჩემი გვერდითი "images" html ფაილით და ვცვლი ფაილს სურათით "bmw.jpg", რომელიც ასე გამოიყურება:

ჩასმული სურათის მხარის Todi html კოდი იქნება ასეთი:

გაოცებული ვარ ბრაუზერში ნაჩვენები შედეგით:

Yak mi bachimo of არაფერი იკეცება დაშორებულ სურათში დედის ვებგვერდებზე. შორს არის "img" ტეგის რამდენიმე მნიშვნელოვანი ატრიბუტი.

Alt ატრიბუტი - იაკის სათადარიგო ვარიანტი

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

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

დაახლოებით ასეა ვიგლიადє:

მინიჭებული სურათის ზომა

არსებობს img ტეგის რამდენიმე ატრიბუტი, იმის შესახებ, თუ როგორ აპირებთ გახდეთ კეთილშობილური. რამდენიმე ატრიბუტი სიგანეі სიმაღლე... თქვენ შეგიძლიათ vikoristovuvati їkh, რომ გაჩვენოთ სურათის ზომა:

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

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

ჩადეთ ვიდეო და აუდიო დამატებითი HTML 5-ით

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

ჩასმა აუდიო HTML5 nada guy tag აუდიო... ფაილის მისამართები, რომელშიც ინახება აუდიო კლიპი, უნდა იქნას გამოყენებული დამატებითი src ატრიბუტისთვის, რომელიც უკვე ვიცით:

"აუდიო" ტეგი მიდის ბლოკის ელემენტამდე. ბრაუზერის შესაცვლელად აუდიო კლიპი არ იქნება. Scho b vin tse zrobiv, აუდიოში აუცილებელია სპეციალური ატრიბუტის დამატება ავტომატური ჩართვა... Osobliviy, მაგრამ ეს არ არის მნიშვნელოვანი. თეორიაში ატრიბუტის ერთი არსებობის მიღწევა, რაც დღის შედეგი იქნება.

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

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

გოლოვნა

შეცვალეთ საიტი და გააკეთეთ ბიზნესი!

შემიძლია მოგცეთ ფრაზა, შეგიძლიათ იგრძნოთ ზოგიერთ საიტზე, მაგრამ ეს არ არის უფასო!

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

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

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

HTML є-ის დიდი უპირატესობები:

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

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

მე მამხნევებს ჩემს სტატუსს, რომ კიდევ უფრო ჯიუტი ვიყო, მე თვითონ პროგრამისტი არ ვარ, მაგრამ რობოტი არც უფრო მიყვარს.