1 00:00:00,000 --> 00:00:03,486 >> [RIPRODUZIONE DI BRANI MUSICALI] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J MALAN: Questo è CS50 e questo è l'inizio di settimana 7. 4 00:00:14,250 --> 00:00:15,060 Così bentornato. 5 00:00:15,060 --> 00:00:17,540 E si può ricordare che in quattro set problema, 6 00:00:17,540 --> 00:00:21,510 c'era un po 'di una caccia al tesoro per alcuni favolosi premi in base alle quali 7 00:00:21,510 --> 00:00:24,219 dopo a recuperare le immagini personale sia qui che a New Haven, 8 00:00:24,219 --> 00:00:27,468 si erano sfidati a trovare il maggior numero di quegli scienziati informatici, come si poteva. 9 00:00:27,468 --> 00:00:29,550 E abbiamo un intero mazzo di osservazioni. 10 00:00:29,550 --> 00:00:31,930 Ho pensato di condividere alcuni con voi qui oggi. 11 00:00:31,930 --> 00:00:35,100 >> E postiamo tutti questi online. 12 00:00:35,100 --> 00:00:39,310 Ma in particolare, ho voluto attirare la vostra attenzione a-- bene uno, 13 00:00:39,310 --> 00:00:42,670 Sam era in un bel po 'di loro generalmente in posa come questo. 14 00:00:42,670 --> 00:00:45,750 Ma sembra che a partire Questa mattina, il vincitore 15 00:00:45,750 --> 00:00:51,170 è stato un certo qualcuno di nome Ken con 24 del personale catturati sulla fotocamera 16 00:00:51,170 --> 00:00:54,600 o un po 'di più quando si prende in conto personale multipla nelle immagini. 17 00:00:54,600 --> 00:00:58,300 Nella foto qui è Ken prossimo a Maria a New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Ora, Ken, però, si trasforma fuori è un po 'di cassa angolo 19 00:01:01,300 --> 00:01:02,880 che non è ancora accaduto prima. 20 00:01:02,880 --> 00:01:05,713 Si scopre che non si è verificato a me di mettere in stampa fine problema 21 00:01:05,713 --> 00:01:09,710 set di quattro che dice che il personale sono ineleggibile per i favolosi premi 22 00:01:09,710 --> 00:01:13,130 perché Ken è, naturalmente, uno dei i fotografi del nostro personale. 23 00:01:13,130 --> 00:01:16,820 Ora, con quello detto, egli originariamente mi scrisse per dire 24 00:01:16,820 --> 00:01:19,180 si prega di non postare queste foto on-line. 25 00:01:19,180 --> 00:01:21,630 Penso che in gran parte perché la maggior parte delle foto 26 00:01:21,630 --> 00:01:24,499 che questo fotografo ha preso guardare un po 'di qualcosa come questo. 27 00:01:24,499 --> 00:01:25,040 E simili. 28 00:01:25,040 --> 00:01:28,990 >> Ma Ken vorrebbe che rassicurarvi che lui è un fotografo molto buona, 29 00:01:28,990 --> 00:01:33,190 egli è un professionista, prende foto che non sono sfocate, 30 00:01:33,190 --> 00:01:37,270 che sono meglio a fuoco, e lui ha preso un bel po 'del nostro personale. 31 00:01:37,270 --> 00:01:40,370 Ma piuttosto che solo riconoscere Ken, quello che abbiamo pensato di fare 32 00:01:40,370 --> 00:01:43,390 è passare attraverso la lista dei studenti effettivi che hanno presentato. 33 00:01:43,390 --> 00:01:48,640 E si scopre che Lancia con 15 foto a partire da questa mattina 34 00:01:48,640 --> 00:01:50,030 era il nostro vincitore. 35 00:01:50,030 --> 00:01:55,730 >> Ed è nella foto qui Lancia con Colton, con Skaz, con me stesso, e con Sam. 36 00:01:55,730 --> 00:02:00,230 Ma poi si scopre che a partire dal 11:46, quindi solo un po 'fa, 37 00:02:00,230 --> 00:02:04,380 Sono tornato alla mia email e l'ho trovato che abbiamo avuto ancora un altro di presentazione 38 00:02:04,380 --> 00:02:08,300 da uno studente di nome Bonnie la cui e-mail, ha detto solo questo. 39 00:02:08,300 --> 00:02:10,800 Non andare a mentire, sto In questo modo durante le lezioni. 40 00:02:10,800 --> 00:02:17,620 E poi proceduto a collegare solo 14 foto, un timido di Lance di 15. 41 00:02:17,620 --> 00:02:22,690 >> Ma nelle foto di Bonnie, si trasforma out sono stati più membri dello staff, Sam 42 00:02:22,690 --> 00:02:25,960 in mezzo a loro, così che cosa abbiamo pensato che vorrei fare è riconoscere entrambi. 43 00:02:25,960 --> 00:02:29,240 Quindi, oltre ad ottenere il Dropbox spazio che tutti coloro che hanno partecipato 44 00:02:29,240 --> 00:02:33,900 riceve, queste due sezioni saranno anche ricevere un bel pranzo adatta a loro 45 00:02:33,900 --> 00:02:36,100 e loro sezione compagni la prossima settimana. 46 00:02:36,100 --> 00:02:38,970 E così si sente da noi, Lance e Bonnie, a tale proposito. 47 00:02:38,970 --> 00:02:40,002 Così grandi complimenti a loro. 48 00:02:40,002 --> 00:02:42,210 Ora, quelli di voi che sarebbe come il pranzo, più in generale 49 00:02:42,210 --> 00:02:45,320 sapere che il pranzo CS50 a Cambridge e New Haven è questo Venerdì. 50 00:02:45,320 --> 00:02:48,510 Vai al sito della barra RSVP CS50. 51 00:02:48,510 --> 00:02:49,800 Ed ora una parola sui seminari. 52 00:02:49,800 --> 00:02:50,730 Più curricularly. 53 00:02:50,730 --> 00:02:52,490 Quindi stiamo avvicinando alla punto del semestre 54 00:02:52,490 --> 00:02:55,200 dove si dovrebbe iniziare pensando a progetti finali. 55 00:02:55,200 --> 00:02:59,309 Ed infatti, in poco, sarà le cosiddette proposte pre essere dovuti. 56 00:02:59,309 --> 00:03:01,850 Proposte, in modo pre hanno lo scopo di essere piuttosto basso impatto e davvero 57 00:03:01,850 --> 00:03:04,109 solo un'opportunità per di comporre una breve nota 58 00:03:04,109 --> 00:03:06,900 il vostro insegnamento compagni di venire a conoscenza lui o lei che cosa stai pensando 59 00:03:06,900 --> 00:03:09,140 potrebbe voler fare per il vostro progetto finale. 60 00:03:09,140 --> 00:03:11,730 >> Ora, molti studenti finiscono per web facendo basa progetti finali. 61 00:03:11,730 --> 00:03:13,800 E, naturalmente, siamo solo ora la scorsa settimana in questo 62 00:03:13,800 --> 00:03:15,890 e al di là di immersione in programmazione web. 63 00:03:15,890 --> 00:03:18,200 Quindi non preoccuparti se hanno assolutamente idea di come 64 00:03:18,200 --> 00:03:21,594 si dovrebbe costruire le idee che si potrebbe avere nella vostra mente. 65 00:03:21,594 --> 00:03:24,510 Questo è in realtà solo una funzione di forzatura per farti pensare e parlare 66 00:03:24,510 --> 00:03:25,650 con il vostro TF su di esso. 67 00:03:25,650 --> 00:03:28,810 Ma per aiutarvi in ​​questo, e con i progetti finali in ultima analisi, 68 00:03:28,810 --> 00:03:31,750 sapere che CS50 ha una tradizione di offrire seminari. 69 00:03:31,750 --> 00:03:36,084 >> E questi sono opzionali, le mani su, o lezioni in base alle opportunità 70 00:03:36,084 --> 00:03:39,000 per saperne di più su argomenti che sono un piccolo accessorio al corso del 71 00:03:39,000 --> 00:03:43,310 programma, ma comunque meraviglioso materiale di guidare progetti finali. 72 00:03:43,310 --> 00:03:46,840 E quindi questa è la lista che è Personale CS50 qui a New Haven 73 00:03:46,840 --> 00:03:48,600 hanno escogitato per quest'anno su iOS 74 00:03:48,600 --> 00:03:50,730 programmazione, Android programmazione, sviluppo del gioco, 75 00:03:50,730 --> 00:03:54,480 e mazzi di più strumenti e linguaggi e tecniche. 76 00:03:54,480 --> 00:03:56,780 >> Quindi tenete d'occhio il sito web del CS50. 77 00:03:56,780 --> 00:04:00,110 E nel frattempo, se si desidera registrare il vostro interesse in uno di questi, 78 00:04:00,110 --> 00:04:02,510 si giunge nel registro barra di CS50. 79 00:04:02,510 --> 00:04:05,770 E noi poi seguire per quanto riguarda il giorni e orari di volo e sedi 80 00:04:05,770 --> 00:04:09,090 e tutto sarà più everything-- essere in streaming e disponibile anche su richiesta 81 00:04:09,090 --> 00:04:11,750 dopo se non si può effettivamente farlo. 82 00:04:11,750 --> 00:04:15,800 Quindi, senza ulteriori indugi, sinistra fuori l'ultima volta con GET. 83 00:04:15,800 --> 00:04:19,610 >> E questo era come il messaggio che è stato all'interno della busta virtuale, ricordare, 84 00:04:19,610 --> 00:04:23,960 che siamo passati da router a router router tra un browser Web e un sito web 85 00:04:23,960 --> 00:04:24,487 server. 86 00:04:24,487 --> 00:04:26,695 E quel messaggio sembrava un po 'di qualcosa di simile. 87 00:04:26,695 --> 00:04:29,700 Questo è stato il messaggio più arcana che era in realtà all'interno di una busta 88 00:04:29,700 --> 00:04:34,440 scritta su un pezzo di carta la cui prima riga dice letteralmente, ottenere barra. 89 00:04:34,440 --> 00:04:37,830 >> E proprio come un controllo di integrità, che cosa ha fatto barra indicano? 90 00:04:37,830 --> 00:04:40,455 Che cosa significa quando barra richiesta di un sito web? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Si richiede tutto il tempo. 93 00:04:44,250 --> 00:04:47,333 La maggior parte ogni volta che si visita un sito web, voi in realtà non digitare un nome di file. 94 00:04:47,333 --> 00:04:50,960 Probabilmente solo andare a Facebook.com, inserire, gmail.com, o simili. 95 00:04:50,960 --> 00:04:52,260 E cosa rappresenta barra? 96 00:04:52,260 --> 00:04:53,506 Che il file? 97 00:04:53,506 --> 00:04:54,630 O che cosa pagina, in particolare? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> L'indice, sì. 100 00:05:00,720 --> 00:05:01,810 Così la pagina di default. 101 00:05:01,810 --> 00:05:04,810 Quindi, se non si specifica un file nome come inizieremo a vedere, 102 00:05:04,810 --> 00:05:07,750 si sta effettivamente chiedendo solo dammi la pagina predefinita di Facebook 103 00:05:07,750 --> 00:05:10,800 o darmi mia casella di posta o dare me la pagina predefinita di notizie 104 00:05:10,800 --> 00:05:12,510 sul sito web della CNN o simili. 105 00:05:12,510 --> 00:05:15,220 E un server quindi risponde quel messaggio con qualcosa 106 00:05:15,220 --> 00:05:18,420 in questo modo, dire di sì, io parlare versione HTTP 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, che è uno stato codice che noi esseri umani raramente 108 00:05:21,130 --> 00:05:22,790 mai vedere perché è buono. 109 00:05:22,790 --> 00:05:26,640 Perché significa OK, la richiesta è stata ricevuta e gestita correttamente. 110 00:05:26,640 --> 00:05:28,960 E il tipo di contenuto apparentemente in risposta 111 00:05:28,960 --> 00:05:31,170 è abbastanza spesso, ma non sempre, il testo. 112 00:05:31,170 --> 00:05:32,580 E in particolare, HTML. 113 00:05:32,580 --> 00:05:34,760 E questo è in realtà dove guardiamo oggi. 114 00:05:34,760 --> 00:05:37,140 >> Quindi, in realtà, ho intenzione di andare avanti e di aprire un browser. 115 00:05:37,140 --> 00:05:40,410 Ho intenzione di utilizzare Chrome, è possibile utilizzare più qualsiasi browser nelle settimane a venire. 116 00:05:40,410 --> 00:05:42,410 Si consiglia generalmente di Chrome perché è particolarmente 117 00:05:42,410 --> 00:05:43,750 buono per gli sviluppatori di software. 118 00:05:43,750 --> 00:05:46,070 Ha un sacco di costruito in strumenti che rendono più facile 119 00:05:46,070 --> 00:05:49,800 di sviluppare non solo HTML e CSS, cose inizieremo a parlare di oggi, 120 00:05:49,800 --> 00:05:51,530 ma anche altre lingue. 121 00:05:51,530 --> 00:05:55,530 >> E ho intenzione di andare avanti e andare a-- Io vado a controllare o clic destro 122 00:05:55,530 --> 00:05:57,210 cliccare in qualsiasi punto di una pagina web. 123 00:05:57,210 --> 00:05:59,070 E ho intenzione di andare in Inspect Element. 124 00:05:59,070 --> 00:06:03,850 E ho intenzione di modificare la mia schermo solo un po 'qui. 125 00:06:03,850 --> 00:06:05,790 Mi permetta di spostare questo al fondo. 126 00:06:05,790 --> 00:06:08,140 Quindi questo è ciò che si chiama Ispettore di Chrome. 127 00:06:08,140 --> 00:06:11,010 Quindi questo è come un debug strumento integrato in Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Tutti voi già hanno questa se siete stati con Chrome. 129 00:06:13,520 --> 00:06:17,169 E permette di vedere cosa sta succedendo in sotto la cappa di una certa pagina web. 130 00:06:17,169 --> 00:06:19,210 Quindi cerchiamo di realmente prendere un guardare a questo come segue. 131 00:06:19,210 --> 00:06:21,251 Ha modo più funzioni e ci preoccupiamo per oggi. 132 00:06:21,251 --> 00:06:22,760 Ma c'è queste schede qui. 133 00:06:22,760 --> 00:06:25,890 Elementi, di rete, le fonti, timeline, e alcune altre cose. 134 00:06:25,890 --> 00:06:27,800 Io vado a cliccare su Rete per un momento. 135 00:06:27,800 --> 00:06:30,500 >> Ed è un po 'opprimente a prima vista qui. 136 00:06:30,500 --> 00:06:34,190 Ma quello che ho intenzione di fare è lasciare mi semplificare un po '. 137 00:06:34,190 --> 00:06:37,560 Ho intenzione di accendere il registrazione luce in modo che è rosso. 138 00:06:37,560 --> 00:06:39,140 E ho intenzione di dire conservare log. 139 00:06:39,140 --> 00:06:41,015 E questo è solo un po ' cosa che ho capito 140 00:06:41,015 --> 00:06:44,120 nel corso del tempo che sta per risparmiare tutto ciò che accade nel browser. 141 00:06:44,120 --> 00:06:50,030 E ora ho intenzione di andare a http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> A dire il vero, facciamo www per buona misura, tagliare. 143 00:06:52,690 --> 00:06:53,643 Invio. 144 00:06:53,643 --> 00:06:56,180 Così un URL che molti di si potrebbe avere visitato. 145 00:06:56,180 --> 00:06:58,830 E ora di Facebook web pagina viene in su in cima. 146 00:06:58,830 --> 00:07:02,350 E poi tutta una serie di roba volato sul fondo. 147 00:07:02,350 --> 00:07:04,830 Ed infatti, si scopre che quando si visita Facebook.com, 148 00:07:04,830 --> 00:07:09,320 non sei solo facendo una richiesta HTTP, si scopre che sta per Facebook.com 149 00:07:09,320 --> 00:07:14,320 invia 41 di quelle buste, ciascuno con la propria richiesta di ottenere, 150 00:07:14,320 --> 00:07:18,360 come indicato, seppur dietro lo schermo qui, nella parte inferiore dello schermo, 151 00:07:18,360 --> 00:07:24,040 indica che, in effetti, il mio Browser ha fatto 41 richieste. 152 00:07:24,040 --> 00:07:29,689 >> E in totale, ha trasferito 861 kilobyte e ci sono voluti per qualche ragione 153 00:07:29,689 --> 00:07:31,730 ben otto secondi scaricare tutto questo. 154 00:07:31,730 --> 00:07:33,790 Ecco, questo è in realtà un po 'strano che il sito di Facebook vorrebbe che 155 00:07:33,790 --> 00:07:35,600 lungo, ma così sia in questo caso. 156 00:07:35,600 --> 00:07:39,520 Ora, tutto questo non mi interessa davvero circa eccezione per la richiesta più in alto. 157 00:07:39,520 --> 00:07:46,440 Così andiamo a questo qui e fatemi zoom out solo per un attimo. 158 00:07:46,440 --> 00:07:47,754 >> E lasciatemi ingrandire questa. 159 00:07:47,754 --> 00:07:50,670 Quindi quello che ho fatto a sinistra, anche se c'è un sacco di cose qui 160 00:07:50,670 --> 00:07:53,360 è Ho evidenziato Facebook.com e poi 161 00:07:53,360 --> 00:07:56,540 Noto che sto scorrendo verso il basso, scorrendo verso il basso, scorrere verso il basso, 162 00:07:56,540 --> 00:07:58,330 per richiedere le intestazioni. 163 00:07:58,330 --> 00:08:01,720 E vedrai che Chrome sta mostrando me essenzialmente il contenuto interno 164 00:08:01,720 --> 00:08:02,810 della richiesta che ho fatto. 165 00:08:02,810 --> 00:08:06,130 Non è la formattazione in tutto allo stesso A proposito, ma notate c'è menzione di ottenere, 166 00:08:06,130 --> 00:08:09,481 notate c'è menzione del padrone di casa, Facebook.com, il percorso, o barra, 167 00:08:09,481 --> 00:08:10,730 che è il file ho richiesto. 168 00:08:10,730 --> 00:08:12,930 >> E poi se ho scorrere eseguire il backup, faremo in realtà 169 00:08:12,930 --> 00:08:17,270 vedere che cosa ha restituito Facebook per me è tutte queste intestazioni. 170 00:08:17,270 --> 00:08:21,040 Quindi, all'interno di quella busta virtuale infatti sono un sacco di coppie di valori chiave. 171 00:08:21,040 --> 00:08:23,130 Una parola, i due punti, e quindi un valore. 172 00:08:23,130 --> 00:08:25,050 Una parola, i due punti, e un valore. 173 00:08:25,050 --> 00:08:26,160 Questi sono chiamati intestazioni. 174 00:08:26,160 --> 00:08:31,860 E non c'è modo più dettagliato qui di abbiamo effettivamente a cuore in questo momento. 175 00:08:31,860 --> 00:08:33,750 >> Ma questo non è seconda a ultima laggiù, 176 00:08:33,750 --> 00:08:38,809 noterà che il server di Facebook.com, infatti detto ecco che arriva un po 'di testo HTML. 177 00:08:38,809 --> 00:08:41,409 Quindi, tutto questo per dire che quando si richiede un web 178 00:08:41,409 --> 00:08:44,300 pagina da un browser a un Server, che server risponde 179 00:08:44,300 --> 00:08:47,630 con una busta propria all'interno del quale è testo. 180 00:08:47,630 --> 00:08:49,020 In altre parole, HTML. 181 00:08:49,020 --> 00:08:50,590 Hyper Text Markup Language. 182 00:08:50,590 --> 00:08:53,200 Che è un'altra lingua che vi presentiamo oggi 183 00:08:53,200 --> 00:08:57,740 che gli esseri umani o computer generano per implementare pagine web. 184 00:08:57,740 --> 00:08:59,580 >> In particolare, diamo un'occhiata a questo. 185 00:08:59,580 --> 00:09:03,277 Ho intenzione di tornare indietro ora al sito di Facebook. 186 00:09:03,277 --> 00:09:05,360 E io vado a solo Controllo click o click destro 187 00:09:05,360 --> 00:09:07,634 e fare clic su Visualizza sorgente pagina. 188 00:09:07,634 --> 00:09:10,550 E anche se non si utilizza Chrome, IE può fare questo, Firefox può fare questo, 189 00:09:10,550 --> 00:09:14,060 Safari può fare questo, anche se il menu opzioni potrebbero apparire un po 'diverso. 190 00:09:14,060 --> 00:09:18,990 E questo è il codice HTML che Marco e compagnia Facebook hanno scritto. 191 00:09:18,990 --> 00:09:24,640 >> E collettivamente, questa lingua qui implementa il blu e la pagina bianca 192 00:09:24,640 --> 00:09:26,370 che abbiamo visto poco fa. 193 00:09:26,370 --> 00:09:28,030 Ora, questo è un po 'opprimente. 194 00:09:28,030 --> 00:09:31,400 Ma se guardiamo in alto a sinistra, siamo intenzione di iniziare a vedere alcuni modelli. 195 00:09:31,400 --> 00:09:34,140 Sembra che ci sia un sacco di questi Staffa angolo aperto 196 00:09:34,140 --> 00:09:35,970 e poi c'è questa parola chiave HTML. 197 00:09:35,970 --> 00:09:38,330 Ecco un altro aperto staffa angolare e la testa. 198 00:09:38,330 --> 00:09:41,560 >> Ecco, se scorriamo e giù e giù, io sono 199 00:09:41,560 --> 00:09:43,820 intenzione di andare avanti e provare per cercare qualcosa. 200 00:09:43,820 --> 00:09:48,510 C'è modo sopra a destra qui è il corpo parentesi aperta. 201 00:09:48,510 --> 00:09:50,800 E ricordare da ultimo volta che abbiamo proposto 202 00:09:50,800 --> 00:09:53,364 che la pagina web più semplice che un essere umano possa scrivere 203 00:09:53,364 --> 00:09:55,030 potrebbe apparire un po 'qualcosa di simile. 204 00:09:55,030 --> 00:09:58,430 Tag HTML aperto, testa aperta tag, tag title aperto, 205 00:09:58,430 --> 00:10:03,230 poi chiuso titolo, cranico chiuso, aperto tag body, un testo, corpo chiuso, 206 00:10:03,230 --> 00:10:04,720 HTML chiuso. 207 00:10:04,720 --> 00:10:06,290 >> Ma una pausa qui solo per un momento. 208 00:10:06,290 --> 00:10:09,030 Questo codice, anche se hai mai scritto prima 209 00:10:09,030 --> 00:10:11,864 ma ancora non capisco bene quello che sta succedendo, sembra piuttosto buono. 210 00:10:11,864 --> 00:10:12,821 A destra, è molto pulito. 211 00:10:12,821 --> 00:10:14,120 E 'molto bello stilisticamente. 212 00:10:14,120 --> 00:10:16,190 Un sacco di rientro e lo spazio bianco. 213 00:10:16,190 --> 00:10:18,020 Di Facebook non è. 214 00:10:18,020 --> 00:10:23,190 Perché, dunque, tanto Facebook peggio di quello che a scrivere HTML? 215 00:10:23,190 --> 00:10:24,310 A quanto pare. 216 00:10:24,310 --> 00:10:26,899 >> A destra, questo è come uno su cinque per stile. 217 00:10:26,899 --> 00:10:29,315 C'è un motivo valido per loro di tagliare questi angoli. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Va bene, in modo che non si vuole rendere più facile per voi di leggerlo. 220 00:10:33,860 --> 00:10:36,940 Quindi, in un certo senso, sono offuscando esso, sorta di scrambling esso 221 00:10:36,940 --> 00:10:40,260 almeno esteticamente così che è più difficile per Myspace 222 00:10:40,260 --> 00:10:42,705 per andare a strappare loro homepage e il codice HTML per esso. 223 00:10:42,705 --> 00:10:45,080 Si scopre che con programmi però, tra cui Chrome, 224 00:10:45,080 --> 00:10:47,020 siamo in grado di pulire questo super-facilmente. 225 00:10:47,020 --> 00:10:49,420 Quindi non è così è come il motivo. 226 00:10:49,420 --> 00:10:51,290 Che altro potrebbe essere la causa. 227 00:10:51,290 --> 00:10:51,790 Già. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Già, i costi di spazio bianco di dati. 230 00:10:55,890 --> 00:10:56,598 Cosa intendi? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Si Esattamente. 233 00:11:02,979 --> 00:11:06,020 Se si preme il tasto Tab molto o la barra spaziatrice, considerare le implicazioni. 234 00:11:06,020 --> 00:11:10,060 Così ogni tasto della tastiera è un [Incomprensibile] rappresentato come un byte. 235 00:11:10,060 --> 00:11:14,560 >> Quindi supponiamo che Marco o uno qualsiasi degli sviluppatori in questi giorni colpisce la barra spaziatrice una sola volta 236 00:11:14,560 --> 00:11:17,899 in questa pagina HTML che rappresenta la home page di Facebook. 237 00:11:17,899 --> 00:11:19,690 E Facebook ha un sacco di utenti in questi giorni. 238 00:11:19,690 --> 00:11:24,030 Quindi supporre che l'homepage di Facebook è visitato da un miliardo di persone oggi. 239 00:11:24,030 --> 00:11:27,020 E qualcuno a Facebook ha premere la barra spaziatrice una sola volta. 240 00:11:27,020 --> 00:11:29,890 >> Così un byte aggiuntivo, un miliardo di richieste, 241 00:11:29,890 --> 00:11:32,790 quanto più dati Facebook il trasferimento su internet 242 00:11:32,790 --> 00:11:37,160 perché qualcuno ha colpito la barra spaziatrice sulla sua tastiera? 243 00:11:37,160 --> 00:11:41,660 Un miliardo di byte o un gigabyte di i dati vengono inviati dal server di Facebook 244 00:11:41,660 --> 00:11:43,626 di persone in tutto il per nessuna buona ragione mondo. 245 00:11:43,626 --> 00:11:44,750 Ora, questo è solo uno spazio. 246 00:11:44,750 --> 00:11:48,866 >> Immaginate se abbiamo effettivamente pulire questo cosa e frastagliata e aggiunto 247 00:11:48,866 --> 00:11:50,990 un sacco di spazio bianco e caratteri di tabulazione e spazi, 248 00:11:50,990 --> 00:11:53,656 si finisce per gigabyte di spesa, se non terra byte di spazio. 249 00:11:53,656 --> 00:11:56,640 E così super comune nel mondo reale di sviluppo web 250 00:11:56,640 --> 00:11:58,950 è quello di minify codice. 251 00:11:58,950 --> 00:12:01,280 E avremo finalmente a vedere come si potrebbe fare questo. 252 00:12:01,280 --> 00:12:04,630 >> Ma oggi, inizieremo a scrivere codice che in realtà è leggibile da noi umani. 253 00:12:04,630 --> 00:12:10,120 Si scopre, però, se si va indietro a questo strumento in Chrome Inspect Element, 254 00:12:10,120 --> 00:12:12,030 in precedenza, eravamo sulla scheda Rete. 255 00:12:12,030 --> 00:12:15,430 Si scopre che se si va al scheda Elementi, quelli reali 256 00:12:15,430 --> 00:12:19,230 Chrome è abbastanza stampato versione dello stesso HTML. 257 00:12:19,230 --> 00:12:20,640 Così abbiamo deobfuscated esso. 258 00:12:20,640 --> 00:12:22,472 Quindi non è partita per un computer. 259 00:12:22,472 --> 00:12:24,430 E ora si può effettivamente cliccare in giro e iniziare 260 00:12:24,430 --> 00:12:27,630 per vedere la gerarchia che è una pagina web. 261 00:12:27,630 --> 00:12:28,780 Quindi cerchiamo di fare questo in realtà. 262 00:12:28,780 --> 00:12:32,120 Ho intenzione di andare avanti e di aprire su il mio Mac un programma chiamato modifica del testo. 263 00:12:32,120 --> 00:12:35,490 E ricordare che questo è solo un super semplice programma di testo. 264 00:12:35,490 --> 00:12:37,490 Windows ha notepad.exe. 265 00:12:37,490 --> 00:12:39,820 E ho intenzione di Verbatim digitare la seguente. 266 00:12:39,820 --> 00:12:44,650 Doc tipo HTML, parentesi aperta HTML, chiuso staffa HTML, 267 00:12:44,650 --> 00:12:49,000 abbiamo la testa della pagina qui, l'estremità della testa della pagina qui, 268 00:12:49,000 --> 00:12:52,310 un titolo sarà come, ciao mondo. 269 00:12:52,310 --> 00:12:56,660 >> E poi qui, abbiamo bisogno il corpo della pagina web. 270 00:12:56,660 --> 00:12:58,050 Cassone coperto. 271 00:12:58,050 --> 00:13:00,700 E poi qui, ciao mondo. 272 00:13:00,700 --> 00:13:01,270 Tutto ok. 273 00:13:01,270 --> 00:13:03,350 Così abbiamo scritto una pagina web super veloce. 274 00:13:03,350 --> 00:13:06,675 Io vado a salvarlo come hello.html sul mio desktop. 275 00:13:06,675 --> 00:13:09,050 Il mio Mac di andare a lamentarsi, pensando che, aspetta un minuto, 276 00:13:09,050 --> 00:13:11,091 si tratta di un file di testo, fare si voglia chiamare .txt? 277 00:13:11,091 --> 00:13:13,300 Ma no, io voglio usare puntino HTML. 278 00:13:13,300 --> 00:13:16,140 >> E allora cosa c'è di bello se basta fare doppio clic su questo file, 279 00:13:16,140 --> 00:13:18,600 hello.html, ecco la mia pagina web. 280 00:13:18,600 --> 00:13:22,564 Purtroppo, io sono il unico al mondo 281 00:13:22,564 --> 00:13:23,980 chi può visitare questa pagina ora. 282 00:13:23,980 --> 00:13:26,734 Perché dove ci si vive apparentemente? 283 00:13:26,734 --> 00:13:27,650 E 'sul mio Mac, giusto? 284 00:13:27,650 --> 00:13:28,470 Che è inutile. 285 00:13:28,470 --> 00:13:30,390 Come nessuno in questa stanza figuriamoci su internet 286 00:13:30,390 --> 00:13:31,598 può effettivamente visitare quella pagina. 287 00:13:31,598 --> 00:13:33,820 Così oggi, abbiamo bisogno di introdurre un altro elemento. 288 00:13:33,820 --> 00:13:36,720 >> E per fare questo, ho intenzione di andare avanti e di aprire Cloud 9. 289 00:13:36,720 --> 00:13:40,090 Così Cloud 9 è, naturalmente, un nuvola servizio-- basato CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Che ha tutte le nostre aree di lavoro in esecuzione da qualche parte su internet. 291 00:13:44,890 --> 00:13:48,330 E ciò significa che tutti i nostri file sono già accessibili al pubblico. 292 00:13:48,330 --> 00:13:49,830 Quindi cerchiamo di andare avanti e fare questo. 293 00:13:49,830 --> 00:13:53,670 Ho intenzione di andare avanti e creare un nuovo file NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Io vado a salvarlo come prima come hello.html e cliccare su Salva. 295 00:13:58,819 --> 00:14:01,860 E ora solo per risparmiare tempo, ho intenzione di andare avanti e copiare incolla questo codice 296 00:14:01,860 --> 00:14:03,470 invece di digitarla nuovamente. 297 00:14:03,470 --> 00:14:04,550 E salvarlo. 298 00:14:04,550 --> 00:14:07,550 E così ora ho un file chiamato hello.html. 299 00:14:07,550 --> 00:14:09,710 Ma come fare io in realtà aprirlo come una pagina web? 300 00:14:09,710 --> 00:14:14,120 Beh, si scopre il costruito per CS50 IDE non è soltanto un compilatore come clang 301 00:14:14,120 --> 00:14:16,670 e un debugger GDB e come mazzi di altri programmi, 302 00:14:16,670 --> 00:14:21,140 c'è in realtà un vero e proprio pieno web server in esecuzione all'interno CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Tutti voi, vale a dire, avere un proprio server web. 304 00:14:23,900 --> 00:14:26,850 E un server web è solo un pezzo di software il cui scopo nella vita 305 00:14:26,850 --> 00:14:28,220 è quello di servire le pagine web. 306 00:14:28,220 --> 00:14:32,490 Per ascoltare le richieste dai browser e rispondere con bustine virtuali 307 00:14:32,490 --> 00:14:35,290 all'interno del quale è il contenuti che ho scritto. 308 00:14:35,290 --> 00:14:38,372 Quindi questo server web è fonte realmente libero e aperto. 309 00:14:38,372 --> 00:14:40,830 Dove open source significa solo un software che qualcun altro ha 310 00:14:40,830 --> 00:14:43,480 scritto che tutti noi possiamo effettivamente vedere e scaricare e addirittura 311 00:14:43,480 --> 00:14:44,780 modificare il codice sorgente. 312 00:14:44,780 --> 00:14:46,150 E si chiama Apache. 313 00:14:46,150 --> 00:14:51,450 >> E ce l'abbiamo fatta un po 'più facile utilizzare in CS50IDE chiamandolo Apache 50. 314 00:14:51,450 --> 00:14:53,780 In modo che si può effettivamente comprendere quanto segue. 315 00:14:53,780 --> 00:14:56,560 Io vado a dire Apache 50 prima. 316 00:14:56,560 --> 00:14:58,910 E poi sto solo andando a dire punti. 317 00:14:58,910 --> 00:15:01,080 E vediamo un po 'un po' messaggio arcano dicendo 318 00:15:01,080 --> 00:15:04,640 impostazione di Apache documento [? gruppo?] a casa, ubuntu, qualunque essa sia, 319 00:15:04,640 --> 00:15:05,770 tagliare spazio di lavoro. 320 00:15:05,770 --> 00:15:08,280 Avvio di web server Apache 2 con successo. 321 00:15:08,280 --> 00:15:11,330 >> Quindi per farla breve, io hanno appena premuto un pulsante 322 00:15:11,330 --> 00:15:18,000 e acceso un server web che è ora l'ascolto su internet sulla porta TCP 323 00:15:18,000 --> 00:15:20,587 80 ad un indirizzo specifico. 324 00:15:20,587 --> 00:15:22,420 E dice qui, e questo cambierà Based 325 00:15:22,420 --> 00:15:26,550 sul tuo nome utente e di altri fattori, a meno di notare ora se clicco questo, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard e così e così, notare che tutto questo tempo 327 00:15:30,211 --> 00:15:31,960 Negli ultimi settimane, potrebbe essere 328 00:15:31,960 --> 00:15:35,200 notato che il proprio nome utente è incorporato nella mano in alto a destra 329 00:15:35,200 --> 00:15:37,130 angolo di CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> E che in realtà è stato tutto questo cronometrare l'indirizzo al quale è possibile 331 00:15:41,050 --> 00:15:43,574 visitare tutti i file via web. 332 00:15:43,574 --> 00:15:45,990 Fino ad ora, non ha importato, perché in C, in genere 333 00:15:45,990 --> 00:15:48,073 vogliono cose che funzionano in un terminale, non sul web. 334 00:15:48,073 --> 00:15:50,800 Ma oggi, si parte la scrittura di codice basato sul web 335 00:15:50,800 --> 00:15:53,350 che noi vogliamo accessibile a URL pubblici. 336 00:15:53,350 --> 00:15:56,100 Così che cosa ho intenzione di fare è fare clic su questo URL. 337 00:15:56,100 --> 00:16:00,880 >> E noto che vedo abbastanza brutto indice, un elenco di directory, 338 00:16:00,880 --> 00:16:04,090 ma quale file salta fuori di te, probabilmente? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Ecco perché ho salvato il file nel mio lavoro. 341 00:16:07,870 --> 00:16:12,310 E quello che ho detto Apache web server è guardare nella directory di lavoro di David. 342 00:16:12,310 --> 00:16:15,300 E lasciare che qualcuno nella mondo a vedere questi file. 343 00:16:15,300 --> 00:16:19,050 >> E in effetti, se io ora cliccare su hello.html, 344 00:16:19,050 --> 00:16:22,180 Vedo in questa scheda esattamente quel file. 345 00:16:22,180 --> 00:16:26,430 Ora notate, nuvola FARE 9 del qualcosa di un po 'utile per noi. 346 00:16:26,430 --> 00:16:29,480 All'interno CS50 IDE, notare c'è improvvisamente una barra degli indirizzi. 347 00:16:29,480 --> 00:16:33,690 Questo perché anche se siamo utilizzando Chrome per visitare CS50IDE, 348 00:16:33,690 --> 00:16:37,940 all'interno del CS50IDE è proprio versione di un browser web in questo momento. 349 00:16:37,940 --> 00:16:40,820 E così, piuttosto che complicare le cose in quanto tale, 350 00:16:40,820 --> 00:16:42,955 Ho intenzione di andare avanti e basta copiare questo URL. 351 00:16:42,955 --> 00:16:45,330 Ho intenzione di andare avanti e basta aprire il mio finestra di Chrome. 352 00:16:45,330 --> 00:16:47,800 Quindi non c'è nessuna magia qui, no CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Sto solo andando a incollare letteralmente il mio J Harvard URL e premere Invio. 354 00:16:51,800 --> 00:16:54,750 E voilà, ora, e in teoria, tutti 355 00:16:54,750 --> 00:16:57,700 su internet, se ho configurato le autorizzazioni in modo appropriato, 356 00:16:57,700 --> 00:16:58,720 possono visitare questo file. 357 00:16:58,720 --> 00:17:03,230 E così ora, se ho detto hello.html, voilà, ci 358 00:17:03,230 --> 00:17:06,366 è la mia pagina web incredibilmente deludente. 359 00:17:06,366 --> 00:17:07,740 Allora, facciamo un controllo di integrità rapido. 360 00:17:07,740 --> 00:17:09,710 Poiché tutti che è concettuale set up. 361 00:17:09,710 --> 00:17:13,180 E non abbiamo effettivamente davvero ti ha insegnato come scrivere codice HTML per sé. 362 00:17:13,180 --> 00:17:16,084 Tutte le domande finora su ciò che è appena successo? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Sì. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Ha CS50 possiede queste pagine web? 367 00:17:25,800 --> 00:17:26,460 In che senso? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Bella domanda. 370 00:17:29,530 --> 00:17:32,429 Così CS50 di possiede CS50.io. 371 00:17:32,429 --> 00:17:33,970 Abbiamo infatti comprato quel nome a dominio. 372 00:17:33,970 --> 00:17:37,240 E per natura di voi ragazzi accedendo al CS50IDE, 373 00:17:37,240 --> 00:17:39,270 si ottiene tutto ciò che è chiamato un sottodominio. 374 00:17:39,270 --> 00:17:46,840 >> Così IDE50-Malan, o IDE50-Rob.CS50.io, questo è il tuo indirizzo univoco all'interno 375 00:17:46,840 --> 00:17:47,730 il nostro nome di dominio. 376 00:17:47,730 --> 00:17:50,850 Quindi, ai fini del corso, hai il tuo indirizzo univoco. 377 00:17:50,850 --> 00:17:55,150 Ma abbiamo semplificato le cose per l'acquisto del dominio di primo livello, CS50 puntino 378 00:17:55,150 --> 00:17:58,050 I / O e poi tutti gli altri sono all'interno di questo, per così dire. 379 00:17:58,050 --> 00:17:59,890 E noi torneremo a quella in un paio di settimane, probabilmente, 380 00:17:59,890 --> 00:18:01,930 soprattutto a progetto finale tempo, quando qualcuno di voi 381 00:18:01,930 --> 00:18:03,596 potrebbe desiderare di ottenere i propri nomi di dominio. 382 00:18:03,596 --> 00:18:06,270 In realtà è relativamente semplice. 383 00:18:06,270 --> 00:18:06,770 Tutto ok. 384 00:18:06,770 --> 00:18:07,880 Quindi cerchiamo di fare questo ora. 385 00:18:07,880 --> 00:18:11,910 Ho intenzione di tornare in CS50IDE, dove il mio file in questo momento, 386 00:18:11,910 --> 00:18:14,710 hello.html, non è poi così interessante. 387 00:18:14,710 --> 00:18:17,130 Mi piacerebbe fare qualcosa un po 'più bello di questo. 388 00:18:17,130 --> 00:18:19,440 Quindi ho intenzione di fare qualcosa di simile. 389 00:18:19,440 --> 00:18:21,510 Lasciami paragraphs.html aperto. 390 00:18:21,510 --> 00:18:23,560 Quindi questo è un file che ho scritto in anticipo. 391 00:18:23,560 --> 00:18:26,480 Nella parte superiore di esso, come sempre, abbiamo commenti. 392 00:18:26,480 --> 00:18:28,730 Ma in HTML, i commenti guardare un po 'diverso. 393 00:18:28,730 --> 00:18:33,270 On line di tre e la linea 14, si vedere la sintassi per iniziare un commento 394 00:18:33,270 --> 00:18:34,020 e terminare un commento. 395 00:18:34,020 --> 00:18:36,820 >> Ma nessuna delle cose a tra le questioni funzionale. 396 00:18:36,820 --> 00:18:40,250 E 'solo una nota a una umano quello che sta succedendo qui. 397 00:18:40,250 --> 00:18:43,040 E proprio come una rapida sanità mentale verificare, se ho scorrere verso il basso, 398 00:18:43,040 --> 00:18:46,820 qual è la nuova ovvio tag che abbiamo introdotto? 399 00:18:46,820 --> 00:18:52,130 I tag finora abbiamo visto sono aperte Staffa HTML, testa, titolo e corpo. 400 00:18:52,130 --> 00:18:54,400 Ma cosa c'è di nuovo, ovviamente ora? 401 00:18:54,400 --> 00:18:55,200 >> Sì, così p. 402 00:18:55,200 --> 00:18:57,320 Il tag p o il tag di paragrafo. 403 00:18:57,320 --> 00:19:01,182 E poi ho solo preso in prestito un po 'di default Testo latino a costituire miei paragrafi. 404 00:19:01,182 --> 00:19:03,390 Perché quello che volevo dimostrare è come si potrebbe 405 00:19:03,390 --> 00:19:05,859 rappresentano paragrafi di testo in formato HTML. 406 00:19:05,859 --> 00:19:08,400 E così quello che sta cominciando ad accadere qui è che c'è già 407 00:19:08,400 --> 00:19:09,657 un modello di sviluppo. 408 00:19:09,657 --> 00:19:10,990 E lasciatemi andare avanti e fare questo. 409 00:19:10,990 --> 00:19:12,760 Permettetemi innanzitutto di spegnere Apache. 410 00:19:12,760 --> 00:19:17,340 E ho intenzione di dirgli di iniziare a sé di nuovo in casa di fonte di oggi sette 411 00:19:17,340 --> 00:19:18,420 m directory. 412 00:19:18,420 --> 00:19:20,100 In modo da avere accesso a tutto. 413 00:19:20,100 --> 00:19:22,230 >> E ora, se dovessi tornare a questo elenco di directory, 414 00:19:22,230 --> 00:19:24,846 Noto che vedo tutti i file a partire da oggi. 415 00:19:24,846 --> 00:19:26,720 E vedrete nella set successivo problema, faremo 416 00:19:26,720 --> 00:19:28,594 a disposizione le per fare esattamente questo. 417 00:19:28,594 --> 00:19:35,210 Se apro paragraphs.html, questo potrebbe come pure l'aspetto di un linguaggio di programmazione 418 00:19:35,210 --> 00:19:36,970 a voi se non si parla o leggere il latino. 419 00:19:36,970 --> 00:19:40,525 Ma questo è a soli tre punti di testo che sono segnate in HTML. 420 00:19:40,525 --> 00:19:43,100 >> E notare il paragrafo pause tra di loro. 421 00:19:43,100 --> 00:19:46,400 Perché si scopre, e anche se 422 00:19:46,400 --> 00:19:49,210 potrebbe essere incline a fare questo, mentre nel mondo reale, 423 00:19:49,210 --> 00:19:51,370 se si vuole mettere la linea pause tra le cose, 424 00:19:51,370 --> 00:19:55,680 si potrebbe semplicemente fare questo e premere Salva. 425 00:19:55,680 --> 00:19:59,460 E ora, se ricarico qui, avviso che tutto offusca solo insieme 426 00:19:59,460 --> 00:20:01,100 in una sola goccia di testo. 427 00:20:01,100 --> 00:20:03,570 Perché HTML è una specie di un linguaggio muto. 428 00:20:03,570 --> 00:20:07,230 >> Esso è destinato ad essere utilizzato in tale un modo che il browser sarà solo 429 00:20:07,230 --> 00:20:09,920 fare esplicitamente ciò che gli si dice di fare. 430 00:20:09,920 --> 00:20:12,890 Quindi, se non dite dammi un nuovo paragrafo, 431 00:20:12,890 --> 00:20:14,569 non avete intenzione di vedere un nuovo paragrafo. 432 00:20:14,569 --> 00:20:16,360 Ed infatti, ciò che il Browser intenzione di fare 433 00:20:16,360 --> 00:20:20,020 è anche se premere invio, diciamo ancora e ancora 434 00:20:20,020 --> 00:20:23,190 e ancora, spostando così il testo basso sullo schermo e quindi salvare 435 00:20:23,190 --> 00:20:26,610 e poi ricaricare, il browser sta andando per comprimere tutto questo spazio bianco 436 00:20:26,610 --> 00:20:29,021 in una sola, spazio bianco visibile. 437 00:20:29,021 --> 00:20:29,520 Tutto ok. 438 00:20:29,520 --> 00:20:30,869 Ecco, questo è il tag di paragrafo. 439 00:20:30,869 --> 00:20:32,910 E quindi qual è il modello che sta sviluppando qui? 440 00:20:32,910 --> 00:20:37,450 Ebbene, sembra essere il caso che HTML è tutto di iniziare un tag 441 00:20:37,450 --> 00:20:38,460 e termina un tag. 442 00:20:38,460 --> 00:20:39,300 E che cosa è un tag? 443 00:20:39,300 --> 00:20:41,160 Beh, è ​​solo un pezzo di sintassi. 444 00:20:41,160 --> 00:20:44,400 Aprire la staffa, una parola chiave, staffa chiusa, è un tag. 445 00:20:44,400 --> 00:20:45,510 O avviare tag. 446 00:20:45,510 --> 00:20:48,590 E poi quando sei fatto esprimere se stessi, 447 00:20:48,590 --> 00:20:52,300 come in hai finito con il paragrafo, si fa per così dire di fronte. 448 00:20:52,300 --> 00:20:55,480 Ma il contrario non è abbastanza all'indietro. 449 00:20:55,480 --> 00:21:00,630 >> È sufficiente prefisso lo stesso tag di nome con una barra del genere. 450 00:21:00,630 --> 00:21:01,130 Tutto ok. 451 00:21:01,130 --> 00:21:02,570 Quindi non tutto così eccitante. 452 00:21:02,570 --> 00:21:05,270 E infatti, non stiamo facendo il web tutto questo più interessante. 453 00:21:05,270 --> 00:21:07,630 Cosa succede se voglio fare cose più grandi e audaci? 454 00:21:07,630 --> 00:21:11,780 Così si scopre che qui un esempio in headings.html, dove nel mio corpo, 455 00:21:11,780 --> 00:21:17,280 Ho un tag H1, H2, H3, quattro, cinque, o sei, tutte 456 00:21:17,280 --> 00:21:18,310 sembrare piuttosto arcano. 457 00:21:18,310 --> 00:21:21,010 Ma se vado aprire questo ad esempio, diamo uno sguardo. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Così i browser di default in grado di dare il testo che è grande e audace di dimensioni diverse. 460 00:21:27,030 --> 00:21:28,070 H1 è grande. 461 00:21:28,070 --> 00:21:31,240 H6 è più piccolo e quindi tutto il resto in mezzo. 462 00:21:31,240 --> 00:21:34,170 Ecco, questo è interessante, ma ancora non proprio il web lo so. 463 00:21:34,170 --> 00:21:36,870 E se vogliamo che ho qualcosa di simile a un elenco. . 464 00:21:36,870 --> 00:21:40,190 Quindi, ecco un elenco puntato di tre case di Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Come hai a fare questo? 466 00:21:41,600 --> 00:21:45,410 Beh, date un'occhiata a list.html. 467 00:21:45,410 --> 00:21:47,870 E qui, vediamo un po 'di funky 468 00:21:47,870 --> 00:21:49,630 ma prendiamo in considerazione ciò che sta accadendo. 469 00:21:49,630 --> 00:21:56,182 Quindi, sulla base di ciò che avete appena visto, UL sta per lista non ordinata. 470 00:21:56,182 --> 00:21:57,640 Lista non ordinata significa semplicemente puntato. 471 00:21:57,640 --> 00:21:58,431 Non ci sono i numeri. 472 00:21:58,431 --> 00:22:01,850 C'è anche qualcosa chiamato elenco ordinato, che è un OL a tag. 473 00:22:01,850 --> 00:22:05,350 Poi LI, elemento della lista è tutto ciò che significa. 474 00:22:05,350 --> 00:22:07,790 >> E così automaticamente numeri tutto per voi. 475 00:22:07,790 --> 00:22:11,270 Ma ancora una volta, tutto il mio rientro e lo spazio bianco è solo per il mio bene. 476 00:22:11,270 --> 00:22:13,050 Il browser non è realtà andando a prendersi cura. 477 00:22:13,050 --> 00:22:16,670 Quindi, anche se non si poteva fare questo, tanto per intenderci, 478 00:22:16,670 --> 00:22:19,880 Non si dovrebbe, anche se il browser sarà ancora 479 00:22:19,880 --> 00:22:22,130 essere in grado di capirlo bene. 480 00:22:22,130 --> 00:22:24,590 Mi colpisce ricarica nel mio il browser, sto cliccando ricarica 481 00:22:24,590 --> 00:22:26,760 e nessun cambiamento sta avvenendo perché il browser ancora 482 00:22:26,760 --> 00:22:29,550 facendo esattamente quello che gli dico di fare. 483 00:22:29,550 --> 00:22:30,050 >> Tutto ok. 484 00:22:30,050 --> 00:22:31,340 Quindi tutto questo è solo il testo. 485 00:22:31,340 --> 00:22:33,730 Ora facciamo qualcosa di più interessante. 486 00:22:33,730 --> 00:22:36,660 Ho intenzione di andare avanti e prendere in prestito alcune di queste HTML. 487 00:22:36,660 --> 00:22:40,910 Ho intenzione di andare avanti e creare un nuovo file qui. 488 00:22:40,910 --> 00:22:43,370 E noi chiameremo questo rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Abbiamo sproporzionatamente qualcosa usato 491 00:22:48,916 --> 00:22:51,290 chiamato un rotolo rick in questo classe di quest'anno, non lo so, 492 00:22:51,290 --> 00:22:53,880 è successo e basta organicamente. 493 00:22:53,880 --> 00:22:55,397 >> E ora è uscito di controllo. 494 00:22:55,397 --> 00:22:56,730 Quindi sono solo intenzione di andare con esso. 495 00:22:56,730 --> 00:22:59,700 E se vado a Google Immagini e Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Se non si conosce il motivo per cui lo facciamo questo, basta leggere su Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Ogni volta che hai cliccato sul link, qualcuno è stato ridendo da qualche parte. 499 00:23:11,520 --> 00:23:14,860 E mi permetta di andare lì ahead-- andiamo, andiamo a vedere questa immagine. 500 00:23:14,860 --> 00:23:16,750 >> Quindi qui abbiamo un immagine in Google Immagini. 501 00:23:16,750 --> 00:23:19,390 E supponiamo che questo sia ragionevolmente ovunque su internet. 502 00:23:19,390 --> 00:23:22,570 Quindi ho intenzione di assumere va bene per me per mettere in realtà questo nella mia pagina web. 503 00:23:22,570 --> 00:23:24,820 Ho intenzione di andare avanti e copiare l'immagine URL. 504 00:23:24,820 --> 00:23:28,600 E ora, se torno a Cloud 9, vediamo cosa posso fare qui. 505 00:23:28,600 --> 00:23:30,630 Così qui è solo una pagina web. 506 00:23:30,630 --> 00:23:39,020 Si tratta di Rick Astley, haha, Ho intenzione di tornare indietro ora 507 00:23:39,020 --> 00:23:43,510 a mio browser, ricaricare, e interessante. 508 00:23:43,510 --> 00:23:44,530 >> Dove si trova Rick? 509 00:23:44,530 --> 00:23:46,050 Quindi fammi vedere quello che è successo. 510 00:23:46,050 --> 00:23:49,114 A dire il vero, ho intenzione di finta che io non l'ho fatto. 511 00:23:49,114 --> 00:23:50,280 [Incomprensibile] metterlo qui. 512 00:23:50,280 --> 00:23:52,520 Torneremo a che in un attimo. 513 00:23:52,520 --> 00:23:54,200 Quindi, ecco rick.html. 514 00:23:54,200 --> 00:23:56,070 Quindi questo non è Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Così si scopre che possiamo in realtà lo aggiungere qui. 516 00:23:59,680 --> 00:24:00,830 Questo è Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Io vado a dire darmi un'immagine il cui fonte è l'URL Ho appena copiato, che 518 00:24:06,680 --> 00:24:09,110 a quanto pare è un felice compleanno qualcosa o altro. 519 00:24:09,110 --> 00:24:13,280 >> E ora ho intenzione di chiudere il tag come questo. 520 00:24:13,280 --> 00:24:15,170 Quindi questo è avvolgente lungo eccellente. 521 00:24:15,170 --> 00:24:17,740 Ma noto che tutto quello che ho fatto di immagini parentesi aperta è, 522 00:24:17,740 --> 00:24:20,270 origine con un attributo di questo. 523 00:24:20,270 --> 00:24:21,530 Ed è davvero un URL lungo. 524 00:24:21,530 --> 00:24:23,720 E alla fine, notare questo. 525 00:24:23,720 --> 00:24:29,530 Barra perché ho fatto staffa angolare invece di, come ogni altro tag, 526 00:24:29,530 --> 00:24:33,590 avere una parentesi aperta, IMG, chiuso staffa? 527 00:24:33,590 --> 00:24:37,040 Basta prendere una supposizione, anche se si non hanno familiarità di sorta 528 00:24:37,040 --> 00:24:40,410 con HTML prima. 529 00:24:40,410 --> 00:24:42,710 >> Così è come chiude il comando, ma perché 530 00:24:42,710 --> 00:24:45,850 non che non rendono davvero intuitivo senso di fare qualcosa di un po 'più 531 00:24:45,850 --> 00:24:48,820 verbose come vicino immagine? 532 00:24:48,820 --> 00:24:51,400 Già. 533 00:24:51,400 --> 00:24:52,000 Già. 534 00:24:52,000 --> 00:24:55,620 Basta semanticamente, non c'è alcun senso di partendo un'immagine e termina un'immagine, 535 00:24:55,620 --> 00:24:56,870 è sia lì o non lo è. 536 00:24:56,870 --> 00:25:00,960 Quindi non ha senso di lasciare uno spazio per altro all'interno di un'immagine. 537 00:25:00,960 --> 00:25:02,010 Non ci si può farlo. 538 00:25:02,010 --> 00:25:03,720 E così la sintassi sarebbe generalmente solo 539 00:25:03,720 --> 00:25:07,910 per fare la barra interna del tag aperto o il tag iniziale 540 00:25:07,910 --> 00:25:09,020 e poi ha colpito Salva. 541 00:25:09,020 --> 00:25:13,350 >> Quindi, se io ora ricaricare questo file, ora Ho un buon web pagina di cucina qui. 542 00:25:13,350 --> 00:25:15,100 E potremmo certamente davvero infastidire la gente 543 00:25:15,100 --> 00:25:17,010 inserendo invece come un link di YouTube. 544 00:25:17,010 --> 00:25:19,350 Ed infatti, qualunque momento hai mai andato a YouTube, 545 00:25:19,350 --> 00:25:22,190 e mi lascia in realtà accidentalmente rick rotolo me stesso qui. 546 00:25:22,190 --> 00:25:25,770 Così Rick rotolo. 547 00:25:25,770 --> 00:25:29,592 Così rick Roll-- ho intenzione di andare qui. 548 00:25:29,592 --> 00:25:31,900 >> [RIPRODUZIONE DI BRANI MUSICALI] 549 00:25:31,900 --> 00:25:33,730 >> OK, una persona piaceva. 550 00:25:33,730 --> 00:25:37,270 Quindi notare tutto questo tempo, se si fare clic sul link Condividi, è naturalmente 551 00:25:37,270 --> 00:25:41,390 ottenere l'URL che si può effettivamente incorporare in una e-mail o un'immagine forense 552 00:25:41,390 --> 00:25:43,730 o in un problema di impostare o in una diapositiva. 553 00:25:43,730 --> 00:25:49,055 E ora, se io invece clicco su embed, notare che tutto questo tempo, questa roba 554 00:25:49,055 --> 00:25:49,680 è stato lì. 555 00:25:49,680 --> 00:25:50,910 Ho intenzione di andare avanti e copiare questo. 556 00:25:50,910 --> 00:25:54,000 >> E solo così possiamo vedere meglio, io sono andando a incollarlo nel mio editor di testo. 557 00:25:54,000 --> 00:25:55,860 Si noti che questo ciò che YouTube ti ha detto. 558 00:25:55,860 --> 00:25:57,693 Ogni volta che si visita un Video di YouTube, se 559 00:25:57,693 --> 00:26:00,410 vogliono incorporare il video sul vostro pagina web, semplicemente afferrare questo. 560 00:26:00,410 --> 00:26:03,350 Quindi questo è un altro Tag HTML chiamato un iframe. 561 00:26:03,350 --> 00:26:04,590 O un telaio in linea. 562 00:26:04,590 --> 00:26:08,680 Così anche se sembra un po 'di più complesso di tutti gli altri. 563 00:26:08,680 --> 00:26:11,950 Così si scopre che l'immagine tag e apparentemente il tag iframe 564 00:26:11,950 --> 00:26:13,370 prendere ciò che sono chiamati attributi. 565 00:26:13,370 --> 00:26:15,710 >> E questo è un altro pezzo di sintassi HTML. 566 00:26:15,710 --> 00:26:19,240 Oltre al tag di nome, aperto staffa nome del tag, 567 00:26:19,240 --> 00:26:23,780 è possibile controllare il comportamento del tag avendo un sacco di attributo 568 00:26:23,780 --> 00:26:24,860 uguale valore. 569 00:26:24,860 --> 00:26:26,290 Attributo è uguale al valore. 570 00:26:26,290 --> 00:26:28,100 Così per esempio, YouTube ci sta dicendo 571 00:26:28,100 --> 00:26:31,990 se si desidera che la larghezza di questo video per essere 420 pixel e l'altezza 572 00:26:31,990 --> 00:26:35,470 per essere 315 pixel, che è come ti esprimi in HTML. 573 00:26:35,470 --> 00:26:38,480 >> La fonte del video sta essere che lungo URL di YouTube 574 00:26:38,480 --> 00:26:40,830 e poi qualche altra roba come cornice di frontiera è pari a zero, 575 00:26:40,830 --> 00:26:43,500 in modo che significa probabilmente non c'è nessun bordo intorno alla cosa. 576 00:26:43,500 --> 00:26:45,450 Consenti probabilmente a schermo intero significa che l'utente 577 00:26:45,450 --> 00:26:47,840 può fare clic su un pulsante e in realtà pieno schermo il video. 578 00:26:47,840 --> 00:26:52,870 Quindi, se ho molta voglia di essere impressionante qui a Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 piuttosto che utilizzare il tag di immagine, per non mi cancellare che, invece incolla questo. 580 00:26:58,490 --> 00:27:00,810 E ora ricaricare. 581 00:27:00,810 --> 00:27:02,500 E adesso ci risiamo. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Va bene, che è abbastanza. 584 00:27:06,020 --> 00:27:08,970 Va bene così cercherò difficile non farlo di nuovo. 585 00:27:08,970 --> 00:27:11,400 Dunque, quali sono alcuni dei take away qui? 586 00:27:11,400 --> 00:27:15,130 Così HTML, brutto come queste pagine web sono, è in realtà piuttosto semplice. 587 00:27:15,130 --> 00:27:16,467 Non è un linguaggio di programmazione. 588 00:27:16,467 --> 00:27:17,550 Non ha funzioni. 589 00:27:17,550 --> 00:27:18,410 Non ha cicli. 590 00:27:18,410 --> 00:27:19,535 Non ha condizioni. 591 00:27:19,535 --> 00:27:22,900 Tutto quello che ha è di decine di diversi tag, ognuno dei quali 592 00:27:22,900 --> 00:27:24,620 ha zero o più attributi. 593 00:27:24,620 --> 00:27:27,320 E in effetti, cosa c'è di divertente su HTML come si inizia a tuffarsi 594 00:27:27,320 --> 00:27:29,560 è che è molto di sé insegnabile. 595 00:27:29,560 --> 00:27:32,880 >> Tutto ciò che serve è una comprensione del quadro generale di HTML. 596 00:27:32,880 --> 00:27:36,510 Che cosa è un tag, che è un attributo, come si fa in realtà configura una pagina web 597 00:27:36,510 --> 00:27:37,250 come segue. 598 00:27:37,250 --> 00:27:40,720 E tutto il resto è in realtà il risultato di guardare in alto in un punto di riferimento on-line 599 00:27:40,720 --> 00:27:43,080 o googling come fare un po ' tecnica o come abbiamo visto, 600 00:27:43,080 --> 00:27:45,371 guardando fonte di Facebook codice, guardando un sito web 601 00:27:45,371 --> 00:27:48,710 che ti piace al suo codice sorgente e capire come gli sviluppatori là 602 00:27:48,710 --> 00:27:50,550 in realtà di cui le cose. 603 00:27:50,550 --> 00:27:52,180 >> Così possiamo fare le immagini pure. 604 00:27:52,180 --> 00:27:53,994 E infatti, lo abbiamo fatto poco fa. 605 00:27:53,994 --> 00:27:55,410 Lasciami andare avanti e solo mostrarvi. 606 00:27:55,410 --> 00:27:56,770 Ecco alcuni esempi di codice. 607 00:27:56,770 --> 00:27:58,380 Se vi capitasse di voler vedere gatto scontroso. 608 00:27:58,380 --> 00:28:00,620 Così notare che posso avere un tag di immagine qui. 609 00:28:00,620 --> 00:28:02,090 E ho un commento sopra di esso. 610 00:28:02,090 --> 00:28:04,490 Ho un'alternativa il testo per l'accessibilità. 611 00:28:04,490 --> 00:28:07,250 Così qualcuno che sta usando uno schermo Lettore per ragioni di vista 612 00:28:07,250 --> 00:28:10,172 può effettivamente poi avere il loro screen reader dire gatto scontroso. 613 00:28:10,172 --> 00:28:11,880 Perché se non possono vedere l'immagine, essi 614 00:28:11,880 --> 00:28:14,504 può almeno avere il loro computer dire loro verbalmente quello che è. 615 00:28:14,504 --> 00:28:18,020 E la fonte di questo file è cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Quindi, in realtà, se volevo davvero ottenere intelligente, quello che avrei potuto done-- 617 00:28:22,472 --> 00:28:25,680 Prometto di non andare a Rick Astley, così Io vado a Google per un gatto, invece. 618 00:28:25,680 --> 00:28:28,290 E se vado a Google Immagini qui, e noi assumeremo 619 00:28:28,290 --> 00:28:30,040 che questa è una foto del mio gatto. 620 00:28:30,040 --> 00:28:35,070 >> Supponiamo che ho il controllo cliccato o destra cliccato su questo, per caso 621 00:28:35,070 --> 00:28:35,630 raccapricciante. 622 00:28:35,630 --> 00:28:40,320 E cat.jpeg vado per risparmiare sul mio desktop. 623 00:28:40,320 --> 00:28:44,700 Vorrei ora tornare a Cloud 9. 624 00:28:44,700 --> 00:28:48,150 Si noti che qui, non posso andare per caricare i file locali. 625 00:28:48,150 --> 00:28:51,530 E se prendo questo File, cat.jpeg, avviso 626 00:28:51,530 --> 00:28:54,674 che io possa trascinarlo e rilasciarlo in Cloud 9 627 00:28:54,674 --> 00:28:56,090 e sta andando a urlare contro di me qui. 628 00:28:56,090 --> 00:28:59,000 >> Perché abbiamo già dato un file cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 ma è super facile da afferrare una foto che hai 630 00:29:01,430 --> 00:29:03,220 tratto da Facebook o Flickr o simili 631 00:29:03,220 --> 00:29:05,678 ed effettivamente trascinarlo in Cloud 9 e poi renderlo 632 00:29:05,678 --> 00:29:07,970 parte del proprio personale sito web o un problema 633 00:29:07,970 --> 00:29:10,442 set sette o otto come vedremo presto. 634 00:29:10,442 --> 00:29:12,150 E poi, quando si infine visitare quel gatto, 635 00:29:12,150 --> 00:29:16,610 supponendo ho scaricato quello stesso gatto, avviso che-- che era adorabile. 636 00:29:16,610 --> 00:29:19,160 >> Cosa vorresti vedere è qualcosa di simile a questa faccia qui. 637 00:29:19,160 --> 00:29:21,810 Quindi i file che si riferimento all'interno di una pagina web 638 00:29:21,810 --> 00:29:26,050 può essere sia locale nel proprio conto o remoto su qualche altro server 639 00:29:26,050 --> 00:29:29,670 come nel caso del Rick Foto Astley un po 'fa. 640 00:29:29,670 --> 00:29:32,990 Allora, dove else-- cosa altro che possiamo fare qui? 641 00:29:32,990 --> 00:29:34,890 Quindi, diamo uno sguardo al seguente. 642 00:29:34,890 --> 00:29:36,160 Sai cosa tipo di fresco? 643 00:29:36,160 --> 00:29:39,330 >> Finora abbiamo avuto fare le pagine web molto statici. 644 00:29:39,330 --> 00:29:41,830 Voglio rendere le cose nel modo seguente. 645 00:29:41,830 --> 00:29:44,344 Voglio fare il mio proprio motore di ricerca. 646 00:29:44,344 --> 00:29:47,010 Quindi, per fare un motore di ricerca, cerchiamo di andare avanti e iniziare a fare questo. 647 00:29:47,010 --> 00:29:52,570 Ho intenzione di andare avanti e creare un nuovo file denominato search.html. 648 00:29:52,570 --> 00:29:54,890 E abbiamo prefabed versioni on-line. 649 00:29:54,890 --> 00:29:56,027 Ops. 650 00:29:56,027 --> 00:29:57,610 Non incollare nella finestra del terminale. 651 00:29:57,610 --> 00:29:58,744 Versioni online prefabbricate. 652 00:29:58,744 --> 00:30:00,160 E ho intenzione di iniziare nel modo seguente. 653 00:30:00,160 --> 00:30:04,490 Quindi, ecco l'inizio di un file chiamato search.html. 654 00:30:04,490 --> 00:30:07,510 Io vado a salvarlo in directory di origine di oggi. 655 00:30:07,510 --> 00:30:09,079 Io vado a chiamare questa ricerca. 656 00:30:09,079 --> 00:30:10,370 A dire il vero, ce la faremo meglio. 657 00:30:10,370 --> 00:30:13,600 CS50 ricerca e in realtà marca esso. 658 00:30:13,600 --> 00:30:17,500 E ora, ho intenzione di dire qualcosa come H1 CS50 Ricerca. 659 00:30:17,500 --> 00:30:20,930 E poi qui, H2 in arrivo. 660 00:30:20,930 --> 00:30:23,230 E proprio per ricapitolare, H1 e H2 significa quello, rispettivamente? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Sì, così grande e audace, e non è così grande, ma ancora in grassetto. 663 00:30:30,320 --> 00:30:37,375 Quindi, se ho salvare questo e vado qui, vediamo il file search.html. 664 00:30:37,375 --> 00:30:42,560 Va bene, e questo è destra- sopra [incomprensibile]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Stand-by. 667 00:30:49,110 --> 00:30:49,945 David è confuso. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, è proprio lì. 670 00:30:54,080 --> 00:30:54,860 David è un idiota. 671 00:30:54,860 --> 00:30:55,420 OK. 672 00:30:55,420 --> 00:30:56,660 Quindi non vi è. 673 00:30:56,660 --> 00:30:58,350 Così CS50 di ricerca in arrivo. 674 00:30:58,350 --> 00:31:00,370 Così ora, cerchiamo di sintetizzare quello che abbiamo fatto la scorsa settimana. 675 00:31:00,370 --> 00:31:03,400 >> Dove abbiamo parlato del meccanica di basso livello di HTTP. 676 00:31:03,400 --> 00:31:05,780 E queste nuove idee di HTML, che è solo 677 00:31:05,780 --> 00:31:08,890 questo linguaggio di markup in cui si raccontare un browser esattamente che cosa fare 678 00:31:08,890 --> 00:31:10,740 e mettere in atto il nostro motore di ricerca. 679 00:31:10,740 --> 00:31:12,520 Così, invece di dicendo presto, io sono 680 00:31:12,520 --> 00:31:14,810 intenzione di introdurre qualcosa chiamato un tag form. 681 00:31:14,810 --> 00:31:19,610 E in questa forma, ho intenzione di avere qualcosa come un campo di input. 682 00:31:19,610 --> 00:31:22,450 >> E il nome di questo ingresso campo, ho intenzione di chiamarlo Q. 683 00:31:22,450 --> 00:31:26,240 E il tipo di questo campo di input Io vado a dire è solo "testo". 684 00:31:26,240 --> 00:31:29,130 E un campo di testo, come faremo vedi, è solo una casella di testo. 685 00:31:29,130 --> 00:31:32,830 E così non senso qui avere nulla all'interno di esso a questo punto. 686 00:31:32,830 --> 00:31:35,320 E così sto andando semplicemente per chiudere il tag con quel 687 00:31:35,320 --> 00:31:38,099 slash nel tag stesso. 688 00:31:38,099 --> 00:31:39,890 E poi ho intenzione di avere un altro ingresso. 689 00:31:39,890 --> 00:31:43,480 Tipo di ingresso è uguale a presentare. 690 00:31:43,480 --> 00:31:45,320 E poi ho intenzione di chiudere anche questo. 691 00:31:45,320 --> 00:31:46,840 >> E ora ho intenzione di tornare qui. 692 00:31:46,840 --> 00:31:49,520 E già si vede, seppur abbastanza brutto, ho 693 00:31:49,520 --> 00:31:52,460 ha ottenuto l'inizio di mia ricerca propria pagina qui. 694 00:31:52,460 --> 00:31:55,150 In realtà, vorrei provare a pulire questo un po '. 695 00:31:55,150 --> 00:31:57,330 Risulta che il ingresso qui, posso avere 696 00:31:57,330 --> 00:31:59,910 un altro attributo chiamato segnaposto. 697 00:31:59,910 --> 00:32:05,165 E potrei vedere qualcosa come parole chiave, o più specificamente, per interrogare q. 698 00:32:05,165 --> 00:32:07,820 >> E notare, ora, ho questo tipo di testo grigio 699 00:32:07,820 --> 00:32:10,440 che scompare come Non appena si digita, 700 00:32:10,440 --> 00:32:12,930 ma è probabilmente qualcosa che hai visto in altre pagine web. 701 00:32:12,930 --> 00:32:14,650 Non mi piace molto il pulsante Invia. 702 00:32:14,650 --> 00:32:18,320 Quindi sono davvero intenzione di dare il Pulsante Invia un valore di ricerca. 703 00:32:18,320 --> 00:32:21,680 E ora, se ricarico, notare che il mio tasto viene denominato ricerca. 704 00:32:21,680 --> 00:32:24,140 Sai, non lo faccio davvero come il logo qui. 705 00:32:24,140 --> 00:32:27,140 Così generatore Google Font. 706 00:32:27,140 --> 00:32:28,820 >> Voglio rendere questo ulteriormente. 707 00:32:28,820 --> 00:32:30,660 Ricerca in modo CS50. 708 00:32:30,660 --> 00:32:31,870 Mi permetta di creare il mio marchio. 709 00:32:31,870 --> 00:32:33,080 Che sembra piacevole. 710 00:32:33,080 --> 00:32:36,945 Così ora mi permetta di salvare questo as-- si accende. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Dove sta andando? 713 00:32:43,120 --> 00:32:43,620 Là. 714 00:32:43,620 --> 00:32:44,160 OK. 715 00:32:44,160 --> 00:32:44,980 Perso. 716 00:32:44,980 --> 00:32:47,740 Salva come. 717 00:32:47,740 --> 00:32:49,470 Browser stupido. 718 00:32:49,470 --> 00:32:51,700 Stand by, stiamo andando a risolvere questo problema una volta per tutte. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Ci siamo. 721 00:32:58,590 --> 00:32:59,090 Tutto ok. 722 00:32:59,090 --> 00:32:59,600 Scusate. 723 00:32:59,600 --> 00:33:00,750 Giornataccia. 724 00:33:00,750 --> 00:33:02,310 Ora, questo è funky. 725 00:33:02,310 --> 00:33:03,160 Uscire a schermo intero. 726 00:33:03,160 --> 00:33:04,150 Tutto ok. 727 00:33:04,150 --> 00:33:06,870 >> Ora, come un normale persona, salva immagine con nome. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Ora ho intenzione di andare in CS50IDE e Ho intenzione di prendere semplicemente il logo, 730 00:33:13,194 --> 00:33:15,360 Ho intenzione di trascinarlo la mia fonte di sette directory, 731 00:33:15,360 --> 00:33:17,002 file esiste già, io sono d'accordo con questo. 732 00:33:17,002 --> 00:33:19,210 Quindi ho intenzione di ignorare la perché ho già avuto. 733 00:33:19,210 --> 00:33:20,630 E ora come faccio a sbarazzarsi di questo? 734 00:33:20,630 --> 00:33:24,670 >> Andiamo avanti qui e fare fonte immagine è uguale logo.gif. 735 00:33:24,670 --> 00:33:25,490 Chiudi. 736 00:33:25,490 --> 00:33:26,050 Salva. 737 00:33:26,050 --> 00:33:30,560 E ora se torno alla mia ricerca pagina, ora che sta cercando piuttosto bene. 738 00:33:30,560 --> 00:33:33,610 Va bene, quindi non ha molto fatto niente di utile. 739 00:33:33,610 --> 00:33:37,000 In realtà, mi permetta di provare la ricerca per un gatto e vedere cosa succede. 740 00:33:37,000 --> 00:33:38,890 Gatti. 741 00:33:38,890 --> 00:33:39,420 Accidenti. 742 00:33:39,420 --> 00:33:41,400 Esso non solo funziona, a quanto pare. 743 00:33:41,400 --> 00:33:43,760 Allora qual è il pezzo chiave quello che manca qui? 744 00:33:43,760 --> 00:33:49,100 >> A destra, anche se non si conosce nessun codice HTML, Ho iniziato segnando il modulo telefono 745 00:33:49,100 --> 00:33:54,130 e ho detto che come ottenere ingressi, darmi una casella di testo e un pulsante di invio, 746 00:33:54,130 --> 00:33:55,730 quale pezzo è apparentemente mancante? 747 00:33:55,730 --> 00:33:58,975 Supponiamo di voler effettivamente ottenere questa cosa funziona correttamente. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Che cosa dobbiamo fare? 750 00:34:05,360 --> 00:34:08,860 Abbiamo la necessità di attuare il back-end database o il motore di ricerca stesso, 751 00:34:08,860 --> 00:34:11,210 e che sta andando a prendere un bel po 'di tempo, francamente. 752 00:34:11,210 --> 00:34:13,380 >> Quindi ricorda quello che abbiamo fatto l'ultima volta. 753 00:34:13,380 --> 00:34:18,230 Quindi, se si cerca qualcosa su Google e avete in anticipo disattivato, 754 00:34:18,230 --> 00:34:20,355 richiamo, ricerca istantanea. 755 00:34:20,355 --> 00:34:22,230 Quindi vorrei passare che fuori in modo che questo effettivamente 756 00:34:22,230 --> 00:34:26,650 si comporta come un browser vecchia scuola, se io ora cerco per qualcosa come i gatti, 757 00:34:26,650 --> 00:34:28,190 ricordare ciò che l'URL assomiglia. 758 00:34:28,190 --> 00:34:29,449 E 'piuttosto criptico. 759 00:34:29,449 --> 00:34:33,000 Ma incorporato in là, richiamo, è la ricerca barra. 760 00:34:33,000 --> 00:34:35,100 Punto interrogativo q uguale gatti. 761 00:34:35,100 --> 00:34:37,760 >> E questo sembrerebbe darmi un sacco di risultati di ricerca. 762 00:34:37,760 --> 00:34:39,134 Allora sai che cosa ho intenzione di fare? 763 00:34:39,134 --> 00:34:41,650 Ho intenzione di prendere in prestito Google solo per un minuto. 764 00:34:41,650 --> 00:34:43,670 Ho intenzione di andare oltre qui e ho intenzione di dire 765 00:34:43,670 --> 00:34:47,850 che questo forma azione o destinazione, per così dire, 766 00:34:47,850 --> 00:34:49,330 dovrebbe essere letteralmente Google. 767 00:34:49,330 --> 00:34:52,590 E il metodo che ho voluto per uso sta per essere ottenere. 768 00:34:52,590 --> 00:34:53,560 >> Allora, qual è l'azione? 769 00:34:53,560 --> 00:34:55,760 L'azione è stranamente chiamato, ma questo significa solo 770 00:34:55,760 --> 00:34:58,120 che sta andando a gestire l'azione di questa forma? 771 00:34:58,120 --> 00:35:00,820 Quando clicco Ricerca, dove se il risultato andare? 772 00:35:00,820 --> 00:35:05,300 E se ora tornare alla mia forma qui e ricaricare la mia pagina web 773 00:35:05,300 --> 00:35:09,000 e ora la ricerca di qualcosa come il cane, notate ora 774 00:35:09,000 --> 00:35:10,850 Ho ri implementato Google. 775 00:35:10,850 --> 00:35:11,350 Destra? 776 00:35:11,350 --> 00:35:14,141 >> Se voglio cercare qualcosa altrimenti, funziona non solo per i cani, 777 00:35:14,141 --> 00:35:16,400 funziona anche per i gatti. 778 00:35:16,400 --> 00:35:21,930 Funziona anche per CS50. 779 00:35:21,930 --> 00:35:24,310 E OK, questo è solo sotto whelming, non è vero? 780 00:35:24,310 --> 00:35:25,920 Va bene, ma in realtà funziona. 781 00:35:25,920 --> 00:35:27,360 Quindi, cosa sta realmente succedendo? 782 00:35:27,360 --> 00:35:31,340 Così ho insegnato il mio browser, utilizzando HTML, per prendere l'input dall'utente 783 00:35:31,340 --> 00:35:35,810 e in realtà inviare tale ingresso a un server remoto utilizzando il protocollo HTTP. 784 00:35:35,810 --> 00:35:39,120 >> E perché il mio browser capisce HTTP, in realtà 785 00:35:39,120 --> 00:35:43,500 costruire l'URL in modo che ciò che Finisco sopra nel mio browser, 786 00:35:43,500 --> 00:35:45,660 vedere cosa succede quando ho cercato per il cane. 787 00:35:45,660 --> 00:35:49,270 Se clicco Cerca, notare che l'URL cambia come ho inteso 788 00:35:49,270 --> 00:35:52,770 a google.com/search~~V domanda equivale cane. 789 00:35:52,770 --> 00:35:56,020 E questo perché la forma lo sa, perché il metodo è ottenere, 790 00:35:56,020 --> 00:35:59,560 per aggiungere semplicemente a tale URL lì. 791 00:35:59,560 --> 00:36:01,730 >> Ora, queste pagine web sono ancora brutto. 792 00:36:01,730 --> 00:36:04,890 Quindi cerchiamo di introdurre un altro pezzo di sintassi se possiamo oggi. 793 00:36:04,890 --> 00:36:07,640 E questa è una cosa nota come fogli di stile CSS. 794 00:36:07,640 --> 00:36:10,720 Così mi permetta di prendere uno sguardo questo esempio qui e vedere 795 00:36:10,720 --> 00:36:12,380 se siamo in grado di dedurre cosa sta succedendo. 796 00:36:12,380 --> 00:36:14,520 Questo è CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Ed è qui che le cose ottenere un po 'brutto. 798 00:36:16,532 --> 00:36:18,490 Perché purtroppo, nel mondo del web, 799 00:36:18,490 --> 00:36:20,920 HTML da sola non può fare tutto. 800 00:36:20,920 --> 00:36:22,920 E così, se si vuole stilizzare la tua pagina web, 801 00:36:22,920 --> 00:36:28,370 hai veramente bisogno di concentrarsi sul estetica in un modo diverso. 802 00:36:28,370 --> 00:36:33,090 Così qui, ho il corpo del mio web pagina all'interno del quale è un grande div. 803 00:36:33,090 --> 00:36:34,700 E un div significa solo divisione. 804 00:36:34,700 --> 00:36:38,060 Quindi è come un paragrafo, ma non ha la stessa semantica 805 00:36:38,060 --> 00:36:39,180 di un paragrafo di testo. 806 00:36:39,180 --> 00:36:40,940 >> Ciò significa appena a Browser, ecco che arriva 807 00:36:40,940 --> 00:36:45,210 una grande regione rettangolare della mia web pagina, voglio gestirlo appositamente. 808 00:36:45,210 --> 00:36:47,420 Ora, la linea 21 è dove inizia quella div. 809 00:36:47,420 --> 00:36:48,770 E basta prendere una supposizione. 810 00:36:48,770 --> 00:36:53,080 Qual è l'effetto della linea 21 sulla resto del contenuto della pagina? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centrandolo. 813 00:36:56,311 --> 00:36:56,810 Questo è tutto. 814 00:36:56,810 --> 00:36:58,830 Quindi non abbiamo visto un modo di effettivamente centrare il testo. 815 00:36:58,830 --> 00:37:00,996 >> In realtà, il mio motore di ricerca, a differenza del reale di Google, 816 00:37:00,996 --> 00:37:03,040 era tutto giustificato verso sinistra. 817 00:37:03,040 --> 00:37:07,430 E così ora in linea 21, che sto dicendo, hey browser crea una divisione della pagina. 818 00:37:07,430 --> 00:37:09,450 Dammi solo un grande rettangolo invisibile. 819 00:37:09,450 --> 00:37:11,490 Ecco come voglio pensare alla pagina web. 820 00:37:11,490 --> 00:37:13,870 E poi stilizzare come segue. 821 00:37:13,870 --> 00:37:16,900 All'interno di quelle citazioni, Ora, è una seconda lingua 822 00:37:16,900 --> 00:37:19,969 che abbiamo introdotto oggi cosiddetti fogli di stile CSS. 823 00:37:19,969 --> 00:37:22,010 Per fortuna, non è troppo un linguaggio di programmazione, 824 00:37:22,010 --> 00:37:26,470 quindi è molto limitato nella sua sintassi, ma anche molto limitata nella sua funzionalità 825 00:37:26,470 --> 00:37:30,670 considerando HTML è tutto marcare i dati di una pagina web 826 00:37:30,670 --> 00:37:32,130 e la struttura di una pagina web. 827 00:37:32,130 --> 00:37:35,320 CSS è generalmente di circa il ultimo miglio, l'estetica, 828 00:37:35,320 --> 00:37:40,160 ottenere la dimensione e il colore e la posizionamento è giusto in una pagina web. 829 00:37:40,160 --> 00:37:43,000 E in effetti, è formato con coppie di valori chiave. 830 00:37:43,000 --> 00:37:46,290 >> Una proprietà come questa, il testo allineare, seguito da due punti, 831 00:37:46,290 --> 00:37:49,720 seguito dal valore di tale proprietà, che in questo caso è il centro. 832 00:37:49,720 --> 00:37:51,910 E ora si nota possono nidificare queste cose. 833 00:37:51,910 --> 00:37:56,780 Se volevo tutto in quella Ho evidenziato di essere centrato, 834 00:37:56,780 --> 00:38:00,270 è per questo che ho la linea 21 e la corrispondente linea di 31. 835 00:38:00,270 --> 00:38:04,820 Ma supponiamo ora vuole dire John Harvard, benvenuto a casa mia pagina. 836 00:38:04,820 --> 00:38:06,530 >> Simbolo di copyright John Harvard. 837 00:38:06,530 --> 00:38:09,180 E supponiamo che io voglio il primo dei quelle linee di essere abbastanza grande. 838 00:38:09,180 --> 00:38:10,450 36 pixel. 839 00:38:10,450 --> 00:38:11,530 In modo che sia di dimensioni adeguate. 840 00:38:11,530 --> 00:38:13,240 E volevo il suo peso di essere audaci. 841 00:38:13,240 --> 00:38:15,450 Ma poi sotto, Voglio testo più piccolo. 842 00:38:15,450 --> 00:38:19,980 E sotto questo, voglio ancora più piccolo del testo. 843 00:38:19,980 --> 00:38:20,480 Scusate. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Oggi si sente come un giorno di riposo. 846 00:38:26,940 --> 00:38:29,840 >> Così ora, che cosa sto facendo per esprimere questo? 847 00:38:29,840 --> 00:38:34,580 Qui sulla linea 22 è un incorporato div div nidificato o, se si vuole. 848 00:38:34,580 --> 00:38:36,190 Essa ha anche un proprio tag style. 849 00:38:36,190 --> 00:38:38,160 A specificare una dimensione del carattere di 36. 850 00:38:38,160 --> 00:38:40,460 A specificare una dimensione del carattere del grassetto. 851 00:38:40,460 --> 00:38:43,360 Quaggiù, a specificare solo 24 pixel. 852 00:38:43,360 --> 00:38:45,960 E, infine, in linea 28, a specificare 12. 853 00:38:45,960 --> 00:38:49,070 Così come un controllo di integrità rapido e come una lettura umana questo, 854 00:38:49,070 --> 00:38:52,545 quali parole sullo schermo sono in realtà sta per essere in grassetto? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Quali le linee sono in realtà in grassetto? 857 00:38:58,760 --> 00:38:59,570 >> Proprio John Harvard. 858 00:38:59,570 --> 00:39:00,070 Destra? 859 00:39:00,070 --> 00:39:05,940 Perché proprio come la linea 22 dice hey Browser, ecco una divisione della pagina. 860 00:39:05,940 --> 00:39:07,920 Rendono la dimensione del carattere 36 punti. 861 00:39:07,920 --> 00:39:09,460 Rendere il peso grassetto. 862 00:39:09,460 --> 00:39:11,920 Non appena si raggiunge la tag di chiusura corrispondente 863 00:39:11,920 --> 00:39:15,340 o tag di chiusura sulla linea 24, che significa, ehi del browser, 864 00:39:15,340 --> 00:39:17,640 Smettere di fare qualunque cosa si sta facendo. 865 00:39:17,640 --> 00:39:21,020 E notate per essere chiari, anche se linea 22 ha tutti questi attributi 866 00:39:21,020 --> 00:39:24,430 come stile, quando si chiudere il tag in linea 24, 867 00:39:24,430 --> 00:39:25,940 si menziona solo il nome del tag. 868 00:39:25,940 --> 00:39:29,990 >> Non ripetere lo stile parola o tutto ciò che è all'interno di quelle citazioni. 869 00:39:29,990 --> 00:39:32,860 E così, se guardo questo ora nel mio browser, diamo 870 00:39:32,860 --> 00:39:38,060 un guardare il risultato finale. Lasciami andare avanti a questo file, che è CSS 0. 871 00:39:38,060 --> 00:39:41,814 Ed è ancora piuttosto semplice, ma sempre piuttosto interessante. 872 00:39:41,814 --> 00:39:43,980 Ma si scopre là del altre cose che posso fare qui, 873 00:39:43,980 --> 00:39:46,490 e con il rischio di fare questo completamente orribile, 874 00:39:46,490 --> 00:39:48,630 noterà qui che nel mio corpo della pagina web, 875 00:39:48,630 --> 00:39:53,930 Posso fare qualcosa di divertente come bg o colore di sfondo. 876 00:39:53,930 --> 00:39:56,670 >> E veloce, qual è il tuo colore preferito? 877 00:39:56,670 --> 00:39:57,720 Verde Ho sentito. 878 00:39:57,720 --> 00:39:58,750 Tutto ok. 879 00:39:58,750 --> 00:40:02,920 Così ora, se ho colpito ricarica ora, abbiamo una pagina web verde. 880 00:40:02,920 --> 00:40:04,710 Va bene, in modo che non è male. 881 00:40:04,710 --> 00:40:08,350 E ora, se voglio fare davvero freddo, posso fare il colore del mio testo 882 00:40:08,350 --> 00:40:09,360 anche rosso. 883 00:40:09,360 --> 00:40:10,870 Così vediamo che cosa questo assomiglia. 884 00:40:10,870 --> 00:40:12,230 Ora che sta cercando piuttosto bene. 885 00:40:12,230 --> 00:40:15,460 E qui, se davvero voglia di pasticciare con qualcuno 886 00:40:15,460 --> 00:40:17,487 o se si vuole essere una di quelle persone che 887 00:40:17,487 --> 00:40:20,570 cerca di ingannare l'utente a visitare un sito web pagina perché hanno ingannato Google 888 00:40:20,570 --> 00:40:27,610 a pensare c'è un sacco di parole chiave like-- Vediamo, ricaricare. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Dove è andato? 891 00:40:30,680 --> 00:40:31,530 E lì ci. 892 00:40:31,530 --> 00:40:32,030 Tutto ok. 893 00:40:32,030 --> 00:40:34,905 Allora io dico questo come un a parte, ce la faremo parlare di queste cose in poche settimane 894 00:40:34,905 --> 00:40:36,740 quando si parla di la sicurezza, se effettivamente 895 00:40:36,740 --> 00:40:38,852 grappoli interi di incorporare le parole chiave in una pagina web, 896 00:40:38,852 --> 00:40:41,810 anche se non sono visibili ad una umano, uno come Google, naturalmente, 897 00:40:41,810 --> 00:40:43,250 può ancora effettivamente trovare questo. 898 00:40:43,250 --> 00:40:45,820 Va bene, allora che è abbastanza orribile abbastanza rapidamente. 899 00:40:45,820 --> 00:40:48,420 >> E infatti, non è tutto che molto a differenza di mia web 900 00:40:48,420 --> 00:40:51,480 pagina come studente universitario, che Ho iniziato googling intorno per trovare 901 00:40:51,480 --> 00:40:53,690 le versioni precedenti di miei vecchi siti web. 902 00:40:53,690 --> 00:40:54,500 E 'stato piuttosto male. 903 00:40:54,500 --> 00:40:56,650 In realtà, ho trovato uno appena prima classe. 904 00:40:56,650 --> 00:40:58,620 Ma c'è di peggio là fuori. 905 00:40:58,620 --> 00:41:01,534 Questo a quanto pare è stato il mio home page nel 1996. 906 00:41:01,534 --> 00:41:04,200 A quanto pare ho pensato che fosse opportuno chiedere alle persone il loro nome 907 00:41:04,200 --> 00:41:05,991 prima che potessero effettivamente vedere la mia pagina web. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> E poi li ho mostrato qualcosa di stupido, probabilmente. 910 00:41:11,920 --> 00:41:13,450 Io scavare di più per la prossima volta. 911 00:41:13,450 --> 00:41:16,220 Ma per ora, diamo prendere in considerazione un po 'di progettazione. 912 00:41:16,220 --> 00:41:17,444 Abbiamo parlato di stile. 913 00:41:17,444 --> 00:41:19,735 E questa pagina finora e quasi tutto ciò che ho scritto 914 00:41:19,735 --> 00:41:21,890 è abbastanza pulito stilisticamente. 915 00:41:21,890 --> 00:41:23,320 Ma per quanto riguarda il design? 916 00:41:23,320 --> 00:41:25,990 Beh, ci sono un sacco di ridondanza in quello che ho fatto qui. 917 00:41:25,990 --> 00:41:28,156 >> Ho menzionato la parola colore in un paio di posti. 918 00:41:28,156 --> 00:41:31,630 Ho menzionato la dimensione del carattere in un paio di luoghi e audace in un paio di posti. 919 00:41:31,630 --> 00:41:34,870 E in fondo, io sono co mescolando due lingue. 920 00:41:34,870 --> 00:41:38,100 Ho HTML con i miei tag e la mia attributi e poi tutto ad un tratto, 921 00:41:38,100 --> 00:41:40,100 tra virgolette, ho la seconda lingua di oggi 922 00:41:40,100 --> 00:41:43,830 chiamato CSS, che ancora una volta, è solo questi coppie di valori chiave o queste proprietà 923 00:41:43,830 --> 00:41:45,280 separati da due punti. 924 00:41:45,280 --> 00:41:47,700 >> Risulta molto come in C dove siamo 925 00:41:47,700 --> 00:41:50,550 può iniziare a scomporre del codice in file di intestazione, 926 00:41:50,550 --> 00:41:53,520 in modo che possiamo fare lo stesso in HTML. 927 00:41:53,520 --> 00:41:56,030 E un passo verso che è la seguente. 928 00:41:56,030 --> 00:42:02,230 Si noti che questa versione, è CSS1.html Strutturalmente la stessa pagina web esatto. 929 00:42:02,230 --> 00:42:05,250 Così ho un sacco di div, ma questa volta, ho 930 00:42:05,250 --> 00:42:07,220 deciso di eliminare l'involucro div come vedrete. 931 00:42:07,220 --> 00:42:12,390 >> E ho dato quei tre div alto, medio e basso, ID univoci. 932 00:42:12,390 --> 00:42:14,760 Questo è bello, perché, dando quelle divisioni 933 00:42:14,760 --> 00:42:18,715 della pagina identificatori univoci, Posso riferire altrove. 934 00:42:18,715 --> 00:42:19,215 Dove? 935 00:42:19,215 --> 00:42:21,070 Beh, mi permetta di scorrere verso l'alto. 936 00:42:21,070 --> 00:42:24,070 E fin qui, ogni volta che abbiamo esaminato alla testa di una pagina web, cosa 937 00:42:24,070 --> 00:42:28,560 l'unica modifica che abbiamo avuto in il capo di una pagina web? 938 00:42:28,560 --> 00:42:29,740 Un po 'più forte. 939 00:42:29,740 --> 00:42:30,799 Solo il titolo fino ad ora. 940 00:42:30,799 --> 00:42:32,590 Ma si scopre là del un paio di altre cose 941 00:42:32,590 --> 00:42:35,840 si può mettere in là, uno dei che si chiama un tag di stile. 942 00:42:35,840 --> 00:42:37,850 Quindi un momento fa, abbiamo guardato in un attributo di stile. 943 00:42:37,850 --> 00:42:39,150 Si scopre che c'è un tag di stile. 944 00:42:39,150 --> 00:42:41,200 Appartiene interno la testa di una pagina web. 945 00:42:41,200 --> 00:42:42,840 E ora accorgo quello che sto facendo. 946 00:42:42,840 --> 00:42:46,540 Ho all'interno di questa tag di stile la seguente. 947 00:42:46,540 --> 00:42:51,190 Sto letteralmente menzionare sulla linea 20 della il nome di un tag che voglio stilizzare. 948 00:42:51,190 --> 00:42:53,489 >> Poi ho aperto parentesi graffa e chiuso parentesi graffa. 949 00:42:53,489 --> 00:42:56,030 Quindi, simile nello spirito a C, ma di nuovo, questa non è una funzione, 950 00:42:56,030 --> 00:42:57,796 questo è solo un dettaglio sintattico qui. 951 00:42:57,796 --> 00:43:00,170 E poi, naturalmente, sto dicendo il browser, il browser hey, 952 00:43:00,170 --> 00:43:05,210 rendere l'intero corpo della pagina un allineamento del testo del centro. 953 00:43:05,210 --> 00:43:06,930 E poi questo dice quanto segue. 954 00:43:06,930 --> 00:43:12,600 Ehi del browser, se vedete un HTML elemento o tag nella pagina che 955 00:43:12,600 --> 00:43:17,040 ha un identificatore unico di top, in modo che il simbolo cancelletto qui significa solo 956 00:43:17,040 --> 00:43:21,010 un'idea unica di top, andare avanti e fare la sua dimensione del carattere 36 957 00:43:21,010 --> 00:43:22,490 e il suo peso grassetto. 958 00:43:22,490 --> 00:43:26,840 >> Hey browser un elemento la cui ID è centrale, lo rendono 24 pixel. 959 00:43:26,840 --> 00:43:31,070 E hey del browser, se vedete un idea di fondo, rendono 12 pixel. 960 00:43:31,070 --> 00:43:33,540 L'effetto alla fine è esattamente il sam. 961 00:43:33,540 --> 00:43:36,500 Se vado in CSS 1, il pagina sembra la stessa. 962 00:43:36,500 --> 00:43:39,810 Ma siamo un passo verso un design leggermente migliore. 963 00:43:39,810 --> 00:43:44,850 Permettetemi ora di tornare qui per CSS2 e vedere cos'altro ho fatto. 964 00:43:44,850 --> 00:43:48,030 >> Ora la pagina è molto, molto pulito. 965 00:43:48,030 --> 00:43:50,730 In realtà, io posso andare bene tutti il contenuto di una pagina qui. 966 00:43:50,730 --> 00:43:54,270 Ma quello che ho io nuovo tag introdotto, ovviamente? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 E non è il nome migliore per un tag, perché non è un collegamento in senso 969 00:43:57,853 --> 00:44:00,780 che lo sappiamo, ma questo significa un collegamento a un altro file. 970 00:44:00,780 --> 00:44:02,890 Questo è un po 'come acuto comprendono in C. 971 00:44:02,890 --> 00:44:06,280 >> Questo è il modo in HTML dire ehi del browser, 972 00:44:06,280 --> 00:44:10,240 andare a prendere il contenuto del il file denominato css2.css. 973 00:44:10,240 --> 00:44:12,880 Il rapporto, per me, è che si tratta di un foglio di stile. 974 00:44:12,880 --> 00:44:17,980 E in effetti, questo è ciò che quella del S di a fogli di stile CSS mezzi. 975 00:44:17,980 --> 00:44:20,350 Si tratta di un foglio di stile. 976 00:44:20,350 --> 00:44:23,120 E 'solo il file di testo contenente un sacco di proprietà. 977 00:44:23,120 --> 00:44:25,940 Si tratta di un insieme di stili che si desidera applicare a una pagina. 978 00:44:25,940 --> 00:44:28,860 >> E così questo è apparentemente riferendosi ad un secondo file. 979 00:44:28,860 --> 00:44:32,970 E se apro che, CSS2.css, Noto che tutto quello che ho fatto 980 00:44:32,970 --> 00:44:35,900 è copiare e incollare tutto questo in questo file. 981 00:44:35,900 --> 00:44:38,220 E ora, anche se non hai mai coded questa roba prima, 982 00:44:38,220 --> 00:44:40,700 basta considerare con la cappello ingegneria proverbiale 983 00:44:40,700 --> 00:44:44,220 su, perché si tratta di una migliore progettazione probabilmente? 984 00:44:44,220 --> 00:44:48,910 Factoring fuori quelle proprietà CSS, mettendoli nelle loro file. 985 00:44:48,910 --> 00:44:51,330 Anche se abbiamo risolto questo problema come cinque minuti fa 986 00:44:51,330 --> 00:44:52,600 nella prima versione. 987 00:44:52,600 --> 00:44:55,730 >> Noi non abbiamo migliorato la Pagina stilisticamente, 988 00:44:55,730 --> 00:44:57,520 questo è solo meglio disegno in un certo senso. 989 00:44:57,520 --> 00:44:58,990 Perché pensi? 990 00:44:58,990 --> 00:45:01,510 Già. 991 00:45:01,510 --> 00:45:02,260 Più flessibile come? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Già. 994 00:45:05,540 --> 00:45:07,373 Quindi, se volete andare indietro e cambiare le cose, 995 00:45:07,373 --> 00:45:09,540 ora, si ha un posto in cui è possibile cambiare le cose. 996 00:45:09,540 --> 00:45:11,622 Ed in effetti, qualcosa come problema impostare sette, 997 00:45:11,622 --> 00:45:13,690 dove ci attuare una Stock Website trading, 998 00:45:13,690 --> 00:45:15,523 che sta per avere un tutta una serie di pagine. 999 00:45:15,523 --> 00:45:17,620 E sarebbe veramente fastidioso se si decide, hm, 1000 00:45:17,620 --> 00:45:21,630 Non mi piace molto 24 pixel, voglio che sia 28 pixel o leggermente più grande. 1001 00:45:21,630 --> 00:45:23,550 E poi hanno a che fare un globale trovare e sostituire 1002 00:45:23,550 --> 00:45:27,560 o aprire tutti i file del tuo sito web semplicemente per cambiare realmente un valore. 1003 00:45:27,560 --> 00:45:31,290 Con factoring fuori questi stili in un luogo centrale, 1004 00:45:31,290 --> 00:45:34,720 ora è possibile aprire un file di testo in CS50IDE in qualsiasi programma, 1005 00:45:34,720 --> 00:45:36,479 modificarlo, salvarlo, e fatto. 1006 00:45:36,479 --> 00:45:38,270 Hai propagata quelli cambiamenti ovunque. 1007 00:45:38,270 --> 00:45:42,450 E questo sarebbe lo stesso in un file di punti h pure. 1008 00:45:42,450 --> 00:45:46,697 Quindi tutte le domande così lontano su questa sintassi? 1009 00:45:46,697 --> 00:45:48,530 Va bene, quindi abbiamo fatto tutto sembra 1010 00:45:48,530 --> 00:45:51,170 salvo applicare concretamente i collegamenti ipertestuali. 1011 00:45:51,170 --> 00:45:52,740 E così andiamo avanti e fare questo. 1012 00:45:52,740 --> 00:45:54,830 Lasciami andare avanti e creare un nuovo file qui. 1013 00:45:54,830 --> 00:45:59,970 Io vado a chiamare link.html, inserire nel codice di oggi. 1014 00:45:59,970 --> 00:46:03,000 >> E ho intenzione di fare aperto Staffa tipo doc html. 1015 00:46:03,000 --> 00:46:05,970 Per inciso, questa cosa al top, questo dichiarazione di tipo doc, 1016 00:46:05,970 --> 00:46:08,420 è l'unico che è strano con il punto esclamativo. 1017 00:46:08,420 --> 00:46:12,100 Devi solo fare lì e significa che stiamo utilizzando la versione HTML 5. 1018 00:46:12,100 --> 00:46:14,460 Versioni precedenti di lingua era molto più a lungo 1019 00:46:14,460 --> 00:46:16,400 stringhe che avete avuto bisogno di mettere lì. 1020 00:46:16,400 --> 00:46:18,620 Quindi, ecco un esempio chiamato collegamento. 1021 00:46:18,620 --> 00:46:20,950 >> Ho bisogno di un corpo della pagina web qui. 1022 00:46:20,950 --> 00:46:29,770 E qui dentro, un uguale href diciamo HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 e il mio sito web preferito, diremo. 1024 00:46:35,420 --> 00:46:38,550 Va bene, allora molto , pagina facile da usare innocuo. 1025 00:46:38,550 --> 00:46:42,950 Se ora vado nel mio elenco lista qui e di aprire link.html, 1026 00:46:42,950 --> 00:46:44,780 abbiamo hyper text. 1027 00:46:44,780 --> 00:46:47,410 >> E in effetti, questo è dove H in HTTP proviene. 1028 00:46:47,410 --> 00:46:51,580 Protocollo di trasferimento Hypertext è sul trasferimento di testo 1029 00:46:51,580 --> 00:46:53,840 che ha collegamenti ipertestuali ad altre risorse. 1030 00:46:53,840 --> 00:46:58,210 E infatti, ecco il familiare, se retrò, in blu nel link che, se cliccato, 1031 00:46:58,210 --> 00:47:02,607 in realtà mi portano a Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Ora, oh, che è di prossima uscita. 1033 00:47:03,940 --> 00:47:08,970 Va bene, così ora, quali sono alcune delle implicazioni di questo? 1034 00:47:08,970 --> 00:47:11,610 >> E, francamente, il mondo comincia per ottenere un po 'più familiare 1035 00:47:11,610 --> 00:47:15,090 e anche un po 'più paura ma anche un po 'più 1036 00:47:15,090 --> 00:47:17,840 auto difendibile volta che si avvia per capire queste cose. 1037 00:47:17,840 --> 00:47:21,610 Perché probabilità sono, alcuni di voi, se si va attraverso la cartella spam di Gmail o anche 1038 00:47:21,610 --> 00:47:23,990 la posta in arrivo, probabilmente avete ottenuto un qualche tipo di e-mail 1039 00:47:23,990 --> 00:47:26,980 che ti chiede di cambiare la vostra Password forse o forse verificare 1040 00:47:26,980 --> 00:47:28,910 le credenziali PayPal o roba del genere. 1041 00:47:28,910 --> 00:47:34,510 >> E infatti, si potrebbe avere ricevuto qualcosa che dice come clicca qui 1042 00:47:34,510 --> 00:47:42,260 per reimpostare la password PayPal. 1043 00:47:42,260 --> 00:47:44,130 E ora, si noti, se questo non è Disney.com 1044 00:47:44,130 --> 00:47:51,600 ma come badplace.com e ricaricare, notare che il testo qui 1045 00:47:51,600 --> 00:47:53,710 potesse dire qualsiasi cosa. 1046 00:47:53,710 --> 00:47:55,260 E in effetti, questo è solo parole. 1047 00:47:55,260 --> 00:48:04,610 Perché non posso effettivamente essere super-cattivo e dire http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Clicca qui ripristinare il vostro Paypal password e ora ricaricare. 1049 00:48:14,090 --> 00:48:16,220 Questo sembra piuttosto legittimo, giusto? 1050 00:48:16,220 --> 00:48:20,470 Voglio dire, non mi fate clic su una e-mail che dice proprio questo. 1051 00:48:20,470 --> 00:48:22,450 Ma bando la dicotomia qui. 1052 00:48:22,450 --> 00:48:26,880 Dice www.paypal.com, e in effetti, aspetta un minuto, 1053 00:48:26,880 --> 00:48:29,210 sappiamo che si desidera la s per la sicurezza. 1054 00:48:29,210 --> 00:48:35,450 Così ora, andare a www.paypal.com HTTPS, ma se non hai mai fatto prima, 1055 00:48:35,450 --> 00:48:38,182 non prendere l'abitudine di in bilico su piccoli link qui. 1056 00:48:38,182 --> 00:48:39,890 Ed è difficile vedere sullo schermo lì, 1057 00:48:39,890 --> 00:48:41,340 e non è tutto ciò che facile qui. 1058 00:48:41,340 --> 00:48:43,615 Ma modo qui in il piccolo piccolo angolo 1059 00:48:43,615 --> 00:48:45,740 fa il browser realtà che stiamo andando dire 1060 00:48:45,740 --> 00:48:48,850 a badplace.com invece di Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Ora, dove stiamo andando con questo? 1062 00:48:51,620 --> 00:48:54,859 Tutti gli esempi che abbiamo fatto oggi, abbiamo codificato duro e digitato manualmente. 1063 00:48:54,859 --> 00:48:56,900 Il web è incredibilmente interessante quando si dura 1064 00:48:56,900 --> 00:48:59,844 codificare le tue pagine web in modo che i contenuti è statica e non cambia mai. 1065 00:48:59,844 --> 00:49:01,760 Naturalmente, tutti i nostri siti web preferiti oggi, 1066 00:49:01,760 --> 00:49:04,470 che si tratti di Gmail o Twitter o Facebook o qualsiasi numero di altri 1067 00:49:04,470 --> 00:49:05,290 sono dinamici. 1068 00:49:05,290 --> 00:49:07,340 Stanno cambiando in risposta all'input dell'utente 1069 00:49:07,340 --> 00:49:08,840 proprio come i risultati di ricerca di Google. 1070 00:49:08,840 --> 00:49:12,415 >> E così il Mercoledì, ciò che facciamo è lasciamo HTML e CSS introduzione 1071 00:49:12,415 --> 00:49:14,290 dietro di noi e ci prendiamo per scontato che noi ora 1072 00:49:14,290 --> 00:49:16,640 conoscerlo e introduciamo un nuovo linguaggio di programmazione 1073 00:49:16,640 --> 00:49:19,050 chiamato PHP, che piace C, sta per dare noi 1074 00:49:19,050 --> 00:49:22,450 il potere di creare realmente i programmi che si generare output. 1075 00:49:22,450 --> 00:49:25,900 In questo caso, useremo PHP per generare dinamicamente web 1076 00:49:25,900 --> 00:49:27,340 pagine utilizzando questo nuovo linguaggio. 1077 00:49:27,340 --> 00:49:28,989 Quindi più che il Mercoledì. 1078 00:49:28,989 --> 00:49:29,530 Ci vediamo. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [RIPRODUZIONE DI BRANI MUSICALI] 1081 00:49:37,380 --> 00:52:38,864