[მუსიკის დაკვრა] 

დავით J Malan: ეს არის CS50 და ეს არის დაწყების კვირაში 7. ასე რომ, მივესალმებით უკან. თქვენ შეიძლება გავიხსენოთ, რომ პრობლემა მითითებული ოთხი, იყო ცოტა scavenger hunt ზოგიერთი ზღაპრული პრიზები, რომლის დროსაც მას შემდეგ, რაც ფეხზე ფოტოები თანამშრომლები როგორც აქ და New Haven, თქვენ ეჭვქვეშ იპოვოს, როგორც ბევრი იმ კომპიუტერის მეცნიერები, როგორც თქვენ შეიძლება. და ჩვენ მივიღეთ მთელი bunch of წარდგინება. ეგონა, მე მინდა გაუზიაროს რამდენიმე თქვენ დღეს აქ. 

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

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

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

და სურათები აქ არის Lance ერთად კოლტონი, ერთად Skaz, თავს, და სემ. მაგრამ შემდეგ აღმოჩნდება, რომ როგორც 11:46, ასე რომ მხოლოდ ცოტა წინ, მე დავბრუნდი ჩემს ელ და ნაპოვნი რომ ჩვენ გვქონდა კიდევ ერთი წარდგენის სტუდენტის მიერ დასახელებული Bonnie რომელთა ელ თქმით, მხოლოდ ამ. არ ვაპირებ მოტყუება, მე ამით დროს კლასი. და შემდეგ განაგრძო ანიჭებენ მხოლოდ 14 ფოტო, ერთი ერიდება Lance 15. 

მაგრამ Bonnie ფოტოები, თურმე გარეთ რომ მრავალი თანამშრომელი, სემ მათ შორის, ასე რომ, ჩვენ ვფიქრობდით ყველაფერს გააკეთებს არის აღიარებს როგორც ასეთი. ასე რომ, გარდა იმისა, რომ მიღების Dropbox სივრცე, რომელიც ყველას, ვინც მონაწილეობა იღებს, ამ ორ ნაწილად ასევე მიიღოს სასიამოვნო catered ლანჩი მათთვის და მათი სექციაში თანამოაზრეების ამ ერთი კვირის განმავლობაში. ასე რომ, თქვენ მოვისმინოთ us, ლენს და Bonnie, რომ. ასე რომ, დიდი congrats მათ. ახლა, იმ თქვენ, რომლებიც როგორიცაა ლანჩი უფრო ზოგადად ვიცი, რომ CS50 ლანჩი კემბრიჯში და New Haven არის ამ პარასკევს. ტურიზმი CS50 ნახვა slash RSVP. და ახლა სიტყვა სემინარები. სხვა curricularly. ასე რომ, ჩვენ უახლოვდებოდა წერტილი სემესტრის სადაც თქვენ უნდა დაიწყოს ფიქრი საბოლოო პროექტები. და სინამდვილეში, უბრალოდ ცოტა, იქნება ე.წ. წინასწარი წინადადებები იყოს გამო. ასე რომ, წინასწარ წინადადებები ნიშნავდა იქნება საკმაოდ დაბალი გავლენა და მართლაც უბრალოდ შესაძლებლობა თქვენ შესაქმნელად მოკლე შენიშვნა თქვენი სწავლების თანამემამულე, რომ აუხსნან მას, თუ რას ფიქრობს ალბათ გსურთ თქვენი საბოლოო პროექტი. 

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

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

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

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

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

ინდექსი, yeah. ასე რომ, ძირითადად გვერდზე. ასე რომ, თუ თქვენ არ დააკონკრეტა ფაილი ასახელებს, როგორც ჩვენ დავიწყებთ, თქვენ რეალურად მხოლოდ მოთხოვნის მომეცი ნაგულისხმები გვერდი Facebook ან მომეცი ჩემი inbox ან მისცეს მე default გვერდი ახალი ამბები CNN- ის ვებგვერდზე ან მოსწონს. და სერვერზე მაშინ პასუხობს რომ გაგზავნა რაღაც მოსწონს ეს და განაცხადა, რომ დიახ, მე საუბარი HTTP ვერსია 1.1. 

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

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

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

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

და ეს ცოტა გადაჭარბებული ერთი შეხედვით აქ. მაგრამ რა მე ვაპირებ, რომ ნება მე გამარტივება ცოტა. მე ვაპირებ ჩართოთ ჩაწერა ნათელი, ასე, რომ ეს არის წითელი. და მე ვაპირებ ვთქვა შეინარჩუნოს ჟურნალი. და ეს არის მხოლოდ მცირე რაც მე figured out დროთა განმავლობაში, რომ ის აპირებს გადარჩენა ყველაფერი, რაც ხდება ბრაუზერში. და ახლა მე ვაპირებ წავიდეთ რომ http://facebook.com. 

რეალურად, მოდით გავაკეთოთ www კარგი ღონისძიება, ხაზი. შეიტანეთ. ასე რომ, URL, რომ ბევრი თქვენ ალბათ ეწვია. ახლა Facebook- ის ვებ გვერდი მოდის ზედა. და შემდეგ მთელი bunch პერსონალის გაფრინდა ბოლოში. და სინამდვილეში, გამოდის, რომ როდესაც თქვენ ეწვევა Facebook.com, თქვენ არა მხოლოდ მიღების ერთი HTTP მოთხოვნის, გამოდის, რომ აპირებს Facebook.com აგზავნის 41 იმ კონვერტები, თითოეული საკუთარი მისაღებად მოთხოვნა, როგორც მითითებულია, თუმცა უკან ეკრანზე აქ, ბოლოში ეკრანზე, ეს მიუთითებს იმაზე, რომ, მართლაც, ჩემი ბრაუზერის 41 მოითხოვს. 

და სულ მას გადაეცემა 861 kilobytes და დასჭირდა რატომღაც რაც რვა წამში ჩამოტვირთოთ ყველა რომ. ასე რომ, რეალურად ცოტა უცნაური რომ Facebook- ის საიტი მიიღებს, რომ ხანგრძლივი, მაგრამ ასე იქნება ეს ამ შემთხვევაში. ახლა, ეს ყველაფერი მე ნამდვილად არ მაინტერესებს, შესახებ, გარდა იმ უმაღლეს მოთხოვნით. მოდით წასვლა ეს ერთი აქ და ნება მომეცით დააშორებს რაღაც მომენტში. 

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

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

მაგრამ ეს მეორე ბოლო ერთი იქ, შეამჩნევთ, რომ Facebook.com ის სერვერზე, მართლაც განაცხადა, აქ მოდის ზოგიერთი ტექსტი HTML. ასე რომ, ეს ყველაფერი არის იმის თქმა, რომ როდესაც თქვენ მოითხოვოს ვებ გვერდი ბრაუზერის, რომ სერვერზე, რომ სერვერზე პასუხობს ერთად კონვერტში საკუთარი შიგნით რაც არის ტექსტი. სხვა სიტყვებით, HTML. HyperText Markup Language. რომელიც კიდევ ერთი ენა რომ ჩვენ დანერგვა დღეს რომ ადამიანები ან კომპიუტერი წარმოქმნის განხორციელების მიზნით ვებ გვერდებზე. 

კერძოდ, მოდით შევხედოთ ამ. მე ვაპირებ ახლა დავუბრუნდეთ Facebook- ის საიტზე. და მე ვაპირებ კონტროლის დაჭერით ან მარჯვენა click და დააკლიკეთ გვერდის წყაროს ნახვა. და მაშინაც კი, თუ თქვენ არ გამოიყენოთ Chrome, IE შეგიძლიათ ამის გაკეთება, Firefox შეგვიძლია ამის გაკეთება, Safari შეგიძლიათ ამის გაკეთება, მიუხედავად იმისა, რომ მენიუ პარამეტრები შეიძლება ცოტა განსხვავებული. და ეს არის HTML, რომ ჩანაწერები და კომპანია Facebook- ზე დაწერილი. 

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

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

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

უფლება, ეს არის, როგორც ერთი ხუთიდან სტილი. არსებობს მყარი საფუძველი მათთვის მოჭრა ამ კუთხეში. ყველა უფლება, ასე რომ მათ არ სურთ, რომ გაუადვილოს თქვენ წაიკითხავს. ასე რომ, გარკვეული აზრით, ისინი obfuscating ეს, ერთგვარი scrambling ეს მინიმუმ ესთეტიურად ასე ის, რომ უფრო რთული სასწავლებელი წასვლა და დააკოპიროთ off მათი მთავარ გვერდზე და HTML იგი. გამოდის, რომ ერთად პროგრამები მიუხედავად იმისა, რომ მათ შორის Chrome, ჩვენ შეგვიძლია გაწმენდა ამ up super ადვილად. ასე რომ, ეს არ არის, რომ, როგორც მიზეზი. რა შეიძლება იყოს მიზეზი. ჰო. ჰო, თეთრი სივრცე ხარჯები მონაცემები. რას გულისხმობთ? ჰო, ზუსტად. თუ თქვენ მოხვდა Tab გასაღები ბევრი ან ბარი, გაიაზრონ. ასე რომ, ყოველ კლავიშს არის [INAUDIBLE] წარმოდგენილია როგორც ერთი ბაიტი. 

ამიტომ ვარაუდობენ, რომ მარკ ან რომელიმე devs ამ დღეებში ჰიტები spacebar მხოლოდ ერთხელ ამ HTML გვერდი, რომ წარმოადგენს Facebook ს მთავარ გვერდზე. და Facebook- ს აქვს ბევრი მომხმარებელთა ამ დღეებში. ამიტომ ვარაუდობენ, რომ Facebook- ის მთავარ სტუმრობს მილიარდი ადამიანი. და ვინმე Facebook- ზე აქვს მოხვდა სივრცეში ბარი მხოლოდ ერთხელ. 

ასე რომ, ერთი დამატებითი byte, მილიარდი მოითხოვს, რამდენად მეტი მონაცემები არის Facebook გადაცემის ინტერნეტში იმიტომ, რომ ვიღაცას მოხვდა spacebar მის კლავიატურის? მილიარდი bytes, ან ერთი გბ მონაცემები იგზავნება Facebook სერვერები მთელს მსოფლიოში არის კარგი მიზეზი. ახლა, რომ მხოლოდ ერთი სივრცეში. 

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

მაგრამ დღეს, ჩვენ დავიწყებთ წერა კოდი ეს არის რეალურად იკითხება ჩვენთვის ადამიანები. გამოდის, თუმცა, თუ უკან ამ იარაღს Chrome შეამოწმოს ელემენტის, ადრე ვიყავით ქსელის tab. გამოდის, რომ თუ წასვლა ელემენტები tab, რაც თქვენ რეალურად ვხედავ არის Chrome საკმაოდ დაბეჭდილი ვერსია, რომ იგივე HTML. ასე რომ, ჩვენ deobfuscated იგი. ასე რომ, ეს არის მატჩი კომპიუტერი. ახლა თქვენ შეგიძლიათ რეალურად დააჭირეთ გარშემო და დაიწყოს იმისათვის, რომ ნახოთ იერარქია, რომელიც არის ვებ-გვერდზე. მოდით რეალურად ამის გაკეთება. მე ვაპირებ წავიდეთ წინ და გაიხსნას ჩემი Mac პროგრამა მოუწოდა ტექსტის რედაქტირება. და გავიხსენოთ, რომ ეს არის მხოლოდ სუპერ მარტივი ტექსტი პროგრამა. Windows აქვს Notepad.exe. და მე ვაპირებ Verbatim აკრიფოთ შემდეგ. Doc ტიპის HTML, ღია bracket HTML, დახურული ფრჩხილი HTML, ჩვენ ხელმძღვანელი გვერდი აქ, ბოლოს ხელმძღვანელი გვერდზე აქ, სათაური იქნება, hello მსოფლიოში. 

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

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

და ამის გაკეთება, მე ვაპირებ წავიდეთ წინ და გახსენით cloud 9. ასე რომ, ღრუბელი 9 რა თქმა უნდა, Cloud დაფუძნებული service-- CS50 IDE-- რომ ყველა ჩვენი სამუშაო გაშვებული სადღაც ინტერნეტში. ეს კი იმას ნიშნავს, რომ ყველა ჩვენი ფაილი საჯაროდ ხელმისაწვდომი უკვე. მოდით წავიდეთ წინ და ამის გაკეთება. მე ვაპირებ წავიდეთ წინ და შექმნა ახალი ფაილი NCS50IDE. მე ვაპირებ გადარჩენა, როგორც ადრე როგორც hello.html და დააჭირეთ გადარჩენა. და ახლა მხოლოდ დროისა, მე ვაპირებ წავიდეთ წინ და ასლი ჩასვით ეს კოდი ვიდრე გაიმეორეთ იგი. და შენახვა. ასე რომ, ახლა მე მაქვს ფაილი სახელად hello.html. მაგრამ როგორ შემიძლია რეალურად გახსნას, როგორც ვებ-გვერდი? ისე, თურმე აგებული CS50 IDE არის არა მხოლოდ შემდგენელი მოსწონს clang და debugger მოსწონს GDB და მტევნების სხვა პროგრამები, იქ რეალურად სრულფასოვანი ვებ სერვერი გაშვებულია ფარგლებში CS50 IDE. 

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

და ჩვენ გახადა ცოტა ადვილი გამოყენება CS50IDE უწოდა Apache 50. ასე რომ, მას შეუძლია რეალურად მესმის შემდეგ. მე ვაპირებ ვთქვა Apache 50 დასაწყისია. და მაშინ მე უბრალოდ აპირებს ამბობენ dot. და ჩვენ ვხედავთ რამოდენიმე გარკვეულწილად arcane გაგზავნა ამბობდა, შექმნის Apache დოკუმენტის [? ჯგუფი?] სახლში, ubuntu, რასაც არ არის, სლეში გარემოს. დასაწყისი ვებ სერვერი Apache 2 წარმატებით. 

ასე რომ, მოკლედ, მე ახლახან მივიღებთ ღილაკს და აღმოჩნდა სერვერზე, რომელიც ახლა მოსმენის ინტერნეტ TCP პორტი 80 კონკრეტულ მისამართზე. და ეს ამბობს აქ, და ეს შეიცვლება ბაზაზე თქვენი სახელი და სხვა ფაქტორები, მაგრამ შეამჩნია, ახლა თუ მე დააჭირეთ, IDE50 dot jharvard და ასე და ასე რომ, შეამჩნევთ, რომ მთელი ამ დროის განმავლობაში ბოლო რამდენიმე კვირის განმავლობაში, ალბათ შენიშნა, რომ საკუთარი სახელი ჩართული ზედა მარჯვენა კუთხეში CS50IDE. 

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

და შენიშნავს, რომ მე ვხედავ საკმაოდ მახინჯი ინდექსი, დირექტორია ჩამონათვალი, მაგრამ რა ფაილი გადასვლა out at თქვენ ალბათ? Hello.html. ეს იმიტომ, რომ მე გადაარჩინა ფაილი ჩემი სამუშაო. და რა მე ვუთხარი Apache ვებ სერვერის არის გამოიყურება დავით სამუშაო გარემოს დირექტორია. და ყველას, ვისაც მსოფლიოში ვხედავთ იმ ფაილებს. 

და მართლაც, თუ მე ახლა დააწკაპუნეთ hello.html, მე ვხედავ ამ tab ზუსტად რომ ფაილი. ახლა შეამჩნია, ღრუბელი 9 აკეთებს რაღაც პატარა სასარგებლო ჩვენთვის. ფარგლებში CS50 IDE, შეამჩნია მოულოდნელად სამისამართო. ეს იმიტომ, რომ მიუხედავად იმისა, რომ ჩვენ გამოყენებით Chrome ეწვევა CS50IDE, შიგნით CS50IDE არის საკუთარი მობილური ვებ ბრაუზერი ახლა. და ასე, ვიდრე გაართულებს რამ, როგორც ასეთი, მე ვაპირებ წავიდეთ წინ და გადააკოპირეთ ამ URL. მე ვაპირებ წავიდეთ წინ და მხოლოდ გახსნა საკუთარი Chrome ფანჯარა. ასე რომ არ არსებობს ჯადოსნური აქ, არ CS50IDE. მე უბრალოდ აპირებს ფაქტიურად ჩასვით ჩემი J ჰარვარდის URL და დააჭიროთ. და voila, ახლა მე და თეორიულად, ყველას ინტერნეტში, თუ მე კონფიგურაცია ნებართვების შესაბამისად, შეგიძლიათ ეწვიოთ ამ ფაილი. და ახლა, თუ მე ვთქვი hello.html, voila, იქ ჩემი წარმოუდგენლად underwhelming ვებ-გვერდზე. მოდით გავაკეთოთ სწრაფი საღი აზრის ქვითარი. იმის გამო, რომ ყველა იმ არის კონცეპტუალური შეიქმნა. და ჩვენ, ფაქტობრივად, არ არის ნამდვილად ასწავლიდა, თუ როგორ უნდა დაწეროთ HTML თავისთავად. ნებისმიერი კითხვები დღემდე იმაზე, თუ რა მოხდა? დიახ. ამჯამად CS50 ფლობს ამ ვებ გვერდებზე? რა გაგებით? კარგი კითხვაა. ასე რომ, CS50 ის ფლობს CS50.io. ჩვენ მართლაც შეიძინა, რომ დომენი. და ბუნებით თქვენ ბიჭები შესვლის CS50IDE, თქვენ მიიღოს ყველა რასაც ქვე. 

ასე რომ, IDE50-Malan, ან IDE50-Rob.CS50.io, ეს არის თქვენი უნიკალური მისამართი ფარგლებში ჩვენი დომენი. ასე რომ, იმ მიზნით, რა თქმა უნდა, თქვენ გაქვთ თქვენი საკუთარი უნიკალური მისამართზე. მაგრამ ჩვენ გამარტივებული რამ ყიდვის ზედა დონის დომენი, CS50 dot I / O და მერე ყველას შიგნით რომ, ასე ვთქვათ. ჩვენ დავბრუნდებით, რომ რამდენიმე კვირის განმავლობაში, ალბათ, განსაკუთრებით საბოლოო პროექტი დრო, როდესაც თქვენ დაგვჭირდება მისაღებად საკუთარი დომენები. ეს, ფაქტობრივად, შედარებით პირდაპირი. ყველა უფლება. მოდით ახლა ამის გაკეთება. მე ვაპირებ დაბრუნდეს CS50IDE, სადაც ჩემი ფაილი ახლა, hello.html, არ არის ყველა, რომ საინტერესო. მე მინდა, რომ რამე ცოტა გავალამაზოთ, ვიდრე. ამიტომ, მე ვაპირებ, რომ რამე მოსწონს ეს. მიადევნე თვალი ღია paragraphs.html. ასე რომ, ეს არის ფაილი დავწერე წინასწარ. ზედა, ისევე როგორც ყოველთვის, ჩვენ გვაქვს კომენტარი. მაგრამ HTML, კომენტარები გამოიყურება ცოტა განსხვავებული. On line სამი და ხაზი 14, თქვენ იხილეთ სინტაქსი დაიწყოს კომენტარი და დასრულდება კომენტარი. 

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

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

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

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

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

თქვენ უბრალოდ პრეფიქსი იგივე ტეგით ს ასახელებს ნაბიჯია ირიბის მოსწონს ეს. ყველა უფლება. ასე არ არის, რომ საინტერესო. და სინამდვილეში, ჩვენ არ მიღების ვებ ყველა, რომ უფრო საინტერესო. რა მოხდება, თუ მინდა, რომ რამ უფრო დიდი და თამამი? გამოდის, რომ აქ არის მაგალითი ამ headings.html, სადაც ჩემი სხეული, მაქვს H1 tag, H2, H3, ოთხი, ხუთი, ექვსი, რაც როგორც ჩანს, საკმაოდ arcane. მაგრამ თუ მე გახსნა მაგალითად, მოდით შევხედოთ. Headings.html. 

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

როგორ წავიდეთ შესახებ ამით? ისე, შევხედოთ list.html. აქ, ჩვენ ვხედავთ, ცოტა funkiness მაგრამ მოდით განიხილავს, თუ რა ხდება. ასე რომ, რის საფუძველზე თქვენ უბრალოდ ჩანს, UL დგას უწესრიგო სია. უწესრიგო სია უბრალოდ ნიშნავს ბურთულებიანი. არ არსებობს ნომრები. არსებობს ასევე რაღაც მოუწოდა უბრძანა სიაში, რომელიც OL at აქვს. მაშინ LI, ხაზი არის ყველა ნიშნავს. 

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

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

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

ასე რომ, აქ ჩვენ გვაქვს იმიჯი Google Images. და მოდით ვივარაუდოთ, რომ ეს არის გონივრულად ყველგან ინტერნეტში. ამიტომ, მე ვაპირებ, რომ ვივარაუდოთ, რომ ეს OK ჩემთვის რეალურად დააყენოს ამ ჩემს ვებ-გვერდზე. მე ვაპირებ წავიდეთ წინ და ასლი სურათის URL. და ახლა თუ მე დაბრუნდეს Cloud 9, ვნახოთ, რა შეგვიძლია გავაკეთოთ აქ. ასე რომ, აქ არის მხოლოდ ვებ-გვერდზე. ეს არის Rick Astley, haha, მე ვაპირებ ახლა დავუბრუნდეთ ჩემს ბრაუზერში, განაახლეთ, და საინტერესოა. 

სად არის Rick? ასე რომ, ვნახოთ, რა მოხდა. სინამდვილეში, მე ვაპირებ პრეტენზია, როგორიც მე არ გაგვაჩნია. [INAUDIBLE] მას აქ. ჩვენ დავბრუნდებით, რომ ამ მომენტში. ასე რომ, აქ rick.html. ასე რომ არ არის Rick Astley. გამოდის, რომ ჩვენ შეგვიძლია რეალურად დაამატოთ მას აქ. ეს არის Rick Astley. მე ვაპირებ ვთქვა, მომეცი სურათი, რომლის წყაროს URL მე უბრალოდ აკოპირებთ, რომელიც როგორც ჩანს ბედნიერი დაბადების დღე რაღაც ან სხვა. 

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

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

ასე რომ, თუ მე ახლა განაახლეთ ეს ფაილი, ახლა მაქვს კარგი ვებ გვერდზე სამზარეულო აქ. და შეგვეძლო რა თქმა უნდა, მართლაც ხალხის ნერვების მოშლის მიერ დანერგილი ნაცვლად როგორიცაა YouTube ბმული. და სინამდვილეში, ნებისმიერ დროს თქვენ ოდესმე წავიდა YouTube, და ნება მომეცით რეალურად შემთხვევით rick გააფართოვოს თავს აქ. ასე რომ, Rick როლი. ასე რომ, rick roll-- მე ვაპირებ აქ. 

[მუსიკის დაკვრა] 

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

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

და ეს არის კიდევ ნაჭერი სინტაქსი HTML. გარდა იმისა, რომ აქვს ის სახელი, ღია bracket tag სახელი, თქვენ შეგიძლიათ აკონტროლოთ ქცევის tag მიერ, რომელსაც მთელი bunch of ატრიბუტი შეადგენს ღირებულება. ატრიბუტი შეადგენს ღირებულება. ასე რომ, მაგალითად, YouTube გვეუბნება თუ გვინდა, სიგანე ეს ვიდეო უნდა იყოს 420 პიქსელი და სიმაღლე უნდა იყოს 315 პიქსელი, რომ თუ როგორ გამოხატოს ის HTML. 

წყარო ვიდეო აპირებს უნდა იყოს, რომ ხანგრძლივი YouTube URL და მაშინ რაიმე სხვა პერსონალი მსგავსი ჩარჩოს საზღვრის ნულოვანი, ასე რომ, ალბათ იმას ნიშნავს, არსებობს არ საზღვრის გარშემო რამ. ნება სრულ ეკრანზე ალბათ იმას ნიშნავს, რომ მომხმარებლები შეგიძლიათ დააჭიროთ ღილაკს და რეალურად სრულ ეკრანზე ვიდეო. ასე რომ, თუ მე ნამდვილად მინდა, რომ იყოს შთამბეჭდავი აქ Rick dot HTML, იმის ნაცვლად, რომ იმიჯი აქვს, მოდით მე წაშლა, რომ ნაცვლად ჩასვით ეს. ახლა განაახლეთ. და აი ახლა ჩვენ წავიდეთ ერთხელ. ყველა უფლება, რომ საკმარისია. ყველა უფლება, ამიტომ შევეცდები რთული არ უნდა გავაკეთოთ, რომ კიდევ ერთხელ. ასე რომ, რა არის რამდენიმე takeaways აქ? ასე რომ, HTML, როგორც მახინჯი როგორც ამ ვებ გვერდები , არის რეალურად საკმაოდ მარტივია. ეს არ არის პროგრამირების ენა. მას არ აქვს ფუნქციები. მას არ აქვს მარყუჟების. ეს არ უნდა პირობებს. ყველა ეს არის ათეულობით სხვადასხვა tags, რომელთაგან თითოეული ნულოვანი ან მეტი ატრიბუტები. და სინამდვილეში, რა არის fun შესახებ HTML, როგორც თქვენ დაიწყოს ჩაყვინთვის შევიდა ის არის, რომ ძალიან თვითმმართველობის ვსწავლობთ. 

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

ასე რომ, ჩვენ შეგვიძლია გავაკეთოთ გამოსახულება ასევე. და სინამდვილეში, ჩვენ ეს გავაკეთეთ მომენტში წინ. ნება მომეცით წავიდეთ წინ და უბრალოდ გაჩვენებთ. აქ არის რამდენიმე ნიმუში კოდი. თუ თქვენ ოდესმე გვინდა, რომ Grumpy Cat. ასე რომ შეამჩნია, რომ მე არ შემიძლია აქვს იმიჯი tag აქ. და მაქვს კომენტარი ზემოთ. მაქვს ალტერნატივა ტექსტის ხელმისაწვდომობას. ასე რომ, ვინც არის გამოყენებით ეკრანზე მკითხველს მიზეზით დანახვაზე შეიძლება რეალურად მაშინ აქვს მათი ეკრანზე მკითხველი ამბობენ, Grumpy Cat. იმიტომ, რომ თუ მათ არ შეუძლიათ ვხედავ გამოსახულების, ისინი შეიძლება მაინც აქვს თავისი კომპიუტერული ვუთხრა, სიტყვიერი, რა არის. და წყაროს რომ ფაილი cat.jpeg. ასე რომ, ფაქტობრივად, თუ მე ნამდვილად მინდოდა მიიღეთ ჭკვიანი, რა შეიძლება ჰქონდეს done-- მე გპირდებით, რომ არ წავიდეს Rick Astley, ასე რომ მე ვაპირებ google კატა ნაცვლად. და თუ მე წასვლა Google Images აქ, და ჩვენ ვივარაუდოთ, რომ ეს არის სურათი ჩემი კატა. 

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

იმის გამო, რომ ჩვენ უკვე მოცემული cat.jpeg ფაილი, მაგრამ ეს არის სუპერ მარტივი დაიბრუნოს ფოტო, რომელიც თქვენ აღებული Facebook ან Flickr ან მოსწონს და რეალურად გადააადგილება ის შევიდა Cloud 9 და შემდეგ ეს ნაწილი საკუთარი პირადი ნახვა ან პრობლემა შვიდი ან რვა, როგორც ჩვენ მალე. და მაშინ, როდესაც ბოლოს ეწვევა, რომ კატა, ვთქვათ, მე გადმოწერილი, რომ იგივე კატა, შენიშნავს, რომ, რომელიც იყო adorable. 

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

ჩვენ დღემდე მოაქვთ ძალიან სტატიკური ვებ გვერდები. მინდა Spice რამ up ასეთია. მე მინდა, რომ ჩემი საკუთარი საძიებო სისტემა. ასე რომ, რათა საძიებო სისტემა, მოდით წავიდეთ წინ და დავიწყოთ ამით. მე ვაპირებ წავიდეთ წინ და შევქმნათ ახალი ფაილი სახელად search.html. და ჩვენ არ prefabed ვერსიები ონლაინ რეჟიმში. Whoops. ნუ ჩასვით თქვენს ტერმინალის ფანჯარაში. Prefab ვერსიები ონლაინ რეჟიმში. და მე ვაპირებ, რომ დაიწყოს ასეთია. ასე რომ, აქ დასაწყისში ფაილი სახელად search.html. მე ვაპირებ გადარჩენა ეს დღევანდელ წყაროს დირექტორია. მე ვაპირებ მოვუწოდო ამ ძებნის. სინამდვილეში, ჩვენ გვექნება უკეთესი. CS50 ძებნა და რეალურად ბრენდის. და ახლა, მე ვაპირებ ვთქვა რაღაც H1 CS50 ძებნა. და შემდეგ ქვევით აქ, H2 მალე. და მხოლოდ recap, H1 და H2 ნიშნავს, რაც, შესაბამისად? 

ჰო, ასე რომ დიდი და გაბედული, და არ არის ისეთი დიდი, მაგრამ მაინც თამამი. ასე რომ, თუ მე გადარჩენა და წავიდეთ მეტი აქ, ვნახოთ ფაილი search.html. ყველა უფლება, და ეს ერთი არის right-- [INAUDIBLE]. ლოდინის. დავით დაბნეული. ოჰ, ეს უფლება არსებობს. დავით არის იდიოტი. OK. ასე რომ, ეს არის. ასე რომ, CS50 ძიება მალე. ახლა, მოდით სინთეზის რაც ჩვენ გავაკეთეთ გასულ კვირას. 

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

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

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

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

მინდა spice ეს შემდგომში. ასე რომ, CS50 ძებნა. ნება მომეცით შექმნას საკუთარი ლოგო. ეს გამოიყურება ლამაზი. ასე რომ, ახლა ნება მომეცით გადარჩენა ამ as-- მოდის. სად არის ის აპირებს? არსებობს. OK. ააცილა. შეინახე როგორც. Stupid ბრაუზერები. დგას, ჩვენ ვაპირებთ დაფიქსირება ამ ერთხელ და სამუდამოდ. იქ ჩვენ წავიდეთ. ყველა უფლება. ბოდიში. Off დღეში. ახლა ეს არის ხმაურიანი. Exit სრულ ეკრანზე. ყველა უფლება. 

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

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

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

ასე მახსოვს, რაც ჩვენ გავაკეთეთ ბოლო დროს. ასე რომ, თუ თქვენ ძიება რაღაც Google და თქვენ წინასწარ გამორთულია, გავიხსენოთ, მყისიერი ძიება. ნება მომეცით გახდეს, რომ off ასე, რომ ეს რეალურად ისე იქცევა, როგორც ძველი სკოლა ბრაუზერი, თუ მე ახლა ვეძებოთ რაღაც კატა, გავიხსენოთ, რა URL ჰგავს. ეს არის საკმაოდ cryptic. მაგრამ ჩართული იქ, გავიხსენოთ, slash ძებნა. კითხვის ნიშნის რ შეადგენს კატა. 

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

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

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

და იმიტომ, რომ ჩემს ბრაუზერში ესმის HTTP, რეალურად მშენებლობა URL ისე, რომ ის, რაც მე დასრულდება მდე მეტი ჩემს ბრაუზერში, შეამჩნია, რა ხდება როდესაც მე ჩხრეკა ძაღლი. თუ მე დააჭირეთ ძებნა შეამჩნევთ, რომ URL, იცვლება ვაპირებდი რომ google.com/search~~V შეკითხვის ტოლია ძაღლი. და ეს იმიტომ, რომ ფორმა იცის, იმიტომ, რომ მეთოდი მისაღებად, უბრალოდ ის ემატება, რომ URL არსებობს. 

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

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

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

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

Copyright სიმბოლო ჯონ ჰარვარდის. და ვფიქრობ, მინდა პირველი იმ ხაზები, რომ საკმაოდ დიდი. 36 pixels. ასე რომ, წესიერი ზომა. და მინდოდა მისი წონა უნდა იყოს გაბედული. მაგრამ შემდეგ ქვემოთ, მინდა პატარა ტექსტი. და ქვემოთ რომ, მინდა კი პატარა ტექსტი. ბოდიში. დღეს იგრძნობა off დღეში. 

ახლა, რა ვარ მე აკეთებს გამოხატოს ეს? აქ on line 22 არის ჩართული div ან წყობილი div, თუ გნებავთ. ეს ძალიან აქვს საკუთარი სტილი აქვს. მე მიუთითოთ შრიფტის ზომა 36. მე მიუთითოთ შრიფტის წონა თამამი. ქვემოთ აქ, მე მხოლოდ დააკონკრეტა 24 პიქსელი. და ბოლოს, ხაზი 28, მე დააკონკრეტა 12. ასე რომ, როგორც სწრაფი საღი აზრის ქვითარი და, როგორც ადამიანის მოსმენით, რომელიც სიტყვა ეკრანზე რეალურად იქნება თამამი? რომელი ხაზები რეალურად თამამი? 

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

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

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

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

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

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

გამოდის, რომ ბევრი როგორც C, სადაც ჩვენ შეიძლება დაიწყოს ფაქტორი ზოგიერთი კოდი შევიდა header ფაილი ასე რომ, შეგვიძლია გავაკეთოთ იგივე HTML. და ნაბიჯი, რომელიც ასეთია. გაითვალისწინეთ, რომ ეს ვერსია, CSS1.html არის სტრუქტურულად ზუსტად იგივე ვებ-გვერდზე. ასე რომ, მე მივიღე მთელი bunch საქართველოს divs, მაგრამ ამ დროს, მე მიღებული ჩამოშორებას გადატანა div როგორც დაინახავთ. 

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

შემდეგ მაქვს ღია Curly გაუწიოს და დახურულ Curly გაუწიოს. ასე რომ, მსგავსი სულისკვეთება C, მაგრამ კიდევ ერთხელ, ეს არ არის ფუნქცია, ეს არის მხოლოდ სინტაქსური დეტალურად აქ. და მაშინ, რა თქმა უნდა, მე გეუბნებით ბრაუზერი, hey ბრაუზერი, რომ მთელი სხეული გვერდის აქვს ტექსტი განვიხილეთ ცენტრი. და მაშინ ეს განაცხადა, რომ შემდეგ. Hey ბრაუზერი, თუ ხედავთ HTML ელემენტის ან ტეგით გვერდზე რომ აქვს უნიკალური იდენტიფიკატორი დაბრუნება, ასე რომ hash სიმბოლო აქ მხოლოდ იმას ნიშნავს, უნიკალური იდეა დაბრუნება, წავიდეთ წინ და მისი შრიფტის ზომა 36 და მისი შრიფტის წონა თამამი. 

Hey ბრაუზერი, ელემენტს, რომლის ID არის საშუალო, რათა ის 24 პიქსელი. და hey ბრაუზერი, თუ ხედავთ იდეა ბოლოში, რათა ის 12 პიქსელი. ეფექტი ბოლოს არის ზუსტად sam. თუ მე წასვლას CSS 1, გვერდი გამოიყურება იგივე. მაგრამ ჩვენ ერთი წინ გადადგმული ნაბიჯია ოდნავ უკეთესი დიზაინი. ნება მომეცით ახლა დავუბრუნდეთ აქ CSS2 და ვნახოთ რა მე ვაკეთებ. 

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

ეს არის გზა, HTML ვთქვა, hey ბრაუზერი, წასვლა შინაარსი ფაილი სახელად css2.css. ურთიერთობა, ჩემთვის, ის არის, რომ ის სტილის ფურცელი. და მართლაც, რომ ის, რაც ერთ-ერთი S ს კასკადური სტილების საშუალებებით. ეს არის სტილის ფურცელი. ეს მხოლოდ ტექსტური ფაილი მთელი bunch of ქონება. ეს არის მთელი bunch of სტილის რომ გსურთ ვრცელდება გვერდზე. 

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

ჩვენ არ გაუმჯობესდა გვერდი სტილისტურად, ეს მხოლოდ უკეთესი დიზაინი გარკვეული. რატომ ფიქრობ? ჰო. უფრო მოქნილი როგორ? ჰო. ასე რომ, თუ გსურთ წასვლა უკან და შეცვალოს, ახლა, თქვენ გაქვთ ერთი ადგილი სადაც თქვენ შეგიძლიათ შეცვალოთ რამ. და სინამდვილეში, რაღაც როგორიცაა პრობლემის მითითებული შვიდი, სადაც ჩვენ განხორციელება სავაჭრო ნახვა, რომ აპირებს აქვს მთელი bunch of გვერდებზე. და ეს იქნება ნამდვილად შემაშფოთებელი, თუ თქვენ გადაწყვიტეთ, hm, მე ნამდვილად არ მინდა 24 pixels, მინდა ეს უნდა იყოს 28 პიქსელი ან ოდნავ დიდი. და მაშინ უნდა გავაკეთოთ გლობალური იპოვოს და შეცვლის ან გახსნას ყველა თქვენი საიტის ფაილები უბრალოდ რეალურად შეცვალოს ერთი ღირებულების. By ფაქტორინგული ამ სტილის ერთ ცენტრალურ ადგილას, თქვენ შეგიძლიათ გახსნათ ერთი ტექსტური ფაილი ამ CS50IDE ნებისმიერ პროგრამა შეცვლის, შენახვა, და კეთდება. შენ გავრცელდა იმ ცვლილებები ყველგან. და ეს იქნება იგივე ამ dot თ ფაილი, ასევე. ასე რომ ნებისმიერი ამდენად, რამდენადაც ამ syntax? ყველა უფლება, ჩვენ ყველაფერი გააკეთა, რაც, როგორც ჩანს, გარდა რეალურად განახორციელოს ბმულებს. ასე რომ, მოდით წავიდეთ წინ და ამის გაკეთება. ნება მომეცით წავიდეთ წინ და შექმნა ახალი ფაილი აქ. მე ვაპირებ მოვუწოდო მას link.html, დააყენა დღევანდელი კოდი. 

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

მე უნდა ორგანოს ჩემი ვებ გვერდი აქ. და აქ, a href შეადგენს მოდით ვთქვათ HTTP://www.disney.com და ჩემი საყვარელი საიტი, ჩვენ ვთქვათ. ყველა უფლება, ასე რომ ძალიან უწყინარი, მოსახერხებელი გვერდზე. თუ მე ახლა წასვლას ჩემი დირექტორია კატალოგი აქ და გახსენით link.html, ჩვენ ჰიპერ ტექსტი. 

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

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

და სინამდვილეში, თქვენ შეიძლება არ მიიღო ის, რასაც ამბობს, როგორიც დააწკაპუნეთ აქ აღადგინოთ თქვენი PayPal დაგავიწყდათ. ახლა კი, შეამჩნია, თუ ეს არ არის Disney.com მაგრამ, როგორც badplace.com და განაახლეთ, გაითვალისწინოთ, რომ ტექსტი შეიძლება ითქვას, არაფერი განაწილებაზე. და სინამდვილეში, ეს არის მხოლოდ სიტყვები. რატომ არ მე რეალურად იყოს სუპერ მუქარის და აცხადებენ, http://www.paypal.com. 

დააწკაპუნეთ აქ აღადგინოთ თქვენი PayPal დაგავიწყდათ და ახლა განაახლეთ. ეს გამოიყურება საკმაოდ ლეგიტიმური, არა? მე ვგულისხმობ, მე არ დააკლიკეთ ელ რომ უბრალოდ ამბობს, რომ ეს. მაგრამ შეამჩნევს dichotomy აქ. იგი აცხადებს, რომ www.paypal.com, და ფაქტობრივად, დაველოდოთ წუთში, ჩვენ ვიცით, რომ თქვენ გინდათ ის, უსაფრთხოებას. ასე რომ, ახლა წასვლა www.paypal.com HTTPS, მაგრამ თუ თქვენ არასოდეს კეთდება ეს ადრე, შეღწევას ჩვევა hovering მეტი პატარა ბმულები აქ. და ეს იმისთვის, რომ ვხედავ ეკრანზე არსებობს, და ეს არ არის ყველა, რომ ადვილი აქ. მაგრამ გზა ქვევით აქ პატარა პატარა კუთხეში არ ბრაუზერის რეალურად გითხრათ, რომ ჩვენ ვაპირებთ რომ badplace.com ნაცვლად Paypal.com. ახლა, სად მივდივართ ამ? ყველა მაგალითები ჩვენ გავაკეთეთ დღეს, ჩვენ რთული კოდირებული და აკრეფილი ხელით. ვებ წარმოუდგენლად უინტერესო, როდესაც თქვენ მძიმე კოდი თქვენი ვებ გვერდები, ისე, რომ შინაარსი სტატიკური და არასდროს იცვლება. რა თქმა უნდა, ყველა ჩვენი საყვარელი საიტები, დღეს, არის თუ არა ეს Gmail და Twitter ან Facebook ან ნებისმიერი რაოდენობის სხვები დინამიური. ისინი იცვლება საპასუხოდ მომხმარებლის input ისევე, როგორც Google ძიების შედეგები. 

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

[მუსიკის დაკვრა]