>> [Музички]
Дејвид Ј MALAN: Во ред, добредојде назад.
Ова е CS50.
Ова е крајот на недела седум.
И тоа е крајот на тој чистач лов од проблемот постави четири
кои може да се сети.
По се опоравува сите оние JPEG слики на персоналот,
сте биле оспорени, ако сакате, да се фотографира со толку многу
на оние луѓе што можеш.
Добивме целиот куп на поднесоци во текот на изминатите неколку недели,
Навистина, неколку право пред пладне денес, од кои некои се оние тука,
фатени тука in-- изгледа like-- Annenberg Сала во работното време, овде
во Ловел хаус со Ник.
Еве Рамон бидат фатени на телефонот.
Ова беше на CS50 ручек.
Ова беше Џејсон skyping со покреативен соученик,
кој му телефонирал на овој начин.
Ние не знаеме што е ова беше.
>> [Смеа]
>> Дејвид Ј MALAN: Но, тоа е вреди да се гигабајт.
Тука е Чанг, кој буквално истрча на сцената
да избегнат да бидат фотографирани еден ден, но на крајот беше фатен.
Тука е Ник.
И тука е Алисон од страна на полиња.
И Zamyla дури и се најде на сала за танц конкуренција.
Па ние ќе одиме преку овие фотографии, дознаам
кои поднеле најмногу најрано и награда
еден прекрасен награда, како вети во спецификации.
И ние, исто така, ќе го следат околу просторот што се работи.
>> Неколку announcements-- па ручек е, пак, овој петок во 13:15.
Ако сакате да ни се придружите, RSVP во тоа URL тука.
Џејсон се појавува повторно тука од една од деловите неколку години
назад, што се случи да падне на Ноќта на вештерките.
И навистина, тој облечен како тиква таа година.
Ако се види овој дел на неговото од 2011 секција
осум, ако сте љубопитни, на CS50.tv, мислам дека
ова беше година во која својата воздушна пумпа работеше.
>> Ако тогаш ќе се види на слични делот во 2012 година,
ќе видите ова Џејсон многу отпушта, бидејќи тужбата веќе не функционираше,
што е само да се каже овој петок, ако сакате
сакале да издлаби од тиква со Daven и Габе и други, RSVP на глави
на cs50.harvard.edu адреса.
Тој ветува дека ќе биде голема забава.
Daven, ние сме изјави, е врежан тикви сите од неговиот живот.
Габриел од Бразил никогаш не врежало тиква за Ноќта на вештерките.
Значи да се биде таму со нив, како што учи.
>> Семинари, meanwhile-- така ќе дознаете наскоро
за тоа што нашите очекувања се за завршниот проект, што во суштина
ќе се сведуваат на дизајнирање и имплементирање на
повеќето секој проект од интерес за вас, иако се предмет на одобрување
и насоки од вашата настава колеги.
Кон крајот на семестар, ќе се воведат број
семинари, која се опционални класи предводени од наставата соработници и Харвард
персонал, пријатели на курсот низ кампусот, на различни теми кои
се тангентна на основната програма Курсеви
но сепак се применуваат, забава, и различни за потенцијални крајни проекти.
>> На пример, прво, ако сакате да се регистрираат, шеф на тоа рачно таму.
И ова е постава за семинари за оваа година сам.
Но сфати имаме десетици семинари од изминатите години, од кои сите
се поврзани во менито Семинари опција на веб-сајтот на курсот.
Значи, ако сте размислување за случува надвор од вашата удобност зона
или подигање на нови вештини, на пример, програмирање на iPhone
апликации со Свифт, нов јазик од Apple или Objective-C
или Андроид апликации или програмирање [? знак?] светилки, или било која од темите
тука и повеќе, поради проверка надвор од регистрација страница.
>> Така почнавме и склучен на Понеделник со гледање на HTTP.
Толку брзо refresher-- HTTP, HyperText Протокол за пренос.
Но, она што го прави тоа навистина значи?
Што значи тоа навистина значи?
Дали е тоа рака?
Знам дека си само си ја почеша главата.
Но сакате да предложи она HTTP е?
>> ПУБЛИКАТА: Како компјутери комуницира со [нечујни].
Дејвид Ј MALAN: Јас го пропуштив последниот дел.
Како компјутерите комуницираат with--
>> ПУБЛИКАТА: Интернет сервери.
Дејвид Ј MALAN: Good-- со интернет сервери, и конкретно, веб сервери.
Затоа што се потсетиме, има еден куп на услуги на интернет, од кои некои
го користите веројатно дневно меѓу разговор и порака, за разговор и веб и е-мејл,
и слично.
И HTTP е само протокол кој веб прелистувачи
зборуваат при комуникација со веб сервери, и обратно.
И аналогни во човечкиот свет може да биде,
Јас се прошири мојата рака да се ослободи некои други човечки и тој или таа
признава преку проширување неговата или нејзината рака, како и.
Па тоа е само протокол, збир на конвенции.
>> И она што навистина се оние конвенции?
Па, тоа само се сведува на испраќање на пораки и назад,
како што е прикажано тука.
И има неколку начини на кои може да се испрати овие пораки.
А можеби и повеќето заеднички е познат како добие.
И ние ќе го види контрастот на оваа пред долго.
>> Туку добие барање од пребарувачот на серверот само изгледа вака.
Тоа е еден куп на текст кој го става во внатрешноста на виртуелна плик.
На надворешната страна од пликот кој одат неколку парчиња детали.
Она што треба да одат на коверт, така да се каже,
со цел да се добие барање како ова од мене на веб сервер?
Да.
>> ПУБЛИКАТА: Вашата IP адреса.
>> Дејвид Ј MALAN: Мојата IP адреса во Од поле, така да се каже,
и се разбира, IP адреса на примачот.
Но, во случај на веб пакет, ние треба малку повеќе детали
Тоа не е доволно да се испрати плик на сервер,
поради што серверот може да биде слушање за различни видови
на интернет сообраќај.
Па што друго не ни треба Покрај IP адреса на примачот?
Да?
>> ПУБЛИКАТА: Дали е TCP?
Дејвид Ј MALAN: Добро.
TCP--
>> ПУБЛИКАТА: адреса.
>> Дејвид Ј MALAN: Адреса, или порт, како што се вика.
Блиски, но голем број на TCP порта.
И има еден куп од нив.
Но сигурно на повеќето запознаени треба на крајот
биде 80, која е стандардна оној што се користи за веб сообраќај.
И уште запознаени еден наскоро ќе биде 443,
кој се користи за безбедна веб- сообраќај, адреси кои почнуваат со https.
>> Значи ова е она што се случува внатре во тоа плик.
И да добијат / само значи, им даде на ме на стандардниот веб страница.
Дај ми коренот на хард вози на оваа веб сервер.
И се надевам дека, на веб- серверот ќе одговори со, во ред
и бројот 200, што е само конвенција велејќи дека, да, сите
е навистина во ред.
Тука е страница.
Од типот на веб страница ќе се биде текстот, но поконкретно, HTML,
кои ние сме за да се нурне назад во.
И точка точка точка само средства, тука е HTML.
И тоа е каде што ги собереш на приказната и денес,
всушност пишување на HTML, HyperText Markup Language, кој
е јазикот на кој веб-страници се напишани.
Тоа не е програмски јазик.
Нема функции или јамки или услови.
Тоа е маркап јазик, како и повторно гледаме денес,
кој ви овозможува да ги одредите како да структура и стилизирам
естетски веб-страница.
>> Значи ова беше еден и само страница што навистина
погледна, ако на кратко, во понеделникот.
И ќе забележите неколку истакнатите карактеристики.
Има многу на отворен аголни заградата и блиски аголни заграда.
Помеѓу оние аголни заградите се зборови.
И ние си оди за да започнете повикувајќи оние зборови тагови.
Толку отворен заградата глава и затворени заградата глава
се отворени и затворени тагови, или на почетокот и крајот тагови
односно на HTML елемент, како ние ќе го наречеме, наречен главата.
И го применува истиот жаргон на телото во HTML и така натаму.
>> И она што е убаво е HTML-- и навистина, ние ќе
поминуваат ужасно малку време за тоа, бидејќи ќе најчесто само дознаам
што карактеристики има, кога ќе всушност имаат конкретен проблем
да solve-- ќе најдете дека прелистувачот е прилично глупава.
Тоа е само случува да do-- не за разлика од на computer-- она ​​што ви го кажам да се направи.
И така, кога имате отворена заградата на HTML во самиот врв
таму, дека во суштина се само значи, еј, интернет пребарувач,
тука доаѓа веб страница напишан во HTML.
>> Кога гледа отворен заградата главата, тоа само значи,
еј, интернет пребарувач, тука доаѓа на главата, или врвниот дел од мојата веб-страница.
Кога гледа затворен држач главата, тоа само значи, еј,
тоа е тоа за главата.
Чекање за нешто друго.
И дека нешто друго е очигледно ќе биде телото.
И кога ќе немаат ознака, како имате само здраво, запирка, свет,
тоа е само случува да бидат сурови текст кој во крајна линија се прикажува на екранот.
>> Сега, ќе забележите премногу вовлекувањето тука.
Што веројатно може да заклучиме како ние сме го stylizing.
Секој пат кога ќе се отвори ознака, така да се каже, јас алинеја.
И секој пат кога затвори таг, јас не-алинеја,
слични во духот со големи загради.
И подалеку од тоа, јас сум вид на користење на мојот пресудата.
Забележете дека јас не се мачат удирајќи Внесете внатре во тоа насловот таг.
Зошто?
Па, јас само одлучи изгледаше малку почиста за мене, човечките,
само да не се мачи тоа го прават.
Значи, повторно, има некои пресуда повици само
како таму е во C или било кој јазик.
>> Но забележите дека премногу ова вовлекување е подложна на ментална модел,
да не се над комплицира тоа.
Но дрво, нели?
Ако мислите дека на веб- страница, очигледно напишани
вака, како да бидат убаво вовлечен тој начин,
речиси може да се мисли на отворен заградата HTML затворени заградата таг е демаркацијата
во коренот на јазол, семејно стебло стил јазол во стилот на дрва
ние погледна во петокот минатата недела.
>> И навистина, имаме на десната тука она што ќе го наречеме ДОМ, Д-О-М, документ
објект модел, фенси начин да се каже дрво, што претставува дека HTML.
И ќе забележите дека HTML има, ќе речеме, како семејство дрво, две деца.
Лево е главата.
На десната е тело.
>> И како безумна мисла вежба, главата, се разбира, има колку деца
според оваа структура?
Па само една, title-- и тоа е причината зошто имаме
на стрелката оди од глава до титулата.
Па тоа е како тоа лице во семејно дрво имаше само еден потомство.
А потоа самиот наслов може да се каже дека имаат дете премногу.
>> Потсетиме дека HTML имаше Здраво, запирка, светот под него.
И јас сум едноставно подготвени во рамките на една овална, наместо на правоаголник само
да се пренесе семантички дека иако тоа е еден јазол во стеблото, така да се каже,
тоа е вид на фундаментално различни.
Тоа не е таг.
Или повеќе правилно, тоа не е елемент.
Тоа е само текст јазол, ако сакате.
Но, овие се сосема произволни човечки конвенции.
Ова е само сега мојот начин на претставува она што јас ќе како агрегат
јавете се на документот.
>> И како настрана, работа во супер горниот лев агол,
отворена заграда извичник doc тип HTML, ова изгледа како ознака,
но тоа е глупаво агол случај кога тоа е само таму, копирани и атипичен
за да се покаже на пребарувачи ова е HTML верзија 5.
Светот постојано се менува она што првата линија на код во една страница треба да биде.
Ова само значи верзија 5.
Значи тоа не е доста изгледа како и другите.
>> Сите во право, па со тоа рече, сега ќе го цениме
оваа прилично овој глупав тетоважа некој доби.
>> [Смеа]
>> Дејвид Ј MALAN: Сите во право, и сега ајде всушност нурне
во прави нешто со ова.
Ќе потсетиме дека последен пат Јас го отвори CS50 апарати
и јас не нешто како едноставно како отворање gedit.
И јас зачувани во датотеката дури и на мојата desktop-- никаде special--
како hello.html.
>> Значи, дозволете ми да го направи тоа again-- hello.html Enter.
И сега во оваа датотека, јас ќе одам да оди напред и да се реплицираат она што ние само
saw-- doc тип HTML Потоа јас ќе одам да направи отворен заградата HTML затворени заграда.
А потоа јас ќе одам да се превентивно отворање или затворање на тагот.
Зошто?
Само така не го заборавам подоцна.
Тоа е само добра пракса, како и отворање и затворање на големи загради сите одеднаш.
>> А потоа она што се случило следно?
Можете да мислам на тетоважа.
>> ПУБЛИКАТА: На главата.
>> Дејвид Ј MALAN: На главата.
А потоа во тука, јас имаше насловот, си мислам.
А насловот беше произволно, Здраво, свет во близина на титулата.
А потоа надолу тука, телото, на course-- тогаш ние затвори телото таг.
А потоа само малку redundantly, Имав истото овде долу.
>> Така тврдам дека ова е веб-страница.
Ова е нешто што сега може да живее на интернет,
иако се разбира, тоа е буквално кои живеат на мојот десктоп во моментов.
Но, навистина, ако јас се минимизираат gedit, Ќе видите на мојот десктоп неговата икона.
Иако ова е апаратот, можете да го направите тоа на Mac OS
без TextEdit или Прозорци со Notepad дури.
>> И ако одам напред и двоен клик дека дури и select-- добро, ајде да
Не избирајте дека поради Хром не е отворање.
Ајде да одиме напред и да се отвори Хром.
А потоа направи команда-О за отворен И да стигнете до мојот десктоп
и да се отвори таа датотека.
Тоа е како интернет пребарувач толкува HTML, врвот до дното, лево кон десно.
Еј, прелистувачот еве на HTML.
Тука е главата.
Еве титулата.
Еве телото.
И навистина, ова е како тоа го прави оваа веб страница.
>> Но забележите на URL-то.
Никој од вас не може да се повлече до овој специфичен страница на вашиот лап-топ компјутери, токму сега,
дури и во внатрешноста на вашиот апаратот преку дека URL-то,
затоа што датотеката: // покажува тоа е всушност на мојот датотечниот систем, мојот хард диск,
а не твое.
Значи ова не е сето тоа корисно.
>> Ајде сега се движи кон користење на вистинските веб серверот.
И излегува на CS50 апарати е повеќе од само средина каде
можете да го напишете C код и ги собира и тоа работи како што сте правеле.
Таа, исто така е конфигуриран од страна на вработените да претставуваат типичен веб-
сервер кој е на интернет, која може да се плати за
или оној кој е во т.н. облак.
>> И тоа е водење стандард слободен софтвер со отворен код
софтвер, на пример, нешто наречен Апачи, што е можеби
уште од најпопуларните веб- сервер софтвер во светот
дека илјадници веб-сајтови користат денес.
И тоа, исто така, дури има и софтвер како MySQL,
кој е база на податоци на серверот дека ние на крајот ќе дојдеме до,
што е само да се каже Јас може да започне лекување
мојот апарат како полноправно сервер дека јас не плаќам за на друго место.
Тоа само живее на моето лаптоп за развој и погодности цели.
>> Па ајде да одиме напред и ги искористат предностите на ова.
Одам да се оди напред и да отвори терминален прозорец.
А јас ќе одам да се оди напред и да move-- всушност, прво јас сум
ќе стигнете до мојот десктоп.
Ако го направам ls, има hello.html.
И јас одам да се оди напред и да почне со користење на
нов директориум ние сме не се користи пред денес.
>> hello.html-- Одам да се движат да ../vhosts за виртуелни hosts--
повеќе за тоа во future-- и потоа во директориумот наречен локалниот компјутер,
што е прекар даден на речиси било кој компјутер, без разлика дали тоа е Mac, PC,
или Linux компјутер, а потоа посебно во директориумот дека ние,
вработените веќе создадена за вас кога сте ја превзеле на апаратот наречен
јавноста.
И како што сугерира името, нешто Го ставам во оваа папка, во теорија,
се случува да сега биде јавноста, барем за луѓето
кои имаат директно конекција на мојот компјутер.
>> Па сега дозволете ми да оди напред и да направи ЦД на истата директориум
па јас може да се види она што е случува и тип LS.
И навистина, тоа е Единственото нешто таму.
Тврдам дека сега, бидејќи јас се стави ова поднесе hello.html внатрешноста на директориум
наречен јавноста внатрешноста на директориум наречен локалниот компјутер внатрешноста на директориум
наречен vhosts, што благодарение на CS50 персонал
е пре-конфигуриран да биде коренот на вашиот веб сервер,
Сега можам да се надевам го направите тоа.
>> Одам да се отвори нов таб.
И јас одам да се оди да не поднесуваат: //.
Одам да се користи вистински HTTP / локалниот компјутер, кој
повторно, е прекар за мојата сопствен сервер.
А потоа јас ќе одам да се оди на она што името на датотеката, само за да биде јасно?
Каде е оваа приказна веројатно нема?
hello.html.
>> Значи со други зборови, сакам да сега ова е мојот компјутер, мојата апаратот,
како да е вистински сервер.
Нејзиниот прекар е локалниот компјутер.
Но мислам дека на локалниот компјутер како што е како Facebook.com google.com, сеедно.
Тоа е само мојата локална име.
А потоа конечниот сакам е во коренот на хард дискот, така да се каже,
или коренот на веб серверот, ergo напред коса црта, а потоа
на hello.html името на датотеката.
>> Дозволете ми да одзумирате и притиснете ентер.
И навистина, е сега мојот веб-страница.
Така, тоа е малку поинаква.
И тоа е само како underwhelming.
Ова е старата верзија.
Дозволете ми да се намали на фонтот назад.
Ова е стар.
Ова е нова.
Но, она што е фундаментално се случува сега е дека HTTP се користи.
>> Да се ​​направи ова малку повеќе јасно или, ако сакате, малку посложена.
Дозволете ми да одат во долниот десен агол на мојот апарат.
И ќе забележите дека сето ова време, има е број.
Тоа е уникатната адреса на вашиот CS50 апаратот.
Тоа е приватна адреса, Како што наведува од страна на 172,16,
што само значи само физички да пристапите до оваа веб сервер.
Сè што е огнен ѕид, и убаво заштитена од останатите
на светот, бидејќи на овој адресирање.
>> И сега се забележи иако ако одам во оваа адреса, а не во мојот апарат,
но во Mac OS-- Одам да се вратам овде.
Ова е мојот Mac сега.
И сега ќе одам да се отвори оваа верзија на Хром тука.
А јас ќе одам да одат на http: //172.16.25 / И заборавам на rest-- 133.
>> Па ќе одам да го посетите од мојот Mac дека IP адресата /hello.html Enter.
И сега гледам од мојот Mac дека мојот CS50 апарати, кој е
IP адресата е дека број, навистина се однесуваме
како веб сервер на интернет.
Тоа не мора убав лесно да се се сетам на името како Facebook.com,
но тоа е со користење на HTTP очигледно, иако Хром
е вид на поедноставување на светот за нас, но не ни покажува за HTTP.
Но, ова е навистина точно тоа.
Chrome е само заштеда на некои тастатурата овие денови.
И тоа е она што ние сега го видите.
>> Значи тоа е сите фини и добри.
Но, тоа е прилично underwhelming страница.
Дозволете ми да одат во и направи нешто малку различни сега.
Значи, дозволете ми да се врати на gedit.
И наместо здраво, свет, ајде да се стави слика.
И јас тврдеше дека од before-- да си одам во мојот localhost директориум јавноста.
И дозволете ми да оди напред и да се копира целиот куп на датотеки од денес
од мојот Dropbox папка во тука.
>> Сега, ако сум тип LS, погледнете на сите овие датотеки
дека јас сум дистрибуиран од страна на веб-страница разбира однапред од денес,
од кои една е уште hello.html.
Па таму е дека еден.
И се сеќавам овој глупав еден од минатата time-- cat.jpg.
Значи, дозволете ми се обиде да го вградите cat.jpg внатрешноста на мојата веб-страница.
>> Одам да се оди напред и не cat.jpg, спаси.
Дозволете ми да се вратам на Хром.
И дозволете ми да зумирате во фонт и сега ја превчитате.
Упс, каде да го ставам ова?
Standby-- јас се уште имаат стари верзија од мојот десктоп отворени.
Значи, дозволете ми да одат во мојот vhost, мојата localhost, мојата јавноста и hello.html.
Па сега дозволете ми да оди напред и да велат cat.jpg внатрешноста на телото
каде што сакате да биде прикажани и повторно.
Се разбира, тоа не е точно.
>> Па јас треба да се каже на прелистувачот малку повеќе намерно она што сакам тоа да се направи.
Едноставно со пишување на името е очигледно не е доволен.
Така се потсетиме дека има уште еден ознака, слика, img за кратко.
Тоа е само затоа што луѓето не ми се допаѓа тип целосна зборови.
И потоа можеме да направиме извор = "cat.jpg".
>> И сега јас ќе одам да направите едно нешто различно тука.
Иако сите нашите тагови досега имаат
имал овој поим на почетниот таг и крај ознака,
која не навистина да се направи чувство за слика, нели?
Слика е или постои или не постои.
И така луѓето доаѓаат со поедноставен конвенција.
Кога ќе имаат ознака што може да и започнете и завршите во исто time--
тоа може да биде празен, така да speak-- само стави напред коса црта во внатрешноста на етикетата
на самиот крај.
Сега дозволете ми да се вратам на мојот интернет пребарувач.
Хит Освежи ја ѓаволите, нешто не е во ред.
Веројатно сте виделе ова повремено на интернет,
дури и ако тоа не е е вашата вина.
Тоа е грешка на веб-серверот.
Што оди ова изгледа да се покаже?
Тоа е скршен.
Тоа е каде што на сликата припаѓа.
Да?
>> ПУБЛИКАТА: Но, тоа не го прави тоа имаат пристап до сликата.
>> Дејвид Ј MALAN: не имаат пристап до сликата.
Тоа, или уште полошо, можеби тоа дури и не постои.
Ајде да видиме ако не можеме да се дијагностицира тоа.
Потсетиме од последен пат дека ако во Хром, во апаратот,
или дури и на вашиот Mac или PC, одите во менито програмери
и да одат во развојни алатки опција, која, најверојатно, сте
не се користат толку, или било кога.
И ако одам да се поврзат и вчитување на страната,
ајде да всушност се погледне на HTTP барања кои се направени.
>> Тоа изгледа како hello.html е навистина во ред, па оттука и 200.
Но cat.jpg е 403.
Па тоа не е 404.
Датотека веројатно постои.
403 значи забрането.
Значи ова е малку збунувачки.
Одам да се врати на мојот терминален прозорец.
Дозволете ми да зумирате до тука.
И дозволете ми да се направи една ls.
Има истите тие датотеки.
>> Сега дозволете ми да се направи ls-l, што сте веројатно
користат пред да се погледне во датотеката големини можеби или маркерите за времето.
И можеме да видиме еден куп на огромна информации.
Но забележите неколку детали.
Еве hello.html во оваа ред тука и тука е cat.jpg.
И тоа е само апаратот се корисник пријателски, преку истакнување на JPEG е
во пурпурно вака.
Но, што друго е различна покрај големината на датотеката и името на датотеката?
>> ПУБЛИКАТА: [нечујни].
Дејвид Ј MALAN: Да, има уште два Р овде.
Информации што hello.html има случува.
Значи излегува дека името на овој директориум јавноста е важно.
Ништо во овој директориум е замислена да биде јавна.
Но тоа не е доволно само да се откажат од датотеки во таму.
Исто така ќе треба да се промени начинот на датотеки,
промена на дозволи за на датотеката за проактивно не
биде стандардно поставување, а тоа е дека само јас може да се прочита
и тоа пишувам, да биде сопственик.
Сакам целиот свет на сите да да биде во можност да го прочитате мојот датотека, така да се каже.
Читаат само значи ја видите.
>> И навистина, како што ќе видите во проблемот постави седум, тоа е она што значи овие Р.
Средната овие два Р споделите со сите друго место во светот, исто така, го прочита,
особено сега кога тоа е во овој директориум.
Значи наједноставниот начин да се поправи ова е да се одат на мојот брза и не подржуваат за промена
на владата, а потоа направи + R, целосно, сите, сите, плус r за читање,
а потоа cat.jpg Enter.
Ништо не чини да се случи, што обично значи добра работа.
Така ls-l again-- сега ајде да погледнеме cat.jpg.
И оваа дозвола чини дека се променети.
Како настрана, ако се направи грешка и вас, на пример,
само направи your-- Не know-- есеј јавно достапни преку незгода,
можете да го направите спротивното, chmod а-р.
Иако, искрено, тоа не треба да биде во јавниот именик
во секој случај ако тоа е загриженост.
>> Па сега ајде да се вратиме на мојот интернет пребарувач и повторно.
И јас одам да кликнете малку Ghostbusters
симбол да го исчистите дека дел од екран, така што можеме да видиме нови барања.
И навистина, тука е Намќор Кат од порано.
Но, уште поважно, технички, постои
број 200, која значи добивме во ред.
Сите во право, па тоа е се во ред и е добро.
Но, ние не сме прави најдоброто од веб-сајтови,
ниту сме случува да се обидат премногу тешко да се направи fanciest на веб-сајтови денес.
Но, ајде барем направи нешто супер запознаени пред растреперува
исклучување на неколку други етикети.
Па претпоставувам дека не само сакаат мачка тука.
Претпоставувам дека всушност сакаат ова мачка да се поврзе со нешто.
>> Јас би можеле, на пример, направи нешто како ова.
еден за сидро href за хипер референца equals--
и ајде да се направи нешто како www.google.com блиску
Цитат блиску заграда.
И сега барате мачки.
Затвори сидро таг.
Значи ова е само еден вид на фундаментално нови детали.
Таг се разбира, е поинаква.
Тоа е името на за сидро href или хипер референца.
>> Но, уште поважно, има ова синтаксичка функција овде.
Тоа е она што ние ќе почне повикувајќи не таг, но атрибут.
И атрибут е нешто што модифицира однесувањето на таг.
И овој атрибут, href средства, промени однесувањето на ова сидро
така што кога е кликнато, тоа оди на овој URL тука.
И, се разбира, дека URL е Google.
>> Во меѓувреме, што е ова текст тука ќе биде?
Па, тоа се случува да биде она што човечкото всушност
гледа како на подвлечениот линк, толку едноставно како што.
Па ајде да се обидеме ова.
Дозволете ми да го спаси.
Јас сум сеуште во hello.html.
Но во верзиите на интернет, ќе видите вистинските имиња на датотеки што претходно подготвени.
Дозволете ми да оди напред и да ја превчитате.
И сега тоа е многу underwhelming страница уште.
Но, ако јас лебдат над there-- и тоа е малку мала,
but-- можете да видите во долниот лев агол на вашиот екран,
тоа е навистина се случува на google.com.
И ако јас кликнете на тоа, тоа ќе размахване мене начин на вистинската Google.
>> Но забележите можност за тука експлоатација, како настрана.
А ние ќе се вратам на други прашањата на безбедноста пред долго.
Затоа што таму е ова дихотомија помеѓу каде и да одите и што ќе кажеш,
можете да направите нешто како this-- http://www.google.com.
Добро, а сега ако јас ја превчитате по спасување таа страница,
тоа изгледа како јас ќе одам да отидете на Google.
Но, нема причина јас мора да одат на Google, нели?
Јас всушност би можеле да одат на нешто како badguy.com, вчитување на страница овде.
И информации, се уште изгледа како Google.
И само ако јас сум остар доволно за да лебдиш овде
гледам тоа дури и ќе оди на друга локација.
>> Значи, ако некогаш сте добиле е-маил, особено
еден од Paypal, или навидум од Paypal
со барање да се најавите во вашиот профил, овој
Затоа никогаш не треба да некогаш кликнете на линкот во пораки,
искрено, сите линкови во пораки.
Ако знаете дека имаат вистински пари во PayPal или банка
на Америка или Фиделити или било која веб-сајт, рачно да го внесете.
Бидејќи гледам колку е лесно е да се трик некој во презентирање на она што
изгледа како линк.
Но, тоа всушност би можеле да одат апсолутно насекаде.
>> И има многу поголема заканите од ова.
Всушност, ова е малку на тангента сега, но еден
од најдобрите што некогаш сум го видел која оттогаш е затворена,
е некој доведе луѓето to-- така што ова може да се каже,
кликнете овде за да влезете во вашиот сметка, сметка во банка.
И тоа беше банка на Западот.
>> Па некој купи ова.
И тоа е малку полесно да се види тоа во моно распоредени фонт zoomed
во на 30-метарски проектор.
Но, кога тоа е мал фонт во е-пошта што сте примање,
ова изгледа како bankofthewest.com, не bankofthevvest.com,
што некој платил 10 $ да се купи.
И тогаш тоа ги доведе до еквивалент на некои лоши веб-сајт.
>> И ќе видите too-- всушност можеме да направиме this-- ако одам до вистинските веб-сајт,
bankofthewest.com, повторно, потсетиме од минатиот пат
дека ако ова е нивната веб-страница и сте љубопитни за тоа како тоа функционира,
сигурно може да оди на Chrome е инвеститорот алатки.
И можете да ги видиш сите од HTML убаво форматирана таму.
>> Но, повеќе до точка, можете cam-- ајде да се затвори
this-- можете да одат на Прикажи Инвеститорот Види Извор.
Зошто не можам само копија сето тоа И тогаш
може да оди во моето мало gedit прозорец тука и да создавам своја веб-страница.
Зачувај ова во hello.html.
И веројатно ова ќе се скрши, бидејќи тоа не е толку едноставно обично.
Но, сега, ако јас ја превчитате мојата страница на моето CS50 апарати и погоди Вчитај ја страната повторно,
Добро, некои работи се скрши.
Но, јас сум прилично блиску до тоа моето банкарски веб-сајт, нели?
Сето ова HTML--
>> [Смеа]
>> Дејвид Ј MALAN: --I не actually-- и вие
знаат дека има некој таму кој всушност ќе кликнете на овие линкови премногу.
Па јасно, некои работи се скрши.
Но, тоа се случува да ја води ни во дискусија,
непотребно токму сега, за тоа што CSS, Cascading Style Sheets, се,
и како всушност преземете други HTML датотеки
и JPEG датотеки GIF датотеки што на веб-сајтот може да се користат.
Но, сето тоа е остварливо.
Но, тоа навистина се сведува на овие многу едноставна хеуристичко.
>> Па сега ајде да обезмаслен преку неколку други примери на HTML
само за да ви даде чувство на што друго можете да направите.
На пример, ова е list.html.
Претпоставувам дека сака да се направи веб страница со листа на куќи во четири.
Јас би можеле да го користат ул таг за неподреден листа, а потоа на елемент во листата дете
а потоа iterate over-- или листа, rather-- куќите во прашање.
>> И ако го отворам овој горе, ајде да го направите тоа.
Ајде да одиме да не hello.html, но да list.html.
По ѓаволите.
Како можам да го надминете овој?
Тоа е истото прашање како и досега, нели?
Значи, дозволете ми направи chmod-- oops-- chmod a + r на list.html.
И сега, ако јас се вратиме на мојот интернет пребарувач и кликнете Освежи ја, не е тоа.
Значи, ако некогаш сте сакале да се направи нумерирани листа, можете да го направите тоа.
Ако сакате да се биде супер фенси и да се направи подредена листа, не неподреден список,
промени оние на ол, вчитување на страница, и сега прелистувач ќе го бројот за вас.
>> Што друго да правиме?
Па, неколку others-- ако имаш долги ставовите на text--
на пример, некои Латински текст како this--
и што сакате во одделни ставови, отворен стр, во близина стр за став таг.
И го направи тоа повторно и повторно.
И ако јас сега се отвори оваа датотека, paragraphs.html, добро, ова
е добивање досадно.
Па сега ајде да се вратиме на мојот брза, chmod a + r r ѕвезда .html--
убаво малку вајлд карта, така да зборува.
Тоа треба да се утврдат сите овие проблеми за мене.
Ајде да ја превчитате.
Има три параграфи.
>> И сега ајде да одиме напред и се отвори еден друг.
Како за на маса?
Ќе забележите маса изглед малку посложена.
Но, тоа е исто idea-- отворен таг, отворен таг,
отворен, отворен, отворени, блиски таг, отворен таг.
И овие се случи да се кандидира за маса, чија граница е очигледно
ќе биде со дебелина 1-- што дека means-- табелата, маса
податоци, што значи клетка.
И ако се вратиме на мојот интернет пребарувач тука и да одат во table.html,
може да се види нешто вака, одбивни.
Но, ние ќе дојдеме до точка каде што можеме, всушност,
се направат работите поубава од тоа.
>> Значи, дозволете ми пропише за сега.
Има гроздовете на повеќе тагови.
И HTML е прекрасно да ги собереш затоа што, искрено, сите што треба да направите
е се погледне во постоечките веб страници со кои сте запознаени.
И сте како, ох, тоа е како тие го направија овој естетски.
>> Или може да се погледне до било кој онлајн ресурс за тоа како HTML работи,
и ќе видите дека има целиот речник на други ознаки.
Но, со едноставна ментална модел сам дека речиси секој таг ќе ја отворите
мора да биде затворена, тој навистина е доволно да се себеси учат
HTML откако се разбере овие основни идеи на картичките
и атрибути и добро formedness дека ние сме зборуваше за,
затворање нешто што ние може да се отвори така што ние не се збуни пребарувач.
Значи, да се земе тоа да повеќе интересно ниво
со одење на вистинскиот.
И ајде да одиме на мојот Mac тука, на google.com.
И сега notice-- ајде да го направите тоа.
Јас сум гонг да одат на Подесувања, Барај Settings.
Сакам да го исклучите оваа досадни инстант Резултатите нешто каде што веднаш
почнува да одговори на вашиот пишување.
Ајде да го направите тоа постара училиште, па ние, всушност, да видиме што се случува.
>> Па ќе одам да го спаси мојот Гугл поставувања тука.
И сега notice-- Одам да барате нешто како мачки.
И тоа е уште прави авто комплетна тука, но врз основа на работи
луѓе ги внеле во минатото.
Но, забележи она што се случува да се случи.
>> Во URL-то во моментов е ова, само google.com.
И технички, тоа е коса црта.
Google е само заштеда на карактер и не ни што покажува.
Тие се ни покажува https, само да биде супер смирувачко дека ние сме
на безбедна или шифрирана страница.
>> Значи, дозволете ми да оди напред и да пребарувате за мачки.
Сега тоа доби навистина огромно брзо.
Погледне во должината на овој URL-то.
Но излегува дека повеќето од овој материјал во URL-то е всушност прилично бескорисни.
Одам да се започне бришење работите што не го разбираат.
Гледам мачки.
Јас разбирам мачки.
Не знам зошто мачките се повторно таму.
Јас навистина не знам што е ова глупост е.
Па јас сум само ќе да се задржи истакнување и бришење нешта
дека јас не ги разбирам, дестилација на URL во токму тоа.
>> Сега дозволете ми да се влезе повторно.
Тоа изгледа како Google се уште работи.
Па поради некоја причина, тие се додавање на многу нешта да се стандардно на нивните URL-то.
Но, тоа не е задолжително.
Значи она што е убаво во врска со ова?
Па, дозволете ми да оди напред и да отвори инспектор Хром.
Има малку брз пристап со глувче за тоа.
>> Оди на табот мрежа.
И сега дозволете ми да ја превчитате оваа страница уште еднаш.
И јас сум држи Shift.
Како настрана, прелистувачи имаат тенденција да кешот или да го зачувате
информации само за доброто на ефикасноста е.
Но обично, држење Shift и претовар ќе ги принуди што
да започне од почеток.
И тоа е она што сакам да го направите тука.
>> И ќе забележите сите овие редови само се појави.
Излегува дека во секој даден веб страница, може да има само една датотека
involved-- hello.html-- или има може да биде 52, како и во овој случај.
Кога ќе го посетам google.com, очигледно, мојот интернет пребарувач
започнува 52 одделни HTTP барања.
Зошто е тоа така?
>> Па, погледнете во она што е внатре на оваа веб-страница до врвот.
Таму не е само текст, но има вистински слики
на мачки во текот на десно.
Има шарени логото тука на лево.
Има сите овие икони за микрофон и така натаму.
Има многу на парчиња, градење блокови, нула парчиња, ако сакате,
на оваа веб-страница.
И она што на пребарувачот прави врз добивање на првиот фајл, кој
е овој ред тука, тоа е во суштина процесирањето на врвот на HTML
до дното, лево кон десно, во потрага по работи како сликата тагови или други ознаки
кои се спомене други датотеки и кога ги гледа, оди и достигнува нив
преку HTTP, одржлива целина плик метафора,
и потоа да ги прикажува во соодветна локација во веб-страница.
>> Но информации тука ако јас се фокусираат на првиот фрлање, пребарување мачки,
забележи дека, навистина тоа е користење на HTTP 1.1.
И, за жал, Гугл Хром во моментов во верзија 39
е вид на dumbing работи надолу и не ни покажува вистинската заглавија.
Но, она што е навистина испрати е барање за да не намали, но / пребарување? q = мачки.
>> Сега, зошто е тоа важно?
Па, јас ќе одам да заклучиме од овој дека ако на Google
поддржува прашања на оваа форма, зошто не можам спроведување моето пребарување
мотор за CS50, но само пред крајот, само на графички кориснички интерфејс.
И ние ќе нарачува услуги на задниот крај, вистинските резултати од пребарувањето на Google.
>> Па како можам да го направите ова?
Па, дозволете ми да одат во gedit овде.
И дозволете ми да оди напред и да се отвори до, да речеме, нова датотека.
И јас одам да се спаси ова привремено како пребарување 0.html.
А потоа на крајот, ние ќе брзо напред кон оној што претходно подготвени.
>> А јас ќе одам да се брзо разбивам doc тип
HTML отворена заграда HTML блиску заграда HTML.
Тогаш јас ќе одам да направите глава во близина на главата опен CS50
Барај наместо пребарување на Google.
Овде јас ќе одам да имаат телото, овде долу блиску тело.
И сега јас треба CS50 пребарување.
И всушност, ајде да изгради оваа надградба.
Одам да се оди напред и да се затвори ова и всушност го стави во мојот јавниот именик.
Значи ми го даде само еден момент.
пребарување 0.html-- Одам да привремено да го наречеме search.html.
Одам да го chmod a + R search.html.
И сега ќе одам да го отворите.
Добро, така што беше брзо.
Но целта едноставно беше да ни се дојде до точка
на постоење на овој текст фајл наречен search.html.
Затоа, не многу да се погледне уште.
Навистина, ако одам во мојот интернет пребарувач, и одат на search.html, тоа е се што е.
Но знаеш што?
Јас може да биде малку познавач.
Јас го прочитав во една книга што има наслов таг наречен Н1.
А јас ќе одам да се оди напред и да ја користат таа отворен h1 и блиски Н1.
Вчитување на страната.
И сега е поголем и похрабри, не сите, кои интересно,
но барем тоа структурно повеќе интересно.
Но, сега дозволете ми да се воведе уште еден таг.
Излегува има форма таг.
И дозволете ми да се затвори таа таг.
И излегува дека е влез таг што
има атрибут наречен тип, кој е податочен тип на поле,
ако сакате.
И ќе биде од типот текст.
И неговата вредност ќе да се CS50 пребарување.
Затвори таг.
И таму се случува да биде без поимот отворање и затворање со посебни тагови.
>> Дозволете ми да се вратам овде и да видиме што се случува, ја превчитате.
Прв интересно.
Тоа изгледа како тоа е во полето за текст.
И всушност, јас не сакам да се стави вредност таму.
Дозволете ми да се вратам тука и всушност се ослободи од оваа вредност да биде едноставно.
Наместо на вредност, она што сакав да им даде на оваа работа е името.
И јас не знам што е тоа, па јас ќе се вратам на тоа.
>> Но под тоа, сакам да се направи влез тип = достават.
И оваа вредност ќе биде CS50 пребарување.
И ќе видиме зошто јас се пресели на вредноста на ова.
Кога јас ја превчитате, јас се чини дека сега имаат почетоците на мојот сопствен пребарување
моторот, супер грозен, иако искрено, тоа е
не е далеку фрли од она што Стандардно страница на Google изгледа како.
>> Ако одам тука сега, јас да напишете во мачки и се надевам кликнете Search.
Но, јас не сум уште доста направено, бидејќи јас не имаат имплементирано,
очигледно, база на податоци.
Не сум запиша во интернет за резултатите од пребарувањето.
Па јас треба да нарачува услуги кои на Google.
Па, како да го направам тоа?
>> Па, прво на сите јас треба да се додаде и акција
припишуваат на мојата форма ознака што е http://www.google.com/search.
И знам дека само од тоа да имаат заклучи од страна гледајќи внимателно
во нивните URL-то.
И сега ги погоди.
Што треба овој текст поле, најверојатно, да се нарече, врз основа на од каде сме дошле
од пред тоа?
>> ПУБЛИКАТА: q.
>> Дејвид Ј MALAN: q.
А ние не, всушност треба прашање одбележување што се испоставува, но q е навистина тоа,
Q за пребарување веројатно со Стандардно, само затоа што тоа е
што Лари и Сергеј излезе со години.
Па сега дозволете ми повторно пробајте.
Тоа не изгледа сите што се разликува.
Но, сега се види што се случува.
>> Ако сум тип во мачки и клик CS50 пребарување и нека оди,
забележите јас се однесен далеку за да вистински Google.
Сега, Google е да се биде малку досадни во кои тие се
додавање дополнителен параметар, ако сакате, до URL-то.
Тоа е се што се случува автоматски на Google страна.
>> Значаен дел е тоа што јас се чини дека да имаат генерирана ова барање тука.
И навистина, тоа е она што се случува.
Кога имате HTML што изгледа вака, ова
е вид на веб програмери нотација за велејќи, оди напред и да се создаде форма
дека кога тоа е доставен, тоа се случува да одат на овој URL-то.
И кога рачно се предвидени вредности за нешта како q,
не одат само за да овој URL.
Всушност, оди во прашање знак и тогаш q = мачки.
Додаваат параметар, HTTP параметар како тоа.
>> И само за да биде супер прецизни, она што се заклучи here--
но јас ќе биде повеќе explicit-- е дека методот што сакате да го користите
е да се добие, наместо нешто како пост, кој на крајот ќе видиме.
Значи во кратки, едноставно со разбирање HTML и користење на некои прилично едноставни ознаки,
сега ние може да почнат да се создаде нашите сопствени пред крајниот корисник
интерфејс со пребарување моторот зад неа.
>> Но, ова, се разбира, е прилично одвратен.
Значи, дозволете ми, всушност, се отвори малку подобра верзија.
Ова е еден јас подготвени во однапред дека има некои коментари.
Но ќе видите дека јас доста го пресоздава.
Значи ова е веќе достапни на интернет.
И јас се случи да се превентивно одат на https само за да биде едноставно.
>> И сега ајде да се отвори следниот повторување на ова.
Е верзија 1, наместо на 0.
Што скокови на тебе како малку различни во овој пример?
>> ПУБЛИКАТА: [нечујни].
>> Да, има овој текст усогласување центар.
Ова е малку чудно тука.
Но, ова е навистина ново.
А можеби и се погоди она што се случува да се случи.
Ако одам во мојот интернет пребарувач сега и посета на пребарување 1.html,
тоа е речиси истото.
Но, тоа е еден чекор поблиску до да се биде малку повеќе убава.
Тоа е уште грдо, но поубава во таа најмалку што е сега во центарот.
>> Значи излегува дека она што јас сум користење е друг јазик заедно наречени
CSS, каскадни стилски листови.
И CSS, искрено, е вид на, во мое лично мислење,
на atrociously дизајниран јазик.
Тоа е многу досадно да се запамети сите различни детали.
Но, тоа е она што stylizes на целиот свет интернет денес.
Јас навреди некого.
Сите во право.
Значи, да се вратиме овде и види колку сме всушност користење на овој.
И што се испоставува, барем тоа е всушност прилично едноставен јазик.
Тоа е само клучните вредност парови, својства и вредности, својства и вредности.
Всушност, тука е една тој имот и вредност.
>> Едноставно со користење на стилот припишуваат на моето тело таг
и тоа даваат вредност на Зборот дебелото црево и друг збор,
или имотот и вредност, Јас може да влијае на естетиката
на веб страница, не нужно структура сепак,
но естетиката на неа.
И само со Googling наоколу, сфаќам дека, CSS, Cascading Style Sheets,
поддржува имот наречен текст-align, чија вредност може да
се лево, десно, или центар, на пример.
>> Па сега кога јас ја превчитате оваа страница, она што јас го добие
беше центриран страница, но сепак прилично грда.
Ајде да одиме напред и да се отвори верзијата 2 од пребарувањето.
И сега забележите Јас го направив малку повеќе.
Забележите дека тука во внатрешноста на главата таг, не може да биде повеќе од насловот.
Всушност, има стил таг.
И ова е местото каде што тоа само добива малку неуредна разглед на CSS понекогаш.
>> Забележете дека јас изгледа дека имаат нешто што структурно изгледа многу различно.
Но, тука е името на таг Сакам да стилизирани.
Тука се нашите стари пријатели кадрава загради и затворени кадрава голема заграда.
А потоа тука е тоа што сопственост и нејзината вредност.
>> Ако јас се вчита оваа датотека, search2.html, крајниот резултат е идентична.
Но, тоа е чекор кон подобро дизајн.
Од страна на факторинг оваа CSS, јас сум не го commingled со мојот HTML.
И навистина, како што ќе видиме, би можел повторна употреба на овие својства и вредности.
Ако сакав да се направи гроздовете на делови од мојата веб страница центрирани,
Јас не треба да напишете стил = текст-align центар насекаде.
Јас може да се стави на едно место можеби, како на врвот.
>> Но, дури и тоа не е најдобар дизајн.
Всушност, една од работите што ќе учат како што трошат повеќе и повеќе време со
веб програмирање е дека повеќе може да се modularize работи и фактор работи надвор
како .h датотеки нека фактор работи надвор, сакале helpers.c нека фактор работи надвор
пред неколку psets.
Слично на тоа, можеби ние сакате да се постигне ова.
>> Па известување во верзија три search.html сум
исчистени шефот на страницата и само стави
во тоа, линк таг, кој спротивно на име,
не ви даде хиперврска.
Таа поврзува во друга датотека по пат на на href чија вредност во овој случај,
е пребарување 3.css
Така сфаќам ние ќе брзо.
Но, сите го правам е вид на движат работите околу.
Дозволете ми отворен пребарување 3.css.
Ете го, ништо на него.
Јас само копирани и атипичен во ново поднесе, слично како што констатирано работи надвор
во други датотеки порано.
И result-- целосно underwhelming--
ќе биде иста.
Но, ние сме се движат toward-- не, тоа не е.
О, јас знам зошто.
>> Па се чини дека се работи за грешка.
И тоа е во некоја смисла.
Но, дозволете ми да се отвори својата мрежа на табот.
Дозволете ми да ја превчитате страната.
Ах, зошто е CSS не се применува?
Па, CSS фајл, слично на тоа, има да биде светски читливи, така да се каже.
И тоа не е премногу во моментов забрането.
Значи, дозволете ми направи chmod a + R на ѕвезда точка CSS-- whoops--
ние сме дот CSS е само наставката на датотеката за CSS датотеки.
Сега дозволете ми да се врати на мојот интернет пребарувач и повторно.
Добро, малку подобро.
>> Сега дозволете ми да го направи едно последно нешто.
Во потрага-4.html.
Имам верзија која јас само мислев беше начин кулер, иако начинот на кој повеќе
комплицирано.
Ајде да погледнеме во резултатот во прв план.
Затвори ова да ни даде повеќе простор.
Промените ова пребарување-4, Enter.
>> А сега еден куп работи се скршени.
Одам да се врати во мојот именик тука.
И сега јас сум само ќе да се направи односно chmod на + r на file--
затоа што знам дека тоа exists-- наречен logo.gif, кој е на сликата.
И сега ја превчитате.
И wow-- па сега јас сум прилично блиску, искрено,
им се допаѓа верзија на Google во 1999 година, и искрено, 2014 верзија на Google,
нели?
>> Така, тоа е сега се случува на нивниот веб-сајт, во крајна линија, ако јас пребарување за мачки.
И навистина е.
Но, она што го правам поинаку во оваа верзија 4?
Па ние не ќе се задржиме премногу на тоа тука.
Ќе видите ова во проблемот постави седум крајот.
Но, забележи го направив неколку работи.
>> Јас воведе div ознака, што е поделба,
слични во духот со став таг.
Но, поделбата е исто како, еве правоаголна невидливи регионот
на екранот.
Ајде да го даде уникатна идентификатор, подножје, само
така што можеме да зборуваме за тоа во нашиот HTML на друго место.
Еве уште еден div на страницата чиј проект ќе бидат задоволни.
Тоа е содржината на страната.
И тука е насловот на страницата.
>> Со други зборови, јас сум во суштина во HTML сум ментално
гледаат оваа веб страница, како три компоненти, со глава
до тука со овој невидлив правоаголник, содржината во средината, а потоа
подножјето долу, дури и иако ние не ги гледаме тие работи.
Затоа што сакам во мојата глава на страница тука, или во .css датотека,
Можам да користам оваа синтакса.
>> Насловот не е таг.
Тоа е проект така што се претвора дека со тоа #header,
Сега можам да се примени еден или повеќе својства на насловот.
Што можам да направам иста содржина, исти за содржината тука.
>> Така на пример, во подножјето, известување сите овие својства Јас сум додавање.
И знам дека тие постојат само со читање врз документација за CSS.
Големина на фонт ќе биде smaller-- па некои релативната големина на фонтот.
Тежината ќе биде со задебелени букви.
Margin-- колку пиксели околу it-- е 20 пиксели.
И тоа се случува да биде центрирана.
>> Но, токму сега, на страница изгледа вака.
Ако јас не сум задоволен со мојата копија право таму,
Јас би можеле да се направи нешто како црвената боја.
А потоа можам да се спаси оваа, вчитување, и сега сум стилизирани подножјето.
Така што ова е само алудирајќи на власта на она што можете да направите во веб-страница
да се променат работите околу.
>> Па дури и поладна од ова, ако сакате да ѕиркаат наоколу со реалните веб-сајтови,
не може трајно да ги промени.
Но, ако јас се отворат Повторно инспектор Хром
и јас не одам на левата страна тука, што покажува HTML Фејсбук,
туку се покажува на десната страна на сите нејзини CSS,
Можете или да го и се променат работите во лет.
Значи, дозволете ми да оди напред и да го направите тоа.
>> Дозволете ми да оди напред и контрола кликнете на овој случаен збор тука,
потпише, и кликнете Увид Елемент.
Хром многу погодно скока на Н1 таг дека Фејсбук е користење.
И ќе забележите тука Фејсбук има вид на мрзеливо
хард кодирани големина на фонт како имот тука.
>> Толку кул работа иако е дека ако јас всушност одат во тука
и велат, ох, Фејсбук, не ми се допаѓа што 64 пиксели, ние сега може да се промени на Фејсбук.
Се разбира, ние сме само тоа се менува за мене лично во моментот.
Но, ова е само уште еден алатка во нашата алатка комплет
тоа ќе ни овозможи да tweak и да дознаам, а исто така се дијагностицира
прашања во нашите сопствени веб-страници.
И ние слично би можеле да одат над тука, што е иста работа.
Ако навистина сакате да се фенси, јас значи, сега навистина може да мутира страницата
и го прават луди работи.
>> Значи, зошто е сето тоа корисно?
И, во крајна линија, ние сме ќе сакаат да бидат
можност да се создаде веб-страници кои се водени од нашите сопствени назад завршува,
не само со Google и аутсорсинг на задниот крај таму.
Ние всушност сакаме вредност, на пример,
на дејствување на нашите пребарувач атрибут за да не се оди на некој друг,
но со нешто како search.php, каде search.php е на наша сопствен сервер,
а не на некој друг.
>> И така да одам таму, ние, всушност, треба да се воведе нов јазик.
Значи ние веќе гледаме еден нов јазик тука, или две, навистина, HTML
и CSS.
Но тие навистина се само структурни и естетски јазици.
Тие не се програмирање јазици по себе.
И тоа е за колку формално време како што ќе го потрошиме на нив.
Затоа што ќе почне сега да транзиција во PHP.
>> Па PHP е вистински програмски јазик.
Тоа е јазик за скриптирање во смисла дека тоа е
замислена да биде полесна тежина од нешто како В.
И тоа е препознаена јазик, што значи дека не е составена.
Значи во мало, она што не го мислиш кога ние се користи јазик како C
и моравме да го компајлирате?
Што значи тоа да се компајлирате C код?
ПУБЛИКАТА: [нечујни].
Дејвид Ј MALAN: го кажам уште еднаш?
ПУБЛИКАТА: [нечујни].
Дејвид Ј MALAN: Совршена.
Тоа се претвора во бинарни.
Тоа се претвора во нули и оние од реалните на англиски како изворниот код.
А потоа ние всушност може да се кандидира оние нули и оние
со полагање нив преку Процесорот со двојно кликнување на иконата
или водење на команда.
>> PHP и Python и Ruby и Perl и JavaScript
и гроздовете на други јазици се толкува
јазици, кој е да се каже не ги компајлирате.
Наместо тоа, можете да ги хранат како влез за програма наречена преведувач.
И дека преведувач, што некој друг напишал,
чита вашиот изворен код врвот до дното, лево кон десно и само толкува
оние линии и прави она што го велат.
>> Значи, ако се сретне со линија која вели печатење,
тоа не мора да го конвертирате печатење на соодветните нули и единици.
Тоа само ја има оваа преведувач како голема, ако состојбата во која се вели,
ако настава програмерот е печати, а потоа го направите следново.
Па тоа го толкува само според начинот на размислување
преку она што сте го кажува да се направи.
>> И PHP е еден од овие јазици.
И пред PHP години е дизајниран токму за веб програмирање.
И тоа беше првично многу невешт неуредна јазик.
И навистина, има огромен износ на лоши PHP код таму.
Но, самиот јазик е најзаслужен во текот на годините,
толку многу што сега е всушност прекрасен следниот чекор
педагогичен од C, бидејќи тоа е толку плетен запознаен со сè
сте само гледа во изминатите неколку недели.
>> Една почетна разлика ќе видиме е нема Главната функција повеќе.
Кога ќе почнете да пишување код, тоа е само ќе се извршуваат без оглед на тоа,
како што ќе видиме во еден момент.
Во меѓувреме, тука е она што променлива изгледа во PHP.
Тоа е малку поинаква, но само едвај.
>> Во PHP, таму не е силна пишување.
Има недела пишување, што само значи дека има
се типови на податоци како и стринговите и броеви и други работи.
Но вие не се мачат специфицирање она што тие се повеќе.
PHP тоа, фигурира за вас.
На доларот знак е само одлука дека PHP луѓе направија години
пред како што било променлива во PHP само започнува со знакот за долар.
Тоа е всушност вид на корисни во таа што скока на тебе малку повеќе.
>> Но после тоа, овој е состојба во PHP.
Она што е различно наспроти Ц?
Трик question-- ништо, кој е всушност навистина убаво.
Булова изрази во PHP-- истото.
Булова изрази со и наспроти или, прекинувачи, петелки, петелки, loops-- ред,
овој е различен.
>> Значи излегува постои неколку други функции во PHP.
Еден од нив е всушност ова, што е прекрасно удобен.
Ако $ броеви е низа кои сте прогласи претходно во програмата,
имаш овој фенси за секоја конструкција дека наместо за правење на сето тоа
досадни јас еднаква на 0, јас е помалку од ова, [? Јас ++?]
за секој броеви како број, каде што секој на оние долар знак вредности е само
променлива, а вториот можете да замислите како И.
Вие би можеле да го наречеме нешто што сакате.
Јас го нарече број.
Ова се случува да iterate во текот на низата повикуваните броеви.
И на секој повторување, тоа е ќе се ажурира автоматски
за вас на знакот за долар број променлива, така што вие постојано
имаат пристап до променливата сакате без да се направи било квадратни загради
нотација или индексирање во низа.
>> Покрај тоа, ние дури и да работи како низи, кои изгледаат речиси исто,
освен тоа е многу честа појава, како што ќе види, како во PHP и го вклучите Javascript-
да се пре иницијализира низа користење квадратни загради.
С користи кадрави загради.
Така, тоа е малку поинаква, иако ние навистина не ја користат таа трик многу.
>> Но, дури и повеќе моќно, PHP има асоцијативни низи,
која е фенси начин на велејќи хаш маси.
Всушност, ако сакате да го прогласи хаш маса во PHP, за разлика од C-- колку
линии на код не е потребно да се всушност спроведување на хаш табелата во Ц?
Или колку линии на код е земајќи за спроведување на хаш табелата во Ц?
Така, тоа е веројатно многу, нели?
Тоа е неколку десетици, можеби 100 или 200.
Тоа е nontrivial.
Или тоа е за да се биде, како наскоро ќе се види, nontrivial
за спроведување на хаш табелата [Нечујни] и, исто така, се обиде.
Но, во PHP-- и искрено, веројатно не треба да ти кажам
до Monday-- во PHP, ако сакате маса, направено.
Тоа е хаш table-- така со една линија код.
И
>> А многу јазици го направите тоа.
Да се ​​забавуваат со pset пет.
Толку многу јазици го направите тоа.
Тие ви даде овие апстракции дека другите луѓе, други програмери,
направивме за вас, така што можете да застане на свои плеќи
и да почне со користење на идеи кои се супер релевантни, како хаш маси и дрвја
и се обидува.
Но, вие не мора нужно да спроведување на овие работи себе.
>> И така на крајот, она што ние ќе го користите PHP за
е потенцијално пишување програми на т.н. командната линија.
Ние би можеле да се рекреираат на секоја програма ние го напишав овој семестар досега,
освен можеби Збег кој користи SPL, кој е специфичен за Ц во моментот.
Но, секој друг проблем во собата, сигурно Марио и Цезар
и Vigenere и [? Попуштат?] И наваму, ние
може повторно да се имплементираат во PHP, и веројатно малку полесно.
>> Но, она што ние сме во крајна линија ќе да го користите PHP за е веб програмирање.
И ние ќе се воведе следната недела ментална модел, парадигма наречена
MVC, модел поглед контролор, кои, ако сте го направиле програмирање
пред во Python или Рубин или на друго место,
би можеле да знаат на овој тим со Шини и Џанго и слично.
Но, ако сте нови на тоа исто така, ќе видите
дека ова е всушност многу природни продолжување на факторизација
и вид на дизајн на кодот кој ние сме
се прави во C. Ние ќе сега се применуваат некои од тие лекции во PHP
така што во крајна линија, ние сме спроведување на нашите сопствени веб-сајтови.
И ако сте вид на маѓепсаа или зачуден
дека ние сме случува да се направи сите толку брзо,
сфаќаат дека речиси секој семестар, речиси 90%
од учениците CS50, вклучувајќи ги и оние кои никогаш не програмиран пред,
заврши прави последните проекти кои се базираат на веб програмирање.
И така ќе видите дека се враќа се високи во неделите што доаѓаат.
Па ние ќе се видиме тогаш во понеделникот.
>> ЗВУЧНИЦИ 1: А сега, длабоко Мисли од Daven Farnham.
Хаш маси.
>> [Смеа]