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

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

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

  • ტექსტის გასწორება: ცენტრში- Virіvnyuvannya კანის ხაზი ელემენტის ცენტრში, მაგალითად, აბზაცი.
  • ტექსტის გასწორება: მარცხნივ- ტყავის მწკრივი დაჭერილია ელემენტის მარცხენა მხარეს ახლოს (საკეტის მნიშვნელობა).
  • ტექსტის გასწორება: მარჯვნივ- ტყავის მწკრივი იკეცება მდე მარჯვენა მხარე.
  • ტექსტის გასწორება: გამართლება- ელემენტის მარცხენა და მარჯვენა მხარეს ხედის ნახვა. Ნება მომეცი აგიხსნა. ბგერა ელემენტზე, მაგალითად, აბზაცში, ტექსტის ერთი მხარე ყოველთვის თანაბარია, ხოლო მეორე მხარე „მოწყვეტილი“, ისე, რომ რიგები სამჯერ უნდა იყოს ერთმანეთისგან დაშორებული. და თუ გვაქვს ტექსტის გასწორების მნიშვნელობა: justify, მაშინ სკინების მწკრივი თანაბრად იყოფა სიგანეში. სიტყვების საჭიროების დროს ბრაუზერი ამატებს დამატებით დეტალებს და უპირველეს ყოვლისა, მწკრივის სიტყვა მოპირდაპირე მხარეს არის დაჭერილი, ასე რომ, ბლოკი გამოვა თუნდაც გვერდზე.

კონდახი virіvnyuvannya vmіstu tagіv

ტეგების ადგილზე ნახვა

თემა ცენტრში.

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

შედეგი ბრაუზერში

თემა ცენტრში.

აბზაცის ტექსტი დაჭერილია მარჯვნივ.

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

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

Საშინაო დავალება.

  1. შექმენით სტატიის სათაური, ორი її განყოფილება და ერთი განყოფილება პირველ განყოფილებაში. სტატიის სათაური განთავსდეს გვერდის ცენტრში.
  2. დააყენეთ Arial შრიფტი ყველა მხარისთვის და Times ყველა სათაურისთვის და დაეწერეთ დახრილი შრიფტით.
  3. გააფერადეთ სტატიის სათაურის ტექსტი, ჩადეთ # FF6600, rozdіlіv # 6600FF და დატოვეთ უცვლელი.
  4. ჩაწერეთ კანის სათაურის ქვეშ თითო აბზაცი, ხოლო კანის სათაურის ტექსტს ბრაუზერში ნახვისას მინიმუმ სამი სტრიქონი უნდა ჰქონდეს.
  5. გაასწორეთ მეორე აბზაცი ცენტრში, მესამე მარჯვენა მხარეს და მეოთხე ობომისთვის.

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

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

მეთოდი 1 - პირდაპირი რობოტი HTML-დან

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

გაასწორეთ აბზაცი ცენტრში.

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

  • დასაბუთება - ტექსტის გასწორება გვერდის სიგანეზე;
  • მარჯვენა - მარჯვენა კიდის გასწვრივ;
  • მარცხნივ - მარცხნივ.

ანალოგიით, შეგიძლიათ გაანადგუროთ შინაარსი, რომელიც არის სათაურებში (h1, h2), კონტეინერებში (div).

მეთოდი 2 და 3 - განსხვავებული სტილი

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

ტექსტური ბლოკი.

ასეთი იერით კოდი იწერება პირდაპირ HTML-ში, რათა ცენტრში გამოსახოს ტექსტის შინაარსი.

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

Krok 1. მთავარ კოდში ჩაწერეთ

ტექსტური მასალა.

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

როვნო (ტექსტის გასწორება: ცენტრში;)

მე აღვნიშნავ, რომ სიტყვა "როვნოს" აღარ ჰქვია კლასი, რომელსაც სხვანაირად შეიძლება ეწოდოს. Tse რჩება პროგრამისტის შეხედულებისამებრ.

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

მთლიანი საკვები:

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

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

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

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

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

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

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

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

რა სამუშაოა, თუ მეტი ცოდნა გჭირდება და გინდა, ალბათ, ივარჯიშო შენს კარადაში? უმჯობესია იცოდეთ სპეციალური კურსები. რუსულ ინტერნეტს არ აქვს ამდენი კარგი, ისინი იწყებენ Front-end საცალო ვაჭრობას. მე მივიღე პატივი განათლების პროგრამით, როგორც ნეტოლოგიის კურსზე "". ასე რომ, პროგრამა ცუდია და Skillbox-ს აქვს კურსი "".

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

თეორია და პრაქტიკა - HTML გვერდის ნაწილები და სათაურები

დღეს ვისაუბრებთ აბზაცებსა და სათაურებზე. დავიწყოთ მარტივი წერტილიდან - აბზაცებიდან და დე stinks-დან, რომ გავიჭედეთ.

აბზაცები მხარეს

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

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

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

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

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

HTML სათაურები გვერდზე

HTML დოკუმენტებში არის სემანტიკა. მე არ ვსაუბრობ HTML5 ტექნოლოგიაზე და ზოგიერთ ახალ ტეგზე. აქ მხოლოდ თავად საფუძვლების გათვალისწინება გვჭირდება, რათა თქვენ შეძლოთ HTML-ის საფუძვლების სწავლა. სემანტიკა ნიშნავს იმას, რაც არ საჭიროებს სათაურებს, აბზაცებს, ცხრილებს და ასე შემდეგ, ერთი და იგივე ტეგის დასახმარებლად შექმნას. ცე შეგიძლია რობიტი, ალე HTML ტექნოლოგია raznomanіtnіsha და სხვადასხვა სიტუაციების გადაცემის სხვადასხვა ტეგები. და თქვენ არ გჭირდებათ ძირითადი ტეგების დაუფლება, ასე რომ თქვენ შეგიძლიათ მარტივად იმუშაოთ HTML კოდით.

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

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

ამ ტეგებიდან მოქმედებები უფრო ხშირად აღინიშნება. ეს ტეგები ჰგავს h1, h2 ან h3. თუ უკვე იცით CSS-ის შესახებ, მაშინ გესმით, რომ h3 გვერდითი სათაურის HTML სათაური შეიძლება იყოს სტილიზებული ისე, რომ ღვინო მსგავსი იყოს h1 ან h2. Ale მნიშვნელობა, yakі stink რომ აცვიათ, სურვილი b for SEO ოპტიმიზაცია, კარდინალურად vіdrіznyayutsya. როგორც წესი, qi ციფრები, ტეგების შუაში, უნდა იქნას გაგებული, როგორც სხვა HTML სათაურის მნიშვნელობის საზომი. ამიტომ აუცილებელია ამ ელემენტების სერიოზულად შეურაცხყოფა და poke სისტემებიგახდით თქვენი სტატისტიკის აღსანიშნავად.

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

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

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

ვიდეო გაკვეთილი - HTML გვერდითი ზოლის სათაური? (პრაქტიკა)

პირველი ვიდეო რობოტების კონდახზე ამ ტეგებით:

Საშინაო დავალება

D/W:როგორც წესი, დაწერეთ მცირე ტექსტი, რომელიც შედგება 5-7 აბზაცისა და 2-3 განსხვავებული სათაურისგან.

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

ავტორიტეტული ტექსტის გასწორება

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

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

მაგალითად, ჩვენ გვაქვს მეტი ტექსტი სათაურიდან:

სათაური

ჩვენი სათაურის (h1) ცენტრში გასასწორებლად, თქვენ უნდა დაწეროთ ასე:

H1(
ტექსტის გასწორება: ცენტრში
}

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

ტექსტის გასწორება არ მოქმედებს როგორც float. თუ ტექსტის გასწორება ჩამოკიდებულია ბლოკის ელემენტზე ტექსტით, მაშინ ბლოკი არ მიჰყვება საკუთარ ქცევას. თავად ტექსტი დაჭერილი იქნება ახალში და არა თავად ბლოკში. პატივისცემა, tse v_drіznyaєtsya vіd vіdstvosti float, yak vіdplavlyає მარჯვნივ ან მარცხნივ მთელი ელემენტი მთლიანად.

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

ატრიბუტები HTML-ში

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

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

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

"align" ატრიბუტით. მოდი დავწეროთ:

მარცხენა კიდეზე აბზაცის გასწორების მაგალითი

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

აბზაცის ტეგისთვის ასევე შეიძლება დაყენდეს შემდეგი ატრიბუტები:

  • align = "ცენტრი" - ჩვენება ეკრანის ცენტრში;
  • align = "right" - მარჯვენა გასწორება;
  • align = "გამართლება" - დაასაბუთეთ ტექსტი, რათა მოერგოს ეკრანის სიგანეს.

ახლა გაამარტივეთ საქმე - მოდით გავაკეთოთ HTML მხარე vikoristannya dekіlkoh rіznih ატრიბუტებით. ასეთი მხარის მაგალითი იქნება შემდეგი კოდი:

HTML-ში ატრიბუტების მქონე მხარის მაგალითი

ატრიბუტები HTML-ში

ფერის ატრიბუტი "bgcolor" საშუალებას გვაძლევს დავაყენოთ ფერი გვერდითი ფონისთვის. ატრიბუტები „ცენტრი“ და „გამართლება“ ამართლებს ტექსტს თავის შუაში, ნათლად, ცენტრირებული და გამართლებული.

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

ინდექსით. სულ ექვსი ასეთი ინდექსია - 1-დან 6-მდე, სუნი მიუთითებს სათაურის ზომაზე (

ყველაზე დიდი სათაურით,

- სულ მცირე). მაგალითად, შევქმნათ ვებ გვერდი, რომელსაც შეიძლება ჰქონდეს რამდენიმე სათაური. matime-ის qієї მხარის კოდი გამოიყურებოდა:

გვერდითი ზოლის მაგალითი HTML-ში ატრიბუტებითა და სათაურებით

ატრიბუტები HTML-ში

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

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

გვერდის გვერდზე სათაურის შესაქმნელად, ემატება სპეციალური ტეგი ინდექსით. სულ ექვსი ასეთი ინდექსია - 1-დან 6-მდე, სუნი მიუთითებს სათაურის ზომაზე ...

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

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