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

დახრილი თუ დახრილი?

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

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

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

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

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

HTML დახრილი

არსებობს ორი სპეციალური ტეგი HTML-ში დახრილი ტექსტის საჩვენებლად: i (სიტყვიდან italic) და em. რომელიმე ამ აღწერში ჩასმული ტექსტის ფრაგმენტის სტილი იგივე იქნება.

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

შრიფტის სტილის თვისება

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

• ნორმალური - ნორმალური შრიფტი;
• დახრილი - დახრილი სტილი;
• oblique - ირიბი სტილი.

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

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

em tag-ისგან განსხვავებით, ის არ ანიჭებს არჩევანს განსაკუთრებულ მნიშვნელობას, ის უფრო შეესაბამება i აღწერს.

მაგალითები

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

ციტატა (შრიფტის სტილი: დახრილი; მარცხნივ: 5 პიქსელი მყარი იასამნისფერი; შიგთავსი მარცხნივ: 20 პიქსელი; )

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

გამოიყენეთ იგი CSS-ში დახრილის დასაყენებლად.

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

დაბლოკვა. მარტივი გვერდის სტრუქტურა

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

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

იხილეთ ეს ბმული, რათა ნახოთ, როგორ გამოიყურება ეს მაგალითი ბრაუზერში.

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

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

დაბლოკვა. აბზაცები

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

აბზაცი იქმნება ტეგის გამოყენებით

ამრიგად:

ეს არის აბზაცი.

ეს კიდევ ერთი აბზაცი.

და კიდევ ერთი აბზაცი.

ეს არის აბზაცი.

ეს კიდევ ერთი აბზაცი.

და კიდევ ერთი აბზაცი.

დაბლოკვა. სათაურები h1, h2, h3, h4, h5, h6

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

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

,

,

,

,

,

. მათ აქვთ მნიშვნელობის სხვადასხვა ხარისხი. სათაურში h1უნდა განთავსდეს მთელი HTML გვერდის სათაური, ვ h2- სახელი ბლოკებიგვერდები, ში h3- ქვებლოკების დასახელება და ა.შ.

ყველა სათაური ნაგულისხმევად თამამია და აქვს განსხვავებული ზომები (ეს შეიძლება შეიცვალოს CSS-ის საშუალებით, მაგრამ ამის შესახებ მოგვიანებით). იხილეთ მაგალითი:

სათაური h1

სათაური h2

სათაური h3

სათაური h4

სათაური h5

სათაური h6

ეს არის პირველი აბზაცი.

ეს არის მეორე პუნქტი.

ეს არის მესამე პუნქტი.

ასე გამოიყურება კოდი ბრაუზერში:

სათაური h1

სათაური h2

სათაური h3

სათაური h4

სათაური h5

სათაური h6

ეს არის პირველი აბზაცი.

ეს არის მეორე პუნქტი.

ეს არის მესამე პუნქტი.

დაბლოკვა. Ცხიმოვანი

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

ეს ჩვეულებრივი ტექსტია და ეს არის ცხიმოვანიტექსტი.

ასე გამოიყურება კოდი ბრაუზერში:

ეს ჩვეულებრივი ტექსტია და ეს არის ცხიმოვანიტექსტი.

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

დაბლოკვა. დახრილები

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

ეს ჩვეულებრივი ტექსტია და ეს არის დახრილიტექსტი.

ასე გამოიყურება კოდი ბრაუზერში:

დაბლოკვა. სიები

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

სიები იქმნება ტეგის გამოყენებით

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

  ასე გამოიყურება კოდი ბრაუზერში:

  • სიის პირველი ელემენტი.
  • სიის მეორე პუნქტი.
  • სიის მესამე პუნქტი.

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

  , და ასეთი სიების ელემენტები ასევე იქმნება ტეგების საშუალებით ლი.

  მოდით შევქმნათ შეკვეთილი სია ტეგის გამოყენებით ოლ:

  1. სიის პირველი ელემენტი.
  2. სიის მეორე პუნქტი.
  3. სიის მესამე პუნქტი.
  
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

  1. სიის პირველი ელემენტი.
  2. სიის მეორე პუნქტი.
  3. სიის მესამე პუნქტი.

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

  დაბლოკვა. ბმულები

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

  ბმული phphtml.net საიტზე.
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

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

  დაბლოკვა. სურათები

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

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

  
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

  გთხოვთ გაითვალისწინოთ, რომ ტეგი არ საჭიროებს დახურვის ტეგს.

  დაბლოკვა. ლინკები სურათების სახით

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

  
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

  დაბლოკვა. ხაზის გაწყვეტა

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

  ვნახოთ ეს შემდეგი მაგალითით:

  ეს არის პირველი აბზაცი.

  ეს არის მეორე პუნქტი.

  
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

  ეს არის პირველი აბზაცი.

  ეს არის მეორე პუნქტი.

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

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

  ვნახოთ, როგორ მუშაობს ეს შემდეგი მაგალითის გამოყენებით:

  ეს არის ტექსტის პირველი ხაზი,
  და ეს არის მეორე.

  
  
  

  ასე გამოიყურება კოდი ბრაუზერში:

  ეს არის ტექსტის პირველი ხაზი,
  და ეს არის მეორე.

  დაბლოკვა. HTML კომენტარები

  თითქმის ყველა პროგრამირების ენას აქვს ისეთი კონცეფცია, როგორიცაა "კომენტარები".

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

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

  ტეგების დაწერის წესები და თანმიმდევრობა

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

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

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

  შერჩეული ფრაგმენტი

  ან ასე:

  შერჩეული ფრაგმენტი

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

  თამამი და დახრილი ტექსტი - ტეგები , , და

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

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

  ტექსტი ტეგებში ძლიერია

  ტექსტი b ტეგებში

  და აი, როგორ გამოიყურება ეს ორი ხაზი გვერდის საწყის კოდში:

  ტექსტი ტეგებში ძლიერია ტექსტი b ტეგებში

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

  ტექსტი em ტეგებში

  ტექსტი ტეგებში I

  და აქ არის წყაროს კოდი:

  ტექსტი em ტეგებში ტექსტი ტეგებში I

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

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

  ტეგები ტექსტის ხაზით ხაზგასმისთვის - , და

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

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

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

  მონიშნეთ და ატრიბუტები - ტექსტის შრიფტის პარამეტრები

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

  • სახე- თავად შრიფტი. მაგალითად, Arial, Courier ან Verdana. შეგიძლიათ ჩამოთვალოთ რამდენიმე, რადგან ყველა მომხმარებელს არ აქვს შრიფტების ვრცელი ნაკრები და რამდენიმე სახის ატრიბუტში ჩაწერით, ბრაუზერს შეეძლება აირჩიოს რომელი გამოიყენოს, უფრო სწორად, რომელი არის სისტემაში;
  • ზომა- ატრიბუტი, რომელიც მიუთითებს ტექსტის ზომაზე. შეიძლება გამოიხატოს როგორც ჩვეულებრივი ერთეულებით, ასევე პიქსელებით;
  • ფერი- ტექსტის ფერი. ეს ატრიბუტი შეიძლება გამოყენებულ იქნას როგორც HTML ფერის კოდებში, ასევე Word-ებში. პირველებს აქვთ ფორმა #FFFFFF (სადაც F არის ნებისმიერი რიცხვი ან ასო A-დან F-მდე), ხოლო მეორეები იწერება მარტივი სიტყვებით (მაგალითად, წითელი).

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

  ეს ტექსტი არის 6 პიქსელი

  ეს ტექსტი წითელია
  ეს ტექსტი არის Arial შრიფტით
  ეს ტექსტი არის წითელი და ზომა 5 პიქსელი

  და აი რას ნახავთ დაწერილი კოდის დამუშავების შემდეგ:
  

  ტექსტის დიზაინის ელემენტების დაბლოკვა - სათაურები

  -

  , აბზაცი

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

  ,

  ,...,

  . აი, როგორ გამოიყურება ყველა სათაური დამუშავებისას:

  

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

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

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

  

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

  

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

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

  მოგესალმებით, მეგობრებო.

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

  ასე რომ, რადგან აზრზე არაფერი მომივიდა დაწერა. გადავწყვიტე სტატისტიკის გადახედვა, რათა გამეგო რა აინტერესებს RuNet მომხმარებლებს HTML, WordPress, DLE და მსგავსი თემების მიმართ. და გამოიცანით რა? ჯერ კიდევ არის რაღაცის დაწერა. ყველა კითხვას, რომელიც მე ვიპოვე, როგორც ჩანს, აქვს პასუხები, მაგრამ არა ყოველთვის გასაგები ფორმით. და საერთოდ საინტერესო გახდა მსგავსი რამის დაწერა.

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

  ტექსტის გამკაცრება.

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

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

  კოდის ნიმუში:

  მინიატურა

  შედეგი:

  მინიატურა

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

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

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

  კოდის ნიმუში:

  შედეგი:

  ეს ყველაფერი საკმაოდ მარტივია, არა?

  დახრილი ტექსტი.

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

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

  კოდის ნიმუში:

  ტექსტი დახრილებით

  შედეგი:

  ტექსტი დახრილებით

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

  კოდის ნიმუში:

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

  შედეგი:

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

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

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

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

  მაგრამ დაამატეთ არ არის საკმარისი. თქვენ ასევე უნდა მიუთითოთ სტილის პარამეტრი, რომელიც საშუალებას მოგცემთ დაამატოთ CSS თვისებები საჭირო ტექსტში და მიუთითოთ თავად თვისება (ფერი), რომელიც დაგეხმარებათ კონკრეტული ფერის დაყენებაში. და ბოლოს, მიუთითეთ მნიშვნელობა ფერის თვისებისთვის. მაგრამ შეიძლება გაჩნდეს კითხვა: "რა უნდა მივუთითო?" თქვენ უნდა მიუთითოთ იმ ფერის HTML კოდი, რომელშიც გვინდა ტექსტის „დახატვა“. შეგიძლიათ იპოვოთ HTML ფერის კოდები.

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

  მაგალითი კოდი.

  ტექსტი ხაზგასმით ფერი

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

  შედეგი:

  ხაზგასმული ტექსტი

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

  იმედია ყველაფერი გარკვევით ავხსენი.

  წარმატებები, მეგობრებო. სულ მალე... საინტერესო სიახლე იქნება...

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

  • მონიშნეთ მე HTML;
  • მონიშნეთ em HTML;
  • CSS თვისება შრიფტის სტილი.

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

  დახრილი ტექსტი: ტეგი

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

  ვებსაიტის შემქმნელი "Nubex"

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

  დახრილი ტექსტი: ტეგი

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

  ვებსაიტის შემქმნელი "ნუბექსი"

  შედეგი:

  ვებსაიტის შემქმნელი "ნუბექსი"

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

  დახრილი ტექსტი CSS-ით

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

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

  ატრიბუტის გამოყენება შრიფტის სტილიპრაქტიკაზე:

  ჩვენი საიტები ნამდვილად არის უზარმაზარი ნაბიჯივებ განვითარებაში.

  ჩვენ ამას რეალურად ვაკეთებთ ხარისხიანისაიტები.

  
  
  

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