[Powered by Google Translate] [Недела 7, Продолжува] [Дејвид Џ Malan, Универзитетот Харвард] [Ова е CS50.] [CS50.TV] Во ред. Добредојдовте назад. Ова е CS50, и ова е крајот на недела 7. Значи еден од овие глупави малку нешта што оди низ интернет и ние slurped нагоре, и сега треба да се направи малку geeky смисла за вас. Па, тоа е funnier да овој човек отколку што беше за вас момци. Говорејќи на, добро, момци, денес е роденден на Nate. Да ви даде чувство за тоа колку добро Нејт и јас се во веб развој врз основа на класата во понеделникот и врз основа сега за ова, Мислев дека ќе се повлечат до почетната страница на Nate, ако не сте го виделе досега. Ова овде IA Нејт е HTML. Па види неговата sourcecode ако сакате да видите како да го направите ова, и Нејт, ако ние може да ви embarass само накратко, персоналот имаш малку нешто ако сакате да споделиме некои десерт со некои од децата во класата тука. Ако сакате да дојдете на долу. Вие сите аплаудираат и се многу убави, но никој не седи некаде во близина Нејт, поради некоја причина, во која назад зона. Така што можеби може да се најдат некои луѓе да уживаат во овие со. Среќен роденден, Нејт. 

Дополнителни hellos: Ние покажавме неколку клипови од нашите CS50x студенти. Ако би сакал да видам кој друг е во светот дека е по должината, можете да се упатат кон овој URL, каде што Јосиф, еден од нашите TFS, ги стави заедно монтажа на видови на сите кои се поднесуваат овие видеа, меѓу нив Рик Astley. И ако дојдете во текот на овие, тоа е навистина инспиративна да се види разновидноста на земји и градови од кои луѓето го поздравуваат. Значи, ако сакате да ги погледне во тоа, тоа ќе биде до преку крајот на семестарот. Денес ние ја продолжиме нашата погледне на веб, веб програмирање, HTML и слично, и ние исто така имаме ручек доаѓа овој петок ако сакате, а особено, не го направиле тоа порано. Темата овој петок ќе биде роденден на Nate, па ако би сакале да имаат роденден ручек со Nate и други, некои од нашите пријатели од индустријата, Ве молиме глава до овој URL тука. Простор, како и секогаш, е ограничен. Исто така, ако си заборавил, сфаќаат дека следната недела е рокот за проблемот поставите 4 на чистач лов, при што по наплата на сите оние JPEG слики од card.raw, вие и вашиот дел другари, ако сакате, може да се обидете фотографирање како многу од компјутерски научници од тоа мемориска картичка што е можно, и вие и вашиот дел, тогаш ќе победи прекрасен награда. Се однесува назад кон pset 4 на спецификација за тоа што да достават и до кога. Исто така, ако вие би сакале да имате дело овековечиле на веб-страницата на курсот и неговата историја на облека, знаат дека вие сте добредојдени сега да почнат да поднесуваат дизајни за оваа година маици и Суичери и слично. Ние ќе се потрудиме да се вклучат колку што можеме, но ќе имаме некои членови на персоналот преглед на сите дизајни да бидете сигурни дека тие се во согласност со спецификациите, а ние потоа изберете генерално неколку од нив да бидат изложени. Значи, ако сте на дизајнот тип, само знам дека барањата за графика се PNG, најмалку 200 dpi, тие не треба да биде повеќе од 4000 x 4000 пиксели, и не повеќе од 10 MB, но ти си добредојде за користење работи како Photoshop или GIMP или различни програми графички е, она што ќе го имаат на располагање. 

Исто така, на хоризонтот е последниот проект. Конечниот проект навистина е кулминација на 50, при што на сите задачи во текот, тоа е вашата шанса навистина да го направите вашиот сопствен нешто. И дека може да биде едноставно да се направи нешто за забава, тоа може да биде да се решат некои притискање на проблемот на вашиот студент група има, за некои нови веб-сајт, на некои нови наплата механизам за податоци. Тоа може да биде мобилна апликација за Android, за iOS. Навистина, небото е лимит, и во текот на следните неколку недели, како што транзицијата од C до овие повисоко ниво јазици како PHP и го вклучите Javascript-, ќе најдете се повеќе запознаени со некои реалниот свет техники, некои реалниот свет алатки, и да се дополни дека, знам дека курсот има историја на семинари, при што во текот на следните неколку недели, некои од наставниот кадар и наши пријатели од на кампусот ќе понуди опција семинари кои одат погоре и подалеку од она што е обично се прави во делот да те запознаам со нешта како Андроид програмирање, да те запознаам со нешта како iOS програмирање или повеќе напредни веб-развој техники. Има цела историја на овие веќе онлајн. Ако одите на cs50.net/seminars, ние сме биле тоа за сосема извесно години, и ќе видите дека архивирани тука со PDF датотеки и видеа и слично неколку десетици видеа на семинари. Минатата година, на пример, имавме семинар за acing вашиот технички интервјуа, ако сте всушност бараат да одам и се направи една стажирање или со полно работно време свирка. Windows Mobile развој, Андроид развој, Google Мапи, API, CSS, развој на Blackberry, Emacs. Навистина, вие сте добредојдени да ги погледне во која било од овие семинари во својата погодност. И ние ќе се држи некои нови овој семестар, како и. 

Значи она што е напред со финалниот проект? Па, прво, иако овој датум е нешто неизбежно, ова е навистина само можност да почнат да размислуваат за завршниот проект, сосема реално. Ние знаеме само почетоците на некои од она што ние сеуште ќе се покриваат во текот, HTML, PHP и слично, но вие ќе бидете сите запознаени со интернет, и јас пристрасност овој разговор кон веб-само затоа што повеќето луѓе завршуваат прави веб-базирани конечниот проекти, но тоа воопшто не значи потребното. Користење на C е во ред, цел C, Java, кој било друг јазик што може да се знае или сакате да знаете е сосема во ред. Но за да го добиете сокови тече во почетокот, ние ќе очекуваме поднесување на preproposal кои, според PDF на веб страната, која сега е во cs50.net, и во горниот лев ќе видите конечниот проект е спецификација за финалниот проект, и има детали за preproposal и слично. Тоа доста се сведува на е-маил за да ги настава колеги само за да започнат разговор со него или неа за тоа што сте размислување. На projects.cs50.net е складиштето на идеи од луѓе на кампусот ако сте се борат да дојдат до некоја идеја, и manual.cs50.net/APIs е складиштето на линкови до API-јата. 

Што, пак, е API? Што е API? Сум го рече барем двапати, според записите на изминатите неколку недели. Што е тоа? [Студент, неразбирливо] >> Океј, добро. Значи нешто програмски интерфејс. Апликација програмски интерфејс, и ова може да потрае неколку форми, но она што ова навистина се сведува на е кодот дека некој друг ХС писмена или податоци дека некој друг има собрано која е ставена на располагање на вас во некои програмски начин. Можете да напишете кодот во C, PHP, Python, Ruby, Без оглед на вашиот јазик на избор обично е, и некако може да се гради врз нечија функционалност или некој друг податоци. На пример, ако одам на овој линк тука, и ќе видите еден пар на линкови на следните страница при што ние имаме свој API-CS50, кои се многу Харвард-центрични, а потоа трети лица API-јата. Меѓу трети лица API-јата се навистина корисни работи како да се биде во можност да испрати луѓе на SMS, биде во можност да примате текстуални пораки од луѓе. И работи како што тоа може да немаат идеја како да се имплементираат, но благодарение на услуги, некои бесплатни, а некои комерцијални, може да се изгради на врвот на оние кои и се направи нешто од интерес за вас. Меѓу API-CS50 се овие кампусот-оддалечиме работи како Харвард курсеви, енергија, настани, храна, мапи, вести, твитови и Shuttleboy сопствената, и овие се API-јата кои изгледаат малку нешто како ова. 

Дозволете ми да се повлече до API HarvardFood. Ако некогаш сте биле на веб страницата HUD, сте веројатно биле таму само да се види она што е за вечера или да видиме што часови за некои г-сала. Па, тоа не е особено лесно да се движите, и така она што го правевме пред некое време беше ние напиша софтвер, тоа се случува да биде во PHP, кои, всушност, екран гребење на интегритет на веб-сајтот HUD е. На екранот одвај нешто значи да напише програма на јазик како PHP која претендира да биде прелистувачот, иако може да се стартува од командната линија, која претендира да биде интернет пребарувач, се поврзува со веб-сајт, преземања својата HTML, јазикот на кој е пишуван, а потоа го чита, или поконкретно, таа parses врвот до дното, лево кон десно. И она што го правевме беше ние напиша нашиот код во таков начин што секое време видовме нешто во таа HTML кој изгледаше како нешто на менито, како хамбургер, тогаш ние ќе донесат дека во нашата сопствена база на податоци. И во секое време видовме хранлива содржина, ние ќе донесат дека во нашата сопствена база на податоци. И она што го правевме беше потпора на фактот дека HUD го веб-сајтот, иако тоа може да биде малку предизвик за нас луѓето да се движите под хауба, сите на HTML е генерирана од страна на нивните компјутерски програми. Па сите нивните HTML, иако тоа може да изгледа неуредна, како и повеќето веб-сајтови под хауба го следи моделот. Па ние само помина неколку часа да пронајдат што шема така што на крајот, ние фрлаат сите неуредна HTML, сите на естетиката на храбар соочува и искосен и слично, и што сме во можност потоа да направите е да се изложи дека истите податоци. На пример, на овој начин. Значи ние, според документацијата тука, го информираа светот дека ако побара рачно што личи ова, food.cs50.net / нешто, и ви обезбеди одредени параметри, кои ние ќе зборуваме за денес, како на завршување на турнирот време, старт-датум време, оброк и така натаму, она што нашите сервери ќе се врати за вас, на пример, е CSV датотека, запирка separted вредности како една датотека Excel, содржи сè за појадок на овој датум во март минатата година кога јас се случи да пишуваат оваа документација. 

За оние кои се запознаени, CSV не е само формат на датотека. Има уште една формат, кој е сè повеќе и повеќе разноврсна наречен JSON, JavaScript Цел Нотација. Податоците може да се врати во тој формат. Па готова брза тука е дека без разлика дали се нурне во овој API или било која друга на CS50 или нешто таму на интернет, или воопшто не, сфаќаат дека светот има повеќе почна да се стандардизираат како машини intercommunicate. Ние користиме стандардни податоци формати како CSV или JSON. И што тоа значи за вас е да може да напише интересна дел од програмата која ви овозможува вашето корисничко пребарување за јадење сала мени, што им овозможува да креирате листи на омилени која ви овозможува да ги добиете текст сигнали кога нивниот омилен оброк е за да се служи во некои г-сала со користење на некој друг сетови на податоци и изградба на врвот на нивните API-јата. Па повеќе за тоа во форма на семинари и документација што го имаме тука на интернет. Па оние, тогаш, API-јата. 

Тоа нè враќа во HTML. Брз повториме. Што е HTML? [Студент, неразбирливо] >> Добро. HyperText Markup Language. Некој друг, што е HyperText Markup Language? HyperText Markup Language. Во ред. Значи HTML, хипертекст. HyperText само се однесува на веб, во најголем дел. Селектирај значи дека тоа не е всушност јазик за програмирање, HTML. Тоа не е јазик што ќе можат да ги изразат логика внатре Тоа не мора петелки. Тоа не мора услови. Тоа не мора функции, сама за себе. Напротив, тоа има овие нешта наречени тагови или повеќе правилно, елементи. И овие елементи имаат почеток тагови и крајот тагови, или отворена тагови и затворени тагови, и она што тие тагови генерално значи за интернет пребарувач е, почнете да правите нешто и потоа да престане да прави нешто, иако постојат исклучоци на тоа. Понекогаш тоа е само "стави ред тука", на пример. И видовме примери за тоа пред некој ден, меѓу храбар кои се соочува, линија паузи, а потоа неколку други ознаки. Значи HTML е јазикот на кој веб-страници се напишани. Значи, ако јас одам на нешто како Google.com и повлечете само нивните Главна страница, потсетиме дека ако десен клик или контрола кликнете и гледам во поглед на кодот на страницата, обично тоа е комплетен хаос овие денови под хауба, но тоа е затоа што компјутери не се грижат за бел простор, така што ова не мора да изгледа убаво. Но, ако ние зумирате на делови од него, забележите дека Хром, само за да биде убаво, има боја кодирани работи. Всушност, ова е прв таг што сме го виделе во веб-страница. И повторно, HTML 5, најновата верзија на овој јазик, ја имаат оваа работа на почетокот, <! DOCTYPE html, без разлика дали мали или големи букви, но тоа е само вид на стандард кој вели, еј светот, тука доаѓа една HTML датотека во верзија 5. 

Интересните дел започнува тука. Значи <HTML, а потоа имаше две деца на HTML елементите последен пат. Кои беа тие две главни деца? Главата и телото, исто како човек со тетоважа пред еден момент. Има две делови од веб страница, главата и телото, и отповикување, тогаш, дека можеби наједноставниот веб страница ние би можеле да направат изгледа вака. И сум го требуван само за да биде вид на уредни и чисти, со мојот код, но она што е навистина важно тука е дека постои некоја хиерархија на ова. И сите таг што сум ги отвори Јас се затворени и дека е затоа оваа симетрија на сите Селектирај што сум замислен. Значи последен пат почнав да пишувам веб страници на мојот лаптоп. Јас отвори текст уреди, јас го зачувале фајлот како hello.html, Јас тогаш влечеше датотека на мојот интернет пребарувач, и Voila, имав страница на Интернет. Сега, тоа не е сосема случај, имав страница на мојот хард диск, и јас бев буквално единствената личност во светот кои ќе видите дека веб страната во пребарувачот. 

Така, денес, ќе се воведат вистински веб сервер и идејата за всушност служат содржини на интернет и како сето тоа почнува да се вклопуваат заедно. Значи излегува дека сето ова време во CS50 апаратот сте имале веб сервер на вашиот компјутер. Ние сме во праведноста, само што се користат за gedit, за ѕвекот, за gdb и слично, но, исто така, инсталирани од нас за вас во апаратот е веб сервер, и дека веб серверот се случува да биде слободен, софтвер со отворен код, еден од најпопуларните оние во светот, наречен Апачи. Нејзините повеќе технички име е httpd, г се за серверот тука, која е технички збор за серверот. Така инсталирана во CS50 апаратот е веб сервер, и што значи тоа? Па, веб серверот е, концепциски, некои сервер на интернет дека служи до веб содржина. Кога беа прашани за датотеката, таа плука на HTML кој ја сочинува таа датотека, и Voila. Гледаш Главна страница некои веб страницата. Но, серверот е, поточно, парче софтвер. Тоа не мора да биде на физички машина, тоа едноставно мора да биде дел од софтверот работи. Па CS50 апаратот, се разбира, е парче софтвер иако тоа е вид на претендира да биде машина. Тоа претендира да биде компјутер во внатрешноста на компјутерот, но тоа само значи дека уредот сигурно може да се кандидира работи како веб сервери. Тоа всушност може да работи e-mail сервери. Ние би можеле да работат за инстант пораки на серверот во апаратот ако сакавме да, и навистина, ние се кандидира еден друг тип на сервер, позната како база на податоци на серверот, MySQL. Но повеќе за тоа следната недела. Ова значи дека јас всушност може да ја посетите веб страници внатрешноста на мојата апаратот со помош на пребарувачот во внатрешноста на апаратот или дури и на моето лаптоп, мојот Mac или мојот компјутер. Значи она што значи ова? Излезе дека секое време сте водење на Линукс компјутер, нејзините прекар е "локалниот компјутер." Тоа не мора на име на домен, бидејќи ние не ги купуваа на име на домен за нешто како на апаратот, па неговите стандардни име е локалниот компјутер. 

Но, со цел да се добие на апаратот за да започнете служат веб страни, ние мора да ги создаде во прв план. Значи, да го направите тоа. Дозволете ми да одат во терминален прозорец тука и ќе забележите дека јас сум во мојата типичен Џон Харвард прашува. Дозволете ми да оди напред и да напишеш ls, и ние ќе видите некои познати работи од овој семестар, десктоп, преземања, Dropbox и така натаму, но сега ние започне претворање на нашето внимание на неколку. На многу Линукс веб сервери има оваа папка наречена јавноста HTML, но ние ќе го прескокнете дека една сега за сега и се фокусира на ова, vhosts. Секој знае што е vhost е? Само глупави жаргон за виртуелен домаќин, и што тоа значи е дека на еден типичен сервер вие всушност може да биде домаќин на повеќе веб-сајтови. Можете да ги купите домен име како foo.com, и можете да го домаќин на серверот. Но вие исто така може да се купи bar.com и домаќин на истиот сервер. Причината е, прелистувачи се доволно паметни да се информираат на серверот кога корисникот се бара некои интернет страница, она име на домен на корисникот сака страница за. Значи она што е убаво за ова е дека не треба еден физички сервер или еден CS50 апаратот за секој веб-сајт можеби ќе сакате да се создаде. Можете да го користите истиот сервер и развој на сто различни веб страници. И навистина, ако сте човек се обидува да започне веб-сајт, дали за забава или за бизнис, обично ќе излезат на интернет, и ќе плати некој десет долари месечно, сто долари месечно да биде домаќин на вашиот веб-сајт за вас. И начинот на кој работи е дека тие се полнење други луѓе десет долари месечно или сто долари месечно да биде домаќин на другите луѓе веб-сајтови на нивните ист сервер. Причината поради која тие може да го направите тоа е затоа што на оваа функција наречена bhosts, но повеќе за тоа кога ќе дојде време за конечна проекти. 

За сега, ајде да се нурне во таму. Значи CD vhosts, и ако напишете ls сега, забележите дека постои папката таму се нарекува локалниот компјутер. Тоа е затоа што, по правило, апаратот бројки сте некогаш ќе се кандидира една веб-страница на апаратот. Ова не е навистина реалниот свет, тоа не е реалниот свет веб серверот. Па дозволете ми да одат во локалниот компјутер, и сега ќе видиме таму последен директориумот наречен HTML. Па тоа е малку длабоко, хиерархијата, но ако и кога ќе одлучи да се започне развој на повеќе веб-сајтови во текот на следните n месеци или години, овој вид на директориумот структура има тенденција да биде корисно. Сега ајде да одиме во HTML како што скоро сторив, тип ls, и ништо не е таму. Па сега ајде да одиме напред и да го направите тоа. Дозволете ми да се отвори Хром внатрешноста на апаратот, и дозволете ми да одат на http://localhost. Значи буквално име за мојот апарат, влезе, а јас се добие индекс на /. Ова не е навистина ми покажува нешто од интерес, но излегува дека она што го гледате е таа папка, HTML код. Нема ништо во таа папка токму сега, па наместо тоа, она што јас ќе одам да треба да направите е прво да се создаде датотека. Креирај HTML датотека како што правевме во понеделник, но овој пат таа се стави во внатрешноста на апаратот. За оние од вас кои се обидуваат да го следат заедно со лаптопи сега, дозволете ми да направам една настрана кои ќе бидат опфатени во веб-базирани pset, но со цел да се добие оваа работа за прв пат, сте ќе треба да ја извршите оваа команда: sudo услугата httpd на проектот. И оваа, пак, ќе се повтори во последните pset, но ако си играат заедно дома сега, на веб серверот е исклучен во апаратот, а тоа е, така што тоа не поткопале до RAM меморија и меморијата за 7 недели од семестар кога не треба. Така што треба да ја извршите оваа команда еднаш, и ќе добиете излез слично. Тогаш треба да бидете во можност да игра заедно тука. Сега да се вратиме во оваа папка. Оваа папка е празна, па дозволете ми да започнете со креирање на датотека, Зачувувањето hello.html. 

Во ред. Gedit е отворена, како и обично. Дозволете ми да се направи DOCTYPE, HTML, html, дозволете ми да го добие пред себе и да почне затворањето на мојата тагови однапред. Сега имам на главата. Дозволете ми да оди напред и да се затвори на главата, дозволете ми сега да наслов на страница, здраво светот како минатиот пат, блиску наслов, сега дозволете ми да се направи телото. Тука јас ќе кажам здраво, свет со некои exclams да го направи јасно дека тоа е различен стринг. Затвори тело, а сега дозволете ми да оди напред и да зачувам датотеката. Дозволете ми да се вратам на мојот терминален прозорец, и ако напишете ls, Јас треба, веројатно, видете hello.html. И јас. Па сега ајде да се вратиме на мојот интернет пребарувач, кликнете ја превчитате, и можете да видите ние сме навистина во внатрешноста на оваа HTML папка. Не гледам некоја веб страница сепак, тоа е Apache-то, веб сервер, само ми покажува листата содржината на овој директориум. Исто како Mac OS или Windows обично ќе го направите на свој локален хард диск. Значи, ако сакам да видам оваа веб-страница, можам да кликнете на ова малку линк тука, hello.html, и навистина, тоа е она што јас го очекував да ја видите. Сега, пак, ова не е URL кој било од вас да ја посетите токму сега, затоа што за вас, локалниот компјутер, ако имаш лаптоп тука, тоа е се однесува на вашиот сопствен пример на апаратот. Ова е моето лично апаратот, но ова е вид на нем за мене да има, да имаат корисникот како мене кликнете на hello.html да всушност ја видите содржината на оваа страница. Излегува дека веб сервери како Apache да имате стандардна датотека за било кој веб сервер. Забележете тука имаме hello.html. Што е команда во Linux да се преименува датотека? 

МВ, за овој потег. Па дозволете ми да го направи тоа, и дозволете ми да преименувате hello.html да index.html. Дозволете ми да напишете ls да потврди тоа сега е преименуван. Сега ова се случува да - ако се навратам на локалниот компјутер, забележите дека сега сум автоматски гледајќи дека веб-страница. Ова е идентична со мојата всушност прави / index.html, но убаво нешто сега е дека на веб-серверот пронајдат, ох, ако имате датотеката која, од човечки конвенции, се нарекува index.html, нека ми покаже на корисникот дека датотеката стандардно отколку некои глупави директориумот кој воопшто не е лесен за користење. Всушност, повеќето веб-сајтови кои ги посетувате на интернет немаат листа на датотеки за да кликнете на, тие само ви покаже на содржината. Значи тоа е како да го направите тоа, index.html. Значи ова е за сите забава и добри, но ова е прилично едноставна веб-страница. Дозволете ми да оди напред и да се отвори index.html во мојот vhosts, локалните домаќин, HTML директориум, и ајде да додадете нешто на поголем интерес. Па таму е здраво светот, ајде, наместо да каже "Ова е CS50, Харвард колеџот. . ". Значи на почетокот на курсот каталог опис на некој вид таму. Сега, ако јас ја превчитате, јас треба да го видите ова во мојот дом страница. Океј, и јас го гледам тоа, но претпоставувам дека сакате да го сега листа на некои повеќе содржина во оваа датотека. Јас би можеле да одат надолу тука и да кажам, предуслови нема, иако некои од вас се веројатно се допаѓа, "Ха ха ха, без предуслови". Но - официјално. Значи повторно, и сега имаме исто поврат што сме го виделе последен пат. Но, зошто е тоа така? Тоа беше едноставен фикс. Зошто оваа страница скршени? [Студент, неразбирливо] >> Да, ние сме решени ова пред со експлицитно кажува на пребарувачот стави ред овде. А тоа е затоа што, повторно, интернет пребарувач е само случува да се направи експлицитно што јазик за Селектирај кажува да се направи, па иако можеби сте притиснете ентер еднаш или двапати или дури десет пати, тоа се случува да се комбинираат сите во еден простор, само со конвенцијата. Значи, ако навистина сакаат ред, ќе мора да го користат таг br, и сега известување, како понеделник, ја ставив / внатрешноста на оваа ознака, само затоа што тоа едноставно не се чувствуваат право за да започнете нов ред тогаш престане со ништо помеѓу. 

Така конвенцијата во HTML е да се отвораат и затвораат таг истовремено. Како настрана, ќе видите многу веб-сајтови во книгите не прават. Точно е да се прават или да не го направи тоа, но ние би рекле дека Дизајн-мудар и стилски, ова е само подобро затоа што тогаш секој таг е и отварање и затварање некако. Па сега ајде да се спаси и повторно. Врати се на прелистувачот, во ред. Сега сме постигнуваме некаков напредок, но тоа не е сосема доволно. Ајде да одиме напред и да почнете да пишувате во некои веќе телото на текстот. Па да речеме, "А Брзата кафена лисица скокови над мрзливи куче." И сега дозволете ми да копирате и залепите ова неколку пати така што ние имаме став од текстот. Дозволете ми да се вратам овде. Па тоа не е во потрага многу добро. Јас немам ред, па тоа е во ред, но сега, откако сме да дојдеме до точка на се има веб-страница дека има многу содржини, а не само еден линии за да се демонстрира HTML, можеме да почнеме да размислуваме за овие работи како вистински ставови. И ние може да почнат да структура на нашата веб страница малку повеќе демонтирани. И навистина, она што можам да направите е да отидете до тука во внатрешноста на моето тело ознака, и знаеш што, ако "Ова е CS50. . ". навистина demarks почетокот на став, добро, ајде да означите како таква. Дозволете ми алинеја текстот, само со конвенцијата, дозволете ми да кажам дека овој став завршува тука, а потоа наместо да оваа линија пауза, дозволете ми да кажам дека тоа му припаѓа таму и како се додава нов став, и јас ќе само брзо алинеја од само clobbering сите на овој материјал. 

Така, сега имаме требуван став таму, и сега нашите Селектирај почнува да се добие малку повеќе семантички согласност со она што ние се обидуваме да се направи. Ние имаме став, па нека го наречеме став со таг стр. Имаме вториот став, па нека го наречеме став со таг стр. И сега, што на пребарувачот обично ќе направи е исто како во англискиот книга или есеј, каде што обично видите некои линија паузи помеѓу ставовите. Пребарувачи ќе го направи тоа за вас автоматски. Така, сега имаме две ставовите и можеме да продолжиме ова. Но, се разбира, на интернет, кога имаш тела на текст тоа не е обично само огромни грутки на текст. Постојат често хиперлинкови во таму. Значи, ако сакаме, на пример, вклучуваат некои линкови таму, Претпоставувам дека она што може да биде од интерес во она што веб-страница Јас сум создавање тука е - дозволете ми да одат на Google.com, и дозволете ми да пребарувате за Брзата кафена лисица. Одете на Google слики, и, како за - ова е симпатична. Ќе одиме со ова. Значи тука имаме Брзата кафена лисица скокање во текот на мрзливи куче. Значи она што јас ќе одам да направите тука, само за доброто на демонстрација, е претпоставувам дека оваа слика е на мојот сервер, и сум бил креирање на овие слики. Она што јас само не беше десен клик или контрола клик на сликата, и она што ќе видите во повеќето пребарувачи е малку мени - престанат да го прават тоа - малку мени што ви овозможува да изберете Copy Link Location или копија рачно. Па дозволете ми да се вратам сега на мојот HTML, и да претпоставиме дека сакам да водат оваа во друга веб-страница. 

Која беше таг вика за тоа? [Студент, неразбирливо] >> Да. Значи a href за хипер референца. Дозволете ми да оди напред и ставете дека внатре Тоа е прилично долго URL, па дозволете ми да зумирате назад. Затвори загради, па сега забележиш јас сум начин овде затоа што рачно се случи да биде доста долго. Дозволете ми да дојдете овде до крајот на Брзата кафена лисица, и тогаш дозволете ми да го затворите овој таг со </ a, каде што само затворени името на тагот. Сега дозволете ми да оди напред и да ја зачувате оваа датотека, вчитување на веб страница, и сега, по дифолт, тоа ќе бидат подвлечени со сино за мене, но навистина, јас сега може да кликнете на ова и Voila. Има таа слика. И тоа не треба да биде слика, тоа може да се поврзани на некои други случајни веб-сајт на интернет. Можев да го направите ова, на пример, со CS50, па последен пример тука. "Ова е CS50" може да има смисла да се оди, href = http://www.cs50.net, во близина понуда, во близина сидро. Па сега тоа е уште пократок URL-то, и овој пат ние нема да водат до сликата. Ние наместо нема да водат до друга страница. Сега, имаме сликата тука. Се чувствувам како можеме да направиме малку подобро отколку само поврзување на сликата. Што ако сакаме да всушност го отелотворуваат во нашата сопствена web страница? 

Па, она што можам да направам е тука, наместо линк до овој графички, дозволете ми наместо намалување на URL-то, а ние ќе се ослободи од таа хиперврска и чисти ова. И ние ќе одат надолу тука и да се ослободи од ова. Ние навистина не треба сите овие реченици сега, па да ми го скрати страница малку. А потоа надолу тука дозволете ми да оди напред во нов став, каже не сакам сега текстот, сакам слика чиј извор се случува да биде дека рачно. Слика, како линија пауза, или е таму или не е. Значи, дозволете ми веднаш затвори таг. Дозволете ми да одат напред, сега и во близина на ставот дека јас сум внатре, и ако се оди добро со здраво, свет, ако јас ја превчитате сега, Јас, навистина, гледам во внатрешноста на мојата сопствена веб страница на сликата. Така, сега имаме една слика таг, сидро таг и слично, а за добра мерка, дозволете ми да направам една друга работа што е често занемарена на веб-сајтови овие денови: Да се ​​обезбеди некој описен текст за оваа слика за луѓе кои се на некој мобилен уред и затоа не може да биде во можност да ја преземете оваа слика многу брзо, за луѓе кои се слепи и не може да биде во можност да ја видите сликата но тие би можеле да имаат читач на екран што може да им каже што е ова на сликата е од. И да го направат тоа, постои уште една атрибут за сликата тагови наречен алт, за алтернативен текст. И она што можам да направам тука е да се каже, "Ова е Брзата кафена лисица". Така што дури и ако човекот не може да се види на сликата на екранот, тој или таа барем може да се слушне, како и со некои парче на софтвер, што всушност е таму на екранот. 

Тоа нема да се промени естетиката на страницата, но тоа е, секако, добра практика за корисниците. Добро, ајде да ја напушти оваа веб страница во својата сегашна форма, но ајде да видиме дали ние сега не може да се воведе некои подобри пристапи кон пишување на овие web страници, некои лекции кои ќе ни служат и да добијат нашите страници се повеќе и повеќе комплекс. Она што нема да го направи во текот на следните неколку недели е ви прошетка низ сите на неколку десетици HTML тагови кои постојат. Слично како во нула назад во недела 0, тоа најверојатно ќе бидат доволни да се даде на високо ниво преглед на некои од концептите, брз турнеја на некои од блокови што веројатно биле во можност, прилично удобно, да се движите на вашиот сопствен, на различни загатка парчиња. И тоа ќе се случи повторно во HTML, најверојатно, при што има изобилство извори на Вебот дека ние ќе ви точка во, различни учебници, ако сакате да прочитате една книга, која ќе ви прошетка низ сите различни работи што можете да направите со HTML, но, навистина, видовме досега во HTML повеќето од основните концепти. Имаме поимот тагови се отвори, тагови се затворени. Некои тагови кои се двете отворени и затворени во смисла дека тие се празни; треба да има ништо во внатрешноста од нив како сликата таг или линија пауза, кои се само таму. Ние, исто така, погледна веќе на идејата за атрибут, како алт или извор. Забележете дека овие зборови имаат тенденција, со конвенцијата, да биде краток и содржаен. 

Ние немаме дискреција околу тоа што овие работи се нарекува, некој друг кој ја има измислено HTML излезе со овие имиња. Значи вие само треба да почне да се знае или да барате, во секое време ќе им треба, што имиња се за овие тагови и атрибути. Во случај на овие атрибути, атрибути генерално промени однесувањето на некои таг. Во овој случај, изворот атрибут кажува на сликата таг што е извор на сликата треба да биде. На href атрибутот му кажува на сидро таг она што всушност треба да се поврзува. Но во однос на структурата на веб-страница, иако Фејсбук и Google и слично изгледа како комплетен хаос под хаубата на прв поглед, ако почнете да се чита преку тоа повеќе методично, сите тие го следат овој основен, основната структура. Но, ние може да го подобри стилизација на овие работи. Па дозволете ми да одат на некои примери кои јас подготвени однапред. Дозволете ми да оди напред и да ги копирате од друга папка тука и ги стави во овој директориум. Однапред, она што го направив беше подготви неколку датотеки: search0, search1, search2 и search3 и 4. Дозволете ми да оди напред и да се отворат првиот од овие датотеки, и да видиме ако не можеме да почнат да се создаде нашата сопствена пребарувач. На врвот на оваа датотека, како што е обично случај во класа, само еден куп на коментарите. Во HTML, сепак, средствата со кои ќе почнете коментар е <-! и потоа сте внатрешноста на коментар, мулти-линија коментари. Кога ќе бидете подготвени да го спречи тоа коментар, можете да го направите ->. Така што на врвот во сино е само коментар. 

Ова е мојот DOCTYPE декларација, која, повторно, можете само да копирате и залепите на верата, за сега. Ова само кажува на пребарувачот, "Еве доаѓа некои HTML 5. ' Под него, на линијата 14, е прв од мојот вистински тагови, и тоа само вели дека, како и досега, тука доаѓа некои HTML, тука доаѓа на чело на мојата страница, тука доаѓа наслов, а потоа, обратно, тоа е тоа за титулата, тоа е тоа за главата. Тука сега доаѓа телото на мојата страница. Значи неколку нови ознаки сега: h1 залага за Заглавие 1. Има традиција во HTML за многу години назад на постоење на различни големини на текстот. И назад во денот, секој еден значи, обично, само големи и храбри. Но, има, исто така, H2, која е голема, но не толку големи и задебелени букви. Има H3, кој е вид на големи, но не и скоро толку голем и смел, и така натаму, сите на патот надолу до h6. Овие денови, иако, H1, H2 и h3 се навистина значеше да имаат повеќе семантичко значење за нив, при што Н1 е навистина наслов: насловот на веб страница, насловот на колоната или нешто слично на текст. Па јас намерно рече h1 CS50 пребарување> Н1 да specifiy дека ова е навистина наслов, насловот на мојата страница. Не насловот во насловната лента смисла, но насловот дека сте всушност гледаат во веб страница себе, во телото. Сега ова, веројатно може да се погоди што е тоа, иако имаме неколку нови парчиња синтакса. Ова е форма. Значи веб навистина станува интересно кога веб-сајтови да влез од корисниците. Во оваа класа, во проблемот поставени на веб програмирање, ние нема да се направи веб, сам по себе, со статична содржина која покажува фотографии кои сте ги направиле, или ова е мојата биографија, и работи за мене, затоа што тие работи се релативно лесно да се стави заедно. Тешко е да се направат нештата убави на интернет, но барем се пали содржина е прилично тривијална. Но, работите се навистина интересно кога некој може да го посетат вашиот веб-сајт и да се обезбеди влез и да пополнуваат формулари, може да се провери надвор обележувачи и да комуницирате со вашиот вебсајт. И навистина, веројатно секој веб-сајт вие се грижите за овие денови, во секој детал, е некако интерактивни. Фејсбук, Гугл, и слично, кои се кориснички влез и производство на кориснички излез. 

Значи, да почнеме да го направи тоа сега. Ајде транзиција сега од само користење на HTML за Селектирај на статична содржина како, наместо на испорака механизам за динамични содржини. И кон таа цел, да спроведат нашите сопствени пребарувач. Ајде да го направите тоа како што следува. Тука е форма таг. Акција атрибут наведува дека кога корисникот пополнува оваа форма со тастатурата, тоа ќе биде доставен до овој URL тука. Па јас сум вид на изневерување. Тоа се случува да ни потрае малку подолго од една класа за спроведување на целата пребарувач, па ние само ќе го стори пред крајот, така да се каже. Ќе го делот кој им овозможува на корисникот пребарување и ние ќе средиме на залог на Google на тврдиот дел за наоѓање на резултатите од пребарувањето, но, конкретно, јас одам да се зборува за веб серверот на Google користење на еден од две многу популарни методи. Еден се добие, друг, дека ние на крајот ќе видиме, се пост, иако има и други кои се помалку често се користи. Така да само ја доловува идејата, би сакал да добие некои содржини, се некои резултатите од пребарувањето. Ова, можеби може да се погоди она што овој го прави тоа. Ова е некој вид на влез, тоа е, всушност, ќе изгледа полето за текст, и името на тој влез, името на таа променлива, така да се каже, ќе биде П за пребарување на конвенцијата. И повторно, од типот на овој влез нема да биде наога; тоа нема да биде менито, тоа ќе биде полето за текст како означува со овој атрибут тука, а ова поле за текст, како линија пауза, или е таму или не. Значи имаме празен елемент со коса црта внатре таг. Потоа јас ќе одам да се стави ред, и може да се, можеби, погоди што ова ќе направи. Ова е уште еден вид на форма влез. 

Оваа една се случува да се користи за поднесување на формуларот. Значи ова ќе биде голем копчето што корисникот може да кликнете да ги достават форма, и на етикетата за тоа копче ќе биде "CS50 Барај". Затвори форма, во близина на телото, во близина на HTML. Ајде да видиме што имаме во форма на оваа веб страница. Па дозволете ми да одат на мојот интернет пребарувач, дозволете ми оди, сепак, на локалните домаќин. Ова е уште index.html, па ако сакам да го видам овој фајл наречен search0, Јас едноставно да го направите / search0.html, внесете - и првиот од своите грешки. Што се случува? Јас јасно Немате дозвола за пристап до оваа датотека, поради некоја причина. Но, тоа е затоа што, за разлика од работа ние го направивме досега во C, каде програмите ти пишувам се претпоставува дека се runable од вас, извршна од вас, тоа не е навистина случај на интернет, при што понекогаш можеби ќе сакате да создадат датотеки на сервер, но вие не сакате целиот свет за да бидат во можност да ги видат. Наместо тоа, сакате светот да види некои датотеки но не и другите, само за доброто на приватноста е. Така, тоа е повеќе од тргнете во основа кога правиш работи на интернет. И така нека ме всушност тип ls тука, и ќе видите датотеките имам, но се сети дека ако го направам ls-l за долго, Јас ќе добиете подолг листата што ми дава повеќе информации за овие датотеки кои се сега, навистина, за прв пат се релевантни за нас. Забележете дека на екстремната десница се имињата на датотеките ми, и тогаш времето во кое тие биле последен пат е изменета или копирани. Овој број тука е она? Се сеќаваш ли на? Големината во бајти, колку е голема датотека е. 

Па јас се чини дека имаат некој вид на логото тука тоа е поголем од сите други датотеки. Ова е кој сум јас, тоа е она што сум и она што група Јас сум внатре Но, тогаш, овде на лево е малку криптичната низа, и ние разговаравме, мислам, накусо нешто за тоа во минатото, но ова има врска со дозволи. И дури и ако тоа е малку маглива, RW веројатно значи читаат и пишуваат. Значи излегува дека овие цртички означуваат различни групи на дозволи за различни луѓе. И образецот е, во суштина, како што следува. Кога ќе видите низа од цртички тука, тие изгледаат како што следува. Има цртичка, тогаш има уште три цртички, тогаш има уште три, тогаш има уште три. Првиот е или цртичка или тоа е реклама за директориумот. Така што е прилично лесно. Ако тоа е папка, вели г, инаку тоа е цртичка. Има неколку други случаи, но сега за сега ние само ќе се грижат за датотеки и директориуми. Овие следните три цртички - и јас сум вештачки вметнува празни места. Тие беа, очигледно, не постои кога ги видов пред еден момент. Овие се дозволи на датотеката сопственикот, и се сеќавам од вториот пред тоа беше читаат и пишуваат. Тоа е затоа што сум, како човек кој ја создал оваа датотека пред еден миг, Јас, само по дифолт, на компјутер Linux, имаат способност да се продолжи читањето и пишувањето таа датотека. 

Па на оперативниот систем само ми дава RW автоматски. Средината оние однесуваат на мојата група, која на студентите, кој е вид на бесмислени на апаратот, бидејќи јас сум само лице со користење на апаратот. Значи, дозволете ми само бран моите раце во тоа за сега. Но, последните се најважни за веб. Ова е сите останати во светот, како и фактот дека тоа е --- значи дека никој друг во светот има било дозволи за оваа датотека. Јасно е проблем, па затоа треба да го надминете овој од страна некако дава светот што? Читаат и пишуваат? Тоа е веројатно глупава, нели? Не сакам никого на интернет да одат да ја посетите мојата страница и некако се промени таа датотека, иако тие навистина не можеше со HTML датотека, но само во принцип, веројатно само сакаат да бидат во можност да го прочита. Што значи тоа да го прочитаме? Тоа не значи дека тие се случува да се грижи за реалните HTML, но на пребарувачот треба да биде во можност да го анализирам тој јазик за Селектирај, врвот до дното, лево кон десно. Па некој на интернет треба да може да го прочита, па јас минимално треба да го даде Р. Можам да го направите тоа во неколку различни начини, но можеби наједноставниот е да ја извршите оваа команда тука. Chmod, промена на владата, тогаш + R така што сите, сите во светот + читаат, а потоа името на датотеката, search0.html. 

Сега, ако јас не ls-l повторно забележите дека таа датотека е променет, и навистина, јас сум вклучен r за секого. Јас сум исто така, се покажа врз за мојата група, но тоа е во ред, затоа што ако се свртев на за секого, мојата група е подмножество на тоа. Значи тоа е во ред. Ова само значи дека компјутерот сега има направено тоа може да се чита. Сега дозволете ми да се вратам на мојот интернет пребарувач, кликнете ја превчитате. Ах-ха. Сега имаме CS50 пребарување. Сум zoomed во малку вештачки - прилично одвратен пребарувач. Но, ајде да видиме дали тоа всушност функционира. Прво, дозволете ми да го направите брзо разумност проверка, дозволете ми да го контролираат кликнете и да ја видите страницата извор. Забележете дека во Хром ние сме сега гледањето на истиот HTML дека јас замислен. Не се збунети тука, иако. Не можам да започне менување на кодот тука, бидејќи на пребарувачот е само за читање оглед на тоа код. Прелистувачот има само побарано локалниот компјутер за фајл наречен search0.html. Сега е чиста случајност што уредот се случува да биде на ист компјутер како мојот интернет пребарувач. Јас само би можеле да имаат, еквивалентно, ја внеле во www.facebook.com/search0.html, и ако Фејсбук имаше фајл наречен тоа, јас тогаш ќе се види нивните HTML. И, се разбира, не може да го промени датотека која се враќа од Фејсбук, или. Па сега ние сме вид на замаглување на линии. Уредот е и сервер, служејќи се веб страници, но тоа е, исто така, на клиентот, во смисла дека јас сум со користење на интернет пребарувач да всушност разговара со тој сервер. Да видиме дали мојот Google пребарувач работи. Дозволете ми да оди напред и да пребарувате за Брзата кафена лисица, внесете. И Voila, јас сега имам свој пребарувач. 

Но, како го прави ова работа? Малку се водат, но - и сега не можете да видите, поточно, делот кој е од интерес. Забележи она што се случува. Обрнете внимание на URL-то. Излегува дека тој метод, наречен добие, е супер едноставен. Кога ќе се определи во форма што ќе посакате да се "добие" резултатите од некои сервер, она што се случува да направите е да се земе она што сте го напишале во форма и го стави во URL-то. Тоа се случува да се стандардизираат како таа добива се стави во URL-то како што следува. Забележете дека ова е рачно, кој беше вредноста на мојата акција атрибут. Тоа е каде што сакав форма да се заокружи. Но, тогаш забележи овој прашалник. Ова е Конвенција на интернет каде да се обезбеди корисник влез до веб-сајт, можете додадете на рачно знак прашалник, а потоа имате еден куп на клучните вредност парови. Името на еден тастер, инаку позната како параметар во мрежата, тогаш имате еднаков знак, тогаш имате вредноста на тој параметар. Така, тоа е во суштина име на променлива и променлива вредност, но имиња оние променлива и вредности дојде од HTML форма. Зошто предности таму, мислиш? Бидејќи јас не напишеш + помеѓу моите зборови. [Студент, неразбирливо] >> Да, тоа е само за празно место. Шансите се, кога сте виделе URL-то, Таму никогаш не било простори во него, само затоа што ако имало, ти навистина не може да копирате и залепите во IM или во е-маил, бидејќи тоа ќе се скрши. Сакате целата работа да биде еден соседни низа од карактери. 

Значи пребарувач е доволно паметни да сфатат, Ш-Ш. Немојте само да се стави простор таму. Дозволете ми да се кодираат просторот во некои стандарден начин. Еден од конвенциите за тоа е да се има на пребарувачот автоматски се стави +, каде што инаку би имал простор. Па сега, известување на Google е вид на user-friendly. Јас сигурно не се создаде оваа веб страница, но тие имаат prepopulated свој полето за текст со она што, токму, јас внесе внатре Претпоставувам дека сакате да барате нешто друго, како мрзливи куче. Јас само да го напишете тука, повторно пребарување. Забележете дека рачно менува се тука, но забележите тогаш дека јас всушност може да пребарувате за се што сакам само со разбирање како адреси работа. Јас не можеше да стори мрзливи мачка, ентер, и ќе забележите сега сум добивање на многу мрзливи - треба ние? Се чувствувам како ние треба. Јас добие многу мрзливи мачка. Во ред. Ова е една од stupidest работи што го направиле. Но, тоа е мрзливи мачка. Во секој случај, она што е клучот готова брза тука? Сега сме вид на игра во светот на HTTP. HTML е само овој јазик за Селектирај, отворен таг, во близина ознака, кој му кажува на прелистувачот како да го направи содржината на веб-страница. Но, кога ќе почнете пренос на податоци преку интернет помеѓу веб прелистувачот и серверот, тоа е каде што овој протокол познат како хипертекст трансфер протокол презема. Ова е вид на човечки конвенцијата, кога Сем и јас се ракуваа во понеделникот, почнувајќи врска, а потоа затворање на врска, исто идеја овде. Како се резултатите на Google враќа за мене? Како е мојот форма поднесување одење на Google? Па, се сеќавам од пред некој ден дека она што е навистина се случува под хаубата кога ќе ја побарате на веб страната е, Вашиот интернет пребарувач е испраќање малку-криптичната порака како ГЕТ / HTTP/1.1 за стандардно Главна страница. 

Или, во овој случај, бидејќи јас конкретно побарал порано search0.html, ова тогаш ќе биде горе-долу криптичната порака дека мојот интернет пребарувач ја испраќа на апаратот. Или, во овој случај на Google, што се всушност пратени е барање до / пребарувањето, а потоа? q = мрзливи мачка, со плус таму. Значи оваа порака, дека Јас, човечки, никогаш не сум пишување, но се испраќа од страна на мојот интернет пребарувач, ова е како HTTP случува. Ова е еквивалент на нашата ја разнишаа рацете. Ова е барањето, а на серверот за да испрати одговор. Па ајде да ги разгледаме во овој под хауба. Како и досега, ние може да се отвори оваа посебна област во прелистувачот. Прикажи страница, увид елементи. Значи под увид елемент, забележи дека она што се случи во Хром, и IE и Firefox имаат слични механизми, имаме овие инвеститорот алатки достапни за нас. Нормалните луѓе не ги користат овие јазичиња. Но, ние, сега, се заинтересирани за она што се случува под хаубата во мрежата на ниво. Значи, ако јас се повлече до мрежата на ниво тука, дозволете ми да оди напред и да ги прошират овој прозорец, отвори овој запис тука, и се погледне на заглавија. Значи она што се случува кога ќе побара некоја датотека од веб серверот е мојот интернет пребарувач испраќа целиот куп на нештата. И дозволете ми да видите извор. Значи под барање заглавија, И ова е само Chrome мене покажува некои дијагностички излез, вид како дебагерот на некој вид, забележи дека она што го истакна тука е токму она што Хром е испраќање на сервер со цел да побара фајл наречен search0.html. Тоа кажува на серверот она што го мисли нејзиното име е, благодарение на оваа домаќин на дебелото област, тогаш има некои прилично езотерична работи овде, како нешто да се направи со датуми и времиња, нешто да се направи со кои јазици ги прелистувачот разбира, но навистина важно линии се овие првите две овде. 

Што значи серверот одговори со? Па, ако се движите надолу тука и да ја видите извор на оваа работа, забележуваат дека серверот одговори со малку криптичната порака како добро, не 304 изменета. Тоа е малку чудно, дозволете ми да всушност се обидуваат да го надминете овој. Дозволете ми да го држите Shift и кликнете повторно се тука да ги принуди интернет пребарувач да всушност направи ова барање за прв пат. Тогаш дозволете ми да зумирате и ќе видиме сега дека серверот одговор, затоа што се одржа смена, е 200 OK. Значи сте веројатно никогаш видено број 200 во контекст на веб, но она броеви си понекогаш се гледа неочекувано од серверот? 404, датотеката не е пронајдена, 403, забранети; 500, грешка на серверот. Па така постојат овие нумерички шифри дека светот го користи во Веб да се означи грешки, исто како C функции можат да се вратат грешки и главните можат да се вратат излез кодови. 200, сепак, ретко се гледаат, бидејќи тоа значи се е во ред. И 304 никогаш да не веројатно се види затоа што она што го означува? Дека ништо не има - ајде да видиме дали можеме да симулираме оваа повторно - Е, сега, тоа не е соработуваме. 304 рече не е изменета, па зошто беше серверот па дури и реагира? Па, за ефикасност, веб сервер автоматски за вас, ако датотеката не е променет, тоа не ќе препредавате на целиот HTML датотека. Тоа само ќе ти каже на прелистувачот не се сменило. Само користење на копија веќе ги имаш. Па таму е идејата за кеширање на интернет за перформанси, така што ќе не губат време и отпад пропусен опсег симнување на фајлови повторно и повторно непотребно. 

Но, оваа веб-страница, сега, беше супер едноставна, и тоа само ми го покажа HTML кој се врати. Да, всушност го користите на мрежата јазичето сега да се направи Google пребарување како Брзата кафена лисица. Дозволете ми потоа кликнете CS50 пребарување, и сега, забележи во долниот тука еден куп на работи вратив затоа што кога ќе го посетам вистинска веб-сајт како Google.com, тие имаат слики, тие имаат текст, тие имаат јазик наречен вклучите таму. Така што секој ред во оваа табела долу тука претставува нешто што Google плукаат во одговор на моето единствено барање. На онаа што се грижат за, сепак, е овој првиот. А кога ќе отидам на пребарување, барање, кликнете View Source тука, забележи дека, навистина, криптичната порака дека мојот интернет пребарувач испрати на Google беше овие две линии тука, проследено со некои таинствени информации овде кои ќе ги игнорираат за сега. Но известување, исто така, она што Хром е прилично корисна со тоа, тоа е, исто така, покажувајќи ја барањето е испратено внатре Така, наместо да ми го покажат тоа, кој беше буквално испрати, ако видите декодира, Хром, само за дебагирање цели, за програмери како нас, тоа е само мене покажува човечко-friendly верзија на - што не е како се пишува лисица, очигледно. Јас сум само забележи ова сега - но тоа е ви покажува она што, очигледно, напишани. Во меѓувреме, одговор кој се врати од серверот е повторно 200 OK. Но вклучени во тој одговор, се разбира, ако ние всушност ја видите HTML на страната - жал, ова е малку кратенката качил криво денес. 

Јас ќе се справи со ова подоцна. Значи, ако ние всушност ја видите извор на страната, што можам да направам тука долу со кликнување одговор, тоа е она што беше, всушност плукаат назад, во прилог на тоа криптичната 200 OK пораките од серверот. А малку криптичната, но каде е сето ова што доаѓаат од? Па, ајде да направиме една друга работа тука. Друга донекаде-криптичната команда, но вид ова на уредни по тоа што ни го открива токму она што се случува под хауба. Па се вратив на мојот Mac тука, јас се поврзани преку програма наречена SSH, безбедна школка, на друг сервер бидејќи повеќето компјутери Харвард блокира команда ние сме за да се кандидира бидејќи има оваа команда на некои сервери наречен traceroute кој ви овозможува да пронајдат пат помеѓу точките A и B, и досега ние сме биле преземање сосема здраво за готово што можам да напишеш во Google.com и некако се добијат податоци назад од половина пат низ земјата или на половина пат низ светот. Со traceroute ние всушност може да се нурне во малку подлабоко за тоа како интернет дела, и да видиме што се случува под хауба. Значи, да оди напред и произволно пронаоѓање на рута, да речеме, Stanford.edu, која е низ целата земја, и притиснете ентер. Оваа команда може да биде супер-брз или супер-бавно, но она што го гледате сега, линија по линија, е секој еден од чекорите или хмел помеѓу нас и Пало Алто, или Стенфорд, каде што тие имаат свои веб серверот. Значи она што не секој од овие линии претставуваат поконкретно, иако? А парче жаргон од интернет? [Студент, неразбирливо] >> Што е тоа? [Студент, неразбирливо] >> О, па така постојат моменти, но она што го прави секој ред - што мислам кога го велам хоп? 

Па, постојат овие работи на интернет се нарекува рутери. И рутери, како што сугерира името, рута информации од точката А до точката Б. Но, постојат неколку точки надвор a и b. Има C и D и E и F меѓу ред 1, кој се случува да биде IP адресата на компјутерот ми е, или мојот нумерички адреса, која уникатно идентификува мојот компјутер, и чекор 15, кој е всушност шестата веб сервер, очигледно, кој сум inferring од ова, или верзија 6 на нивната веб серверот во Стенфорд. Но она што е вид на уредни е, можеме да видиме на патот дека мојата 0 и 1 се зема од мојот компјутер да Стенфорд. Па чекор 1 е адресата мојот компјутер. Секој компјутер на интернет има единствен идентификатор што личи ова. Number.number.number.number. Некаде на овој кампус, веројатно во науката центар, е рутер наречен Core Портал 2-te83, што и да значи, па ова е еден од големите фенси рутери Харвард кој правци многу од нивните сообраќај. Еве уште на рутери Харвард, ова е граница портал, границата значење тоа е веројатно на периферијата на кампусот некаде. Потоа, тука е NOx еден, ред 4, што е Северна крстопат, која е голем интернет провајдер, интернет провајдер, кои места како Харвард поврзете до. Но, тогаш нештата се малку интересно во алинеја 6. Каде се моите битови одеднаш? Канзас. На светот има навика на користење на аеродромот кодови во многу од овие работи, или барем кратенки за држави или градови, така што изгледа како, во само 60 ms, пакет на информации, 0 и 1 е од мојот лаптоп доби целиот пат до Канзас, и повторно, во 60 ms. 

Покрај тоа, по Канзас, тие добија турнеја низ Хјустон, веројатно, како што е предложено од страна на името на овој сервер. Па само како сервер на интернет мора да има нумеричка адреса, тој може исто така, по можност, имаат малку повеќе човечко-пријателски адреса која луѓето излезе со. Сега, во чекор 8, ние не знаеме што е ова. Понекогаш рутери само вид на се игнорира, и тие едноставно не одговори на прашањата, па тоа е добро. На еден по чекор 8 е очигледно каде? L.A. Забележите во само 78 ms, она што ни е потребно луѓето како 6 + часа да направите физички, се пакети на информации на интернет 78 ms да патуваат толку далеку. Чекор 10 е во Лос Анџелес, како и, и чекор 11 чини дека се качил на север, во близина на Стенфорд. Ова е нивната граница рутер, или границата рутер. Неколку чекори на Стенфорд, кои се ни игнорирање, и на крај, доаѓаме до веб серверот во само 87 ms. Сега, сите овие бројки, како настрана, само да ви кажам колку време е потребно за податоци да се добие од мене за секоја од овие рутери, и тоа не е кумулативен. Она што оваа програма не е, за прв пат испраќа порака, во суштина, на првиот рутер. Потоа еден на вториот рутер, а потоа еден од третиот рутер, мерење секој пат. Така што во теорија, овие времиња ќе се зголемува или барем прилично блиску еден до друг, и, навистина, оние кои се во право тука на кампусот се супер-мал. Веднаш штом ќе тргнат низ целата земја, тоа трае податоци малку подолго да патуваат, поблиску до 100 ms, или дава да потрае. Но, ајде да одиме на друга насока сега. Како за универзитетот Кембриџ во Велика Британија? Дозволете ми, наместо да работи traceroute на www.cam за Кембриџ, . Наизменична струја за академски,. Велика Британија, и притиснете ентер тука. Тоа беше прилично проклето брзо. Моите податоци буквално отиде во Кембриџ, Англија, во тој дел од секундата на време. 

Да видиме патот што го зеде. Харвард, Харвард, Харвард, Северна крстопат, кој е еден интернет провајдер, и тогаш ова е Северна крстопат, а потоа бам. Што е меѓу чекорите 6 и 7, рутер 6 и 7? Атлантскиот Океан. И ние сме inferring ова од фактот дека одиме од 20 ms тука до 80 ms тука. Значи нешто зеде 60 ms, или дава да потрае, за да се добие повеќе. И тоа е веројатно голема водна површина. Она што се случува после тоа? Па, тука сме во Лондон, само 88 ms подоцна. Повеќе Лондон, повеќе Лондон, не се сигурни каде е ова, но ние ќе се претпостави дека е надвор од Лондон, Кембриџ тука, и конечно ние - буквално, Универзитетот во Кембриџ . Something.net, а потоа, конечно, во линија 16, нивната веб серверот е очигледно наречен Скорпија под хауба, иако ние го знаеме како www. Вид на ум-дува, мислам. Првиот пат кога го сторила тоа, целосно разнесе умот. За жал, Харвард блокира овој вид на сообраќај, обично, на мрежата. Па не можете да го направите супер лесно. Реализира, иако, ова овде е можно. Во ред. Да го земеме нашите 5-минутна пауза тука. Ние ќе се врати и се нурне во подлабок. Па ние сме назад, а ние сме вид на ambled околу во неколку различни насоки тука. Значи, да резимираме што точно се случува тука. Почнавме разговорот зборува овој јазик наречен HTML. Повторно, не е програмски јазик. Тоа е само јазик за Селектирај дека е во голема мера за естетика и структурирање на содржина во форма на веб страница. Но, HTML, според тоа, треба некој вид на механизам за патување помеѓу веб прелистувачот и серверот. HTML затоа вид вози на врвот на друг јазик, или повеќе правилно, протокол, познат како HTTP. 

И HTTP, како ние сме го виделе досега, е вид на аналогни на оваа човечка конвенцијата на тресење раце. Кога пребарувачот сака да побара страница од сервер, го праќа дека "добие" барање од прелистувачот на серверот, и тогаш серверот одговара со број како 200, се е во ред, како и HTML или некои лоши број како 404, датотеката не е пронајдена. Но, во меѓувреме, HTTP сама по себе не е на интернет, сама за себе. HTTP е само служба, карактеристика на интернет многу сличен на Г разговор е уште една услуга, слично како е-мејл е уште еден сервис. Има сите видови на нешта што може да направи на интернет. HTTP е само една од овие апликации. Така на врвот на - HTTP е на врвот на нешто друго кои не се споменуваат по име, можеби сте слушнале за по име, TCP / IP. Значи приказната ние само кажа дека е за сите како податоците патува од точката А до точката Б. И во овој случај, видовме на многу ниско ниво рутер да рутер да рутер да рутер, како податоците се всушност се пренесуваат. Но на патот, тоа ќе се судрите со различни пречки. Покрај овие рутери, постојат нешта наречени firewalls на интернет, и така податоци, како на пример дека бевме само пренесување Од мене до Стенфорд, од мене во Кембриџ, е испратена до, на ова ниво, нешто што се нарекува IP адреса. Видовме овој момент пред, и IP адресата е само нумеричка адреса од формата w.x.y.z, каде што секој од нив е меѓу нив, или дава да потрае, 0 и 255, иако не сосема може да се користат сите оние броеви. Но, секоја од овие променливи е број помеѓу 0 и 255. Значи IP адреса овие денови е 32 бита. 

Сега, тоа ни дава колку е можно IP адреси во светот? Околу 4 милијарди долари, бидејќи секое време ние сме пребројување на овластувањата од 2 сите на патот до 32 од нешто, што обично ни дава 4 милијарди. Значи тоа е многу IP адреси, но може да се чита, или вие сега може да се забележи во популарните печатени медиуми, притисни кон нова верзија на IP се нарекува IPv6. Токму сега ние сме со користење верзија 4. Тука навистина не е верзија 5, ние сме само скокање право на 6. Верзија 6 се случува да се користи 128 бита за IP адреси, која е freaking огромен. Ние не треба да се кандидира за сосема извесно време сега, но ние почнаа да се истрчаш на верзија 4 IP адреси, затоа што сите од нас имаат не само нешта како лаптопи и десктоп компјутери, многу од нас имаат телефони, многу од нас имаат и други уреди како TiVo и слично, кои имаат IP адреси себе. Харвард себе има десетици илјади компјутери. Така што светот е навистина истекува на IP адреси, барем на оваа форма. Така што во текот на следните неколку години, ви се случува да го видиш адреси на свој компјутер веројатно полека се промени како се повеќе и повеќе компании и универзитети проектот за поддршка на понова верзија. Но, IP адресата не е доволно за компјутер да побара податоци од компјутер б. Бидејќи компјутерот б би можело да биде сервер, и серверот, како што споменав порано, може да направи гроздовете на нештата. Тоа може да биде домаќин на веб страници, тоа може да биде мејл сервер, тоа може да биде Skype серверот, тоа може да биде разговор Г серверот. 

Сите овие различни услуги кои може да се обезбеди на серверот може сите, физички да биде на иста машина. Така што во прилог на IP адреси, во светот има работи вика пристаништа на интернет. А пристаниште е само број, па таму е единствен број за HTTP. Нејзиниот број е 80. HTTP исто така го користи бројот 443, но поконкретно, за шифрирана HTTPS. Секогаш кога ќе видите s, за сигурно, тоа е со користење на различен број. Постојат и други броеви, како 25, што се користи за нешто што се нарекува SMTP, инаку позната како е-мејл. Има нешто што се нарекува 22 за SSH, и таму е целиот куп на други пристаништа таму. Сега, ние, луѓето ретко се гледаат овие броеви. Сепак, кога ќе напишете во обраќањето како http://www.facebook.com, прелистувачот е тајно вметнување 80, затоа што ти си користејќи HTTP. Ако, наместо тоа, тип HTTPS, тоа е тајно вметнување 443. И можеме вид на се види тоа рачно ако се повлече до Brower и да одат во http://www.facebook.com:80. Затоа експлицитно не наведувајќи само името на веб страната но порта на која сакам да зборувам за, и притиснете ентер. Забележите исчезнува, бидејќи на пребарувачот претпоставува, ох, 80, јас не сум дури и ќе се мачат покажува дека за вас. Но причината за ова е дека ако јас всушност сакав да некому испратите е-маил, Јас навистина би било да е тоа испраќање на нив на порт 25, што се SMTP. А малку на симплификација, но некои од вас имаат пријатели кој всушност работи на Фејсбук, и тие, слично, имаат сервери кои добиваат е-мејл. 

Во секое време ви испрати е-маил, што Gmail прави за вас или Outlook или што и програма ќе се користи, тоа е вид на тајно вметнување тој број, како и, 25, во тој случај. Тоа е оваа комбинација на IP адреса и број, кои еднозначно ги идентификува компјутер на интернет и одредена услуга на тој компјутер. Сега, се разбира, повеќето од нас имаат веројатно никогаш внесе рачно IP адреса. Можеби имаш во апаратот, но во реалниот свет, не толку многу. Зошто не напишете IP адреси во пребарувачи? Тоа ќе работат, всушност, може да се види ова, дозволете ми да ви покажеме една друга команда која треба да работат повеќето никаде на кампусот на Харвард на Mac или PC. Има оваа команда се нарекува nslookup, името на серверот збор. Ако гледам нагоре www.cnn.com, излегува дека Ен-Ен има - ох, интересно. Ен-Ен го започнале да го користат Амазон веб сервиси. Може да знаете на cloud computing, еден Амазон од големите играчи во cloud computing. Она што јас само не беше, реков, "Дај ми ја адресата на веб серверот Ен-Ен" но излегува дека веб серверот Ен-Ен е раководен од страна на Amazon, Амазон веб сервиси, ова сугерира. И адресата на серверот кој е овој овде. Па не сум сигурен дали ова ќе работи, бидејќи тие не се користат за користење Амазон. Но, ајде да се обидеме тоа; http://, IP адреса, внесете, и - е тоа ќе функционира? Да. Тоа се случува на работа. Интернетот е супер-бавно денес. Но, во еден миг, ќе видите некои вест. Таму ќе одиме. Банката на Америка е тужен. Во ред. 

Тоа е затоа што оваа IP адреса едноставно се случува од страна синоним www.cnn.com. Се разбира, тоа ќе биде ужасно маркетинг е да се каже, посетете не на интернет во 50.112.94.127. Вие никогаш нема да се сеќавам. Па дури и овие денови може да се потсетиме на нештата како 1-800-COLLECT или Клучни зборови на светот излезе со за телефонски броеви. Која пред мобилните телефони беа прилично тешко да се запамети додека пак само да го напишете и да заборави за тоа. Па на интернет, исто така, ја има оваа конвенција на имиња и IP адреси, и таму се овие работи таму вика DNS сервери, име на домен системи сервери, кои ги претвориме IP адреси во имиња и обратно. Значи тоа е она што се случува под хауба. На крајот, ние имаме TCP / IP, што е ова многу ниско ниво протоколот тоа, навистина, само добива 0 и 1 е преку интернет, а го прави тоа, ставајќи ги во виртуелен коверт, ако сакате, и пишување на надворешната страна на ковертот IP адресата на дестинацијата, како и нумерички број на порта на услугата на таа дестинација дека сака да разговара. Во меѓувреме, на ковертот таму е исто така нешто познат како повратна адреса, која е вашата IP адреса, така што кога-Ен-Ен добива пакет на информации од вас, отвора овој виртуелен коверт, гледа дека сакате почетната страница, тоа го знае од испраќачот дел од овој виртуелен плик кого да испрати HTML назад. Па ајде да ги разгледаме во тоа во малку повеќе детали. Ова е од компанија наречена Ериксон, од неколку години назад. И тие се некои слободи со тоа како Интернетот всушност работи, но стравува многу повеќе визуелна слика од само креда тука. Па јас ви даде "малку на интернет." 

[Нараторот] За прв пат во историјата, луѓето и машините работат заедно, сфаќајќи сон. А обединувачка сила која не познава географски граници. Без оглед на раса, кредо или боја. А новата ера, каде што комуникација навистина ги зближува луѓето. Ова е Зората на Нет. Сакате да знаете како тоа функционира? Кликни тука за да почнат да ви патување во мрежата. Сега, токму тоа се случи кога ќе кликнете на овој линк? Го започна проток на информации. Оваа информација патува надолу во ваш личен mailroom каде г-дин IP пакети него, етикети, и ја праќа на својот пат. Секој пакет е ограничен во неговата големина. Пошта соба мора да одлучи како да се подели на информации и како да го пакет. Сега, пакетот треба етикетата содржи важни информации како што се адреса на испраќачот, адресата примачот, и видот на пакетот е. Бидејќи овој пакет се случува излез на интернет, Таа, исто така добива адресата за proxy сервер, кој има посебна функција, како што ќе видиме подоцна. Пакет сега е лансиран кон вашата локална мрежа или LAN. Оваа мрежа се користи за да се поврзете сите локални компјутери " рутери, принтери, и така натаму, за размена на информации во рамките на физички ѕидови на зградата. На LAN е прилично неконтролирано место, и, за жал, несреќи може да се случи. На автопатот на LAN е преполна со сите видови на информации. Овие се IP пакети, Новел пакети, AppleTalk пакети. Тие ќе против сообраќај, како и обично. Локалните рутер чита адреса и, ако е потребно, лифтови пакет на друга мрежа. Ах, на рутерот. А симболот на контрола во навидум неорганизирана светот. [Рутер неразбирливи и да разговараат со себе] 

[Нараторот] Ене го, систематски, незасегнатата, методолошки, конзервативни, а понекогаш и не е сосема до брзина. Но барем тој е точен, за најголем дел. Како пакети напушти рутер, тие прават нивниот начин на корпоративната Интернет и главата за рутер прекинувач. А малку поефикасен од рутер, рутерот прекинувач игра брзо и лежерно со IP пакети, вешто ги рутирање заедно својот пат. А дигитален 'pinball волшебник, "ако сакате. [Рутер прекинувач зборува за себе] [Нараторот] Како пакетите ќе пристигнат на нивната дестинација, тие се подигнат од страна на мрежен интерфејс, подготвена да биде испратена до следното ниво. Во овој случај, на прокси. Прокси се користи од страна на многу компании, како вид на средината човек со цел да се намали оптоварувањето на интернет конекција и од безбедносни причини, како и. Како што можете да видите, пакетите се од различни големини во зависност од нивната содржина. На прокси отвора пакет и гледа за веб адреса или URL. Зависност од тоа дали адресата е прифатливо, пакет се испраќа на интернет. Има, меѓутоа, некои адреси кои не ги исполнуваат со одобрение на прокси. Тоа е да се каже, корпоративни или управување со упатства. Овие се по кратка занимаваа со. Ние ќе мора ништо од тоа. За оние кои прават тоа, тоа е на патот повторно. 

Потоа, заштитниот ѕид. Корпоративниот заштитен ѕид служи две цели. Тоа го спречува некои прилично непријатни работи од интернет од кои доаѓаат во на Интранет, и тоа исто така може да ја спречи чувствителни корпоративни информации од тоа да биде испратена кон интернет. Откако преку огнениот ѕид, рутер крева пакет и ја става врз многу потесен пат, или опсег, како што велат. Очигледно, на патот не е доволно широк за да ги земе сите. Сега, може да се прашувам што ќе се случи со сите оние пакети кои не го прават тоа на патот. Па, кога г-дин IP не добие признание дека пакетот е примен во догледно време, тој едноставно испраќа замена пакет. Ние сега се подготвени да влезат во светот на интернетот. А пајакова мрежа на меѓусебно поврзани мрежи кои span нашите целиот свет. Еве, рутери и свичеви се воспостават врски помеѓу мрежите. Сега, на интернет е една сосема различна средина од вас ќе се најде во рамките на заштитни ѕидови на вашата LAN. Од тука, тоа е Дивиот Запад. Многу простор, многу можности, многу работи да истражуваат и места да одам. Благодарение на многу малку контрола и регулирање, нови идеи најде плодна почва за да им помогнам на ковертот на нивните можности. Но, бидејќи на оваа слобода, одредени опасности исто така демнат. Вие никогаш нема да знаеш кога ќе ти се исполнат страшната пинг на смртта, специјална верзија на нормална барање пинг, што некоја будала смислена да се плеткаш доверчив домаќините. Патеката нашите пакети се може да биде преку сателит, телефонски линии, безжични, или дури и презокеански кабел. Тие не секогаш се најбрзо или најкраткиот правци можно, но тие ќе одам таму на крајот. Можеби тоа е зошто тоа е понекогаш се нарекува "На World Wide Wait". Но, кога сè е работи правилно, можете да ја заобиколат светот пет пати во текот на пад на шапка, буквално. И сите по цена на локален повик или помалку. Кон крајот на нашата дестинација, ќе најдеме друг огнениот ѕид. 

Во зависност од вашата перспектива како податоци пакет, firewall-от може да биде бастион на безбедност или страшната непријател. Сето тоа зависи од која страна сте на и она што вашите намери се. На firewall-от е дизајниран да ги споделите само оние пакети кои ги исполнуваат неговите критериуми. Овој ѕид работи на пристаништа 80 и 25. Сите обиди да влезат преку други пристаништа се затворени за бизнис. Порта 25 се користи за пошта пакети, додека порта 80 е влезот за пакети од интернет на веб серверот. Внатре во заштитниот ѕид, пакетите се прикажани повеќе темелно. Некои пакети да се направи тоа лесно преку царината, додека други изгледаат само малку сомнително. Сега, на firewall-от службеник не е лесно измамени, како на пример кога ова пинг на смртта пакет се обидува да се маскира како нормален пинг-пакети. [Firewall офицер зборува за пакети] [Нараторот] За оние пакети среќа доволно за да го направи овој далеку, патувањето е речиси завршена. Тоа е само линија на интерфејс за да бидат преземени во веб сервер. Денес, веб сервер може да работи на многу нешта, од супер на веб камери на компјутерот на вашиот монитор. Зошто не вашиот фрижидер? Со соодветна подесување, можете да дознаете дали имате профит за пилешко Cacciatore, или ако треба да одите на шопинг. Запомнете, ова е зората на Нет. Речиси се 'е можно. Еден по еден, пакетите се примени, отвори, и уште неотпакувани. Информациите што ги содржи, што е, вашето барање за информации, е испратен кон веб сервер апликација. Пакет самата се рециклира, подготвени да се користи повторно и исполнет со вашата побарана информација, однесува, и испрати на патот назад кон вас. Назад минатото заштитниот ѕид, рутери, и во текот на Интернет. Назад преку вашиот корпоративен ѕид и на вашиот интерфејс, подготвени за снабдување на вашиот веб прелистувачот со информации што ви го побара. Тоа е, овој филм. Задоволни со своите напори, и верувајќи во подобар свет, нашите сигурен податоци пакети вози надвор блажено во залезот на друг ден, знаејќи целосно тие служат нивните господари добро. Сега, не е тоа среќен крај? [Malan] Океј, тоа е доволно. Ние ќе се видиме следната недела. [CS50.TV]