[Predvaja glasba] 

DAVID J Malan: To je CS50 in to je začetek 7 teden. Torej, dobrodošli nazaj. In se morda spomniš, da v problem nastaviti štiri, je bilo malo smetar lovski revir za nekatere bajen nagrade, pri čemer ko izterja fotografij Osebje tu in v New Haven, ste bili izzvani, da najdejo čim več ti računalniški znanstveniki, kot ste lahko. In imamo cel kup vlog. Mislil, da sem deliti nekaj z vami sem danes tukaj. 

In bomo objavili vse to na spletu. Ampak predvsem sem želel Opozarjam vas to-- vodnjaka eno, Sam je bil v kar nekaj izmed njih na splošno pomenijo, kot je ta. Vendar se zdi, da je od to jutro, zmagovalec je bila neka oseba z imenom Ken z 24 uslužbencev ujeli na kamero ali nekaj več, ko ste vzeli v račun večkratnega zaposlenih v slikah. Na sliki je Ken Naslednja Mariji v New Haven. 

Zdaj, Ken, čeprav, obrne ven je malo primeru kota da se še ni zgodilo. Izkazalo se je, da ne pride do mi dal drobni tisk v problemu nastavite štiri, ki pravi, da so zaposleni neupravičeni za bajen nagrade ker Ken je seveda eden fotografi na naše osebje. Zdaj, s tem je dejal, da je sprva mi je pisal reči prosim ne objavite te fotografije na spletu. Mislim, da je v veliki meri ker večina fotografij da je ta fotograf je videti malo kaj takega. In podobno. 

Vendar bi Ken všeč mi je, da vas pomirim da je on zelo dober fotograf, Rojen je strokovno, je potrebno Fotografije, ki niso zamegljene, da so boljši v fokusu, in je je kar nekaj lastnega osebja. Toda namesto da samo priznati Ken, kar smo mislili, da smo bi naredil je šel skozi seznam Dejanski študenti, ki so predloženi. In se izkaže, da je Lance s 15 fotografij, kot to jutro je bil naš zmagovalec. 

In na sliki, je Lance s Colton, z Skaz, s samim seboj in s Samom. Ampak potem se je izkazalo, da je od 11:46, tako da samo malo nazaj, Šel sem nazaj na moj email in ugotovila, da smo imeli še eno oddajo študent z imenom Bonnie samo to čigar email dejal. Ne bom lagal, da sem tem v razredu. In potem je nadaljeval, da samo priložite 14 fotografij, ena sramežljiv Lance je 15. 

Toda v Bonnie na fotografijah, se izkaže ven je bilo več članov osebja, Sam med njimi, tako da tisto, kar smo mislili, da smo bi naredil je priznati oba. Torej poleg pridobivanje Dropbox prostor, da vsi, ki so sodelovali prejme, bodo tudi ti dve poglavji prejmejo lepo poskrbljeno kosilo za njih in njihova odsek Mates ta prihajajoči teden. In tako boste slišali od nas, Lance in Bonnie, o tem. Tako velike Čestitke za njih. Zdaj, tiste, ki bi kot je kosilo bolj na splošno vem, da je CS50 kosilo v Cambridgeu in New Haven, je ta petek. Pojdi na CS50 spletno poševnico RSVP. In sedaj beseda o seminarjih. Več curricularly. Torej smo bliža točka semestra kjer bi morali začeti razmišljam o končnih projektov. In v resnici, v samo bit, bo tako imenovani pre predlogi zapade. Torej pre predlogi so namenjeni precej majhen vpliv in res samo priložnost za da si sestavite kratko opombo Vaše poučevanje kolegi da seznani mu ali ji kaj vas razmišljanje morda želeli storiti za svoj končni projekt. 

Zdaj, mnogi študenti končajo delaš spletno končnih projektov. In seveda, mi smo samo Sedaj je prejšnji teden v ta in pozneje potapljanje v spletno programiranje. Torej, ne skrbite, če vas sploh ne vem, kako bi graditi ideje, ki imate morda v tvoji glavi. To je res samo silijo funkcija da bi vas razmišljanje in govorjenje s svojim TF o tem. Ampak, da vam pomaga s tem, in s končnim projektom nenazadnje, vem, da ima CS50 tradicijo ponujajo seminarje. 

In ti so neobvezna, na roke, ali predavanje, ki temelji na možnostih Če želite izvedeti več o temah, ki so malo pomožna tečaj je učni načrt, vendar je kljub temu čudovit Material za vožnjo končnih projektov. In tako je ta seznam, ki je Osebje CS50 tukaj v New Haven so prišli do za letos pa iOS programiranje, Android programiranje, razvoj igre, in grozde več orodij in jeziki in tehnike. 

Torej pazi na spletni strani CS50 je. In v tem času, če želite, da če vas zanima, v katerem koli od teh, pojdite na CS50 je poševnico register. In bomo potem nadaljevanje kot na dnevi in ​​časi letov in lokacije in everything-- večina bo vse biti pretočili in na voljo tudi na povpraševanje potem, če ne morete dejansko uspelo. Torej, brez odlašanja, smo končal zadnji čas z GET. 

In to je bilo, kot je sporočila, da je bil znotraj virtualnega ovoja, se spomni, da smo opravili od usmerjevalnika do usmerjevalnika Usmerjevalnik med spletnim brskalnikom in spleta strežnik. In to sporočilo pogledal malo kaj takega. To je bilo bolj Skrivnosten sporočilo, ki je dejansko znotraj ovojnice napisana na kos papirja, katerega Prva vrstica pravi dobesedno, dobili poševnice. 

In prav tako kot preverjanje razumnosti, kaj je slash pomenita? Kaj slash pomeni, ko zahteva spletno stran? Zahtevate ga ves čas. Najbolj vsakič, ko obiščete spletno stran, ki jih pa dejansko ne vnesite ime datoteke. Verjetno ste pojdite na Facebook.com, vstopijo, gmail.com, ali podobno. In kaj slash predstavlja? Kakšne datoteke? Ali kaj stran, še posebej? 

Indeks, ja. Torej privzeto stran. Torej, če ne navedete datoteko ime kot bomo začeli videti, ste dejansko zahtevajo le daj mi privzeto stran Facebook ali naj mi Prejeto ali dati me privzeta stran novic na spletni strani CNN ali podobno. In strežnik se nato odzove na da sporočilo z nečim kot je ta, ki pravijo, da sem govorijo HTTP različico 1.1. 

200, ki je status koda, da smo ljudje le redko kdaj videli, ker je dober. Ker to pomeni, OK, zahtevek je bilo prejetih in pravilno ravnati. In vrsta vsebine očitno v odgovoru je precej pogosto, vendar ne vedno, besedilo. In še posebej, HTML. In to je pravzaprav kjer gledamo danes. 

Torej v resnici, sem šel naprej in odprla brskalnik. Bom uporabljate Chrome, lahko uporabite Najbolj nobenega brskalnika v prihodnjih tednih. Mi na splošno priporočamo, Chrome ker je zlasti dobro za razvijalce programske opreme. Ima veliko vgrajenih orodja, ki olajšajo razviti ne samo HTML in CSS, Stvari bomo začeli govoriti o danes, ampak tudi druge jezike, kot dobro. 

In bom, da gredo naprej in iti to-- Jaz grem na nadzorno klik ali desni kliknite kjer koli na spletni strani. In sem šel k Preglej element. In jaz grem na poteg my Zaslon samo malo tukaj. Naj premakniti to do dna. Torej je to, kar se imenuje Inšpektor Chrome. Torej, to je kot razhroščevanje Orodje vgrajen v Chrome. 

Vsi vi že imate to Če ste bili z brskalnikom Chrome. In to vam omogoča, da vidite, kaj se dogaja na pod pokrovom neke spletne strani. Torej, kaj je dejansko traja poglej to takole. Ima način več funkcij in skrbimo danes. Ampak tam je teh kartic tukaj. Elementi, omrežje, viri, timeline, in nekatere druge stvari. Grem, da kliknete na Omrežje za trenutek. 

In to je malo veliko na prvi pogled tukaj. Ampak kaj bom storiti je pustiti me je malo poenostaviti. Grem, da vklopite snemanje svetlobe, tako da je rdeča. In bom rekel, ohranitev dnevnik. In to je le malo stvar, ki sem pogruntal čez čas, da se dogaja, da shranite vse, kar se dogaja v brskalniku. In zdaj bom šel da http://facebook.com. 

Pravzaprav, kaj je naredil www za dober ukrep, poševnica. Enter. Torej URL, da je veliko ste morda obiskali. In zdaj Facebook je spletna Stran pride na vrhu. In potem cel kup stuff letel ga na dnu. In v resnici, se izkaže, da ko obiščete facebook.com, ste ne samo kar eno zahtevo HTTP, se izkaže, da gre za Facebook.com pošlje 41 teh ovojnic, vsaka s svojo lastno zahtevo get, Kot je navedeno, čeprav za zaslonom tod na dnu zaslona to pomeni, da je res, moj Brskalnik je 41 zahtev. 

In skupaj, da prenese 861 kilobajtov in to je iz neznanega razloga kar osem sekund prenesti vse to. Tako da je pravzaprav malo čudno da bi stran Facebook je sprejeti, da dolgo, ampak naj bo tako v tem primeru. Zdaj pa vse to ne briga o razen najvišjem zahtevo. Torej, pojdimo na tale tukaj in mi pomanjšati samo za trenutek. 

In mi povečate na to. Torej, kaj sem naredil na levo, čeprav tam je veliko dogaja tukaj se sem izpostavil Facebook.com in nato opazili, da sem drsenje navzdol, drsenje navzdol, drsenje navzdol, zahtevati glave. In videli boste, da Chrome kaže me v bistvu notranja vsebina z zahtevo sem naredil. To ni formatiranje v povsem enako način, ampak obvestilo, da je omemba dobili, Opazili pa je omemba gostitelja, Facebook.com, pot, ali slash, ki je datoteka sem zahteval. 

In potem, če sem se pomaknete nazaj gor, bomo dejansko videli, da tisto, kar je vrnil Facebook se mi je vse te glave. Torej znotraj tega virtualnega ovoja res veliko parov vrednosti ključev. Beseda, dvopičje in nato vrednost. Beseda, dvopičje in vrednost. To so imenovane glave. In tam je pot več podrobnosti tukaj kot smo dejansko skrbi zdaj. 

Ampak to je v drugem zadnja tam dol, opazili, da facebook.com strežniku, res rekel tukaj prihaja nekaj besedila HTML. Torej vse to se pravi da ko zahtevate web Stran iz brskalnika zavarovalnici za Strežnik, da strežnik odziva s kuverto svojo lastno znotraj katerega je besedilo. Z drugimi besedami, HTML. HyperText Markup Language. Kateri drug jezik da bomo predstavili danes da ljudje ali računalniki ustvarjanje Za izvedbo spletne strani. 

Natančneje, oglejmo to. Bom zdaj iti nazaj na spletni strani Facebook je. In jaz bom samo Nadzor klik ali desni klik in kliknite na gumb Ogled vira. In tudi če ne uporabljate Chrome, IE lahko to stori, lahko Firefox to, Safari lahko to storite, čeprav meni Možnosti lahko izgleda malo drugače. In to je HTML, da je Mark in družba na Facebooku napisal. 

In kolektivnih, ta jezik tukaj izvaja modro in belo stran da smo videli pred nekaj trenutki. Zdaj je to malo prepričljivo. Ampak, če pogledamo gor v zgornjem levem kotu, smo bodo začeli videti nekaj vzorcev. Izgleda, da je veliko od teh odprtih kotnim zaklepajem in potem je ta ključna beseda HTML. Tukaj je še odprto Kot nosilec in glava. 

Tu je, če smo se pomaknite navzdol in dol in dol, sem dogaja, da gredo naprej in poskusite za iskanje nečesa. Obstaja način, kot na desni tukaj je odprt oklepaj telo. In spomnim od lani Čas je, da predlagana da najpreprostejši spletne strani da bi človek napisati lahko izgleda malo nekaj takega. Odpri HTML tag, odprta glava tag, odprt naslov tag, Nato se zapre naslov, zaprta glava, odprt telo tag, nekaj besedila, zaprta karoserija, zaprto HTML. 

Ampak premor tukaj samo za trenutek. Ta koda, tudi če ste Nikoli ga napisal pred vendar še vedno ne razumem povsem, kaj se dogaja, izgleda precej dobro. V redu, to je zelo čista. To je zelo stilsko lepo. Veliko vdolbine in belega prostora. Facebook je ni. Torej, zakaj je Facebook toliko slabši od mene pri pisanju HTML? Očitno. 

V redu, to je kot eno od petih za slog. Tam je prepričljiv razlog za njih zmanjšati te kotičke. Vse je v redu, tako da ne želijo da bi bilo lažje za vas, da ga preberete. Torej v nekem smislu, oni ga obfuscating, nekako ga kodiranja vsaj estetsko tako da je težje za Myspace iti in iztrgati svoje Domača stran in HTML za to. Izkazalo se je, da s programi čeprav, vključno Chrome bomo lahko to pospraviti super enostavno. Torej, to ni čisto tako, kot razlog. Kaj drugega bi lahko bilo vzrok. Ja. Ja, podatki bele stroški prostora. Kaj misliš s tem? Ja, točno. Če ste zadeli tipko Tab veliko ali preslednico, upoštevati posledice. Torej vsaka tipka na tipkovnici je [Neslišno] zastopali en bajt. 

Torej domnevam, da je Mark ali katerokoli Devs te dni hits preslednico samo enkrat V tej HTML stran, ki predstavlja Facebook domačo stran. Facebook in ima veliko uporabnikov teh dneh. Torej domnevam, da je Facebook je domača stran je obiskalo milijarde ljudi danes. In nekdo na Facebooku ima hit preslednico samo enkrat. 

Torej en dodaten bajt, milijarda zahteva, koliko več podatkov je Facebook prenos preko interneta ker je nekdo udaril preslednico na svoji tipkovnici? A milijardo bajtov, ali en gigabajt Podatki, ki se pošiljajo iz Facebook strežnikov ljudem okoli svet brez pravega razloga. No, to je samo en prostor. 

Predstavljajte si, da smo dejansko čisto ta stvar in jo zamaknjeni in dodal veliko beli prostor zavihek znakov in presledkov, boste na koncu gigabajtov porabe, če ne terra bajtov več prostora. In tako super pogosti v Dejanski svet razvoj spletnih je Minimiranje kodo. In bomo sčasoma videli kako lahko to storite. 

Ampak danes, bomo začeli pisati kodo da je dejansko berljive z nas ljudeh. Izkazalo se je, čeprav, če greš nazaj do tega orodja v Chrome Preglej element, prej, smo bili na jeziček Network. Izkazalo se je, da če greš na Zavihek elementi, kar si dejansko videli Chrome je precej tiskani različica istega HTML. Zato smo jo deobfuscated. Torej, to ni tekma za računalnik. In zdaj si lahko dejansko kliknite okoli in začnite videti hierarhijo, da je spletna stran. Torej, kaj je zdaj to narediti. Grem, da gredo naprej in odprli na moj Mac program, imenovan besedilo uredi. In opozarjajo, da je to le super preprost program besedilo. Windows ima notepad.exe. In bom dobesedno vnesite naslednje. Doc tipa HTML, odprt oklepaj HTML, zaprt nosilec HTML, imamo glavo strani tod Konec glavo strani tod naziv bo všeč, Hello World. 

In potem sem dol, moramo telo spletne strani. Zaprta karoserija. In potem je tukaj, zdravo svet. V redu. Zato smo napisali super hiter spletno stran. Jaz grem, da ga shranite kot hello.html na mojem namizju. My Mac se dogaja, da se pritožujejo, misleč, da, počakaj malo, To je besedilna datoteka, storite hočeš, da ga pokličete .txt? Ampak ne, želim uporabiti dot HTML. 

In kaj potem je lepo, če sem samo dvojno kliknite na to datoteko, hello.html, tukaj je moja spletna stran. Na žalost sem edina oseba na svetu ki lahko obiščete to stran zdaj. Ker kje je živel očitno? To je na mojem Mac, kajne? Ki je neuporabna. Tako kot nihče v tej sobi kaj šele na internetu dejansko lahko obiščete to stran. Torej, danes, moramo uvede drug element. 

In za to, grem na iti naprej in se odprejo, oblak 9. Torej, oblak 9 je seveda cloud temelji service-- CS50 IDE-- To je vse naše delovne prostore teče nekje na internetu. In to pomeni, da vse naše datotek so že javno dostopni. Torej, gremo naprej in to storite. Grem, da gredo naprej in ustvarite novo datoteko NCS50IDE. Jaz grem, da ga shranite kot prej kot hello.html in kliknite Shrani. In zdaj samo za prihranek časa, bom da gredo naprej in kopirajte prilepite to kodo namesto da bi jo znova natipkati. In jo shranite. In zdaj imam datoteka z imenom hello.html. Ampak, kako sem dejansko odpreti kot spletno stran? No, se izkaže, vgrajeno na CS50 IDE ni le prevajalnik kot Jek in razhroščevalnik kot GDB in grozde drugih programov, tam je pravzaprav v celoti razvit Spletni strežnik teče v CS50 IDE. 

Vsi vi, to je, imajo svoj spletni strežnik. In spletni strežnik je le kos programske opreme, katerih namen v življenju je, da služi up spletne strani. Poslušati zahteve brskalnikov in odzvali z malo virtualnih ovojnic znotraj katere je Vsebina, ki sem jih napisal. Torej, to spletni strežnik je dejansko brezplačen in open source. Kadar je open source pomeni le programska oprema, ki ima nekdo drug zapisano, da vse nas lahko dejansko videli in prenesete in celo spreminjanje izvorne kode. In se imenuje Apache. 

In smo ga naredili malo lažje uporabo v CS50IDE, da ga kliče Apache 50. Tako da se lahko dejansko razumeti naslednje. Jaz bom rekel, Apache 50 začetek. In potem sem samo reči piko. In smo videli nekaj nekoliko Skrivnosten sporočilo: nastavitev Apache je dokument [? skupina?] domu, ubuntu, karkoli že to je, poševnica delovni prostor. Zagon spletni strežnik Apache uspešno 2. 

Torej skrajšam zgodbo, sem so samo potisne gumb in se obrnil na spletnem strežniku, ki je sedaj poslušanje na internetu na vratih TCP 80 na določenem naslovu. In tukaj piše, in se bo to spremenilo Based na vaše uporabniško ime in drugih dejavnikov, ampak obvestilo, zdaj, če sem kliknite to, IDE50 dot jharvard in tako in tako, opazili, da se vsem tem času V zadnjih nekaj tednov, boste morda morali opazili, da svoje uporabniško ime je vgrajen v zgornji desni roki vogal CS50IDE. 

In dejansko je bilo vse to čas, naslov, na katerega lahko obisk vseh vaših datotek preko spleta. Do sedaj, ni važno, ker v C, ki jih običajno želijo stvari poteka v terminal, ni na spletu. Ampak danes, začnemo pisanje spletnega kodo da si želimo dostopne na javnih spletnih naslovov. Torej, kaj bom storiti je, kliknite ta URL. 

In opazil, da vidim precej grda indeks, imenik seznam, ampak kaj datoteka skoči ven na vas verjetno? Hello.html. To je zato, ker sem prihranil datoteko v mojem delovnem prostoru. In tisto, kar sem povedal, Apache spletnega strežnika se poglej v delovni prostor imeniku Davida. In naj nikomur v svet vidi te datoteke. 

In res, če bom zdaj kliknite na hello.html, Vidim v tem zavihku natanko te datoteke. Zdaj opazili, oblak 9 počne nekaj malo koristno za nas. V CS50 IDE, obvestilo pa je nenadoma naslovna vrstica. To je zato, ker, čeprav smo uporabo Chrome obiskati CS50IDE, notranjost CS50IDE je njegova lastna različica spletnega brskalnika zdaj. Tako namesto zapletajo stvari, kot na primer, Grem, da gredo naprej in samo kopirajte ta URL. Grem, da gredo naprej in samo odpreti svoj lasten Chrome okno. Torej ni čarobna tukaj, ne CS50IDE. Jaz sem le, da bo dobesedno prilepi moj J Harvard URL in pritisnite tipko Enter. In voila, zdaj jaz, in v teoriji, vsakdo na internetu, če sem nastavljen Dovoljenja za ustrezno, lahko obiščete to datoteko. In zdaj, če sem rekel hello.html, voila, tam je moj neverjetno underwhelming spletna stran. Torej, kaj je naredil pregled hiter prištevnosti. Ker vse to je konceptualna set up. In smo jih dejansko ni res naučil, kako pisati HTML per se. Vsa vprašanja doslej o tem, kaj se je pravkar zgodilo? Da. Ali CS50 lastnik te spletne strani? V kakšnem smislu? Dobro vprašanje. Torej CS50 je lastnik CS50.io. Mi smo res kupili to ime domene. In po naravi vaju prijavi v CS50IDE, ste vsi dobili tisto, kar se imenuje poddomena. 

Torej IDE50-Malan, ali IDE50-Rob.CS50.io, da je vaš edinstven naslov v naše ime domene. Torej v smislu predmeta imate svoj edinstven naslov. Ampak smo poenostaviti stvari, ki jih nakup domene vrhnjo CS50 dot I / O in potem vsi ostali, je notranjost, da se tako izrazim. In bomo prišli nazaj na to v nekaj tednih verjetno, zlasti na končni projekt Čas, ko se nekateri od vas morda želeli, da bi dobili svoje domenskih imen. To je pravzaprav relativno enostavna. V redu. Torej, kaj je zdaj to. Jaz bom šel nazaj v CS50IDE, kjer mojo kartoteko prav zdaj, hello.html, ni vse, da je zanimivo. Rad bi, da narediš nekaj malo lepše, kot je. Torej bom naredil kaj takega. Dovolite mi, odprt paragraphs.html. Torej je ta datoteka sem napisal vnaprej. Na vrhu je, kot Vedno smo imeli pripomb. Toda v HTML, komentarji poglej malo drugačna. On line tri in linijo 14, ki jih glej skladnjo za začetek komentar in na koncu komentarja. 

Ampak nobeden od stvari v Med zadevami, funkcionalno. To je samo opomba k človek, kaj se dogaja tukaj. In prav tako hitro duševno zdravje preveri, če sem se pomaknite navzdol, kaj je očitno nova tag, ki smo jih uvedli? Tako daleč smo videli oznake so odprte nosilec HTML, glava, naslov in telo. Toda kaj je zdaj očitno novega? 

Ja, str. P tag ali odstavek tag. In potem sem samo sposodil nekaj privzeto Latinščina besedilo predstavlja moje odstavke. Ker tisto, kar sem želel pokazati, kako boste morda predstavljajo odstavke besedila v HTML. In kaj se začenja dogajati tukaj je, da je že vzorec razvija. In naj me iti naprej in to storite. Dovolite mi, da najprej izključite Apache. In bom to povedal, da se začnete spet notranjosti današnje vira sedem m imenik. Tako, da imam dostop do vsega. 

In zdaj, če grem nazaj ta imenik kotacijo, Opazili vidim vse datoteke iz danes. In boste videli v Naslednji problem set, bomo vam dal navodila Za počne točno to. Če odprem paragraphs.html, bi to lahko kakor tudi videti kot programskega jezika za vas, če ne govorite ali brati latinščino. Toda to je le tri odstavke besedila, ki so označeni v HTML. 

In obvestilo odstavek odmori med njimi. Ker se je izkazalo, in čeprav vas morda nagnjeni, da to storijo, ker je v realnem svetu, Če želite, da bi linijo odmori med stvarmi, boste morda preprosto to stori, in hit Shrani. In zdaj, če sem osvežite tukaj, obvestilo da je vse samo zamegljuje skupaj V samo enem madeža besedila. Ker HTML je nekako neumno jeziku. 

Namenjen je za uporabo v tak način, da bo brskalnik le narediti jasno, kaj vam je povedal, da storiti. Torej, če ga ne povem daj mi nov odstavek, ne boš videti nov odstavek. In dejansko kaj Brskalnik bo storiti tudi če ste zadeti nastopiti, recimo, znova in znova in spet, premikanja besedila pot navzdol po zaslonu in nato shranite in nato osvežite, brskalnik se dogaja kolaps vse te belega prostora v samo eno, vidno presledkov. V redu. Torej, to je točka tag. In kaj je vzorec da se razvija tu? No, zdi se, da se zgodi, da HTML je vse o začetni oznako in konča oznako. In kaj je oznaka? No, to je samo kos sintakse. Odpri nosilec, ključne besede, zaprt nosilec, je oznaka. Ali začeti oznako. In potem, ko ste storiti izražanje sebe, kot ste končali z odstavkom, vam tako rekoč nasprotno. Ampak nasprotno ni povsem nazaj. 

Vi preprosto predpono isti tag je poimenovati s poševnico, kot je ta. V redu. Torej ni vse tako vznemirljivo. In v resnici, ne bomo zaradi česar je Spletni vse to bolj zanimivo. Kaj pa, če želim, da bi Stvari večji in drzne? Tako se izkaže, da tu je primer v headings.html, kjer je v mojem telesu, Imam H1 tag, H2, H3, štiri, pet ali šest, od katerih so vsi zdi precej Skrivnosten. Ampak, če sem šel odpreti to Na primer, vzemimo pogled. Headings.html. 

Tako lahko brskalniki privzeto vam besedilo da je velik in krepko neenakih velikosti. H1 je velika. H6 je manjši in nato vse ostalo vmes. Tako, da je zanimivo, vendar še vedno ni res web vem. Kaj pa, če želimo, da imam nekaj podobnega seznama. . Torej, tukaj je označen seznam z tri Harvard hiš. 

Kako ste se lotili tem? No, si oglejte list.html. In tukaj, smo videli malo funkiness ampak kaj je razmisliti, kaj se dogaja. Torej, ki temelji na tisto, kar ste pravkar videli, UL je kratica za neurejen seznam. Neurejen seznam pomeni samo oznakami. Tukaj ni Å¡tevilke. Tam je tudi nekaj, kar se imenuje urejen seznam, ki je OL na oznako. Potem LI, seznam postavka je vse to pomeni. 

In naj bo tako samodejno številke vse za vas. Ampak še enkrat, vse moje vdolbine in beli prostor je samo za mene. Brskalnik ni dejansko dogaja, da je vseeno. Torej, čeprav si ne bi mogla to storiti, samo da bo jasno, vam ni treba, čeprav bo brskalnik še vedno biti sposobni razumeti čisto v redu. Jaz sem hitting reload v moji brskalnik, sem kliknite Reload in ne spremembe se dogajajo ker brskalnik še vedno počne točno to, kar sem povedal, da storiti. 

V redu. Torej je to vse samo besedilo. Zdaj pa dajmo narediti nekaj bolj zanimivega. Grem, da gredo naprej in sposoditi nekaj tega HTML. Grem, da gredo naprej in ustvarite novo datoteko tukaj. In bomo to imenujemo rick.html. Imamo nesorazmerno Rabljen nekaj imenuje Rick roll v tem Razred letos, ne vem, je pravkar zgodilo organsko. 

In zdaj se je ušel iz nadzora. Tako da sem le, da bo šel z njo. In če grem na Google Slike in Rick Astley. Če ne veste, zakaj delamo to, samo bral o Wikipediji. Vsakič, ko ste kliknili na povezavo, nekdo je bil smeh nekje. In mi gredo ahead-- tam gremo, dajmo to sliko. 

Torej, tukaj imamo slik v Google Images. In kaj je domnevati, da je to razumno povsod na internetu. Tako da bom za domnevo, da je v redu za mene dejansko dal to v moji spletni strani. Grem, da gredo naprej in kopirajte URL slike. In zdaj, če grem nazaj v oblaku 9, poglejmo, kaj lahko storim tukaj. Torej, tukaj je samo spletna stran. To je Rick Astley, haha, Bom zdaj iti nazaj na mojem brskalniku, osvežite in zanimivo. 

Kje je Rick? Torej, da vidim, kaj se je zgodilo. Pravzaprav, bom pretvarjati, da nisem naredil. [Neslišno] ga dal noter. Bomo prišli nazaj, da je v tem trenutku. Torej, tukaj je rick.html. Torej to ni Rick Astley. Tako se izkaže, smo lahko ga dejansko dodate tukaj. To je Rick Astley. Jaz bom rekel, da mi sliko, katere vir je URL sem kopiral, ki očitno je srečen rojstni dan nekaj, ali drugo. 

In zdaj bom zaprite oznako, kot je ta. Torej je to zavijanje super dolgo. Ampak obvestilo, da je vse, kar sem imel storiti je odprt nosilec podobe, vir z atributom to. In to je res dolgo URL. In čisto na koncu, opazijo. Zakaj sem naredil slash kotna konzola namesto da bi, tako kot vsako drugo oznako, ima odprt nosilec, IMG, zaprt nosilec? Samo ugibati, tudi če ste ne poznam whatsoever HTML prej. 

Tako je, kako se zapre ukaz, ampak zakaj ne res intuitivno občutek, da narediš nekaj malo bolj zgovornega kot neposredni sliki? Ja. Ja. Samo pomensko, ni občutka začenši sliko in konča sliko, to je bodisi tam ali pa je ni. Tako da nima smisla, da zapusti vrzel za kaj drugega znotraj slike. Ne moreš narediti. In tako sintakso bi na splošno lahko samo storiti poševnico notranjosti odprte oznako ali začetnem tag in nato pritisnite Shrani. 

Torej, če sem zdaj osvežite to datoteko, zdaj Imam dober spletni strani kuhanje tukaj. In smo lahko zagotovo res nagajati ljudem s namesto embedding kot povezavo YouTube. In dejansko kadarkoli ste kdaj šli na YouTube, in me pustil pravzaprav po naključju rick roll sem tukaj. Torej Rick roll. Torej Rick roll-- bom iti tukaj. 

[Predvaja glasba] 

OK, ena oseba všeč, da. Tako opazijo ves ta čas, če vas kliknite Share povezavo, vam seveda dobili URL, ki lahko dejansko vlagati v elektronski pošti ali forenzične slike ali v problem nastaviti ali diapozitiv. In zdaj, če sem namesto kliknite na embed, obvestilo, da ves ta čas, ta stvar je bil tam. Grem, da gredo naprej in kopirati to. 

In samo zato, da bomo lahko videli bolje, da sem tekoč, da ga prilepite v mojem urejevalniku besedil. Obvestilo, da je to tisto, kar YouTube je bil ti govoril. Vsakič, ko obiščete YouTube video, če vas želite vlagati video na vaš spletna stran, preprosto zgrabi to. Torej je to še en HTML tag imenuje iframe. Ali v vrstico okvirju. Torej je tudi izgleda malo bolj zapleten, kot vse druge. Tako se izkaže, da je na sliki tag in očitno iframe tag vzeti kaj so imenovani atributi. 

In to je še kos skladnje HTML. Poleg tega, da je oznaka je ime, odprti oklepaj ime oznake, lahko nadzorujete vedenje tag ki jih imajo cel kup atributa enako vrednost. Lastnost enaka vrednosti. In tako, na primer, YouTube se nam povedali Če želite širino tega videa biti 420 pikslov in višina biti 315 slikovnih točk, ki je kako ga izraziti v HTML. 

Vir video bo da bo tako dolgo YouTube URL in še nekaj drugih stvari kot okvir meja je nič, tako da verjetno pomeni, da je No Border okoli stvar. Dovoli poln zaslon verjetno pomeni, da uporabnik lahko s klikom na gumb in dejansko celozaslonski video. Torej, če si res želim, da bi impresivna tukaj v Rick dot HTML, namesto da uporabite oznako slike, naj me izbrisali, da prilepite to. In zdaj osvežite. In tukaj smo spet tam. V redu, to je dovolj. Vse je v redu, da bom poskusil težko, da ne bi naredil še enkrat. Torej, kaj so nekateri od takeaways tukaj? Torej HTML, tako grdo, saj teh spletnih straneh so, je pravzaprav zelo preprost. To ni programski jezik. Nima funkcije. Nima zank. To nima pogojev. Vse kar je na ducate različne oznake, od katerih je vsak ima nič ali več atributov. In v resnici, kaj je zabavno o HTML, kot ste začeli, da se potopite v je, da je zelo samostojno teachable. 

Vse to se je razumevanje splošnega okvira HTML. Kaj je oznaka, kaj je atribut, kako ste dejansko konfigurirate spletno stran kot sledi. In vse ostalo je res rezultat gledanja v spletni sklic ali googling kako narediti nekaj Tehnika ali kot smo videli, gledaš Facebook je vir koda, ki je videti na spletni strani da vam je všeč na njej je izvorna koda in razumevanju, kako razvijalci tam dejansko določeni stvari. 

Torej ne moremo storiti slike kot tudi. In v resnici, smo to storili pred nekaj trenutki. Naj gredo naprej in samo ti pokažem. Tukaj je nekaj vzorčno kodo. Če boste kdaj želeli videti Godrnjavček mačko. Tako opazili, da sem lahko ima oznako slike tukaj. In imam pripombo nad njo. Imam alternativo besedilo za dostopnost. Torej, nekdo, ki je s pomočjo zaslona Bralec iz razlogov pogled lahko dejansko pa imajo svoje bralnik zaslona pravijo zlovoljen mačko. Ker če ne morejo glej slike, ki jih lahko vsaj imajo svoj računalnik povej jim, verbalno, kaj je to. In vir te datoteke je cat.jpeg. Torej v bistvu, če sem res hotel dobili pameten, kaj bi lahko imela done-- Obljubim, da ne bo šel na Rick Astley, tako Jaz grem na google za mačko namesto. In če grem na Google Slike tukaj, mi pa bomo prevzeti da je to slika mojega mačka. 

Recimo, da imam nadzor kliknil ali desno kliknil na to, po naključju grozljivo. In cat.jpeg grem shranite na mojem namizju. Naj zdaj iti nazaj v oblak 9. Obvestilo, da je tu, sem lahko pojdite na upload lokalne datoteke. In če sem zgrabi to Datoteka, cat.jpeg obvestilo da sem lahko povlečete in ga spustite v oblak 9 in to se dogaja, da kričati name tukaj. 

Ker smo že ti dal cat.jpeg datoteko, ampak to je super enostavno zgrabi fotografijo, ki ste jo vzeta iz Facebook ali Flickr ali podobno in dejansko povlecite in ga spustite v oblak 9, nato pa ga del svoje osebne Spletna stran ali problem nastavite sedem ali osem, kot bomo kmalu videli. In potem, ko vas končno obiščejo to mačko, ob predpostavki, da sem prenesli to isto mačko, Obvestilo that-- da je bil čudovit. 

Kaj boste videli, je nekaj podobnega ta obraz tukaj. Torej datotek, ki jih Referenčna znotraj spletne strani lahko bodisi lokalno v svoj račun ali na daljavo na drugem strežniku kot v primeru Rick Astley fotografija malo nazaj. Torej, kje else-- kaj še lahko storimo tu? Torej, dajmo si oglejte spodaj. Veš, kaj je nekako kul? 

Tako smo sedaj česar zelo statične spletne strani. Rad bi začinilo stvari, kot sledi. Želim, da bi svoj iskalnik. Torej, da bi iskalnik, Dovolite iti naprej in začeti početje to. Grem, da gredo naprej in ustvarjanje novo datoteko z imenom search.html. In smo prefabed različice spletu. Ops. Ne prilepite v vašo terminalsko okno. Montažne različice spletu. In jaz bom za začetek, kot sledi. Torej, tukaj je začetek datoteka z imenom search.html. Jaz grem, da ga shranite v današnja vir imenika. Bom poklical to iskanje. Pravzaprav, bomo bolje. CS50 iskanje in dejansko je blagovna znamka. In zdaj, sem hotel reči nekaj podobnega H1 CS50 iskanje. In potem sem dol, H2 kmalu. In samo, da povzamem, H1 in H2 pomeni tisto, kar v tem zaporedju? 

Ja, tako velik in krepko, in ni tako velika, vendar še vedno krepko. Torej, če sem rešil to in pojdi tja, Poglejmo datoteko search.html. Vse je v redu, in to je right-- [neslišno]. Ostani v pripravljenosti. David je zmeden. Oh, to je prav tam. David je idiot. V REDU. Torej, tam je. Torej CS50 iskanje kmalu. Torej, zdaj, dajmo sintetizirajo kaj smo naredili prejšnji teden. 

Kjer smo se pogovarjali o nižji mehanika nivojske HTTP. In te nove ideje HTML, je, ki samo ta označevalni jezik, kjer vas povej brskalnik natanko, kaj naj naredim in implementirati svoj iskalnik. Torej, namesto samo rekoč kmalu sem dogaja, da uvedejo nekaj, kar se imenuje obrazec oznako. In v tej obliki, bom na imajo nekaj podobnega vnosno polje. 

In ime tega vhoda polje, jaz grem, da ga pokličete Q. In vrsta te vnosno polje Jaz bom rekel, je le "besedilo". In polje za besedilo, kot bomo glej, je samo polje z besedilom. In zato ne zaznamo tukaj za kaj znotraj njega na tej točki. In tako sem preprosto dogaja zapreti oznako z da naprej poševnica desno v tag sami. In potem bom imajo en drug vhod. Vrsta vhodnega enaka oddajte. In potem bom zaprite to eno preveč. 

In zdaj bom šel nazaj. In že smo videli, čeprav precej grda, nimam dobil začetke moje iskanje stran tukaj. Dejstvo je, da mi poskusite čistiti to gor malo. Izkaže se, da na input tukaj, imam lahko en atribut imenovan ogrado. In morda vidim nekaj podobnega ključnih besed, ali natančneje, poizvedovanje za q. 

In opazili, zdaj imam ta vrsta sive besedila da izgine Takoj, ko začnem tipkati, ampak to je verjetno nekaj ki ste jih videli v drugih spletnih straneh. Res ne všeč gumb Pošlji. Tako da sem dejansko dogaja, da daje Gumb Submit vrednost iskanju. In zdaj, če sem se osvežite, opazil, da moj gumb postane imenovan iskanje. Veš, jaz res ne kot logotipom tukaj. Torej generator Google Font. 

Želim, da to še dodatno začiniti. Torej CS50 iskanje. Dovolite mi, da ustvarite svoj lasten logotip. To izgleda lepo. Torej, zdaj mi rešiti ta as-- pridi. Kje se dogaja? Tukaj. V REDU. Ga zamudili. Shrani kot. Stupid brskalnikov. Stati ob strani, da bomo popraviti to enkrat za vselej. Tam gremo. V redu. Žal mi je. Off dan. Zdaj je to funky. Izhod iz celozaslonskega načina. V redu. 

Zdaj, kot je normalno Oseba, shranite sliko kot. Logo.gif. Zdaj bom šel v CS50IDE in Bom preprosto zgrabite logotip, Jaz grem, da ga povlečete v moj vir sedem imenik, datoteka že obstaja, jaz sem v redu s tem. Torej bom preglasijo ker sem ga že imela. In zdaj kako se znebiti tega? 

Pojdimo naprej tu in narediti vir slika enaka logo.gif. Zaprite to. Shranite. In zdaj, če grem nazaj na moje iskanje stran, zdaj pa je videti precej dobro. Vse je v redu, zato je ni precej storiti nič uporabnega. Dejstvo je, da mi poskusite z iskanjem za mačke in glej kaj se zgodi. Mačke. Prekleto. Ne samo delo, očitno. Torej, kaj je ključni del da manjka tu? 

Dobro, tudi če ne veste, katero koli HTML, Sem začel označevanje up obrazec telefon in sem jo povedal, kako priti vložkov, dajte mi polje z besedilom in gumb predložiti, kar kos je očitno manjka? Recimo, da želimo dejansko dobili ta stvar deluje pravilno. Kaj moramo storiti? Imamo potrebo po izvajanju zadnji konec podatkovna baza ali samo iskalnik, in da se dogaja, da traja cel kup časa, odkrito. 

Torej, se spomnite, kaj smo storili zadnjič. Torej, če iščete nekaj na Googlu in ste vnaprej izklopljen, odpoklic, takojšnje iskanje. Torej mi zavijemo da izklopite tako, da to dejansko obnaša kot starejši šolski brskalnika, če sem zdaj išče nekaj podobnega mačke, spomniti, kaj je URL izgleda. To je precej skrivnosten. Vendar vgrajeni v tam, odpoklic, je iskanje poševnica. Vprašanje znamka q enaka mačke. 

In da se zdi, da bi me cel kup rezultatov iskanja. Tako da boste vedeli, kaj bom naredil? Jaz grem sposoditi Google za samo minuto. Bom šel čez tu in bom rekel, da ta predstavlja ukrepe ali destinacija, tako rekoč, bi morali dobesedno Google. In način sem si želel za uporabo se bo dobil. 

Torej, kaj je? Ukrep je nenavadno imenovan, ampak to samo pomeni, kdo bo ročaj tožba tega obrazca? Ko sem kliknite Išči, kjer bi moral rezultat iti? In če bom zdaj šel nazaj na moj obliki tukaj in osvežite svojo spletno stran in zdaj išče nekaj kot pes, opazili zdaj Sem ponovno izvajajo Google. Prav? 

Če želim iskati nekaj drugega, da dela za ne samo psi, deluje tudi za mačke. Deluje tudi CS50. In OK, to je samo pod whelming, kajne? Vse je v redu, vendar je dejansko deluje. Torej, kaj se dejansko dogaja? Torej sem se učil svoj brskalnik, s pomočjo HTML, da sprejme vnos od uporabnika in dejansko poslati vhod na oddaljeni strežnik z uporabo HTTP. 

In ker moj brskalnik razume HTTP, dejansko zgraditi URL nastaviti tako, da kaj Sem na koncu več kot v mojem brskalniku, opazili, kaj se zgodi ko sem iskal psa. Če sem kliknite Išči, opazili, da URL spremeni, kot sem nameraval da google.com/search~~V poizvedbo enaka psa. In to zato, ker obliki ve, ker metoda je dobil, da ga preprosto pripet na ta URL tam. 

Zdaj te spletne strani so še vedno grd. Torej, kaj je uvedla ena druga kos skladnje če bomo lahko danes. In to je nekaj, znana kot kaskadnih slogov. Zato mi dovolite, si oglejte ta primer tukaj in si oglejte če lahko sklepamo, kaj se dogaja. To je CSS0.html. In to je, če stvari dobil malo grdo. Ker žal, v svetu spleta, HTML sama ne more narediti vsega. In tako, če želite, da Stilizovati vašo spletno stran, boste dejansko morali osredotočiti na estetika na drugačen način. Torej, tukaj imam truplo mojega spleta Stran znotraj katerega je velik div. In div samo pomeni delitev. Torej, to je kot točki, vendar pa nima iste semantiko iz odstavka besedila. 

To samo pomeni, da na brskalnik, tukaj prihaja velik pravokoten regija mojem spletu Stran, rad bi uredil posebej. Zdaj, linija 21 je, če se začne, da div. In vzemite ugibati. Kakšen je učinek linije 21 na Preostanek vsebine stran? Ga centriranje. To je vse. Torej nismo videli način dejansko centriranje besedila. 

V bistvu, moj iskalnik, za razliko od dejanskega Google, je bilo vse upravičeno čez levo. In tako zdaj v vrstici 21, sem rekel, hej brskalnik, ustvarjajo delitev strani. Daj mi veliko, neviden pravokotnik. To je, kako želim pomislite na spletni strani. In nato Stilizovati kot sledi. Znotraj teh citatov, zdaj, je drugi jezik da smo uvedli danes imenovane kaskadnih slogov. K sreči pa tudi ni programski jezik, tako da je zelo omejena v svojem sintakso, ampak Prav tako zelo omejena funkcionalnosti ker HTML je vse okoli označevanje up podatke spletne strani in struktura spletne strani. CSS je na splošno približno last mile, estetika, pridobivanje velikosti in barve in umestitev ravno prav na spletni strani. In res je tvorjen s ključnimi parov vrednosti. 

Premoženja, kot je ta, besedila poravnati sledi kolona, sledi vrednosti, ki premoženje, ki je v tem primeru center. In zdaj vas opazijo lahko gnezdo te stvari. Če sem hotel vse, da Sem poudaril, da je treba na sredino, da je, zakaj imam linijo 21 in ustrezna črta 31. Recimo zdaj hočeš povedati John Harvard, dobrodošli na moji domači strani. 

Simbol Copyright John Harvard. In domnevam želim najprej te vrstice, da je precej velik. 36 pik. Tako da je dostojno velikosti. In sem si želel svojo težo, da bo krepko. Ampak potem spodaj, da Hočem manjše besedilo. In spodaj, da hočem še manjši besedilo. Žal mi je. Danes se počuti kot off dan. 

Torej sedaj, kaj počnem, da izrazi to? Tukaj na liniji 22 je vgrajen div ali ugnezdene div, če hočete. Tudi ta ima svoj stil oznako. Določim velikost pisave 36. Določim težo pisave krepko. Tukaj sem navesti le 24 točk. In končno, v skladu 28., določim 12. Torej samo kot preverjanje hitro razumnosti in kot človeško branje je ta, katere besede na zaslonu so dejansko bo krepko? Katere linije so dejansko krepko? 

Samo John Harvard. Prav? Ker tako kot pravi linija 22 hey brskalnik, tukaj je delitev strani. Naj bo velikost pisave 36 točko. Naredite teža pisavo krepko. Takoj, ko pridete Ustrezna končna oznaka ali zaprt tag na liniji 24, to pomeni, hej brskalnik, stop počne karkoli že počnete. In obvestilo, da bo jasno, čeprav linija 22 ima vse te lastnosti kot stilu, ko vas zaprite oznako v skladu 24, si omenil samo ime tag je. 

Vi ne ponovi slog besedo ali vse, kar je znotraj teh citatov. In tako, če gledam na to zdaj V mojem brskalniku, vzemimo poglej na končni rezultat. Spusti me naprej, da te datoteke, ki je CSS 0. In to je še vedno precej navaden, vendar pa postaja zelo zanimivo. Vendar se izkaže, tam je druge stvari, kar lahko storim tukaj, in na tveganja, da bi to popolnoma ostudno, Opazili tukaj, da je v moji telo moje spletne strani, Jaz lahko naredim nekaj smešnega kot bg ali barvo ozadja. 

In hitro, kaj je tvoja najljubša barva? Green sem slišal. V redu. Torej, zdaj, če sem udaril reload zdaj, imamo zeleno spletno stran. Vse je v redu, tako da ni slabo. In zdaj, če želim, da bi to res cool, bom lahko barvo mojega besedila celo rdeče. Torej, poglejmo, kaj to izgleda. Zdaj pa je videti precej dobro. In tukaj dol, če si res želim, da igraš z nekom ali, če želite, da bo eden izmed tistih ljudi, ki so poskušal, da vas napeljejo obiščete spletno stran, ker so jih Prevarala Google v razmišljanju, tam je cel kup od like-- ključne besede, poglejmo, osvežite. Kje je šlo? In nas tam. V redu. Zato pravim, da je to prahi, bomo govoriti o tej stvari v nekaj tednih ko govorimo o varnost, če ste dejansko embed cele grozde ključne besede v spletne strani, četudi oni niso vidni k človek, nekdo, kot so Google, seveda, pravzaprav še vedno lahko našli to. Vse je v redu, tako da je precej ostuden precej hitro. 

In v resnici, to ni vse da je veliko razliko moji spletni Stran kot dodiplomski, ki Začel sem googling okoli, da bi našli pretekle različice mojih starih spletnih strani. Bilo je precej hudo. V bistvu sem si najti eden tik pred razred. Ampak tam je slabše tam. To očitno je bil moj Domača stran nazaj v letu 1996. Očitno sem mislil, da je primerno vprašati ljudi svoje ime preden se lahko dejansko videli mojo spletno stran. 

In potem sem jim pokazala, nekaj neumnega, verjetno. Bom izkopljemo več za naslednjič. Ampak za zdaj, kaj je razmisli malo načrtovanja. Mi smo se pogovarjali o slogu. In ta stran tako daleč Najbolj vse sem napisal je precej čist slogovno. Kaj pa design? No, tam je veliko redundance V kaj sem počel tukaj. 

Sem omenil besedo barva na nekaj mestih. Sem omenil velikost pisave v nekaj kraji in krepko v nekaj mestih. In v bistvu, sem co druženje dveh jezikov. Imam HTML z mojimi oznakami in my atribute in potem kar naenkrat, med narekovaji, imam danes drugi jezik imenovana CSS, ki je spet, je le ta Ključne pari vrednosti ali te lastnosti ločeni z dvopičjem. 

Izkazalo se je, da je veliko kot pri C, pri čemer smo lahko začnete dejavnik ven nekateri kodo v glavi datoteke, tako da lahko delamo enako v HTML. In korak v smeri, ki je, kot sledi. Opazimo, da CSS1.html je ta različica strukturno točno isto spletno stran. Torej imam cel kup od Divs, toda tokrat sem imel Znebila ovoja div, kot boste videli. 

In sem dal te tri Divs top, srednji in spodnji, edinstvene identitete. To je lepo, ker ga kar te delitve strani edinstvenih identifikatorjev, Jaz jih lahko reference drugod. Kje? No, naj se pomaknite navzgor. In tako daleč, kadarkoli smo pogledal na čelu spletne strani, kar je edina oznaka, ki smo jih imeli v vodja spletne strani? Malo glasneje. Samo naslov doslej. Vendar se izkaže, tam je nekaj drugih stvari lahko dajo noter, eno od ki se imenuje slog tag. Torej, pred nekaj trenutki smo pogledal na slog atribut. Izkazalo se je, da je slog tag. Spada v notranjosti vodja spletne strani. In zdaj opazili, kaj počnem. Moram znotraj tega slog tag naslednji. Jaz sem dobesedno navedbo na liniji 20 ime oznake, da sem želite Stilizovati. 

Potem imam odprt kodrasti oklepaja in zaprt kodrasti oklepaja. Torej podobno kot v duhu C, vendar Tudi to ni funkcija, to je samo skladenjsko podrobnosti tukaj. In potem seveda, sem povedal brskalnik, hej brskalnik, da celotno telo stran imajo poravnavo besedila centra. In potem je to rekel naslednje. Hej brskalnik, če vidiš HTML element ali tag na strani, ki ima edinstven identifikator vrhu, tako simbol hash tu pomeni le edinstvena ideja vrha, gredo naprej in da je njegova velikost pisave 36 in njegova teža pisavo krepko. 

Hej brskalnik, element, čigar ID je srednji, da je 24 pik. In hej brskalnik, če vidite Ideja dna, da bi bilo 12 točk. Učinek na koncu je popolnoma sam. Če grem v CSS 1, se Stran izgleda enako. Vendar smo korak v smeri nekoliko boljši dizajn. Naj zdaj iti nazaj k CSS2 in glej, kaj sem naredil. 

Sedaj stran je res, res čist. V bistvu sem lahko fit vse vsebine na strani tukaj. Toda kaj novega tag sem uveden, seveda? Link. In to ni najboljše ime za oznako, ker to ni povezava v tem smislu, ki jo poznamo, vendar to pomeni, povezava v kakšni drugi datoteki. To je nekako kot oster vključujejo v C. 

To je pot v HTML reči hej brskalnik pojdi na vsebino datoteka imenuje css2.css. Odnos do mene, je, da je slog stanja. In res, da je tisto, kar eden S je v kaskadnih slogov sredstvi. To je slog stanja. To je samo besedilna datoteka, ki vsebuje cel kup nepremičnin. To je cel kup stilov ki jih želite uporabljati na stran. 

In tako je to očitno je ki se nanaša na drugi datoteki. In če odprem, da CSS2.css, opazili, da vse sem naredil je kopiraj in prilepi vse od tega v to datoteko. In zdaj, tudi če ste nikoli Pred kodirani te stvari, pomislimo le z pregovorno inženiring hat no, zakaj je to boljše načrtovanje verjetno? Faktoring iz te CSS lastnosti, njihovo dajanje v svojem spisu. Čeprav smo to rešili problem kot pet minut nazaj v zelo prvi različici. 

Mi smo ne izboljša Stran slogovno, to je samo bolje Oblikovanje v nekem smislu. Zakaj pa ti misliš? Ja. Bolj prilagodljivi, kako? Ja. Torej, če želite, da gredo nazaj in spremeniti stvari, sedaj imate eno mesto kjer si lahko stvari spremenimo. In v resnici, za nekaj kot problem nastaviti sedem, kjer bomo izvaja načrt Stock Trading spletna stran, da se dogaja, da imajo cel kup straneh. In da bi bilo res nadležno, če se boste odločili, hm, Res ne všeč 24 pik, želim da bi bilo 28 točk ali nekoliko večji. In potem še narediti globalna najti in zamenjati ali odpreti vse vaše spletne strani datotek preprosto, da dejansko spremeniti eno vrednost. Z faktoring teh stilov v enem osrednjem mestu, Zdaj lahko odprete eno besedilno datoteko v CS50IDE v katerem koli programu, spremeniti, ga shranite in storiti. Vi ste se razmnožujejo s tistimi Spremembe povsod. In da bi bil enak v dot h datoteki, kot tudi. Torej vsa vprašanja tako daleč na tej sintaksi? Vse je v redu, zato smo storiti vse, kar se zdi razen dejansko izvajati hiperpovezave. In tako gremo naprej, in to stori. Naj gredo naprej in ustvarite novo datoteko tukaj. Jaz grem, da ga pokličete link.html, dal v današnjem kodo. 

In bom naredil odprt Nosilec tip doc html. Naj omenim, da ta stvar na top, to doc vrsta deklaracije, to je edina, ki je čudno s klicajem. Moraš to storiti tam in je pomeni, da smo s pomočjo različico HTML 5. Starejše različice jezik imeli veliko več strune, da ste potrebni, da tam čaka. Torej, tukaj je primer imenuje povezava. 

Rabim telo moji spletni strani tukaj. In v tukaj, a href Ene recimo HTTP://www.disney.com in moja najljubša spletna stran, bomo rekli. Vse je v redu, tako da je zelo neškodljive, uporabniku prijazna stran. Če bi zdaj šel v mojem imeniku kotacijo tukaj in odprla link.html, imamo hiper besedilo. 

In res, to je, če H v HTTP prihaja. Hypertext Transfer Protocol Gre za prenos besedila da ima hiperpovezave do drugih virov. In res, tukaj je znano, če retro, modra povezava, da če kliknili, me bo dejansko privede do Disney.com. Zdaj pa, oh, da prihaja kmalu. Vse je v redu, zdaj, kaj so nekateri posledic tega? 

In odkrito povedano, svet začne da bi dobili malo bolj seznanjeni in tudi malo strašnejši ampak tudi malo bolj sam zagovarjati, ko začnete razumeti te stvari. Ker so možnosti, nekateri od vas, če greste skozi vaš spam mapo Gmail ali celo vaš poštni predal, ste verjetno dobila nekakšen elektronski pošti ki je vas prosi, da spremenite vaš Geslo morda ali morda preveriti poverilnice ali malenkosti PayPal. 

In v resnici, ste morda prejeli nekaj, kar pravi, kot klik tukaj za ponastavitev gesla PayPal. In zdaj, opazili, če to ni Disney.com ampak kot badplace.com in osvežite, upoštevajte, da je besedilo tukaj Lahko bi rekli ničesar whatsoever. In v resnici je to le besede. Zakaj ne bom dejansko super zlonamerna in pravijo http://www.paypal.com. 

Kliknite tukaj ponastavite PayPal geslo in zdaj osvežite. To izgleda precej legitimno, kajne? Mislim, da ne bom kliknite na email, ki pravi samo to. Ampak obvestilo dihotomijo tukaj. Piše www.paypal.com, in v resnici, počakaj malo, vemo, da želite S za varnost. Torej sedaj, pojdite na www.paypal.com HTTPS, vendar če ste nikoli prej ni počel, ne pride v navado lebdi nad majhne povezav tukaj. In to je težko videti Na zaslonu tam, in to še ni vse, da je lažje tukaj. Ampak tukaj pot navzdol v majhen majhen kotiček does brskalnik dejansko vam, da gremo povedati da badplace.com namesto PayPal.com. Zdaj, kam gremo s tem? Vsi primeri, ki smo jih danes storili, smo težko kodirane in vnesli ročno. Splet je neverjetno nezanimiv, ko vam je težko kodo vaše spletne strani, tako da te vsebine je statična in nikoli ne spreminjajo. Seveda so vsi naši priljubljenih spletnih strani danes ali je Gmail ali Twitter ali Facebook ali poljubno število drugih so dinamični. Oni spreminja v odziv na vnos uporabnika tako kot v rezultatih iskanja Google. 

In tako v sredo, kar počnemo, je odidemo HTML in uvedbo CSS za nami in vzamemo za samoumevno, da imamo zdaj poznate in uvajamo nov programski jezik imenuje PHP, ki je všeč C, se dogaja, da se nam moč dejansko ustvarjanje programov da sami ustvarjajo izhod. V tem primeru bomo uporabljali PHP ustvariti dinamično spletu Strani, ki uporabljajo ta nov jezik. Torej, več o tem v sredo. Se vidimo potem. 

[Predvaja glasba]