>> Onbekende: "Dit is CS50.
Dit is die begin van die week 8 en oh my god, het ons 'n baie
van pret in die winkel vir die volgende paar weke.
So teen die einde van vandag sal jy in staat wees
om die belaglik irriterende INTERNET medium genoem
Hamster Dance, wat het, wie se klankbaan is beskikbaar
op die kursus se webwerf onder, lesings.
Maar eers 'n paar afkondigings vandag voor ons daar kom.
So een van jou klasmaats is in die proses van werwing mense
vir die Harvard Digital Media Group.
Dit is 'n groep studente wat bymekaar kom, eet pizza,
praat met mekaar en met professionele persone in die bedryf
oor die sosiale, oor digitale media.
As jy wil om deel te neem gaan te CS50.net en daar is 'n teken
aan skakel op die kursus se home page op die oomblik.
Ook kom is Hack Harvard, geborg deur die I3 Kompetisie
en die Voorgraadse Regspraktisyn is nie.
Die UC, het hierdie saam na 'n einde
gee julle 'n af oprit van 'n kursus soos CS50,
so dat as jy pak jou finale projek oor die volgende paar
maande en jy voel, wow ek het regtig wil graag van hierdie te neem
na die volgende vlak, Ek wil regtig graag hierdie
die volgende Harvard FML of om te wees Ek sien jy Harvard of Facebook,
buite Harvard se kampus.
Dit is 'n geleentheid om werk gedurende J termyn met 'n paar
van jou vriende of op jou eie.
Miskien het jy het 'n paar ondersteuning van die Voorgraadse Counsel
in die I3 Kompetisie sodat as jy 'n bietjie van kontant,
as jy 'n bietjie van die ruimte, as jy 'n bietjie raad,
jy het beskikbare hulpbronne
vir jou ook ver buite die einde van die semester.
Dit is te onderskei van die CS50 Hack-a-thon, om duidelik te wees,
wat gaan kom in Desember en eintlik is net gaan
om 'n geleentheid vir ons as' n Natuurlik bymekaar te kry van 20:00
tot 6 uur en werk op die finale projekte
As jy dus kies om deel te neem.
So dit is wat op die horison daar.
Die finale projek toe.
So dit is die spesifikasie.
Daar werklik moet wees nie verras omdat ons gepraat
hieroor in die eerste week en almal dieselfde inligting
in die sillabus, gebruik, maar dit doen as jou gesaghebbende bron
oor die volgende paar maande as ons vir die finale projek
en op sy beurt die Hack-a-thon en die CS50 regverdig.
Jy mag dalk wonder,
ons nog nie gedoen web ontwikkeling,
ons het nie eens klaar met die Natuurlik, is hoe ek veronderstel is om
om uit te vind 'n projek om te werk op?
Wel weer, die doel van ' dit in jou hande is vandag net
te kry wat jy dink oor dit.
Kry jy om te begin soek om kampus, kyk rond jy
in die lewe vir moontlike idees en dit is ook 'n kans om te staak
aan 'n vennootskap met een of twee vriende,
sedert die spec nie moontlik om te werk
in 'n klein span as wat jy wil.
So lees wel dat in die loop van hierdie week en neem kennis
van die mylpale, insluitend 'n pre-voorstel,
wat is bloot 'n e-pos na jou onderrig man in 'n paar
van die weke is net dat bedoel om die sappe vloei,
gee jou 'n geleentheid vir 'n bietjie van die voorlopige terugvoer
op die idees wat jy dalk te dink oor.
Ook, as ons in hierdie laaste 'n paar weke van die kursus
die doel is om seker te maak
dat julle het 'n werklike wêreld vaardighede
sodat jy nie die uitgang kursus en dan wonder,
hoe in die wêreld is wat ek ooit gaan
'n ander om te skryf rekenaar program
as ek het nie 'n Cloud.CS50.net rekening?
Wel seker wees dat die meeste alles wat ons het al met behulp
in die kursus baie veel industrie standaard.
Jy kan dit aflaai die meeste van die sagteware wat ons het al met behulp
op jou eie laptop nog en as 'n stap in die rigting dat
Jy sal sien dat die probleem wat 6, die speltoetser probeer
te gee jou 'n paar blootstelling
om net die gebruik van miskien 'n meer gebruikers vriendelik hulpmiddel.
Sommige van julle kan wees vertroud te wees met teks Wrangler,
dit is 'n vrye teks program vir die Mac.
Dit is soortgelyk in die gees te Notepad
en hierdie soort van dinge.
Jy kan dit aflaai per probleem gestel 6 se aanwysings.
Maar wat is werklik 'n mooi, as jy nog nooit opgemerk,
is wat onder dit lêer menu dit eintlik ondersteun die opening van lêers
van 'n SFTP bediener en onthou, dit is 'n protokol wat jy gebruik
vir die probleem stel 5 bitmap om te beweeg en jpeg lêers heen en weer.
So as ek wil byvoorbeeld begin werk aan probleem stel 6
in my rekening, eerder as het die lêer op my eie laptop,
Ek kan gaan, Open van SFTP bediener
Ek kan tik in Cloud.CS50.net, ek het die boks vir SFTP om te kyk,
sodat hy nie miskien onseker wat nie werk, my gebruikersnaam en wagwoord.
Ek het toe vooruit en gaan kliek, Connect
en wat jy sien is 'n bietjie grafiese vertolking
van jou huis gids en ek het het 'n klomp van die rommel is daar,
maar nou ek wil Pset 6, miskien Dictionary.C
en nou ten slotte, al hierdie weke later,
Ek het iets wat 'n bietjie meer bekend is,
'n bietjie meer veelsydig as iets soos Nano,
sodat jy kan nou begin werk kliënt kant, maar nog steeds
in 'n aparte venster deur SSH-ing kan jy dan loop die familier
instruksies soos GDB en GCC
en jy kan voortgaan samestelling van die kode
in daardie bekende omgewing.
Maar nou kan jy doen dinge
soos C syntax uitgelig code kliënt kant, kan jy sleep
en sny en plak soos gewoonlik en besef
dat alhoewel ek 'n Mac gebruik
daar is 'n gratis program genaamd Notepad + +, waarmee jy
iets om te doen baie soortgelyk in die rekenaar wêreld.
So jy hoef nie te doen, maar nie probeer om,
nie probeer om jou hand te dat.
So 'n opmerking dan hieroor.
So dit is nie waar Ek hang uit ten minste
maar dit het gekom om ons aandag.
'N uittreksel uit Harvard FML.
So ek was in CS50 kantoorure vir drie ure laaste nag
en dit het nooit een keer gehelp het, FML.
So, ek bedoel eerlik, dit is ontmoedigend om te sien.
Want dit is beslis nie die doel van 'n span
van 80 'n paar vreemde onderrig genote in kursusse is
om werklik het julle gaan unhelped in die kantoor ure.
So besef dit is 'n funksie van 'n paar dinge.
Een, soos baie mense net soos ons,
ons seker ons eie skedulering beperkinge
wat ons doen strewe te versprei oor die loop van die week,
maar besef ook dat, as jy kry na die kantoor ure
op Woensdag en Donderdag se se in die besonder en jy vind
dat dit hierdie mal vergadering reël omgewing,
besef dat die soort die aard van die dier
en ons neem sorg het vroeër kantoorure
in die week.
Minder van hulle, op Maandag-en Dinsdag se en selfs Sondag se
en nie besef, indien jy is die vind van
wat jy regtig nodig om 'n meer koesterende omgewing,
eerlik, dan is hierdie gek Woensdag
en Donderdag nagte omgewing maak voorsiening vir, syfer nie uit 'n manier
die Pset om te begin op Vrydag of op Sondag,
sodat jy voordeel kan trek van 'n groter aandag
dat slegs deur die aard van die aantal studente
op die klas wat ons kan bied vroeër in die week.
Maar met wat gesê het, ons erken dat dit is een ding om te sê,
kan jy begin vroeër en dit nie eintlik dikwels gebeur.
So sal ons ook gelyktydig pas ons ure om te probeer
tot stert vrag dinge op Woensdag en Donderdag se se
om beter te hanteer die laai.
Maar moenie probeer om ons te halfpad ontmoet, want ons is bly om te werk
saam met jou so individueel.
Dus, hoe kry ons uit niks, 'n leë lêer, om iets
hou of hopelik eerlik,
iets 'n bietjie meer dwing.
So daar is hierdie ding genoem die INTERNET
en vandag begin ons praat oor dit, die internet,
maar ook ander gereedskap en tale.
So ons spandeer baie van die semester fokus op C,
nie omdat die wete C spesifiek is 'n lewenslange
vaardigheid nie, maar eerder
daardie spesifieke taal wat ons eintlik dink wel 'n
baie stewige fondament vir 'n baie
van meer algemene geplaas tale hierdie dae.
Ek voel soos ek sou waarskynlik beweeg en die skerm af,
sodat dit raak te hypnotiserende.
Dus sal ons terug te gaan na hierdie, dit is baie stimulerend.
So die doel regtig van die volgende paar weke is
te help om te besef dat wanneer jy weet 'n taal soos C,
jy kan regtig boot band jouself
in ander tale, ander tegnologie.
Weer, soos ek gesê het verlede week Ek het geleer voorheen C en C + +
en 'n taal genoem, Lisp in CS50
en 51 en dan dit was dit.
Sedertdien het ek opgetel het dinge soos ek gaan.
Ek vra vriende baie vrae, het jy Google rond,
jy lees 'n boek, daar is so baie maniere om hierdie dinge te leer.
So een van die wegneemetes vir hierdie week en volgende gaan
te wees dat jy kan absoluut af te haal nuwe tale vinnig,
as jy verstaan die onderliggende grondbeginsels.
So selfs al het hierdie week vir die Pset jy die uitvoering van hierdie
ding genoem a, hash tafel, langs week gaan jy net kry
'n hash tabel te gebruik, met 'n lyn van die kode
en hierdie taal genoem PHP en 'n ander naam JavaScript.
Ons sal net vir jou 'n hash tabel wanneer jy dit wil hê.
Jy hoef nie te implementeer wat self van nuuts af.
Jy kan voortbou op die skouers van ander
en op 'n jaar die moeite werd van ander tegnologie.
So hoe kan ons daar kom?
Wel, ons moet die regte hulpmiddel vir die taak.
So vandag begin ons web programmering en
dat ons hierdie taal, PHP.
Hierdie ander taal genoem, HTML,
waarvan die laaste is nie 'n programmeertaal
want dit kan nie sê die rekenaar om iets te doen,
maar dit is 'n opmaak taal
en dat dit kan vertel die rekenaar hoe om
iets om te vertoon.
Dit is 'n estetiese taal van die spesies.
Maar ons moet 'n plek te sit die kode ons gaan
om te begin skryf en aan
tot nou jy is gebruik Cloud.SC50.net,
selfs al is jy al SSH-ing op daardie bediener
dit blyk dat dit beskikbaar is via 'n ander protokol genoem word,
HTTP en dit is iets wat jy het waarskynlik
desensitized te oor die jare.
Maar in die URL, in byna ooit URL wat jy besoek
in 'n leser is, selfs al jy het nie tik dit, http://
of https: / / en dit is, HyperText Transfer Protocol,
en dit is net 'n taal Dit is 'n stel, dit is' n protokol.
Een stel van konvensies wat web blaaiers en web bedieners gebruik
om te praat met mekaar ten einde om jou te laat versoek om 'n web bladsy
en laat jou terug te kry dat die web bladsy.
En selfs al het ons fokus vandag en op Woensdag
oor die tale betrokke in hierdie proses,
besef dat daar 'n paar regtig sappige materiaal in there
en as jy hou van rekenaar wetenskap, besef jy kan gaan af
in die werklik netjiese voorskrifte in hardeware en netwerke
en ons sal regtig net kras die oppervlak
van sommige van dat hierdie week.
Maar ons moet 'n INTERNET Ons het 'n klomp
van rekenaars een of ander manier verbind tesame met data sal kry
vanaf punt A na punt B en al hierdie video jy
oor om te sien neem 'n paar vryhede
met kom ons sê akkuraatheid, is dit nie nie een van die minder verf 'n redelike
beeld van wat eintlik gaan aan op die INTERNET
wanneer data reis vanaf punt A na punt B.
So ek gee jou, Warriors van die Net.
[Video]
[Musiek]
>> Onbekende: Hy het gekom met 'n boodskap.
[Musiek]
Met 'n protokol.
[Onhoorbaar].
[Musiek]
Hy het gekom om 'n wêreld van wrede [onhoorbaar] mure,
uncaring [onhoorbaar] en gevare veel erger as die dood.
Hy is vinnig, hy is sterk, hy TCPIP en hy het jou adres.
Krygers van die Net.
>> Onbekende: So dit is net die teaser trailer
vir wat is eintlik 'n langer video
wat bespreek hoe die internet werk.
Maar vir vandag, ons is maar net gaan dit in te neem op sigwaarde.
Dat dit is hoe die internet werk.
Alles reg?
[Lag]
So daar is dit, hierdie protokol hierdie taal genoem, TCPIP,
en dit is weer net 'n soort standaarde wat rekenaars praat.
Kliënt die rekenaar soos julle skootrekenaars, rekenaars bediener
soos die Wolk, spreek ten einde data om te beweeg van punt A
B. te wys En wat se netjiese oor die internet en netwerke
in die algemeen is dat daar is jaar die moeite werd
van interessante gelaagdheid aangaan.
Ons sal nie tyd op hierdie in hierdie klas,
maar in CS143 Networks, het ons doen spandeer meer tyd op hierdie punt.
Daar is hierdie laag genoem Ethernet.
Jy is al wat waarskynlik vertroud is met die idee
van 'n Ethernet-kabel, selfs as jy doen dit nie gebruik nie
en dit is redelik lae vlak tegnologie.
Omdat dit pretty much kook af tot elektrisiteit vloei
deur 'n draad, eintlik stuur wat 0's verteenwoordig
en 1's en net om te flits terug na week 0 en 1,
goed hoe doen jy eintlik stuur stukkies
op 'n draad, stukkies op' n netwerk?
Jy weet is eenvoudig vorm kan jy verbeel draai elektrisiteit op.
So elektrone vloei te verteenwoordig 'n 1
en dan draai dit af, het jy nou 'n 0.
Dit is meer gesofistikeerd as dit,
maar ten minste wat jy kan kode 0's en 1 is met behulp van elektriese sein.
So ons sal neem dat as vanselfsprekend aanvaar.
Dan op die top van Ethernet jy het iets genoem IP,
Internet Protocol, en dit is 'n protokol,' n stel van standaarde,
wat sê elke masjien
op die internet behoeftes 'n unieke adres.
'N numeriese adres, oor die algemeen bekend as 'n IP-adres.
En dit is net 'n nommer dit is iets wat
van die vorm number.number.number.number.
As jy gehandhaaf jou huis router
by die huis is dit waarskynlik gelyk het 'n bietjie iets soos hierdie,
want daar is beperkinge op watter getalle kan daar wees.
As 'n eenkant, elk van hierdie hash simbole verteenwoordig 'n 9
bietjie waarde.
Dus beteken dit dat elke hash simbool is 0 tot 255,
met 'n paar meer beperkinge.
Die implikasie is dat as jy het 8 bisse plus 8 stukkies plus 8
stukkies plus 8 bisse, dit is 32,
Dit gee ons hoeveel moontlike IP adresse?
[Lag]
Dit gee ons 32 stukkies waarde van adres ruimte
wat beteken dat dit gee ons 4 miljard.
Reg? 2 van die 32 is 4 miljard moontlike IP adresse
en scary gedagte, die wêreld is uit te loop.
So daar is 'n baie oordeelsdaghonde Sayers sê hoe dinge sal
begin afbreek voordat lank, want ons loop
uit IP adresse nie, maar gelukkig is daar 'n weergawe 6
van die IP wat gebruik maak van 128 bit adresse,
wat hopelik sal red van die dag wanneer mense begin dit te gebruik.
Maar vir nou, al wat ons omgee is, is dat daar is Ethernet
wat kry data fisies uit A na B, daar is IP watter soort
van ken, wat nie wys 'n adres aan elke rekenaar
op die Internet, baie soos die US Postal Service sit 'n unieke
adres op jou posbus, sodat pos kan kry van punt A na punt B,
en dan is daar ander meganismes bo-op.
Een van hulle is geroep TCP.
Vandaar die TCP IP-protokol.
TCP is net 'n protokol,' n stel van konvensies wat sê:
nie net wil ek data vloei van punt A na punt B,
Ek wil seker maak dat data kry van punt A na punt B,
so TCP se doel in die lewe is om tred te hou van al die data
wat vloei oor die Internet tussen punte A en B
en indien enige pakkies wegraak of beskadig of laat val
deur 'n firewall, indien hulle net verdwyn iewers
in die Eter so te sê, TCP se doel in die lewe is
om te sê my rekenaar A, herstuur dieselfde data B. tot die punt
En so gaan dit is die rede waarom jy óf kry 'n e-pos of jy doen nie.
U aflaai 'n lêer of jy doen nie
of minstens 'n deel van' n lêer.
Jy hoef nie noodwendig te kry stukkies van 'n e-pos.
Dit is meestal 'n hele of niks ding
en dit is grootliks die resultaat van TCP.
Maar daar is ander protokolle wat jy kan eintlik gebruik.
Dus het ons Ethernet, Ons het IP, ons het TCP
en dan uiteindelik ons HTTP.
En so gaan dit gelaagdheid is doelbewuste.
Die mense wat uitgevind HTTP, wou net om te aanvaar
dat al hierdie dinge op die onderkant werklik gewerk
en hulle het data van punt A na punt B,
so ons sal fokus hierdie week en volgende
die gebruik van hierdie hoogste vlak
HTTP en op sy beurt die taal genoem HTML.
Maar net sodat jy het 'n gevoel van wat regtig aan die gang
op onder die enjinkap, Ek het voor gegaan hier
en ek het SSH-ed aan 'n bediener.
Laat my gaan voort en teken weer in en dit blyk op 'n baie
van Linux en Unix-stelsels, daar is 'n opdrag genoem word,
Trace Route, wat sal spoor die roete tussen punte A
en B. Wat is eintlik mooi netjies oor hierdie is
dat dit ons help om te sien indien vir diagnostiese
of pedagogiese [veronderstelde spelling] doeleindes,
presies wat gaan aan tussen punte A en B.
So ek doen natuurlik nie 'n verbinding fisies
om te sê Stanford Universiteit.
Dit is al die pad oor op die weskus.
Maar daar is die internet en die Internet is saamgestel van alle
van hierdie dinge genoem routers, wat fancy rekenaars
wat sit in data-sentrums waarvan die doel in die lewe is dit data te neem
hier, kyk na die data, kyk spesifiek op die IP-adres
en besef oh, hierdie IP adres woon op die weskus,
so 'n router dan roetes dat die pakkie wat manier
na die weskus, en dit kan dan na 'n ander router
wat dieselfde besluit maak.
So routers is soort van uitgebeeld deur daardie klein video daar
skuif van data in verskillende rigtings.
Links, regs, bo, onder,
afhangende van waar hulle is bestem geografies.
So jy kan eintlik sien hierdie dinge genoem routers,
nie wanneer jy stuur 'n e-pos of trek 'n web bladsy
maar as jy nie 'n bietjie van skeer rond.
So ek is net op 'n opdrag vinnig hier op 'n Linux-stelsel,
dit is in besit van die Harvard Computer Society,
een van die student groepe op die kampus.
Ek gebruik dit omdat die meeste
van FAS se stelsels laat nie jy dit doen, maar hulle se nie,
wat is 'n nuttige truuk vir hierdie klas.
So ek gaan om voort te gaan en uit te voer Trace Route, www.Stanford.edu
en OK en ek sien 'n hele klomp van die uitvoer.
Laat my eintlik krimp hierdie en weer uit nie.
'N hele klomp van uitvoer waardeur elke ry
in hierdie produksie is getel en die eerste ry, 1,
verteenwoordig die eerste router op die internet wat my data,
punt A, bereik op sy manier B, wat is Stanford aan te wys.
Sodat dit lyk soos die eerste router het nie 'n naam,
want al wat ek sien is getalle in ry 1 hier.
Maar dit het 'n IP-adres 140,247, 140.247.89.130.,
wat behoort vermoedelik te Harvard.
Omdat Harvard besit duisende van IP-adresse,
al wat begin met 140,247.
Nou hoe lank het dit te kry om daardie router,
wat waarskynlik in die wetenskap sentrum of iewers proksimale?
Lyk soos dit het ongeveer 2 of 3 millisekondes en die feit
wat jy sien drie getalle is daar,
net beteken hierdie program probeer drie maal net
gee my 'n sin van 'n gemiddelde,
in geval daar is 'n anomalie.
Waar gaan dit nou?
Wel blykbaar is dit router, waar dit ook al is, is verbind
te CoreSC1GWDL412, wat dit ook al is.
Wel GW is snelskrifnotasie vir Gateway, wat sinoniem is
met die router, sodat dit lyk soos Harvard het 'n tweede router,
iewers in die SC, Science Center,
waarop die router het 'n soort van aansluiting.
Die volgende router is 128,103.
iets wat ook 'n voorvoegsel wat Harvard besit.
Enige IP's in die reeks behoort aan Harvard.
Dit hoef nie 'n naam omdat die mense besluit om nie
om dit te noem, maar dit is fine.
Maar dan kry ons 4, BDRGW te ry, voel soos Border Gateway,
hulle is maar net 'n bietjie bondige met die name hier.
Gateway is weer 'n router, Grens beteken dat dit
op die rand van Harvard se kampus en seker genoeg is,
dit is nog steeds in Harvard.edu.
Maar dan gaan dit 5 tot ry.
NOX300GW en dit is eintlik iets genoem Noord
Kruispad, wat 'n super groot data sentrum in die noordooste,
waar baie van internet verkeer tree in en dan gaan uit.
So Harvard het 'n fisiese verbinding
tot hierdie Noord- Crossroads ingestel.
Die ouens op sy beurt het 'n hele klomp
van roeteerders in hul netwerk.
Maar dit is 'n soort van interessant wees.
Sodra ons kry uit ry 7 8 te ry,
waar doen ons lyk te wees eindig? 406 00:17:24,246 ---> 00:17:25,256 It looks like Kansas. 407 00:17:25,316 ---> 00:17:28,136 So humans who run servers tend to name routers based 408 00:17:28,136 ---> 00:17:31,396 on the geography or the nearest airport code, so KANS, 409 00:17:31,476 ---> 00:17:34,036 I'm going to suppose is like you, Kansas. 410 00:17:34,086 ---> 00:17:35,766 The next one is probably Houston. 411 00:17:35,766 ---> 00:17:38,796 The other one, LOS, Los Angeles probably. 412 00:17:38,796 ---> 00:17:41,746 And then after that, yes, LAX, denotes Los Angeles. 413 00:17:41,986 ---> 00:17:43,946 So what's happened, which is really neat here, 414 00:17:44,216 ---> 00:17:48,666 between rows let's say 7, which we know to be in the northeast 415 00:17:48,666 ---> 00:17:52,016 and definitely row 10 or 11 where we're in LA, 416 00:17:52,436 ---> 00:17:53,676 there is some kind of connection. 417 00:17:53,676 ---> 00:17:56,446 Some really long wire between those two routers. 418 00:17:56,646 ---> 00:17:59,366 Because notice how long it takes to get to row 11 here, 419 00:17:59,596 ---> 00:18:02,336 80 milliseconds, which is up from 2 milliseconds 420 00:18:02,336 ---> 00:18:03,856 when it was actually on Harvard's campus. 421 00:18:03,856 ---> 00:18:07,146 So you can infer from the amount of time it's taking for the data 422 00:18:07,146 ---> 00:18:10,666 to go from A to B, roughly how far these geographies are apart, 423 00:18:10,666 ---> 00:18:12,366 assuming you're on super fast connections. 424 00:18:12,686 ---> 00:18:16,096 These asterisks here just mean the router is in between point A 425 00:18:16,096 ---> 00:18:18,206 and B, stopped paying attention to us. 426 00:18:18,246 ---> 00:18:20,666 They started ignoring us at one point and that's generally 427 00:18:20,666 ---> 00:18:22,256 for privacy or security reasons. 428 00:18:22,256 ---> 00:18:23,186 But let's try another one. 429 00:18:23,186 ---> 00:18:26,976 Let's go ahead and do Trace Route gmail.com. 430 00:18:26,976 ---> 00:18:28,666 When you send an e-mail to someone at Gmail, 431 00:18:29,006 ---> 00:18:30,506 looks like it's pretty close. 432 00:18:30,506 ---> 00:18:34,006 Only 10 hops away, ten routers and it's a little harder 433 00:18:34,006 ---> 00:18:35,746 to infer where this, oh LGA. 434 00:18:36,186 ---> 00:18:38,896 Looks like Gmail has one or more routers, Google has one 435 00:18:38,896 ---> 00:18:40,606 or more routers in New York. 436 00:18:40,636 ---> 00:18:43,076 So it looks like Google has a data center somewhere 437 00:18:43,076 ---> 00:18:45,556 on the east coast in New York, which makes intuitive sense 438 00:18:45,816 ---> 00:18:48,296 and we get there in only 7 milliseconds. 439 00:18:48,436 ---> 00:18:49,306 So that's pretty fast. 440 00:18:49,566 ---> 00:18:50,236 What about CNN? 441 00:18:50,486 ---> 00:18:52,466 Trace Route CNN.com. 442 00:18:52,936 ---> 00:18:55,676 All right, here too we seem to be jumping around states. 443 00:18:55,676 ---> 00:18:58,326 We're going from Harvard, to Boston, to New York, to DC, 444 00:18:58,406 ---> 00:19:01,896 to Atlanta, to who knows where, but somewhere 445 00:19:01,896 ---> 00:19:05,026 in there there is CNN's actual servers. 446 00:19:05,206 ---> 00:19:07,656 But let's do one other trick, CNN.co.jp, 447 00:19:07,846 ---> 00:19:10,886 which is the domain name for the Japanese version 448 00:19:10,886 ---> 00:19:14,536 of CNN's website and what's kind of neat here if it cooperates, 449 00:19:14,856 ---> 00:19:18,326 is we again go from Harvard, to Boston, to New York, New York 450 00:19:18,656 ---> 00:19:22,846 and then wow, notice what's between rows 10 and 14. 451 00:19:24,756 ---> 00:19:26,166 An ocean frankly. 452 00:19:26,366 ---> 00:19:27,126 Right? So. 453 00:19:27,126 ---> 00:19:27,286 [ laughter ] 454 00:19:27,286 ---> 00:19:33,286 Right. We go from 7 milliseconds to 226 milliseconds and in fact, 455 00:19:33,806 ---> 00:19:36,016 there is in fact Tokyo is embedded here 456 00:19:36,076 ---> 00:19:36,876 in the domain name. 457 00:19:36,876 ---> 00:19:41,836 So it looks like we're probably going over the Pacific Ocean, 458 00:19:41,836 ---> 00:19:45,306 assuming that's what these stars are kind of hiding from us. 459 00:19:45,306 ---> 00:19:46,756 Because I see no mention of Europe. 460 00:19:46,756 ---> 00:19:47,916 Maybe if you go the long way, 461 00:19:47,916 ---> 00:19:49,826 but in fact it might have hopped off the west coast. 462 00:19:49,826 ---> 00:19:51,086 And you can play with this all day long. 463 00:19:51,366 ---> 00:19:53,536 The routes can certainly change. 464 00:19:53,536 ---> 00:19:55,526 This is what's nice about the INTERNET It was originally 465 00:19:55,526 ---> 00:19:58,786 designed with militaristic goals in mind so that it's supposed 466 00:19:58,786 ---> 00:20:00,336 to be resilient against failures. 467 00:20:00,336 ---> 00:20:02,606 If you take out one or more of these routers, 468 00:20:02,746 ---> 00:20:05,906 hopefully it's a nice mesh, as that video briefly showed, 469 00:20:06,096 ---> 00:20:08,486 so that data can go off in different directions 470 00:20:08,486 ---> 00:20:11,976 and this name, the World Wide Web, derives from this idea 471 00:20:11,976 ---> 00:20:14,476 that there isn't just one connection between A and B, 472 00:20:14,626 ---> 00:20:17,846 there is this web of connections that's fairly resilient these 473 00:20:17,876 ---> 00:20:20,326 days, even when servers go down. 474 00:20:20,326 ---> 00:20:21,926 So that's as much time as we'll spend 475 00:20:21,926 ---> 00:20:24,756 on the underlying implementation 476 00:20:24,756 ---> 00:20:27,516 of the INTERNET Henceforth we will now take for granted 477 00:20:27,766 ---> 00:20:29,766 that there is this thing called an INTERNET 478 00:20:29,766 ---> 00:20:32,446 So how do we actually go about using it? 479 00:20:32,446 ---> 00:20:36,656 Well, when you pull up a Web browser, you are using a client, 480 00:20:36,656 ---> 00:20:40,376 so this thing on the left, and a client is just the name given 481 00:20:40,376 ---> 00:20:42,316 to any machine that's frankly not a server. 482 00:20:42,316 ---> 00:20:45,356 The client, much like in a restaurant, request information 483 00:20:45,356 ---> 00:20:47,606 of the server, the waiter or waitress, 484 00:20:47,856 ---> 00:20:50,676 responds with that information or with that food. 485 00:20:50,676 ---> 00:20:52,166 So it's the same kind of relationship. 486 00:20:52,476 ---> 00:20:55,196 So here we just have a quick summary of what's going 487 00:20:55,196 ---> 00:20:59,736 on when a web's browser connects to a web server and you can talk 488 00:20:59,736 ---> 00:21:02,336 about machines being clients, my laptop is client, 489 00:21:02,336 ---> 00:21:04,036 but you can also talk about software 490 00:21:04,036 ---> 00:21:05,446 on a machine being a client. 491 00:21:05,536 ---> 00:21:07,316 So a web browser is a client. 492 00:21:07,586 ---> 00:21:09,566 It really reduces not to the physical thing 493 00:21:09,806 ---> 00:21:13,066 but to what role they play in some two way relationship. 494 00:21:13,366 ---> 00:21:15,346 So a client requests data of a server. 495 00:21:15,346 ---> 00:21:16,846 What does it mean to request data? 496 00:21:17,506 ---> 00:21:20,256 Well even though a normal person like us just goes 497 00:21:20,256 ---> 00:21:22,656 to like CNN.com and then hits Enter. 498 00:21:22,966 ---> 00:21:25,316 Well there's a little more technicality going 499 00:21:25,316 ---> 00:21:26,376 on underneath the hood. 500 00:21:26,376 ---> 00:21:27,946 What's really going on is 501 00:21:27,946 ---> 00:21:32,596 that your browser is sending a message to CNN.com or rather 502 00:21:32,946 ---> 00:21:35,586 to CNN.com's IP address, which you can figure 503 00:21:35,586 ---> 00:21:37,916 out by asking something called a DNS server. 504 00:21:38,156 ---> 00:21:40,196 So quick aside, there's these things called DNS, 505 00:21:40,416 ---> 00:21:43,476 Domain Name System server, whose purpose in life is just 506 00:21:43,476 ---> 00:21:45,886 to answer queries of the form, what is the IP address 507 00:21:45,886 ---> 00:21:48,616 for CNN.com or here's an IP address, 508 00:21:48,906 ---> 00:21:49,886 what is it's domain name? 509 00:21:50,076 ---> 00:21:52,626 So it remaps those two things to one another. 510 00:21:52,916 ---> 00:21:55,066 So once my browser knows the IP address, 511 00:21:55,066 ---> 00:21:57,196 it sends a message frankly, as simple as this, 512 00:21:57,196 ---> 00:22:00,916 get/ and then the language with which it wants to get it. 513 00:22:00,916 ---> 00:22:02,876 So generally HTTP 1.1. 514 00:22:03,106 ---> 00:22:04,226 What does, slash, denote? 515 00:22:04,426 ---> 00:22:06,316 Well as you probably noticed in an URL, 516 00:22:06,436 ---> 00:22:09,466 CNN.com almost always gets changed by your browser 517 00:22:09,746 ---> 00:22:13,446 to CNN.com/ and if you go to CS50.net, 518 00:22:13,636 ---> 00:22:17,456 it changes to CS50.net/, because / like on a local hard drive, 519 00:22:17,726 ---> 00:22:20,016 generally denotes the route of the file system, 520 00:22:20,016 ---> 00:22:22,206 much like on a Linux system it's similar in spirit 521 00:22:22,206 ---> 00:22:24,556 to C: on a Window's PC. 522 00:22:24,896 ---> 00:22:27,346 So that's the message that this client here 523 00:22:27,346 ---> 00:22:29,576 on the left hand side, sends to the server. 524 00:22:29,716 ---> 00:22:33,156 The server then responds with a whole bunch of text, 525 00:22:33,686 ---> 00:22:36,836 with a text file containing a language called HTML. 526 00:22:37,126 ---> 00:22:39,036 So HTTP is the protocol. 527 00:22:39,036 ---> 00:22:41,146 The set of standards that says when you want 528 00:22:41,146 ---> 00:22:43,826 to request a web page send a message like this 529 00:22:44,076 ---> 00:22:45,146 from client to server. 530 00:22:45,616 ---> 00:22:48,856 HTML is the language that just so happens 531 00:22:48,886 ---> 00:22:51,116 to be embedded in the response. 532 00:22:51,326 ---> 00:22:52,776 But as you know from using the Web, 533 00:22:52,776 ---> 00:22:56,306 embedded in the response can be a graphic, a sound, a video. 534 00:22:56,496 ---> 00:22:59,896 So HTTP doesn't care about what content's coming back, 535 00:22:59,976 ---> 00:23:03,026 just how to request it and how to hand it back and we'll see 536 00:23:03,026 ---> 00:23:04,736 that in more detail in just a moment. 537 00:23:04,956 ---> 00:23:06,966 But let's see what kind of stuff is coming back. 538 00:23:07,126 ---> 00:23:10,426 Well let's go to the Crimson.com and not focus so much 539 00:23:10,426 ---> 00:23:13,886 on the content on the page, but the content underneath the hood. 540 00:23:14,166 ---> 00:23:16,336 So I just went to Safari's view menu. 541 00:23:16,366 ---> 00:23:18,436 You can do this with any browser and I'm going 542 00:23:18,436 ---> 00:23:19,386 to scroll passed this fast, 543 00:23:19,576 ---> 00:23:21,546 because the specifics aren't that interesting. 544 00:23:21,836 ---> 00:23:25,296 But this gibberish or this Greek or however you want to view it, 545 00:23:25,296 ---> 00:23:27,806 is something called HTML and in fact, 546 00:23:27,806 ---> 00:23:30,086 it looks like there's some links on the Crimson's website 547 00:23:30,086 ---> 00:23:32,706 to categories like, food and drink, football, for the moment, 548 00:23:32,706 ---> 00:23:35,666 game recaps and they're all embedded in what looks 549 00:23:35,666 ---> 00:23:38,646 like a fairly consistent structure. 550 00:23:38,646 ---> 00:23:41,546 You've got an angled bracket, like a sideways triangle, 551 00:23:41,786 ---> 00:23:45,896 the letter A, then the word class= something, the H ref, 552 00:23:46,046 ---> 00:23:48,246 turns out H ref is going to mean hyper reference 553 00:23:48,466 ---> 00:23:50,236 and then a short URL. 554 00:23:50,396 ---> 00:23:53,246 It's not a full URL because there's no mention of HTTP 555 00:23:53,496 ---> 00:23:56,236 but the fact that these H ref's start with a slash here, 556 00:23:56,526 ---> 00:23:58,666 just means that these URL's are relative 557 00:23:58,666 ---> 00:24:01,696 to wherever the user currently is on the current server. 558 00:24:01,766 ---> 00:24:03,836 Doesn't have to bounce the user to another server. 559 00:24:04,076 ---> 00:24:05,306 We can do this for any website. 560 00:24:05,306 ---> 00:24:09,186 If you go to CS50.net, oops, and view source, 561 00:24:09,536 ---> 00:24:11,626 you'll see that too, our page is composed 562 00:24:11,626 ---> 00:24:12,816 with the same kind of text. 563 00:24:12,976 ---> 00:24:14,026 And this is the neat thing. 564 00:24:14,026 ---> 00:24:16,066 It's a little scary at first perhaps, but the neat thing 565 00:24:16,066 ---> 00:24:18,506 about the web is that it's so easy to learn new tricks 566 00:24:18,506 ---> 00:24:20,256 and learn how other sites are implemented, 567 00:24:20,336 ---> 00:24:22,106 because you can just look at their source code. 568 00:24:22,106 ---> 00:24:24,916 And generally speaking, people don't consider HTML 569 00:24:25,146 ---> 00:24:26,566 as intellectual content. 570 00:24:26,766 ---> 00:24:30,076 Right? There's really not much intellectual ownership 571 00:24:30,106 ---> 00:24:31,546 in the HTML you're marking up. 572 00:24:31,586 ---> 00:24:32,986 There might be copyright of the data, 573 00:24:33,256 ---> 00:24:35,316 but it's very much an environment where you can learn 574 00:24:35,316 ---> 00:24:37,866 from the work of others and frankly, this is sort 575 00:24:37,866 ---> 00:24:39,236 of the nature of the technology. 576 00:24:39,296 ---> 00:24:42,716 If you are requesting data, as a web browser, for information 577 00:24:42,716 ---> 00:24:46,936 from a server, the server obviously has to hand it to you 578 00:24:47,156 ---> 00:24:51,206 so that you know actually what to show the user on the screen. 579 00:24:51,206 ---> 00:24:53,956 Unlike programs written in C, where you have this opportunity 580 00:24:53,956 ---> 00:24:57,646 to compile them into 0's and 1's, HTML is what we'll call 581 00:24:57,646 ---> 00:25:00,926 and interpreted language, where it does not get turned into 0's 582 00:25:00,976 ---> 00:25:03,866 and 1's from the server, rather it just gets sent raw. 583 00:25:03,866 ---> 00:25:05,596 So when you're writing HTML source code 584 00:25:05,796 ---> 00:25:09,066 and then request your web page from a browser to a server, 585 00:25:09,216 ---> 00:25:12,346 what you get back is your HTML source code and that's going 586 00:25:12,386 ---> 00:25:16,456 to be true for JavaScript and it's kind of going to be true 587 00:25:16,456 ---> 00:25:18,396 for PHP, although thankfully with PHP, 588 00:25:18,396 ---> 00:25:21,396 that language we'll see it executed on the server. 589 00:25:21,396 ---> 00:25:25,196 It's not converted into 0's and 1's per say, but it is analyzed 590 00:25:25,276 ---> 00:25:27,236 and executed on the server 591 00:25:27,416 ---> 00:25:30,816 so that what the user sees is just some boring HTML output, 592 00:25:30,816 ---> 00:25:33,966 not the intellectual property that is my PHP code. 593 00:25:33,966 ---> 00:25:36,736 So in short for now, HTML is a mark up language. 594 00:25:36,736 ---> 00:25:39,616 It's an aesthetic language that says how to display things 595 00:25:39,616 ---> 00:25:41,456 on the screen and we'll start doing this ourselves 596 00:25:41,456 ---> 00:25:44,516 in a moment, PHP is a true programming language, 597 00:25:44,516 ---> 00:25:47,176 with four loops and wild loops and functions and variables 598 00:25:47,176 ---> 00:25:49,736 and all of that with which you can implement logic 599 00:25:49,976 ---> 00:25:53,006 and actually take input and produce output from a user. 600 00:25:53,266 ---> 00:25:54,996 So let's actually see what's going 601 00:25:54,996 ---> 00:25:58,886 on when I visit a site like, oh we can do the Hamster Dance. 602 00:25:59,296 ---> 00:26:02,736 Let's go to, let me go ahead and open up Firefox. 603 00:26:02,736 ---> 00:26:04,766 So even though the course doesn't really care what browser 604 00:26:04,766 ---> 00:26:07,656 you like to use, you can use any one you want, 605 00:26:07,656 ---> 00:26:10,446 Firefox frankly has a really nice set of development tools. 606 00:26:10,446 ---> 00:26:12,986 So what you'll see in problem set 7 later this week, 607 00:26:13,226 ---> 00:26:16,396 is that we recommend that you use some freely available tools. 608 00:26:16,396 ---> 00:26:17,956 Because it really makes it easier, 609 00:26:17,956 ---> 00:26:20,176 if not a little more fun, to develop websites. 610 00:26:20,176 ---> 00:26:21,846 Because you can see a lot more of what's going 611 00:26:21,846 ---> 00:26:23,696 on underneath the hood, specifically, 612 00:26:23,746 ---> 00:26:25,346 I've installed something called Firebug, 613 00:26:25,426 ---> 00:26:27,726 which literally puts a bug in the bottom right hand corner 614 00:26:27,726 ---> 00:26:30,336 of my screen and then if I click it I get this menu 615 00:26:30,546 ---> 00:26:32,406 that actually allows me to look at what's going 616 00:26:32,406 ---> 00:26:34,726 on underneath the hood with various websites. 617 00:26:34,726 ---> 00:26:36,346 Without having to look at the mess 618 00:26:36,596 ---> 00:26:38,776 that I just showed you, the raw source code. 619 00:26:38,776 ---> 00:26:43,246 So let's go ahead to I think it was called WebHamster.com? 620 00:26:43,976 ---> 00:26:44,636 Yes, that's it. 621 00:26:44,956 ---> 00:26:46,956 Let me pull up Firebug and it turns out, 622 00:26:46,956 ---> 00:26:48,566 this web page is actually pretty simple. 623 00:26:48,566 ---> 00:26:49,806 I'll show you the raw source code. 624 00:26:50,096 ---> 00:26:52,716 This is sort of like websites 1990's style. 625 00:26:52,716 ---> 00:26:54,026 It's pretty darn simple, 626 00:26:54,026 ---> 00:26:55,916 even though you might not understand all the syntax yet, 627 00:26:56,436 ---> 00:27:00,036 but if I go over to this tab here, the Net tab, 628 00:27:00,336 ---> 00:27:01,586 notice what's about to happen. 629 00:27:01,586 ---> 00:27:02,386 Right now it's blank. 630 00:27:02,386 ---> 00:27:05,446 I'm going to reload the page and in a moment, I'm going to see, 631 00:27:05,506 ---> 00:27:08,426 line by line, a referenced, 632 00:27:08,526 ---> 00:27:12,366 a record of every file that's requested by an HTTP. 633 00:27:12,726 ---> 00:27:16,126 So in other words, I can see what I predicted verbally, 634 00:27:16,396 ---> 00:27:18,056 goes on any time you visit a web page. 635 00:27:18,056 ---> 00:27:18,576 So here we go. 636 00:27:18,576 ---> 00:27:20,936 Reload. And it looks like, sure enough, 637 00:27:21,236 ---> 00:27:23,696 to download this web page, it was necessary 638 00:27:24,016 ---> 00:27:26,376 to make six HTTP requests. 639 00:27:26,926 ---> 00:27:29,586 Each of those requests is from browser to server, 640 00:27:29,586 ---> 00:27:31,246 asking the server for a different file. 641 00:27:31,516 ---> 00:27:32,806 Let's look at the very first one. 642 00:27:33,086 ---> 00:27:35,696 It looks like the very first one is the original one 643 00:27:35,696 ---> 00:27:39,316 that I typed, get the whole URL, WebHamster.com 644 00:27:39,556 ---> 00:27:42,046 and now notice what comes back is this. 645 00:27:42,046 ---> 00:27:44,216 Let me actually zoom out a little bit. 646 00:27:44,216 ---> 00:27:47,316 Let me go ahead and show you this. 647 00:27:47,366 ---> 00:27:52,876 View, got to click a little, tiny link here, view source. 648 00:27:53,296 ---> 00:27:55,016 So it's a little small, so I'm going to zoom in. 649 00:27:55,216 ---> 00:27:56,666 I kind of lied a moment ago 650 00:27:56,666 ---> 00:28:00,046 when I said all the browser sends is get/http/version 651 00:28:00,046 ---> 00:28:01,486 number, there's a few more details, 652 00:28:01,516 ---> 00:28:03,586 but most of them are uninteresting in my defense. 653 00:28:03,886 ---> 00:28:07,246 And so this first line is literally what my browser sent 654 00:28:07,416 ---> 00:28:09,996 to the server WebHamster.com, after figuring 655 00:28:09,996 ---> 00:28:12,476 out it's IP address and that is just shorthand notation 656 00:28:12,476 ---> 00:28:14,146 for give me the default web page, 657 00:28:14,146 ---> 00:28:16,096 give me the so-called homepage that lives 658 00:28:16,096 ---> 00:28:17,626 by convention at just slash. 659 00:28:18,016 ---> 00:28:20,836 But the browser did send some additional information that I, 660 00:28:20,836 ---> 00:28:21,996 the human did not provide, 661 00:28:22,056 ---> 00:28:24,806 this information sent any time you visit a web page 662 00:28:25,116 ---> 00:28:29,096 Specifically the web browsers reminds the server what host 663 00:28:29,096 ---> 00:28:31,836 name or what domain name the user actually typed 664 00:28:31,836 ---> 00:28:32,516 into the browser. 665 00:28:32,726 ---> 00:28:35,026 This is useful as an aside, because in the world, 666 00:28:35,416 ---> 00:28:37,896 in the real world you can buy or you can pay, 667 00:28:37,936 ---> 00:28:39,826 you can rent web hosting space. 668 00:28:39,826 ---> 00:28:40,586 Storage space. 669 00:28:40,586 ---> 00:28:42,076 Like a Cloud account for websites. 670 00:28:42,466 ---> 00:28:43,996 But they're on shared servers. 671 00:28:43,996 ---> 00:28:46,626 Where a company might have ten or a hundred other customers, 672 00:28:46,626 ---> 00:28:47,946 all with their own domain names. 673 00:28:48,306 ---> 00:28:51,086 Thankfully anytime a browser requests a web page, 674 00:28:51,286 ---> 00:28:53,756 it's supposed to tell the server, I want slash, 675 00:28:54,196 ---> 00:28:57,386 but specifically for this web site, WebHamster.com 676 00:28:57,636 ---> 00:29:01,466 and this way the server can distinguish my requests 677 00:29:01,466 ---> 00:29:04,206 from another customer's request, from another customer's request. 678 00:29:04,206 ---> 00:29:06,556 That's called shared web posting, which might pertain 679 00:29:06,556 ---> 00:29:08,626 to some of your final projects if you guys decide to try 680 00:29:08,626 ---> 00:29:09,836 to commercialize thereafter 681 00:29:09,836 ---> 00:29:11,836 or just make them live on passed the course. 682 00:29:12,116 ---> 00:29:14,506 Then there's this stuff, user agent, you might have heard 683 00:29:14,506 ---> 00:29:16,796 that most websites know what browser you're using, 684 00:29:16,796 ---> 00:29:19,496 what operating system you're using, 685 00:29:19,496 ---> 00:29:20,816 what plug ins you have installed, 686 00:29:21,036 ---> 00:29:23,626 that's because your browser is very willingly giving 687 00:29:23,626 ---> 00:29:26,306 up that information every time you request a web page. 688 00:29:26,306 ---> 00:29:29,226 Most any web site can tell you what version of Mac OS 689 00:29:29,226 ---> 00:29:30,966 or Windows you're running, what browser you're running, 690 00:29:31,236 ---> 00:29:33,326 as well as you're IP address, obviously, 691 00:29:33,326 ---> 00:29:34,776 otherwise the data couldn't get back to you. 692 00:29:35,036 ---> 00:29:37,166 So there's a lot of juicy information websites know 693 00:29:37,166 ---> 00:29:37,596 about you. 694 00:29:37,866 ---> 00:29:40,296 Some of this stuff is technical and not all that interesting. 695 00:29:40,296 ---> 00:29:43,396 But it relates to how the page is encoded, whether 696 00:29:43,396 ---> 00:29:45,876 or not it's compressed and a few other details. 697 00:29:45,936 ---> 00:29:48,506 But what comes back ultimately, is the response. 698 00:29:48,596 ---> 00:29:51,346 So if I actually scroll back up here and look 699 00:29:51,346 ---> 00:29:55,146 at this response tab, you see exactly the source code 700 00:29:55,416 ---> 00:29:56,026 that came back. 701 00:29:56,246 ---> 00:29:57,376 So when you request an URL, 702 00:29:57,376 ---> 00:30:00,756 what you're really getting back is a file that might be a gif, 703 00:30:00,756 ---> 00:30:03,986 it might be a jpeg or it might be a text file who's file 704 00:30:03,986 ---> 00:30:07,956 extension is usually by convention, .html and inside 705 00:30:07,956 ---> 00:30:10,236 that text file is just a bunch of stuff like this. 706 00:30:10,576 ---> 00:30:12,116 But it follows a common structure. 707 00:30:12,116 ---> 00:30:14,386 Let me look at the very top of the server's response 708 00:30:14,676 ---> 00:30:17,966 and we'll see that almost every website out there does 709 00:30:17,966 ---> 00:30:21,686 in fact start with an open bracket, html closed bracket, 710 00:30:21,906 ---> 00:30:24,866 then inside of that or next to that is open bracket head, 711 00:30:24,986 ---> 00:30:28,046 for the head of the web page, followed by open bracket title 712 00:30:28,046 ---> 00:30:30,546 and then the actual title and then this curiosity. 713 00:30:30,766 ---> 00:30:33,196 It turns out that html is very panantic [assumed spelling]. 714 00:30:33,196 ---> 00:30:35,716 When you tell the browser, start doing something, 715 00:30:36,256 ---> 00:30:38,276 you almost always have to tell the browser later, 716 00:30:38,506 ---> 00:30:39,786 stop doing something. 717 00:30:40,136 ---> 00:30:42,916 So if I reinterpret what I'm seeing here, 718 00:30:42,916 ---> 00:30:44,466 this open bracket html, 719 00:30:44,736 ---> 00:30:48,156 this pretty much is the html telling the browser, 720 00:30:48,396 ---> 00:30:49,476 here comes some html. 721 00:30:49,586 ---> 00:30:51,526 Get ready to display it in the familiar way. 722 00:30:51,996 ---> 00:30:54,606 Open bracket head closed bracket says to the browser, 723 00:30:54,606 ---> 00:30:56,056 here comes the head of the web page, 724 00:30:56,056 ---> 00:30:59,376 get ready to display the title and some other stuff. 725 00:30:59,376 ---> 00:31:02,426 Here comes the title with open bracket title closed bracket, 726 00:31:02,726 ---> 00:31:05,486 the title is to be Hamster Dance and that's the word, 727 00:31:05,486 ---> 00:31:07,616 those are the words that you see at the very top of the window. 728 00:31:07,936 ---> 00:31:10,666 But then when you have a tag, as these things are called, 729 00:31:10,666 ---> 00:31:11,956 anything between brackets, 730 00:31:12,186 ---> 00:31:13,686 angled brackets, is called a tag. 731 00:31:14,086 ---> 00:31:17,436 Anytime that tag starts with a forward slash and then ends 732 00:31:17,436 ---> 00:31:20,776 with the same word that the previous tag started with, 733 00:31:21,086 ---> 00:31:22,226 that's kind of like the opposite. 734 00:31:22,616 ---> 00:31:24,996 It says, stop displaying the title. 735 00:31:25,116 ---> 00:31:28,916 So this is start the title, stop the title and so accordingly, 736 00:31:28,916 ---> 00:31:31,246 this is generally called a start tag, the title tag, 737 00:31:31,516 ---> 00:31:35,116 this is called an end tag or an open tag and a closed tag. 738 00:31:35,116 ---> 00:31:36,126 So long as you have some notion 739 00:31:36,126 ---> 00:31:38,246 of symmetry doesn't really matter what you call them. 740 00:31:38,616 ---> 00:31:39,586 Then we have this thing. 741 00:31:39,586 ---> 00:31:40,546 The body tag. 742 00:31:40,546 ---> 00:31:43,036 So there's mainly two big parts to a web page. 743 00:31:43,036 ---> 00:31:46,066 There's the head in which very little tends to go, 744 00:31:46,176 ---> 00:31:49,096 like the title and then we'll see some stuff called cascading 745 00:31:49,166 ---> 00:31:51,206 style sheets and some other stuff called JavaScript, 746 00:31:51,266 ---> 00:31:53,576 but for the most part the head is very small. 747 00:31:53,576 ---> 00:31:56,886 In the web page it's the body where is really 99% 748 00:31:56,886 ---> 00:32:00,266 of the content usually, so the body tag says, 749 00:32:00,436 ---> 00:32:02,476 here comes the body of the web page 750 00:32:02,736 ---> 00:32:04,226 But notice this interesting thing. 751 00:32:04,586 ---> 00:32:08,186 It turns out that tags, kind of like functions 752 00:32:08,286 ---> 00:32:10,236 in C, can be parameterized. 753 00:32:10,556 ---> 00:32:13,136 You can modify the default behavior of their, 754 00:32:13,886 ---> 00:32:16,616 you can modify their default behavior by passing 755 00:32:16,616 ---> 00:32:19,386 in something similar in spirit to argument or parameters, 756 00:32:19,656 ---> 00:32:21,666 but in this world they're called attributes 757 00:32:21,986 ---> 00:32:23,836 and any attribute is a key word, 758 00:32:23,836 ---> 00:32:28,266 like BG color = quote unquote and then some value. 759 00:32:28,306 ---> 00:32:32,716 So now you can probably guess, BG color is, background color. 760 00:32:32,756 ---> 00:32:35,076 Why? Just some people, ten to fifteen years ago, 761 00:32:35,076 ---> 00:32:37,886 decided this is what we'll denote the background color 762 00:32:37,886 ---> 00:32:39,446 of a page, BG color for short 763 00:32:39,766 ---> 00:32:41,146 and then there's this quote unquote. 764 00:32:41,146 ---> 00:32:42,016 This is the value. 765 00:32:42,236 ---> 00:32:44,676 Turns out you could have write hard coded words 766 00:32:44,676 ---> 00:32:45,626 like quote unquote white, 767 00:32:45,786 ---> 00:32:47,416 quote unquote black, quote unquote red. 768 00:32:47,586 ---> 00:32:50,236 There's a few colors that are just so common 769 00:32:50,236 ---> 00:32:51,846 that every browser knows what they are. 770 00:32:52,206 ---> 00:32:54,266 But if you want to be a little more sophisticated, 771 00:32:54,446 ---> 00:32:59,216 you can actually use hexadecimal notation and FFFFFF happens 772 00:32:59,216 ---> 00:33:02,686 to represent, so white, that's a lot of red, that's a lot 773 00:33:02,686 ---> 00:33:05,496 of green, that's a lot of blue, which together, like the spectra 774 00:33:05,496 ---> 00:33:07,696 of light, gives you the white color. 775 00:33:07,696 ---> 00:33:12,326 And if by contrast you did 000000, you'd get black and just 776 00:33:12,326 ---> 00:33:17,806 like Pset 5, if you did FF0000, you would get a lot of red. 777 00:33:17,806 ---> 00:33:20,206 So you can very quickly make some pretty hideous web pages 778 00:33:20,466 ---> 00:33:23,746 but you can use these so called hexadecimal codes to be precise 779 00:33:23,856 ---> 00:33:24,966 as to what they look like. 780 00:33:25,216 ---> 00:33:27,536 So I'm not going to focus on too much more of this Web Hamster, 781 00:33:27,536 ---> 00:33:29,516 because they're actually using a slightly older syntax. 782 00:33:29,836 ---> 00:33:32,356 We're going to be using in the course or at least promoting 783 00:33:32,356 ---> 00:33:34,956 in the course, the latest and greatest version of HTML, 784 00:33:34,956 ---> 00:33:35,866 which is called HTML5. 785 00:33:36,486 ---> 00:33:38,096 This is what Steve Jobs and others have kind 786 00:33:38,096 ---> 00:33:39,866 of been stomping their foot about people using. 787 00:33:40,126 ---> 00:33:43,456 The nice thing about HTML5 is it's a little simpler 788 00:33:43,736 ---> 00:33:46,746 than HTML4, which is sort of last year's version. 789 00:33:46,976 ---> 00:33:49,266 But I should disclaim that HTML5 as a language, 790 00:33:49,266 ---> 00:33:50,476 isn't quite finalized. 791 00:33:50,556 ---> 00:33:51,396 The world tends to take 792 00:33:51,396 ---> 00:33:53,666 like five years before they ever decide on the new version 793 00:33:53,666 ---> 00:33:54,976 of anything in the computer world. 794 00:33:55,366 ---> 00:33:57,046 But if you've ever heard 795 00:33:57,046 ---> 00:34:00,346 that iPhone's don't display Flash video 796 00:34:00,546 ---> 00:34:04,496 but they do display HTML5, what that means is that websites 797 00:34:04,586 ---> 00:34:06,076 that support, like the iPhone 798 00:34:06,076 ---> 00:34:08,316 and these other devices have been designed 799 00:34:08,316 ---> 00:34:09,676 with a certain version of the language. 800 00:34:09,676 ---> 00:34:11,756 But the nice thing is it's by no means Apple specific, 801 00:34:11,756 ---> 00:34:15,216 this language, HTML5, it just happens to be Apple decided. 802 00:34:15,386 ---> 00:34:16,746 We're going to support this one. 803 00:34:16,746 ---> 00:34:19,866 And it is to be sort of the next iteration. 804 00:34:19,906 ---> 00:34:21,576 So we will teach you the latest and greatest. 805 00:34:21,876 ---> 00:34:23,726 And with it you can actually do some neat things. 806 00:34:23,726 ---> 00:34:26,866 So even though we're talking for the moment about a web browser, 807 00:34:27,116 ---> 00:34:29,886 so this here, not to sound like an Apple fan boy here, 808 00:34:30,096 ---> 00:34:34,996 this is an iPad, but using some fairly simple HTML 809 00:34:34,996 ---> 00:34:37,816 and as we'll see next week, a language called JavaScript. 810 00:34:38,296 ---> 00:34:39,716 This is not a native application. 811 00:34:39,716 ---> 00:34:42,396 This isn't something I downloaded from the App Store, 812 00:34:42,586 ---> 00:34:44,686 it's just a website that I'm visiting with Safari. 813 00:34:45,026 ---> 00:34:47,256 And if my network cooperates and I hit Play here, 814 00:34:47,256 ---> 00:34:50,756 what we did is we went ahead and implemented the same CS50, 815 00:34:50,756 ---> 00:34:54,726 come on, the same CS50 video interface, 816 00:34:55,206 ---> 00:34:57,566 come on, don't embarrass me. 817 00:35:00,516 ---> 00:35:01,926 Try one more reload. 818 00:35:02,136 ---> 00:35:03,056 Network is a little spotty. 819 00:35:03,856 ---> 00:35:05,566 Come on. Play. 820 00:35:07,046 ---> 00:35:09,046 Come on. There we go. 821 00:35:09,396 ---> 00:35:12,186 OK, so if you've ever used CS50's videos 822 00:35:12,186 ---> 00:35:14,906 that have the slide synchronized transcripts to the side, 823 00:35:15,096 ---> 00:35:18,016 well we package this all up using the same language, HTML5. 824 00:35:18,016 ---> 00:35:19,966 This other language for next week, namely. 825 00:35:19,966 ---> 00:35:21,406 >> Unknown: This is CS50. 826 00:35:21,406 ---> 00:35:22,656 My name is [inaudible]. 827 00:35:22,656 ---> 00:35:26,456 >> Unknown: So that was some eight weeks ago. 828 00:35:26,696 ---> 00:35:30,216 So in short, even though we'll focus conversationally mostly 829 00:35:30,216 ---> 00:35:31,546 on web browsers, realize 830 00:35:31,546 ---> 00:35:34,046 that these exact same technologies now are being used 831 00:35:34,046 ---> 00:35:37,686 to design sites for Android, for iPhones, for Blackberry, 832 00:35:37,916 ---> 00:35:39,576 this again is very distracting. 833 00:35:39,576 ---> 00:35:41,066 Sorry about that. 834 00:35:41,136 ---> 00:35:43,286 And so realize that what's really cool 835 00:35:43,286 ---> 00:35:45,806 about the Web these days is just how universal it is. 836 00:35:45,806 ---> 00:35:49,186 You don't have to worry about compiling your code for a Mac 837 00:35:49,186 ---> 00:35:52,776 or for a PC, we're really now able to develop applications 838 00:35:53,016 ---> 00:35:55,826 that are pretty much independent of the operating system 839 00:35:55,826 ---> 00:35:58,686 and the hardware that the user actually has, 840 00:35:58,686 ---> 00:36:00,176 which is pretty darn exciting. 841 00:36:00,176 ---> 00:36:02,866 So let's make our simplest of web pages 842 00:36:02,866 ---> 00:36:04,706 in this language called HTML. 843 00:36:04,706 ---> 00:36:07,126 So we have set up the Cloud in such a way 844 00:36:07,336 ---> 00:36:09,266 that using your same current Cloud accounts, 845 00:36:09,266 ---> 00:36:12,606 you can start making websites and you can develop problems 846 00:36:12,606 ---> 00:36:15,356 that seven and eighth year and also your final projects 847 00:36:15,386 ---> 00:36:19,096 and know now too, if you would like to go out and get for $10 848 00:36:19,096 ---> 00:36:23,026 or $20, sort of a fun domain name like, IsawYouHarvard.com 849 00:36:23,026 ---> 00:36:25,666 or HarvardFML.com, you can buy these things fairly 850 00:36:25,666 ---> 00:36:27,536 inexpensively these days on a yearly basis. 851 00:36:27,876 ---> 00:36:30,046 Realize that for final projects, we'll let you 852 00:36:30,046 ---> 00:36:32,506 and we'll show you how to map that domain name 853 00:36:32,586 ---> 00:36:36,786 to your Cloud account so that when people visit MyWebsite.com, 854 00:36:36,976 ---> 00:36:39,426 it's actually being hosted on the Cloud, 855 00:36:39,486 ---> 00:36:41,116 even though the world knows your website 856 00:36:41,116 ---> 00:36:43,126 under whatever favorite name you've chosen. 857 00:36:43,126 ---> 00:36:44,896 The upside of this is that if you decide 858 00:36:44,896 ---> 00:36:46,646 to continue your projects after the course 859 00:36:46,646 ---> 00:36:49,066 or commercialize them, you can maintain that same branding 860 00:36:49,066 ---> 00:36:51,506 and just move the website off of the Cloud eventually 861 00:36:51,756 ---> 00:36:53,096 to your own commercial web host 862 00:36:53,096 ---> 00:36:54,646 and we'll show you how to do all of that. 863 00:36:54,936 ---> 00:36:56,676 It's actually relatively easy. 864 00:36:56,746 ---> 00:36:57,706 So I'm going to go ahead and do this. 865 00:36:57,836 ---> 00:37:01,196 It turns out that on typically a Linux system, 866 00:37:01,526 ---> 00:37:03,066 you can create a special directory. 867 00:37:03,166 ---> 00:37:06,256 A directory who's name is Public_HTML 868 00:37:06,566 ---> 00:37:10,206 and the server is usually set up in a way that anything inside 869 00:37:10,206 ---> 00:37:12,546 of that folder is accessible on the World Wide Web. 870 00:37:12,916 ---> 00:37:17,026 So I'm going to go ahead and do mkdirpublic_html 871 00:37:17,026 ---> 00:37:19,986 and next week's pset, problem set 7, we'll walk you 872 00:37:19,986 ---> 00:37:21,646 through these steps, so today we'll go quickly. 873 00:37:21,886 ---> 00:37:23,076 I'm going to go ahead and hit Enter. 874 00:37:23,386 ---> 00:37:26,756 That will create for me a public HTML directory, 875 00:37:26,756 ---> 00:37:29,526 which I can then CD into, change directory, 876 00:37:29,796 ---> 00:37:32,176 and now I'm in my public HTML directory. 877 00:37:32,236 ---> 00:37:34,046 There might be a few other commands you'll have to write 878 00:37:34,046 ---> 00:37:35,626 and we'll walk you through those in the problem set, 879 00:37:35,886 ---> 00:37:40,006 but now I have some storage space for my personal web page. 880 00:37:40,006 ---> 00:37:41,936 So I'm going to go ahead and make my first web page 881 00:37:41,936 ---> 00:37:43,356 or I'm going to go ahead and open Nano. 882 00:37:43,526 ---> 00:37:45,166 But you could do this in Text Wrangler, 883 00:37:45,206 ---> 00:37:47,086 but just so that we're not Mac biased, I'll go ahead 884 00:37:47,086 ---> 00:37:48,096 and use Nano for today. 885 00:37:48,096 ---> 00:37:50,836 So I'm going to go ahead and create a file called, 886 00:37:51,426 ---> 00:37:55,696 Hello.html, .html being the world's convention 887 00:37:55,756 ---> 00:37:59,016 for the file extension for web pages and I'm going 888 00:37:59,016 ---> 00:38:02,656 to start the page as follows, doctypehtml. 889 00:38:03,116 ---> 00:38:07,346 So this is kind of a stupid habit you should get 890 00:38:07,346 ---> 00:38:10,556 into which just tells the browser, this is the version 891 00:38:10,556 ---> 00:38:12,086 of html that I'm using. 892 00:38:12,376 ---> 00:38:13,846 In this case here, the fact 893 00:38:13,846 ---> 00:38:15,496 that I've not mentioned a version number, 894 00:38:15,746 ---> 00:38:18,106 it's going to imply to the server or to the browser, 895 00:38:18,336 ---> 00:38:19,656 here comes some HTML5. 896 00:38:20,106 ---> 00:38:22,326 But now that doesn't mean here comes a web page, 897 00:38:22,326 ---> 00:38:24,116 even though the syntax looks similar, 898 00:38:24,206 ---> 00:38:26,706 humans just did not make very good choices here, 899 00:38:27,356 ---> 00:38:29,896 to tell the browser here comes a web page, 900 00:38:29,956 ---> 00:38:33,206 I need to actually say, html and then I'm going 901 00:38:33,206 ---> 00:38:35,066 to get a little ahead of myself and I'm going 902 00:38:35,066 ---> 00:38:37,096 to pre-emptively close that tag. 903 00:38:37,096 ---> 00:38:40,016 So this web page right now, completely uninteresting. 904 00:38:40,186 ---> 00:38:41,976 Because it's saying, here comes a web page, 905 00:38:42,236 ---> 00:38:43,346 there goes the web page. 906 00:38:43,346 ---> 00:38:45,836 There's no content actually there but it's a good habit 907 00:38:45,836 ---> 00:38:48,436 to get into, just like you might put a curly brace open 908 00:38:48,436 ---> 00:38:51,016 and a close curly brace in your C code and then go back and fill 909 00:38:51,016 ---> 00:38:52,796 in the blank, same idea here. 910 00:38:53,076 ---> 00:38:55,886 So let me go ahead and set up the head of this web page. 911 00:38:56,096 ---> 00:38:58,696 I'm going to similarly pre-emptively open a tag 912 00:38:58,826 ---> 00:38:59,476 and close it. 913 00:39:00,066 ---> 00:39:01,916 Again just like in C, it's good habit, 914 00:39:02,056 ---> 00:39:04,966 but not technologically required to have white space 915 00:39:04,966 ---> 00:39:07,286 and indentation, but do do it for the sake of style. 916 00:39:07,286 ---> 00:39:10,616 I'm going to make a web page that says, hello world. 917 00:39:10,676 ---> 00:39:13,666 And now I'm done with my title, so I kind of do the opposite. 918 00:39:13,666 ---> 00:39:17,036 Open bracket slash title, with no spaces in there. 919 00:39:17,036 ---> 00:39:18,586 It's all one big string. 920 00:39:18,866 ---> 00:39:20,376 All right, that's the head of my web page. 921 00:39:20,376 ---> 00:39:21,766 Now let me go ahead and make the body. 922 00:39:22,066 ---> 00:39:24,506 Let me close the body and now inside 923 00:39:24,506 ---> 00:39:26,036 of the body I'm just going to say again, 924 00:39:26,036 ---> 00:39:30,726 hello world welcome to my homepage. 925 00:39:30,926 ---> 00:39:33,096 Just something silly like that and that's it. 926 00:39:33,406 ---> 00:39:35,696 That is all that's required to make a web page 927 00:39:35,696 ---> 00:39:37,036 on the World Wide Web. 928 00:39:37,036 ---> 00:39:39,286 And to be honest, it kind of testified to this, 929 00:39:39,646 ---> 00:39:44,796 first learned HTML in like 1995, 96, I was in Math 20. 930 00:39:45,116 ---> 00:39:48,836 My math CA who I got friendly with, we went to the basement 931 00:39:48,836 ---> 00:39:49,676 of the Science Center one day. 932 00:39:49,676 ---> 00:39:50,536 He was like hey, you want to learn. 933 00:39:50,536 ---> 00:39:51,161 [ laughter ] 934 00:39:51,161 ---> 00:39:51,786 [ applause ] 935 00:39:51,786 ---> 00:39:57,726 Can I finish the story? 936 00:39:57,726 ---> 00:39:58,076 [ laughter ] 937 00:39:58,076 ---> 00:40:00,956 Can we go to the computer lab in the basement 938 00:40:00,956 ---> 00:40:02,546 of the Science Center and he's like, 939 00:40:02,546 ---> 00:40:03,826 hey you want to learn HTML? 940 00:40:03,826 ---> 00:40:05,166 I'm like sure, I'd love to learn HTML. 941 00:40:05,576 ---> 00:40:09,196 And so we logged into one of the. 942 00:40:09,196 ---> 00:40:09,396 [ laughter ] 943 00:40:09,396 ---> 00:40:12,096 We logged into one of the lab computers and no joke, 944 00:40:12,096 ---> 00:40:15,376 like 20 minutes later I had the most horrific looking website 945 00:40:15,376 ---> 00:40:17,246 on the INTERNET But that was testament 946 00:40:17,246 ---> 00:40:20,166 to just how easy this stuff actually was. 947 00:40:20,626 ---> 00:40:21,626 So with that said, 948 00:40:21,626 ---> 00:40:25,146 let's actually recreate what my math CA and I did 949 00:40:25,146 ---> 00:40:26,276 that day, here on stage. 950 00:40:26,276 ---> 00:40:26,343 [ laughter ] 951 00:40:26,343 ---> 00:40:29,556 I'm going to go ahead and save this file. 952 00:40:29,556 ---> 00:40:32,126 So Control O or rather, Control X. 953 00:40:32,126 ---> 00:40:33,566 So let's get it back to the command line. 954 00:40:33,876 ---> 00:40:35,296 I've got, hello.html. 955 00:40:35,296 ---> 00:40:38,776 If I do LS, notice that I do have a file, hello.html, 956 00:40:39,016 ---> 00:40:41,236 I also pre-emptively put a lectures directory there, 957 00:40:41,266 ---> 00:40:42,046 but never mind that. 958 00:40:42,436 ---> 00:40:44,446 So I'm now going to go to my web browser and I'm going 959 00:40:44,446 ---> 00:40:50,296 to open a new page and I'm going to go to http://Cloud.CS50.net 960 00:40:50,296 ---> 00:40:53,076 and this is slightly stupid convention syntactically, 961 00:40:53,076 ---> 00:40:55,876 but the world decided that Tilda username, 962 00:40:56,086 ---> 00:40:58,246 would represent username's homepage 963 00:40:58,246 ---> 00:40:59,486 on this particular server. 964 00:40:59,756 ---> 00:41:01,986 So my username here today is CS50. 965 00:41:02,256 ---> 00:41:09,536 So I'm going to go to http://Cloud.CS50.net/TildaCS50/ 966 00:41:09,926 ---> 00:41:11,966 and then hit Enter and unfortunately, 967 00:41:12,446 ---> 00:41:13,846 I get this weird looking listing. 968 00:41:13,846 ---> 00:41:15,676 Well this is just the contents of that directory. 969 00:41:15,886 ---> 00:41:18,576 Turns out that I made this directory world readable, 970 00:41:18,636 ---> 00:41:19,896 which probably wasn't smart. 971 00:41:19,896 ---> 00:41:22,576 Because now the whole world can see whatever files I happen 972 00:41:22,576 ---> 00:41:23,586 to have in this directory. 973 00:41:23,586 ---> 00:41:27,126 Maybe not a big deal because you shouldn't be putting private 974 00:41:27,126 ---> 00:41:30,506 files in a public directory, but this is not the behavior I want. 975 00:41:30,506 ---> 00:41:31,796 But wait a minute, I have to remember, 976 00:41:32,036 ---> 00:41:34,796 the file I created was, hello.html, 977 00:41:35,106 ---> 00:41:37,206 so we need to include that in the URL. 978 00:41:37,206 ---> 00:41:41,246 So I'm going to go to /hello.html, Enter. 979 00:41:41,896 ---> 00:41:43,216 Now, problem number two. 980 00:41:43,256 ---> 00:41:45,356 So you don't have permission to access, 981 00:41:45,676 ---> 00:41:47,836 hello.html, on this server. 982 00:41:47,986 ---> 00:41:49,396 And notice some other curiosities. 983 00:41:49,396 ---> 00:41:51,036 I'm being reminded of the name of the server. 984 00:41:51,036 ---> 00:41:52,326 Statement of the obvious. 985 00:41:52,566 ---> 00:41:53,456 But port 80. 986 00:41:53,456 ---> 00:41:54,916 You actually might have seen this number 987 00:41:54,916 ---> 00:41:57,176 in that little Warriors of the Net video a moment ago. 988 00:41:57,486 ---> 00:42:00,046 Turns out that there are of course all these services 989 00:42:00,046 ---> 00:42:02,706 on the INTERNET The Web, e-mail, instant messaging, 990 00:42:02,966 ---> 00:42:07,096 VOIP services, all these fun applications that run on top 991 00:42:07,096 ---> 00:42:10,466 of the INTERNET and I'm consciously putting my hand 992 00:42:10,466 ---> 00:42:13,476 up here to distinguish it from Ethernet and IP and TCP and all 993 00:42:13,476 ---> 00:42:15,756 that on top of the INTERNET, run all of these services 994 00:42:16,086 ---> 00:42:18,236 and the only way a computer knows 995 00:42:18,326 ---> 00:42:20,556 which service you actually want is 996 00:42:20,556 ---> 00:42:21,966 that even though we didn't see it yet, 997 00:42:21,966 ---> 00:42:26,086 any time a client connects to a server, it doesn't just connect 998 00:42:26,126 ---> 00:42:29,146 to that IP address, it connects to a specific number. 999 00:42:29,146 ---> 00:42:31,816 Something called a port number that's just a little hint 1000 00:42:31,816 ---> 00:42:35,146 that says, not only do I want to connect to the CloudCS50.net 1001 00:42:35,306 ---> 00:42:37,936 or to CNN.com or the Crimson.com, 1002 00:42:38,206 ---> 00:42:42,936 I specifically want the service that lives at port number 80 1003 00:42:43,306 ---> 00:42:45,756 and port 80 by convention is the Web. 1004 00:42:45,966 ---> 00:42:47,576 So 80 equals HTTP. 1005 00:42:47,576 ---> 00:42:51,906 SSH you might have noticed, is what port number? 1006 00:42:52,796 ---> 00:42:53,586 Twenty two. 1007 00:42:53,726 ---> 00:42:55,596 So here already, we see how a server 1008 00:42:55,596 ---> 00:42:59,236 like the Cloud can have a web server on it running on port 80 1009 00:42:59,236 ---> 00:43:03,566 and an SSH server running on it on port 22, because clients 1010 00:43:03,566 ---> 00:43:07,376 like Putty and Terminal and now the Firefox and Safari, 1011 00:43:07,566 ---> 00:43:11,866 know to send these additional numbers, 80 for Web, 22 for SSH, 1012 00:43:12,086 ---> 00:43:13,866 now the server knows when it gets a request, 1013 00:43:13,866 ---> 00:43:15,826 oh this should be handled by the web server, 1014 00:43:15,826 ---> 00:43:17,806 oh this should be handled by the SSH server. 1015 00:43:17,806 ---> 00:43:20,856 It's in this way that servers multiplex along multiple 1016 00:43:20,856 ---> 00:43:23,406 requests that might be coming in on the same IP address. 1017 00:43:23,406 ---> 00:43:24,986 So that's why we see 80 there. 1018 00:43:25,396 ---> 00:43:28,026 Thankfully the world decided that in a web browser, 1019 00:43:28,026 ---> 00:43:31,476 if you don't mention port 80, it's just assumed. 1020 00:43:31,476 ---> 00:43:33,916 Otherwise our URL's would be unnecessarily ugly 1021 00:43:33,916 ---> 00:43:36,416 and a little longer, but I can be pedantic [assumed spelling] 1022 00:43:36,466 ---> 00:43:40,376 here and I can say after.net:80 and then hit Enter, 1023 00:43:40,586 ---> 00:43:42,606 and that's actually going to lead to the same place. 1024 00:43:42,646 ---> 00:43:45,086 It quickly disappears because it's inferred, 1025 00:43:45,416 ---> 00:43:47,896 but it is in fact the same. 1026 00:43:47,896 ---> 00:43:49,106 All right, still got a problem. 1027 00:43:49,106 ---> 00:43:51,036 I'm really just stalling because I'm not sure what to do, 1028 00:43:51,156 ---> 00:43:53,586 but wait a minute, I need to go back over to the server 1029 00:43:53,586 ---> 00:43:57,436 and realize it's not enough to just say this folder is called, 1030 00:43:57,436 ---> 00:44:00,426 public HTML, I actually have to make sure that the files 1031 00:44:00,426 ---> 00:44:02,136 within are world readable. 1032 00:44:02,476 ---> 00:44:05,606 By default, I think we said in one of the earliest lectures, 1033 00:44:05,606 ---> 00:44:08,986 when you create a file, it's owned by only you. 1034 00:44:09,206 ---> 00:44:11,656 It's readable only by you and this is a good thing, 1035 00:44:11,656 ---> 00:44:12,696 just for privacy sake. 1036 00:44:12,696 ---> 00:44:14,726 You don't want to create some file and then have anyone 1037 00:44:14,726 ---> 00:44:16,226 on the server be able to access it. 1038 00:44:16,506 ---> 00:44:20,326 So here we see, recall from an earlier pset, is that output 1039 00:44:20,326 ---> 00:44:23,446 of LS-L and notice on the left hand side here, 1040 00:44:23,446 ---> 00:44:27,586 RW means read write, because it's RW all the way on the left, 1041 00:44:27,716 ---> 00:44:30,876 that means only the owner, me, can read and write this file. 1042 00:44:31,176 ---> 00:44:32,596 So I actually need to run a command 1043 00:44:32,596 ---> 00:44:34,266 and there's a few commands I can run, 1044 00:44:34,526 ---> 00:44:38,836 but generally they involve chmod, C H M O D, 1045 00:44:38,836 ---> 00:44:42,806 for change mode and then I'm going to go ahead and say, A+R, 1046 00:44:43,096 ---> 00:44:46,186 this means all, the whole world, plus R, read, 1047 00:44:46,426 ---> 00:44:49,476 let the whole world read the file called, hello.html. 1048 00:44:49,846 ---> 00:44:50,416 I hit Enter. 1049 00:44:50,776 ---> 00:44:53,976 I then redo LS-L and now notice, sure enough, 1050 00:44:54,216 ---> 00:44:56,986 I get read write access and then everyone else 1051 00:44:56,986 ---> 00:44:59,116 in the world gets R, for read. 1052 00:44:59,516 ---> 00:45:01,206 So now I'm going to go back to the website, 1053 00:45:01,686 ---> 00:45:03,526 I'm going to go ahead and click reload 1054 00:45:04,076 ---> 00:45:06,086 and wha-la [assumed spelling], my very first web page 1055 00:45:06,236 ---> 00:45:08,596 on the INTERNET Well let's see quickly we can butcher this 1056 00:45:08,596 ---> 00:45:10,386 and make it my first ugliest web page 1057 00:45:10,386 ---> 00:45:12,136 on the INTERNET Well that's just some text, 1058 00:45:12,326 ---> 00:45:13,306 but notice at the very top. 1059 00:45:13,426 ---> 00:45:14,186 Here's the title. 1060 00:45:14,286 ---> 00:45:16,896 So when I had the title tagged, inside my page, 1061 00:45:16,896 ---> 00:45:18,836 that's where it ends up going, above the address bar. 1062 00:45:19,106 ---> 00:45:21,676 Let's use BG color, this thing called an attribute. 1063 00:45:21,676 ---> 00:45:23,066 So I'm going to re-open, hello.html. 1064 00:45:23,066 ---> 00:45:26,256 I'm going to add some space there and say, 1065 00:45:26,256 ---> 00:45:30,016 BG color equals quote unquote, let's say white. 1066 00:45:30,986 ---> 00:45:32,776 Save. OK. Kind of pointless. 1067 00:45:32,816 ---> 00:45:34,066 All right, so let's go back. 1068 00:45:34,856 ---> 00:45:35,366 Let's say, black. 1069 00:45:35,946 ---> 00:45:38,096 Save with Control O. OK, 1070 00:45:38,096 ---> 00:45:39,686 pointless for a different reason. 1071 00:45:39,846 ---> 00:45:41,646 Right? So you know, highlight the text, 1072 00:45:41,646 ---> 00:45:43,246 but now I have a secret web page All right. 1073 00:45:43,246 ---> 00:45:43,816 [ laughter ] 1074 00:45:43,816 ---> 00:45:46,176 So, now I can do something like this. 1075 00:45:46,446 ---> 00:45:48,456 Even though we saw all capital F's before, 1076 00:45:48,456 ---> 00:45:49,976 doesn't matter, just be consistent. 1077 00:45:49,976 ---> 00:45:51,436 All lowercase or all capitals. 1078 00:45:51,436 ---> 00:45:52,526 This should give me what color? 1079 00:45:52,526 ---> 00:45:54,436 All right, so this is red. 1080 00:45:54,436 ---> 00:45:56,756 So again, even though in the bit mapped world 1081 00:45:56,756 ---> 00:45:59,916 and Microsoft decided that an RGB triple would actually be 1082 00:45:59,916 ---> 00:46:03,206 implemented as BGR for really no good compelling reason, 1083 00:46:03,486 ---> 00:46:06,646 in the real world when you say RGB, you mean R G B. 1084 00:46:06,736 ---> 00:46:09,606 So FF is R, 000 is GB. 1085 00:46:09,856 ---> 00:46:10,916 So let's reload. 1086 00:46:10,996 ---> 00:46:13,216 All right, it's getting pretty hideous. 1087 00:46:13,366 ---> 00:46:16,006 Let's go ahead and try something else. 1088 00:46:16,146 ---> 00:46:18,656 Let's say I want to make something bigger. 1089 00:46:18,906 ---> 00:46:22,536 So it turns out I can use special tags called, H1. 1090 00:46:22,536 ---> 00:46:25,956 So H1 stands for heading, 1 means the biggest heading. 1091 00:46:26,226 ---> 00:46:28,606 I have to close it on the other side to be symmetric. 1092 00:46:28,606 ---> 00:46:29,486 I'm going to save this. 1093 00:46:29,826 ---> 00:46:32,826 And so now the text is going to stay the same, but the browsers 1094 00:46:32,826 ---> 00:46:35,776 that support this language called HTML, have been designed 1095 00:46:35,776 ---> 00:46:37,356 by their programmers to understand 1096 00:46:37,356 ---> 00:46:41,276 that open bracket H1 means start making the following text big 1097 00:46:41,406 ---> 00:46:42,556 and bold usually. 1098 00:46:42,646 ---> 00:46:46,526 So if I reload the page now, in fact it is bigger and bolder. 1099 00:46:46,756 ---> 00:46:48,986 If I want to put a second line of text, 1100 00:46:48,986 ---> 00:46:52,196 let me go like this, H5. 1101 00:46:52,226 ---> 00:46:54,456 H5 counter intuitively is smaller, so I'm going 1102 00:46:54,456 ---> 00:46:57,756 to say now, Goodbye World! 1103 00:46:57,986 ---> 00:47:00,006 Close H5. Save that. 1104 00:47:00,736 ---> 00:47:01,546 Reload here. 1105 00:47:01,846 ---> 00:47:03,326 And sure enough, it's smaller. 1106 00:47:03,586 ---> 00:47:06,146 So I really haven't done anything terribly sexy, 1107 00:47:06,146 ---> 00:47:08,806 but using now just this idea of a tag open and closed 1108 00:47:09,086 ---> 00:47:10,646 and an attribute, can we start 1109 00:47:10,646 ---> 00:47:13,296 to now control the construct of a web page. 1110 00:47:13,346 ---> 00:47:17,626 So now why don't we go ahead and take a five minute break. 1111 00:47:17,836 ---> 00:47:21,136 So before we continue our look at web programming, 1112 00:47:21,246 ---> 00:47:22,866 this video is actually apropo [assumed spelling] 1113 00:47:22,866 ---> 00:47:24,456 to the problem set that you just finished 1114 00:47:24,456 ---> 00:47:26,286 or are still finishing up. 1115 00:47:26,386 ---> 00:47:28,536 This is a video by some researchers 1116 00:47:28,536 ---> 00:47:31,626 who presented novel techniques for resizing images. 1117 00:47:31,656 ---> 00:47:34,796 But resizing images intelligently whereby you don't 1118 00:47:34,796 ---> 00:47:38,116 just take an image that's too big and then crop it by cutting 1119 00:47:38,116 ---> 00:47:40,516 out uninteresting parts of the photo over here 1120 00:47:40,776 ---> 00:47:43,576 and you don't just scale it down thereby shrinking everything. 1121 00:47:43,786 ---> 00:47:46,856 You try to remove some useless information like extra sky 1122 00:47:46,856 ---> 00:47:48,636 or extra grass, that in terms 1123 00:47:48,636 ---> 00:47:51,516 of information doesn't necessarily convey more meaning, 1124 00:47:51,756 ---> 00:47:54,026 but doing this with a computer and doing this dynamically 1125 00:47:54,026 ---> 00:47:56,596 with an arbitrary photograph, is non trivial. 1126 00:47:56,696 ---> 00:47:59,516 You can certainly do it with Photo Shop and you can do it 1127 00:47:59,516 ---> 00:48:01,626 by hand, touching things up, air-brushing things, 1128 00:48:01,916 ---> 00:48:03,416 but there are algorithms that they presented 1129 00:48:03,416 ---> 00:48:06,746 in a very well known research conference is 1130 00:48:06,746 ---> 00:48:10,436 about doing this dynamically and actually reducing images 1131 00:48:10,436 ---> 00:48:13,606 by throwing away content that again, does not contribute much. 1132 00:48:13,606 ---> 00:48:15,956 So it's just about 4 minutes and it gets increasingly neat, 1133 00:48:15,956 ---> 00:48:17,826 I think, some of the demonstrations that they show. 1134 00:48:17,826 ---> 00:48:19,716 So one of your classmates passed this along to us. 1135 00:48:19,716 ---> 00:48:20,186 [ video ] 1136 00:48:20,186 ---> 00:48:22,376 >> Unknown: [Inaudible] for content aware image resizing. 1137 00:48:24,326 ---> 00:48:26,136 Digital media today has the ability 1138 00:48:26,136 ---> 00:48:27,936 to support dynamic page layouts. 1139 00:48:28,446 ---> 00:48:30,326 By changing the window or display size, 1140 00:48:30,576 ---> 00:48:32,286 we can change the layout of a document. 1141 00:48:32,686 ---> 00:48:34,706 However, images embedded in a document, 1142 00:48:34,886 ---> 00:48:36,846 typically remain rigid in size and shape. 1143 00:48:37,266 ---> 00:48:40,376 Resizing important to fit images into different displays. 1144 00:48:41,526 ---> 00:48:44,136 Current techniques including cropping or scaling are limited 1145 00:48:44,136 ---> 00:48:46,456 in their abilities to capture the image content. 1146 00:48:47,096 ---> 00:48:51,326 We present a method for content aware resizing of images. 1147 00:48:51,766 ---> 00:48:54,986 Our technique enables resizing while adapting the image content 1148 00:48:54,986 ---> 00:48:55,496 and layout. 1149 00:48:55,956 ---> 00:48:57,506 This is sometimes called, retardity. 1150 00:49:02,476 ---> 00:49:06,386 We also define the flexible multi size representation 1151 00:49:06,386 ---> 00:49:08,996 for images that supports continuous resizing. 1152 00:49:11,726 ---> 00:49:14,646 An image can be shrunk in a non uniform manner while preserving 1153 00:49:14,646 ---> 00:49:17,166 it's features, but it can also be extended beyond it's 1154 00:49:17,166 ---> 00:49:20,696 original size. 1155 00:49:21,276 ---> 00:49:23,526 Instead of scrolling through images that do not fit 1156 00:49:23,526 ---> 00:49:26,016 in a given display, we gracefully resize them 1157 00:49:26,176 ---> 00:49:30,836 to fit inside the window. 1158 00:49:31,406 ---> 00:49:34,226 For example, assume that we need to change the width of an image. 1159 00:49:34,656 ---> 00:49:36,766 The simplest way to do this is to remove columns 1160 00:49:36,766 ---> 00:49:37,956 of pixels from the image. 1161 00:49:38,636 ---> 00:49:41,036 The best column to remove would be the least noticeable 1162 00:49:41,036 ---> 00:49:42,246 or least important column. 1163 00:49:43,596 ---> 00:49:46,076 We can search for this column by defining and importance 1164 00:49:46,076 ---> 00:49:47,416 or energy function on the image. 1165 00:49:47,716 ---> 00:49:50,336 In this example we used the gradient magnitude of the image. 1166 00:49:51,576 ---> 00:49:52,776 Next we look for the column 1167 00:49:52,776 ---> 00:49:55,256 which contains the least energy and remove it. 1168 00:49:55,256 ---> 00:49:57,416 However, using such an approach quickly leads 1169 00:49:57,416 ---> 00:49:58,466 to serious artifacts. 1170 00:49:59,196 ---> 00:50:01,086 Therefore instead of using rigid column, 1171 00:50:01,166 ---> 00:50:04,666 we search for connected paths of pixels or seams, from one side 1172 00:50:04,666 ---> 00:50:07,396 of the image to the other that contain the least energy. 1173 00:50:08,556 ---> 00:50:11,446 This can be done using a simply dynamic programming algorithm 1174 00:50:11,486 ---> 00:50:13,286 as described in the paper in both vertical 1175 00:50:13,286 ---> 00:50:14,446 and horizontal directions. 1176 00:50:15,986 ---> 00:50:18,766 Here is another example of an image, it's energy function 1177 00:50:18,766 ---> 00:50:22,546 and the least noticeable horizontal and vertical seams. 1178 00:50:23,596 ---> 00:50:27,016 By successively removing horizontal and vertical seams, 1179 00:50:27,116 ---> 00:50:29,536 the image can be resized in a non uniform manner. 1180 00:50:30,846 ---> 00:50:33,626 The order of seam removal in an image defines an order 1181 00:50:33,626 ---> 00:50:34,786 on the pixels of the image, 1182 00:50:35,126 ---> 00:50:38,236 by storing the simple indexing information we create content 1183 00:50:38,236 ---> 00:50:39,666 to where multi size images. 1184 00:50:40,266 ---> 00:50:46,776 In this image we color all pixels in order 1185 00:50:46,776 ---> 00:50:49,786 of their seam removal from blue to red. 1186 00:50:52,016 ---> 00:50:54,836 To enlarge an image we first calculate seams 1187 00:50:54,916 ---> 00:50:56,376 as if we were to shrink the image. 1188 00:50:56,726 ---> 00:50:58,016 Instead of removing these seams, 1189 00:50:58,016 ---> 00:50:59,916 we insert new seams in these locations. 1190 00:51:00,436 ---> 00:51:02,256 The pixels of the new seams are the average 1191 00:51:02,256 ---> 00:51:11,436 of the pixels alongside of the new seam positions. 1192 00:51:11,596 ---> 00:51:14,126 This enables a smooth transition between reducing 1193 00:51:14,126 ---> 00:51:16,666 and enlarging the image size in multi size images. 1194 00:51:17,716 ---> 00:51:25,576 We have tested different possible energy functions 1195 00:51:25,576 ---> 00:51:27,526 for retargetting such as entropy [assumed spelling], 1196 00:51:27,666 ---> 00:51:30,056 saliency [assumed spelling], histogram of grading direction 1197 00:51:30,136 ---> 00:51:31,336 and eye movement measurements. 1198 00:51:31,766 ---> 00:51:33,446 The results depend on the given image, 1199 00:51:33,576 ---> 00:51:35,466 but simple gradient magnitude often gives 1200 00:51:35,556 ---> 00:51:38,756 satisfactory results. 1201 00:51:39,596 ---> 00:51:42,756 For certain contents such as faces, where the relations 1202 00:51:42,756 ---> 00:51:44,276 between features are important [inaudible]. 1203 00:51:44,276 ---> 00:51:44,546 [ laughter ] 1204 00:51:44,546 ---> 00:51:47,616 A simple user interface enabling the designer 1205 00:51:47,616 ---> 00:51:49,116 to protect these image areas. 1206 00:51:49,736 ---> 00:51:52,276 The application is also used as an authoring tool 1207 00:51:52,386 ---> 00:51:54,226 for creating multi sized images. 1208 00:51:55,636 ---> 00:51:57,666 Note that in this specific example, 1209 00:51:57,666 ---> 00:51:59,466 automatic face detection can be used 1210 00:51:59,466 ---> 00:52:01,486 to identify the areas that need protection. 1211 00:52:02,916 ---> 00:52:04,946 To illustrate another application for this tool, 1212 00:52:04,946 ---> 00:52:07,266 we show a simple object removal procedure, 1213 00:52:07,726 ---> 00:52:09,746 by adding negative weights to the energy 1214 00:52:09,746 ---> 00:52:12,186 of an image the user can attract the seams to pass 1215 00:52:12,286 ---> 00:52:13,966 through specific areas first. 1216 00:52:14,886 ---> 00:52:16,266 By reducing the size of the image. 1217 00:52:16,266 ---> 00:52:16,396 [ laughter ] 1218 00:52:16,396 ---> 00:52:19,136 These areas are removed first, in effect, erasing them. 1219 00:52:19,306 ---> 00:52:21,766 To retain it's original size, the image is enlarged 1220 00:52:21,766 ---> 00:52:23,006 by using seam insertion. 1221 00:52:23,436 ---> 00:52:25,456 Note that this technique changes the whole image 1222 00:52:25,456 ---> 00:52:32,416 and does not simple erase the objects marked. 1223 00:52:32,416 ---> 00:52:32,483 [ laughter ] 1224 00:52:32,483 ---> 00:52:34,236 More examples can be found in the paper 1225 00:52:34,236 ---> 00:52:35,526 and the supplemental materials. 1226 00:52:35,526 ---> 00:52:36,856 [ laughter ] 1227 00:52:36,856 ---> 00:52:42,336 Thank you for your attention. 1228 00:52:42,836 ---> 00:52:49,036 [ applause ] 1229 00:52:49,536 ---> 00:52:51,086 >> Unknown: So it really is cool what's on the horizon. 1230 00:52:51,086 ---> 00:52:53,326 A friend of mine is a photography expert 1231 00:52:53,326 ---> 00:52:56,576 and he was recently called in by some lawyers to testify 1232 00:52:56,576 ---> 00:52:58,686 in a case which involved answering the question, 1233 00:52:58,686 ---> 00:53:01,266 was this video tape doctored or not. 1234 00:53:01,306 ---> 00:53:02,486 I'd argue that it's probably going 1235 00:53:02,486 ---> 00:53:04,346 to become increasingly difficult over the years 1236 00:53:04,346 ---> 00:53:06,256 to actually distinguish photographs and videos 1237 00:53:06,256 ---> 00:53:08,816 that were actually take of reality and ones that were 1238 00:53:08,816 ---> 00:53:12,256 in fact air brushed or something much more sophisticated. 1239 00:53:12,256 ---> 00:53:14,826 So some neat technologies are on the horizon. 1240 00:53:15,306 ---> 00:53:16,946 So with that said, we're going to deal 1241 00:53:16,946 ---> 00:53:21,426 with images more akin to this thing today. 1242 00:53:22,036 ---> 00:53:24,076 Perhaps a little, oops a little simpler. 1243 00:53:24,436 ---> 00:53:26,646 We have Hamster, so these are. 1244 00:53:26,646 ---> 00:53:28,556 [ music ] 1245 00:53:28,556 ---> 00:53:31,526 Those are images called jifs, jifs you might recall 1246 00:53:31,526 ---> 00:53:33,786 from problem set 5 are one of the things we asked you about 1247 00:53:34,026 ---> 00:53:35,706 and these are, if you're wondering what it means 1248 00:53:35,706 ---> 00:53:37,736 to be animated, animate jiff's 1249 00:53:37,736 ---> 00:53:40,746 and essentially an animated jiff is kind of like a mini movie 1250 00:53:40,746 ---> 00:53:43,506 where it's just multiple images all tacked inside 1251 00:53:43,506 ---> 00:53:45,726 of the same file and they just play according 1252 00:53:45,726 ---> 00:53:47,646 to some schedule in looping fashion. 1253 00:53:47,646 ---> 00:53:51,646 And here too there's an audio file called a wav file, W A V, 1254 00:53:51,956 ---> 00:53:53,876 that is simply a song that's played on loop 1255 00:53:53,876 ---> 00:53:55,326 on this particular website. 1256 00:53:55,426 ---> 00:53:58,886 So how do you actually include these kinds of images though? 1257 00:53:58,886 ---> 00:53:59,856 Well it's just HTML. 1258 00:53:59,856 ---> 00:54:01,656 Again, just spoil what's underneath the hood here, 1259 00:54:01,866 ---> 00:54:05,136 if I do look at the raw source, turns out that in addition 1260 00:54:05,216 ---> 00:54:07,786 to the body tag, the head tag, the title tag, 1261 00:54:08,056 ---> 00:54:09,776 there's also an image tag. 1262 00:54:09,776 ---> 00:54:12,976 Img. Now what you'll see is even though people will say image 1263 00:54:13,126 ---> 00:54:15,036 or longer words, generally a lot 1264 00:54:15,036 ---> 00:54:17,316 of these tags are abbreviated just for efficiency sake. 1265 00:54:17,556 ---> 00:54:19,886 So let's go ahead use such an image. 1266 00:54:19,886 ---> 00:54:22,826 Let's not choose necessarily a hamster, but let's go ahead 1267 00:54:22,826 ---> 00:54:26,876 to let's say, Google.com and let's go to Google images 1268 00:54:27,256 ---> 00:54:29,356 and let's choose, well let's do hamster. 1269 00:54:30,086 ---> 00:54:30,786 Bigger hamster. 1270 00:54:30,786 ---> 00:54:31,596 Let's use this guy. 1271 00:54:31,596 ---> 00:54:32,326 He's pretty cute. 1272 00:54:33,266 ---> 00:54:35,586 Let's go ahead and right click or control click. 1273 00:54:35,616 ---> 00:54:36,696 There's different ways to do this. 1274 00:54:36,696 ---> 00:54:39,526 Using SFPT of course, you could download images that for 1275 00:54:39,526 ---> 00:54:42,216 which you have the appropriate copyright and such to download. 1276 00:54:42,216 ---> 00:54:44,626 We're just going to borrow the hamster for just a moment here. 1277 00:54:45,146 ---> 00:54:47,356 If I go into my web page now, recall that I have, 1278 00:54:47,356 ---> 00:54:48,886 hello world and goodbye world. 1279 00:54:49,126 ---> 00:54:51,606 Let me go ahead down below this and really, 1280 00:54:51,606 ---> 00:54:53,566 for no compelling reason, add a hamster. 1281 00:54:53,666 ---> 00:54:54,016 Image. 1282 00:54:54,016 ---> 00:54:55,216 [ laughter ] 1283 00:54:55,216 ---> 00:54:58,776 Source. So SRC is the special attribute that I know just 1284 00:54:58,776 ---> 00:55:00,266 from having read the documentation, 1285 00:55:00,466 ---> 00:55:03,146 that it modifies the behavior of the image tag, 1286 00:55:03,206 ---> 00:55:05,536 specifically telling it what image to display. 1287 00:55:05,796 ---> 00:55:08,236 All attributes, values have to be quoted, 1288 00:55:08,236 ---> 00:55:10,536 either with double quotes or with single quotes. 1289 00:55:10,536 ---> 00:55:12,256 Just be consistent throughout your files. 1290 00:55:12,256 ---> 00:55:14,786 I'm going to go ahead now and paste that URL. 1291 00:55:15,106 ---> 00:55:18,386 It kind of wraps around, but it in fact is, 1292 00:55:18,496 ---> 00:55:19,826 that's one hell of an URL. 1293 00:55:20,066 ---> 00:55:21,606 HowToTakeCareOfAHamster.com. 1294 00:55:21,786 ---> 00:55:22,646 Guess it was available. 1295 00:55:23,026 ---> 00:55:26,646 So let's go ahead and save this, hello.html, 1296 00:55:27,026 ---> 00:55:29,626 let's reload this and there he is. 1297 00:55:29,846 ---> 00:55:32,156 So now inside of our web page Now I'd argue, 1298 00:55:32,156 ---> 00:55:34,256 this page is pretty ugly and it's ugly 1299 00:55:34,256 ---> 00:55:35,666 because it's not centered. 1300 00:55:35,976 ---> 00:55:38,566 Right? So I want to go ahead and center all of the text here. 1301 00:55:38,566 ---> 00:55:38,846 [ laughter ] 1302 00:55:38,846 ---> 00:55:41,956 So how do you go about centering? 1303 00:55:41,956 ---> 00:55:43,516 Well one of the things you should be mindful 1304 00:55:43,516 ---> 00:55:45,766 of when teaching yourself more about HTML, 1305 00:55:45,766 ---> 00:55:47,126 we'll really just scratch the surface 1306 00:55:47,126 ---> 00:55:48,426 in lectures and even in sections. 1307 00:55:48,426 ---> 00:55:52,516 It gets very boring quickly to numerate dozens of tags 1308 00:55:52,516 ---> 00:55:55,566 and attributes that exist, stuff is much easier picked up just 1309 00:55:55,566 ---> 00:55:57,196 from a little reference that's online. 1310 00:55:57,196 ---> 00:56:00,006 We've linked to several on CS50.net/resources. 1311 00:56:00,006 ---> 00:56:02,226 It turns out there's a number of ways 1312 00:56:02,226 ---> 00:56:03,666 to accomplish different tasks. 1313 00:56:03,666 ---> 00:56:06,406 We're going to promote, at least in sections and lectures, 1314 00:56:06,406 ---> 00:56:07,686 some of the simplest approaches, 1315 00:56:07,716 ---> 00:56:08,926 some of the most common approaches. 1316 00:56:09,186 ---> 00:56:12,196 But realize, because HTML has been around now for years 1317 00:56:12,196 ---> 00:56:14,156 in version 1, version 2, version 5, 1318 00:56:14,636 ---> 00:56:16,676 you'll see people taking different approaches. 1319 00:56:16,676 ---> 00:56:18,216 Don't get confused by it. 1320 00:56:18,216 ---> 00:56:20,536 Thankfully there's a tool that I'll show you in a moment, 1321 00:56:20,726 ---> 00:56:22,966 which you can validate your HTML, 1322 00:56:23,006 ---> 00:56:25,936 that will tell you does your code as written adhere 1323 00:56:25,936 ---> 00:56:28,556 to current standards and it will point out syntax errors, 1324 00:56:28,826 ---> 00:56:30,126 similar in spirit to what GCC 1325 00:56:30,126 ---> 00:56:32,126 or even Valgrant [assumed spelling] might do for you. 1326 00:56:32,126 ---> 00:56:33,896 So it's a nice debugging tool of sorts. 1327 00:56:33,896 ---> 00:56:36,116 I'm going to go ahead now and specify this. 1328 00:56:36,816 ---> 00:56:39,496 Centering these days, back in the day, on WebHamster, 1329 00:56:39,766 ---> 00:56:40,456 you would just say this. 1330 00:56:40,586 ---> 00:56:43,166 So this for various reasons has kind of fallen out of favor 1331 00:56:43,166 ---> 00:56:48,186 in the web community and so you have to be a little more verbose 1332 00:56:48,596 ---> 00:56:52,456 and what you can do now is center this content 1333 00:56:52,996 ---> 00:56:54,426 by putting it in a div tag. 1334 00:56:54,426 ---> 00:56:56,106 So two of the most common tags 1335 00:56:56,106 ---> 00:56:58,596 in web development today are something called a div tag 1336 00:56:58,846 ---> 00:57:00,266 and something called a span tag. 1337 00:57:00,316 ---> 00:57:02,856 These are just structural tags. 1338 00:57:02,856 ---> 00:57:05,376 Whereas H1 and H5 say, make this big and bold, 1339 00:57:05,616 ---> 00:57:08,526 div and span just say, here comes some content. 1340 00:57:08,766 ---> 00:57:11,426 Content that I want to style in some way. 1341 00:57:11,426 ---> 00:57:14,846 So it allows you to group together related material, 1342 00:57:15,096 ---> 00:57:18,396 not unlike in C, the idea of a struct, it's not quite the same. 1343 00:57:18,396 ---> 00:57:19,696 But just a struct allows you 1344 00:57:19,696 ---> 00:57:22,636 to encapsulate some similar information, the idea of a div 1345 00:57:22,636 ---> 00:57:25,156 at least is to encapsulate some similar information. 1346 00:57:25,156 ---> 00:57:28,516 So here the information I want is the following lines 1347 00:57:28,516 ---> 00:57:29,436 of text and image. 1348 00:57:29,726 ---> 00:57:32,896 So I can actually do something like this, div and now I'm going 1349 00:57:32,896 ---> 00:57:35,166 to just indent this just to be proper and then 1350 00:57:35,166 ---> 00:57:37,846 down here I'm going to go and close the div tag. 1351 00:57:38,016 ---> 00:57:38,996 Now this is useless. 1352 00:57:38,996 ---> 00:57:41,676 Notice that if I save the file, reload, 1353 00:57:41,926 ---> 00:57:44,896 nothing has actually changed, but div stands for division. 1354 00:57:45,126 ---> 00:57:46,576 So I'm going to temporarily do this. 1355 00:57:46,756 ---> 00:57:49,286 It turns out that most tags support 1356 00:57:49,286 ---> 00:57:51,856 and attribute called style, that as the name implies, 1357 00:57:51,856 ---> 00:57:53,706 allows you to style them, aesthetically. 1358 00:57:53,966 ---> 00:57:56,296 There's all sorts of stylization that you can add 1359 00:57:56,296 ---> 00:58:00,266 to a tag including color and fonts size and margins 1360 00:58:00,266 ---> 00:58:02,806 and background colors and borders. 1361 00:58:02,806 ---> 00:58:04,656 A lot of purely aesthetic details. 1362 00:58:05,036 ---> 00:58:08,166 One of them though is called background color. 1363 00:58:08,496 ---> 00:58:11,846 So even though a moment ago I used BG color, this is kind 1364 00:58:11,846 ---> 00:58:14,896 of the old school way of using this attribute called BG color. 1365 00:58:14,896 ---> 00:58:17,226 Most people these days style almost all 1366 00:58:17,226 ---> 00:58:19,086 of their content using this style attribute, 1367 00:58:19,126 ---> 00:58:20,556 so that's a habit I'll now get into. 1368 00:58:20,976 ---> 00:58:24,216 Background-color, allows me to change just the color 1369 00:58:24,216 ---> 00:58:25,886 of this division of the page. 1370 00:58:26,136 ---> 00:58:28,546 So let's just go for hideous and say, yellow. 1371 00:58:28,956 ---> 00:58:30,746 So this div, which think 1372 00:58:30,746 ---> 00:58:32,576 of as literally a division of the page. 1373 00:58:32,576 ---> 00:58:33,816 They're always rectangle. 1374 00:58:33,816 ---> 00:58:36,046 So the following rectangle that's fitting all 1375 00:58:36,046 ---> 00:58:38,546 of the following content, the H1, the H5, and image, 1376 00:58:38,846 ---> 00:58:40,396 should have a background color of yellow. 1377 00:58:40,526 ---> 00:58:41,166 Let's save that. 1378 00:58:41,506 ---> 00:58:43,806 Reload and sure enough, there it is. 1379 00:58:44,056 ---> 00:58:45,436 Right? So this is not too far off 1380 00:58:45,436 ---> 00:58:47,786 from what I made in 1995 frankly. 1381 00:58:47,786 ---> 00:58:49,626 So notice there's some curiosities here. 1382 00:58:49,626 ---> 00:58:51,606 In the top there's some margins 1383 00:58:51,606 ---> 00:58:54,206 and these are frankly some stupid headaches when it comes 1384 00:58:54,206 ---> 00:58:55,166 to browser development. 1385 00:58:55,406 ---> 00:58:59,026 If we open this web page not only in Firefox, but Safari, 1386 00:58:59,056 ---> 00:59:02,496 Internet Explorer and Chrome, odds are you would see stupid, 1387 00:59:02,496 ---> 00:59:05,066 minute, little differences that nonetheless might tug 1388 00:59:05,066 ---> 00:59:08,956 at the nit-picky side of you, whereby on Firefox, 1389 00:59:09,296 ---> 00:59:11,556 feels like we have like a centimeter or so 1390 00:59:11,556 ---> 00:59:13,736 of red pixels, a margin around this. 1391 00:59:14,046 ---> 00:59:16,396 Well Internet Explorer, Microsoft might have decided, 1392 00:59:16,396 ---> 00:59:18,626 not going to be a centimeter, going to be a half a centimeter. 1393 00:59:18,856 ---> 00:59:21,176 So one of the headaches frankly early on in web development, 1394 00:59:21,316 ---> 00:59:24,366 is just understanding some of the stupid differences frankly, 1395 00:59:24,366 ---> 00:59:26,696 that the various browser manufacturers have made 1396 00:59:26,696 ---> 00:59:28,466 when it comes to implementing these tags. 1397 00:59:28,746 ---> 00:59:30,406 But for the most part, it's minor details. 1398 00:59:30,406 ---> 00:59:31,676 Though we'll see in JavaScript 1399 00:59:31,676 ---> 00:59:33,076 that sometimes it matters just a bit more. 1400 00:59:33,406 ---> 00:59:35,976 Thankfully there exists libraries that we've discussed 1401 00:59:35,976 ---> 00:59:38,776 in the context of C, that get rid of almost all 1402 00:59:38,776 ---> 00:59:40,826 of these cross platform headaches. 1403 00:59:41,146 ---> 00:59:43,206 So for now the point is just that I've made a division 1404 00:59:43,206 ---> 00:59:45,116 of the page, but I haven't aligned it. 1405 00:59:45,116 ---> 00:59:47,546 It turns out I want to say, text align. 1406 00:59:47,966 ---> 00:59:50,126 So if you want to have multiple properties, 1407 00:59:50,376 ---> 00:59:53,726 what I have just done here with background color:yellow, 1408 00:59:53,926 ---> 00:59:57,526 this is a CSS, Cascading Style Sheet property 1409 00:59:57,826 ---> 01:00:01,526 and that simply says, make the div background color yellow. 1410 01:00:01,706 ---> 01:00:04,326 If I want another such property, I can simply say ; 1411 01:00:04,436 ---> 01:00:08,416 and then I can say something like text-aligncenter 1412 01:00:08,886 ---> 01:00:12,156 and this will align now all of the text inside 1413 01:00:12,156 ---> 01:00:13,886 of that div as centered. 1414 01:00:13,886 ---> 01:00:14,636 So let's save this. 1415 01:00:15,326 ---> 01:00:18,056 Reload and sure enough, now things are centered. 1416 01:00:18,056 ---> 01:00:20,356 And again, there's different ways to do this, but the point 1417 01:00:20,356 ---> 01:00:23,566 for today is really to take away these ideas of tags 1418 01:00:23,566 ---> 01:00:25,076 and we've been looking at some tags already, 1419 01:00:25,406 ---> 01:00:28,166 attributes even though some of them have started to fall 1420 01:00:28,166 ---> 01:00:31,236 out of favor, in favor of the style tag and then 1421 01:00:31,236 ---> 01:00:32,856 as for these properties, well there's 1422 01:00:32,856 ---> 01:00:35,586 so many different properties out there and it's actually nice 1423 01:00:35,756 ---> 01:00:37,926 because almost always you can accomplish some goal 1424 01:00:38,066 ---> 01:00:40,276 with a property who's name kind of says what it does, 1425 01:00:40,466 ---> 01:00:43,546 but to pick up for these kinds of things, again be mindful 1426 01:00:43,546 ---> 01:00:44,576 of resources like this. 1427 01:00:44,626 ---> 01:00:48,086 If I go to the course's home page/resource and notice 1428 01:00:48,126 ---> 01:00:50,666 that we have under here like a tutorial on CSS. 1429 01:00:51,186 ---> 01:00:55,016 Again, CSS only refers to at the moment, these things inside 1430 01:00:55,016 ---> 01:00:57,606 of quotes, inside of the style tags value. 1431 01:00:57,906 ---> 01:01:01,456 And then we can go down here to HTML, where we have a bunch 1432 01:01:01,456 ---> 01:01:03,936 of tutorials on HTML and tags thereof. 1433 01:01:03,936 ---> 01:01:06,236 Just to give you a sense of this, let me go to HTML 1434 01:01:06,776 ---> 01:01:10,836 and let me pull up let's see, 1435 01:01:10,946 ---> 01:01:12,586 let's just give you a whirlwind tour. 1436 01:01:13,166 ---> 01:01:14,526 So it turns out you can make tables. 1437 01:01:14,526 ---> 01:01:17,016 Here is a silly little table for apples, bananas, oranges 1438 01:01:17,016 ---> 01:01:19,296 and other, but you can have some tabular structures 1439 01:01:19,296 ---> 01:01:20,616 in HTML with the right tags. 1440 01:01:20,616 ---> 01:01:21,986 You can have these familiar lists, 1441 01:01:22,276 ---> 01:01:23,756 you can have an automatically numbered list, 1442 01:01:23,756 ---> 01:01:25,726 you can have a bulleted list here on the right hand side 1443 01:01:25,966 ---> 01:01:27,286 and all of these are fairly easy. 1444 01:01:27,286 ---> 01:01:29,596 So just for the sake of some arbitrary examples, 1445 01:01:29,596 ---> 01:01:31,276 let's do a couple of more of these tags. 1446 01:01:31,556 ---> 01:01:32,406 My page again. 1447 01:01:32,666 ---> 01:01:35,716 I'm not shooting for pretty today, but let's suppose 1448 01:01:35,716 ---> 01:01:37,646 that I actually want, goodbye world, 1449 01:01:37,836 ---> 01:01:39,316 to take me away from this web page. 1450 01:01:39,316 ---> 01:01:40,906 I want it to be a so-called hyper-link. 1451 01:01:41,156 ---> 01:01:43,156 Well turns out making a hyper-link is actually 1452 01:01:43,156 ---> 01:01:43,796 pretty easy. 1453 01:01:44,136 ---> 01:01:45,866 So I can simply do something like this. 1454 01:01:45,866 ---> 01:01:48,946 I'm going to get rid of the H5, though I could leave it, 1455 01:01:48,986 ---> 01:01:50,266 but I just want to keep this simple. 1456 01:01:50,266 ---> 01:01:52,956 I'm going to get rid of H5 and instead I'm going 1457 01:01:52,956 ---> 01:01:55,476 to say you know what, the following should be an anchor. 1458 01:01:55,836 ---> 01:01:59,256 A for anchor, hyper reference, where do I want to go? 1459 01:01:59,596 ---> 01:02:01,976 Well anytime you leave a site it seems to go to like, 1460 01:02:01,976 ---> 01:02:03,026 let's go to Disney.com. 1461 01:02:03,026 ---> 01:02:06,916 All right, so now let's scroll over here, close bracket, 1462 01:02:07,516 ---> 01:02:08,416 that's not actually true. 1463 01:02:08,746 ---> 01:02:12,296 So when now when I click this text, goodbye world, 1464 01:02:12,496 ---> 01:02:15,986 this should take me to the value of the HRF attribute, 1465 01:02:16,196 ---> 01:02:17,916 which is this thing here. 1466 01:02:18,106 ---> 01:02:20,146 So I seem to have implemented the very familiar idea 1467 01:02:20,146 ---> 01:02:20,896 of a hyper-link. 1468 01:02:20,896 ---> 01:02:22,276 So let me go back to my web page. 1469 01:02:22,346 ---> 01:02:25,936 Reload. And hum, that was not what's intended. 1470 01:02:26,476 ---> 01:02:29,176 So notice, the goodbye world, it moved, 1471 01:02:29,406 ---> 01:02:31,086 but it seems to now be over here. 1472 01:02:31,506 ---> 01:02:32,296 So why is this? 1473 01:02:32,396 ---> 01:02:34,656 It looks like structurally I haven't changed the web page, 1474 01:02:34,966 ---> 01:02:37,526 but a web browser is kind of stupid. 1475 01:02:37,526 ---> 01:02:39,856 It only does what you tell it to do 1476 01:02:39,856 ---> 01:02:41,316 with these things called tags. 1477 01:02:41,626 ---> 01:02:46,136 And so in fact, even though it's implied by the H1 tag, 1478 01:02:46,136 ---> 01:02:48,186 which is a heading tag, this is a heading. 1479 01:02:48,186 ---> 01:02:50,826 So therefore give it it's own row, give it it's own line. 1480 01:02:51,116 ---> 01:02:54,406 With most tags, they don't get their own line and this is good 1481 01:02:54,406 ---> 01:02:56,856 because otherwise anytime you tried to co mingle tags 1482 01:02:56,856 ---> 01:02:58,736 in a web page, everything would be on it's own line. 1483 01:02:58,736 ---> 01:02:59,856 So that's not good behavior. 1484 01:03:00,136 ---> 01:03:02,366 So if you really want there to be a line break, 1485 01:03:02,766 ---> 01:03:05,896 in between that tag and that image, 1486 01:03:05,946 ---> 01:03:08,816 I have to tell the browser, put line break here. 1487 01:03:08,906 ---> 01:03:11,546 Open bracket, BR for break, closed bracket. 1488 01:03:11,786 ---> 01:03:13,296 Says put a line break here 1489 01:03:13,536 ---> 01:03:16,036 and now the browser will interpret this code literally. 1490 01:03:16,276 ---> 01:03:20,186 If I reload, now sure enough, I have the link that's just 1491 01:03:20,186 ---> 01:03:23,736 above the hamster and if I click this I'll be whisked away 1492 01:03:23,736 ---> 01:03:27,796 to Disney.com, which currently looks like this apparently. 1493 01:03:29,136 ---> 01:03:30,276 Anything interesting? 1494 01:03:30,946 ---> 01:03:33,276 OK. No, all right, so. 1495 01:03:33,706 ---> 01:03:35,086 So what are the take aways here? 1496 01:03:35,086 ---> 01:03:37,606 So now we have another tag, this idea of this anchor, 1497 01:03:37,606 ---> 01:03:39,456 which gives you the familiar hyper link. 1498 01:03:39,456 ---> 01:03:41,556 Well what are some of the other familiar tags? 1499 01:03:41,556 ---> 01:03:43,866 Any other feature of HTML you'd like to see? 1500 01:03:44,736 ---> 01:03:46,286 These are kind of the biggies right, this is kind 1501 01:03:46,286 ---> 01:03:48,326 of amazing frankly, what the world has constructed 1502 01:03:48,376 ---> 01:03:49,446 with some fairly simple ones. 1503 01:03:49,446 ---> 01:03:51,686 What was that? 1504 01:03:51,896 ---> 01:03:53,606 Fonts. OK, good one actually. 1505 01:03:53,606 ---> 01:03:54,386 Right now I seem 1506 01:03:54,386 ---> 01:03:56,836 to be preferring Times New Roman everywhere, 1507 01:03:56,996 ---> 01:04:00,076 but surely we have he ability to express other fonts and actually 1508 01:04:00,076 ---> 01:04:02,856 that reduces to CSS and let me just pull up the reference 1509 01:04:02,856 ---> 01:04:06,566 for CSS that we recommend on the site, though there are plenty 1510 01:04:06,566 ---> 01:04:09,086 and plenty of resources online. 1511 01:04:09,336 ---> 01:04:12,296 Let me go ahead to CSS, CSS tutorial 1512 01:04:12,606 ---> 01:04:14,386 and let me choose styling fonts. 1513 01:04:15,086 ---> 01:04:18,836 What you'll see is you have the ability per this tutorial, 1514 01:04:18,836 ---> 01:04:21,376 which actually do rather than just talk about, 1515 01:04:21,586 ---> 01:04:25,276 you have the ability to specify the font face, the font family 1516 01:04:25,276 ---> 01:04:27,676 that you want to display text in, the font size, 1517 01:04:27,726 ---> 01:04:30,316 the font color and a bunch of other details as well. 1518 01:04:30,316 ---> 01:04:31,146 But there is a gotcha. 1519 01:04:31,486 ---> 01:04:35,286 Just because you might have a font called Myriad Pro 1520 01:04:35,286 ---> 01:04:38,546 on your computer, that doesn't mean that your millions 1521 01:04:38,546 ---> 01:04:40,246 of users are similarly going to have the font. 1522 01:04:40,246 ---> 01:04:42,666 So you're actually somewhat limited these days 1523 01:04:42,666 ---> 01:04:45,296 to choosing frankly, ugly fonts like Times New Roman 1524 01:04:45,296 ---> 01:04:48,226 or you know, old common fonts like Times New Roman, 1525 01:04:48,456 ---> 01:04:52,306 but you at least have precision over, you can specify a list 1526 01:04:52,406 ---> 01:04:55,536 of fonts that the browser should try to use in order 1527 01:04:55,676 ---> 01:04:57,806 and use the first one that it actually finds. 1528 01:04:57,806 ---> 01:05:01,826 In fact, if we look at let's say Facebook.com, 1529 01:05:01,826 ---> 01:05:03,726 you'll see that this site actually looks a little 1530 01:05:03,726 ---> 01:05:06,206 different on Mac's and PC's, also depending 1531 01:05:06,206 ---> 01:05:07,706 on what fonts you have installed. 1532 01:05:07,706 ---> 01:05:09,156 Because if I can find this, 1533 01:05:09,746 ---> 01:05:13,596 let me see if I can make web development all the more real 1534 01:05:13,596 ---> 01:05:17,936 here by reloading this page, clicking CSS, let me try this. 1535 01:05:17,936 ---> 01:05:20,736 I'm going to try a little trick that we'll spend more time 1536 01:05:20,736 ---> 01:05:24,006 on to come, but it looks like Facebook uses, 1537 01:05:24,006 ---> 01:05:25,266 hopefully I can prove my point, yes. 1538 01:05:26,226 ---> 01:05:28,906 Thankfully, Mark has chosen the default font 1539 01:05:28,906 ---> 01:05:32,266 to be Lucinda Grand, followed by Tahoma if you don't have that, 1540 01:05:32,266 ---> 01:05:34,466 followed by Veranda, followed by Ariel, 1541 01:05:34,466 ---> 01:05:36,396 followed by the very generic Sans Serif 1542 01:05:36,646 ---> 01:05:38,866 and Sans Serif just means without Serif's, 1543 01:05:38,866 ---> 01:05:40,806 which means the little, cute little curves 1544 01:05:40,806 ---> 01:05:42,066 that a font might have. 1545 01:05:42,376 ---> 01:05:44,966 So this is Facebook's comma separated list of all 1546 01:05:44,966 ---> 01:05:47,276 of the fonts the browser should try to use in order 1547 01:05:47,276 ---> 01:05:49,646 to render their website and of course if you don't have some 1548 01:05:49,646 ---> 01:05:51,726 of those fonts, you might see a slightly different variant 1549 01:05:51,726 ---> 01:05:53,456 of this web page than someone else. 1550 01:05:53,496 ---> 01:05:54,576 But actually the fact that I pulled 1551 01:05:54,576 ---> 01:05:57,206 up Facebook here is actually a good teaser for one 1552 01:05:57,206 ---> 01:05:58,976 of the most useful features of websites. 1553 01:05:58,976 ---> 01:06:01,656 You don't just have hyper-links, you don't just have, 1554 01:06:02,116 ---> 01:06:04,816 you don't just have images and other mark up, 1555 01:06:04,816 ---> 01:06:07,586 you actually have the ability to take input from the user. 1556 01:06:07,586 ---> 01:06:10,486 For instance here we have what appear to be text boxes, 1557 01:06:10,486 ---> 01:06:12,436 up here we have what we call a check box, 1558 01:06:12,706 ---> 01:06:16,556 down here we have a select menu or a drop down menu. 1559 01:06:16,596 ---> 01:06:18,446 And so these are very familiar concepts. 1560 01:06:18,446 ---> 01:06:21,026 We use them every day of the week most likely, 1561 01:06:21,026 ---> 01:06:22,086 interacting with websites, 1562 01:06:22,346 ---> 01:06:24,156 but with these very basic building blocks, 1563 01:06:24,156 ---> 01:06:27,066 has the world built up some really neat capabilities. 1564 01:06:27,066 ---> 01:06:29,396 So first the font, then the capabilities. 1565 01:06:29,446 ---> 01:06:34,586 Suppose I really want to make let's say, goodbye, bigger. 1566 01:06:35,026 ---> 01:06:38,076 So it turns out, I can go into this anchor tag 1567 01:06:38,446 ---> 01:06:39,686 and I can add another attribute. 1568 01:06:39,926 ---> 01:06:42,196 If you want to have multiple attributes you just separate 1569 01:06:42,196 ---> 01:06:42,986 them by spaces. 1570 01:06:42,986 ---> 01:06:46,336 So attribute equals quote unquote value space attribute 1571 01:06:46,336 ---> 01:06:47,946 equals quote unquote value space. 1572 01:06:48,346 ---> 01:06:51,796 So if I want to style this tag, I say style equals quote unquote 1573 01:06:51,986 ---> 01:06:55,526 and then in the quotes I need to say something like fonts family 1574 01:06:55,866 ---> 01:06:59,006 and let's do Tahoma, whatever that looks like 1575 01:06:59,006 ---> 01:07:05,336 and then semi-colon font hyphen size colon let's say 96 points. 1576 01:07:05,426 ---> 01:07:09,416 All right save and again it's just wrapping with Nano here, 1577 01:07:09,416 ---> 01:07:10,926 but that is in fact all one line. 1578 01:07:10,926 ---> 01:07:13,246 All right, I guess my font's a little big. 1579 01:07:13,476 ---> 01:07:15,526 Let me go back to this hideous website, click reload 1580 01:07:15,526 ---> 01:07:17,326 and it's gotten even bigger. 1581 01:07:17,406 ---> 01:07:20,296 So again, you can do some real damage quickly with this, 1582 01:07:20,396 ---> 01:07:22,926 but it also suggests that you have really precise control 1583 01:07:23,016 ---> 01:07:25,976 over, it's actually not a bad web page now. 1584 01:07:26,076 ---> 01:07:26,516 So now. 1585 01:07:26,516 ---> 01:07:27,516 [ laughter ] 1586 01:07:27,516 ---> 01:07:30,636 Now you have, we'll save this one. 1587 01:07:30,636 ---> 01:07:33,826 All right, so now you have really precise control 1588 01:07:33,826 ---> 01:07:35,216 over the rendition of the page 1589 01:07:35,216 ---> 01:07:37,116 and so even though it feels a little messy, 1590 01:07:37,116 ---> 01:07:39,616 frankly it is a little messy what we're building up here, 1591 01:07:39,776 ---> 01:07:42,456 because we have HTML, we also have CSS 1592 01:07:42,456 ---> 01:07:44,906 and the CSS is just inside of the quote marks. 1593 01:07:45,196 ---> 01:07:48,226 These are two separate languages, HTML and CSS, 1594 01:07:48,256 ---> 01:07:50,396 that are getting co mingled. 1595 01:07:50,716 ---> 01:07:53,876 But realize that we can now actually get some input 1596 01:07:53,966 ---> 01:07:54,706 from the user. 1597 01:07:54,706 ---> 01:07:57,706 So literally, let me go to let's see, 1598 01:07:57,706 ---> 01:08:00,506 lectures, [inaudible] source. 1599 01:08:00,996 ---> 01:08:04,706 So literally the first thing that you might want 1600 01:08:04,706 ---> 01:08:06,756 to do is get input from the user. 1601 01:08:07,096 ---> 01:08:08,496 So here's how we might want 1602 01:08:08,496 ---> 01:08:10,376 to re implement Google ourself, right. 1603 01:08:10,376 ---> 01:08:13,706 This is pretty much what Google looked like back in 1999 or so. 1604 01:08:13,886 ---> 01:08:16,166 Let's go ahead and take a look at this web page's source code. 1605 01:08:16,686 ---> 01:08:18,876 And let's see how this site was implemented. 1606 01:08:18,876 ---> 01:08:20,086 As an aside, before I forget, 1607 01:08:20,146 ---> 01:08:22,886 I see that I accidentally capitalized doctype on all 1608 01:08:22,886 ---> 01:08:25,806 of these print outs, I will go back and make them consistent. 1609 01:08:25,806 ---> 01:08:28,136 Because I'm using lowercase for those doctype's up top. 1610 01:08:28,136 ---> 01:08:29,976 So FYI, I will fix in the print outs. 1611 01:08:30,016 ---> 01:08:33,096 But for now, notice how simple it is to implement Google. 1612 01:08:33,316 ---> 01:08:35,486 Right? So we have the head at the top of the web page, 1613 01:08:35,806 ---> 01:08:37,736 we then have a title called, Fake Google, 1614 01:08:37,736 ---> 01:08:40,336 just so I don't upset them. 1615 01:08:40,606 ---> 01:08:43,596 Now I have body and so in the body what did I do, 1616 01:08:43,596 ---> 01:08:46,036 didstyle=textaligncenter, 1617 01:08:46,036 ---> 01:08:48,576 so this just means here comes a band of content, 1618 01:08:48,576 ---> 01:08:49,446 a division of content. 1619 01:08:49,596 ---> 01:08:51,116 Make it all centered and here is 1620 01:08:51,116 ---> 01:08:54,216 where this is this annoying semantic inconsistency. 1621 01:08:54,456 ---> 01:08:56,756 I'm saying textalign, but even things 1622 01:08:56,756 ---> 01:08:58,066 like the button you just saw, 1623 01:08:58,296 ---> 01:09:00,516 will also be centered as a result. 1624 01:09:00,596 ---> 01:09:02,386 So there's some you know, there's some quirks 1625 01:09:02,386 ---> 01:09:03,276 in the languages this year. 1626 01:09:03,536 ---> 01:09:05,956 But textaligncenter means make everything centered. 1627 01:09:06,246 ---> 01:09:09,086 I have an H1 tag which just means give me some big bold text 1628 01:09:09,086 ---> 01:09:11,476 to say, Fake Google and then this new tag. 1629 01:09:11,836 ---> 01:09:13,446 So here is yet another tag for us today. 1630 01:09:13,516 ---> 01:09:15,856 There's a form tag, open bracket form, 1631 01:09:16,146 ---> 01:09:18,996 the action attribute according to the manual says, 1632 01:09:18,996 ---> 01:09:23,196 give me the URL of a program, a web based program 1633 01:09:23,426 ---> 01:09:26,176 to which I should submit this user's form. 1634 01:09:26,456 ---> 01:09:28,856 So apparently I kind of cut a corner here. 1635 01:09:28,856 ---> 01:09:31,006 I didn't actually implement all of Google, I'm actually going 1636 01:09:31,006 ---> 01:09:32,796 to submit this form to the real Google 1637 01:09:32,796 ---> 01:09:33,826 and leverage their back end. 1638 01:09:34,216 ---> 01:09:37,736 So here I have formaction=quoteunquotethis, 1639 01:09:38,036 ---> 01:09:39,826 all right, so now close bracket. 1640 01:09:40,116 ---> 01:09:42,116 Notice that the close form is down here. 1641 01:09:42,116 ---> 01:09:45,176 So notice inside of this form is a bunch of input elements 1642 01:09:45,476 ---> 01:09:48,316 and this is where we have these basic user interface mechanisms. 1643 01:09:48,546 ---> 01:09:51,856 We have an input tag, a name I'm going to give Q, 1644 01:09:51,986 ---> 01:09:55,536 Q just meaning query, type=text, this means it's going 1645 01:09:55,536 ---> 01:09:57,996 to be a text box and not a button or check box 1646 01:09:57,996 ---> 01:09:58,836 or something like that. 1647 01:09:59,156 ---> 01:10:01,386 Then I have a line break which just says, put the next thing 1648 01:10:01,386 ---> 01:10:03,606 on the next line and what's the next thing. 1649 01:10:03,886 ---> 01:10:05,546 There's another input type that I found 1650 01:10:05,546 ---> 01:10:08,366 in the manual called type=submit and it turns 1651 01:10:08,366 ---> 01:10:11,766 out you can label this submit input, which happens 1652 01:10:11,766 ---> 01:10:14,156 to be rendered as a button with a value, 1653 01:10:14,356 ---> 01:10:16,156 namely, Fake Google search. 1654 01:10:16,416 ---> 01:10:17,816 So at the end result is 1655 01:10:17,816 ---> 01:10:20,906 that I have a form not unlike Google version 1.0. 1656 01:10:20,906 ---> 01:10:22,876 I can type in something like hamster here, 1657 01:10:23,136 ---> 01:10:25,916 click Fake Google search and let's actually see what happens. 1658 01:10:25,916 ---> 01:10:27,026 Well let me pull up Firebug, 1659 01:10:27,306 ---> 01:10:29,366 just so I can sniff my own network traffic 1660 01:10:29,366 ---> 01:10:30,346 and see what's going on. 1661 01:10:30,606 ---> 01:10:33,686 I'm going to go ahead and click on Fake Google search 1662 01:10:33,886 ---> 01:10:36,176 and notice what happens at top to the URL, 1663 01:10:36,176 ---> 01:10:38,376 because of that action attribute. 1664 01:10:38,706 ---> 01:10:39,496 Fake Google search. 1665 01:10:40,056 ---> 01:10:42,026 Wha-la, I have implemented Google right, 1666 01:10:42,026 ---> 01:10:43,746 I have my own front end now to Google, 1667 01:10:44,256 ---> 01:10:45,716 but notice how this worked. 1668 01:10:46,256 ---> 01:10:48,136 What's interesting is that I indeed ended 1669 01:10:48,136 ---> 01:10:50,036 up at Google.com, no surprise there. 1670 01:10:50,316 ---> 01:10:51,546 But notice what the URL looks like, 1671 01:10:51,546 ---> 01:10:54,856 http://www.Google.com/search, 1672 01:10:55,076 ---> 01:10:59,516 that was in my action attribute, ?Q=hamster. 1673 01:10:59,866 ---> 01:11:04,086 So it turns out, when we've been using this special key word get, 1674 01:11:04,086 ---> 01:11:08,086 get/, well you don't have to just get/, you can get/search 1675 01:11:08,286 ---> 01:11:11,026 and in fact, if you add a question mark to almost any URL, 1676 01:11:11,456 ---> 01:11:15,586 you can then pass in a ampersand separated list 1677 01:11:15,896 ---> 01:11:17,286 of what are called, parameters. 1678 01:11:17,286 ---> 01:11:19,546 So this is again just another word for the notion 1679 01:11:19,546 ---> 01:11:23,096 of an argument or a parameter or it is a parameter, another word 1680 01:11:23,096 ---> 01:11:25,316 for an argument but in the context of the web, 1681 01:11:25,666 ---> 01:11:28,626 question mark means to the browser or to the server, 1682 01:11:28,856 ---> 01:11:31,756 here comes some parameters, here comes some arguments. 1683 01:11:32,006 ---> 01:11:33,026 What's the first argument? 1684 01:11:33,106 ---> 01:11:34,696 Q. What's it's value? 1685 01:11:34,696 ---> 01:11:36,106 Well it equals hamster. 1686 01:11:36,386 ---> 01:11:38,866 And so this is the way that a web browser, 1687 01:11:39,056 ---> 01:11:41,296 which is just a fairly dumb program sitting somewhere 1688 01:11:41,296 ---> 01:11:43,116 on the INTERNET on my little old computer, 1689 01:11:43,426 ---> 01:11:45,656 passes input into a web server. 1690 01:11:45,656 ---> 01:11:48,606 Because web servers meanwhile, are designed to look 1691 01:11:48,606 ---> 01:11:53,786 at the incoming requests and it see oh, get/search?Q=hamster, 1692 01:11:54,156 ---> 01:11:55,916 so the program that Google wrote, 1693 01:11:55,916 ---> 01:11:58,836 which is probably written here in Python or a similar language, 1694 01:11:59,146 ---> 01:12:02,816 they see oh, here's a parameter called Q, Q is hamster, 1695 01:12:02,816 ---> 01:12:05,816 let me search my database for this keyword hamster, 1696 01:12:06,056 ---> 01:12:09,166 find a big list, a link list or an array of all of the web pages 1697 01:12:09,196 ---> 01:12:10,966 that match and then you know what I want to do, 1698 01:12:11,266 ---> 01:12:14,566 I want to actually return to the user a web page, 1699 01:12:14,826 ---> 01:12:16,046 little white lie I'm about to tell, 1700 01:12:16,196 ---> 01:12:19,666 a web page that contains a whole bunch of HTML with which 1701 01:12:19,666 ---> 01:12:21,746 to render that there web page. 1702 01:12:21,746 ---> 01:12:23,386 Now it's a little white lie because Google 1703 01:12:23,386 ---> 01:12:25,186 as you might have noticed, now has instant search 1704 01:12:25,186 ---> 01:12:26,386 and all these fancy features, 1705 01:12:26,576 ---> 01:12:29,216 where you actually don't download the HTML all at once 1706 01:12:29,216 ---> 01:12:30,396 when you first visit the page, 1707 01:12:30,666 ---> 01:12:33,226 rather they get it using a technology called, Ajax, 1708 01:12:33,226 ---> 01:12:35,386 whereby it gets the data behind the scenes 1709 01:12:35,536 ---> 01:12:37,826 and then immediately integrates it into the website. 1710 01:12:37,976 ---> 01:12:40,646 But if I do this old school, and turn off instant search 1711 01:12:41,206 ---> 01:12:43,226 and actually now research for hamster 1712 01:12:43,736 ---> 01:12:48,056 and reload my page's source code, you'll notice that, 1713 01:12:48,056 ---> 01:12:49,626 oh that's kind of a long thing. 1714 01:12:49,626 ---> 01:12:51,246 Let's go and put this in to here. 1715 01:12:51,536 ---> 01:12:56,336 This is the code, which is a mingling of HTML and JavaScript, 1716 01:12:56,336 ---> 01:12:58,736 that I got back from Google's website, when I asked 1717 01:12:58,946 ---> 01:13:00,896 for all web pages related to hamsters. 1718 01:13:00,896 ---> 01:13:02,006 It's cryptic. 1719 01:13:02,006 ---> 01:13:03,216 In fact, for someone like Google, 1720 01:13:03,216 ---> 01:13:05,546 when you get a billion hits per day, if every hit, 1721 01:13:05,546 ---> 01:13:07,116 this is actually a neat curiosity. 1722 01:13:07,196 ---> 01:13:10,116 With someone like Google, if a programmer accidentally or just 1723 01:13:10,116 ---> 01:13:12,666 to be nice and pretty, hits the space bar just 1724 01:13:12,666 ---> 01:13:15,006 to indent something, that's one additional character, 1725 01:13:15,006 ---> 01:13:18,326 one additional byte, magnified by a billion visits per day, 1726 01:13:18,326 ---> 01:13:21,196 that's 1 gigabyte worth of downloads that Google now has 1727 01:13:21,196 ---> 01:13:24,106 to incur and then spend for and so these days, 1728 01:13:24,106 ---> 01:13:26,416 super fancy websites like Google and Facebook 1729 01:13:26,416 ---> 01:13:28,086 which have a ridiculous amount of traffic 1730 01:13:28,116 ---> 01:13:30,586 for which every little penny and every little bit counts, 1731 01:13:30,926 ---> 01:13:33,016 they do what's called minify their source code. 1732 01:13:33,126 ---> 01:13:34,476 So it's a little harder to learn 1733 01:13:34,476 ---> 01:13:38,236 from these websites sometimes unless you use this tool 1734 01:13:38,306 ---> 01:13:39,206 like Firebug. 1735 01:13:39,206 ---> 01:13:42,796 If I go to Firebug and view this same web page down here, 1736 01:13:43,126 ---> 01:13:44,676 notice one of the powers of Firebug. 1737 01:13:44,676 ---> 01:13:47,586 No matter what, how big a mess someone's web page is, 1738 01:13:47,926 ---> 01:13:50,546 notice what Firebug does is it clean it up for you. 1739 01:13:50,646 ---> 01:13:53,616 So this is in fact how Google is implemented and as promised, 1740 01:13:53,886 ---> 01:13:57,366 notice that they make ample use of these things called div tags. 1741 01:13:57,366 ---> 01:13:59,596 It looks like they have a few other attributes like ID 1742 01:13:59,596 ---> 01:14:02,236 and class, but we've really just scratched the surface. 1743 01:14:02,236 ---> 01:14:05,666 What we'll tease you with today is this last thing here. 1744 01:14:05,986 ---> 01:14:09,366 Literally, the very first thing I learned how to do 1745 01:14:09,556 ---> 01:14:13,156 on with regard to web programming, was something 1746 01:14:13,156 ---> 01:14:14,446 that looked like this. 1747 01:14:14,976 ---> 01:14:18,756 Back in the day, you would walk across the yard to Wigglesworth, 1748 01:14:18,756 ---> 01:14:21,346 hand in a piece of paper into a proctors drop box if you wanted 1749 01:14:21,346 ---> 01:14:23,126 to register for a Freshman inter mural sport, 1750 01:14:23,456 ---> 01:14:26,786 in 1996 we put the Freshman Inter mural Sports program 1751 01:14:26,976 ---> 01:14:29,476 onto the INTERNET and it looked a little something like this. 1752 01:14:29,556 ---> 01:14:29,926 Literally. 1753 01:14:29,926 ---> 01:14:32,976 Although, I think I had like big pictures of soccer balls 1754 01:14:32,976 ---> 01:14:34,046 and volley balls and image 1755 01:14:34,046 ---> 01:14:35,346 in the background just to make it cool. 1756 01:14:35,596 ---> 01:14:36,596 It wasn't so cool. 1757 01:14:36,596 ---> 01:14:37,916 But I'll find that image for Wednesday. 1758 01:14:38,336 ---> 01:14:42,076 But using these same building blocks, inputtype=text, 1759 01:14:42,076 ---> 01:14:45,116 inputtype=submit, you can actually then take input 1760 01:14:45,116 ---> 01:14:47,486 from the user, let them hit submit, get an email 1761 01:14:47,486 ---> 01:14:49,476 to yourself, get their name added to the database, 1762 01:14:49,476 ---> 01:14:50,816 all the sorts of things you might want 1763 01:14:50,816 ---> 01:14:51,776 to do for final projects. 1764 01:14:52,316 ---> 01:14:53,496 Some more on that on Wednesday.