როგორ დავწეროთ ვებ – გვერდი

როგორ დავწეროთ ვებ – გვერდიგსურთ გაეცნოთ როგორ შექმნათ ვებგვერდი HTML და CSS?


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

მაგრამ პირველი, რა არის HTML და CSS?

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

  • HTML (ჰიპერტექსტის მარკირების ენა) განსაზღვრავს ვებ – გვერდის სტრუქტურას და შინაარსს – სად ყველაფერი მიდის, როგორ ისინი ასახულია და რა არის გვერდზე
  • CSS (კასკადური სტილის ფურცლები) განსაზღვრავს სტილი / პრეზენტაცია ვებ – გვერდი და მასში შემავალი ელემენტები

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

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

როგორ შევქმნათ ვებ – გვერდი HTML და CSS (შინაარსის ცხრილი):

  1. გაეცანით HTML– ს საფუძვლებს
  2. მესმის HTML დოკუმენტის სტრუქტურა
  3. გაეცანით CSS- ს ამომრჩევლებს
  4. ჩადეთ CSS სტილის ფურცელი
  5. მიიღეთ Bootstrap
  6. შეარჩიეთ დიზაინი
  7. თქვენი ვებსაიტის პერსონალიზაცია HTML და CSS- ით
  8. დაამატეთ შინაარსი და სურათები
  9. სრულყოფილი ფერის ფერები და შრიფტები
  10. შექმენით დამატებითი გვერდები

ვებსაიტის შექმნის მთლიანი დრო: 4-5 საათი
Უნარის დონე: შუალედური

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

Contents

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

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

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

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

სრული გამჟღავნება: ჩვენ ვიღებთ საკომისიოს, თუ თქვენ დასრულდებით Bluehost– ის შეძენით ჩვენი სახელმძღვანელო მითითებების საშუალებით. ეს გვეხმარება, რომ შევინარჩუნოთ WebsiteSetup და მიმდინარე და თანამედროვე ინფორმაცია. Მადლობა მხარდაჭერისთვის.

იმისათვის, რომ ეს არ გამოირჩეოდეს თქვენი ტკივილის გარეშე, გირჩევთ დარეგისტრირდეთ მსგავს კომპანიასთან Bluehost.

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

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

P.S. თუ გსურთ მხოლოდ ექსპერიმენტი გააკეთოთ HTML ვებსაიტზე თქვენს კომპიუტერზე, და არ აპირებთ გამოქვეყნებას, გამოიყენეთ ადგილობრივი ვებ სერვერის პროგრამა. მას, რომელსაც გირჩევთ და ისარგებლეთ, ჰქვია XAMPP. მას აქვს ვერსიები როგორც Mac- სა და PC- სთვის, ასევე მისი მარტივი გამოყენება. აქ არის გიდი თუ როგორ უნდა დააყენოთ იგი თქვენს კომპიუტერში.

1. ისწავლეთ HTML– ის საფუძვლები

HTML სტრუქტურის მთავარი ელემენტია HTML ჭდე.

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

რაღაც

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

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

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

    ტექსტის აბზაცაა


  • ...

    გვერდზე არის მთავარი სათაური

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

  • პუნქტი 1
  • პუნქტი 2
  • პუნქტი 3

… ამის გაკეთება შეგიძლიათ შემდეგი HTML კოდით:

  • პუნქტი 1
  • პუნქტი 2
  • პუნქტი 3

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

ეს არის ჩვენი გვერდის ბმული

… ამის გაკეთება შეგიძლიათ ამ კოდექსით:

ეს არის ბმული ჩემს გვერდზე

წაიკითხეთ ეს მისაღებად HTML თეგების სრული სია. ეს სასარგებლო გახდება, რადგან თქვენ შექმნით ვებგვერდს HTML და CSS.

2. გესმოდეთ HTML დოკუმენტის სტრუქტურა

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

მაგრამ Lego აგურის ნაცვლად, თქვენ მიიღებთ HTML ტეგებს…

აქ არის HTML დოკუმენტის უმარტივესი სტრუქტურა:





Გამარჯობა მსოფლიო!


Გამარჯობა მსოფლიო!

ჩემი პირველი ვებ გვერდი.

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

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

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

ვებ – ბრაუზერში სათაური HTML და CSS საიტის შექმნისას

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

  • Გამარჯობა მსოფლიო!

    – მთავარი სათაური გვერდზე

  • ჩემი პირველი ვებ გვერდი.

    – ტექსტის მარტივი აბზაცი

  • – მთელი HTML დოკუმენტის დახურული ჩანართი

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

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

sublime სინტაქსი შესანიშნავია HTML და CSS ვებსაიტის შექმნისას

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

ეს გვერდი მახინჯია

კარგი, ასე რომ, გვერდი არის მახინჯი, როგორ უნდა გავაკეთოთ ეს ასე არ არის?

3. გაეცანით CSS- ს ამომრჩევლებს

ისევე, როგორც HTML- ს აქვს თავისი ტეგები, CSS აქვს ამომრჩევლები.

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

პ {
შრიფტის ზომა: 18px;
}

ამ სელექტორი მიუთითებს, რომ ყველა HTML

დოკუმენტის შიგნით წარწერას ექნება შრიფტის ზომა 18px.

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

მაგალითად, CSS– ში კლასის სელექციონერი ასე გამოიყურება:

.ნორმალური ტექსტი {
შრიფტის ზომა: 18px;
}

ყურადღება მიაქციეთ წერტილს (.) კლასის სახელამდე (ნორმალური ტექსტი). განსაზღვრული “ნორმალური ტექსტის” კლასით, ახლა ჩვენ შეგვიძლია მივუთითოთ ეს კლასი იმ კონკრეტულ HTML ტეგებზე, რომლებსაც გვინდა 18px ზომის გაკეთება..

Მაგალითად:

ეს ტექსტი იქნება 18px.

მოდით კიდევ ერთი წუთი აგიხსნათ CSS კოდის ამ ნაწილის ყველა ელემენტი ზემოთ:

  • .ნორმალური ტექსტი – კლასის განსაზღვრება; ყველაფერი კლასის სახელწოდების შემდეგ და გახსნისა და დახურვის ფრჩხილებს შორის } განსაზღვრავს რას გამოიყურება ამ კლასში მინიჭებული ელემენტები
  • შრიფტის ზომა – მაგალითად CSS საკუთრება
  • 18px – საკუთრებისთვის მინიჭებული ღირებულება

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

4. მოათავსეთ CSS სტილის ფურცელი

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

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

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

ეს ჟღერს რუტინული შრომა და ეს არის.

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

აქ შედის თამაში Bootstrap.

5. ჩატვირთვა / ინსტალაცია Bootstrap

Bootstrap არის ღია კოდის ინსტრუმენტალური პროგრამა, ვებსაიტის შესაქმნელად HTML და CSS.

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

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

თქვენ შეგიძლიათ ორი გზა გაიაროთ:

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

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

ჩვენ ვაპირებთ წასვლას Option (ბ) ამ სახელმძღვანელოსთვის. ჩვენ ამას ვაკეთებთ რამდენიმე მიზეზის გამო, მათი მთავარი:

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

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

6. შეარჩიეთ დიზაინი

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

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

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

საბოლოო საწყისი გვერდი HTML და CSS ვებსაიტის შექმნის შემდეგ

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

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

ახლა გახსენით ეს ადგილი თქვენი ბრაუზერის საშუალებით. თქვენ ნახავთ შაბლონის საფონდო ვერსიას:

დაწყება bootstrap თარგი

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

7. თქვენი ვებსაიტის პერსონალიზაცია HTML და CSS- ით

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

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

როდესაც გახსნით index.html თქვენი Bootstrap საიტის ფაილი Sublime Text- ში, თქვენ იხილავთ თავში ასეთ სექციას (ჩვენ ამ კოდის ყველა არასასურველი რამ ამოიღეთ *]






კრეატივი - დაიწყეთ Bootstrap- ის თემა





* ზემოაღნიშნულის გარდა, ასევე იყო კოდი, რომ ჩატვირთოთ Google Fonts, Font Awesome ხატები და Lightbox მოდული გვერდზე ნაჩვენები სურათებისთვის.

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

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

მოდით მოდიფიცირება ბოლო დეკლარაციაში – ხაზის დატვირთვის CSS – უფრო ადვილია, რომ შემდგომში ვიმუშაოთ.

შეცვალეთ ეს ხაზი:


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

ახლა გადაახვიეთ ბოლოში index.html ფაილი. თქვენ იხილავთ შემდეგ სტრიქონებს დახურვამდე სხეული ტეგა:

        

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

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

8. დაამატეთ შინაარსი და სურათები

პირველი რაც თქვენ გსურთ, არის შეცვალოს გვერდის სათაური.

1. სათაურის შეცვლა

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

ჩემი HTML საიტი

2. გმირთა განყოფილების მორგება

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

გმირის განყოფილება

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

...


...

შეიტყვეთ მეტი

კოდირების მთელი ბლოკი აკონტროლებს რა არის გმირთა განყოფილებაში.

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


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

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

...

კლასების დანიშვნას

tag აქ არის ტექსტი-ანბანის დიდი ტექსტი-თეთრი შრიფტი-წონა-თამამი.

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

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

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

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

მაგალითად, ერთ – ერთმა კლასმა დაასახელა ზოგიერთ აბზაცში ჩვენს index.html ფაილი არის შრიფტის წონა-მსუბუქი. როდესაც გადახტებით კრეატიული.css ფაილი და ctrl + f ეძებთ ამ კლასის სახელს, დაინახავთ, რომ ის უბრალოდ ადგენს შრიფტის წონა პარამეტრი ასე:

.შრიფტის წონა მსუბუქი
შრიფტის წონა: 300;
}

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

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

Შენი რჩეული ...

მსგავსი რამ შემდეგში:

აღფრთოვანებული ვარ ჩემი HTML ვებსაიტზე!

თქვენ შეგიძლიათ იგივე გააკეთოთ გვერდზე ყველა აბზაცზე და სხვა ჩანართებზე.

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

დაწყება Bootstrap can ...

მე -2 პუნქტი

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

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

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

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

მოდით გავხსნათ კრეატიული.css კვლავ შეიტანეთ ფაილი და მოძებნეთ “მასტერჰედის” კლასი:

header.masthead
padding-top: 10rem;
padding-bottom: კალცი (10rem - 72px);
ფონის: ხაზოვანი-გრადიენტი (ბოლოში, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
ფონის-პოზიცია: ცენტრი;
ფონი-გამეორება: არა განმეორება;
ფონის დანართი: გადახვევა;
ფონის ზომა: ყდა;
}

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

ამ ფონის სურათის შესაცვლელად, აიღეთ თქვენი საკუთარი ნებისმიერი სურათი, დააკოპირეთ იგი img ქვედანაყოფი და შემდეგ დააკოპირეთ და ჩასვით მისი სახელი ორიგინალის ადგილზე bg-masthead.jpg ფაილი. მოკლედ, შეცვალეთ ეს: url ("../ img / bg-masthead.jpg") ამისათვის: url ("../ img / YOURFILE.jpg").

3. შეცვალეთ სხვა ბლოკები გვერდზე

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

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

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

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

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

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

9. წვრილი-მჟავე ფერები და შრიფტები

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

წითელი ტექსტი

HTML- ში ფერები წარმოდგენილია მათი hex მნიშვნელობებით; “# FF0000” არის წითელი. ეს არის ყველა დანარჩენი ცხრილი სტანდარტული ფერები.

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

p.red
ფერი: # FF0000;
}

შემდეგ გამოიყენეთ HTML კოდი შემდეგი შემდეგი დოკუმენტი მთავარ დოკუმენტში:

წითელი ტექსტი

ეს მეორე მეთოდი ძირითადად იმაში მდგომარეობს, თუ როგორ კეთდება Bootstrap– ში.

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

ამის მაგალითი; თქვით, რომ გსურთ შეცვალოთ სათაურის ფერი, რომელიც ნათქვამია “თქვენს სამსახურში”. ამჟამად, ეს არის შავი, და ეს არის კოდი, რომელიც იყენებს მას:

Თქვენს სამსახურში

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

.ტექსტი-ფორთოხალი {
ფერი: # f4623a! მნიშვნელოვანია;
}

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

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

Თქვენს სამსახურში

ამ ცვლილებებით, სათაური ახლა ფორთოხალი იქნება:

ფორთოხალი h2

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

.SOMECLASS
font-family: "Merriweather", Roboto, sans-serif;
შრიფტის ზომა: 18px;
}
  • დატვირთვის შრიფტები Merriweather, რობოტო, და სისტემურად ნაგულისხმევი sans-serif შრიფტი (წაიკითხეთ ეს, რომ გაიგოთ ვებ – უსაფრთხო შრიფტების შესახებ)
  • შრიფტის ზომა დააყენეთ 18px

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

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

.text-xxl
შრიფტის ზომა: 50px;
}

შემდეგ დაასახელეთ ეს კლასი სათაურს:

Თქვენს სამსახურში

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

10. შექმენით დამატებითი გვერდები

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

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

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

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

1. დაიწყეთ განლაგებით

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

HTML და CSS ვებსაიტის შექმნისას არაფერი გიშლით ხელს ხელახლა სულ ერთია განლაგება გსურთ. ერთადერთი სირთულე არის სინამდვილეში მისი შეთავსება.

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

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

განლაგება ვებგვერდის შექმნისას HTML და CSS

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

სახელმძღვანელოს ამ ნაწილში, ჩვენ ვაპირებთ შევქმნათ ახალი “დაახლოებით” გვერდი.

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

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

მოდით ავაშენოთ ეს განლაგება HTML- ში.

2. შექმენით ახალი გვერდი

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

შექმენით ასლი index.html შეიტანეთ ფაილი და შეცვალეთ იგი დაახლოებით.html.

მხოლოდ იმისათვის, რომ გვერდები განასხვავოთ ამ ადრეულ ეტაპზე, შეცვალეთ ახალი დაახლოებით.html შეიტანეთ ფაილი და შეცვალეთ რა </code> ჭდე. Მაგალითად, <code><title>Ჩემს შესახებ.

ახლა გადავხედოთ ფაილის ხაზს ხაზებით და გადავწყვიტოთ რას დავტოვებთ და რას ამოიღებთ:

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

ეს ჩვენი თანამედროვე კოდი საკმაოდ მარტივია. ძირითადად ეს მხოლოდ ესაა:



























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

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

...


...

ახლა შეცვალეთ პირველი ორი ხაზი ამაზე:

რადგან ეს არ გვჭირდება

თავსართი იქ და

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

ტექსტის პუნქტი.

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

გვერდზე ხელმძღვანელის შესახებ

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

ჭდე. სხვა სიტყვებით, გახადეთ ეს ნიშანი:

ეს უკეთესია:

გვერდის შესახებ 2

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

Lorem ipsum dolor sit to amet, consectetur adipiscing elit...

ფერმენტირებული ფილიალი, felis დროებითი pharetra lobortis, magna qund hendrerit dolor...

ქვემოდან

Lorem ipsum dolor sit to amet, consectetur adipiscing elit...

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

შესახებ ver 1

თუ არ მოგწონთ ტექსტი ორიენტირებული, უბრალოდ ამოიღეთ ტექსტ-ცენტრი კლასიდან ერთი

ტეგები.

შესახებ ver 2

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

და

წარწერები:

Lorem ipsum dolor sit amet...

ფერმენტირებული ფილიალი, felis დროებითი pharetra lobortis, magna qund hendrerit dolor...

ქვემოდან

და აქ არის ეფექტი:

შესახებ ver 3

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

აი, რას ჰგავს HTML გამოსახულების მაგალითს HTML:


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


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


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

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

Lorem ipsum dolor sit amet...

ფერმენტირებული ფილიალი, felis დროებითი pharetra lobortis, magna qund hendrerit dolor...

ქვემოდან

და ეს არის საბოლოო ეფექტი გვერდზე:

შესახებ ver 4

აქ არის ჩვენი შესახებ მთელი თავისი დიდებით:

გვერდის დასრულების შესახებ

3. ბმული ახალ გვერდზე

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

კერძოდ, გადახედეთ ამ ხაზს:

შესახებ

ჩვენ ვაპირებთ შეცვალოთ იგი ამაში:

შესახებ

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

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

შემდგომი კითხვა:

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

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

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

  • HTML5 მოტყუების ფურცელი
  • CSS მოტყუების ფურცელი
  • Javascript მოტყუების ფურცელი
  • HTML სამეურვეო
  • ჩატვირთვის სახელმძღვანელო
  • Bootstrap მოტყუების ფურცელი

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map