[Glazbom] 

DAVID J Malan: Ovo je CS50 i ovo je početak tjedna 7. Dakle, dobrodošli natrag. A možda podsjetiti da u problemu postavite četiri, bilo je malo smetlar lov za neke fenomenalne nagrade propisivala Nakon što se oporavi fotografije Osoblje ovdje iu New Havenu, si izazov pronaći što mnogi od oni računalni znanstvenici kao što ste mogli. I imamo cijeli hrpa podnesaka. Mislio sam da bih podijeliti nekoliko s vama danas ovdje. 

A mi ćemo objaviti sve to online. No posebno, ja sam htjela privući vašu pozornost to-- Pa jedan, Sam bio u dosta njih općenito pozira ovako. No, čini se da je od Jutros, pobjednik je određeni netko zove Ken s 24 djelatnika zarobljeni na kameru ili malo više kada se uzme u račun višestruko osoblje u slikama. FOTO Ovdje je Ken sljedeći Mariji u New Havenu. 

Sada, Ken, ipak, okreće van je malo kutak slučaja što se još nije dogodilo prije. Ispada da nije došlo mi staviti fine print u problemu postavite četiri koja kaže da je osoblje ne ispunjava uvjete za fenomenalne nagrade Ken jer je, naravno, jedan fotografi na našeg osoblja. Sada, s tim je rekao, on je izvorno napisao mi reći nemojte postavljati ove fotografije online. Mislim da je u velikom dijelu jer je većina fotografija da je ovaj fotograf je izgleda malo nešto ovako. I slično. 

Ali Ken bih ja vas uvjeriti da je on jako dobar fotograf, On je profesionalni, on uzima Fotografije koje nisu mutne, da su bolji u fokusu, a on je je dosta našeg osoblja. No umjesto da samo prizna Ken, što smo mislili da ćemo napraviti je proći kroz popis Stvarni studenti koji su podnijeli. I ispada da je Koplje s 15 fotografije od jutros bio naš pobjednik. 

I ovdje na slici je Lance s Colton, sa SKAZ, sa sobom i sa Samom. Ali onda ispada da su od 11:46, tako da samo malo prije, Vratio sam se na moj e-mail i pronašao da smo imali još jedan više podnesak student po imenu Bonnie čiji e-mail, rekao je samo to. Ne lagati, ja sam to tijekom nastave. A onda je nastavio da priložite samo 14 fotografije, jedan sramežljivi Lance je 15. 

No, u Bonnie je fotografija, ispada kako su više članova osoblja, Sam među njima, tako da ono što smo mislili će učiniti je priznati obje ove. Dakle, osim dobivanje Dropbox prostor da svatko tko je sudjelovao prima, ove dvije sekcije će također dobivaju lijep catered ručak za njih a njihov odjeljak pari ovaj dolazak tjedan. I tako ćete čuti od nas, Lance i Bonnie, o tome. Tako veliki Čestitke na njih. Sada, oni od vas koji bi kao ručak općenito znam da CS50 ručak u Cambridgeu i New Haven je ovog petka. Idi na CS50 web stranicu slash RSVP. A sada riječ o seminarima. Više curricularly. Tako smo bliži točka semestra gdje bi trebali početi razmišljam o završnim projektima. A u stvari, u samo malo, će Takozvani pre prijedlozi biti posljedica. Dakle, pre prijedlozi su trebali biti prilično nizak utjecaj i stvarno samo prilika za da sastavite kratku poruku poučavanje kolega da obavijestiti mu ili joj ono što ste mislili možda želite učiniti za svoj konačni projekt. 

Sada, mnogi studenti završiti radiš web završne projekte. I naravno, mi smo samo sad prošli tjedan u to i dalje ronjenje u web programiranje. Dakle, ne brinite, ako vas apsolutno nema pojma kako ti bi graditi ideje koje možete imati u svom umu. To je zapravo samo tjera funkcija da bi vam razmišljanje i razgovor s TF o tome. No, kako bi vam pomoći u tome, i sa završnim projektima konačnici, znam da CS50 ima tradiciju ponuditi seminare. 

A to su izborni, ruke na, ili predavanje na temelju mogućnosti kako bi saznali više o temama koje su malo pomoćna za tečaj a nastavni plan i program, ali ipak divno Materijal voziti završne projekte. I tako je to popis koji je CS50 osoblje ovdje u New Havenu su došli do za ove godine o iOS programiranje, Android programiranje, razvoj igre, i grozdova više alata i jezika i tehnike. 

Dakle, držati na oku CS50 web stranici. A u međuvremenu, ako želite Registrirajte svoj interes za bilo koji od ovih, ići CS50 je slash registar. A onda ćemo pratiti kao na dani i vrijeme leta i mjesta i everything-- većina sve će biti streamed i također dostupan na zahtjev Nakon ako ne možete zapravo učiniti. Dakle, bez dodatnih teškoća, mi stali zadnji put s dobiti. 

A to je kao poruku da je unutar virtualnog omotnici, podsjećamo, da smo prešli iz usmjerivač usmjerivač usmjerivač između web preglednika i web poslužitelja. I to poruka izgledala Malo nešto ovako. To je bio više Arcane poruka koja je zapravo unutar koverti napisan na komadu papira čija prvi red, kaže doslovno, dobiti udarac. 

I baš kao provjera razum, što je Slash označavaju? Što znači kada Slash traži web stranice? Možete zatražiti ga cijelo vrijeme. Većina svaki put kada posjetite web stranicu, zapravo ne upisati naziv datoteke. Vjerojatno samo ići na Facebook.com, ući, gmail.com, ili slično. A što slash predstavlja? Što datoteku? Ili što stranica, konkretno? 

Indeks, da. Dakle zadanu stranicu. Dakle, ako ne odredite datoteku ime kao što ćete početi vidjeti, ti si zapravo samo traži daj mi zadanu stranicu Facebook ili mi dati svoj inbox ili dati ja zadana stranica vijesti na CNN-stranicama ili slično. A poslužitelj tada reagira na da poruka s nečim ovako, rekavši da, govoriti HTTP verziju 1.1. 

200, što je status kod koje mi ljudi rijetko ikada vidjeti, jer to je dobro. Jer to znači OK, zahtjev je primljeno i rukujete ispravno. A tip sadržaj očito u odgovor je vrlo često, ali ne uvijek, tekst. A posebno, HTML. I to je zapravo gdje gledamo danas. 

Dakle, u stvari, ja ću otići naprijed i otvoriti preglednik. Idem koristiti Chrome, možete koristiti najviše bilo koji preglednik u tjednima koji dolaze. Obično preporučujemo Chrome zato što je osobito dobro za softver programere. Ima puno izgrađen u alati koji olakšavaju razvijati ne samo HTML i CSS, stvari ćemo početi govoriti o danas, ali i drugim jezicima. 

I ja ću ići naprijed i ići to-- Idem kontrolu klik ili pravo kliknite bilo gdje na web stranici. I ja ću ići na Pregledajte element. I ja ću štipanje moje Zaslon samo malo ovdje. Dopustite mi da se presele to na dno. Dakle, to je ono što se zove Inspektor Chromea. Dakle, to je kao za ispravljanje pogrešaka alat izgrađen na Chrome. 

Svi vi već imate ovaj Ako ste bili koristite Chrome. I to vam omogućuje da vidite što se događa na ispod haube neke web stranice. Tako ćemo zapravo uzeti pogledajte ovo što slijedi. To je način više značajki a mi je stalo danas. No, tu je ta kartica ovdje. Elementi, mreže, izvora, vremenska crta, a neke druge stvari. Idem kliknite na Mreža za trenutak. 

I to je malo neodoljiv na prvi pogled ovdje. No, ono što ću učiniti je pustiti mi to malo pojednostavio. Idem za uključivanje snimanje svjetlo, tako da je crveno. A ja ću reći sačuva zapisnik. A to je samo malo što sam shvatio tijekom vremena koje će spasiti sve što se događa u pregledniku. A sada ću ići da http://facebook.com. 

Zapravo, neka je učiniti www za dobru mjeru, slash. Unesite. Tako URL da su mnogi od možda ste posjetili. A sada Facebook je web Stranica dolazi na vrhu. A onda cijela hrpa stvari letio na dnu. A u stvari, ispada da kada posjetite facebook.com, niste samo to da jedan HTTP zahtjev, ispada da će Facebook.com šalje 41 tih kuverti, svaki sa svojom GET zahtjev, kao što je prikazano, iako iza ekrana Ovdje, na dnu ekrana, to znači da je, doista, moj Preglednik je napravio 41 zahtjeva. 

A ukupno, to prenose 861 kilobajta i to je zbog nekog razloga čak osam sekundi preuzeti sve to. Dakle, to je zapravo malo čudno da je Facebook je stranica koja će potrajati dugo, ali neka bude tako u ovom slučaju. Sada, sve to ja stvarno ne briga O osim za najviši zahtjev. Tako ćemo ići na ovom jednom ovdje i neka mi smanjili samo na trenutak. 

I neka mi uvećanje na to. Dakle, ono što sam učinio, na lijevo, iako postoji mnogo događa ovdje je sam istaknuo Facebook.com, a zatim primijetiti da sam pomicanjem prema dolje, pomicanje prema dolje, pomicanje prema dolje, zatražiti zaglavlja. I vidjet ćete da je Chrome prikazuje me u biti unutarnji sadržaj zahtjeva sam napravio. Nije formatiranja u sasvim isti način, ali primijetiti tu spominjanje dobiti, primijetiti da postoji spomen domaćina, Facebook.com, put ili Slash, što je file sam zatražio. 

A onda, ako sam pomicanje back up, mi ćemo zapravo vidjeti da je ono Facebook vratio da mi je sve ove zaglavlja. Dakle, unutar tog virtualnog omotnice doista mnogo ključnih parova vrijednosti. Riječ, debelo crijevo, a zatim vrijednost. Riječ, debelog crijeva i vrijednost. One se nazivaju zaglavlja. I tu je način više detalja ovdje nego mi zapravo stalo upravo sada. 

No, to je drugi na Posljednji tamo dolje, primijetiti da facebook.com poslužitelj, Ovdje doista rekao pitanju neki tekst HTML. Dakle, sve je to za reći da kada zatražiti web Stranica od preglednik na poslužitelja, koji poslužitelj odgovara s omotnicu vlastite unutar kojih je tekst. Drugim riječima, HTML. Hypertext Markup Language. Što je još jedan jezik da uvodimo danas da su ljudi ili računala generiranje kako implementirati web stranice. 

Naime, pogledajmo ovo. Idem sad vratiti na facebook stranice. A ja ću samo Kontrola miša ili desni klik i kliknite na View Page Source. A čak i ako ne koristite Chrome, IE može učiniti, Firefox može učiniti, Safari možete to učiniti, iako izbornik Mogućnosti možda izgleda malo drugačije. A to je da su Mark i HTML Tvrtka na Facebooku napisali. 

I da kolektivno, taj jezik ovdje provodi plavi i bijeli stranicu kako smo vidjeli maloprije. Sad, ovo je malo neodoljiv. Ali, ako ćemo gledati na gornjem lijevom, mi smo će početi vidjeti neke uzorke. Izgleda da ima puno tih otvorenog kuta nosača a onda je ovo ključna HTML. Evo još jedan otvoreni kut nosača i glavu. 

Evo, ako mi se pomaknite prema dolje i dolje i dolje, ja sam ići naprijed i pokušajte u potrazi za nečim. Postoji put preko na desnoj Ovdje je otvorena zagrada tijelo. A sjećam od prošle Vrijeme je da se predloženi kako najjednostavnije web stranice da čovjek mogao napisati može izgledati malo nešto ovako. Otvoreno HTML oznake, otvorite glavu oznake, otvorite oznaka, zatim zatvorena naslov, zatvorena glava, otvorena Tijelo tag, neki tekst, zatvorena tijelo, zatvoreni HTML. 

No, pauza ovdje samo na trenutak. Ovaj kod, čak i ako ste Nikad ga prije pisao ali još uvijek ne razumijem što se događa, izgleda prilično dobro. Točno, to je vrlo čist. To je vrlo stilski lijepo. Puno razvedenosti i bijelog prostora. Facebook je nije. Pa zašto je Facebook toliko gora od mene na pisanje HTML-a? Očigledno. 

Dobro, ovo je kao jedan od pet za stil. Postoji uvjerljiv razlog za njih smanjiti ove ugla. U redu, tako da oni ne žele olakšavaju za vas da ga pročitate. Dakle, u nekom smislu, oni su to obfuscating, kakve to remećenje barem estetski, tako da je teže za MySpace ići i otkinuti njihovu stranica, a HTML za to. Ispada da je s programima iako, uključujući Chrome, možemo očistiti ovo gore super jednostavno. Tako da je nije dosta da kao razlog. Što bi drugo moglo biti uzrok. Da. Da, podaci bijeli prostor troškovi. Kako to misliš? Da, točno. Ako pritisnete tipku tab puno ili razmaknicu, razmotriti implikacije. Dakle, svaka tipka na tipkovnici je [Nečujan] predstavljao kao jedan bajt. 

Dakle, pretpostavimo da je Marko ili bilo koji od devs ovih dana pogađa razmaknicu samo jednom u ovoj HTML stranicu koja predstavlja Facebooka početnu stranicu. I Facebook ima puno korisnika ovih dana. Dakle, pretpostavimo da je Facebookov stranica posjeti milijardu ljudi danas. A netko na Facebooku ima hit razmaknicu samo jednom. 

Dakle, jedan dodatni bajt, milijardu zahtjeva, koliko podataka je Facebook prijenos preko interneta jer netko hit razmaknicu na svom tipkovnici? Milijarda bajtova, ili jedan gigabajt Podaci se šalju iz Facebooka poslužitelja da ljudi širom Svijet bez dobrog razloga. Sada, to je samo jedan prostor. 

Zamislite da smo zapravo očistiti ovo stvar se i razvedena i dodao puno bijelog prostora i kartica likovi i mjesta, ćete završiti trošenja gigabajta, ako ne i terra bajtova više prostora. I tako super uobičajeno u Stvarni svijet web razvoj je Umanjite svoj kôd. A mi ćemo na kraju vidjeti kako možete to učiniti. 

Ali danas, mi ćemo početi pisati kod to je zapravo čitati nas ljudi. Ispada, međutim, ako se vratite ovaj alat u Chrome Pregledajte Element, Prije toga, bili smo na kartici Network. Ispada da ako idete na Kartica elemente, što zapravo vidjeti je prilično Chrome tiskana verzija tog istog HTML. Tako smo ga deobfuscated. Dakle, to je ne odgovaraju za računalom. I sada možete zapravo kliknite okolo i početi vidjeti hijerarhiju koja je web stranica. Tako ćemo zapravo učiniti. Idem ići naprijed i otvoriti na moj Mac program koji se zove tekst uredi. I podsjetiti da je ovo samo super jednostavan tekst programa. Windows ima notepad.exe. I ja ću Verbatima upišite sljedeće. Doc tipa HTML, otvorena zagrada HTML, zatvorena zagrada HTML, imamo glavu stranice ovdje, kraj glave stranice ovdje, naslov će biti kao, Hello World. 

I onda ovdje, trebamo tijelo na web stranici. Zatvorena tijelo. I onda ovdje, Hello World. U redu. Tako smo napisali super brzi web stranicu. Idem ga spremiti kao hello.html na moj radna površina. Moj Mac će se žaliti, misleći da, pričekajte minutu, ovo je tekstualna datoteka, učinite Želite li ga nazvati txt? Ali ne, želim koristiti dot HTML. 

I što onda lijepo ako sam Samo dvaput kliknite na ovu datoteku, hello.html, ovdje je moja web stranica. Nažalost, ja sam Jedina osoba na svijetu koji možete posjetiti ovu stranicu odmah. Jer gdje to živi naizgled? To je na mom Macu, zar ne? Koji je beskorisno. Kao nitko u ovoj sobi a kamoli na internetu zapravo možete posjetiti tu stranicu. Tako je danas, moramo uvesti još jedan element. 

A za to, idem ići naprijed i otvoriti Cloud 9. Dakle Cloud 9 je naravno oblak temelji service-- CS50 IDE-- To je sve naše radnih prostora radi negdje na internetu. A to znači da su sve naše datoteke javno dostupni već. Tako ćemo ići naprijed i učiniti. Ja ću ići naprijed i stvoriti novu datoteku NCS50IDE. Idem da ga spasi kao i prije kao hello.html i kliknite Spremi. A sada samo uštedjeti vrijeme, idem ići naprijed i kopirajte zalijepite ovaj kod umjesto da ponovite. I spremite ga. I tako sad imam Datoteka naziva hello.html. Ali kako ja to zapravo otvorite ga kao web stranicu? Pa, ispada izgrađen na CS50 IRO je ne samo prevodilac kao jeka i debugger poput GDB i grozdova drugih programa, tu je zapravo punopravnog web poslužitelj trčanje u CS50 IDE. 

Svi vi, to jest, imati vlastiti web poslužitelj. I web poslužitelj je samo komad softvera čija je svrha u životu je služiti se web stranice. Za slušanje za zahtjeve preglednike i odgovoriti s malo virtualnim omotnicama unutar kojih je sadržaj koji sam napisao. Dakle, ovo je web poslužitelj zapravo besplatan i open source. Gdje open source jednostavno znači softver koji netko drugi ima Zapisano je da svatko od nas može zapravo vidjeti i skinuti pa čak i mijenjati izvorni kod. I to se zove Apache. 

A mi smo napravili to malo lakše koristiti u CS50IDE pozivom ga Apache 50. Tako da zapravo može razumjeti sljedeće. Idem reći Apache 50 start. A onda sam samo ću reći točku. I vidimo neke pomalo Arcane poruku rekavši postavljanje Apache Document [? Skupina?] kuće, Ubuntu, što god da je, slash radni prostor. Pokretanje web poslužitelj Apache je uspješno 2. 

Dakle duljimo, sam Upravo gurnula gumb i okrenuo se na web poslužitelju tko je sad slušanje na internetu na TCP port 80 na određenom adrese. I ovdje piše, a to će se promijeniti Like svoje korisničko ime i drugih čimbenika, ali primijetiti sad ako ja kliknite ovaj, IDE50 dot jharvard pa i tako, primijetite da je sve ovo vrijeme U posljednjih nekoliko tjedana, možda imate primijetio da svoj vlastiti korisničko ime je ugrađen u gornjem desnom rukom kutak CS50IDE. 

I to je zapravo bio sve ovo Vrijeme adresu na kojoj možete posjetite sve svoje datoteke preko interneta. Do sada, nije važno, jer u C, općenito Želite stvari trčanje u terminala, a ne na webu. Ali danas, počinjemo pisanje web based kod da mi želimo dostupni na javnim URL-ova. Pa što ću učiniti je kliknuti ovaj URL. 

I primijetite da vidim prilično ružno indeks, u imeniku, ali ono datoteka skače se na vas, vjerojatno? Hello.html. To je zato što sam spasio datoteka u mom radnom prostoru. A ono što sam rekla Apache web poslužitelj se pogledati u Davidovu radni prostor imeniku. I neka netko u Svijet vidi te datoteke. 

I doista, ako ja sada kliknite na hello.html, Vidim u ovoj kartici točno tu datoteku. Sada primijetite, Cloud 9 radi nešto malo korisno za nas. Unutar CS50 IDE, primijetiti da postoji Odjednom adresa šipka. To je zato što, iako smo pomoću Chrome posjetiti CS50IDE, unutar CS50IDE je vlastitu verzija web pregledniku upravo sada. I tako, umjesto komplicirati stvari kao takve, Idem samo naprijed i samo kopirajte ovaj URL. Ja ću ići naprijed i jednostavno otvoriti vlastitu Chrome prozor. Dakle, nema magije ovdje, ne CS50IDE. Samo ću se doslovno zalijepiti moj J Harvard URL i pritisnite Enter. I voila, sada i u teoriji, svatko na internetu, ako sam konfiguriran dozvole na odgovarajući način, možete posjetiti ovu datoteku. I tako sad, ako sam rekao hello.html, voila, postoji mi nevjerojatno underwhelming web stranica. Tako ćemo učiniti brzo provjeriti razum. Zbog svega toga je konceptualni postaviti. A mi smo zapravo nije stvarno ti učio kako pisati HTML po sebi. Bilo kakva pitanja do sada na što se upravo dogodilo? Da. Da li CS50 posjedujete ovih web stranica? U kojem smislu? Dobro pitanje. Dakle, CS50 je vlasnik CS50.io. Mi doista smo kupili taj naziv domene. A po prirodi vama prijavom na CS50IDE, svi dobiti ono što se naziva poddomena. 

Dakle IDE50-Malan, ili IDE50-Rob.CS50.io, to je vaša jedinstvena adresa roku naše ime domene. Tako je za potrebe naravno, imate vlastitu jedinstvenu adresu. Ali smo pojednostaviti stvari koje kupnje top level domena, CS50 točka I / O, a zatim svi ostali unutar toga, da se tako izrazim. A mi ćemo se vratiti na to u nekoliko tjedana vjerojatno, posebno na konačni projekt vrijeme, kada su neki od vas možda želite da se vaše vlastite domene. To je zapravo relativno jednostavan. U redu. Tako ćemo sada učiniti. Ja ću ići natrag u CS50IDE, gdje je moj dosje sada, hello.html, nije sve što je zanimljivo. Želio bih učiniti nešto malo ljepše od toga. Tako ću učiniti ovako nešto. Neka me otvoren paragraphs.html. Dakle, ovo je datoteka napisao sam unaprijed. Na vrhu toga, kao što je Uvijek imamo komentare. No, u HTML, komentari izgleda malo drugačije. On line tri i linija 14, što vidi sintaksu za početak komentar i na kraju komentar. 

No, nitko od stvari u između pitanjima funkcionalno. To je samo napomena do Ljudsko što se ovdje događa. I baš kao brzi razuma ček, ako sam se pomaknite prema dolje, što je očito novi oznake koje smo uveli? Oznake do sada smo vidjeli otvoreni Nosač HTML, glave, naslov i tijelo. No, ono što je očito novi sad? 

Da, tako str. P oznaka ili stavka oznaka. A onda sam posudio nešto zadano Latinski tekst predstavlja moje stavke. Jer ono što sam htjela pokazuju kako biste mogli predstavljaju odlomke teksta u HTML-u. I tako ono što se počinje događati Ovdje je da je već uzorak razvoja. I neka mi ići naprijed i učiniti. Dopustite mi da najprije isključite Apache. A ja ću reći da se početak opet unutar današnjeg izvora sedam m katalog. Tako da imam pristup svemu. 

A sada, ako sam se vratiti ovo imenika, Primijetit vidim svaku datoteku s danas. I vidjet ćete u Sljedeći problem set, mi ćemo vam dati upute za to upravo to. Ako otvorim paragraphs.html, to može kao i izgledaju kao programski jezik za vas ako ne govorite ili čitati latinski. No, to je samo tri stavci teksta koji su označeni u HTML-u. 

I primijetiti stavak pauze između njih. Jer ispada, i iako vas može biti sklon da to učinite, dok je u stvarnom svijetu, Ako želite staviti liniju pauze između stvari, Možda ćete vrlo jednostavno to učiniti i udario Spremi. A sada, ako sam ponovno učitati ovdje, obavijest da je sve samo zamagljuje zajedno u samo jedan blob teksta. Budući HTML je vrsta glupe jeziku. 

To je značilo da se koristi u takvom način da preglednik će samo to izrijekom što to kažem. Dakle, ako ne kažem dajte mi novi stavak, nećeš vidjeti novi odlomak. A u stvari, ono što je preglednik će raditi je čak i ako pritisnete Enter, recimo opet i opet i opet, kreće ovaj tekst put dolje na zaslonu, a zatim spremite a zatim ponovno, preglednik će kolaps sve to bijelog prostora u samo jednom, vidljivom razmakom. U redu. Dakle, to je stav oznaka. I tako ono što je obrazac koji je u razvoju ovdje? Pa, čini se da je slučaj da HTML je sve o pokretanju oznaku i završava oznaku. A što je oznaka? Pa, to je samo komad sintakse. Otvorite nosač, ključna riječ, zatvorena zagrada, je oznaka. Ili početi oznaku. I onda kad ste učinio izražavanje sebe, kao što ste učinili s stavkom, što učiniti da se tako izrazim suprotno. No, suprotno nije sasvim unatrag. 

Jednostavno prefiks isti tag-a ime kosu crtu kao što je ovaj. U redu. Dakle, nije sve što je uzbudljivo. A u stvari, nismo izradu Web sve više zanimljiv. Što ako želim napraviti stvari veći i odvažne? Tako ispada da je ovdje je primjer u headings.html, gdje je u mom tijelu, Imam H1 tag, H2, H3, četiri, pet, šest ili, od kojih su svi Čini se prilično Arcane. Ali ako idem otvoriti ovo Primjerice, neka je pogledati. Headings.html. 

Dakle preglednici po defaultu može dati tekst To je veliki i hrabar raznorodnih veličinama. H1 velika. H6 je manji, a zatim sve ostalo između. Dakle, to je zanimljivo, ali još uvijek stvarno ne web znam. Što ako želimo imam nešto poput popisa. , Dakle, ovdje je popis s grafičkim oznakama od tri Harvard kuća. 

Kako idete o događaj ovaj? Pa, pogledajte list.html. I ovdje, vidimo Malo funkiness ali neka je razmotriti što se događa. Dakle, na temelju onoga što ste upravo vidjeli, UL zalaže za neuređen popis. Neuređen popis samo znači grafičkim oznakama. Nema brojeva. Tu je i nešto što se naziva naredio popis, što je OL na oznaku. Zatim LI točka popis je sve to znači. 

I tako ga automatski Brojevi sve za vas. Ali opet, sve moje uvlačenje bijeli prostor je samo zbog mene. Preglednik ne zapravo ide na skrb. Dakle, čak i ako ne mogu to učiniti, samo da bude jasno, da ne bi trebali, iako preglednik će i dalje moći razumjeti sasvim u redu. Ja sam udarajući Učitaj ponovno u mom preglednik, ja klikom reload i nema promjena se događa jer preglednik dalje radi upravo ono što sam to kažem. 

U redu. Dakle, ovo je sve samo tekst. Sada ćemo napraviti nešto zanimljivije. Ja ću ići naprijed i posuditi ove HTML. Ja ću ići naprijed i stvoriti novu datoteku ovdje. A mi ćemo nazvati ovu rick.html. Imamo nerazmjerno Rabljeni nešto zove Rick uvaljajte u ovu klase ove godine, ne znam, jednostavno se dogodilo organski. 

A sada je dobio izvan kontrole. Pa ja sam samo ići s njim. A ako idem na Googleu Slike i Rick Astley. Ako ne znate zašto radimo to, samo pročitajte na Wikipediji. Svaki put kada ste kliknuli na link, netko je negdje smijeha. I neka mi ide ahead-- tamo idemo, idemo vidjeti ovu sliku. 

Dakle ovdje imamo Slika u Google Images. I pretpostavimo da je to razumno svugdje na internetu. Tako ću pretpostaviti da je u redu za mene zapravo stavi ovo u mojoj web stranici. Idem samo naprijed i kopirajte URL slike. A sada, ako sam se vratiti u oblaku 9, neka je vidjeti što mogu učiniti ovdje. Dakle, ovdje je samo web stranica. To je Rick Astley, haha, Idem sad vratiti na moj e, reload, i zanimljivo. 

Gdje je Rick? Pa da vidim što se dogodilo. Zapravo, idem pretvarati se kao da to nije učinio. [Nečujan] staviti ga ovdje. Mi ćemo se vratiti da je u trenutku. Dakle, ovdje je rick.html. Dakle, to nije Rick Astley. Tako ispada možemo zapravo ga dodajte ovdje. To je Rick Astley. Idem reći dajte mi neku sliku čija Izvor je URL Samo sam kopirao, što očito je sretna rođendan ili nešto drugo. 

A sada ću zatvorite oznaku ovako. Dakle, ovo je super omatanje dugo. Ali primijetite da sve sam učinio je slika otvorena zagrada, Izvor s atributom toga. I to je stvarno dugo URL. I na samom kraju, primijetiti. Zašto sam učinio udarac nagnuti nosač umjesto da, kao i svaki drugi tag, ima otvorenu nosač, IMG, zatvorena zagrada? Dovoljno je uzeti pogodak čak i ako nemaju prisnost god s HTML prije. 

Dakle, to je kako se zatvara naredba, ali zašto to stvarno ne bi intuitivno Osjećaj da nešto malo više preopširan kao bliske slike? Da. Da. Samo semantički, nema osjećaj počevši sliku i završio sliku, to je bilo tamo ili nije. Tako da nema smisla ostaviti prazninu za bilo što drugo unutar slike. Vi jednostavno ne možete učiniti. I tako sintaksa će općenito biti samo učiniti kosu crtu unutar otvorenog oznaku ili oznaku start a zatim pritisnite Spremi. 

Dakle, ako ja sada ponovo učitajte datoteku, sada Imam dobru stranicu za kuhanje web ovdje. I mi bi sigurno stvarno smetati ljudima ugradnjom umjesto poput YouTube link. A u stvari, bilo koje vrijeme ste ikada otišao na YouTube, i neka me zapravo slučajno Rick osobno uvaljati ovdje. Dakle, Rick roll. Dakle, Rick roll-- ću ići tamo. 

[Glazbom] 

OK, jedna osoba svidjelo. Dakle, primijetite sve ovo vrijeme, ako vas kliknite Share vezu, te naravno dobiti URL koji možete zapravo ugraditi u e-mail ili forenzičke sliku ili problem postaviti ili u slide. A sada, ako sam umjesto kliknite na ugraditi, primijetiti da je sve ovo vrijeme, ove stvari je bio tamo. Ja ću ići naprijed i kopirajte ovo. 

I samo tako da ga mogu bolje vidjeti, ja sam će ga zalijepiti u svoj tekst editor. Obavijest da je to ono što YouTube je vam govorim. Svaki put kada posjetite YouTube video, ako vas želite položiti video na vaše web stranica, jednostavno iskoristite ovo. Dakle, ovo je još jedan HTML tag zove iframe. Ili u liniji okvira. Dakle, i ona izgleda malo više Kompleks od svih ostalih. Tako ispada da je slika oznaku i očito iframe tag uzeti ono što se naziva atributa. 

I to je još jedan komad sintakse u HTML. Osim oznaka je Ime, otvorena zagrada oznaka ime, možete kontrolirati ponašanje oznake tako da cijela hrpa atribut jednaka vrijednost. Osobina jednaka vrijednosti. I tako, na primjer, YouTube nam govori Ako želite širinu ovom videu biti 420 piksela i visina biti 315 piksela, to je kako ga izraziti u HTML. 

Izvor videa ide se da dugo YouTube URL a zatim neke druge stvari kao okvir granica je nula, tako da vjerojatno znači da postoji bez obruba oko stvari. Dopustite puni zaslon vjerojatno znači da je korisnik Možete kliknuti na gumb i zapravo full screen video. Dakle, ako ja stvarno želim biti impresivno ovdje Rick dot HTML, umjesto da koristite oznaku slike, neka mi izbrisali, umjesto da zalijepite ovaj. A sada ponovno učitavanje. A sada idemo opet. U redu, to je dovoljno. U redu, tako pokušat ću Teško da više neće raditi. Pa što su neki od takeaways ovdje? Dakle HTML, ružna kao ovih web stranica su, je zapravo prilično jednostavna. To nije programski jezik. To nema funkciju. To nema petlje. To nema uvjete. Sve što ima je više desetaka različite oznake, od kojih svaki ima nula ili više atributa. A u stvari, ono što je zabavno oko HTML kao što počnete roniti u je da je vrlo self teachable. 

Sve što je potrebno je razumijevanje Općeg okvirnog HTML. Što je oznaka, što je atribut, kako ti zapravo konfigurirati web stranicu kako slijedi. A sve ostalo je stvarno rezultat gleda se u online referencu ili googling kako to učiniti neke tehnika ili kao što smo vidjeli, gledajući Facebooka izvora broj, gleda na web stranici koja vam se sviđa kod njega je izvorni kod i razumijevanje kako programeri tamo zapravo postavio stvari. 

Dakle, što možemo učiniti slike kao dobro. A u stvari, uspjeli smo maloprije. Dopustite mi ići naprijed i samo vam pokazati. Evo nekih primjera koda. Ako ste ikada željeli vidjeti prgav mačku. Dakle, primijetite da ja mogu imati oznaku slike ovdje. I ja sam dobio komentar iznad njega. Imam alternativu Tekst za pristupačnost. Dakle, netko tko je pomoću zaslona Čitatelj iz razloga vidiku može zapravo tada imati svoje čitač zaslona kažu prgav mačku. Jer ako ne mogu vidi sliku, oni mogu barem imati svoje računalo recite im verbalno što je to. A izvor tog spisa je cat.jpeg. Pa zapravo, ako sam stvarno htjela dobiti pametan, što bi moglo imati done-- Obećavam da ne ide u Rick Astley, tako Idem na google za mačka umjesto. Kad odem na Google Images ovdje, a mi ćemo pretpostaviti da je to slika moje mačke. 

Pretpostavimo da imam kontrola kliknuo ili desno kliknuli na to, slučajno jezivo. I cat.jpeg idem spremiti na moj radna površina. Dopustite mi sada vratiti na oblaku 9. Uočite da ovdje mogu ići prenositi datoteke. A ako zgrabite to datoteka, cat.jpeg, obavijest da ja to mogu povući i ispustite ga u oblak 9 i to će vikati na mene ovdje. 

Jer smo već vam dati cat.jpeg datoteku, ali to je super jednostavno zgrabite fotografiju koju ste preuzet iz Facebook ili Flickr ili slično i zapravo povucite i ispustite ga u oblaku 9. i onda bi ga dio vašeg osobnog web stranice ili problema postaviti sedam ili osam, kao što ćete vidjeti uskoro. A onda kad vas konačno posjetiti tu mačku, uz pretpostavku sam skinuti tu istu mačku, Obavijest that-- da je sladak. 

Ono što će vidjeti je nešto poput ovog lice ovdje. Dakle, datoteke koje ste Referentna unutar web stranice može biti ili lokalno u svoj vlastiti računa ili daljinski na nekom drugom poslužitelju kao u slučaju Rick Astley slika malo prije. Pa gdje else-- što još možemo učiniti ovdje? Tako ćemo pogledati u nastavku. Znate li što je vrsta cool? 

Mi smo do sada bili izradu vrlo statične web stranice. Želim začiniti stvari kao što slijedi. Želim napraviti vlastitu tražilicu. Dakle, da bi tražilicu, neka je ići naprijed i početi raditi ovo. Ja ću ići naprijed i stvoriti novi file search.html. I mi smo prefabed verzije online. Ups. Ne zalijepiti u svoj prozor terminala. Prefab verzije online. A ja ću početi na sljedeći način. Dakle ovdje je početak datoteka zove search.html. Idem ga spremiti u danas izvor imenik. Idem nazvati ovu pretragu. Zapravo, mi ćemo učiniti bolje. CS50 Traži i zapravo brand. I sada, ja ću reći nešto poput H1 CS50 pretraživanje. I onda ovdje, H2 uskoro. I samo da recap, H1 i H2 znači ono respektivno? 

Da, tako velik i hrabar, i nije velika, ali još uvijek podebljano. Dakle, ako sam spasiti ovaj i ide ovamo, neka je vidjeti datoteke search.html. U redu, i to je jedan je redu-[nečujan]. Pričekaj. David je zbunjeno. Oh, to je upravo tamo. David je idiot. U REDU. Tako je. Dakle CS50 potražite uskoro. Tako sada, neka je sintetizirati ono što smo učinili prošli tjedan. 

Gdje smo razgovarali o mehanika niža razina HTTP. I ove nove ideje HTML, što je samo ovo označni jezik na kojem vas reci preglednik točno što učiniti i provoditi vlastite tražilice. Dakle, umjesto da samo govoreći uskoro, ja sam će uvesti nešto što se zove obrazac oznaku. I u ovom obliku, idem imaju nešto poput polja za unos. 

A ime ovog unosa polje, ja ću ga zvati P A tip ovog polja za unos Ja ću reći samo "tekst". I riječi, kao što ćemo vidi, je samo tekstualni okvir. I tako se ne osjećam ovdje imati sve unutar njega u ovom trenutku. I tako sam jednostavno ide zatvoriti oznaku s tim naprijed udarac ravno u samoj oznaci. A onda ću ima jedan drugi ulaz. Vrsta Ulaz jednako podnijeti. A onda ću zatvorite ovaj jedan previše. 

I sada ću se vratiti ovdje. I već smo vidjeli, iako prilično ružna, imam dobio početke Moja potraga stranica ovdje. U stvari, neka mi pokušati očistiti ovo gore malo. Ispada da na ulazna ovdje, ja mogu imati drugi atribut zove rezervirano. I ja mogu vidjeti nešto poput riječi, točnije, za upit q. 

I primijetite, sada imam Ova vrsta sivog teksta koji nestaje kao Čim sam početi tipkati, ali to je vjerojatno nešto ste vidjeli u drugim web stranicama. Ja stvarno ne sviđa gumb Pošalji. Pa ja zapravo će dati Pošaljite gumb vrijednost pretraživanja. A sada, ako sam reload, primijetiti da moja gumb postaje zove pretraživanja. Znate, ja stvarno ne poput logotipa ovdje. Dakle, Google Font generatora. 

Želim začiniti ovaj gore dalje. Tako CS50 pretraživanja. Dopustite mi da stvorite svoj logotip. To izgleda lijepo. Pa sad neka mi spasiti ovu as-- hajde. Gdje se događa? Tu. U REDU. Propustili. Spremi kao. Glupi preglednici. Stand by, idemo popraviti ovo jednom i za sve. Idemo tamo. U redu. Oprostite. Slobodan dan. Sada je to funky. Izađite na cijelom zaslonu. U redu. 

Sada, kao što je normalno Osoba spremite sliku kao. Logo.gif. Sada ću ići u CS50IDE i Idem jednostavno zgrabite logotip, Idem ga povucite u moj izvor sedam katalog, datoteka već postoji, ja sam u redu s tim. Tako ću ga nadjačati jer već sam ga imao. A sada kako mogu dobiti osloboditi od ovoga? 

Idemo naprijed i ovdje napraviti izvor slike jednaka logo.gif. Zatvorite ovo. Spremi. A sada, ako sam se vratiti na moju pretraživanje stranica, sada je izgleda prilično dobro. U redu, tako da nema dosta učinio ništa korisno. U stvari, neka mi probati u potrazi za mačka i vidjeti što se događa. Mačke. Prokletstvo. To ne samo raditi, očito. Dakle, što je ključni dio koji je ovdje nedostaje? 

Točno, čak i ako ne znate bilo koji HTML, Počeo sam označavanje obrazac telefona i ja sam to rekao kako bi dobili ulaza, dajte mi tekstualni okvir i gumb submit, ono komad očito nedostaje? Pretpostavimo da želimo zapravo dobiti ova stvar radi ispravno. Što trebamo učiniti? Imamo potrebu za provedbu stražnji kraj baze podataka ili traženje sama motora, i da će potrajati puno vremena, iskreno. 

Pa sjetite se što smo učinili prošli put. Dakle, ako tražite nešto na Googleu a vi ste unaprijed isključen, Podsjetimo, instant pretraživanja. Dakle, dopustite mi da se uključite isključivanje tako da se ovo zapravo ponaša kao starije školske pregledniku, ako sam sada tražiti nešto poput mačke, sjetiti što je URL izgleda. To je prilično zagonetan. No, ugrađen u tu, Podsjetimo, Slash je traži. Upitnik q jednak mačke. 

A to bi, čini mi dati cijela hrpa rezultata pretraživanja. Dakle, znate što ću učiniti? Idem posuditi Google za samo minutu. Ja ću ići preko i ovdje ću reći kako to čini radnju ili odredište, da se tako izrazim, Doslovno bi trebao biti Google. A metoda sam htjela za korištenje će biti dobiti. 

Dakle, ono što je akcija? Akcija neobično je imenovan, ali to samo znači tko će nositi djelovanje tog oblika? Kad sam kliknite na Search, gdje trebala rezultat ići? I ako ja sad vratiti na moj obliku ovdje i ponovno moju web stranicu a sada traži nešto poput psa, primijetit sada Ja sam ponovno provodi Google. Pravo? 

Ako želim tražiti nešto drugo, to radi za ne samo pse, ona također radi za mačke. Ona također radi za CS50. I ok, to je samo pod whelming, zar ne? U redu, ali to zapravo radi. Dakle, što se zapravo događa? Zato sam učio preglednik, pomoću HTML, da se ulaz od korisnika i zapravo poslati taj ulaz na udaljeni poslužitelj koristeći HTTP. 

I zato moj pregledniku razumije HTTP, to je zapravo izgraditi URL tako da ono Ja završiti više u svom pregledniku, primijetiti što se događa kad sam tražio psa. Ako sam kliknite Search, primijetiti da URL mijenja kao što sam namjeravao da google.com/search~~V upita jednak psa. A to je zato što obliku zna, jer metoda je dobiti, jednostavno ga dodati na taj URL tamo. 

Sada, ove web stranice su još uvijek ružna. Tako ćemo predstaviti još jedan komad sintakse, ako možemo i danas. A to je nešto poznato kao Cascading Style Sheets. Zato mi dopustite da pogledamo ovaj primjer ovdje i vidjeti ako mi može zaključiti što se događa. To je CSS0.html. I ovo je mjesto gdje stvari dobiti malo ružno. Jer, nažalost, u svijetu web, HTML sama ne može učiniti sve. I tako, ako želite stilizovati svoju web stranicu, što je zapravo potrebno da se usredotočite na estetika u drugačiji način. Dakle ovdje, imam tijelo moje web stranica unutar kojih je veliki div. I div samo znači podjelu. Dakle, to je kao stavka, ali to nema iste semantiku od stava teksta. 

To samo znači do preglednik, ovdje dolazi veliki pravokutni područje mog weba stranica, želim ga nositi posebno. Sada, linija 21 gdje je taj div počinje. I samo uzeti pogodak. Koji je učinak linije 21 na Ostatak sadržaja stranice? To centriranje. To je sve. Dakle, nismo vidjeli način zapravo centriranje teksta. 

U stvari, moj pretraživač, za razliku od stvarnog Google, Sve je opravdano preko lijeve strane. I tako je sada u redu 21, govorim, hej preglednik, stvoriti podjelu stranice. Daj mi veliki, nevidljivi pravokutnik. Tako želim mislite o web stranici. A onda ga stilizovati kako slijedi. Unutar tih citati, Sada je drugi jezik da smo uveli i danas nazivaju CSS. Srećom, to također nije programski jezik, tako da je vrlo je ograničena u svojoj sintaksi, ali Također je vrlo ograničen u svojoj funkcionalnosti dok HTML je sve o označavanje podatke na web-stranicu i struktura web stranice. CSS je općenito otprilike Posljednji milja, estetika, uzimajući veličinu i boju i Položaj upravo pravo na web stranici. I doista, ona je formirana s ključnim parova vrijednosti. 

Nekretnina kao što je ovaj, tekst uskladiti, nakon čega slijedi dvotočka, zatim vrijednosti koje imovine, što u ovom slučaju je središte. A sada vas primijetiti Možete gnijezdo te stvari. Da sam htio sve što je u to Ja sam istaknuo da se u središtu, to je razlog zašto sam liniju 21 i odgovarajući redak 31. Ali pretpostavimo sada žele reći Ivanu Harvard, dobrodošli na moju početnu stranicu. 

Copyright simbol John Harvard. I pretpostavimo Želim prvi te linije biti prilično velika. 36 piksela. Dakle, to je pristojne veličine. I ja sam htjela svoju težinu biti hrabar. Ali onda ispod toga, Želim manji tekst. A ispod toga, želim još manji tekst. Oprostite. Danas se osjeća kao prljavo dana. 

Pa sad, što ja radim izraziti ovo? Ovdje na liniji 22 je ugrađen div ili ugniježđena div, ako hoćete. Ona također ima svoj vlastiti stil oznake. Ja odrediti veličinu fonta 36. Ja odrediti težinu fonta podebljano. Ovdje dolje, samo sam odrediti 24 piksela. I na kraju, u redu 28, sam odrediti 12. Tako je samo kao brzi check razum i kao ljudsko ovo čitate, riječi koje na zaslonu se zapravo će biti hrabar? Koje linije su zapravo hrabar? 

Samo John Harvard. Pravo? Jer baš kao što linija 22 kaže hej preglednik, ovdje je podjela na stranici. Učinite to veličina fonta 36 bod. Provjerite je težina fonta podebljano. Čim dođete do odgovarajući završna oznaka ili zatvorena oznake na liniji 24, to znači, hej preglednik, prestati raditi što god to je što radite. I obavijest da bude jasno, iako linija 22 ima sve ove atribute kao stil, kad vas zatvoriti oznaku u skladu 24, samo spomenuti ime TAG-a. 

Ne ponavljati riječ ili stil sve što je unutar tih citati. I tako, ako gledam ovo sada u svom pregledniku, uzmimo Pogled na krajnji rezultat. Pusti me naprijed na ovu sliku, što je CSS 0. I to je još uvijek prilično običan, ali uzimajući prilično zanimljiv. Ali ispada da postoji druge stvari mogu učiniti ovdje, i na rizik izrade to posve odvratan, primijetiti da se ovdje u mom Tijelo moje web stranice, Ja mogu učiniti nešto smiješno kao što su BG i boja pozadine. 

I brzo, što je tvoja najdraža boja? Zelena Čuo sam. U redu. Pa sad, ako sam pogodio reload sada, imamo zelenu web stranicu. U redu, tako da nije loše. A sada, ako želim da ovo stvarno super, ja mogu napraviti boju mog teksta čak crveno. Tako ćemo vidjeti kako to izgleda. Sada je izgleda prilično dobro. I ovdje, ako stvarno želim nered s nekim ili ako želite biti jedan od onih ljudi koji pokušava vam trik u posjeti web stranica jer ste izigrali Google u razmišljanju postoji cijela hrpa od ključnih riječi volimo-članovima da vidimo, ponovno učitati. Gdje je otišao? I tu nas. U redu. Pa kažem to kao na stranu, mi ćemo razgovarati o ovoj stvari u nekoliko tjedana kada govorimo o sigurnost, ako stvarno položiti cijeli grozdova ključne riječi u web-stranice, čak i ako oni nisu vidljivi do čovjek, netko poput Googlea, naravno, može još zapravo pronaći ovo. U redu, tako da je prilično odvratan prilično brzo. 

A u stvari, to nije sve toliko za razliku od mog weba stranica kao dodiplomski, koji Počela sam googling oko pronaći prošlošću verzije mojih starih web stranice. Bilo je jako loše. Zapravo, sam pronaći jedan neposredno prije klasi. No, tu je još gore vani. To je očito bio moj početna stranica davne 1996. godine. Očito sam mislio da je prikladno pitati ljude svoje ime prije nego što su mogli zapravo vidjeti moju web stranicu. 

A onda sam ih pokazala nešto glupo, vjerojatno. Ja ću iskopati više za sljedeći put. No, za sada, neka je razmislite malo dizajna. Razgovarali smo o stilu. I ovu stranicu i do sada gotovo sve što sam napisao je prilično čisto stilski. Ali što je s dizajnom? Pa, postoji puno redundancije u ono što sam radio ovdje. 

Ja sam spomenuo riječ Boja u nekoliko mjesta. Ja sam spomenuo veličinu fonta u par mjesta i hrabar u nekoliko mjesta. I bitno, ja sam ko druženje dva jezika. Imam HTML sa svojim oznakama i moj atributa i onda odjednom, između navodnika, imam drugi jezik danas zove CSS, što opet, to je samo Ključni parova vrijednost ili ta svojstva odvojene dvotočke. 

Ispada da je mnogo kao u C gdje smo možete početi faktor iz neki kod u zaglavlje datoteke, tako da možemo učiniti isto u HTML-u. I korak prema koja je kao što slijedi. Obavijest da je ova verzija, CSS1.html je strukturno isti web stranicu. Dakle imam hrpu od elemente DIV, ali ovaj put, sam stečen osloboditi od omot div kao što ćete vidjeti. 

I ja sam dao one tri elemente DIV top, srednji i donji, jedinstveni ID. To je lijepo, jer po davanja te podjele stranice jedinstvenih identifikatora, Mogu ih referenca drugdje. Gdje? Pa, neka mi pomaknite se gore. I do sada, bilo kada smo gledao na čelu web stranice, što je jedina oznaka smo imali u glava web stranice? Malo glasnije. Samo naslov dosad. Ali ispada da postoji nekoliko drugih stvari možete staviti unutra, jedan od koji se zove stil oznaka. Dakle, prije nekoliko trenutaka, gledali smo na stil atribut. Ispalo je da postoji stil oznaka. Spada unutar glava web stranice. A sada primijetiti što radim. Imam unutar ove Stil tag slijedeće. Ja sam doslovno spomenuti na liniji 20 naziv za oznaku koja želim stilizovati. 

Onda sam otvoren kovrčavu braće i zatvorio kovrčavu braće. Tako slični u duhu do C, ali opet, to nije u funkciji, to je samo sintaktička detalj ovdje. I onda, naravno, govorim preglednik, hej preglednik, bi cijelo tijelo stranice ima tekst poravnanje centra. A onda je rekao sljedeće. Hej preglednik, ako vidite HTML element ili oznaka u stranicu koja ima jedinstveni identifikator vrhu, tako hash znak ovdje samo znači Jedinstvena ideja vrhu, samo naprijed i da njegova veličina fonta 36 a njegova težina fonta podebljano. 

Hej preglednik, element čije ID je srednji, čine ga 24 piksela. I hej preglednik, ako vidite Ideja dna, čine ga 12 piksela. Učinak na kraju Upravo je Sam. Ako odem u CSS 1, stranica izgleda isto. No, mi smo korak prema malo bolji dizajn. Dopustite mi da se vrati ovdje da CSS2 i vidjeti što još sam učinio. 

Sada je stranica jako, jako čist. U stvari, ja mogu stati sve sadržaj na stranici ovdje. No, ono što sam nova oznaka uveden, očito? Veza. I to nije najbolji naziv za oznaku, jer to nije veza u smislu da mi to znamo, ali to znači link na neke druge datoteke. To je vrsta kao što su oštri su u C. 

To je način na HTML reći hej preglednik, idi na sadržaj file zove css2.css. Odnos, za mene, je da je stil list. I doista, to je ono što je jedan od S je u CSS sredstvima. To je stil list. To je samo tekstualnu datoteku koja sadrži cijela hrpa imovine. To je cijela hrpa stilova da želite prijaviti na stranicu. 

I tako to očito je se odnosi na drugu datoteku. I ako sam otvoriti tu, CSS2.css, primijetiti da je sve što sam učinio je kopirajte i zalijepite sve to u ovu datoteku. A sada, čak i ako ste nikada kodirano ove stvari prije, Samo razmislite s poslovični inženjering šešir o, zašto je to Bolje dizajn vjerojatno? Faktoring iz tih CSS svojstava, stavljajući ih u vlastitu datoteku. Iako smo riješiti ovaj Prije problem kao pet minuta u prvom verzijom. 

Nismo poboljšana Stranica stilski, ovo je samo bolje Dizajn u nekom smislu. Zašto misliš? Da. Fleksibilniji kako? Da. Dakle, ako želite ići natrag i promijeniti stvari, Sada, imate jedno mjesto gdje možete mijenjati stvari. A u stvari, nešto kao što je problem postaviti sedam, gdje ćemo implementirati trgovanje dionicama web stranice, koji će imati cijela hrpa stranica. I to bi bilo stvarno neugodno ako se odlučite, hm, Ja stvarno ne volim 24 piksela, želim da bude 28 piksela ili malo veći. A onda morate učiniti Globalna pronaći i zamijeniti ili otvoriti sve Vaše web datoteke jednostavno zapravo mijenjati jednu vrijednost. Faktoring tih stilova na jednom središnjem mjestu, sada možete otvoriti jednu tekstualnu datoteku u CS50IDE u bilo kojem programu, to promijeniti, spasiti ga, i učinio. Vi ste propagiraju one Promjene posvuda. I to bi bilo isto u dot h datoteke kao dobro. Tako da bilo pitanja na taj način daleko na ovoj sintaksi? U redu, tako da smo učinili sve što čini osim zapravo provesti hiperveze. I tako idemo naprijed i učiniti. Dopustite mi ići naprijed i stvoriti novu datoteku ovdje. Idem ga nazvati link.html, staviti u današnjem koda. 

I ja ću učiniti otvorena Nosač tipa doc HTML. Kao na stranu, ove stvar u vrh, to doc tipa deklaracija, to je jedini koji je čudno s uskličnika. Vi samo morati to učiniti tamo i to znači da se pomoću HTML verziju 5. Starije verzije Jezik je imao mnogo više žice koje su potrebne da se stavi tamo. Dakle ovdje je primjer zove veza. 

Trebam tijelo moje web stranice ovdje. I ovdje, a href jednaki recimo HTTP://www.disney.com i moja omiljena web stranice, mi ćemo reći. U redu, tako da vrlo neškodljiv, user friendly stranica. Ako ja sada ići u moj direktorij popis ovdje i otvoriti link.html, imamo hiper teksta. 

I doista, ovo je mjesto gdje H u HTTP dolazi. Protokol za prijenos hiperteksta o prijenosu tekst koji ima hiperlinkove na druge resurse. I doista, ovdje je poznato, ako je retro, plavi link koji, ako se pritisne, zapravo će me dovesti do Disney.com. Sada, oh, da dolazi uskoro. U redu, tako da sada, što su neki implikacija ovo? 

I iskreno, svijet počinje da se malo više upoznat i malo strašnije ali i malo više sebe braniti nakon što počnete razumjeti ove stvari. Budući izgledi su, neki od vas, ako idete kroz svoj Gmail spam folder ili čak Vaš inbox, vjerojatno ste dobivši nekakvu e-mail da pita da promijenite Lozinka možda ili možda provjeriti Vaš PayPal vjerodajnice ili sitnica. 

A u stvari, možda ste primili nešto što govori poput klikom ovdje resetirati vašu lozinku PayPal. A sada, primijetiti, ako to nije Disney.com ali kao i badplace.com reload, imajte na umu da tekst ovdje Moglo bi se reći ništa god. A u stvari, to je samo riječi. Zašto ne ja zapravo biti super zlonamjerne i reći http://www.paypal.com. 

Kliknite ovdje resetirati vaš PayPal lozinkom i sada ponovno učitati. To izgleda prilično legitimno, zar ne? Mislim, ne bih kliknite na e-mail koji samo kaže. Ali primijetite dihotomiju ovdje. Ona kaže www.paypal.com, i zapravo, čekaj malo, Znamo da želite S za sigurnost. Tako sada, idite na www.paypal.com HTTPS, ali ako ste nikada nije to učinio prije, ne dobiti u naviku lebdeći nad malim linkove ovdje. I to je teško vidjeti na zaslonu tamo, i to nije sve što jednostavnije ovdje. Ali ovdje putu prema dolje u maleni kutak čini preglednik zapravo te da idemo reći da badplace.com umjesto paypal.com. Sada, gdje ćemo s tim? Svi primjeri koje smo učinili danas, Teško mi smo kodirani i upisali ručno. Web je nevjerojatno nezanimljivo kad vam je teško kôd svoje web stranice, tako da sadržaj je statična i ne mijenja. Naravno, svi naši omiljene web stranice danas, da li je Gmail ili Twitter, ili Facebook ili bilo koji broj drugih su dinamični. Oni mijenjaju u odgovor na unos korisnika baš kao i Google rezultata pretraživanja. 

I tako je u srijedu, što radimo je napuštamo HTML i CSS uvod iza nas i mi se zdravo za gotovo da se sada to znaju i uvodimo novi programski jezik zove PHP, koji vole C će nam dati moć zapravo stvoriti programe da sami generiraju izlaz. U ovom slučaju, mi ćemo se pomoću PHP generirati dinamički web Stranice koje koriste ovaj novi jezik. Dakle, više o tome u srijedu. Vidimo se onda. 

[Glazbom]