ჩასმა რენდერი HTML-შიარსებობს ორი ძირითადი ფორმატი: GIF და JPEG. GIF ფორმატს შეუძლია შეინახოს უმარტივესი ანიმაცია (დინამიური ბანერები), JPEG იდეალურია სურათების დიდი რაოდენობის ჩვენებისთვის, როგორიცაა ფოტოები. ვებ-გრაფიკის მესამე ფორმატი არის PNG ფორმატი, თუმცა არ უარვყოფთ მის ფართო გამოყენებას ვებ დიზაინში. იქნება სურათი GIF ან JPEG ფორმატში, ის ჩასმულია ვებ გვერდზე დამატებითი ტეგით < img > , რომელიც ხურავს ტეგს აკლია.

SRC ატრიბუტი

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

აბა, ვცადოთ სურათის ჩასმა გვერდზე? ჩვენ ვწერთ კოდს (გზა - URL, რეგისტრირებულია საქაღალდის მდებარეობაში სურათებით):

< img src="image/primer.jpg">

ალტერნატიული ტექსტი. ALT ატრიბუტი

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

უმჯობესია სურათების ჩვენება ბრაუზერში მხოლოდ მათზე დაწკაპუნებით.

დააყენეთ ზომა. WIDTH და HEIGHT ატრიბუტები

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

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

ვისნოვოკი

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

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

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

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

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

ყველა კოპირაიტერის ცხოვრებაში მოდის html ტეგების გაცნობის ეტაპი. ეს სპონტანურად ჩნდება და როგორც ჩანს, ასისტენტის შესაძლებლობაა „მოამზადოს ტექსტი გამოქვეყნებამდე“. ეს ნიშნავს, რომ სტატისტიკაში თქვენ უნდა ნახოთ სათაურები, აბზაცები, მნიშვნელოვანი ადგილები და სიები, მაგრამ არა Word-ში, არამედ სპეციალური HTML კოდით. დაეხმარეთ ამ საკითხში ტეგები კოპირაიტერისთვის. სამუშაოსთვის საჭირო სია მცირეა, მაგრამ ეს დამოკიდებულია ტექსტის ფორმატირებაზე სტანდარტული ხელსაწყოებით. რა html ტეგებია საჭირო კოპირაიტერისთვის? (თუ ძალიან გეზარებათ კითხვა, გადაახვიეთ ქვემოთ - არის მარტივი და ნათელი თემატური ინფოგრაფიკა html ტეგების შესახებ!)

კვების კოპირაიტერი აყალიბებს ტრადიციას. და იწყება ყველა ფორმულის სუნი "რომელი ტეგი არის მითითებული...":

• სათაური;
• აბზაცი;
• თამამი ტექსტი;
• დახრილი;
• აღნიშვნების სია / არა მარკირება /

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

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

სათაურების შექმნის ტეგები წარმოდგენილია h1-h6 ელემენტებით. მათი სუნის ასო ინგლისური ჰედერიდან (სათაურიდან) ამოიღეს. სათაურის საჭირო ტიპის დასაყენებლად და PS-სთვის მის მნიშვნელობაზე ხაზგასასმელად გამოიყენეთ შემდეგი კოდი:

თემა h1

თემა h2

თემა h3

თემა h4

h5 თემა

თემა h6

საიტზე ნახავთ მომავალ შეკვეთას.

თემა h1

თემა h2

თემა h3

თემა h4

h5 თემა

თემა h6

ყველაზე დიდი მნიშვნელობა - და ხილვადობა - არის h1 სათაური. იოგო ვიკორისტა დარგვის სახელობის ჟაკუიტაში და ერთხელ ეჩვევა. ტექსტის ქვესათაურებისთვის ჩვენ გირჩევთ h2 და h3. ისინი ხელს უწყობენ ამ მასალის მნიშვნელობის ხაზგასმას და სტატიის დაყოფას საინფორმაციო დონეებად.

სათაურები h4-h6 პრაქტიკულად არ არის განხილული, მაგრამ საჭიროა აჩვენონ ლოგიკური ბლოკები და მნიშვნელოვანი ფრაგმენტები.

შესანიშნავი სტატიებისთვის უმჯობესია გამოიყენოთ სათაურები h1-h3, მცირეებისთვის - h1 და h2.

სიები: მონიშნული და ამოუცნობი

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

1. მონიშნულია - შეიცავს ნუმერაციას;
2. unmarked - ელემენტები ნაჩვენებია სიმბოლოებით.

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

მონიშნეთ სიის მონიშვნის მოხსნაᲘსე:

როდესაც ეს მოხდება, სიის ელემენტს აქვს HTML ჩარჩო:

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

1. კონდახი
2. კონდახი
3. კონდახი
4. კონდახი

მონიშნული სიისთვის მსგავსია:

• კონდახი
• კონდახი
• კონდახი
• კონდახი

ჩვენ გავიარეთ სიები. შეგიძლიათ დაიშალოთ.

ტეგები: ტექსტის ხაზგასმა: თამამი და დახრილი

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

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

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

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

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

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

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

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

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

წაიკითხეთ: 6687

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

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

როგორ ჩავსვათ სურათები HTML-ში?

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

,

de xxx - გამოსახულების მისამართები. ამ შემთხვევაში, თუ სურათი არის იმავე დირექტორიაში, როგორც გვერდი, ტეგი ასე გამოიყურება:

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

ის ნაჩვენებია სურათის ადგილზე, როდესაც ის მიუწვდომელია, მიუწვდომელია ან ბრაუზერის რეჟიმში "სურათების გარეშე". ხელმისაწვდომია დამატებითი alt tag ატრიბუტისთვის .

გრაფიკულ ფაილში ალტერნატიული ტექსტის დამატების მაგალითი:

გამოსახულების ზომის მინიჭება HTML-ში

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

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

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

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

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

მაგალითად:

გაითვალისწინეთ, რომ გამომავალი სურათის ზომის შეცვლისას, უნდა შეინარჩუნოთ მისი პროპორციები.

ამ მიზნით საკმარისია მიუთითოთ მხოლოდ ერთი პარამეტრის მნიშვნელობები ( სიგანე ან სიმაღლე), ხოლო სხვა ბრაუზერი დაინსტალირებულია ავტომატურ რეჟიმში.

Roztashuvannya სურათები HTML-ში

ისევე როგორც ბევრი HTML ტეგი, მდე align ატრიბუტი განსაზღვრავს გამოსახულების გასწორებას:

- სურათი უფრო კარგად ჩანს ვიდრე ტექსტი;

- სურათი ნაჩვენებია ტექსტის ქვემოთ;

- სურათი ნაჩვენებია ტექსტისგან განსხვავებულად;

- სურათი ტექსტის გვერდით მარჯვნივ ჩანს.

გადაღებული სურათი

სცადეთ ეს გზა:

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

როგორ შევქმნა სურათი HTML-ში ფონის სახით?

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

კონდახისთვის მე დავაყენე შემდეგი ტექსტურის სურათი ფონად:

შეინახეთ სურათები საქაღალდეში, რომლის უკან მომზადებული მხარეა და ჩაწერეთ შემდეგი რიგები:

ფონი ტექსტით.

გვერდზე ფონის სურათი დაყენებულია.

HTML ტეგები- HTML ფილმის საფუძველი. ტეგები გამოიყენება ელემენტების თავიდან ბოლომდე გამოსაყოფად.

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

ყველა HTML ელემენტი იყოფა ხუთ ტიპად:

• ცარიელი ელემენტები — , ,
  , , ,

  ---

  , , , , , , , , , ;
• ელემენტები არაფორმატირებული ტექსტით —