ახლა ჩვენ ვაპირებთ შეისწავლოთ ძირითადი ნიშნები. დავიწყოთ იმით, თუ რა ნიშნებია საჭირო გვერდზე, მისი სტრუქტურის ფორმირება.
ბლოკი. უმარტივესი გვერდის სტრუქტურა
საიტის გვერდი არის მარტივი ტექსტური ფაილი, გაფართოებით .html... ეს ფაილი შეიცავს HTML გვერდის ტექსტს და ტეგებს. ამ ფაილს უნდა ჰქონდეს შემდეგი ტეგები: ტეგი , რომელიც უნდა შეიცავდეს მთლიანი საიტის ტექსტს (ყველაფერი, რაც ამ თეგის გარეთ არის დაწერილი, უგულებელყოფს ბრაუზერს), და მის შიგნით უნდა იყოს კიდევ ორი \u200b\u200bნიშანი:
გვერდისა და ნიშნის მომსახურების შინაარსისთვის - მთავარი ტექსტისთვის, რომელიც ჩანს ბრაუზერის ეკრანზე.იმ შინაარსის მომსახურებისთვის, რომელიც მდებარეობს თეგის შიგნით
, ბევრი სხვადასხვა რამ შემოდის, მაგრამ ახლა ჩვენ მხოლოდ ორი გვჭირდება. ეს არის ნიშანიიხილეთ ეს ბმული, თუ როგორ გამოიყურება ეს მაგალითი ბრაუზერში.
ვფიქრობ, მას შემდეგ, რაც წაიკითხავთ გვერდის ძირითად სტრუქტურას, კვლავ გაუგებრობა გაქვთ იმის შესახებ, თუ როგორ გამოიყურება ეს ყველაფერი პრაქტიკაში. ამიტომ, მე გადავიღე სპეციალური ვიდეო, რომელშიც მე გაჩვენებთ თუ როგორ უნდა შექმნათ თქვენი პირველი HTML გვერდი და აწარმოოთ იგი ბრაუზერში (მასში ასევე გეტყვით გვერდის სათაურის, კოდირების, კოდის დიზაინის შესახებ). გადახედეთ მას და მხოლოდ ამის შემდეგ გადადით შემდგომ კითხვაზე:
ახლა, როდესაც ჩვენ ვისწავლეთ როგორ შევქმნათ უმარტივესი გვერდები, გადავდივართ სასარგებლო თეგების შესასწავლად, რომლებიც უნდა იქნას გამოყენებული თეგის შიგნით
... ეს იქნება თეგები აბზაცებისთვის, სათაურები, სიები, ბმულები და სხვა სასარგებლო საგნები. მოდით დავიწყოთ.ბლოკი. აბზაცები
გვერდის ერთ-ერთი მთავარი ელემენტია აბზაცები... მათი შედარება შესაძლებელია წიგნის აბზაცებთან - თითოეული აბზაცი იწყება ახალი სტრიქონიდან და აქვს ე.წ. წითელი ხაზი (ეს მაშინ, როდესაც აბზაცის ტექსტის პირველი სტრიქონი ოდნავ ჩამოწეულია მარჯვნივ). სტანდარტულად არ არსებობს წითელი ხაზი, მაგრამ ამის გაკეთება ადვილია (ამის შესახებ მოგვიანებით).
აბზაცი იქმნება თეგის გამოყენებით
Ამგვარად:
ეს არის აბზაცი.
ეს კიდევ ერთი პუნქტია.
და კიდევ ერთი აბზაცი.
ეს არის აბზაცი.
ეს კიდევ ერთი პუნქტია.
და კიდევ ერთი აბზაცი.
ბლოკი. სათაურები h1, h2, h3, h4, h5, h6
აბზაცების გარდა, მნიშვნელოვანია გვერდზე სათაურები... მათი შედარება ასევე შეიძლება წიგნის სათაურებთან - თითოეულ თავს აქვს საკუთარი სათაური (ამ თავის სათაური) და იყოფა აბზაცებად, რომლებსაც ასევე აქვთ საკუთარი სათაურები. ისე, გვერდის ძირითადი ტექსტი აბზაცებშია.
იქმნება სათაურები ტეგების გამოყენებით
,
,
,
,
,
... მათ მნიშვნელობა აქვთ სხვადასხვა ხარისხით. სათაურში თ 1 უნდა ჰქონდეს მთლიანი HTML გვერდის სათაური, თ 2 - სახელი ბლოკები გვერდები h3 - ქვებლოკების დასახელება და ა.შ.
,
,
,
... მათ მნიშვნელობა აქვთ სხვადასხვა ხარისხით. სათაურში თ 1 უნდა ჰქონდეს მთლიანი HTML გვერდის სათაური, თ 2 - სახელი ბლოკები გვერდები h3 - ქვებლოკების დასახელება და ა.შ.
,
... მათ მნიშვნელობა აქვთ სხვადასხვა ხარისხით. სათაურში თ 1 უნდა ჰქონდეს მთლიანი HTML გვერდის სათაური, თ 2 - სახელი ბლოკები გვერდები h3 - ქვებლოკების დასახელება და ა.შ.
ყველა სათაური ნაგულისხმევია სქელი და აქვს სხვადასხვა ზომის (ეს შეიძლება შეიცვალოს CSS– ით, მაგრამ უფრო მეტი მოგვიანებით). იხილეთ მაგალითი:
H1 სათაური
H2 სათაური
H3 სათაური
H4 სათაური
H5 სათაური
H6 სათაური
ეს არის პირველი პუნქტი.
ეს არის მეორე პუნქტი.
ეს არის მესამე პუნქტი.
ასე გამოიყურება კოდი ბრაუზერში:
H1 სათაური
H2 სათაური
H3 სათაური
H4 სათაური
H5 სათაური
H6 სათაური
ეს არის პირველი პუნქტი.
ეს არის მეორე პუნქტი.
ეს არის მესამე პუნქტი.
ბლოკი. Ცხიმოვანი
თქვენ უკვე იცით, რომ ნაგულისხმევი სათაურები არის ცხიმოვანი... ამასთან, შეგიძლიათ უბრალო ტექსტი გაბედულად გააკეთოთ - უბრალოდ ჩადეთ იგი თეგში ... იხილეთ მაგალითი:
ეს არის მარტივი ტექსტი და ეს არის ცხიმოვანი ტექსტი
ასე გამოიყურება კოდი ბრაუზერში:
ეს არის მარტივი ტექსტი და ეს არის ცხიმოვანი ტექსტი
გამოყენებული უნდა იქნეს სხვა ნიშნის შიგნით, მაგალითად, აბზაცი. ამ შემთხვევაში, აბზაცები ქმნის გვერდის მთლიან სტრუქტურას (აბზაცები და სათაურები) და ნიშანს ბ ტექსტის ცალკეულ ნაჭრებს თამამად ხდის.
ბლოკი. დახრილი
ცხიმოვანი გარდა, შეგიძლიათ გააკეთოთ დახრილი ტეგის გამოყენებით :
ეს არის მარტივი ტექსტი და ეს არის დახრილი ტექსტი
ასე გამოიყურება კოდი ბრაუზერში:
ბლოკი. სიები
აბზაცებთან და სათაურებთან ერთად, არის გვერდის კიდევ ერთი მნიშვნელოვანი ელემენტი - ეს არის სიები... ასეთი ელემენტები, ალბათ, ნაცნობია ინტერნეტის ყველა მომხმარებლისთვის. ისინი წარმოადგენს რაიმეს ჩამონათვალს (ჩამონათვალს) წერტილზე. ჩვეულებრივ, სიაში თითოეული პუნქტის გვერდით არის შევსებული წრე (მას უწოდებენ მარკერი სია).
სიები იქმნება თეგის გამოყენებით
- , რომლის შიგნით უნდა განთავსდეს თეგები
- ... მონიშნე ul განსაზღვრავს თავად სიას და თეგებში ლი უნდა განთავსდეს სიის ერთეულები (ანუ ერთი ლი შეესაბამება ერთი სიის მარკერს). გაითვალისწინეთ, რომ თქვენ არ შეგიძლიათ გამოიყენოთ li tags. იხილეთ მაგალითი:
ეს არის სათაურის სათაური - სიაში პირველი პუნქტი.
- სიის მეორე პუნქტი.
- სიაში მესამე პუნქტი.
ასე გამოიყურება კოდი ბრაუზერში:
- სიაში პირველი პუნქტი.
- სიის მეორე პუნქტი.
- სიაში მესამე პუნქტი.
თეგის საშუალებით შექმნილი სიები ulუწოდებენ მოუწესრიგებელი სიები. ეს სახელი მათ იმიტომ შეარქვეს, რომ ასევე არსებობს უბრძანა სიები, რომლებსაც აქვთ წერტილების მარკერების ნაცვლად. ასეთ სიებს ul tag- ის ნაცვლად აქვს ნიშანი
- და ასეთი სიების ელემენტები იქმნება თეგების საშუალებით ლი.
- სიაში პირველი პუნქტი.
- სიის მეორე პუნქტი.
- სიაში მესამე პუნქტი.
- სიაში პირველი პუნქტი.
- სიის მეორე პუნქტი.
- სიაში მესამე პუნქტი.
- სახე - თავად შრიფტი. მაგალითად, Arial, Courier ან Verdana. შეგიძლიათ ჩამოთვალოთ რამდენიმე, რადგან ყველა მომხმარებელს არ აქვს შრიფტების ფართო ნაკრები და სახის ატრიბუტში რამდენიმე დაწერით, ბრაუზერს შეეძლება აირჩიოს რომელი გამოიყენოს, უფრო სწორად, რომელია სისტემაში;
- ზომა - ატრიბუტი, რომელიც მიუთითებს ტექსტის ზომას. მისი გამოხატვა შესაძლებელია როგორც თვითნებური ერთეულებით, ისე პიქსელებით;
- ფერი - ტექსტის ფერი. ეს ატრიბუტი შეიძლება გამოყენებულ იქნას როგორც HTML კოდების კოდებში, ასევე სიტყვებში. პირველი ფორმის #FFFFFF (სადაც F არის ნებისმიერი რიცხვი ან ასო A- დან F- მდე), ხოლო უკანასკნელი დაწერილია მარტივი სიტყვებით (მაგალითად, წითელი არის წითელი).
მოდით შევადგინოთ შეკვეთილი სია თეგის გამოყენებით ოლი:
ეს არის სათაურის სათაური
ასე გამოიყურება კოდი ბრაუზერში:
შეკვეთილი სიების მოხერხებულობაა ის, რომ შემიძლია ჩასვა სიის ახალი ელემენტი სადმე - და თვით ნუმერაცია გადაწყდება (ანუ ცვლილებების შეტანისას არ მომიწევს ამის დაცვა, როგორც ამას ხელით მოვაწყობდი).
ბლოკი. ბმულები
ბმულები არის ის ელემენტები, რითაც ინტერნეტი გამოდის ინტერნეტიდან. ბმულებზე დაჭერით, ჩვენ შეგვიძლია საიტის ერთი გვერდიდან მეორეზე გადასვლა. რომ ისინი არ არსებობდნენ, ინტერნეტი იქნებოდა მხოლოდ იმ გვერდების კრებული, რომლებიც არანაირად არ არის დაკავშირებული ერთმანეთთან.
ეს არის სათაურის სათაური ბმული phphtml.net საიტზე.
ასე გამოიყურება კოდი ბრაუზერში:
ბმულები აბსოლუტური და ნათესავიუფრო მეტიც, მათ შეუძლიათ მიგვიყვანონ როგორც თქვენს საიტზე, ასევე სხვის საიტზე. უმჯობესია აჩვენოთ ეს რთული მომენტები და არ აღწეროთ ტექსტში, ამიტომ გადავიღე შემდეგი ვიდეო თქვენთვის. გადახედეთ მას და მხოლოდ ამის შემდეგ გადადით შემდგომ კითხვაზე:
ბლოკი. სურათები
მოდით ახლა გაერკვნენ, თუ როგორ უნდა განათავსონ სურათი თქვენს ვებ – გვერდზე. ეს არის ის, რაც tag არის
რომელსაც აქვს საჭირო ატრიბუტი src, რომელიც ინახავს სურათის ფაილისკენ მიმავალ გზას.
ვნახოთ როგორ მუშაობს შემდეგი მაგალითით:
ეს არის სათაურის სათაური 
ასე გამოიყურება კოდი ბრაუზერში:
გაითვალისწინეთ, რომ ტეგი
არ საჭიროებს დასასრულ ნიშანს.
ბლოკი. ბმულები სურათების სახით
Ბმული შეიძლება არა მხოლოდ ტექსტი, არამედ სურათი - ნიშანი ამისთვის საკმარისია
ბუდე თეგში როგორც შემდეგ მაგალითში. დააჭირეთ სურათს - თქვენ მიჰყვებით phphtml.net ვებსაიტს (შემდეგ წიგნში დაბრუნებისას - დააჭირეთ ღილაკს "უკან" ბრაუზერში):
ეს არის სათაურის სათაური
ასე გამოიყურება კოდი ბრაუზერში:
ბლოკი. ხაზის წყვეტა
დაიმახსოვრე, რა მოხდება, თუ ერთმანეთის გვერდიგვერდ შექმნით, მაგალითად, ორ აბზაცს - ამ შემთხვევაში, თითოეული მათგანის ტექსტი დაიწყება ახალი სიმები.
ვნახოთ ეს შემდეგი მაგალითით:
ეს არის სათაურის სათაური ეს არის პირველი პუნქტი.
ეს არის მეორე პუნქტი.
ასე გამოიყურება კოდი ბრაუზერში:
ეს არის პირველი პუნქტი.
ეს არის მეორე პუნქტი.
არსებობს სიტუაციები, როდესაც გვსურს გქონდეს ერთი აბზაცი, მაგრამ მასში ტექსტი იწყება ახალი სტრიქონით. რატომ შეიძლება ამის საჭიროება? მაგალითად, მე მინდა ლექსის აკრეფა, მაგრამ არ მინდა მისი თითოეული სტრიქონი ცალკე აბზაცად დავყო, რადგან ეს არ იქნება ძალიან ლოგიკური.
ამისათვის, იმ ადგილას, სადაც ხაზის გაწყვეტა უნდა იყოს, დაწერეთ ნიშანი
... გაითვალისწინეთ, რომ ეს ტეგი არის განსაკუთრებული და არ აქვს საბოლოო ნიშანი.ვნახოთ როგორ მუშაობს შემდეგი მაგალითით:
ეს არის სათაურის სათაური ეს არის ტექსტის პირველი სტრიქონი
და ეს მეორეა.
ასე გამოიყურება კოდი ბრაუზერში:
ეს არის ტექსტის პირველი სტრიქონი
და ეს მეორეა.ბლოკი. HTML კომენტარები
პროგრამირების თითქმის ყველა ენას აქვს ისეთი ცნება, როგორიცაა "კომენტარები".
Html გვაძლევს რამდენიმე ვარიანტს ტექსტის ფორმატირების თვალსაზრისით. დღეს მე გეტყვით, თუ როგორ უნდა გააკეთოთ დახრილი შრიფტი html- ში, როგორც სტანდარტული, ასევე არასტანდარტული შრიფტისთვის. მეორე შემთხვევაში, თქვენ უნდა გაითვალისწინოთ რამე, რომ ყველაფერი იმუშაოს.
როგორ დავწეროთ დახრილი html- ით?
დასაწყისისთვის, html– ში არის ორი თეგები, რომლებიც ტექსტს დახრილი სტილის მისცემს. ესენი არიან em და i. სხვათა შორის, მეორე ჩაშენებულია wordpress ძრავის html რედაქტორში, რომელშიც ახლა ამ სტატიას ვწერ. რით განსხვავდება ეს ტეგები? ფაქტობრივად, დღეს არ მინდა ხმამაღლა განვაცხადო, რომ ისინი რაღაცნაირად განსხვავდებიან.
ზოგადად, em გამოიყენება სიტყვების გამოსაყოფად, რომლებიც განსაკუთრებული ინტონაციით უნდა გამოითქვას და მე უბრალოდ ვიზუალურად გამოვყოფ ტექსტს. მოდით, ამით თავი არ შევაწუხოთ, რადგან არ არის ცნობილი სინამდვილეში ეს ასეა.
რა არის css თვისებები დახრილი ტექსტისთვის?
ეს არის შრიფტის სტილის თვისება და მისი დახრილი მნიშვნელობა. ასევე არსებობს oblique მნიშვნელობა და ის ტექსტს აქცევს დახრილად. რაიმე განსხვავებაა ამ მნიშვნელობებს შორის? ფაქტობრივად არცერთი. სხვათა შორის, დეტალური ინფორმაცია წაიკითხეთ ამ და სხვა css თვისებების შესახებ ტექსტში შესაბამის სტატიაში, სადაც ყველაფერი თაროებზეა ასახული.
როგორ გამოვაჩინოთ მორგებული შრიფტი დახრილი ასოებით?
ფაქტია, რომ თუ Google Fonts– ით დააკავშირებთ არასტანდარტულ შრიფტს, ამ შემთხვევაში უნდა მონიშნოთ ველი მინიმუმ 1 დახრილი შრიფტის სტილზე. თუ ეს არ გაკეთებულა, მაშინ, როდესაც თქვენ ცდილობთ ამ შრიფტის დახრილობას, დახრილი უნდა აისახოს ერთ – ერთ სტანდარტულ შრიფტზე. სხვათა შორის, ამ სტატიაში შეგიძლიათ წაიკითხოთ არასტანდარტული შრიფტების შეერთების შესახებ.
ამ სკრინშოტში შეგიძლიათ ნახოთ შრიფტის კავშირის ფრაგმენტი Google Fonts სერვისის საშუალებით.
როგორც ხედავთ, მინიმუმ ერთი დახრილი სტილის გვერდით არის გამშვები ნიშანი. ახლა, საჭირო თეგების ან სტილის თვისების გამოყენებისას, მართალია, ეს შრიფტი გახდება დახრილი და არა სხვა.
ამრიგად, ჩვენ დავალაგეთ ყველა პუნქტი, რომლებიც მუშაობენ დახრილი სტილით. აღარ გიბედავს დაკავება.
იმისათვის, რომ ჩვენი ვებ – გვერდი უფრო თვალსაჩინო იყოს, ტექსტს აბზაცებად დავყოფთ და სათაურს შევარჩევთ. HTML– ს აქვს დოკუმენტის სათაურის 6 დონე, დანომრილი 1 – დან 6 – მდე. სათაურები დეკლარირებულია წყვილი ნიშნით, შესაბამისი დონის ნომრებით, მაგალითად,
- პირველი დონის განყოფილების სათაური და - მეექვსე დონის განყოფილების სათაური. სათაურები ჩვეულებრივი ტექსტისგან განსხვავდება ასოების ზომით და სიგანეზე. პირველი დონის სათაური h1, როგორც წესი, ნაჩვენებია ძალიან დიდი შრიფტით, ხოლო სათაურის ექვს დონეზე H6 ნაჩვენებია ძალიან მცირე შრიფტით.სათაურები
არ აურიოთ დოკუმენტის სექციის სათაურები ადრე განხილული დოკუმენტის სათაურის მიერ განსაზღვრული
.პირველ წინადადებას ტექსტის სათაურად ვიყენებთ - ამისათვის საკმარისია თეგებით შეზღუდვა
და
.ჩასვით თეგები ფაილის other.html ტექსტში
და
ისე, რომ ისინი ზღუდავენ ტექსტის პირველ წინადადებას და კოდის ამ ნაწილმა მიიღო შემდეგი ფორმა:კეთილი იყოს თქვენი მობრძანება SD კომპანიის გვერდზე!
გადავხედოთ მიღებულ შედეგს.
შეინახეთ ფაილი შეარჩიეთ Notepad მენიუს ბრძანება File - შენახვა.
შენახვის ოპერაცია ყოველთვის უნდა გაკეთდეს დოკუმენტის ნახვამდე, რადგან ის ხსნის ფაილს ნახვისთვის, დისკიდან კომპიუტერის RAM– ში იტვირთება. თუ არ შეინახავთ ფაილს HTML კოდის რედაქტირების შემდეგ, ბრაუზერში ვერ ნახავთ რაიმე კონფიგურაციას.
აღადგინეთ ბრაუზერის ფანჯარა, დააჭირეთ ღილაკს Taskbar.
დააჭირეთ F5 ღილაკს ან განახლების ღილაკს პროგრამის სამუშაო ფანჯრის პანელის პანელზე. Other.html ფაილი გადაიტვირთება და ნახავთ, თუ როგორ გამოიყურება პირველი დონის სათაური ბრაუზერის ფანჯარაში.
იხილეთ, თუ როგორ გამოიყურება დანარჩენი 5 დონის სათაურები, შეცვლილია ნომრები თეგებში: h2, h3 და ა.შ.. ყოველი კონფიგურაციის შემდეგ, არ უნდა დაგვავიწყდეს ფაილის შენახვა და სურათის განახლება ბრაუზერის ფანჯარაში.
როდესაც ექსპერიმენტებს დაასრულებთ, კვლავ აღადგინეთ თეგები other.html ფაილში
.HTML– ის 6 დონის სათაურების გამოყენებით, რომელსაც HTML თქვენს განკარგულებაშია, შეგიძლიათ გააკეთოთ ინტუიციური სტრუქტურით მარტივი წასაკითხი დოკუმენტი. გახსოვდეთ, რომ თქვენი დოკუმენტი ყოველთვის მნიშვნელოვნად უკეთ წაიკითხავს, \u200b\u200bთუ მას აქვს ზუსტი დაყოფა განყოფილებებად და ქვეპუნქტებად.
სათაურების გასწორება
სტანდარტულად, სათაური გასწორებულია გვერდის მარცხნივ. მაგრამ ის ასევე შეიძლება იყოს სწორხაზოვანი ან ორიენტირებული. თეგში გასწორების მიზნით
გამოიყენება ატრიბუტი align \u003d "უფლება", ხოლო ცენტრისთვის - align \u003d "ცენტრი". დასაშვებია მარცხენა მხარის გასწორების აშკარა მითითებაც - align \u003d "მარცხენა".
დამატება თეგში
align \u003d "center" ატრიბუტი სათაურის ცენტრში. ამ ელემენტმა უნდა მიიღოს შემდეგი ფორმა:
კეთილი იყოს თქვენი მობრძანება SD კომპანიის გვერდზე!
მომავალში, ჩვენ არ შეგახსენებთ ფაილის საწყისი კოდის შენახვისა და ბრაუზერში სურათის განახლების აუცილებლობას.
როგორ განვახორციელოთ ტექსტი თამამად HTML- ში
ახლა გადავიდეთ დანარჩენ ტექსტზე. მოდით, გავზარდოთ მისი ზომა და ტექსტი გავხადოთ დახრილი. დაწყვილებული თეგები გამოიყენება თამამი სტილის დასაყენებლად .
ჩადეთ გახსნა სხვა. Html ფაილში და დახურვა თეგები ისე, რომ მათ შეზღუდეთ ტექსტი. აქ გაიგებთ ... ამ ელემენტს უნდა ჰქონდეს შემდეგი ფორმა:
როგორ განვახორციელოთ ტექსტი დახრილი HTML- ით
დახრილი სტილი დაყენებულია თეგების გამოყენებით .
ჩასვით HTML ტეგი საწყის კოდში და ისე, რომ რედაქტირებულმა ელემენტმა მიიღო შემდეგი ფორმა:
აქ გაეცნობით ჩვენს საქმიანობას, ჩვენი კომპანიის პროგრამული პროდუქტებს და ჩვენს მიერ წარმოებულ აღჭურვილობას
მარკირების ელემენტები შეიძლება ჩადგეს, როგორც ამ სტრუქტურაში, სადაც ელემენტია … ელემენტებშია ჩასმული …... თანამედროვე ბრაუზერებს შეუძლიათ ჩასმული თეგების სწორად გატარება. ამიტომ, თქვენ უნდა დარწმუნდეთ, რომ დანართის წესრიგი არ არის დარღვეული. ბრაუზერის შესრულება რთული იქნება, თუ ბუდე გაწყდება. მაგალითად, ასეთი ჩანაწერი არასწორი იქნება: …... Nesting HTML კოდირების ზოგადი კულტურის ძალიან მნიშვნელოვანი ნაწილია.
როგორ განვახორციელოთ ტექსტი HTML- ში ხაზგასმული
წყვილი ნიშნით შეგიძლიათ დააყენოთ ტექსტის ხაზგასმული სტილი, შეზღუდული ამ ტეგებით და წყვილი თეგების გამოყენებით - ტექსტის შრიფტის ჩვენება.
უნდა აღინიშნოს, რომ ცოტა ხნის წინ tag გამარტივებულია და ხაზს უსვამს სტილებს. ექვივალენტი ... დიახ, ახალი ანალოგი უფრო რთულად გამოიყურება, მაგრამ სამწუხაროდ ეს უფრო მართალია. ამ სასარგებლოდ მთავარია, რომ მოცულობითი ვერსია ჯვარედინი ბრაუზერია, სხვა სიტყვებით რომ ვთქვათ, ის შესაფერისია ყველა ბრაუზერისთვის, როდესაც ორივე ყველა ბრაუზერი მხარს არ უჭერს მას.
როგორ იზრდება ტექსტი HTML- ში
მოდით გავზარდოთ ტექსტის შრიფტის ზომა. ეს შეიძლება გაკეთდეს სხვადასხვა გზით.
წარწერები გაზარდეთ მათ შორის თანდართული ტექსტის შრიფტის ზომა.
შესაბამისად, დაამატეთ თეგები ზემოთ მოცემული კოდის ნაწილის დასაწყისსა და ბოლოს და ისე, რომ ელემენტმა მიიღო შემდეგი ფორმა:
აქ გაეცნობით ჩვენს საქმიანობას, ჩვენი კომპანიის პროგრამული პროდუქტებს და ჩვენს მიერ წარმოებულ აღჭურვილობას
ტეგების გამოყენება თქვენ შეძლებთ შეამციროთ ტექსტის შრიფტის ზომა თავდაპირველის შესატყვისად.
შრიფტის ზომის მითითების კიდევ ერთი მეთოდი არის თეგებით ზომის ატრიბუტით. ამ ატრიბუტის მნიშვნელობები არის მთელი რიცხვები 1-დან 7-მდე. ამ შემთხვევაში, მნიშვნელობა 1 შეესაბამება შრიფტის ყველაზე მცირე ზომას, ხოლო მნიშვნელობა 7 - უდიდესს.
იყენებენ თეგების ნაცვლად ტეგების ნახვა , ნახეთ, როგორ იცვლება ტექსტის შრიფტის ზომა ზომის ატრიბუტის სხვადასხვა მნიშვნელობებით - 1-დან 7-მდე.
ასევე შეგიძლიათ გამოიყენოთ რიცხვები 1-დან 7-მდე + (პლუს) ან - (მინუს) ნიშნით, როგორც ზომის ატრიბუტის მნიშვნელობა. ამ შემთხვევაში, შრიფტის ზომა შესაბამისად იზრდება ან მინიატურირდება, საწყის, მაგალითად, ტეგებთან შედარებით. შრიფტის ზომის გაზრდა, ახლანდელთან შედარებით, ერთი დონით. Შეამოწმე.
ზომის ატრიბუტის მნიშვნელობა დააყენეთ 5 მოცემული ტექსტის ბლოკისთვის: ... ამ კოდის HTML კოდი ასეთი უნდა იყოს:
აქ გაეცნობით ჩვენს საქმიანობას, ჩვენი კომპანიის პროგრამული პროდუქტებს და ჩვენს მიერ წარმოებულ აღჭურვილობას.
ტეგებში ფერი ატრიბუტი ასევე შეიძლება გამოყენებულ იქნას შრიფტის ფერის აღსადგენად, ტექსტური ნიშნებით გამოყოფილი. ამ ატრიბუტის მნიშვნელობები იგივეა, რაც ადრე განხილული ატრიბუტისთვის, რომელიც აღწერს დოკუმენტის ფონს და ტექსტს.
სტანდარტულად, აქ ნახავთ პუნქტს, რომელზეც მოცემულია ტექსტი ... გასწორებულია მარცხნივ. მოათავსეთ იგი ჰორიზონტალურად თეგების გამოყენებით
... ასევე შეგიძლიათ აბზაცის გასწორება გვერდის მარჯვნივ, თეგების გამოყენებით ან მარცხნივ - თეგების გამოყენებით . ჩასვით თეგები
მათი განსაზღვრული პუნქტით შეზღუდვა. გაითვალისწინეთ, რომ ჩვენ გამოვიყენეთ ტეგები პუნქტის ცენტრში.
განსხვავებით align \u003d "center" ატრიბუტისგან, რომელიც ჩვენ გამოვიყენეთ თეგებში . ყურადღება! 2010 წლის თეგებისთვის ,
, , მოძველებულია და ამიტომ საჭიროებს ანალოგების გამოყენებას სტილისგან. ეს არ ნიშნავს, რომ მათი გამოყენება არ შეგიძლიათ, მაგრამ თუ შეგიძლიათ, შეეცადეთ მოიცილოთ ისინი. =
= = = =
ასევე არსებობს უამრავი მოძველებული თეგების უზარმაზარი რაოდენობა, რომელთა აღწერა ამ სტატიაში შეუძლებელია, ამიტომ უმჯობესია დაუყოვნებლივ გაეცნოთ სპეციალურ ვებ – გვერდებს ამ საკითხთან დაკავშირებით. მაგრამ მთავარი, რაც აქ ცოტა უფრო მაღლა დავდე
განაწილების კოდები
HTML საშუალებას გაძლევთ ორი მიდგომა აირჩიოთ ტექსტის ფრაგმენტების შრიფტისთვის. ერთი მხრივ, შეგიძლიათ პირდაპირ მიუთითოთ, რომ შრიფტი ტექსტის გარკვეულ არეში შეიძლება იყოს თამამი ან დახრილი, სხვა სიტყვებით რომ ვთქვათ, აშკარაა ტექსტის ტიპაჟის მითითება, როგორც ეს გავაკეთეთ ამ ექსპერიმენტში. მეორეს მხრივ, თქვენ შეგიძლიათ მონიშნოთ ნებისმიერი ტექსტი, როგორც ნორმალური, ლოგიკური სტილის მქონე, რაც ბრაუზერს აძლევს ამ სტილის ინტერპრეტაციას. ამრიგად, ლოგიკური სტილი აჩვენებს ტექსტის ნაწილის როლს, მაგალითად, დიდი მნიშვნელობით ჩვეულებრივ ტექსტთან შედარებით, ან ამ ნაჭრის ციტირების ფაქტს. საკუთარ ნამუშევარში თქვენ შეძლებთ გამოიყენოთ შემდეგი ტეგები, რომლებიც განსაზღვრავს ლოგიკურ სტილებს. შეამოწმეთ, თუ როგორ მუშაობენ ისინი სხვადასხვა ბრაუზერში.
- გამოიყენება სიტყვის განსაზღვრისთვის. ნაგულისხმევი ტექსტი ნაჩვენებია დახრილი ასოებით.
- სიტყვების ხაზგასმისა და განმტკიცებისთვის. ტექსტი ნაგულისხმევად ნაჩვენებია დახრილი ასოებით.
- წიგნების, ფილმების, სპექტაკლების სათაურების ხაზგასასმელად და ნაგულისხმევად ნაჩვენებია დახრილი ასოებით.
- პროგრამის კოდის ფრაგმენტებისათვის. ჩვენებულია ეკრანზე ფიქსირებული სიგანის შრიფტით.- გამოიყენება ტექსტისთვის, რომელსაც მომხმარებელი კლავიდან შეაქვს. ის შეიძლება სხვადასხვა შრიფტით იყოს ნაჩვენები სხვადასხვა ბრაუზერში. მონიშვნის მონიშვნა.
- ემსახურება პროგრამის შეტყობინებების ჩვენებას. ნაჩვენებია ფიქსირებული სიგანის შრიფტით. მონიშვნის მონიშვნა.
- განსაკუთრებით მნიშვნელოვანი ფრაგმენტებისათვის. როგორც წესი, თამამად.
- გამოიყენება იმის აღნიშვნა, რომ ტექსტის ან სიტყვის ნაწილი არის სიმბოლური ცვლადი, სხვა სიტყვებით რომ ვთქვათ, ტექსტი, რომელიც შეიძლება შეიცვალოს სხვადასხვა გამონათქვამებით. ნაგულისხმევად ნაჩვენებია დახრილი ასოებით. მონიშვნის მონიშვნა.
HTML 4.0 სპეციფიკაცია გთავაზობთ ტექსტისა და სხვა ნაწილების სტილის განსაზღვრის უფრო პროგრესულ მეთოდს, სპეციალური ენის გამოყენებით, სახელწოდებით Cascading Style Sheets, CSS. სტილის ფურცლები უდიდესი მიღწევაა WEB დიზაინის სფეროში, რაც აფართოებს გვერდების იერსახის გაუმჯობესების შესაძლებლობას. სტილის ფურცლები აადვილებს ტექსტისა და ფონისთვის გამოყენებული ხაზების ინტერვალის, შევსების, ფერების განსაზღვრას, შრიფტის ზომასა და სტილს და ა.შ.: HTML– ის უმეტეს ნაწილში სტილის შექმნა შესაძლებელია ატრიბუტის სტილის გამოყენებით, რომელიც მოთავსებულია ელემენტის გახსნის ტეგში. . ფორმის ატრიბუტის მნიშვნელობად გამოიყენება ფორმის "თვისება: მნიშვნელობა" წყვილი. მაგალითად, კოდის ნაწილში, რომელიც აღწერს განყოფილების სათაურს,
the style \u003d "color: blue" ატრიბუტი განსაზღვრავს, რომ ფერის თვისება არის ლურჯი, სხვა სიტყვებით რომ ვთქვათ, პირველი დონის სათაურის ტექსტი უნდა იყოს ნაჩვენები ლურჯად.
სტილის გასწორება
მოდით ვნახოთ, როგორ გამოვიყენოთ კასკადური სტილის ფურცლის ენა, ტექსტის სტილის სტილის დასაზუსტებლად, რომელიც სიტყვებით იწყება აქ თქვენ შეისწავლით ...
შრიფტის სისქის დასაზუსტებლად გამოიყენეთ შრიფტის წონის თვისება უფრო მსუბუქი (ვიწრო), სქელი (სქელი), უფრო სქელი (სქელი), მაგალითად, style \u003d "font-weight: bold".
დახრილი სტილის დასადგენად გამოიყენეთ შრიფტის სტილის თვისება დახრილი მნიშვნელობით. ამიტომ, ტექსტის სქელი დახრილი რომ გახდეს, უნდა იპოვოთ სტილის ატრიბუტი ასე: style \u003d "font-weight: bold; font-style: italic". ყურადღება მიაქციეთ: მახასიათებლების განთავსება შესაძლებელია ნებისმიერი თანმიმდევრობით და აუცილებლად უნდა იყოს გაზიარებული წერტილოვანი წერტილი.
თუ თქვენ გჭირდებათ შრიფტის ზომის მითითება, უნდა გამოიყენოთ შრიფტის ზომის თვისება, რომლის მნიშვნელობები შეიძლება მითითებული იყოს ნათესავი ან აბსოლუტური მნიშვნელობებით. ფარდობითი მნიშვნელობები არის პროცენტული მაჩვენებლები და აბსოლუტური მნიშვნელობებით გამოიყენება წერტილები (pt), პიქსელები (px), სანტიმეტრი (cm), მილიმეტრი (mm). Მაგალითად:
style \u003d "font-size: 200%"
style \u003d "font-size: 16pt"
style \u003d "font-size: 100px"
აბსოლუტური, და არა ფარდობითი ზომების მითითებით, თქვენ ართმევთ თქვენს გვერდებს, რომლებიც ათვალიერებენ თქვენს გვერდებს შრიფტების ზომის გაზრდის ან შემცირების შესაძლებლობას ბრაუზერის მენიუს ბრძანებით მათი ხედვისა და მონიტორის რეზოლუციის შესაბამისად. შრიფტები გამოჩნდება მხოლოდ თქვენს მიერ მითითებული ზომით. ამიტომ, უმჯობესია შრიფტის ზომა მიუთითოთ პროცენტულად. ამ შემთხვევაში, შრიფტის ზომა იქნება მცირე ან უფრო დიდი პროცენტული მითითებით, ვიდრე ნაგულისხმევი HTML ტეგის გამოყენებით ფორმატირებისას.
ტექსტის ჰორიზონტალური გასწორების მეთოდის დასადგენად გამოიყენეთ ტექსტის გასწორების თვისება მარცხენა (მარცხნივ), მარჯვნივ (მარჯვნივ), ცენტრში (ცენტრში), გამართლებამდე (სიგანე) მნიშვნელობებით. ამრიგად, რომ მიუთითოთ, რომ ტექსტი აქ გაიგებთ ... უნდა იყოს ფორმატირებული თამამი დახრილი სტილით, საწყისი ზომის 150% და გასწორებული ცენტრში, მისი სტილი უნდა იპოვოთ შემდეგნაირად:
style \u003d "font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
ჩვენ გამოვიყენებთ ამ ატრიბუტს თეგებში<р>რომელიც საშუალებას გაძლევთ ტექსტი ცალკე აბზაცად წარმოადგინოთ.
ტექსტის შემცველი HTML ელემენტის რედაქტირება აქ გაიგებთ ... თეგების ამოღებით
, , , და თეგების ჩასმა<р> და სტილის ატრიბუტით ისე, რომ ამ ელემენტს აქვს შემდეგი ფორმა: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">აქ გაეცნობით ჩვენს საქმიანობას, ჩვენი კომპანიის პროგრამული პროდუქტებს და ჩვენს მიერ წარმოებულ აღჭურვილობას
ხედავთ, HTML საშუალებას გაძლევთ გამოიყენოთ მრავალფეროვანი სტილის დიზაინის ტექნიკა. ამასთან, CSS კასკადური სტილის ფურცლის ენის გამოყენება უფრო სასურველია.
სხვა გასწორება და სტილის პარამეტრები
ჩვენ ვნახეთ მხოლოდ ერთი გამოყენების შემთხვევა სტილის ფურცლის ენისთვის, სადაც სტილის განმარტება მოთავსებულია კონკრეტულად თქვენს მიერ აღწერილი ელემენტის ტეგში.
ეს ხდება სტილის ატრიბუტის გამოყენებით, რომელიც გამოიყენება უმეტეს სტანდარტულ HTML ტეგებთან. მაგრამ CSS– ს სხვა გამოყენებაც არსებობს.
სტანდარტულ HTML- ში, სტილის ფურცლების გარეშე, ნებისმიერი ელემენტისთვის გარკვეული პარამეტრების მინიჭების მიზნით, როგორიცაა ფერი, ზომა, პოზიცია გვერდზე და მსგავსი, თქვენ უნდა ასახოთ ეს მახასიათებლები თითოეული ელემენტისთვის ყოველ ჯერზე, თუნდაც 10 კი ისეთი ნაწილების, რომლებიც არ განსხვავდება ერთმანეთისგან. თქვენ უნდა ჩასვათ HTML კოდის ერთი და იგივე ნაწილი 10-ჯერ გვერდზე, გაზრდის ფაილის ზომას და ქსელში გადმოტვირთვის დროს.
სტილის ფურცლები მოქმედებს სხვა, უფრო კომფორტული და ეკონომიური გზით. ელემენტისთვის გარკვეული მახასიათებლების მინიჭების მიზნით, ეს ელემენტი ერთხელ უნდა ჩამოაყალიბოთ და ეს აღწერა სტილად იპოვოთ, ხოლო მომავალში უბრალოდ მიუთითოთ, რომ ელემენტმა, რომლის შექმნაც გსურთ შესაფერისი გზით, უნდა აღენიშნებოდეს თქვენს მიერ აღწერილი სტილის მახასიათებლებს. . კომფორტულია, არა?
უფრო მეტიც, სტილის აღწერა შეგიძლიათ შეინახოთ არა თქვენი WEB გვერდის ტექსტში, არამედ ცალკეულ ფაილში - ეს საშუალებას მოგცემთ გამოიყენოთ სტილის აღწერა ნებისმიერი რაოდენობის WEB გვერდებზე. და სხვა დაკავშირებული უპირატესობაა ნებისმიერი რაოდენობის გვერდების დიზაინის შეცვლის შესაძლებლობა მხოლოდ ცალკეული ფაილის მხოლოდ სტილის აღწერით.
გარდა ამისა, სტილის ფურცლის ენა საშუალებას გაძლევთ იმუშაოთ გვერდის შრიფტებზე კიდევ უფრო მაღალ დონეზე, ვიდრე სტანდარტული HTML.
ამჟამად, CSS ენას აქვს საკმაოდ ბევრი პარამეტრი HTML ნაწილისთვის, რომლის კონტროლიც მას შეუძლია. "უსაფრთხო", სხვა სიტყვებით რომ ვთქვათ, თავსებადია ყველაზე მეტი ბრაუზერის CSS ელემენტებთან - შრიფტის მახასიათებლები, ნაწილების ფერები და ფონის მახასიათებლები, ტექსტისა და საზღვრების მახასიათებლები - მნიშვნელოვნად შეუწყობთ მუშაობას და თქვენი ვებ გვერდები უფრო მიმზიდველს გახდებით ტექსტის დიზაინი.
გამარჯობა ძვირფასო ბლოგის მკითხველს! ამ სტატიაში ყურადღება გამახვილებულია ტექსტის ფორმატირების თეგები... თამამი ან დახრილი ტექსტი საუკეთესო მაგალითია. ჩვენ ასევე გავითვალისწინებთ ზოგიერთი თეგის გავლენას საიტის შიდა ოპტიმიზაციაზე და მათი წერის წესებს. ამის შესახებ შეგიძლიათ წაიკითხოთ მოცემულ სტატიაში. სხვათა შორის, მსგავსი ტექსტის დიზაინის ელემენტებს ნახავთ მრავალ ტექსტურ რედაქტორში, მაგალითად, Word– ში.
ტეგები იყოფა 2 ტიპად: ბლოკისა და შინაგანი ტეგების. პირველის გამოყენებისას შეგიძლიათ შეცვალოთ ტექსტის ნაწილის შინაარსი (სტრიქონები, ცალკეული ფრაგმენტები ან სიტყვები), ხოლო ეს უკანასკნელი არის. ფორმატირების ტეგებს, რომლებსაც ამ სტატიაში გავეცანით, ძირითადად მცირე ასოებია.
თეგების წერის წესები და რიგითობა
თქვენ უკვე იცით რა არის დაწყების და დასრულების ნიშნები. თუ არა, წაიკითხეთ სტატია ამ სტატიის დასაწყისში. მოკლედ, არსებობს ორი ტიპის თეგები: სინგლი (მაგალითად, ახალი ხაზის შეფუთვა)
) და კონტეინერი (დაწყვილებული). ასე რომ, ტექსტის ფორმატირების ყველა ტეგი არის დაწყვილებული... ეს ნიშნავს, რომ ნებისმიერ ელემენტს აქვს საწყისი და დასასრული ნიშანი და შერჩევა უნდა განთავსდეს მათ შორის. მაგალითად, ფრაზის სწორი შერჩევა ასე გამოიყურება: არჩეულია ფრაგმენტიროდესაც ბრაუზერი ამ ფრაგმენტს დაამუშავებს, თქვენ ნახავთ შემდეგ ტექსტს: არჩეულია ფრაგმენტი.სხვათა შორის, ყველა ნიშანი არ არის ნაჩვენები RSS არხში ().
მთავარია, როდესაც თეგებს წერთ, მათი დახურვაა. წინააღმდეგ შემთხვევაში, გვერდზე განთავსებული მთელი ტექსტი თამამი იქნება (მაგალითზე თეგით) ) მაგრამ არის შემთხვევები, როდესაც თქვენ უნდა მონიშნოთ გარკვეული ფრაგმენტი ერთდროულად თამამად და დახრილი. მაგრამ არ არსებობს ნიშანი, რომელიც ასრულებს ამ მოქმედებას. ამ სიტუაციიდან მხოლოდ ერთი გამოსავალი არსებობს: ერთდროულად გამოიყენეთ ორი ნიშანი. არ აქვს მნიშვნელობა რა თანმიმდევრობით იყენებთ მათ. ამიტომ, ტექსტის მსგავსი თეგებით წერა:
არჩეულია ფრაგმენტი
ან მოსწონს ეს:
არჩეულია ფრაგმენტი
თქვენ მაინც მიიღებთ არჩეულია ფრაგმენტი დახრილი და ამავე დროს თამამი. ამასთან, სასურველია გამოიყენოთ პირველი ვარიანტი, რადგან თავდაპირველად ის ერთადერთი და სწორი იყო. ასევე, არ უნდა დაგვავიწყდეს, რომ თითოეულ ბრაუზერს შეუძლია განსხვავებულად გაუმკლავდეს თეგებს (), რაც დამოკიდებულია პარამეტრებში. ახლა გადავიდეთ თავად ფორმატირების თეგებზე.
სქელი და დახრილი ტექსტი - ტეგები , , და
ყველაზე პოპულარული ტექსტის ფორმატირების წარწერები - მისი ხაზგასმა თამამი და დახრილი... ჩვეულებრივ, ისინი იყენებენ ფრაგმენტის მნიშვნელობას. პირველი შემთხვევა ემსახურება სასარგებლო ინფორმაციის ან საკვანძო სიტყვების შემცველი ფრაგმენტის გამოყოფას. დახრილი ტექსტი გამოიყენება იგივე მიზნებისთვის, რაც თამამი ტექსტია, მაგრამ ინფორმაცია ნაკლებად მნიშვნელოვანია, რადგან დახრილი ტექსტი ნაკლებად ჩანს სხეულის ტექსტის ფონზე.ჯერ განვიხილოთ თამამი ტექსტი... ამ მოქმედებისთვის ორი ტეგი გამოიყენება - და ... გარეგნობაში განსხვავება არ არის. მიუხედავად იმისა, რომ იმის გათვალისწინებით, რომ ნებისმიერ ბრაუზერს შეუძლია თითოეული ელემენტის განსხვავებულად ინტერპრეტაცია, თქვენ შეძლებთ რაიმე განსხვავების დანახვას. ასე გამოიყურება ტექსტში თეგებში და ბრაუზერის მიერ უკვე დამუშავებული ფორმით:
ტექსტი ძლიერი თეგებით
ტექსტი b ტეგებში
აი, როგორ გამოიყურება ეს ორი ხაზი გვერდის კოდში:
ტექსტი ძლიერი თეგებით ტექსტი b ტეგებში
იგივე სიტუაცია შეგვიძლია დავაკვირდეთ დახრილი ტეგები და ... შეეცადეთ იპოვოთ განსხვავება ორ მაგალითს შორის:
ტექსტი em tags
ტექსტი თეგებში I
აქ არის კოდის კოდი:
ტექსტი em tags ტექსტი თეგებში I
ასე რომ, განხილული თამამი და დახრილი ტეგები სინამდვილეში არ განსხვავდება, მაგრამ რატომ ვთვლით, მაგალითად, თეგებს თუ არსებობს ? ყოველივე ამის შემდეგ, ეს უკანასკნელი შეიცავს მხოლოდ ერთ სიმბოლოს (არ ჩათვლით ფრჩხილებში) და, შესაბამისად, უფრო ადვილია წერა. საქმე იმაშია, რომ თეგები და აფექტი. თუ ამ საკვანძო სიტყვებს გარს აკრავთ, ეს სასარგებლო გავლენას მოახდენს ვებ – გვერდის პოპულარიზაციაზე. მთავარია, არ გადააჭაროთ მას - მაქსიმალური ტექსტი უნდა იყოს 5% თამამი ტექსტი თეგში , და იგივე ოდენობა დახრილი აქვს თეგში .
თუ გსურთ ტექსტში მონიშნოთ გარკვეული მომენტი, გამოიყენეთ ნიშანი ან ... ზოგადად, მე ვფიქრობ, რომ საძიებო სისტემები ამ თეგების ტექსტს უფრო მნიშვნელოვნად თვლიან, მაგრამ ასე შემდეგ შიდა ოპტიმიზაციამათ ჯერ კიდევ ნაკლები გავლენა აქვთ, ვიდრე და .
Slash ტექსტის ტეგები - ,
ახლა მოდით გადავხედოთ რამდენიმე ტეგს, რომლებიც ტექსტში სტილის ნიშანს იყენებს. თქვენ იცით ყველაზე ცნობილი ტექსტური რედაქტორი ტეგი ან ხაზი გავუსვა. ეს ნიშანი გავლენას არ ახდენს რეიტინგზე (რამდენადაც მე ვიცი), მაგრამ ის ხელს შეუწყობს ნებისმიერი ტექსტის ხაზგასმას და მასზე ყურადღების გამახვილებას. მე მოვიყვანე ამ თეგის გამოყენების მაგალითი ზემოთ.დაკიდევ ორი \u200b\u200bნიშანი, რომლებიც მიზნის მსგავსია -
და... ორივე ემსახურება ხაზოვანი ტექსტის ფუნქციას. შეგიძლიათ გამოიყენოთ ეს ნიშანი ნებისმიერ სიტუაციაში: თუ განაახლებთ დოკუმენტს (უფრო სწორად მის ნაწილს), შეგიძლიათ გადაკვეთოთ ძველი და დაამატოთ ახალი; თუ აპირებთ დაწეროთ ისეთი რამ, რაც გადაუხვევს მასალის თემას; რაღაც არ შეესაბამება მორალურ და ეთიკურ სტანდარტებს.ამ ორ ნიშანს შორის განსხვავება მხოლოდ მათშია წერა, რის შედეგადაც სასურველია პირველი გამოიყენოთ, ვინაიდან ჯერ ერთი, უფრო მოსახერხებელია წერა და მეორეც, თქვენს გვერდზე იქნება ნაკლები HTML- კოდი და საძიებო სისტემებს უყვართ იგი.
მონიშნე და ატრიბუტები - ტექსტის შრიფტის პარამეტრები
ახლა გადავხედოთ ტეგს, რომელიც არ გამოიყენება ატრიბუტების გარეშე. მასთან ერთად შეგიძლიათ დააყენოთ პარამეტრები ტექსტის კონკრეტული ნაწილისთვის. ზოგადად, ახლა სასურველია გამოიყენოთ (კასკადური სტილის ფურცლები), რადგან მათ შეუძლიათ მნიშვნელოვნად შეამცირონ გვერდის მთელი HTML კოდი. ასე რომ, გაითვალისწინეთ თვითონ ნიშანი . მისთვის ყველაფერია სამი ატრიბუტი:
ასე გამოიყურება ტექსტში თეგში თითოეული ატრიბუტის გამოყენებით:
ეს ტექსტი არის 6 პიქსელი
ეს ტექსტი არის წითელი ეს ტექსტი არის Arial შრიფტით ეს ტექსტი არის წითელი და 5 პიქსელიაი რას ნახავთ დაწერილი კოდის დამუშავების შემდეგ:
ბლოკირებული ტექსტის დიზაინის ელემენტები - სათაურები
-
, აბზაცი
დაბოლოს, ჩვენ გადავხედავთ ბლოკის ელემენტებს, რომლებიც გამოიყენება თითქმის ყველა დოკუმენტში. ეს არის სათაურისა და აბზაცის ნიშნები. მოდით განვიხილოთ პირველი. არსებობს 6 ტიპის სათაური და თითოეულს აქვს საკუთარი ნიშანი. თითოეულ სახეობას აქვს მხოლოდ საკუთარი სერიული ნომერი და იწერება თეგების გამოყენებით
,
,...,
... ასე გამოიყურება ყველა სათაური დამუშავებისას:
სიტყვა სიტყვის სათაურის შემდეგ ემთხვევა თეგის ნომერს
ახლა მოდით ვისაუბროთ აბზაცის მონიშვნის ნიშანზე
ამ ტეგის ფუნქციაა ტექსტის გამოყოფა სხვა მსგავსი ტექსტისგან ცარიელი ხაზით. თუ გადახედავთ დოკუმენტის წყაროს კოდს, ნახავთ შემდეგს:
მწვანე ყუთებს აქვს ერთი აბზაცი, წითელ ყუთებს - მეორე. ასე გამოიყურება ეს კოდი ბრაუზერის მიერ დამუშავების შემდეგ (ისარი ცარიელ სტრიქონზე მიუთითებს):
შედეგად, მივიღებთ ერთი აბზაცის მეორესგან საკმაოდ შესამჩნევად გამოყოფას, რაც სასარგებლოა - კითხვა უფრო მოსახერხებელი ხდება.
სტატიის შესახებ დოკუმენტის ფორმატირების თეგები... მათი რაოდენობა ბევრად მეტია, ვიდრე აღწერილი მაქვს ამ მასალაში. უბრალოდ, ზოგიერთის შესახებ საკმაოდ ბევრი უნდა გითხრათ, რის შედეგადაც ცალკეული სტატიები სრული მიმოხილვით დაეთმობა.!
ყველამ იცის, რომ tags , ,
, ეს არის პრეზენტაცია და, შესაბამისად, პარადიგმაზე დაყრდნობით ”სტრუქტურა, პრეზენტაცია, ქცევა” მათი გამოყენება არ არის წახალისებული. ელემენტები ბევრად უფრო ნაცნობი ჩანს , ,... ასე იყო მრავალი წლის განმავლობაში განვითარებული პრაქტიკა. ამასთან, HTML5- ის მოსვლის შემდეგ ამ ელემენტების სემანტიკაში ბევრი რამ შეიცვალა. ახლა ჩვენ გვაქვს 4 ახალი ნიშანი, მნიშვნელობით და არეულობით.წინააღმდეგ
თუ ადრე ყველა სახელმძღვანელო განლაგების შესახებ სავსე იყო ფრაზებით, როგორიცაა „გამოყენება სამაგიეროდ ”, და ეს იყო ნახევრად მართალი, დღეს ასეთ ჩვევას შეუძლია სასტიკი სემანტიკური ხუმრობა. საქმე იმაშია, რომ HTML5 ავტორები იყენებენ ტექსტის მონაკვეთების გამოყოფა, მკითხველის ყურადღების მიპყრობის მიზნით, მაგრამ ტექსტის მნიშვნელობის ან ინტონაციის გაზრდის გარეშე. სპეციფიკაციაში მოცემულია დოკუმენტში საკვანძო სიტყვების მონიშვნის გამოყენების მაგალითებიფრობონიტორი და ბარბინატორი კომპონენტები შემწვარია.
და წამყვანები (სტატიის პირველი პუნქტი ჟურნალისტიკაში)
შინაური ცხოველის კურდღლის მიერ "გაშვილებული" კნუტები
ექვსმა მიტოვებულმა კნუტმა იპოვა მოულოდნელი ახალი დედის ფიგურა - შინაური ცხოველი კურდღელი.
ვეტერინარმა ექთნმა მელანი ჰამბელმა სამი კვირის კნუტები აბერდინის სახლში მიიყვანა.
თავის მხრივ როგორც ადრე, ნიშნავს მისი შინაარსის გაზრდილ მნიშვნელობას.
წინააღმდეგ
ამიერიდან შეიცავს ტექსტს, რომელიც გამოირჩევა ზოგადი გარემოდან, მაგრამ არ აქვს ემოციური დატვირთვა. Ჩემი აზრით, ლოგიკურია მისი გამოყენება იქ, სადაც ტიპოგრაფიული ტრადიცია გვთავაზობს დახრილობას (მაგალითად, სიტყვები უცხო ენაზე, ტერმინები და ა.შ.)ასპერად ასტრა - ლათინურიდან თარგმნილი გამონათქვამი ნიშნავს "ეკლის მეშვეობით ვარსკვლავებამდე".
იგივე ნიშნავს ხაზგასმულ სტრესს, ემოციურ აქცენტს ტექსტის მოცემულ მონაკვეთზე. ეს ის შემთხვევაა, როდესაც მეტყველებაში გამოვყოფთ სიტყვებს ხმით (ინტონაცია, მოცულობა და ა.შ.)
Აღსრულება არ შეიძლება, შემიწყალე.
ყურადღებით წაიკითხეთ ხელშეკრულება!
"ტექსტი მცირე შრიფტით" (ინფორმაცია, რომელიც წარმოადგენს იურიდიულ ფორმალობას, მაგალითად საწარმოს ლიცენზია ან იურიდიული მისამართი და ა.შ.), ჩვენ, როგორც წესი, აღვნიშნეთ ელემენტის კლასი, რომელიც უფრო მცირე შრიფტს ადგენს ვიზუალური მომხმარებლის აგენტებში. . ახლა ჩვენს არსენალში ახალი ძველი გამოჩნდა სემანტიკური ელემენტი - .ჰოლივარი დაახლოებით
მანამდესხვა არაფერი იყო, თუ არა ტექსტური ტექსტი. ახლა
ნივთიც გვაქვს, რაც იწვევს ვიზუალური მომხმარებლის აგენტებში ნაგულისხმევი ტექსტის გადაღებას. ეს ნიშნავს დოკუმენტის ცვლილებებს და ერთი შეხედვით, მათი მიზანი შეიძლება იგივე ჩანდეს. ამასთან, აქ დახვეწილი საკითხია. განვიხილოთ პროდუქტის გვერდის მაგალითი ინტერნეტ მაღაზიაში.
მას შეუძლია აჩვენოს ორი ფასი, რომელთაგან ერთი გადახაზულია. ჩვენ მას ელემენტს ვნიშნავთ... ეს ნიშნავს, რომ ძველმა ფასმა აქტუალობა დაკარგა (მნიშვნელობა არ აქვს როდის იყო, ფაქტი მნიშვნელოვანია). როგორ შევამოწმოთ რა არ არის?ახალი სემანტიკა და ძველი დოქტიპი
თუ რაიმე გაურკვეველი მიზეზის გამო ვერ შეცვლით დოქტიპს ახლით და ფორმალურად აკრიფეთ HTML 4.01, არ დაიდარდოთ. გამოიყენეთ ძველი ახალი ელემენტები ახალი მნიშვნელობით და დროთა განმავლობაში მადლობას გიხდით საკუთარ თავს. ალბათ ვინმე იტყვის, რომ ეს არასწორია, მაგრამ ყოველივე ამის შემდეგ, ეს ელემენტები, გარდაარც კი არის არასწორი. გარდა ამისა, HTML5 შეიქმნა ჩამორჩენილი თავსებადობის გათვალისწინებით და იგივე ეხება ძველი ელემენტების ახალ სემანტიკას. რადიკალურად არაფერი შეცვლილა, მაგრამ დაემატა მხოლოდ სემანტიკური წიწაკის მარცვალი.
