>> [Mūzikas atskaņošanai]
>> DAVID J Malan: Tas ir CS50 un šis ir sākums nedēļas 7.
Tātad welcome back.
Un jūs varat atgādināt, ka jo problēma noteikti četri,
tur bija mazliet scavenger medības dažiem pasakains balvām kuru
pēc tam, kad atgūt fotogrāfijas personāls gan šeit, gan New Haven,
jums tika apstrīdēti atrast tik daudz šie datorzinātnieku kā jūs varētu.
Un mēs esam ieguvuši veselu ķekars iesniegumus.
Domāju, ka man dalīties dažas ar jums šeit šodien.
>> Un mēs pēc visiem šiem tiešsaistē.
Bet jo īpaši, es gribēju vērst jūsu uzmanību kuri paredzēti, labi vienu,
Sam bija diezgan maz no tām parasti rada kā šis.
Bet šķiet, ka no šorīt, uzvarētājs
tika noteikta kāds nosaukts Ken ar 24 darbinieku notverti uz kameru
vai nedaudz vairāk, ja jūs ņemt veido vairākus darbiniekus attēliem.
Attēlotie šeit ir Ken nākamais Marijai in New Haven.
>> Tagad, Ken, lai gan, izrādās ārā ir mazliet stūra lietas
tas nav vēl noticis pirms tam.
Izrādās, ka tas nenotika man likt sodu drukāt problemātiskajās
noteikti četri, kas saka, ka darbinieki ir tiesību saņemt pasakains balvām
jo Ken ir, protams, viens no fotogrāfi par mūsu darbiniekiem.
Tagad, ar to teica, viņš Sākotnēji rakstīja man teikt
lūdzu, nav post šos fotoattēlus tiešsaistē.
Es domāju, ka liela daļa jo lielākā daļa no fotogrāfijas
ka šis fotogrāfs ņēma meklēt mazliet kaut kas līdzīgs šim.
Un tamlīdzīgi.
>> Bet Ken gribētu mani pārliecināt jums ka viņš ir ļoti labs fotogrāfs,
viņš ir profesionāls, viņš sāk fotogrāfijas, kas nav neskaidra,
kas ir labāk fokusā, un viņš paņēma diezgan maz mūsu pašu darbiniekiem.
Bet nevis tikai atzīt Ken, ko mēs domājam, ka mēs gribētu darīt
ir iet cauri sarakstam faktiskie studenti, kuri iesnieguši.
Un izrādās, ka Lance ar 15 foto no šā rīta
bija mūsu uzvarētājs.
>> Un attēlotie šeit ir Lance ar Colton, ar Skaz, ar sevi, un ar Semu.
Bet tad izrādās, ka no 11:46, lai tikai mazliet pirms,
Es devos atpakaļ uz manu e-pastu, un konstatēja, ka mums bija vēl vairāk viens iesniegums
students nosaukts Bonnie kuru e-pasts teica tikai to.
Nav iet gulēt, es esmu darot laikā klasē.
Un tad turpināja pievienot tikai 14 foto, viens kautrīgs no Lance ir 15.
>> Bet Bonnie fotogrāfijas, izrādās ārā bija vairāki darbinieki, Sam
starp tām, lai to, ko mēs domājam, ka mēs varētu darīt, ir jāatzīst, abi šie.
Tātad papildus iegūt Dropbox telpa, ka ikvienam, kas piedalījās
saņem, šīs divas sadaļas būs arī saņem jauku aizrādījums pusdienas par viņiem
un to sadaļu palīgu šo nāk nedēļas.
Un tāpēc jums būs dzirdēt no mums, Lance un Bonnie, par to.
Tik liels Apsveicu uz tiem.
Tagad, tiem no jums, kas būtu tāpat pusdienām vispārīgāk
zināt, ka CS50 pusdienas Cambridge un New Haven ir šo piektdien.
Iet uz CS50 Mājas slash RSVP.
Un tagad vārds par semināriem.
Vairāk curricularly.
Tātad mēs esam tuvojas punkts semestra
kur jums vajadzētu sākt domājot par galīgajiem projektiem.
Un patiesībā, tikai mazliet, būs tā saukto pre priekšlikumi būt saistīts.
Tātad iepriekš priekšlikumi ir domāti būt diezgan zema ietekme un patiešām
tikai iespēja jums rakstīt īsu piezīmi
Jūsu mācību puisis uz jāinformē viņam vai viņai to, ko jūs domājat jūs
varētu vēlēties darīt, lai jūsu galīgo projektu.
>> Tagad daudzi studenti beigties darot tīmekļa galīgos projektus.
Un, protams, mēs esam tikai Tagad pagājušajā nedēļā šajā
un tālāk iegremdēšanās web programmēšanu.
Tāpēc nav jāuztraucas, ja jums nav nekādu ideju, kā
jūs varētu veidot idejas, kas Jums varētu būt jūsu prātā.
Tas ir patiešām vienkārši piespiežot funkcija lai saņemtu jums domāt un runāt
ar savu TF par to.
Bet, lai palīdzētu jums ar to, un ar galīgajiem projektiem, visbeidzot,
zina, ka CS50 ir tradīcija piedāvāt seminārus.
>> Un šie ir obligāta, hands on, vai lekciju, pamatojoties uz iespējām
lai uzzinātu vairāk par tēmām, kas ir mazliet aksesuāra kurss ir
mācību programma, bet tomēr brīnišķīgi materiāls braukt galīgos projektus.
Un tā tas ir saraksts, kas ir CS50 darbinieki šeit New Haven
ir jānāk klajā ar par Šogad par iOS
programmēšana, Android programmēšana, spēļu izstrāde,
un ķekarus vairāk rīkiem un valodas un metodes.
>> Lai saglabātu acu par CS50 tīmekļa vietnē.
Un tajā pašā laikā, ja vēlaties reģistrējiet savu interesi par kādu no šiem,
iet uz CS50 ir slīpsvītra reģistrā.
Un mēs pēc tam sekot, kā uz dienas un lidojumu laiki un vietas
un everything-- visvairāk viss būs noskatīties un pieejami arī pēc pieprasījuma
pēc tam, ja jūs nevarat faktiski darīt to.
Tātad bez papildu ADO, mēs left off pēdējo reizi ar GET.
>> Un tas bija, piemēram, ziņu, kas bija iekšpusē virtuālo aploksnē, atgādināt,
ka mēs nodots no router router router starp interneta pārlūku un web
servera.
Un ka ziņa izskatījās mazliet kaut kas līdzīgs šim.
Tas bija vairāk arcane ziņa, ka patiesībā bija iekšā aploksnē
rakstīts uz papīra, kuru Pirmā līnija saka burtiski, iegūt slīpsvītra.
>> Un tāpat kā veselība pārbaudītu, ko darīja slash apzīmē?
Ko slash nozīmē, ja pieprasot mājas lapā?
Jūs lūgt to visu laiku.
Lielākā daļa jebkurā laikā jūs apmeklējat tīmekļa vietni, jūs nav faktiski ierakstiet faila nosaukumu.
Jūs, iespējams, dodieties uz Facebook.com, ievadīt, gmail.com, vai tamlīdzīgi.
Un ko tas slash pārstāv?
Kas failu?
Vai kāda lapa, konkrēti?
>> Indekss, jā.
Tātad noklusējuma lapā.
Tātad, ja jums nav jānorāda failu nosaukt kā mēs sāksim redzēt,
jūs faktiski tikai pieprasot iedodiet man noklusējuma lapu Facebook
vai dot man manu inbox vai dot mani noklusējuma lapu jaunumi
uz CNN mājas lapā vai tamlīdzīgi.
Un serveris, tad atbild uz ka ziņojums ar kaut ko
piemēram, tas, sakot jā, es runāt HTTP versija 1.1.
>> 200, kas ir statuss kods, ko mēs cilvēki reti
kādreiz redzēt, jo tas ir labi.
Jo tas nozīmē OK, pieprasījumu Tika saņemti un apstrādāti pareizi.
Un satura tips acīmredzot atbildē
ir diezgan bieži, bet ne vienmēr, teksts.
Un konkrēti, HTML.
Un tas ir patiesībā ja mēs skatāmies uz šodienu.
>> Tātad faktiski, es iešu uz priekšu un atvērt pārlūkprogrammu.
Es esmu gatavojas izmantot Chrome, jūs varat izmantot visvairāk jebkuru pārlūku nedēļās nākt.
Mēs parasti iesakām Chrome jo tas ir īpaši
labs programmatūras izstrādātājiem.
Tas ir ieguvuši daudz celta rīki, kas atvieglo
attīstīt ne tikai HTML un CSS, lietas, mēs sāksim runāt par šodien,
bet arī citās valodās, kā arī.
>> Un es iešu uz priekšu un iet kuri paredzēti, Es esmu gatavojas kontrolēt klikšķi vai pa labi
noklikšķiniet jebkurā tīmekļa lapā.
Un es iešu uz Pārbaudīt elementu.
Un es esmu gatavojas kniebiens manu ekrāns tikai nedaudz šeit.
Ļaujiet man pārvietot to uz leju.
Tātad, tas ir tas, ko sauc Chrome inspektors.
Tātad tas ir kā atkļūdošana instruments iebūvēts Chrome.
>> Visi no jums jau ir šis ja jūs esat bijis, izmantojot Chrome.
Un tas ļauj jums redzēt, kas notiek par zem motora pārsega dažu mājas lapā.
Tātad pieņemsim faktiski paiet apskatīt šī šādi.
Tas ir veids, kā vairāk funkcijas un mēs rūpējamies par šodien.
Bet tur ir šīs cilnes nekā šeit.
Elements, tīkls, avoti, grafiku, un daži citi sīkumi.
Es esmu gatavojas klikšķiniet uz Tīkls brīdi.
>> Un tas ir mazliet milzīgs pēc pirmā acu uzmetiena šeit.
Bet ko es esmu gatavojas darīt, ir ļaut mani vienkāršotu tā mazliet.
Es esmu gatavojas, lai ieslēgtu Ierakstot gaismu tāpēc, ka tas ir sarkans.
Un es esmu gatavojas teikt saglabāt žurnālu.
Un tas ir tikai nedaudz lieta, ko es sapratu,
laika gaitā, kas notiek, lai saglabātu viss, kas notiek pārlūkprogrammā.
Un tagad es iešu uz http://facebook.com.
>> Patiesībā, pieņemsim do www labs pasākums, slīpsvītra.
Enter.
Tik URL, ka daudzi no jūs varētu būt apmeklējis.
Un tagad Facebook tīmekļa lapa nāk augšā.
Un tad viss ķekars sīkumi lidoja apakšā.
Un patiesībā, izrādās, ka kad jūs apmeklējat Facebook.com,
Jūs esat ne tikai padarīt vienu HTTP pieprasījumu, izrādās, ka gatavojas Facebook.com
nosūta 41 no šīm aploksnēm, katrs ar savu GET pieprasījumu,
kā norādīts, lai gan aiz ekrāna šeit, apakšā ekrāna,
tas norāda, ka, protams, mans pārlūkprogramma veikti 41 pieprasījumus.
>> Un kopumā, tas nodots 861 kilobaitiem un tas aizņēma kādu iemeslu dēļ
tik daudz kā astoņas sekundes lejupielādēt visu to.
Tātad tas ir faktiski mazliet dīvaini ka Facebook vietā būtu pieņemt, ka
garš, bet lai tā būtu šajā gadījumā.
Tagad tas viss man nav īsti aprūpi Par izņemot augšējais pieprasījuma.
So iesim uz šo vienu tieši šeit un ļaujiet man tālinātu tikai brīdi.
>> Un ļaujiet man tuvinātu šo.
Tātad, ko es esmu darījusi pie kreisi, lai gan tur ir daudz kas notiek vairāk nekā šeit
tiek Esmu iezīmēts Facebook.com un pēc tam
paziņojums, ka es esmu, ritinot uz leju, ritinot uz leju, ritinot uz leju,
pieprasīt galvenes.
Un jūs redzēsiet, ka Chrome rāda mani būtībā iekšējie saturs
Lūguma es.
Tas nav formatējumu gluži tas pats veids, bet paziņojums tur ir pieminēts nokļūt,
paziņojums tur ir pieminēts uzņēmējas, Facebook.com, ceļš, vai slīpsvītra,
kas ir fails es pieprasīts.
>> Un tad, ja es ritināt atpakaļ uz augšu, mēs faktiski
redzēt, ka tas, ko Facebook atpakaļ man ir visas šīs galvenes.
Tātad iekšpusē šī virtuālā aploksnē patiešām ir daudz galveno vērtību pārus.
Vārdam, resnās zarnas, un pēc tam vērtība.
Vārds, kolu, un vērtība.
Tos sauc galvenes.
Un tur ir veids, kā sīkāk šeit nekā mēs tiešām rūp tieši tagad.
>> Bet tas ir otrais pēdējais tur lejā,
ievērosiet, ka facebook.com serveri, tiešām teica šeit nāk kādu tekstu HTML.
Tātad tas viss ir ko teikt ka tad, kad jūs lūgt tīmekļa
lapa no pārlūka uz A serveri, ka serveris ir atbilde
ar aploksnē pati iekšpusē, kas ir teksts.
Citiem vārdiem sakot, HTML.
Hiperteksta iezīmēšanas valoda.
Kura cita valoda ka mēs ieviest šodien
ka cilvēki vai datori ģenerēt Lai īstenotu interneta lapas.
>> Konkrēti, aplūkosim šo.
Es esmu gatavojas tagad iet atpakaļ Facebook mājas lapā.
Un es esmu gatavojas tikai kontrole klikšķis vai labais klikšķis
un noklikšķiniet uz Skatīt lapas avotu.
Un pat tad, ja jūs neizmantojat Chrome, IE var izdarīt, Firefox var izdarīt,
Safari var darīt, pat ja izvēlni iespējas varētu izskatīties nedaudz atšķirīgs.
Un tas ir HTML, ka Mark un Uzņēmums at Facebook ir uzrakstījuši.
>> Un, lai kolektīvi, šī valoda šeit īsteno zilā un baltā lapa
ka mēs redzējām pirms brīža.
Tagad tas ir nedaudz milzīgs.
Bet, ja mēs skatāmies uz augšu kreisajā augšējā stūrī, mēs esam gatavojas sākt, lai redzētu dažus modeļus.
Izskatās, ka ir daudz no šiem atvērtā kakta kronšteinu
un tad tur ir šis atslēgvārds HTML.
Lūk, vēl viens atvērts leņķis kronšteins un galva.
>> Te ir, ja mēs ritiniet uz leju un uz leju un uz leju, es esmu
gatavojas iet uz priekšu un mēģināt lai meklētu kaut ko.
Tur ceļš pāri pa labi šeit ir atvērta kronšteins ķermenis.
Un atceros no pēdējās laiks, ka mēs ierosinājām
ka vienkāršākā mājas lapā ka cilvēks varētu uzrakstīt
varētu izskatīties mazliet kaut kas līdzīgs šim.
Atvērt HTML tag, atvērtas virsas tag, open nosaukums tag,
tad slēgta nosaukums, slēgta galva, open ķermeņa tag, kādu tekstu, slēgta ķermeni,
slēgta HTML.
>> Bet pauze šeit tikai brīdi.
Šis kods, pat ja jūs esat nekad rakstīts to pirms
bet joprojām nav gluži saprast kas notiek, izskatās diezgan labi.
Pareizi, tas ir ļoti tīrs.
Tas ir ļoti stilistiski jauki.
Daudz iedobi un atstarpēm.
Facebook s nav.
Tātad, kāpēc ir Facebook tik daudz sliktāks nekā I rakstot HTML?
Acīmredzot.
>> Pareizi, tas ir kā viens no pieciem stilu.
Tur ir pārliecinošs iemesls viņiem samazināt šos stūriem.
Labi, tāpēc viņi nevēlas padarīt to vieglāk, lai jūs, lai to izlasītu.
Tātad savā ziņā, viņi apspēlējot to, sava veida šifrēšanas to
vismaz estētiski tik ka tas ir grūtāk MySpace
lai iet un noārdīt to mājas lapa un HTML par to.
Izrādās, ka ar programmām lai gan, tostarp Chrome,
mēs varam sakopt šo augšu super viegli.
Tātad, tas nav gluži tas, kā iemeslu.
Kas vēl varētu būt iemesls.
Jā.
Jā, balto laukumu izmaksas dati.
Ko tu ar to domā?
Jā, tieši tā.
Ja jūs hit taustiņu tab par partiju vai SPACE, apsvērt sekas.
Tātad, katru taustiņu uz tastatūras ir [Dzirdams] pārstāvēja vienu baitu.
>> Tātad pieņemsim, ka preču zīme vai kāds no devs šajās dienās hits atstarpes tikai vienreiz
Šajā HTML lapu, pārstāv Facebook mājas lapu.
Un Facebook ir daudz Lietotāju šajās dienās.
Tātad pieņemsim, ka Facebook mājas lapa apmeklē miljards cilvēku šodien.
Un kāds at Facebook ir hit starpdevējs tikai vienu reizi.
>> Tātad viens papildu baitu, miljardu pieprasījumi,
cik daudz datu Facebook pārceļot internetā
tāpēc, ka kāds hit spacebar uz viņa vai viņas klaviatūru?
Miljards baitu, vai vienu gigabaita dati tiek nosūtīti no Facebook serveriem
lai cilvēki visā pasaule bez pamatota iemesla.
Tagad tas ir tikai viens telpa.
>> Iedomājieties, ja mēs tiešām tīrīt šis lieta up un izrobota, un piebilda,
daudz balto laukumu un tab rakstzīmes un atstarpes,
jūs galu galā izdevumu gigabaitiem, ja ne terra baiti vairāk vietas.
Un tā super sastopama Faktiskais pasaule web izstrāde
ir samazināt savu kodu.
Un mēs beidzot redzēt kā jūs varētu darīt.
>> Bet šodien, mēs sāksim rakstīt kodu tas tiešām lasāma ar mums cilvēkiem.
Izrādās, lai gan, ja jūs iet atpakaļ šo rīku Chrome Pārbaudīt elementu,
Iepriekš mēs bijām uz cilnes Network.
Izrādās, ka, ja jums iet uz tab elementi, ko jūs faktiski redzēt
ir Chrome ir diezgan drukāts versija, ka paša HTML.
Tātad mēs esam deobfuscated to.
Tātad, tas ir sakritības par datoru.
Un tagad jūs varat faktiski noklikšķiniet uz apkārt un sākt
redzēt hierarhiju, kas ir mājas lapa.
Tātad pieņemsim faktiski darīt.
Es iešu uz priekšu un atvērt uz mans Mac programma, ko sauc teksta rediģēt.
Un atcerēties, ka tas ir tikai super vienkāršu tekstu programma.
Windows ir notepad.exe.
Un es esmu gatavojas burtiski ierakstiet sekojošo.
Doc tipa HTML, open kronšteins HTML, slēgta kronšteinu HTML,
mums ir vadītājs lapā šeit, beigas galvas lapā šeit,
Nosaukums būs tāpat, Hello pasaulē.
>> Un tad uz leju šeit, mums ir nepieciešams ķermenis mājas lapā.
Slēgtā virsbūve.
Un tad šeit, hello world.
Viss kārtībā.
Tāpēc mēs esam uzrakstījis super ātru tīmekļa lapu.
Es esmu gatavojas, lai saglabātu to kā hello.html uz mana galda.
My Mac gatavojas sūdzēties, domājot, ka, pagaidiet minūti,
tas ir teksta fails, do jūs vēlaties, lai izsauktu to txt?
Bet nē, es vēlos izmantot dot HTML.
>> Un tad, kas ir jauki, ja es vienkārši dubultklikšķi uz šo failu,
hello.html, šeit ir mana mājas lapa.
Diemžēl, es esmu vienīgais cilvēks pasaulē
kas var apmeklēt šo lapu tieši tagad.
Jo, ja tas dzīvo acīmredzot?
Tas ir par manu Mac, vai ne?
Kura ir bezjēdzīgi.
Tāpat kā neviens šajā telpā nemaz nerunājot par internetu
faktiski var apmeklēt šo lapu.
Tātad šodien, mums ir nepieciešams, lai ieviest citu elementu.
>> Un, lai to izdarītu, es esmu gatavojas iet uz priekšu un atvērt mākoni 9.
Tātad mākonis 9, protams, ir mākonis balstītas service-- CS50
IDE-- Tas ir visu mūsu darbvietas darbojas kaut kur internetā.
Un tas nozīmē, ka visas mūsu failus ir publiski pieejami jau.
So iesim uz priekšu un darīt to.
Es iešu uz priekšu un izveidot jaunu failu NCS50IDE.
Es esmu gatavojas, lai saglabātu to kā agrāk kā hello.html un noklikšķiniet uz Saglabāt.
Un tagad tikai, lai ietaupītu laiku, es eju iet uz priekšu un kopēt ielīmēt šo kodu
nevis atkārtojiet to.
Un saglabājiet to.
Un tāpēc tagad man ir failu sauc hello.html.
Bet kā es varu tiešām atveriet to, kā mājas lapā?
Nu, izrādās, iebūvēta līdz CS50 IDE ir ne tikai kompilators piemēram šķindēt
un atkļūdotājs piemēram GDB un ķekarus citām programmām,
tur ir tiešām pilnvērtīga tīmekļa serveris darbojas dažu CS50 IDE.
>> Visi no jums, proti, ir sava web serveri.
Un web serveris ir tikai gabals par programmatūru, kuras mērķis dzīvē
ir kalpot up interneta lapas.
Lai klausītos pieprasījumiem no pārlūkprogrammām un atbildēt ar nelielu virtuālo aploksnēm
no kuriem iekšpusē ir saturu, kas es esmu uzrakstījis.
Tātad šī tīmekļa serveris ir faktiski bezmaksas un atvērtā koda.
Ja open source tikai nozīmē programmatūra, ka kāds cits ir
rakstīts, ka visi no mums var faktiski redzēt un lejupielādēt un pat
mainīt pirmkodu.
Un to sauc Apache.
>> Un mēs esam padarījuši mazliet vieglāk izmantot CS50IDE zvanot to Apache 50.
Tāpēc, ka tā faktiski var saprast sekojošo.
Es esmu gatavojas teikt Apache 50 sākums.
Un tad es esmu tikai gatavojas teikt dot.
Un mēs redzam dažus nedaudz arcane ziņu sakot
nosakot Apache dokumentu [? grupa?] uz mājām, Ubuntu, kāds tas ir,
slash darbvietas.
Sākot tīmekļa serveris Apache 2 veiksmīgi.
>> Tik garš stāsts īss, es tikko uzstājām pogu
un pagriezās uz web serveri, kurš ir tagad klausīties internetā par TCP portu
80 pie konkrētā adresē.
Un tas saka šeit, un tas mainīsies Based
Jūsu lietotājvārds un citiem faktoriem, bet paziņojums tagad, ja es noklikšķiniet uz to,
IDE50 dot jharvard un tik un jā, ievēroju, ka visu šo laiku
Par pēdējo vairākus nedēļas, jums varētu būt
pamanīju, ka savu lietotājvārdu ir iestrādāta augšējā labajā rokā
stūris CS50IDE.
>> Un tas tiešām ir bijis tas viss laikam adresi, kur jūs varat
apmeklēt visus savus failus caur web.
Līdz šim tas nav vienaldzīgs, jo C, jūs parasti
vēlas lietas stiepjas termināls, kas nav tīmeklī.
Bet šodien, mēs sākam rakstot tīmekļa kodu
ka mēs vēlamies pieejama publiskajās URL.
Tātad, ko es esmu gatavojas darīt, ir noklikšķiniet uz šo URL.
>> Un paziņojums, ka es redzu diezgan neglīts indekss, direktoriju sarakstu,
bet tas, ko fails lec ārā pie jums droši vien?
Hello.html.
Tas ir tāpēc, ka es saglabāti fails manā darbvietā.
Un tas, ko es esmu teicis Apache tīmekļa serveri ir meklēt Dāvida darbvietā direktorijā.
Un ļaujiet Ikviens pasaule redzētu šos failus.
>> Un tiešām, ja es tagad noklikšķiniet uz hello.html,
Es redzu šajā cilnē tieši šo failu.
Tagad paziņojums, mākonis 9 dara kaut nedaudz palīdzēt mums.
Ietvaros CS50 IDE, paziņojums tur pēkšņi adrešu joslā.
Tas ir tāpēc, ka, lai gan mēs esam izmantojot Chrome apmeklēt CS50IDE,
iekšpusē CS50IDE ir tās pašas versija interneta pārlūku tieši tagad.
Un tā vietā, sarežģīt lietas, kā, piemēram,
Es iešu uz priekšu un vienkārši kopēt šo URL.
Es iešu uz priekšu un vienkārši atvērt savu Chrome logu.
Tātad tur nav burvju šeit, ne CS50IDE.
Es esmu tikai gatavojas burtiski ielīmēt mans J Harvard URL un hit Enter.
Un voila, tagad es, un teorētiski ikviens
internetā, ja es esmu konfigurēts atļaujas pareizi,
var apmeklēt šo failu.
Un tā nu, ja es teicu hello.html, voila, tur
ir mana neticami underwhelming mājas lapā.
Tātad, pieņemsim darīt ātri veselība pārbaudītu.
Jo visi, kas ir konceptuāls set up.
Un mēs esam patiesībā nav īsti māca, kā rakstīt HTML per se.
Kādi jautājumi līdz šim par to, kas tikko notika?
Jā.
Vai CS50 pieder šīs interneta lapas?
Kādā ziņā?
Labs jautājums.
Tātad CS50 ir nodibinājis CS50.io.
Mēs esam patiešām nopircis, ka domēna vārdu.
Un pēc būtības no jums, puiši ieejot CS50IDE,
jūs visi iegūt to, ko sauc par apakšdomēna.
>> Tātad IDE50-Malan, vai IDE50-Rob.CS50.io, tas ir jūsu unikāla adrese laikā
Mūsu domēna nosaukumu.
Tātad Kursa vajadzībām jums ir sava unikāla adrese.
Bet mēs esam vienkāršotas lietas, ko pērkot augšējā līmeņa domēnu, CS50 dot
I / O un tad visi pārējie ir iekšpusē, kas, tā sakot.
Un mēs būsim atpakaļ, ka pēc pāris nedēļām, iespējams,
īpaši galīgo projektu laiks, kad daži no jums
varētu vēlēties, lai saņemtu savu domēna vārdu.
Tas ir tiešām salīdzinoši vienkārši.
Viss kārtībā.
Tātad pieņemsim tagad darīt.
Es iešu atpakaļ CS50IDE, kur manu failu tieši tagad,
hello.html, nav tik interesanti.
Es gribētu kaut ko darīt nedaudz nicer nekā.
Tāpēc es esmu gatavojas darīt kaut kas līdzīgs šim.
Ļaujiet man atvērts paragraphs.html.
Tātad tas ir fails es rakstīju iepriekš.
Tajā augšu tā, piemēram, vienmēr, mums ir komentāri.
Bet HTML, komentāri izskatās mazliet atšķirīgs.
On line trešajā un līniju 14, jūs skatīt sintakse sākt komentāru
un galu komentāru.
>> Bet neviens no sīkumi starp jautājumos funkcionāli.
Tas ir tikai piezīmi cilvēks, kas notiek šeit.
Un tikpat ātri veselība pārbaudiet, ja es ritiniet uz leju,
kāda ir skaidrs jauns tag, ka mēs esam ieviesuši?
Par līdz šim mēs esam redzējuši tags ir atvērti kronšteins HTML, galvas, virsraksts, un ķermenis.
Bet kas ir acīmredzami jauns tagad?
>> Jā, tā p.
P tag vai punkts tag.
Un tad es vienkārši aizņēmusies kādu noklusējuma Latīņu teksta, lai veidotu savus punktus.
Jo tas, ko es gribēju pierādīt ir, kā jūs varētu
pārstāvēt teksta punktus HTML.
Un tā, kādi ir sāk notikt šeit ir tas, ka tur ir jau
modelis attīstās.
Un ļaujiet man iet uz priekšu un darīt to.
Ļaujiet man vispirms izslēdziet Apache.
Un es esmu gatavojas pateikt to, lai sāktu sevi atkal iekšā šodienas avota septiņiem
m katalogs.
Tāpēc, ka man ir pieejams viss.
>> Un tagad, ja es dodos atpakaļ šī direktorija sarakstā,
paziņojums es redzu katru failu no šodienas.
Un jūs redzat Nākamā problēma, kas, mēs
paskaidros lai dara tieši to.
Ja es atveru paragraphs.html, tas varētu kā arī izskatās programmēšanas valoda
jums, ja jums nav runāt vai lasīt Latin.
Bet tas ir tikai trīs punkti teksta, kas iezīmē HTML.
>> Un paziņojums punktu pauzes starp tiem.
Jo izrādās, un pat tad, ja jums
varētu rasties vēlme to darīt, tā kā reālajā pasaulē,
ja jūs vēlaties, lai līnija pārtraukumi starp lietām,
jūs varētu vienkārši darīt, un hit Saglabāt.
Un tagad, ja es pārlādēt šeit, paziņojums ka viss vienkārši nojauc kopā
tikai viens lāse teksta.
Jo HTML ir sava veida mēms valodā.
>> Tas ir paredzēts, lai tiktu izmantoti tādi tā, ka pārlūks būs tikai
darīt tieši to, ko jūs pateikt to darīt.
Tātad, ja jums nav pateikt to dod man jaunu punktu,
Jūs neesat gatavojas redzēt jaunu punktu.
Un patiesībā, ko pārlūkprogramma gatavojas darīt
ir pat tad, ja jūs hit Enter, teiksim atkal un atkal
un atkal, pārvietojot šo teksta veidā uz leju uz ekrāna un pēc tam saglabājiet
un pēc tam pārlādēt, pārlūkā notiek sabrukt visu šo atstarpēm
vērā tikai vienu, redzamā atstarpes.
Viss kārtībā.
Tātad tas ir tag punkts.
Un tā, kāda ir modelis kas ir jaunattīstības šeit?
Nu, tas, šķiet, ir gadījums, ka HTML ir visu par sākuma tagu
un beidzas tag.
Un kas ir tag?
Nu, tas ir tikai rieciens sintaksi.
Atvērt kronšteins, atslēgvārds, slēgta kronšteins, ir tag.
Vai sākt tag.
Un tad, kad tu esi darīts izteikt sevi,
kā jūs esat pabeidzis ar punktu, jūs darīt runāt pretējo.
Bet pretī nav gluži atpakaļ.
>> Jūs vienkārši prefiksu pats tag s nosaukt ar slīpsvītra, kā šis.
Viss kārtībā.
Tātad ne viss, kas aizraujošs.
Un patiesībā, mēs esam ne padarot web viss, kas vēl interesantāku.
Ko darīt, ja es gribu, lai lietas lielāki un treknrakstā?
Tātad izrādās, ka šeit ir piemērs in headings.html, kur manā ķermenī,
Man ir H1 tagu, H2, H3, četriem, pieciem, sešiem vai, kas visi
likties diezgan arcane.
Bet, ja es eju atvērt šo Piemēram, pieņemsim to apskatīt.
Headings.html.
>> Tātad pārlūki pēc noklusējuma var dot jums teksta tas ir liels un drosmīgs ar atšķirīgu izmēru.
H1 ir liels.
H6 ir mazāks un pēc tam viss pārējais pa vidu.
Tātad tas ir interesanti, bet joprojām nav īsti web es zinu.
Ko darīt, ja mēs gribam, lai man ir kaut kas līdzīgs sarakstā. .
Tātad, šeit ir aizzīmēm saraksts Trīs no Harvardas namu.
>> Kā jūs iet par to izdarīt?
Nu, ieskatieties list.html.
Un šeit mēs redzam Mazliet funkiness
bet pieņemsim apsvērt to, kas notiek.
Tātad, pamatojoties uz to, ko jūs esat tikko redzējām, UL stendi Nekārtots saraksts.
Nekārtots saraksts tikai nozīmē aizzīmēm.
Nav numuri.
Tur ir arī kaut kas sauc pasūtīts sarakstu, kas ir OL pie tag.
Tad LI, saraksts prece ir viss tas nozīmē.
>> Un tā tas automātiski numuri viss jums.
Bet atkal, visas manas iespiedumiem un baltā telpa ir tikai manis dēļ.
Pārlūks nav faktiski gatavojas rūpēties.
Tātad, pat ja jūs nevar to izdarītu, vienkārši, lai būtu skaidrs,
Jums nevajadzētu pat ja Pārlūkprogramma vēl
jāspēj saprast to tikai naudas sodu.
Es esmu hitting reload manā pārlūku, es esmu noklikšķinot reload
un nekādas izmaiņas notiek jo pārlūkā vēl
darot tieši to, ko es saku to darīt.
>> Viss kārtībā.
Tātad tas ir viss ir tikai teksts.
Tagad pieņemsim kaut ko interesantu darīt.
Es iešu uz priekšu un aizņemties kādu no šo HTML.
Es iešu uz priekšu un izveidot jaunu failu šeit.
Un mēs to saucam par rick.html.
Mums ir nesamērīgi Lietotas kaut
sauc rick roll šajā klase šogad, es nezinu,
tas vienkārši notika organiski.
>> Un tagad tas ir got no kontroles.
Tāpēc es esmu tikai gatavojas iet ar to.
Un, ja es eju uz Google Attēli un Rick Astley.
Ja jūs nezināt, kāpēc mēs to darām Tas, tikai lasīt līdzi Wikipedia.
Katru reizi, kad esat noklikšķinājis uz saites, kāds ir bijis kaut kur smejas.
Un ļaujiet man iet uz turieni ahead-- mēs ejam, pieņemsim apskatīt šo attēlu.
>> Tātad šeit mums ir attēls Google attēli.
Un pieņemsim, ka tas ir saprātīgi visur internetā.
Tāpēc es esmu gatavojas pieņemt, tas ir OK, lai mani faktiski īstenot šo manā mājas lapā.
Es iešu uz priekšu un kopēt attēla URL.
Un tagad, ja es dodos atpakaļ uz Cloud 9, pieņemsim redzēt, ko es varu darīt šeit.
Tātad, šeit ir tikai mājas lapa.
Tas ir Rick Astley, haha, Es esmu gatavojas tagad iet atpakaļ
manu pārlūku, papildināšanas, un interesants.
>> Kur ir Rick?
Tāpēc ļaujiet man redzēt to, kas ir noticis.
Patiesībā, es esmu gatavojas izlikties, piemēram, es to nedarīju.
[Dzirdams] nodot viņam šeit.
Mēs būsim atpakaļ, ka pēc brīža.
Tātad, šeit ir rick.html.
Tātad tas nav Rick Astley.
Tātad izrādās, mēs varam faktiski pievienot viņu šeit.
Tas ir Rick Astley.
Es esmu gatavojas teikt sniegt man tēlu, kura avots ir URL es tikko kopēts, kas
acīmredzot ir laimīgs dzimšanas kaut vai otru.
>> Un tagad es esmu gatavojas aizveriet kā šis tag.
Tātad šis ir iesaiņošana super garš.
Bet paziņo, ka viss, ko es esmu darīts, ir atvērts bracket attēls,
avots ar atribūts šo.
Un tas ir ļoti garš URL.
Un pašās beigās, šis paziņojums.
Kāpēc es esmu darījis slash leņķveida kronšteins tā vietā, lai, tāpat kā visi citi tag,
kam atklātu kronšteinu, IMG, slēgta kronšteinu?
Just veikt uzminēt pat ja jūs nav familiaritāte whatsoever
ar HTML pirms tam.
>> Tātad, tas ir, kā tas aizveras komanda, bet kāpēc
tas nav īsti darīt intuitīvi jēga kaut ko darīt nedaudz vairāk
runīgs tāpat aizvērt attēlu?
Jā.
Just semantiski, nav sajūtu sākot attēlu un beidzot attēlu,
Tas ir vai nu tur, vai tā nav.
Tātad tas nav jēgas atstāt plaisu kaut kas cits iekšpusē attēlu.
Jūs vienkārši nevar darīt.
Un tā sintakse kopumā būtu tikai
darīt slīpsvītra iekšā atvērtās tag vai starta tag
un pēc tam nospiediet Saglabāt.
>> Tātad, ja es tagad pārlādēt šo failu, tagad Man labu interneta lapu vārīšanas šeit.
Un mēs noteikti varētu tiešām kaitina cilvēki
, iestrādājot vietā piemēram, YouTube saiti.
Un patiesībā, jebkurā laikā esat kādreiz devies uz YouTube,
un ļaujiet man patiešām nejauši rick roll sevi šeit.
Tātad Rick roll.
Tātad rick roll-- es iešu šeit.
>> [Mūzikas atskaņošanai]
>> OK, viens cilvēks patika.
Tātad paziņojums visu šo laiku, ja jums noklikšķiniet uz Koplietot saiti, jūs, protams,
iegūt URL, ka jūs faktiski var iegultu e-pastu vai tiesu medicīnas attēlu
vai ar problēmu, kas vai ar a slide.
Un tagad, ja es tā vietā noklikšķiniet uz embed, ievērosiet, ka visu šo laiku, šī stuff
ir tur.
Es iešu uz priekšu un kopēt to.
>> Un tikai, lai mēs varētu redzēt labāk, es esmu gatavojas ielīmēt to manā teksta redaktoru.
Ievērojiet, ka tas, ko YouTube ir stāsta jums.
Katru reizi, kad apmeklējat YouTube video, ja jums
vēlaties, lai iegultu video par jūsu mājas lapa, vienkārši paķert to.
Tātad šis ir vēl viens HTML tagu sauc iframe.
Vai in līnijas rāmi.
Tātad, tas ir pārāk izskatās mazliet vairāk sarežģītāka nekā visiem pārējiem.
Tātad izrādās, ka attēlu tag un acīmredzot iframe tag
ņemt to, ko sauc atribūti.
>> Un tas ir vēl viens gabals sintakses HTML.
Papildus tag s nosaukums, open kronšteins tag nosaukums,
jūs varat kontrolēt uzvedību tagu , ņemot visu ķekars atribūta
ir vienāds ar vērtību.
Atribūts vienāds vērtību.
Un tā piemēram, YouTube ir stāsta mums
ja jūs vēlaties, platumu šo video būt 420 pikseļi un augstums
lai būtu 315 pikseļi, kas ir kā jūs izteikt to HTML.
>> Par video avots notiek lai būt, ka ilgi YouTube URL
un pēc tam daži citi sīkumi tāpat rāmis robeža ir nulle,
tā ka, iespējams, nozīmē, ka ir nav robežu ap lieta.
Atļaut visu ekrānu, iespējams, nozīmē, ka lietotājs
var noklikšķināt uz pogas un faktiski pilna ekrāna video.
Tātad, ja es tiešām gribu būt iespaidīgs šeit Rick dot HTML,
nevis izmantot attēla tagu, ļaujiet man dzēst, ka tā vietā, lai ielīmētu to.
Un tagad pārlādēt.
Un tagad šeit mēs aiziet vēlreiz.
Labi, tas ir pietiekami.
Visas tiesības tāpēc es centīšos grūti nav to darīt atkal.
Tātad, kādi ir daži no takeaways šeit?
Tātad HTML, kā neglīts kā šajās mājas lapās ir, ir faktiski diezgan vienkāršs.
Tas nav programmēšanas valoda.
Tas nav funkcijas.
Tas nav cilpas.
Tas nav nosacījumiem.
Viss, kas ir, ir desmitiem dažādi tags, katrs no kuriem
ir nulle vai vairāk atribūtus.
Un patiesībā, kas ir jautri par HTML, kā jūs sākat nodoties
ir tas, ka tas ir ļoti sevi teachable.
>> Viss, kas nepieciešams, ir izpratne vispārējā sistēmā HTML.
Kas ir tag, kas ir atribūts, Kā jūs faktiski konfigurēt tīmekļa lapu
sekojoši.
Un viss pārējais ir patiešām rezultāts meklē up tiešsaistes atsauce
vai googling kā to izdarīt dažus paņēmiens vai kā mēs esam redzējuši,
apskatot Facebook avota kods, aplūkojot mājas lapā
ka jums patīk pie tā ir pirmkodu un saprast, kā izstrādātāji tur
faktiski noteiktas lietas.
>> Tātad, mēs varam darīt, attēlus, kā arī.
Un patiesībā, mēs to darīja pirms brīža.
Ļaujiet man iet uz priekšu un tikai parādīt jums.
Lūk, daži parauga kodu.
Ja jūs kādreiz vēlaties redzēt kašķīgs kaķis.
Tāpēc ievērosiet, ka es varu ir attēla tagu šeit.
Un man komentāru virs tā.
Man alternatīva teksta pieejamības.
Tātad, kāds, kurš, izmantojot ekrānu lasītājs dēļ redzes
var faktiski tad ir viņu ekrāna lasītājs saka kašķīgs kaķis.
Jo, ja viņi nevar redzēt attēlu, viņi
var vismaz būt savu datoru pateikt viņiem mutiski, kas tas ir.
Un avots šajā failā ir cat.jpeg.
Tātad faktiski, ja es patiešām gribēju get gudrs, ko es varētu būt done--
Es apsolu neiet uz Rick Astley, tāpēc Es esmu gatavojas google kaķis vietā.
Un, ja es eju uz Google Images šeit, un mēs pieņemam
ka tas ir priekšstatu par manu kaķi.
>> Pieņemsim, ka man ir kontrole noklikšķinājuši vai pa labi noklikšķinājis uz to, nejauši
rāpojošs.
Un cat.jpeg es eju ietaupīt uz mana galda.
Ļaujiet man tagad iet atpakaļ uz mākoni 9.
Ievērojiet, ka šeit, es varu iet augšupielādēt lokālos failus.
Un, ja es greifers šo fails, cat.jpeg, paziņojums
ka es varu vilkt to un nometiet to mākonis 9
un tas notiek, lai kliegt uz mani šeit.
>> Tāpēc, ka mēs esam jau devis jums cat.jpeg failu,
bet tas ir super viegli paķert fotoattēlu, ka jūs esat
ņemts no Facebook vai Flickr vai tamlīdzīgi
un faktiski vilkt un nomest to uz mākonis 9, un tad dara to
daļa no jūsu personīgajai mājas lapā vai problēma
noteikti septiņi vai astoņi, kā mēs drīz redzēt.
Un tad, kad jūs beidzot apmeklēt šo kaķi,
pieņemot, ka es lejupielādēt šo pašu kaķis, paziņojums that-- tas bija burvīga.
>> Ko jūs redzat ir kaut kas līdzīgs šim seju šeit.
Tātad failiem, Lūgums ietvaros mājas lapā
var būt vai nu vietējā savā konts vai vadība uz kādu citu serveri
kā gadījumā ar Rick Astley foto mazliet atpakaļ.
Tātad, ja else-- ko vēl mēs varam darīt šeit?
Tātad, pieņemsim to apskatīt turpmāk.
Jūs zināt, kas ir sava veida atdzist?
>> Līdz šim mēs esam pieņemšanas ļoti statiskās tīmekļa lapas.
Es gribu, lai spice lietas uz augšu šādi.
Es vēlos, lai mana meklētājprogrammu.
Tāpēc, lai padarītu meklētājprogrammu, pieņemsim iet uz priekšu un sākt darīt to.
Es iešu uz priekšu un radīt jaunu failu sauc search.html.
Un mēs esam prefabed versijas tiešsaistē.
Whoops.
Nelietojiet ielīmēt jūsu termināla logā.
Paneļu versijas tiešsaistē.
Un es esmu gatavojas sākt šādi.
Tātad, šeit ir sākums failu sauc search.html.
Es esmu gatavojas, lai saglabātu to šodienas avots direktorijā.
Es esmu gatavojas, lai izsauktu šo meklēšana.
Patiesībā, mēs padarīt to labāku.
CS50 Search un faktiski zīmolu tā.
Un tagad, es esmu gatavojas teikt kaut kā H1 CS50 Meklēt.
Un tad uz leju šeit, H2 Drīzumā.
Un tikai vēlreiz apkopot, H1 un H2 nozīmē ko attiecīgi?
>> Jā, tik liels un drosmīgs, un nav tik liels, bet tomēr treknrakstā.
Tātad, ja es glābt šo un iet vairāk nekā šeit, pieņemsim redzēt faila search.html.
Visi pa labi, un šis viens ir right-- [nedzirdama].
Stāvēt.
Deivids ir sajaukt.
Ak, tas ir labi tur.
Deivids ir idiots.
LABI.
Tātad tas ir.
Tātad CS50 meklēšana Drīzumā.
Tāpēc tagad, pieņemsim sintezēt ko mēs darījām pagājušajā nedēļā.
>> Kur mēs runājām par zemāka līmeņa mehānika HTTP.
Un šie jaunas idejas HTML, kas ir tikai
Tas iezīmēšanas valoda, kurā jūs pastāstīt pārlūkprogrammu tieši to, ko darīt
un īstenot savu meklētājprogrammu.
Tā vietā, lai vienkārši sakot Drīzumā, es esmu
gatavojas ieviest kaut kas ko sauc par veidlapu tag.
Un šādā veidā, es esmu gatavojas ir kaut kas līdzīgs ievades laukā.
>> Un sauc šo ieguldījumu lauka, es esmu gatavojas, lai izsauktu to Q.
Un šī ievades lauka tips Es esmu gatavojas teikt, ir tikai "tekstu".
Un teksta lauks, kā mēs redzēt, ir tikai teksta lodziņā.
Un tā tas nav sajūtu šeit ir kaut iekšpusē tā šajā brīdī.
Un tāpēc es esmu vienkārši dodas slēgt tagu ar ka
slīpsvītra tiesības tag pati.
Un tad es esmu gatavojas ir viena otru ieeju.
Ieejas tips vienāds iesniegt.
Un tad es esmu gatavojas aizvērt šo vienu too.
>> Un tagad es esmu gatavojas doties atpakaļ šeit.
Un jau mēs redzam, kaut arī diezgan neglīts, es esmu
ieguva sākumu mana meklēšanas lapa šeit.
Patiesībā, ļaujiet man mēģināt sakopt šo augšu mazliet.
Izrādās, ka uz ievade šeit, es varu būt
cits atribūts sauc vietturis.
Un es varētu redzēt kaut ko līdzīgu atslēgvārdu, vai precīzāk, vaicājumu par q.
>> Un paziņojums, tagad, man ir šāda veida pelēkā krāsā
ka pazūd kā Tiklīdz es sāku rakstīt,
bet tas ir iespējams, kaut jūs esat redzējis citās mājas lapās.
Man nav īsti nepatīk pogas Iesniegt.
Tāpēc es esmu patiešām gatavojas dot Pogas Iesniegt vērtību meklējumos.
Un tagad, ja es pārlādēt, ievēroju, ka mana poga kļūst nosaukts meklēšanu.
Ziniet, man nav īsti tāpat logotipu šeit.
Tātad Google Fonts ģenerators.
>> Es gribu, lai spice up šo tālāk.
Tātad CS50 meklēšanu.
Ļaujiet man izveidot savu logo.
Tas izskatās jauki.
Tāpēc tagad ļaujiet man glābt šo as-- come on.
Ja tas notiek?
Tur.
LABI.
Neatbildētos to.
Saglabāt kā.
Stulba pārlūkprogrammām.
Stand by, mēs ejam, lai noteikt šo vienreiz un par visām reizēm.
Tur mēs ejam.
Viss kārtībā.
Piedodiet.
Off diena.
Tagad tas ir bailīgs.
Iziet no pilnekrāna režīma.
Viss kārtībā.
>> Tagad, tāpat kā normāls persona, saglabāt attēlu kā.
Logo.gif.
Tagad es iešu uz CS50IDE un Es esmu gatavojas vienkārši paķert logo,
Es esmu gatavojas velciet to mans avots septiņi katalogs,
fails jau pastāv, es esmu OK ar to.
Tāpēc es esmu gatavojas ignorēt to jo man jau bija tā.
Un tagad, kā es varu atbrīvoties no šī?
>> Iesim uz priekšu šeit un darīt Image Source vienāds logo.gif.
Aizvērt šo.
Saglabāt.
Un tagad, ja es dodos atpakaļ uz manu meklēšanu lapas, šobrīd tas meklē diezgan laba.
Visas tiesības, tāpēc tas ir ne diezgan izdarījis kaut ko noderīgu.
Patiesībā, ļaujiet man mēģināt meklēt par kaķi un redzēt, kas notiek.
Kaķi.
Sasodīts.
Tas nav tikai darbs, acīmredzot.
Tātad, kas ir galvenais gabals ka trūkst šeit?
>> Tiesības, pat ja jūs nezināt nevienu HTML, Esmu sācis marķējums up tālruņa formu
un es esmu teicis to, kā iegūt izejvielas, man tekstlodziņu un iesniegt poga,
ko gabals ir acīmredzami trūkst?
Pieņemsim, ka mēs vēlamies, lai faktiski nokļūt šī lieta darbojas pareizi.
Kas mums jādara?
Mums ir nepieciešams, lai īstenotu atpakaļ beigām datubāzes vai meklētājprogrammu pati,
un kas notiek, lai paiet visai daudz laika, atklāti sakot.
>> Tātad, atcerēties to, ko mēs darījām pēdējo reizi.
Tātad, ja jūs meklēt kaut ko Google un jūs esat jau iepriekš izslēgts,
Atsaukt, instant meklēšanu.
Tāpēc ļaujiet man vērsties, kas off tā, ka tas faktiski
uzvedas kā vecāku skolas pārlūku, ja es tagad meklētu kaut ko līdzīgu kaķiem,
atgādināt to, ko URL izskatās.
Tas ir diezgan noslēpumains.
Bet iestrādāts tur, Atsaukt, ir slīpsvītra meklēšanu.
Jautājuma zīme Q ir vienāds kaķiem.
>> Un tas, šķiet, dod man viss ķekars meklēšanas rezultātiem.
Tātad, jūs zināt, ko es esmu gatavojas darīt?
Es esmu gatavojas aizņemties Google tikai minūti.
Es iešu pa šeit, un es esmu gatavojas teikt
ka tas veido rīcību vai galamērķis, tā sakot,
vajadzētu burtiski būt Google.
Un metode es gribēju to izmantošana būs minimāli.
>> Tātad, kas ir rīcība?
Rīcība ir weirdly nosaukts, bet tas tikai nozīmē,
kurš gatavojas rīkoties Šīs veidlapas rīcība?
Kad es noklikšķiniet uz Meklēt, kur būtu rezultāts iet?
Un, ja es tagad iet atpakaļ uz manu formu šeit un pārlādēt savu mājas lapu
un tagad meklēt kaut ko piemēram, suni, paziņojums tagad
Esmu atkal īstenoti Google.
Tiesības?
>> Ja es gribu, lai meklētu kaut ko cits, tas darbojas ne tikai suņiem,
tas darbojas arī kaķiem.
Tā arī strādā CS50.
Un OK, tas ir tikai zem whelming, vai ne?
Viss labi, bet tā faktiski darbojas.
Tātad, kas ir faktiski notiek?
Tāpēc es esmu mācījis manu pārlūku, izmantojot HTML, lai ņemtu informāciju no lietotāja
un faktiski nosūtīt šo ievade ar attālo serveri, izmantojot HTTP.
>> Un tāpēc, ka manā pārlūkprogrammā saprot HTTP, tā faktiski
būvēt lai tas, ko URL Es galu galā pār manu pārlūku,
paziņojums, kas notiek kad es meklēja suns.
Ja es noklikšķiniet uz Meklēt, ievērosiet, ka URL izmaiņas, kā es paredzēts
lai google.com/search~~V vaicājumu vienāds suns.
Un tas ir tāpēc, ka veidā zina, jo metode ir iegūt,
vienkārši pievienot to šo URL tur.
>> Tagad, lai šīs mājas lapas vēl ir neglīts.
Tātad pieņemsim iepazīstināt viens otru gabals sintakses ja mēs varam šodien.
Un tas ir kaut kas zināms kā kaskādes stila lapas.
Tāpēc ļaujiet man to apskatīt Šis piemērs šeit un redzēt
ja mēs varam secināt, kas notiek.
Tas ir CSS0.html.
Un tas ir, ja lietas saņemt nedaudz neglīts.
Jo diemžēl, pasaulē tīmeklī,
HTML vien nevar darīt visu.
Un tā, ja jūs vēlaties, lai stylize jūsu mājas lapā,
jums tiešām ir nepieciešams koncentrēties uz estētika savādāk.
Tātad šeit, man ir ķermeņa manu web lapa iekšpusē, kas ir liels div.
Un div tikai nozīmē sadalījumu.
Tātad tas ir kā punkts, bet tas nav tādas pašas semantiku
no daļas tekstu.
>> Tas tikai nozīmē, uz pārlūku, šeit nāk
liels taisnstūra reģions manas mājas lapa, es gribu rīkoties ar to speciāli.
Tagad, līnija 21 ir, ja tas div sākas.
Un tikai veikt minējums.
Kāda ir ietekme līnijas 21 par pārējie lapas saturu?
Centrēšanas to.
Tas ir viss.
Tātad mēs neesam redzējuši ceļu faktiski centrēšanas tekstu.
>> Faktiski, mans meklētājprogrammu, atšķirībā no faktiskā Google,
viss bija pamatots pāri pa kreisi.
Un tāpēc tagad rindā 21, es saku, hey pārlūku, izveidot sadalījumu lapā.
Dāvini man liels, neredzams taisnstūri.
Tas ir, kā es gribu domāt par mājas lapā.
Un tad stylize to šādi.
Inside šo citātus, Tagad, ir otrā valoda
ka mēs iepazīstināja šodien sauktie kaskādes stila lapas.
Par laimi, tas arī nav programmēšanas valoda,
tāpēc tas ir ļoti ierobežoti savā sintaksi, bet arī ļoti ierobežota tās funkcionalitāti
tā kā HTML ir visu par marķēšana up datus mājas lapā
un struktūra Web lapu.
CSS ir parasti apmēram tāds pēdējā jūdze, estētika,
iegūt izmēru un krāsu un izvietošana tieši labi, kas mājas lapā.
Un patiešām, tā ir izveidota ar galveno vērtību pārus.
>> Īpašums kā šis, tekstā saskaņot, kam seko kols,
kam seko vērtības, kas iestādē, kas šajā gadījumā ir centrs.
Un tagad pamanīs var ligzdot šīs lietas.
Ja es gribēju visu, kas Es esmu uzsvērusi, kas centrēts,
tāpēc man ir līnija 21 un atbilstošajā rindā 31.
Bet pieņemsim, ka tagad gribu pateikt Jāni Harvard, welcome uz manu mājas lapā.
>> Copyright simbols John Harvard.
Un domāju, ka es vēlos, lai vispirms šo līniju būt diezgan liels.
36 pikseļi.
Tātad tas ir pienācīgas lieluma.
Un es gribēju savu svaru būt drosmīgs.
Bet tad zemāk, ka Es gribu mazāku tekstu.
Un tālāk, ka es gribu vēl mazāka tekstu.
Piedodiet.
Šodien jūtas kā Brīvdiena.
>> Tāpēc tagad, ko es daru, lai paustu šo?
Šeit on line 22 ir iegultās div vai ligzdotu div, ja Jums gribas.
Tā arī ir savs stils tag.
Es norādīt fonta izmēru 36.
Es norādīt fontu svaru treknrakstā.
Down šeit, es tikai norādīt 24 pikseļi.
Un visbeidzot, atbilstoši 28., varu norādīt 12.
Tik vienkārši kā ātri veselība pārbaudītu un kā cilvēks lasot šo,
kurus vārdus uz ekrāna ir faktiski būs drosmīgs?
Kuras līnijas ir patiešām drosmīgs?
>> Vienkārši John Harvard.
Tiesības?
Jo tāpat kā līnija 22 saka hey pārlūku, šeit ir sadalījums lapas.
Padariet to burtu lielums 36 punktu.
Padarīt fonta svars treknrakstā.
Tiklīdz jūs sasniegsiet atbilstošais end tag
vai slēgta tag on line 24, tas nozīmē, hey pārlūku,
pārtraukt darīt kāds tas ir jūs darāt.
Un paziņojums, lai būtu skaidrs, kaut arī line 22 ir visi no šiem atribūtiem
līdzīga stila, kad jūs aizvērt tagu rindā 24,
Jums tikai minēt tag vārdu.
>> Jums nav atkārtot vārdu stilu vai kaut kas ir iekšā šos citātus.
Un tāpēc, ja es paskatos šo tagad manā pārlūkprogrammā, pieņemsim
apskatīt gala rezultātu. Laid mani priekšu, lai šo failu, kas ir CSS 0.
Un tas joprojām ir diezgan vienkāršs, bet kļūst diezgan interesants.
Bet izrādās, tur ir citas lietas, ko es varu darīt šeit,
un pie pastāv risks, ka Tas pilnīgi pretīgs,
ievērosiet šeit, ka manā ķermenis manā mājas lapā,
Es varu darīt kaut ko funny piemēram, BG vai fona krāsu.
>> Un ātri, kāda ir jūsu mīļākā krāsa?
Green es dzirdēju.
Viss kārtībā.
Tāpēc tagad, ja es hit reload tagad, mums ir zaļā mājas lapā.
Labi, tā ka tas nav slikti.
Un tagad, ja es gribu, lai tas patiešām cool, es varu darīt krāsu mana teksta
pat sarkanā krāsā.
Tātad, pieņemsim redzēt, kā tas izskatās.
Tagad tas meklē diezgan laba.
Un šeit lejā, ja jūs patiešām gribu sajaukt ar kādu
vai, ja jūs vēlaties būt viens no tiem cilvēkiem, kas
mēģina triks jūs vērā apmeklējot web lapa jo viņi apspēlēja Google
domāt, tur ir viss ķekars no atslēgas vārdi like-- pieņemsim redzēt, pārlādēt.
Ja tas iet?
Un tur tas mūs.
Viss kārtībā.
Tāpēc es saku kā malā, mēs runāt par šo stuff pēc dažām nedēļām
kad mēs runājam par drošība, ja jums tiešām
iegult veselas ķekarus Atslēgas vārdi, kas mājas lapā,
pat tad, ja viņi nav pamanāma cilvēks, kāds, piemēram, Google, protams,
joprojām var reāli atrast šo.
Labi, tā ka ir diezgan pretīgs diezgan ātri.
>> Un patiesībā, tas vēl nav viss ka daudz atšķirībā no manas mājas
lapa kā undergraduate, kas Es sāku googling apkārt, lai atrastu
pagātnes versijas manas vecās mājas lapām.
Tas bija diezgan slikti.
Patiesībā, es tomēr atrast viens tieši pirms klasē.
Bet tur ir sliktāks, kas tur.
Tas acīmredzot bija mans mājas lapa atpakaļ 1996. gadā.
Acīmredzot es domāju, tas bija lietderīgi lūgt cilvēkus savu vārdu
pirms tie varētu faktiski redzēt manu mājas lapā.
>> Un tad es viņiem parādīja kaut ko stulbu, droši vien.
Es izrakt vairāk nākamajai reizei.
Bet tagad, pieņemsim apsvērt mazliet dizainu.
Mēs esam runājuši par stilu.
Un šīs lapas līdz šim un visvairāk viss, ko es esmu uzrakstījis
ir diezgan tīrs stilistiski.
Bet ko par dizainu?
Nu, tur ir daudz atlaišanas ko es esmu dara šeit.
>> Es esmu minēts vārds krāsa pāris vietās.
Es esmu minēts burtu lielumu pāris vietas un drosmīgs pāris vietās.
Un būtībā, es esmu co sajaukšanos divas valodas.
Man HTML ar saviem tagiem un mans atribūti un tad visi pēkšņi,
starp pēdiņām, man ir otrā valoda šodien
sauc CSS, kas atkal ir tikai tie galvenā vērtība pāri vai šīs īpašības
atdalītas ar kolu.
>> Izrādās, ka daudz tāpat kā C, kur mēs
var sākt faktors out daži kodu header failus,
lai mēs varam darīt to pašu HTML.
Un solis pretī, ka ir šāds.
Ievērojiet, ka šī versija, CSS1.html ir strukturāli tieši tādu pašu mājas lapā.
Tāpēc es esam ieguvuši visu ķekars no divs, bet šoreiz, es esmu
gotten atbrīvoties no iesaiņojuma div kā jūs redzēsiet.
>> Un es esmu devis šos trīs divs augšējā, vidējā un apakšējā, unikāls ID.
Tas ir jauki, jo līdz dodot tiem šķelšanos
lapas unikālo identifikatoru, Es var atsaukties tos citur.
Kur?
Nu, ļaujiet man ritiniet uz augšu.
Un līdz šim, jebkurā laikā mēs esam paskatījās pie galvas tīmekļa lapas, kas ir
vienīgais tagu mēs esam bija vadītājs mājas lapā?
Mazliet skaļāk.
Tikai nosaukums līdz šim.
Bet izrādās, tur ir dažas citas lietas
Jūs varat likt tur, vienu no kas tā sauc stils tag.
Tātad pirms brīža, mēs skatījāmies pie stila atribūtu.
Izrādās tur ir stils tag.
Tā pieder iekšpusē vadītājs mājas lapā.
Un tagad paziņojums, ko es daru.
Man ir iekšā šis style tag šādi.
Es esmu burtiski minēts on line 20 Nosaukums birku, ka es gribu stylize.
>> Tad man ir atvērta cirtaini lencēm un slēgta cirtaini lencēm.
Tik līdzīgs garā uz C, bet atkal, tas nav funkcija,
tas ir tikai sintaktisko detaļa šeit.
Un tad, protams, es esmu stāsta pārlūku, hey pārlūku,
padarīt visu ķermeni lapas ir teksta izlīdzināšanu centra.
Un tad tas ir pateikt sekojošo.
Hey pārlūku, ja jūs redzat HTML elements vai tag lapā ka
ir unikāls identifikators, kas top, tāpēc hash simbols šeit nozīmē tikai
unikāla ideja augšu, iet uz priekšu un padarīt tās fonta izmērs 36
un tā fonta svars treknrakstā.
>> Hey pārlūks, elements, kura ID ir vidēja, panākot 24 pikseļi.
Un hey pārlūku, ja jūs redzētu Ideja apakšas, panākot 12 pikseļi.
In beigās efekts ir tieši sam.
Ja es iedziļināties CSS 1, tad lapa izskatās vienādi.
Bet mēs esam solis nedaudz labāks dizains.
Ļaujiet man tagad iet atpakaļ šeit, lai CSS2 un redzēt, ko vēl es esmu darījusi.
>> Tagad lapa ir ļoti, ļoti tīrs.
Patiesībā, es varētu fit visu saturs par lapā šeit.
Bet ko jaunu tagu ir I ieviests, protams?
Link.
Un tas nav labākais nosaukumu birku, jo tas nav posms nozīmē
ka mēs to zinām, bet tas nozīmē, saikne kādā citā failā.
Tas ir veids kā asas iekļaut C.
>> Tas ir veids, kā HTML teikt hey pārlūku,
iet saņemt saturu faila nosaukumu css2.css.
Attiecības, man, ir tas, ka tas ir stila lapas.
Un tiešām, tas, ko viens no S grāds CSS līdzekļiem.
Tas ir stila lapas.
Tas ir tikai teksta fails, kas satur visu ķekars īpašumu.
Tas ir viss ķekars stilu ka jūs vēlaties pieteikties uz lapu.
>> Un tā tas acīmredzot ir atsaucoties uz otro failu.
Un, ja es atvērtu, ka CSS2.css, ievērosiet, ka viss, ko es esmu darījusi
ir kopēt un ielīmēt visu Tas šajā failā.
Un tagad, pat ja jūs nekad neesmu kodē šo stuff pirms,
tikai apsvērt ar proverbial inženierija cepure
on, kāpēc tas ir labāks dizains, iespējams?
Faktorings šos CSS īpašības, liekot tos savā failā.
Pat ja mēs atrisināt šo problēmas, piemēram, piecas minūtes pirms
pašā pirmajā versijā.
>> Mēs esam nav uzlabojusies lapa stilistiski,
tas ir tikai labāk dizains savā ziņā.
Kāpēc tu domā?
Jā.
Elastīgāku kā?
Jā.
Tātad, ja jūs vēlaties, lai iet atpakaļ un mainīt lietas,
Tagad jums ir viena vieta kur jūs varat mainīt lietas.
Un patiesībā, kaut tāpat problēma noteikti septiņi,
kur mēs īstenot pētniecības akciju tirdzniecības mājas lapā,
kas notiek, lai būtu viss ķekars lapām.
Un tas būtu patiešām kaitinošas, ja jūs nolemjat, hm,
Man nav īsti patīk 24 pikseļi, es gribu ka tas ir 28 pikseļi vai nedaudz lielāks.
Un tad ir jādara globāla atrast un aizstāt
vai atvērt visiem jūsu mājas lapas failus vienkārši reāli mainīt vienu vērtību.
Ar faktoringa šos stilus vienā centrālā vietā,
Jūs tagad var atvērt vienu teksta failu in CS50IDE jebkurā programmā,
mainīt to, saglabājiet to, un darīts.
Jūs esat tie, pavairots izmaiņas visur.
Un ka būtu tāds pats kādā dot h failā, kā arī.
Tātad kādi jautājumi, tādējādi tālu uz šo sintaksi?
Labi, tāpēc mēs esam darījuši visu, šķiet,
izņemot faktiski īsteno hipersaites.
Un tā iesim uz priekšu un darīt to.
Ļaujiet man iet uz priekšu un izveidot jaunu failu šeit.
Es esmu gatavojas to nosaukt link.html, ielieciet šodienas kodu.
>> Un es esmu gatavojas darīt atvērt kronšteins doc tips html.
Kā malā, šī lieta tajā top, šis doc tipa deklarācija,
tas ir vienīgais, kas ir dīvaini ar izsaukuma zīmi.
Jums vienkārši ir to darīt tur, un tas nozīmē, ka mēs izmantojam HTML versiju 5.
Vecākas versijas valoda bija daudz ilgāk
virknes, kas jums nepieciešams, lai tur.
Tātad, šeit ir piemērs sauc saite.
>> Man vajag ķermeņa manā mājas lapā šeit.
Un šeit, a href Vienāds teiksim HTTP://www.disney.com
un mans mīļākais mājas lapā, mēs sakām.
Labi, tā ir ļoti nekaitīgs, lietotājam draudzīga lapa.
Ja es tagad iet manā direktorijā uzskaitot šeit un atvērt link.html,
mums ir hiper tekstu.
>> Un tiešām, tas ir, ja H HTTP nāk no.
Hiperteksta pārsūtīšanas protokols ir par tekstu pārceļot
ka ir hipersaites uz citiem resursiem.
Un tiešām, šeit ir pazīstams, ja retro, zils saite, ka, ja noklikšķināt,
faktiski man liek Disney.com.
Tagad, ak, kas iznāks drīz.
Labi, tāpēc tagad, kādi ir daži par sekām šo?
>> Un godīgi sakot, pasaule sāk lai iegūtu nedaudz vairāk pazīstams
un arī mazliet scarier bet arī nedaudz vairāk
sevis attaisnojams, kad jūs sākat izprast šīs lietas.
Jo izredzes ir, daži no jums, ja jūs iet izmantojot savu Gmail mēstuļu mapē vai pat
iesūtnē, jūs, iespējams, dabūt kādu e-pastu
kas ir jautā jums mainīt savu parole varbūt vai varbūt pārbaudīt
Jūsu PayPal akreditācijas dati vai plauktiņš.
>> Un patiesībā, iespējams, esat saņēmis kaut kas saka, piemēram, klikšķi šeit
lai atjaunotu savu PayPal paroli.
Un tagad, paziņojums, ja tas nav Disney.com
bet, piemēram, badplace.com un pārlādēt, ņemiet vērā, ka teksts šeit
Varētu teikt neko whatsoever.
Un patiesībā, tas ir tikai vārdi.
Kāpēc es tiešām būtu super ļaunprātīgs un teikt http://www.paypal.com.
>> Klikšķiniet šeit nomainīt savu PayPal parole un tagad pārlādēt.
Tas izskatās diezgan likumīgi, vai ne?
Es domāju, es nevarētu klikšķiniet uz Uzrakstīt ka ​​tikai saka, ka tas.
Bet paziņojums dihotomiju šeit.
Tajā teikts www.paypal.com, un patiesībā, pagaidiet minūti,
Mēs zinām, ka jūs vēlaties S drošībai.
Tāpēc tagad, dodieties uz www.paypal.com HTTPS, bet, ja jūs nekad neesmu izdarījusi pirms,
do nokļūt ieradumos Paceltais pār maz saites šeit.
Un tas ir grūti, lai redzētu uz ekrāna tur,
un tas nav viss, kas vieglāk šeit.
Bet ceļu uz leju šeit tiny maz stūrī
tas pārlūkprogramma faktiski pateiks, ka mēs ejam
līdz badplace.com nevis paypal.com.
Tagad, ja mēs ejam ar šo?
Visi piemēri mēs esam darījuši šodien, mēs esam cītīgi kodē un drukāti ar rokām.
Tīmekļa ir neticami neinteresanti kad jums grūti
kodu jūsu mājas lapas, lai saturu ir statisks un nekad mainās.
Protams, visas mūsu iecienītākās tīmekļa vietnes šodien,
vai tas ir Gmail vai Twitter vai Facebook vai kādu citu skaits
ir dinamisks.
Viņi mainās atbilde uz lietotāja ievadi
tāpat kā Google meklēšanas rezultātos.
>> Un tā trešdien, ko mēs darām, ir mēs atstājam HTML un CSS ieviešanu
aiz mums, un mēs par pašsaprotamu, ka mums tagad
zināt, un mēs ieviest jauna programmēšanas valoda
sauc PHP, kas patīk C, gatavojas sniegt mums
pilnvaras faktiski izveidot programmas ka paši radīt produkciju.
Šajā gadījumā, mēs, izmantojot PHP, lai radītu dinamiski tīmeklī
lapas, izmantojot šo jauno valodu.
Tik daudz par šo trešdien.
Tiksimies vēlāk.
>> [Mūzikas atskaņošanai]