Როგორ გადაიტანოთ ტექსტი ტექსტის ირგვლივ

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

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

CSS- ის გამოყენება

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

1. პირველი, დაამატეთ თქვენი სურათი თქვენს ვებ გვერდზე. გახსოვდეთ, რომ გამორიცხოთ ნებისმიერი ვიზუალური მახასიათებლები (როგორიცაა სიგანე და სიმაღლე ღირებულებები) ამ HTML- დან. ეს მნიშვნელოვანია, განსაკუთრებით საპასუხო ვებსაიტისთვის, სადაც გამოსახულების ზომა განსხვავდება ბრაუზერის მიხედვით. ზოგიერთი პროგრამული უზრუნველყოფა, როგორიცაა Adobe Dreamweaver, დაამატებს სიგანე და სიმაღლე ინფორმაცია სურათებით, რომლებიც ჩასმული ეს ინსტრუმენტი, ასე რომ დარწმუნებული ამოიღონ ეს ინფორმაცია HTML კოდი! დარწმუნებული უნდა იყოს, რომ შეიტანოთ შესაბამისი ტექსტი . აქ არის მაგალითი, თუ როგორ შეიძლება თქვენი HTML კოდი გამოიყურებოდეს:
2. სტილის მიზნით, თქვენ ასევე შეგიძლიათ დაამატოთ კლასი გამოსახულება. ეს კლასი ღირებულება არის ის, რაც ჩვენ ვიყენებთ ჩვენს CSS ფაილს. გაითვალისწინეთ, რომ აქ ჩვენ ვიყენებთ ღირებულებას თვითნებურად, თუმცა, ამ კონკრეტულ სტილში, ჩვენ ვგულისხმობთ "მარცხნივ" ან "უფლების" მნიშვნელობას, რაც დამოკიდებულია იმაზე, თუ როგორ გვინდა ჩვენი იმიჯი გასწორდეს. ჩვენ ვნახავთ, რომ უბრალო სინტაქსი კარგად იმუშავებს და ადვილად იმოქმედებს სხვებისთვის, რომლებსაც შეიძლება ჰქონდეთ საიტი მომავალში, რათა გაიგონ, მაგრამ შეძლებთ ამ კლასის ღირებულებას.
   2. თავისთავად, ეს კლასი ღირებულება არაფერს არ გააკეთებს. სურათი არ ავტომატურად შეესაბამება ტექსტის მარცხენა მხარეს. ამისათვის ახლა ჩვენ უნდა მივმართოთ ჩვენს CSS ფაილს.

1. თქვენს სტილში, შეგიძლიათ დაამატოთ შემდეგი სტილი:
   1. .ლეტი {
   2. float: მარცხენა;
   3. padding: 0 20px 20px 0;
   4. }
   5. ის, რაც აქ გააკეთეთ, გამოიყენეთ CSS "float" ქონება , რომელიც გამოსახავს ნორმალურ დოკუმენტურ ნაკადს (ისე, რომ გამოსახულება ჩვეულებრივ ეკრანზე გამოჩნდება) და მისი კონტეინერის მარცხენა მხარეს გასწორება . ტექსტი, რომელიც მას შემდეგ მოდის HTML მარკეტში ახლა გადატანა მასზე. ჩვენ ასევე დასძინა ზოგიერთი padding ღირებულებები ისე, რომ ეს ტექსტი არ იქნებოდა, არამედ პირდაპირ წინააღმდეგ გამოსახულება. ამის ნაცვლად, მას ექნება გარკვეული ლამაზი ინტერვალი, რომელიც იქნება ვიზუალურად მიმზიდველი გვერდზე დიზაინი. CSS- ს შაბლონისთვის, ჩვენ ვამატეთ გამოსახულების ზედა და მარცხენა მხარეს 0 ღირებულებები და 20 პიქსელი მის მარცხენა და ქვედაში. გახსოვდეთ, თქვენ უნდა დაამატოთ ზოგიერთი padding მარჯვენა მხარეს მარცხენა შეყვანილი სურათი. მარჯვენა შეესაბამება გამოსახულება (რომელიც ჩვენ შევხედავთ ერთ მომენტში) იქნებოდა padding მიმართა მისი მარცხენა მხარეს.
2. თუ ბრაუზერში თქვენს ვებ-გვერდს იხილავთ, ახლა უნდა დაინახოთ, რომ თქვენი გამოსახულება შეესაბამება გვერდის მარცხენა მხარეს და ტექსტს ლამაზად ჩამორჩება. კიდევ ერთი გზა ვთქვა ის არის, რომ გამოსახულება "ჩამოშორებული მარცხნივ".

1. თუ გსურთ შეცვალოთ ეს სურათი, რომ შეესაბამებოდეს მარჯვნივ (ისევე, როგორც ეს ფოტოშია მოცემული), ეს იქნებოდა მარტივი. პირველ რიგში, თქვენ უნდა დავრწმუნდეთ, რომ სტილის გარდა, ჩვენ უბრალოდ დავამატეთ CSS- ის "მარცხენა" კლასის კლასს, ჩვენ ასევე გვაქვს მარჯვენა განლაგება. ეს ასე გამოიყურება:
   1. .right {
   2. float: უფლება;
   3. padding: 0 0 20px 20px;
   4. }
   5. თქვენ ხედავთ, რომ ეს არის თითქმის იდენტურია პირველი CSS- ის მიერ დაწერილი. ერთადერთი განსხვავება არის ის ღირებულება, რომელიც ჩვენ ვიყენებთ "float" თვისებას და padding ღირებულებებს ვიყენებთ (დავამატებთ ზოგიერთი მარცხენა მხარეს ჩვენი იმიჯის ნაცვლად).
2. საბოლოოდ, თქვენ შეცვლით იმიჯის კლასს თქვენი "HTML" - დან "მარცხნივ"
3. შეხედეთ თქვენს გვერდს ბრაუზერში და თქვენი სურათი უნდა იყოს შეესაბამება ტექსტის სწორად შეფუთვაზე. ჩვენ, როგორც წესი, დავამატებთ ორივე სტილს, "მარცხენა" და "უფლება" ყველა ჩვენს სტილისთვის, რათა ვებ-გვერდებს შევქმნათ ეს ვიზუალური სტილის გამოყენება. ეს ორი სტილის გახდება ლამაზი, reusable თვისებები, რომ ჩვენ შეგვიძლია მივმართოთ, როდესაც ჩვენ გვჭირდება სტილის სურათების ტექსტი შეფუთვა მათ გარშემო.

HTML- ის ნაცვლად CSS (და რატომ არ უნდა გააკეთოთ ეს)

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