ენა ჰიპერტექსტის HTML გვერდების განლაგებისთვის. ფილმების პროგრამირება და ტექნოლოგიები ვებ განვითარებისთვის ვებ გვერდის შექმნა html დახმარების გამოყენებით

უ საგანმანათლებლო პროგრამაინფორმაციული მეცნიერებიდან და ICT-დან თემაზე „საკომუნიკაციო ტექნოლოგიები“ ყოველ 12 წელიწადში ერთხელ ინერგება და შემოთავაზებულია ვებ გვერდის შექმნა vikoristan-ის შაბლონებით. თემაზე „მულტიმედია ტექნოლოგიები“ 8 წელია, და რადგან, ძირითადად, კომპიუტერული მეცნიერება პროპედევტიკურ დონეზე ისწავლება უკვე მე-5, მე-6 და მე-7 კლასებში, მაშინ აუცილებელია მულტიმედიური ტექნოლოგიების სწავლება მთლიანად გადაიტანოს პროპედევტიკის კურსი და შემდეგ შეგიძლიათ გაზარდოთ სწავლის საათი საკომუნიკაციო ტექნოლოგიები, უფრო ზუსტად, მე-8 კლასს შეგიძლიათ დაამატოთ თემა „ვებ საიტების შექმნა ინგლისურ ენაზე“.

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

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

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

მასალას ეფექტურად აითვისებენ, თუ მოსწავლეები მასწავლებელთან ერთად დაასრულებენ პროექტს, მაგალითად, პეტერბურგის ისტორიის თემაზე „სანკტ-პეტერბურგის დრამატული თეატრები“ და შემდეგ რობოტის მსგავსად ქმნიან ძლიერ პატარას. პროექტი, vikory ვებსაიტის შაბლონის მსგავსად, შემოქმედება მასწავლებელთან თანამშრომლობით.

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

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

საფუძვლები:

  • ვებ-გვერდების შექმნის ტექნოლოგიის შესახებ ცოდნის სისტემის ჩამოყალიბება;
  • ისწავლეთ HTML ჰიპერტექსტის განლაგება ვებსაიტების შესაქმნელად;
  • გაეცანით პროექტის აქტივობის ეტაპებს.

განვითარება:

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

ვიხოვნი:

  • vihovati sumlinna zabotaniya მუშაობის წინ;
  • მოიპოვოს პარტნიორობის გრძნობა და განსაკუთრებული პასუხისმგებლობა საიტის შემოქმედებაზე;
  • გამოხატავს მხატვრულ და ესთეტიკურ სიამოვნებას;
  • იპოვნეთ კომპეტენტური და სწორი კორესპონდენტი ინტერნეტისთვის.

Გაკვეთილი 1

1. სიახლეები ვებსაიტებისა და HTML ენის შესახებ

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

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

HTML დოკუმენტი- ეს არის ტექსტური ფაილი გაფართოებით. htmlან htmრა უნდა გააკეთოს არის აკრიფეთ ტეგები.

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

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

3. სიმბოლოების ფორმატირება

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

შრიფტის პარამეტრები

ტექსტი ტეგებს შორის …….. შეგიძლიათ დააყენოთ ზომა, ფერი და შრიფტი. ვისთვისაც ატრიბუტები ვიკიპედალებულია: ზომა =მნიშვნელობები 1-დან 7-მდე ფერი =ფერი (აკვა, შავი, ლურჯი, ფუქსია, ნაცრისფერი, მწვანე, ცაცხვი, შავგვრემანი, საზღვაო, ზეთისხილისფერი, მეწამული, წითელი, ვერცხლისფერი, ჩაისფერი, ყვითელი, თეთრი), კანის ფერი მითითებულია მისი თექვსმეტობითი კოდით, რომელიც მერყეობს 000000-დან FFFFFF-მდე.

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

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

4. პრაქტიკული ქარხანა No1.

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

გაკვეთილი #2

1. ტექსტის აბზაცებად დაფორმება

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

ტექსტის გადამოწმება აბზაცებით:

2. დოკუმენტის მთელი ტექსტისა და ფონის ფერის დაყენება

აღწერილია დოკუმენტის ორიგინალურ ტეგში

ტექსტი= ტექსტის ფერი >.

3. სათაურები სხვადასხვა რეგიონიდან

ტეგები …. ისინი ქმნიან ტექსტს. n მნიშვნელობები იცვლება 1-დან 6-მდე, რის შედეგადაც ტექსტი ნაჩვენებია უდიდესიდან პატარამდე. ტეგები …. შეუძლია დედის ატრიბუტები ALIGN = CENTRE, LEFT, RIGHT.

4. მარტივი სიები

5.პრაქტიკული ქარხანა No2

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

გაკვეთილი #3

1.ჩასმა გრაფიკული სურათები

ყველა ბრაუზერი მხარს უჭერს ფორმატებს .გიფ, .jpg.ეს ფორმატები რასტრულია. GIF- წახალისებულია სიცხადე და ანიმაცია, კარგად შეეფერება მცირე სურათებს. JPG– მრავალფერადი სურათებისთვის, რომლებიც უკეთესად შეეფერება დასკანერებულ სურათებს და ფოტოებს, ანიმაცია არ არის მხარდაჭერილი.

ერთჯერადი ტეგი აყენებს გრაფიკულ სურათებს ტექსტურ ნაკადში ნებისმიერ ადგილას:

>

არაენოვანი თეგის ატრიბუტები :

თუ პატარები ცენტრთან ახლოს არიან, შეგიძლიათ გამოიყენოთ ტეგი

…….
/

2. პრაქტიკული ქარხანა No3

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

გაკვეთილი #4

სხვა დოკუმენტებთან ბმულები ორგანიზებულია ტეგების მიხედვით<A>….

> ტექსტი ჰიპერ-ენერგეტიკული .

>< IMG SRC ='გრაფიკული ფაილის სახელი' >

2. პრაქტიკული ქარხანა No4

თეატრების სიის რეგისტრაცია მთავარ გვერდზე glavn.htm, როგორც ჰიპერბმული თეატრების დამატებით ვებ გვერდებზე.

გაკვეთილი #5

1. მაგიდები

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

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

ცხრილს აქვს ორი მწკრივი (სტრიქონი), ამიტომ არის ორი შუა:

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

ტეგების ძირითადი ატრიბუტები

і
ცხრილის პარამეტრების, რიგების ან განლაგების დაყენება:

ALIGN = მარცხნივ, მარჯვნივ, ცენტრში - გასწორება (

, ,
)

BGCOLOR='color' – ფონის ფერი (

, ,
)

HSPACE = მნიშვნელობა – მარცხენა და მარჯვენა სივრცე ცხრილში პიქსელებში (

)

VSPACE = მნიშვნელობა - თავისუფალი ადგილი ცხრილის ქვემოთ პიქსელებში (

)

WIDTH = მნიშვნელობა - ცხრილის (ოთახის) სიგანე - პიქსელებში ან ასობით (

,
)

HEIGHT = მნიშვნელობები - ცხრილის სიმაღლეები (კომპოზიციები, რიგები) - პიქსელებში ან პიქსელებში (

, )

BORDER= მნიშვნელობა - საზღვრების რაოდენობა მაგიდის გარშემო და შუაში, ნაგულისხმევად მნიშვნელობა = 1, თუ მნიშვნელობა = 0, მაშინ არ არის საზღვარი (

,
, ,

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

რა არის HTML და CSS?

HTML (ჰიპერტექსტის მარკირების ენა) განსაზღვრავს სტრუქტურას ტექსტის ნაცვლად, რაც ნიშნავს შინაარსს, როგორიცაა სათაურები, აბზაცები და სურათები. CSS (Cascading Style Sheets) ან კასკადური სტილის ფურცლები არის პრეზენტაცია, რომელიც შექმნილია შინაარსის ახალი იერსახის შესაქმნელად, როგორიცაა შრიფტები ან ფერები.

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

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

ძირითადი HTML ტერმინები

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

ელემენტი

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

ადრე
) და აბზაცები (იგულისხმება როგორც

); თქვენ შეგიძლიათ შეიტანოთ ელემენტები სიაში ,

, , і და მრავალი სხვა.

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

ტეგები

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

გახსნის ტეგი მიუთითებს ელემენტის წარმოშობაზე. მნიშვნელობა შედგება სიმბოლოსგან<, затем идёт имя элемента и завершается символом >; მაგალითად,

.

დახურვის ტეგი მიუთითებს ელემენტის დასასრულს. მნიშვნელობა შედგება სიმბოლოსგან< с последующей косой чертой и именем элемента и завершается символом >; მაგალითად,

.

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

ასე რომ, ტეგები ასე გამოიყურება:

...

ატრიბუტები

ელემენტის შესახებ დამატებითი ინფორმაციის მისაწოდებლად გამოიყენება ატრიბუტები და ავტორიტეტები. ყველაზე ვრცელი ატრიბუტები მოიცავს id ატრიბუტს, რომელიც განსაზღვრავს ელემენტს; კლასის ატრიბუტი, რომელიც კლასიფიცირებს ელემენტს; src ატრიბუტი, რაც ნიშნავს ერთად დაბადებულის სხეულს; href ატრიბუტი, რომელიც მიუთითებს რესურსის ბმულზე.

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

შეი ჰოუ

ძირითადი HTML ტერმინების დემონსტრირება

ეს კოდი აჩვენებს ტექსტს "Shay Howe" ვებ გვერდზე და როდესაც დააწკაპუნებთ ამ ტექსტზე თქვენ გამოგიგზავნით http://shayhowe.com. გაგზავნილი ელემენტი გახმოვანებულია დამატებითი ტეგისთვის, რომელიც ნაჩვენებია და ხურავს ტეგსტექსტი, აგრეთვე მისამართის ატრიბუტი და მნიშვნელობა, რომელიც გაგზავნილია href="http://shayhowe.com"-ის მეშვეობით მრუდე ტექსტში.

ბრინჯი. 1.01. HTML სინტაქსისქემატური ხედი მოიცავს ელემენტს, ატრიბუტს და ტეგს

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

HTML დოკუმენტის სტრუქტურის რეგულირება

HTML დოკუმენტები - მაპატიეთ ტექსტური დოკუმენტები, დანაზოგი extensions.html-ით და არა .txt. HTML-ის წერის დასაწყებად, ჯერ დაგჭირდებათ ტექსტური რედაქტორი, რომელიც შეგიძლიათ გამოიყენოთ Wikoristan-იდან. სამწუხაროდ, ეს არ მოიცავს Microsoft Word-ს და გვერდებს, სხვა დასაკეცი რედაქტორებს. ორი ყველაზე პოპულარული ტექსტური რედაქტორი HTML და CSS დასაწერად არის Dreamweaver და Sublime Text. უფასო ალტერნატივები ასევე არის Notepad++ Windows-ისთვის და TextWrangler Mac-ისთვის.

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

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

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

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

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

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

ეს არის ვებ საიტი.

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

ეს კოდი აჩვენებს დოკუმენტს, დაწყებული დოკუმენტის ტიპით,მაშინ ელემენტი მოვა . Შუაში წადი ელემენტი і . ელემენტი გვერდის კოდირება ტეგის გამოყენებით ელემენტის მეშვეობით დოკუმენტის დასახელება . ელემენტი <body>მოიცავს სათაურს ელემენტის მეშვეობით <h1>ტექსტის რომ აბზაცის მეშვეობით<р>. ელემენტში შედის როგორც სათაურის, ასევე აბზაცის ჩანაწერები <body>, სუნი ჩანს ვებ გვერდზე.</p><p>თუ ელემენტი სხვა ელემენტის შუაშია, დანართების ჩათვლით, კარგი იდეაა დაამატოთ ახალი ჩანაწერი, რათა დოკუმენტის სტრუქტურა კარგად იყოს ორგანიზებული და წაკითხული. წინა კოდს აქვს შეურაცხმყოფელი ელემენტები <head>і <body>ჩასმული და ელემენტის შუაში ჩასმული <html>. ელემენტების ჩანაწერების სტრუქტურა გაგრძელდება შუაში ახლად დამატებული ელემენტებით <head>і <body> .</p><h3>თვითდახურვის ელემენტები</h3><p>წინა კონდახზე არის ელემენტი <meta>იყოს ერთი ტეგი, რომელიც არ შეიცავს თეგს, რომელიც იხურება. ნუ ტრაბახობ, ყველაფერი ნაწილებად დაიშალა. ყველა ელემენტი არ არის შედგენილი თეგებისგან, რომლებიც იხსნება და იხურება. ეს ელემენტები უბრალოდ ერთად იქცევიან ან იქცევიან ატრიბუტების მეშვეობით ერთი ტეგის ფარგლებში. <meta>ეს არის ერთ-ერთი ასეთი ელემენტი. ელემენტის ნაცვლად <meta>განაცხადში საჭიროა დამატებითი ატრიბუტების სიმბოლოების ნაკრები და მნიშვნელობა. სხვა სტანდარტული თვითდახურვის ელემენტები მოიცავს:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>სტრუქტურა შეიქმნა, დაყოფილია დოკუმენტის ტიპის დამატებით დეტალებად<!DOCTYPE html>და ელემენტები <html> , <head>і <body>є დოზიტი ფართო. ჩვენ გვინდა ხელით შევინარჩუნოთ დოკუმენტის ეს სტრუქტურა, რადგან ის ხშირად იჭედება ახალი HTML დოკუმენტების შექმნისას.</p><h3>კოდის ვალიდაცია</h3><p>რაც არ უნდა ფრთხილად დავწეროთ ჩვენი კოდი, შეცდომები გარდაუვალია. საბედნიეროდ, როდესაც ვწერთ HTML და CSS, გვაქვს ვალიდატორები ჩვენი მუშაობის შესამოწმებლად. W3C წარმოგიდგენთ HTML და CSS ვალიდატორებს, რომლებიც კოდს სკანირებენ პარიტეტზე. ჩვენი კოდის გადამოწმება არა მხოლოდ გვეხმარება იმის უზრუნველსაყოფად, რომ ის სწორად გამოჩნდება ყველა ბრაუზერში, არამედ გვეხმარება განვავითაროთ გაფართოებული ცოდნა კოდის დაწერის შესახებ.</p><h2>პრაქტიკაში</h2><p>როგორც ვებ დიზაინერებს და წინა დეველოპერებს, ჩვენ შეგვიძლია თავი დავანებოთ უამრავ მშვენიერ კონფერენციას, რომელიც ეძღვნება ჩვენს ხელობას. ჩვენ ვაპირებთ მოვაწყოთ ეროვნული კონფერენცია Styles Conference და შევქმნათ ვებ გვერდი მომავალი გაკვეთილებით. Სწორია!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy loading=lazy><p>მოდით გადავიდეთ ცოტა HTML-ზე და გადავხედოთ CSS-ს. გახსოვდეთ, HTML განსაზღვრავს ჩვენი ვებ გვერდების სტრუქტურას, ხოლო CSS განსაზღვრავს მათ ვიზუალურ სტილს და <a href="https://3ddroid.ru/ka/there-are-some-advice/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska/">გარეგანი სახე</a>.</p><h2>ძირითადი CSS პირობები</h2><p>HTML ტერმინების გარდა, არსებობს რამდენიმე ძირითადი CSS ტერმინი, რომელთა ცოდნაც მოგიწევთ. ეს ტერმინები მოიცავს სელექტორებს, უფლებამოსილებებს და მნიშვნელობებს. როგორც HTML ტერმინოლოგიასთან დაკავშირებით, რაც უფრო მეტს მუშაობთ CSS-თან, მით უფრო მეტად იქცევა ტერმინები თქვენს სხვა ბუნებაში.</p><h3>სელექციური</h3><p>როდესაც ელემენტები ემატება ვებგვერდს, მათი სტილისტიკა შესაძლებელია დამატებითი CSS-ის გამოყენებით. ამომრჩეველი განსაზღვრავს რომელი ელემენტი ან HTML ელემენტებია გამიზნული და მათზე გამოყენებულია სტილი (როგორიცაა ფერი, ზომა და პოზიცია). სელექტორები შეიძლება შეიცავდეს სხვადასხვა ინდიკატორების ერთობლიობას უნიკალური ელემენტების შესარჩევად, მიუხედავად მათი სპეციფიკისა. მაგალითად, გვსურს ავირჩიოთ ყველა აბზაცი გვერდზე ან უბრალოდ ავირჩიოთ ერთი კონკრეტული აბზაცი.</p><p>სელექტორები ჩვეულებრივ ასოცირდება ატრიბუტების მნიშვნელობებთან, როგორიცაა id ან კლასის მნიშვნელობა ან ელემენტის სახელი, მაგალითად. <h1>ან კიდევ<р> .</p><p>CSS-ში სელექტორები დაკავშირებულია ხვეულ მშვილდებთან (), რომლებიც ირჩევენ სტილებს და ენიჭებათ არჩეულ ელემენტს. ეს სამიზნე ამომრჩევი ყველა ელემენტისთვის <span><p>P (...)</p><h3>ძლიერი</h3><p>როგორც არჩევანის ელემენტი, ძალა ნიშნავს სტილებს, რომლებიც შენარჩუნდება შემდეგში. ავტორიტეტების სახელები ამომრჩევლის შემდეგ, შუაში მოდის <a href="https://3ddroid.ru/ka/program/kak-napisat-posle-figurnoi-skobki-v-vorde-kvadratnye-i-figurnye-skobki/">ფიგურული ტაძრები</a>() და დუბლის წინ შუას გარეშე. ჩვენ შეგვიძლია შევცვალოთ მრავალი ავტორიტეტი, როგორიცაა ფონი, ფერი, შრიფტის ზომა, სიმაღლე და სიგანე და სხვა ავტორიტეტები, რომლებიც ხშირად ემატება. მიმდინარე კოდში განისაზღვრება ფერის და შრიფტის ზომის ძალა, რაც გავლენას ახდენს ყველა ელემენტზე <span><p>P (ფერი: ...; შრიფტის ზომა: ...; )</p><h3>მნიშვნელობა</h3><p>ჯერჯერობით, მხოლოდ სელექტორის მეშვეობით შევარჩიეთ ელემენტი და განვსაზღვრეთ, რომელი სტილის სტაგნაცია გვსურს ხელისუფლების მეშვეობით. ახლა ჩვენ შეგვიძლია ძალაუფლების ღირებულების ქცევა ფასეულობების მეშვეობით დავაყენოთ. მნიშვნელობები შეიძლება მიეთითოს, როგორც ტექსტი წერტილებსა და წერტილებს შორის. ქვემოთ ვირჩევთ ყველა ელემენტს <p >მე დავაყენე ფერის მნიშვნელობა ნარინჯისფერზე, ხოლო შრიფტის ზომის მნიშვნელობა 16 პიქსელზე.</p><p>P (ფერი: ნარინჯისფერი; შრიფტის ზომა: 16 პიქსელი; )</p><p>შეგახსენებთ, CSS-ში ჩვენი წესების ნაკრები იწყება სელექტორით, შემდეგ პირდაპირ მიდის მშვილდის ფორმებზე. ეს ფიგურის ფორმის მშვილდები შეიცავს შოკს, როგორც ავტორიტეტებისა და მნიშვნელობის წყვილებიდან. კანის გაღიზიანება იწყება სიყვითლით, რასაც მოჰყვება ორმაგი შენიშვნა, მნიშვნელოვანი სიყვითლე და წერტილი კომით.</p><p>ფართოდ გავრცელებული პრაქტიკა არის ძალაუფლების ფსონის მნიშვნელობა და ხვეული თაღების შუა ნაწილის მნიშვნელობა. HTML-ის მსგავსად, შეყვანები გვეხმარება ჩვენი კოდის ორგანიზებულ და გააზრებულ შენარჩუნებაში.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy loading=lazy></p><p>ბრინჯი. 1.03. CSS სინტაქსის სტრუქტურა მოიცავს სელექტორს, ავტორიტეტს და მნიშვნელობას</p><p>რამდენიმე ძირითადი ტერმინისა და ძირითადი CSS სინტაქსის ცოდნა კარგი დასაწყისია, მაგრამ ჯერ კიდევ რამდენიმე პუნქტია გასათვალისწინებელი, ჯერ სიღრმისეულად წასვლა. ჩვენ უნდა დავაკვირდეთ როგორ მუშაობენ სელექტორები CSS-ში.</p><h2>სელექტორებთან მუშაობა</h2><p>სელექტორები, როგორც უკვე აღვნიშნეთ, მიუთითებენ რომელი HTML ელემენტები იქნება სტილიზებული. მნიშვნელოვანია გვესმოდეს, თუ როგორ გამოიყენოთ სელექტორები და როგორ მუშაობენ ისინი. პირველი ნაბიჯი არის სხვადასხვა ტიპის სელექტორების გაცნობა. მოდით ვისაუბროთ მთავარ სელექტორებზე: ტიპის სელექტორები, კლასის სელექტორები და იდენტიფიკატორის სელექტორები.</p><h3>სელექტორის ტიპი</h3><p>ტიპის სელექტორები მათი ტიპის სამიზნე ელემენტებს. მაგალითად, იმიტომ, რომ ჩვენ გვინდა ფოკუსირება ყველა ელემენტზე <div>ჩვენი ბრალია div სელექტორის გამოყენება. წინასწარი კოდი აჩვენებს ელემენტების ამომრჩევის ტიპს <div>, ისევე როგორც ორიგინალური HTML.</p><p>დივ (...)</p><p> <div>...</div> <div>...</div> </p><h3>კლასი</h3><p>კლასები საშუალებას გაძლევთ აირჩიოთ ელემენტი მნიშვნელობის მიხედვით <a href="https://3ddroid.ru/ka/printers/poisk-elementa-na-stranice-javascript-javascript-i-jquery-vyborka-elementa-po-klassu/">კლასის ატრიბუტი</a>. კლასის სელექტორები ცოტა უფრო სპეციფიკურია, ხოლო ტიპის სელექტორები ნაკლებად სპეციფიკურია და ზოგჯერ ირჩევენ ელემენტების ერთ ჯგუფს, ან არა ერთი და იმავე ტიპის ყველა ელემენტს.</p><p>კლასები საშუალებას გაძლევთ განსაზღვროთ სხვადასხვა სტილი ერთდროულად სხვადასხვა ელემენტზე, რამდენიმე ელემენტისთვის კლასის ატრიბუტის იგივე მნიშვნელობების მიხედვით.</p><p>CSS-ში კლასები მითითებულია წინ წერტილით, რასაც მოჰყვება კლასის ატრიბუტის მნიშვნელობა. ქვემოთ მოცემული კლასის ამომრჩეველი ირჩევს ყველა ელემენტს, რომელიც შეესაბამება გასაოცარი კლასის ატრიბუტის მნიშვნელობას, ელემენტების ჩათვლით <div>і <span><p>გასაოცარია (...)</p><p> <div class="awesome">...</div> </p><h3>იდენტიფიკატორები</h3><p>იდენტიფიკატორები კიდევ უფრო ზუსტია, დაბალი კლასის და სუნის ფრაგმენტები ფოკუსირებულია ერთ უნიკალურ ელემენტზე ერთდროულად. ისევე, როგორც vikory კლასის სელექტორები ემთხვევა კლასის ატრიბუტის მნიშვნელობებს, vikory იდენტიფიკატორები ემთხვევა id ატრიბუტის, როგორც სელექტორის მნიშვნელობებს.</p><p>აკრეფილი ელემენტის ტიპის მიუხედავად, id ატრიბუტის მნიშვნელობა შეიძლება შეიცვალოს არაერთხელ გვერდზე. თუ პირადობის მოწმობა არსებობს, დეტალები დაცულია მნიშვნელოვანი ელემენტებისთვის.</p><p>CSS-ში იდენტიფიკატორები მითითებულია გრამის სიმბოლოთი წინ, რასაც მოჰყვება id ატრიბუტის მნიშვნელობა. აქ იდენტიფიკატორი ირჩევს ელემენტს, რომ მოათავსოს id ატრიბუტი shayhowe მნიშვნელობებზე.</p><p>#შაიჰაუ (...)</p><p> <div id="shayhowe">...</div> </p><h3>დამატებითი სელექტორები</h3><p>სელექტორები უკიდურესად რთული საქმეა და აღწერილობები უფრო მეტად მოიცავს სელექტორების ფართო სპექტრს, რაც ჩვენ გვჭირდება. ცის სელექტორი ნაკლებად კობია. ბევრი მოწინავე სელექტორია და ისინი ადვილად ხელმისაწვდომია. როგორც კი შეეჩვევით მათ, ნუ შეგეშინდებათ მათი პროგრესით გაოცების.</p><p>გარაზდ, ჩვენ ვიწყებთ ყველაფრის ერთდროულად შეგროვებას. ჩვენ ვამატებთ ელემენტებს გვერდით ჩვენი HTML-ის შუაში, შემდეგ შეგვიძლია შევარჩიოთ ეს ელემენტები და დავაფორმოთ ისინი დამატებითი CSS-ით. ახლა მოდით დავაკავშიროთ წერტილები HTML-სა და CSS-ს შორის, რათა ორმა სიტყვამ ერთად იმუშაოს.</p><h2>CSS კავშირები</h2><p>იმისათვის, რომ გავიგოთ ჩვენი CSS და ჩვენი HTML, ჩვენ უნდა მივმართოთ CSS ფაილს HTML-ში. კარგი პრაქტიკაა ჩვენი ყველა სტილის ჩართვა ერთ გარე ფაილში, რომელიც არის ტექსტური ველი ელემენტის შუაში. <head>ჩვენი HTML დოკუმენტი. ერთი ახალი CSS-ის გამოყენება საშუალებას გვაძლევს გავაერთიანოთ იგივე სტილები მთელ საიტზე და სწრაფად განვახორციელოთ ნებისმიერი ცვლილება.</p><h3>CSS-ის დამატების სხვა ვარიანტები</h3><p>სხვა CSS ვარიანტები მოიცავს შიდა და მორგებული სტილის გამოყენებას. თქვენ შეგიძლიათ იცოდეთ ამ ვარიანტების შესახებ რეალურად, მაგრამ ისინი, როგორც წესი, არ არის ქება, რადგან საიტების განახლება შრომატევადი და მოუხერხებელია.</p><p>ახალი სტილის ფურცლის შესაქმნელად, ჩვენ კვლავ გვინდა ავირჩიოთ ტექსტური რედაქტორი, რათა შევქმნათ ახალი ტექსტური ფაილი გაფართოებული .css-ით. ჩვენი CSS ფაილი ინახება იმავე საქაღალდეში ან ქვესაქაღალდეში, სადაც მდებარეობს HTML ფაილი.</p><p>ელემენტის შუაში <head>ელემენტი ჩერდება <link>, რაც ნიშნავს ხაზებს HTML და CSS ფაილებს შორის. ვინაიდან ჩვენ ვართ დაკავშირებული CSS-თან, ვიყენებთ Vickory-ს <a href="https://3ddroid.ru/ka/windows-7/atribut-rel-canonical-polnoe-rukovodstvo-po-ispolzovaniyu-kanonicheskih-ssylok/">rel ატრიბუტი</a>ეს არის სტილის მნიშვნელობები ამ ხაზების ჩასართავად. გარდა ამისა, href ატრიბუტი გამოიყენება CSS ფაილის გაფართოების ან ბილიკის მითითებისთვის.</p><p>HTML დოკუმენტის ელემენტის მიმდინარე აპლიკაციაში <head>მიუთითებს გარე სტილის ფაილზე.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS-ის სწორად გადმოცემის უზრუნველსაყოფად, href ატრიბუტის მნიშვნელობა შეიძლება პირდაპირ შეესაბამებოდეს იმას, რაც შენახულია CSS ფაილში. პირველ შემთხვევაში, main.css ფაილი ინახება იმავე ადგილას, სადაც HTML ფაილი, რომელიც ასევე მდებარეობს root საქაღალდეში.</p><p>თუ CSS ფაილი მოთავსებულია ქვესაქაღალდეში, მაშინ href ატრიბუტის მნიშვნელობა შეიძლება მჭიდროდ იყოს დაკავშირებული ამ მეთოდთან. მაგალითად, თუ ჩვენი main.css ფაილი ინახება ქვესაქაღალდეში სახელად stylesheets, href ატრიბუტის მნიშვნელობა იქნება stylesheets/main.css. აქ ბრინჯის ლენტები (ან წინ დახრილი) გამოიყენება ქვესაქაღალდეში მოძრაობების აღსანიშნავად.</p><p>on <a href="https://3ddroid.ru/ka/game/the-most-popular-game-at-the-moment-what-is-the-best-game-in-the-world/">ნარაზი</a>ჩვენი ისტორიები იწყებენ სიცოცხლეს, რა თქმა უნდა. ჩვენ ჯერ არ ჩავუღრმავდით CSS-ს, მაგრამ თქვენ შეიძლება შეამჩნიეთ, რომ ზოგიერთ ელემენტს აქვს სტილები, რომლებიც ჩვენ არ განვსაზღვრეთ ჩვენს CSS-ში. ეს ბრაუზერი ამ ელემენტებს საკუთარ სტილს აწესებს. საბედნიეროდ, ჩვენ შეგვიძლია მარტივად გადავწეროთ ეს სტილები, რაც შემდგომში შეგვიძლია CSS-ის ჩამოტვირთვით.</p><h2>Wikoristannya CSS scraper</h2><p>კანის ბრაუზერი იყენებს სხვადასხვა სტილს სხვადასხვა ელემენტების რეცხვისთვის. ასე <a href="https://3ddroid.ru/ka/operating-systems/sohranyaem-veb-stranicu-v-pdf-v-brauzere-google-chrome-kak-sohranit-veb-stranicu/">გუგლ ქრომი</a>აჩვენებს სათაურებს, აბზაცებს, სიებს და ა.შ., რომლებიც შეიძლება განსხვავდებოდეს Internet Explorer-ის მუშაობისგან. სხვადასხვა ბრაუზერებთან შესაბამისობის უზრუნველსაყოფად, CSS ჩამოტვირთვები ფართოდ გამოიყენება.</p><p>ეს CSS იღებს ყველა ძირითად HTML ელემენტს მოცემული სტილიდან და უზრუნველყოფს თანმიმდევრულ სტილს ყველა ბრაუზერში. ეს ფასდაკლებები მოითხოვს, რომ შეიყვანოთ სხვადასხვა ზომის, ღიობების, მინდვრების ან დამატებითი სტილის ამ ღირებულებების შესამცირებლად. CSS-ის კასკადის ნაწილები ქვევით მიდის (ამას მალე გაიგებთ) - ჩვენი წვეთი ჩვენი სტილის სათავეშია. ეს გარანტიას იძლევა, რომ ეს სტილები პირველ რიგში წაიკითხება <a href="https://3ddroid.ru/ka/operating-systems/kak-ustanovit-domashnyuyu-stranicu-yandeks-kak-yandeks-sdelat-startovoi-stranicei/">სხვადასხვა ბრაუზერები</a>მუშაობა საწყისი წერტილიდან მანძილზე.</p><p>გასაშრობად ხელმისაწვდომია სხვადასხვა CSS ფასდაკლებები, ყველა მათგანს აქვს საკუთარი ძლიერი მხარეები. ერიკ მეიერის ერთ-ერთი ყველაზე პოპულარული მაგალითი, მისი CSS ვარდნა ადაპტირებულია ახალი HTML5 ელემენტებისთვის.</p><p>თავს ცოტა თავგადასავლად გრძნობთ, ისევე როგორც Normalize.css, შექმნილი ნიკოლას გალაჰერის მიერ. Normalize.css ყურადღებას არ ამახვილებს ყველა ძირითადი ელემენტისთვის მყარი სკიმინგის არჩევაზე, არამედ ამ ელემენტების დაინსტალირებული ფონის სტილებზე. ეს მოითხოვს CSS-ის საფუძვლიან გაგებას, ასევე იმის ცოდნას, თუ რა გსურთ შეიტანოთ სტილში.</p><h3>ბრაუზერის ჯვარედინი თავსებადობა და ტესტირება</h3><p>როგორც ადრე მიხვდით, სხვადასხვა ბრაუზერი განსხვავებულად აჩვენებს ელემენტებს. მნიშვნელოვანია იცოდეთ ბრაუზერის ჯვარედინი თავსებადობისა და ტესტირების მნიშვნელობა. საიტების ბრალი არ არის, რომ მხოლოდ ყველა ბრაუზერში ჩანს, მაგრამ შეიძლება მსგავსი იყოს. რომელი ბრაუზერების მხარდაჭერა გსურთ და რომელი სამყაროც არ უნდა აირჩიოთ, თქვენ მოგიწევთ გადაწყვეტილებების მიღება იმის მიხედვით, თუ რა მუშაობს საუკეთესოდ თქვენი საიტისთვის.</p><p>არსებობს მთელი რიგი გამოსვლები CSS-ის დაწერის დროის პატივისცემის საფუძველზე. კარგი ამბავი ის არის, რომ ყველაფერი შესაძლებელია და მხოლოდ ცოტა მოთმინება გჭირდებათ მის დასაუფლებლად.</p><h2>პრაქტიკაში</h2><p>მოდით დავბრუნდეთ და გადავხედოთ ჩვენს კონფერენციის საიტს და ვიფიქროთ, როგორ შეგვიძლია დავამატოთ პატარა CSS.</p><ol><li>ჩვენი styles-conference საქაღალდის შუაში, მოდით შევქმნათ <a href="https://3ddroid.ru/ka/windows-7/sozdanie-novoi-papki-na-windows-kak-sozdat-novuyu-papku-v-windows-xp/">ახალი საქაღალდე</a>ჩემი აქტივებით. ჩვენ დავზოგავთ ყველა რესურსს ჩვენი ვებსაიტისთვის, როგორიცაა სტილი, სურათები, ვიდეო და ა.შ. ჩვენი სტილისთვის, მოდით წავიდეთ წინ და დავამატოთ სხვა stylesheets საქაღალდე აქტივების საქაღალდის შუაში.</li><li>Vikoristovuchi ტექსტური რედაქტორი ხსნადია <a href="https://3ddroid.ru/ka/browsers/where-to-throw-plugins-how-to-install-the-plugin-in-photoshop-to-get-new-features/">ახალი ფაილი</a>სახელით main.css და შეინახეთ stylesheets საქაღალდეში, რომელიც ჩვენ ყურადღებით შევქმენით.</li><p>თქვენს ბრაუზერში index.html ფაილის დათვალიერებით, ჩვენ ვხედავთ რა ელემენტებს <h1>і <p>უკვე შური იძიეთ პრომო ადამიანების სტილზე. ზოკრემა, stinks აქვს უნიკალური ზომა შრიფტი და სივრცე მათ გარშემო. სხვათა შორის, ერიკ მეიერის თქმით, ჩვენ შეგვიძლია შეარბილოთ ეს სტილები, რათა თითოეულ მათგანს ახალი ბაზიდან დაიწყოს. ამისათვის გადახედეთ თქვენს საიტს, დააკოპირეთ კოდი და ჩასვით ჩვენი main.css ფაილის ზედა ნაწილში.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 ლიცენზია: არ არის (საჯარო დომენი) */ html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, nav, გამომავალი, რუბი, განყოფილება, შეჯამება, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; ჩასმა: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საბაზისო ;) /* HTML5 დისპლეის როლის გადატვირთვა ძველი ბრაუზერებისთვის */ სტატია, გარდა, დეტალები, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, სექცია ( ჩვენება: ბლოკი; ) ტექსტი (ხაზის სიმაღლე: 1 ; ) o კოლაფსი: გ ჩამოშლა; საზღვრების დაშორება: 0; )</p><li>ჩვენი main.css ფაილი იწყებს ფორმირებას, ამიტომ ჩვენ უნდა დავუკავშიროთ ის index.html ფაილს. გახსენით index.html ტექსტურ რედაქტორში და დაამატეთ ელემენტი <link>ვ <head>ელემენტის შემდეგ დაუყოვნებლივ <title> .</li><li>ზოგიერთი ჩვენგანი მიუთითებს სტილებს ელემენტის საშუალებით <link>დაამატეთ rel ატრიბუტი სტილის ფურცლის მნიშვნელობებს.</li><p>ჩვენ ასევე აღვნიშნავთ, რომ ჩვენ გავგზავნეთ href ატრიბუტი ჩვენს main.css ფაილში. გახსოვდეთ, ჩვენი main.css ფაილი ინახება stylesheets საქაღალდეში, რომელიც მდებარეობს აქტივების საქაღალდის შუაში. ამრიგად, href ატრიბუტის მნიშვნელობა, რომელიც არის ჩვენი main.css ფაილის გზა, არის assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>სტილის კონფერენცია

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

ბრინჯი. 1.04. ჩვენი ვებსაიტის სტილის კონფერენცია CSS ფასდაკლებით

დემონსტრირება და გამომავალი კოდი

ქვემოთ შეგიძლიათ ნახოთ Styles Conference ვებსაიტი თქვენს შემდეგ ქალაქში და ასევე ისიამოვნოთ გამომავალი კოდისაიტი ახლა

Შემაჯამებელი

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

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

გამოიცანით რას ვუყურეთ:

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

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

რესურსები და ძალა

  • საერთო HTML ტერმინები Scripting Master-ის საშუალებით
  • CSS-ის პირობები და განმარტებები შთამბეჭდავი ვებ-გვერდების საშუალებით
  • CSS ინსტრუმენტები: გადატვირთეთ CSS ერიკ მეიერის მეშვეობით

შედი

1. ძირითადი ინფორმაცია

1.1 html ენის შესახებ

1.2 შექმნის ვებვებგვერდი

1.3 ზოგადი დებულებები

1.4 დოკუმენტის სტრუქტურა

1.5 დოკუმენტის სხეულის ტეგები

1.6 ძირითადი html ტეგების სია

2. დამატებითი ინფორმაცია

2.1 ტეგების სია

2.3 გრაფიკა დოკუმენტის შუაში

2.4 სტილის დამატება დოკუმენტში

2.5 სპეციალური html ტეგები

2.6 HTML ფორმა

2.7 Html ჩარჩო

2.8 HTML ცხრილები

2.9 გრაფიკის ოპტიმიზაცია ვებისთვის

2.10 CSS საფუძვლები

3. საიტის აღწერა

3.1 მომზადება

3.2 თავის გვერდის გახსნა

3.3 მეორე მხარის შექმნა

3.4 გვერდის შექმნა ადგილის აღწერით

3.5 ფოტო გვერდი

3.6 გვერდითი პროგრამები

3.7 გვერდი პოდიაკებით

ვისნოვოკი

ვიკილისტების სია

შედი

ეს ნაშრომი ეძღვნება HTML ენას. დამატებითი მიზნებისთვის იქმნება ფაილები გაფართოებით *.htm და *.html, რომლებიც წარმოადგენს ვებ გვერდებს. მათგან იქმნება ინტერნეტ საიტები.

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

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

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

1.1 ენის შესახებ HTML

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

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

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

HTML ტეგები შეიძლება ჭკვიანურად დაიყოს ორ კატეგორიად:

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

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

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

1.2 კარიბჭე საიტი

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

მაგალითად, HTML რედაქტორები, როგორიცაა Netscape Navigator Gold Netscape-დან, საშუალებას გაძლევთ შექმნათ დოკუმენტები გრაფიკულად WYSIWYG (რას ხედავთ არის ის, რასაც იღებთ) ტექნოლოგიის გამოყენებით. მეორეს მხრივ, დოკუმენტების შექმნის ტრადიციული მეთოდები იყენებს კონვერტორებს, რომლებიც საშუალებას გაძლევთ გადაიყვანოთ დოკუმენტები HTML ფორმატში.

ყველა HTML ტეგი იწყება "<" (левой угловой скобки) и заканчиваются символом ">(მარჯვენა თაღი). როგორც წესი, არის საწყისი და დასასრული ტეგი. მაგალითად, ჩვენ დავამატებთ სათაურის ტეგებს, რომელიც წარმოადგენს ტექსტს, რომელიც გამოჩნდება საწყისი და დასასრული ტეგების შუაში და აღწერს დოკუმენტის სათაურს:

დოკუმენტის სათაური

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

ტეგების აქტები, როგორიცაა

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

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

დოკუმენტის სათაური

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

І
. მეტი ინფორმაცია ტეგების შესახებ 
ქვემოთ დაიწერება.
 
როდესაც ვებ ბრაუზერი ფლობს დოკუმენტს, ის მიუთითებს, თუ როგორ ექვემდებარება დოკუმენტი ინტერპრეტაციას.  პირველი ტეგი, რომელიც გამოჩნდება დოკუმენტში, არის ტეგი .  ეს ტეგი ეუბნება ვებ ბრაუზერს, რომ თქვენი დოკუმენტი დაწერილია HTML-ში.  მინიმალური HTML დოკუმენტი ასე გამოიყურება:
 
დოკუმენტის ტექსტი...
 
დოკუმენტის სათაური .  დოკუმენტის სათაურის ტეგი გამოჩნდება დაუყოვნებლივ ტეგის შემდეგ და მეტი სადმე დოკუმენტის სხეულში.  ეს ტეგი არის ზაგალნის აღწერადოკუმენტი.  აუცილებლად განათავსეთ ნებისმიერი ტექსტი ტეგის შუაში .  დაწყების ტეგი მოთავსებულია უშუალოდ ტეგის წინ და სხვა ტეგები, რომლებიც აღწერს დოკუმენტს და დამთავრებული ტეგი</HEAD>იდება დოკუმენტის აღწერილობის დასრულებისთანავე.  Მაგალითად:</p> <p><TITLE>სპორტსმენების სია
 
პატივისცემა!  ტექნიკურად, დასაწყისი და დასასრული ტეგები მსგავსია , і  ნეობოვიაზკოვი.  თუმცა, მკაცრად რეკომენდირებულია მათი ვიკორიზება, რადგან ამ ტეგების ვიკორიზაცია საშუალებას აძლევს WEB ბრაუზერს ეფექტურად გამოყოს დოკუმენტის მთავარი ნაწილი და სემანტიკური ნაწილი.
 
დოკუმენტის სათაური .  ვებ ბრაუზერების უმეტესობა აჩვენებს ტეგს <TITLE>დოკუმენტის განთავსების ფანჯრის სათაურში და სანიშნე ფაილში, რომელსაც მხარს უჭერს WEB ბრაუზერი.  სათაური, ტეგები <TITLE>і, მდებარეობს შუაში -ტეგები, როგორც ზემოთ ნაჩვენებია აპლიკაციაში დოკუმენტის სათაური არ ჩანს, როდესაც დოკუმენტი გამოჩნდება ფანჯარაში.


ვებსაიტების შექმნა რთული პროცესია, დაყოფილია მრავალ ეტაპად.  პირველ ეტაპზე ვქმნით საიტის დიზაინს გრაფიკული ფორმით: ეს არის ის, რასაც ჩვენ ვუწოდებთ ესკიზებს და პროტოტიპებს საიტისთვის.  სინამდვილეში, ეს ჰგავს მომავალი საიტის ფერადი სურათების თაიგულს, რადგან დეპუტატი დამტკიცების იმედი აქვს.
ესკიზები ან ვებსაიტების პროტოტიპები ხშირად იქმნება გრაფიკული დიზაინის პროგრამების გამოყენებით.  ზ პროფესიული პროგრამებიროგორც ჩანს, სამი ყველაზე ფართო სიგანე არის ce, Adobe Illustrator, і  CorelDRAW.  და, რა თქმა უნდა, არის ბევრი სხვა ნაკლებად პროფესიონალური, მაგრამ არანაკლებ პროფესიონალური პროგრამა, რომლებზეც ჩვენ ჯერ არ ჩავუდექით ჩვენს პატივისცემას.
შეტევითი ეტაპი- საჭიროა დაბალი რიცხვითი შესწორებები და დეპუტატის მიერ ეს ესკიზების გამყარება.
ისე, საიტის შემოქმედების დიზაინი, შესწორებები და დადასტურებები მენეჯერის მიერ, ახლა მისი დაწვა სჭირდება და რაც შეეხება განლაგებას?
კიდევ ერთი ეტაპიშექმნილ საიტზე: განლაგება. 
განლაგება- ვებ საიტის შექმნა საიტის ესკიზის ან პროტოტიპის საფუძველზე.  და ეს ნიშნავს, რომ ყველაფერი, რაც დიზაინერმა "შექმნა" ერთ-ერთ პროგრამულ პროგრამაში, ისევე როგორც კოპირაიტერის დაწერა ტექსტური ფაილების სახით, განლაგების პროგრამისტს სჭირდება ფრთხილად და გრძნობით ამოჭრა და დაწერა კანის მხარის კოდი , მოათავსეთ სურათები იმ კოდში, რომ ტექსტი, გვერდების ერთმანეთთან დაკავშირება ჯვარედინი შეტყობინებების და გადასვლების საშუალებით, ფორმების დამატება და სხვა, სხვა, სხვა... მონოტონური, რობოტული რუტინა.  შეგიძლიათ მეტი წაიკითხოთ ვებსაიტის შექმნის ეტაპებზე
და ჩვენ გადავწყვიტეთ, დარჩენილი ეტაპი არის მზა საიტის „ატვირთვა“ მუდმივად განლაგებულ სერვერზე, მისი კორექტირება და დაზუსტება ისე, რომ ყველაფერი ისე მუშაობდეს, როგორც ჩვენ გვჭირდება, ხარვეზებისა და შეცდომების გარეშე.
ასე რომ, ვებსაიტის დასაწერად, თქვენ უნდა იცოდეთ შემდეგი ენის პროგრამირება: HTML, CSS, JavaScript, PHP, MYSQL.  არსებობს სხვა ენები, რომლებიც დღეს ყველაზე პოპულარულია.  კანის ენაზე კი უფრო დეტალურად გეტყვით.
HTML(ჰიპერტექსტის მარკირების ენა) არის მარკირება, რომელიც აღწერს ინფორმაციის ჩვენების ფორმას.  Qiu movu vikorist საიტის საძირკვლის შესაქმნელად, შემდეგ საიტის ჩარჩოსთვის.
CSS(კასკადური სტილის ფურცლები) - ის, რაც საშუალებას გაძლევთ აკონტროლოთ თქვენი ვებ გვერდის გარეგნობა.  დამატებითი CSS-ის გამოყენებით შეგიძლიათ მიუთითოთ ვებ გვერდის თითქმის ყველა ელემენტის ზუსტი მახასიათებლები.
JavaScript- ამ გზით თქვენ შეგიძლიათ გამოიყენოთ ეს ვებ გვერდით „დატკბობისთვის“, დამატებით ფასად შეგიძლიათ გახადოთ ვებ გვერდი ინტერაქტიული, ან სხვა სიტყვებით რომ ვთქვათ, მომხმარებელთან ურთიერთობა.  ამ დახმარებით თქვენ შეგიძლიათ შექმნათ ამომხტარი ფანჯრები ან მინიშნებები და მრავალი სხვა.  ეს ენა ემსახურება არა მხოლოდ ვებ დეველოპმენტში სტაგნაციის მიზანს.
PHP- ეს არის სკრიპტის სერვერების ჩაწერის მეთოდი.  მათ შორის ღვინო ყველაზე პოპულარულია მიმდინარე საათიდა დაუფლებულთა შორის უმნიშვნელო.  ზ გთხოვთ დაეხმაროთ PHP-სთქვენ შეგიძლიათ დაამუშავოთ მონაცემები სერვერზე, დაამუშავოთ ფაილები, ჩამოტვირთოთ სიები, მართოთ ჩატი, ფორუმი და მრავალი სხვა.
MYSQL- ეს არის მონაცემთა ბაზა.  დამატებითი საფასურისთვის შეგიძლიათ დაამატოთ, შეცვალოთ ან წაშალოთ მონაცემები, ან გააუქმოთ ინფორმაცია მოთხოვნის შემთხვევაში.  მას შემდეგ რაც შეიტყობთ MYSQL-ს, შეგიძლიათ მარტივად წაიკითხოთ სხვა მონაცემთა ბაზები.
აპლიკაცია © 2022 მობილური და კომპიუტერული გაჯეტები

)

BORDECOLOR='color' – ჩარჩოს ფერი ( >)

VALIGH=ქვედა, შუა, ზედა - ვერტიკალურად ერთად გადამოწმება (

)

2. პრაქტიკული ქარხანა No5

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

გაკვეთილები No6 და No7

1. სათაურის განყოფილება , მეტა ტეგები

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

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

პეტერბურგის დრამატული თეატრები <b>

> - - (მიუთითეთ კოდის ცხრილის ტიპი ( windows-1251, კოი8-რდა სხვა), დოკუმენტის ტექსტური ნაწილის მოსამზადებლად კორისტანას გამოყენებით.

- ინფორმაციას შესახებ

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

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

პროექტის მიახლოებები:"Мости через Неву", "Ріки та канали Санкт-Петербурга", "Мости через канали Санкт-Петербурга", "Незвичайні музеї Санкт-Петербурга", "Музичні театри", "Філармонії та капела", "Технічні ВНЗ -и Санкт-Петербурга”, “Дитячі театри Санкт-Петербурга”, “Гуманітарні ВНЗ-и Санкт-Петербурга”, “Передмісти Санкт-Петербурга”, “Музеї Санкт-Петербурга”, “Військові навчальні заклади у Санкт-Петербурзі” та інших. .!}

აუცილებელია საიტის მთავარი გვერდის დაპროექტება glavn.htm ფაილის მიხედვით, ცხრილის ან სიის არჩევით და საიტის ნავიგაციის განყოფილებაში 2-3 გვერდი, რომელიც გახსნის საიტს და განათავსებს სათაურს, ტექსტი და გვერდები.

გაკვეთილი #8

1. საკონტროლო ტესტი HTML ტეგების ცოდნაზე – 15 წუთი.

2. რეფლექსია. მოსწავლეებისა და მასწავლებლის მიერ პროექტის წარდგენა და მისი კლასის შეფასება - 30 ჰვილინი.

კვება საკონტროლო ტესტისთვის - დანართი 2.

ლიტერატურა მასწავლებლისთვის

  1. თომას ა. პაუელი „ვებ დიზაინი. ყველაზე დიდი გარე მოვლა. ორიგინალში“, მე-2 გამოცემა, BHV-SPB, 2005 წ.
  2. Brown M. “HTML 3.2. ყველაზე დიდი გარე მოვლა. ორიგინალში”, BHV-SPb, 1999 წ
  3. ზახარკინა ვ.ვ. „ვებ ისტორიების შექმნის საფუძვლები“, მეთოდური სახელმძღვანელო, პეტერბურგი, 2000 წ
  4. კ.ახმეტოვი, „Microsoft Internet Explorer 4.0 ყველაფერი“, გამომცემლობა Komp'yuter, მოსკოვი, 1997 წ.

ლიტერატურა შესასწავლად

  1. Usenkov D. "Web Master-ის გაკვეთილები", მოსკოვი, BINOM, 2004 წ.
  2. სმირნოვა ი. „დაიწყო ვებ დიზაინი, სანკტ-პეტერბურგი, BHV, 2004 წ.

ინტერნეტ რესურსების სია

  1. http://htmlbook.ru - მერჟევიჩ ვლადი. მოკლე, ინფორმაციებით მდიდარი გზამკვლევი ვებსაიტების შექმნის ტექნოლოგიის, HTML, CSS, დიზაინის, გრაფიკის და ა.შ.
  2. http://html.manual.ru - გოროდულინი ვოლოდიმერი. HTML რედაქტორი.
  3. http://winchanger.narod.ru - ა.კლიმოვი. HTML-ფილმის ტეგების მოკლე შინაარსი.

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

ვებ ისტორიები და ვებსაიტები

ვებ ისტორიები.ვებ გვერდები იქმნება HTML (Hyper Text Markup Language) ჰიპერტექსტური დოკუმენტების დამატებითი მარკირების გამოყენებით. ორიგინალურ ტექსტურ დოკუმენტში ჩასმულია HTML სიმბოლოები - HTML ტეგები, რომლებიც მიუთითებენ ვებ გვერდის იერსახეს ბრაუზერში ნახვისას.

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

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

ვებ გვერდების შექმნა ვიკორისტანური HTML- ტეგები დიდ ძალისხმევას აკეთებენ, ხშირად იციან ენის სინტაქსი და იყენებენ სპეციალურ პროგრამულ ინსტრუმენტებს (ვებ რედაქტორებს), რათა ვებსაიტების შექმნა მარტივი და ეფექტური იყოს. ვებ რედაქტორებში გვერდების შექმნისა და რედაქტირების პროცესი ძალიან მარტივია, რის გამოც იგი ხორციელდება WYSIWYG რეჟიმში (ინგლისურად „What You See Is What You Get“ - „What You See Is What You Get“).

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

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

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

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

აკონტროლეთ საკვები

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

2. როგორ ერწყმის ვებ ისტორიები ვებგვერდებს?

ვებ საიტის სტრუქტურა

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

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

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

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

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

საიტი, რომელიც ნაჩვენებია ბრაუზერში, მოთავსებულია კონტეინერში (ნახ. 6.26):


<ТITLE>კომპიუტერი


კომპიუტერი და PZ


ბრინჯი. 6.26. "კომპიუტერის" ვებ-ისტორიის მომზადება

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

აუცილებელია გამოვყოთ index.htm ფაილის სახელები, რომლებშიც შენახულია ვებ გვერდი ფაილების სისტემა, ვებ გვერდის სახელი (მაგალითად, „კომპიუტერი“), რომელიც გამოჩნდება ბრაუზერის ფანჯრის ზედა რიგში. ვებ გვერდების სახელები უნდა შეიცვალოს, რადგან ისინი პირველად ანალიზდება ხმის სისტემებით.

აკონტროლეთ საკვები

1. რა ტეგები (კონტეინერები) არის აუცილებლად HTML დოკუმენტში? როგორია ვებ გვერდის ლოგიკური სტრუქტურა?

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

ტექსტის ფორმატირება ვებსაიტზე

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

სათაურები.სათაურის შრიფტის ზომები მითითებულია ტეგების წყვილებში<Н1>(ყველაზე დიდი) მდე<Н6>(უახლოესი).

შრიფტი.ეს ტეგები შეიცავს ატრიბუტებს, როგორიცაა ავტორიტეტების სახელები და შეუძლიათ მიიღონ სიმღერის მნიშვნელობა. FONT ტეგის და ამ ატრიბუტების გამოყენებით, შეგიძლიათ დააყენოთ პარამეტრები შრიფტის ფორმატირებისთვის. FACE ატრიბუტი საშუალებას გაძლევთ დააყენოთ შრიფტის შრიფტი (მაგალითად, FACE="Arial"), SIZE ატრიბუტი გაძლევთ საშუალებას დააყენოთ შრიფტის ზომა (მაგალითად, SIZE=4).

COLOR ატრიბუტი გაძლევთ საშუალებას დააყენოთ შრიფტის ფერი (მაგალითად, C0L0R="ლურჯი"). COLOR ატრიბუტის მნიშვნელობები შეიძლება დაყენდეს ფერის სახელზე (მაგალითად, "წითელი", "მწვანე", "ლურჯი" და ა.შ.) ან ნებისმიერ მეთექვსმეტე მნიშვნელობაზე.

მეთექვსმეტე ციფრი წარმოდგენილია კოლორისტული RGB ფორმატით "#RRGGBB", სადაც პირველი ორი მეთექვსმეტე ციფრი ადგენს წითელის (წითელი) ინტენსივობას, ორი ციფრი - მწვანეს (მწვანე) და დანარჩენი ორი ციფრი ადგენს ინტენსივობას. ლურჯი (blue) ფერი. ფერის მინიმალური ინტენსივობა მითითებულია თექვსმეტობითი რიცხვით 00, ხოლო მაქსიმალური - FF. მაგალითად, ლურჯი ფერი ენიჭება მნიშვნელობას "#0000FF".

ტექსტის გადამოწმება. ALIGN ატრიბუტი გაძლევთ საშუალებას დააყენოთ ტექსტის გასწორების მეთოდი. მარცხნივ განლაგება მითითებულია შემდეგნაირად: ALlGN=მარცხნივ, მარჯვენა სწორება: ALIGN=მარჯვნივ, ცენტრის გასწორება: ALIGN=ცენტრში.

ამრიგად, სათაურის ლურჯი ფერი, რომელიც გასწორებულია ცენტრში, შეიძლება დაყენდეს შემდეგნაირად:


<Н1 ALIGN="center">კომპიუტერი და PZ

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

.

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

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

<Р ALIGN="left">ამ საიტზე შეგიძლიათ იპოვოთ სხვადასხვა ინფორმაცია კომპიუტერის, მისი პროგრამული უზრუნველყოფის და კომპიუტერის კომპონენტების ფასების შესახებ.
<Р ALIGN= "right">კომპიუტერული ტერმინების გაცნობაში დაგეხმარებათ ტერმინოლოგიური ლექსიკონი, ასევე შეძლებთ ფორმის შევსებას.

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


<Н1 ALIGN="center">
კომპიუტერი და PZ



<Р ALIGN="left">რომელ საიტზე...
<Р ALIGN ="right">ტერმინოლოგიური ლექსიკონი
...
ბრინჯი. 6.27. ვებ გვერდი "კომპიუტერი" ფორმატირებული ტექსტით

აკონტროლეთ საკვები

1. რა ტეგები (კონტეინერები) გამოიყენება სათაურებისთვის? შრიფტის ფორმატირება? აბზაცების შესავალი?

დარბაზი დამოუკიდებელი გამარჯვებულისთვის

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

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

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

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

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

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

პატარას პოზიცია ტექსტის მიხედვით. ALIGN ატრიბუტი, რომელსაც შეუძლია მიიღოს ხუთი განსხვავებული მნიშვნელობა: TOP (ზემოდან), MIDDLE (შუა), BOTTOM (ქვემოთ), LEFT (მარცხენა) და RIGHT (მარჯვენა), საშუალებას გაძლევთ განათავსოთ პატარა ობიექტები ტექსტში სხვადასხვა გზები.

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

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

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

აკონტროლეთ საკვები

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

დარბაზი დამოუკიდებელი გამარჯვებულისთვის

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

ჰიპერენერგია ვებ საიტებზე

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

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

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">პოკაჟჩიკი პოზილანნია

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

  • სანამ თქვენს ბრაუზერში სურათს უყურებთ:
    <А HREF="picture.jpg">გამოსახულება
  • ბრაუზერში ჩატვირთული პროგრამისტის გაშვებამდე და ხმის ფაილის შექმნამდე:
    <А HREF="sound.wav">ხმა
  • თქვენს ადგილობრივ კომპიუტერზე ფაილის შესანახად თქვენს ბრაუზერში დაინსტალირებული ფაილების შენახვის მენეჯერის გამოყენებით:
    <А HREF="Apxив.ziр">Enchant ფაილი

ნავიგაციის პანელი საიტზე.შექმენით საქაღალდე "კომპიუტერის" საიტისთვის და დაამატეთ ცარიელი გვერდები საიტზე "პროგრამები", "ლექსიკა", "შევსება" და "კითხვარი". ჩვენ მათ ვინახავთ ფაილებში, სახელწოდებით software.htm, glossary.htm, hardware.htm და anketa.htm ჩვენს საიტზე. ასეთი "ცარიელი" გვერდები არის სათაურების დამნაშავე, მაგრამ ამ დროისთვის შეიძლება არ შეიცვალოს:



<ТITLЕ>გვერდის სათაური


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

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

ჩადეთ HTML კოდი, რომელიც ქმნის ნავიგაციის ზოლს საიტის მთავარ გვერდზე:

<Р ALIGN="center">
[<А HREF="software . htm">პროგრამა] 
[ლექსიკა]  
[სრულდება] 
[პროფილი]

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

, რომელიც მიუთითებს აბზაცის სტილზე, მისამართის ჩასმა:


<А HREF="mailto:[ელფოსტა დაცულია]"ელ.ფოსტა:
[ელფოსტა დაცულია]

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

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

აკონტროლეთ საკვები

1. რომელი ტეგი და ატრიბუტები გამოიყენება ჰიპერძალის შესაქმნელად?

დარბაზი დამოუკიდებელი გამარჯვებულისთვის

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

სიები ვებსაიტებზე

ხშირად ვებ გვერდებზე ტექსტის განთავსებისას, ხელით აირჩიეთ სიები სხვადასხვა ვარიანტებიდან:

  • დანომრილი სიები, როდესაც სიის ელემენტები იდენტიფიცირებულია რიცხვებით;

  • მონიშნული სიები, თუ სიის ელემენტები იდენტიფიცირებულია დახმარებისთვის სპეციალური პერსონაჟები(მარკერივი);

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

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

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

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


        < LI >სისტემური პროგრამები
        < LI >აპლიკაციის პროგრამები
        < LI >პროგრამირების სისტემები

      მონიშნული სიები.მარკირების სია ნაჩვენებია კონტეინერის შუაში და სიის თითოეული ელემენტი მითითებულია ეტიკეტით< LI >. დამატებითი დახმარებისთვის TYPE ტეგის ატრიბუტთან დაკავშირებით

        თქვენ შეგიძლიათ დააყენოთ მარკერის ტიპი სიისთვის: "დისკი" (დისკი), "კვადრატი" (კვადრატი) ან "წრე" (წრე):

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

        ძირითადი დანომრილი სიის სხვა ელემენტში ჩადეთ მარკირების სია (სურ. 6.30).

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

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

        წარმოგიდგენთ ვებ გვერდს „გლოსარი“ კომპიუტერული ტერმინების ლექსიკონის სახით (ნახ. 6.31):


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

        აკონტროლეთ საკვები

        1. რა ნიშნები გამოიყენება დანომრილი სიების შესაქმნელად? მონიშნული სიები?

        დარბაზი დამოუკიდებელი გამარჯვებულისთვის

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

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

    		•