[RIPRODUZIONE DI BRANI MUSICALI] 

DAVID J MALAN: Questo è CS50 e questo è l'inizio di settimana 7. Così bentornato. E si può ricordare che in quattro set problema, c'era un po 'di una caccia al tesoro per alcuni favolosi premi in base alle quali dopo a recuperare le immagini personale sia qui che a New Haven, si erano sfidati a trovare il maggior numero di quegli scienziati informatici, come si poteva. E abbiamo un intero mazzo di osservazioni. Ho pensato di condividere alcuni con voi qui oggi. 

E postiamo tutti questi online. Ma in particolare, ho voluto attirare la vostra attenzione a-- bene uno, Sam era in un bel po 'di loro generalmente in posa come questo. Ma sembra che a partire Questa mattina, il vincitore è stato un certo qualcuno di nome Ken con 24 del personale catturati sulla fotocamera o un po 'di più quando si prende in conto personale multipla nelle immagini. Nella foto qui è Ken prossimo a Maria a New Haven. 

Ora, Ken, però, si trasforma fuori è un po 'di cassa angolo che non è ancora accaduto prima. Si scopre che non si è verificato a me di mettere in stampa fine problema set di quattro che dice che il personale sono ineleggibile per i favolosi premi perché Ken è, naturalmente, uno dei i fotografi del nostro personale. Ora, con quello detto, egli originariamente mi scrisse per dire si prega di non postare queste foto on-line. Penso che in gran parte perché la maggior parte delle foto che questo fotografo ha preso guardare un po 'di qualcosa come questo. E simili. 

Ma Ken vorrebbe che rassicurarvi che lui è un fotografo molto buona, egli è un professionista, prende foto che non sono sfocate, che sono meglio a fuoco, e lui ha preso un bel po 'del nostro personale. Ma piuttosto che solo riconoscere Ken, quello che abbiamo pensato di fare è passare attraverso la lista dei studenti effettivi che hanno presentato. E si scopre che Lancia con 15 foto a partire da questa mattina era il nostro vincitore. 

Ed è nella foto qui Lancia con Colton, con Skaz, con me stesso, e con Sam. Ma poi si scopre che a partire dal 11:46, quindi solo un po 'fa, Sono tornato alla mia email e l'ho trovato che abbiamo avuto ancora un altro di presentazione da uno studente di nome Bonnie la cui e-mail, ha detto solo questo. Non andare a mentire, sto In questo modo durante le lezioni. E poi proceduto a collegare solo 14 foto, un timido di Lance di 15. 

Ma nelle foto di Bonnie, si trasforma out sono stati più membri dello staff, Sam in mezzo a loro, così che cosa abbiamo pensato che vorrei fare è riconoscere entrambi. Quindi, oltre ad ottenere il Dropbox spazio che tutti coloro che hanno partecipato riceve, queste due sezioni saranno anche ricevere un bel pranzo adatta a loro e loro sezione compagni la prossima settimana. E così si sente da noi, Lance e Bonnie, a tale proposito. Così grandi complimenti a loro. Ora, quelli di voi che sarebbe come il pranzo, più in generale sapere che il pranzo CS50 a Cambridge e New Haven è questo Venerdì. Vai al sito della barra RSVP CS50. Ed ora una parola sui seminari. Più curricularly. Quindi stiamo avvicinando alla punto del semestre dove si dovrebbe iniziare pensando a progetti finali. Ed infatti, in poco, sarà le cosiddette proposte pre essere dovuti. Proposte, in modo pre hanno lo scopo di essere piuttosto basso impatto e davvero solo un'opportunità per di comporre una breve nota il vostro insegnamento compagni di venire a conoscenza lui o lei che cosa stai pensando potrebbe voler fare per il vostro progetto finale. 

Ora, molti studenti finiscono per web facendo basa progetti finali. E, naturalmente, siamo solo ora la scorsa settimana in questo e al di là di immersione in programmazione web. Quindi non preoccuparti se hanno assolutamente idea di come si dovrebbe costruire le idee che si potrebbe avere nella vostra mente. Questo è in realtà solo una funzione di forzatura per farti pensare e parlare con il vostro TF su di esso. Ma per aiutarvi in ​​questo, e con i progetti finali in ultima analisi, sapere che CS50 ha una tradizione di offrire seminari. 

E questi sono opzionali, le mani su, o lezioni in base alle opportunità per saperne di più su argomenti che sono un piccolo accessorio al corso del programma, ma comunque meraviglioso materiale di guidare progetti finali. E quindi questa è la lista che è Personale CS50 qui a New Haven hanno escogitato per quest'anno su iOS programmazione, Android programmazione, sviluppo del gioco, e mazzi di più strumenti e linguaggi e tecniche. 

Quindi tenete d'occhio il sito web del CS50. E nel frattempo, se si desidera registrare il vostro interesse in uno di questi, si giunge nel registro barra di CS50. E noi poi seguire per quanto riguarda il giorni e orari di volo e sedi e tutto sarà più everything-- essere in streaming e disponibile anche su richiesta dopo se non si può effettivamente farlo. Quindi, senza ulteriori indugi, sinistra fuori l'ultima volta con GET. 

E questo era come il messaggio che è stato all'interno della busta virtuale, ricordare, che siamo passati da router a router router tra un browser Web e un sito web server. E quel messaggio sembrava un po 'di qualcosa di simile. Questo è stato il messaggio più arcana che era in realtà all'interno di una busta scritta su un pezzo di carta la cui prima riga dice letteralmente, ottenere barra. 

E proprio come un controllo di integrità, che cosa ha fatto barra indicano? Che cosa significa quando barra richiesta di un sito web? Si richiede tutto il tempo. La maggior parte ogni volta che si visita un sito web, voi in realtà non digitare un nome di file. Probabilmente solo andare a Facebook.com, inserire, gmail.com, o simili. E cosa rappresenta barra? Che il file? O che cosa pagina, in particolare? 

L'indice, sì. Così la pagina di default. Quindi, se non si specifica un file nome come inizieremo a vedere, si sta effettivamente chiedendo solo dammi la pagina predefinita di Facebook o darmi mia casella di posta o dare me la pagina predefinita di notizie sul sito web della CNN o simili. E un server quindi risponde quel messaggio con qualcosa in questo modo, dire di sì, io parlare versione HTTP 1.1. 

200, che è uno stato codice che noi esseri umani raramente mai vedere perché è buono. Perché significa OK, la richiesta è stata ricevuta e gestita correttamente. E il tipo di contenuto apparentemente in risposta è abbastanza spesso, ma non sempre, il testo. E in particolare, HTML. E questo è in realtà dove guardiamo oggi. 

Quindi, in realtà, ho intenzione di andare avanti e di aprire un browser. Ho intenzione di utilizzare Chrome, è possibile utilizzare più qualsiasi browser nelle settimane a venire. Si consiglia generalmente di Chrome perché è particolarmente buono per gli sviluppatori di software. Ha un sacco di costruito in strumenti che rendono più facile di sviluppare non solo HTML e CSS, cose inizieremo a parlare di oggi, ma anche altre lingue. 

E ho intenzione di andare avanti e andare a-- Io vado a controllare o clic destro cliccare in qualsiasi punto di una pagina web. E ho intenzione di andare in Inspect Element. E ho intenzione di modificare la mia schermo solo un po 'qui. Mi permetta di spostare questo al fondo. Quindi questo è ciò che si chiama Ispettore di Chrome. Quindi questo è come un debug strumento integrato in Chrome. 

Tutti voi già hanno questa se siete stati con Chrome. E permette di vedere cosa sta succedendo in sotto la cappa di una certa pagina web. Quindi cerchiamo di realmente prendere un guardare a questo come segue. Ha modo più funzioni e ci preoccupiamo per oggi. Ma c'è queste schede qui. Elementi, di rete, le fonti, timeline, e alcune altre cose. Io vado a cliccare su Rete per un momento. 

Ed è un po 'opprimente a prima vista qui. Ma quello che ho intenzione di fare è lasciare mi semplificare un po '. Ho intenzione di accendere il registrazione luce in modo che è rosso. E ho intenzione di dire conservare log. E questo è solo un po ' cosa che ho capito nel corso del tempo che sta per risparmiare tutto ciò che accade nel browser. E ora ho intenzione di andare a http://facebook.com. 

A dire il vero, facciamo www per buona misura, tagliare. Invio. Così un URL che molti di si potrebbe avere visitato. E ora di Facebook web pagina viene in su in cima. E poi tutta una serie di roba volato sul fondo. Ed infatti, si scopre che quando si visita Facebook.com, non sei solo facendo una richiesta HTTP, si scopre che sta per Facebook.com invia 41 di quelle buste, ciascuno con la propria richiesta di ottenere, come indicato, seppur dietro lo schermo qui, nella parte inferiore dello schermo, indica che, in effetti, il mio Browser ha fatto 41 richieste. 

E in totale, ha trasferito 861 kilobyte e ci sono voluti per qualche ragione ben otto secondi scaricare tutto questo. Ecco, questo è in realtà un po 'strano che il sito di Facebook vorrebbe che lungo, ma così sia in questo caso. Ora, tutto questo non mi interessa davvero circa eccezione per la richiesta più in alto. Così andiamo a questo qui e fatemi zoom out solo per un attimo. 

E lasciatemi ingrandire questa. Quindi quello che ho fatto a sinistra, anche se c'è un sacco di cose qui è Ho evidenziato Facebook.com e poi Noto che sto scorrendo verso il basso, scorrendo verso il basso, scorrere verso il basso, per richiedere le intestazioni. E vedrai che Chrome sta mostrando me essenzialmente il contenuto interno della richiesta che ho fatto. Non è la formattazione in tutto allo stesso A proposito, ma notate c'è menzione di ottenere, notate c'è menzione del padrone di casa, Facebook.com, il percorso, o barra, che è il file ho richiesto. 

E poi se ho scorrere eseguire il backup, faremo in realtà vedere che cosa ha restituito Facebook per me è tutte queste intestazioni. Quindi, all'interno di quella busta virtuale infatti sono un sacco di coppie di valori chiave. Una parola, i due punti, e quindi un valore. Una parola, i due punti, e un valore. Questi sono chiamati intestazioni. E non c'è modo più dettagliato qui di abbiamo effettivamente a cuore in questo momento. 

Ma questo non è seconda a ultima laggiù, noterà che il server di Facebook.com, infatti detto ecco che arriva un po 'di testo HTML. Quindi, tutto questo per dire che quando si richiede un web pagina da un browser a un Server, che server risponde con una busta propria all'interno del quale è testo. In altre parole, HTML. Hyper Text Markup Language. Che è un'altra lingua che vi presentiamo oggi che gli esseri umani o computer generano per implementare pagine web. 

In particolare, diamo un'occhiata a questo. Ho intenzione di tornare indietro ora al sito di Facebook. E io vado a solo Controllo click o click destro e fare clic su Visualizza sorgente pagina. E anche se non si utilizza Chrome, IE può fare questo, Firefox può fare questo, Safari può fare questo, anche se il menu opzioni potrebbero apparire un po 'diverso. E questo è il codice HTML che Marco e compagnia Facebook hanno scritto. 

E collettivamente, questa lingua qui implementa il blu e la pagina bianca che abbiamo visto poco fa. Ora, questo è un po 'opprimente. Ma se guardiamo in alto a sinistra, siamo intenzione di iniziare a vedere alcuni modelli. Sembra che ci sia un sacco di questi Staffa angolo aperto e poi c'è questa parola chiave HTML. Ecco un altro aperto staffa angolare e la testa. 

Ecco, se scorriamo e giù e giù, io sono intenzione di andare avanti e provare per cercare qualcosa. C'è modo sopra a destra qui è il corpo parentesi aperta. E ricordare da ultimo volta che abbiamo proposto che la pagina web più semplice che un essere umano possa scrivere potrebbe apparire un po 'qualcosa di simile. Tag HTML aperto, testa aperta tag, tag title aperto, poi chiuso titolo, cranico chiuso, aperto tag body, un testo, corpo chiuso, HTML chiuso. 

Ma una pausa qui solo per un momento. Questo codice, anche se hai mai scritto prima ma ancora non capisco bene quello che sta succedendo, sembra piuttosto buono. A destra, è molto pulito. E 'molto bello stilisticamente. Un sacco di rientro e lo spazio bianco. Di Facebook non è. Perché, dunque, tanto Facebook peggio di quello che a scrivere HTML? A quanto pare. 

A destra, questo è come uno su cinque per stile. C'è un motivo valido per loro di tagliare questi angoli. Va bene, in modo che non si vuole rendere più facile per voi di leggerlo. Quindi, in un certo senso, sono offuscando esso, sorta di scrambling esso almeno esteticamente così che è più difficile per Myspace per andare a strappare loro homepage e il codice HTML per esso. Si scopre che con programmi però, tra cui Chrome, siamo in grado di pulire questo super-facilmente. Quindi non è così è come il motivo. Che altro potrebbe essere la causa. Già. Già, i costi di spazio bianco di dati. Cosa intendi? Si Esattamente. Se si preme il tasto Tab molto o la barra spaziatrice, considerare le implicazioni. Così ogni tasto della tastiera è un [Incomprensibile] rappresentato come un byte. 

Quindi supponiamo che Marco o uno qualsiasi degli sviluppatori in questi giorni colpisce la barra spaziatrice una sola volta in questa pagina HTML che rappresenta la home page di Facebook. E Facebook ha un sacco di utenti in questi giorni. Quindi supporre che l'homepage di Facebook è visitato da un miliardo di persone oggi. E qualcuno a Facebook ha premere la barra spaziatrice una sola volta. 

Così un byte aggiuntivo, un miliardo di richieste, quanto più dati Facebook il trasferimento su internet perché qualcuno ha colpito la barra spaziatrice sulla sua tastiera? Un miliardo di byte o un gigabyte di i dati vengono inviati dal server di Facebook di persone in tutto il per nessuna buona ragione mondo. Ora, questo è solo uno spazio. 

Immaginate se abbiamo effettivamente pulire questo cosa e frastagliata e aggiunto un sacco di spazio bianco e caratteri di tabulazione e spazi, si finisce per gigabyte di spesa, se non terra byte di spazio. E così super comune nel mondo reale di sviluppo web è quello di minify codice. E avremo finalmente a vedere come si potrebbe fare questo. 

Ma oggi, inizieremo a scrivere codice che in realtà è leggibile da noi umani. Si scopre, però, se si va indietro a questo strumento in Chrome Inspect Element, in precedenza, eravamo sulla scheda Rete. Si scopre che se si va al scheda Elementi, quelli reali Chrome è abbastanza stampato versione dello stesso HTML. Così abbiamo deobfuscated esso. Quindi non è partita per un computer. E ora si può effettivamente cliccare in giro e iniziare per vedere la gerarchia che è una pagina web. Quindi cerchiamo di fare questo in realtà. Ho intenzione di andare avanti e di aprire su il mio Mac un programma chiamato modifica del testo. E ricordare che questo è solo un super semplice programma di testo. Windows ha notepad.exe. E ho intenzione di Verbatim digitare la seguente. Doc tipo HTML, parentesi aperta HTML, chiuso staffa HTML, abbiamo la testa della pagina qui, l'estremità della testa della pagina qui, un titolo sarà come, ciao mondo. 

E poi qui, abbiamo bisogno il corpo della pagina web. Cassone coperto. E poi qui, ciao mondo. Tutto ok. Così abbiamo scritto una pagina web super veloce. Io vado a salvarlo come hello.html sul mio desktop. Il mio Mac di andare a lamentarsi, pensando che, aspetta un minuto, si tratta di un file di testo, fare si voglia chiamare .txt? Ma no, io voglio usare puntino HTML. 

E allora cosa c'è di bello se basta fare doppio clic su questo file, hello.html, ecco la mia pagina web. Purtroppo, io sono il unico al mondo chi può visitare questa pagina ora. Perché dove ci si vive apparentemente? E 'sul mio Mac, giusto? Che è inutile. Come nessuno in questa stanza figuriamoci su internet può effettivamente visitare quella pagina. Così oggi, abbiamo bisogno di introdurre un altro elemento. 

E per fare questo, ho intenzione di andare avanti e di aprire Cloud 9. Così Cloud 9 è, naturalmente, un nuvola servizio-- basato CS50 IDE-- Che ha tutte le nostre aree di lavoro in esecuzione da qualche parte su internet. E ciò significa che tutti i nostri file sono già accessibili al pubblico. Quindi cerchiamo di andare avanti e fare questo. Ho intenzione di andare avanti e creare un nuovo file NCS50IDE. Io vado a salvarlo come prima come hello.html e cliccare su Salva. E ora solo per risparmiare tempo, ho intenzione di andare avanti e copiare incolla questo codice invece di digitarla nuovamente. E salvarlo. E così ora ho un file chiamato hello.html. Ma come fare io in realtà aprirlo come una pagina web? Beh, si scopre il costruito per CS50 IDE non è soltanto un compilatore come clang e un debugger GDB e come mazzi di altri programmi, c'è in realtà un vero e proprio pieno web server in esecuzione all'interno CS50 IDE. 

Tutti voi, vale a dire, avere un proprio server web. E un server web è solo un pezzo di software il cui scopo nella vita è quello di servire le pagine web. Per ascoltare le richieste dai browser e rispondere con bustine virtuali all'interno del quale è il contenuti che ho scritto. Quindi questo server web è fonte realmente libero e aperto. Dove open source significa solo un software che qualcun altro ha scritto che tutti noi possiamo effettivamente vedere e scaricare e addirittura modificare il codice sorgente. E si chiama Apache. 

E ce l'abbiamo fatta un po 'più facile utilizzare in CS50IDE chiamandolo Apache 50. In modo che si può effettivamente comprendere quanto segue. Io vado a dire Apache 50 prima. E poi sto solo andando a dire punti. E vediamo un po 'un po' messaggio arcano dicendo impostazione di Apache documento [? gruppo?] a casa, ubuntu, qualunque essa sia, tagliare spazio di lavoro. Avvio di web server Apache 2 con successo. 

Quindi per farla breve, io hanno appena premuto un pulsante e acceso un server web che è ora l'ascolto su internet sulla porta TCP 80 ad un indirizzo specifico. E dice qui, e questo cambierà Based sul tuo nome utente e di altri fattori, a meno di notare ora se clicco questo, IDE50 dot jharvard e così e così, notare che tutto questo tempo Negli ultimi settimane, potrebbe essere notato che il proprio nome utente è incorporato nella mano in alto a destra angolo di CS50IDE. 

E che in realtà è stato tutto questo cronometrare l'indirizzo al quale è possibile visitare tutti i file via web. Fino ad ora, non ha importato, perché in C, in genere vogliono cose che funzionano in un terminale, non sul web. Ma oggi, si parte la scrittura di codice basato sul web che noi vogliamo accessibile a URL pubblici. Così che cosa ho intenzione di fare è fare clic su questo URL. 

E noto che vedo abbastanza brutto indice, un elenco di directory, ma quale file salta fuori di te, probabilmente? Hello.html. Ecco perché ho salvato il file nel mio lavoro. E quello che ho detto Apache web server è guardare nella directory di lavoro di David. E lasciare che qualcuno nella mondo a vedere questi file. 

E in effetti, se io ora cliccare su hello.html, Vedo in questa scheda esattamente quel file. Ora notate, nuvola FARE 9 del qualcosa di un po 'utile per noi. All'interno CS50 IDE, notare c'è improvvisamente una barra degli indirizzi. Questo perché anche se siamo utilizzando Chrome per visitare CS50IDE, all'interno del CS50IDE è proprio versione di un browser web in questo momento. E così, piuttosto che complicare le cose in quanto tale, Ho intenzione di andare avanti e basta copiare questo URL. Ho intenzione di andare avanti e basta aprire il mio finestra di Chrome. Quindi non c'è nessuna magia qui, no CS50IDE. Sto solo andando a incollare letteralmente il mio J Harvard URL e premere Invio. E voilà, ora, e in teoria, tutti su internet, se ho configurato le autorizzazioni in modo appropriato, possono visitare questo file. E così ora, se ho detto hello.html, voilà, ci è la mia pagina web incredibilmente deludente. Allora, facciamo un controllo di integrità rapido. Poiché tutti che è concettuale set up. E non abbiamo effettivamente davvero ti ha insegnato come scrivere codice HTML per sé. Tutte le domande finora su ciò che è appena successo? Sì. Ha CS50 possiede queste pagine web? In che senso? Bella domanda. Così CS50 di possiede CS50.io. Abbiamo infatti comprato quel nome a dominio. E per natura di voi ragazzi accedendo al CS50IDE, si ottiene tutto ciò che è chiamato un sottodominio. 

Così IDE50-Malan, o IDE50-Rob.CS50.io, questo è il tuo indirizzo univoco all'interno il nostro nome di dominio. Quindi, ai fini del corso, hai il tuo indirizzo univoco. Ma abbiamo semplificato le cose per l'acquisto del dominio di primo livello, CS50 puntino I / O e poi tutti gli altri sono all'interno di questo, per così dire. E noi torneremo a quella in un paio di settimane, probabilmente, soprattutto a progetto finale tempo, quando qualcuno di voi potrebbe desiderare di ottenere i propri nomi di dominio. In realtà è relativamente semplice. Tutto ok. Quindi cerchiamo di fare questo ora. Ho intenzione di tornare in CS50IDE, dove il mio file in questo momento, hello.html, non è poi così interessante. Mi piacerebbe fare qualcosa un po 'più bello di questo. Quindi ho intenzione di fare qualcosa di simile. Lasciami paragraphs.html aperto. Quindi questo è un file che ho scritto in anticipo. Nella parte superiore di esso, come sempre, abbiamo commenti. Ma in HTML, i commenti guardare un po 'diverso. On line di tre e la linea 14, si vedere la sintassi per iniziare un commento e terminare un commento. 

Ma nessuna delle cose a tra le questioni funzionale. E 'solo una nota a una umano quello che sta succedendo qui. E proprio come una rapida sanità mentale verificare, se ho scorrere verso il basso, qual è la nuova ovvio tag che abbiamo introdotto? I tag finora abbiamo visto sono aperte Staffa HTML, testa, titolo e corpo. Ma cosa c'è di nuovo, ovviamente ora? 

Sì, così p. Il tag p o il tag di paragrafo. E poi ho solo preso in prestito un po 'di default Testo latino a costituire miei paragrafi. Perché quello che volevo dimostrare è come si potrebbe rappresentano paragrafi di testo in formato HTML. E così quello che sta cominciando ad accadere qui è che c'è già un modello di sviluppo. E lasciatemi andare avanti e fare questo. Permettetemi innanzitutto di spegnere Apache. E ho intenzione di dirgli di iniziare a sé di nuovo in casa di fonte di oggi sette m directory. In modo da avere accesso a tutto. 

E ora, se dovessi tornare a questo elenco di directory, Noto che vedo tutti i file a partire da oggi. E vedrete nella set successivo problema, faremo a disposizione le per fare esattamente questo. Se apro paragraphs.html, questo potrebbe come pure l'aspetto di un linguaggio di programmazione a voi se non si parla o leggere il latino. Ma questo è a soli tre punti di testo che sono segnate in HTML. 

E notare il paragrafo pause tra di loro. Perché si scopre, e anche se potrebbe essere incline a fare questo, mentre nel mondo reale, se si vuole mettere la linea pause tra le cose, si potrebbe semplicemente fare questo e premere Salva. E ora, se ricarico qui, avviso che tutto offusca solo insieme in una sola goccia di testo. Perché HTML è una specie di un linguaggio muto. 

Esso è destinato ad essere utilizzato in tale un modo che il browser sarà solo fare esplicitamente ciò che gli si dice di fare. Quindi, se non dite dammi un nuovo paragrafo, non avete intenzione di vedere un nuovo paragrafo. Ed infatti, ciò che il Browser intenzione di fare è anche se premere invio, diciamo ancora e ancora e ancora, spostando così il testo basso sullo schermo e quindi salvare e poi ricaricare, il browser sta andando per comprimere tutto questo spazio bianco in una sola, spazio bianco visibile. Tutto ok. Ecco, questo è il tag di paragrafo. E quindi qual è il modello che sta sviluppando qui? Ebbene, sembra essere il caso che HTML è tutto di iniziare un tag e termina un tag. E che cosa è un tag? Beh, è ​​solo un pezzo di sintassi. Aprire la staffa, una parola chiave, staffa chiusa, è un tag. O avviare tag. E poi quando sei fatto esprimere se stessi, come in hai finito con il paragrafo, si fa per così dire di fronte. Ma il contrario non è abbastanza all'indietro. 

È sufficiente prefisso lo stesso tag di nome con una barra del genere. Tutto ok. Quindi non tutto così eccitante. E infatti, non stiamo facendo il web tutto questo più interessante. Cosa succede se voglio fare cose più grandi e audaci? Così si scopre che qui un esempio in headings.html, dove nel mio corpo, Ho un tag H1, H2, H3, quattro, cinque, o sei, tutte sembrare piuttosto arcano. Ma se vado aprire questo ad esempio, diamo uno sguardo. Headings.html. 

Così i browser di default in grado di dare il testo che è grande e audace di dimensioni diverse. H1 è grande. H6 è più piccolo e quindi tutto il resto in mezzo. Ecco, questo è interessante, ma ancora non proprio il web lo so. E se vogliamo che ho qualcosa di simile a un elenco. . Quindi, ecco un elenco puntato di tre case di Harvard. 

Come hai a fare questo? Beh, date un'occhiata a list.html. E qui, vediamo un po 'di funky ma prendiamo in considerazione ciò che sta accadendo. Quindi, sulla base di ciò che avete appena visto, UL sta per lista non ordinata. Lista non ordinata significa semplicemente puntato. Non ci sono i numeri. C'è anche qualcosa chiamato elenco ordinato, che è un OL a tag. Poi LI, elemento della lista è tutto ciò che significa. 

E così automaticamente numeri tutto per voi. Ma ancora una volta, tutto il mio rientro e lo spazio bianco è solo per il mio bene. Il browser non è realtà andando a prendersi cura. Quindi, anche se non si poteva fare questo, tanto per intenderci, Non si dovrebbe, anche se il browser sarà ancora essere in grado di capirlo bene. Mi colpisce ricarica nel mio il browser, sto cliccando ricarica e nessun cambiamento sta avvenendo perché il browser ancora facendo esattamente quello che gli dico di fare. 

Tutto ok. Quindi tutto questo è solo il testo. Ora facciamo qualcosa di più interessante. Ho intenzione di andare avanti e prendere in prestito alcune di queste HTML. Ho intenzione di andare avanti e creare un nuovo file qui. E noi chiameremo questo rick.html. Abbiamo sproporzionatamente qualcosa usato chiamato un rotolo rick in questo classe di quest'anno, non lo so, è successo e basta organicamente. 

E ora è uscito di controllo. Quindi sono solo intenzione di andare con esso. E se vado a Google Immagini e Rick Astley. Se non si conosce il motivo per cui lo facciamo questo, basta leggere su Wikipedia. Ogni volta che hai cliccato sul link, qualcuno è stato ridendo da qualche parte. E mi permetta di andare lì ahead-- andiamo, andiamo a vedere questa immagine. 

Quindi qui abbiamo un immagine in Google Immagini. E supponiamo che questo sia ragionevolmente ovunque su internet. Quindi ho intenzione di assumere va bene per me per mettere in realtà questo nella mia pagina web. Ho intenzione di andare avanti e copiare l'immagine URL. E ora, se torno a Cloud 9, vediamo cosa posso fare qui. Così qui è solo una pagina web. Si tratta di Rick Astley, haha, Ho intenzione di tornare indietro ora a mio browser, ricaricare, e interessante. 

Dove si trova Rick? Quindi fammi vedere quello che è successo. A dire il vero, ho intenzione di finta che io non l'ho fatto. [Incomprensibile] metterlo qui. Torneremo a che in un attimo. Quindi, ecco rick.html. Quindi questo non è Rick Astley. Così si scopre che possiamo in realtà lo aggiungere qui. Questo è Rick Astley. Io vado a dire darmi un'immagine il cui fonte è l'URL Ho appena copiato, che a quanto pare è un felice compleanno qualcosa o altro. 

E ora ho intenzione di chiudere il tag come questo. Quindi questo è avvolgente lungo eccellente. Ma noto che tutto quello che ho fatto di immagini parentesi aperta è, origine con un attributo di questo. Ed è davvero un URL lungo. E alla fine, notare questo. Barra perché ho fatto staffa angolare invece di, come ogni altro tag, avere una parentesi aperta, IMG, chiuso staffa? Basta prendere una supposizione, anche se si non hanno familiarità di sorta con HTML prima. 

Così è come chiude il comando, ma perché non che non rendono davvero intuitivo senso di fare qualcosa di un po 'più verbose come vicino immagine? Già. Già. Basta semanticamente, non c'è alcun senso di partendo un'immagine e termina un'immagine, è sia lì o non lo è. Quindi non ha senso di lasciare uno spazio per altro all'interno di un'immagine. Non ci si può farlo. E così la sintassi sarebbe generalmente solo per fare la barra interna del tag aperto o il tag iniziale e poi ha colpito Salva. 

Quindi, se io ora ricaricare questo file, ora Ho un buon web pagina di cucina qui. E potremmo certamente davvero infastidire la gente inserendo invece come un link di YouTube. Ed infatti, qualunque momento hai mai andato a YouTube, e mi lascia in realtà accidentalmente rick rotolo me stesso qui. Così Rick rotolo. Così rick Roll-- ho intenzione di andare qui. 

[RIPRODUZIONE DI BRANI MUSICALI] 

OK, una persona piaceva. Quindi notare tutto questo tempo, se si fare clic sul link Condividi, è naturalmente ottenere l'URL che si può effettivamente incorporare in una e-mail o un'immagine forense o in un problema di impostare o in una diapositiva. E ora, se io invece clicco su embed, notare che tutto questo tempo, questa roba è stato lì. Ho intenzione di andare avanti e copiare questo. 

E solo così possiamo vedere meglio, io sono andando a incollarlo nel mio editor di testo. Si noti che questo ciò che YouTube ti ha detto. Ogni volta che si visita un Video di YouTube, se vogliono incorporare il video sul vostro pagina web, semplicemente afferrare questo. Quindi questo è un altro Tag HTML chiamato un iframe. O un telaio in linea. Così anche se sembra un po 'di più complesso di tutti gli altri. Così si scopre che l'immagine tag e apparentemente il tag iframe prendere ciò che sono chiamati attributi. 

E questo è un altro pezzo di sintassi HTML. Oltre al tag di nome, aperto staffa nome del tag, è possibile controllare il comportamento del tag avendo un sacco di attributo uguale valore. Attributo è uguale al valore. Così per esempio, YouTube ci sta dicendo se si desidera che la larghezza di questo video per essere 420 pixel e l'altezza per essere 315 pixel, che è come ti esprimi in HTML. 

La fonte del video sta essere che lungo URL di YouTube e poi qualche altra roba come cornice di frontiera è pari a zero, in modo che significa probabilmente non c'è nessun bordo intorno alla cosa. Consenti probabilmente a schermo intero significa che l'utente può fare clic su un pulsante e in realtà pieno schermo il video. Quindi, se ho molta voglia di essere impressionante qui a Rick dot HTML, piuttosto che utilizzare il tag di immagine, per non mi cancellare che, invece incolla questo. E ora ricaricare. E adesso ci risiamo. Va bene, che è abbastanza. Va bene così cercherò difficile non farlo di nuovo. Dunque, quali sono alcuni dei take away qui? Così HTML, brutto come queste pagine web sono, è in realtà piuttosto semplice. Non è un linguaggio di programmazione. Non ha funzioni. Non ha cicli. Non ha condizioni. Tutto quello che ha è di decine di diversi tag, ognuno dei quali ha zero o più attributi. E in effetti, cosa c'è di divertente su HTML come si inizia a tuffarsi è che è molto di sé insegnabile. 

Tutto ciò che serve è una comprensione del quadro generale di HTML. Che cosa è un tag, che è un attributo, come si fa in realtà configura una pagina web come segue. E tutto il resto è in realtà il risultato di guardare in alto in un punto di riferimento on-line o googling come fare un po ' tecnica o come abbiamo visto, guardando fonte di Facebook codice, guardando un sito web che ti piace al suo codice sorgente e capire come gli sviluppatori là in realtà di cui le cose. 

Così possiamo fare le immagini pure. E infatti, lo abbiamo fatto poco fa. Lasciami andare avanti e solo mostrarvi. Ecco alcuni esempi di codice. Se vi capitasse di voler vedere gatto scontroso. Così notare che posso avere un tag di immagine qui. E ho un commento sopra di esso. Ho un'alternativa il testo per l'accessibilità. Così qualcuno che sta usando uno schermo Lettore per ragioni di vista può effettivamente poi avere il loro screen reader dire gatto scontroso. Perché se non possono vedere l'immagine, essi può almeno avere il loro computer dire loro verbalmente quello che è. E la fonte di questo file è cat.jpeg. Quindi, in realtà, se volevo davvero ottenere intelligente, quello che avrei potuto done-- Prometto di non andare a Rick Astley, così Io vado a Google per un gatto, invece. E se vado a Google Immagini qui, e noi assumeremo che questa è una foto del mio gatto. 

Supponiamo che ho il controllo cliccato o destra cliccato su questo, per caso raccapricciante. E cat.jpeg vado per risparmiare sul mio desktop. Vorrei ora tornare a Cloud 9. Si noti che qui, non posso andare per caricare i file locali. E se prendo questo File, cat.jpeg, avviso che io possa trascinarlo e rilasciarlo in Cloud 9 e sta andando a urlare contro di me qui. 

Perché abbiamo già dato un file cat.jpeg, ma è super facile da afferrare una foto che hai tratto da Facebook o Flickr o simili ed effettivamente trascinarlo in Cloud 9 e poi renderlo parte del proprio personale sito web o un problema set sette o otto come vedremo presto. E poi, quando si infine visitare quel gatto, supponendo ho scaricato quello stesso gatto, avviso che-- che era adorabile. 

Cosa vorresti vedere è qualcosa di simile a questa faccia qui. Quindi i file che si riferimento all'interno di una pagina web può essere sia locale nel proprio conto o remoto su qualche altro server come nel caso del Rick Foto Astley un po 'fa. Allora, dove else-- cosa altro che possiamo fare qui? Quindi, diamo uno sguardo al seguente. Sai cosa tipo di fresco? 

Finora abbiamo avuto fare le pagine web molto statici. Voglio rendere le cose nel modo seguente. Voglio fare il mio proprio motore di ricerca. Quindi, per fare un motore di ricerca, cerchiamo di andare avanti e iniziare a fare questo. Ho intenzione di andare avanti e creare un nuovo file denominato search.html. E abbiamo prefabed versioni on-line. Ops. Non incollare nella finestra del terminale. Versioni online prefabbricate. E ho intenzione di iniziare nel modo seguente. Quindi, ecco l'inizio di un file chiamato search.html. Io vado a salvarlo in directory di origine di oggi. Io vado a chiamare questa ricerca. A dire il vero, ce la faremo meglio. CS50 ricerca e in realtà marca esso. E ora, ho intenzione di dire qualcosa come H1 CS50 Ricerca. E poi qui, H2 in arrivo. E proprio per ricapitolare, H1 e H2 significa quello, rispettivamente? 

Sì, così grande e audace, e non è così grande, ma ancora in grassetto. Quindi, se ho salvare questo e vado qui, vediamo il file search.html. Va bene, e questo è destra- sopra [incomprensibile]. Stand-by. David è confuso. Oh, è proprio lì. David è un idiota. OK. Quindi non vi è. Così CS50 di ricerca in arrivo. Così ora, cerchiamo di sintetizzare quello che abbiamo fatto la scorsa settimana. 

Dove abbiamo parlato del meccanica di basso livello di HTTP. E queste nuove idee di HTML, che è solo questo linguaggio di markup in cui si raccontare un browser esattamente che cosa fare e mettere in atto il nostro motore di ricerca. Così, invece di dicendo presto, io sono intenzione di introdurre qualcosa chiamato un tag form. E in questa forma, ho intenzione di avere qualcosa come un campo di input. 

E il nome di questo ingresso campo, ho intenzione di chiamarlo Q. E il tipo di questo campo di input Io vado a dire è solo "testo". E un campo di testo, come faremo vedi, è solo una casella di testo. E così non senso qui avere nulla all'interno di esso a questo punto. E così sto andando semplicemente per chiudere il tag con quel slash nel tag stesso. E poi ho intenzione di avere un altro ingresso. Tipo di ingresso è uguale a presentare. E poi ho intenzione di chiudere anche questo. 

E ora ho intenzione di tornare qui. E già si vede, seppur abbastanza brutto, ho ha ottenuto l'inizio di mia ricerca propria pagina qui. In realtà, vorrei provare a pulire questo un po '. Risulta che il ingresso qui, posso avere un altro attributo chiamato segnaposto. E potrei vedere qualcosa come parole chiave, o più specificamente, per interrogare q. 

E notare, ora, ho questo tipo di testo grigio che scompare come Non appena si digita, ma è probabilmente qualcosa che hai visto in altre pagine web. Non mi piace molto il pulsante Invia. Quindi sono davvero intenzione di dare il Pulsante Invia un valore di ricerca. E ora, se ricarico, notare che il mio tasto viene denominato ricerca. Sai, non lo faccio davvero come il logo qui. Così generatore Google Font. 

Voglio rendere questo ulteriormente. Ricerca in modo CS50. Mi permetta di creare il mio marchio. Che sembra piacevole. Così ora mi permetta di salvare questo as-- si accende. Dove sta andando? Là. OK. Perso. Salva come. Browser stupido. Stand by, stiamo andando a risolvere questo problema una volta per tutte. Ci siamo. Tutto ok. Scusate. Giornataccia. Ora, questo è funky. Uscire a schermo intero. Tutto ok. 

Ora, come un normale persona, salva immagine con nome. Logo.gif. Ora ho intenzione di andare in CS50IDE e Ho intenzione di prendere semplicemente il logo, Ho intenzione di trascinarlo la mia fonte di sette directory, file esiste già, io sono d'accordo con questo. Quindi ho intenzione di ignorare la perché ho già avuto. E ora come faccio a sbarazzarsi di questo? 

Andiamo avanti qui e fare fonte immagine è uguale logo.gif. Chiudi. Salva. E ora se torno alla mia ricerca pagina, ora che sta cercando piuttosto bene. Va bene, quindi non ha molto fatto niente di utile. In realtà, mi permetta di provare la ricerca per un gatto e vedere cosa succede. Gatti. Accidenti. Esso non solo funziona, a quanto pare. Allora qual è il pezzo chiave quello che manca qui? 

A destra, anche se non si conosce nessun codice HTML, Ho iniziato segnando il modulo telefono e ho detto che come ottenere ingressi, darmi una casella di testo e un pulsante di invio, quale pezzo è apparentemente mancante? Supponiamo di voler effettivamente ottenere questa cosa funziona correttamente. Che cosa dobbiamo fare? Abbiamo la necessità di attuare il back-end database o il motore di ricerca stesso, e che sta andando a prendere un bel po 'di tempo, francamente. 

Quindi ricorda quello che abbiamo fatto l'ultima volta. Quindi, se si cerca qualcosa su Google e avete in anticipo disattivato, richiamo, ricerca istantanea. Quindi vorrei passare che fuori in modo che questo effettivamente si comporta come un browser vecchia scuola, se io ora cerco per qualcosa come i gatti, ricordare ciò che l'URL assomiglia. E 'piuttosto criptico. Ma incorporato in là, richiamo, è la ricerca barra. Punto interrogativo q uguale gatti. 

E questo sembrerebbe darmi un sacco di risultati di ricerca. Allora sai che cosa ho intenzione di fare? Ho intenzione di prendere in prestito Google solo per un minuto. Ho intenzione di andare oltre qui e ho intenzione di dire che questo forma azione o destinazione, per così dire, dovrebbe essere letteralmente Google. E il metodo che ho voluto per uso sta per essere ottenere. 

Allora, qual è l'azione? L'azione è stranamente chiamato, ma questo significa solo che sta andando a gestire l'azione di questa forma? Quando clicco Ricerca, dove se il risultato andare? E se ora tornare alla mia forma qui e ricaricare la mia pagina web e ora la ricerca di qualcosa come il cane, notate ora Ho ri implementato Google. Destra? 

Se voglio cercare qualcosa altrimenti, funziona non solo per i cani, funziona anche per i gatti. Funziona anche per CS50. E OK, questo è solo sotto whelming, non è vero? Va bene, ma in realtà funziona. Quindi, cosa sta realmente succedendo? Così ho insegnato il mio browser, utilizzando HTML, per prendere l'input dall'utente e in realtà inviare tale ingresso a un server remoto utilizzando il protocollo HTTP. 

E perché il mio browser capisce HTTP, in realtà costruire l'URL in modo che ciò che Finisco sopra nel mio browser, vedere cosa succede quando ho cercato per il cane. Se clicco Cerca, notare che l'URL cambia come ho inteso a google.com/search~~V domanda equivale cane. E questo perché la forma lo sa, perché il metodo è ottenere, per aggiungere semplicemente a tale URL lì. 

Ora, queste pagine web sono ancora brutto. Quindi cerchiamo di introdurre un altro pezzo di sintassi se possiamo oggi. E questa è una cosa nota come fogli di stile CSS. Così mi permetta di prendere uno sguardo questo esempio qui e vedere se siamo in grado di dedurre cosa sta succedendo. Questo è CSS0.html. Ed è qui che le cose ottenere un po 'brutto. Perché purtroppo, nel mondo del web, HTML da sola non può fare tutto. E così, se si vuole stilizzare la tua pagina web, hai veramente bisogno di concentrarsi sul estetica in un modo diverso. Così qui, ho il corpo del mio web pagina all'interno del quale è un grande div. E un div significa solo divisione. Quindi è come un paragrafo, ma non ha la stessa semantica di un paragrafo di testo. 

Ciò significa appena a Browser, ecco che arriva una grande regione rettangolare della mia web pagina, voglio gestirlo appositamente. Ora, la linea 21 è dove inizia quella div. E basta prendere una supposizione. Qual è l'effetto della linea 21 sulla resto del contenuto della pagina? Centrandolo. Questo è tutto. Quindi non abbiamo visto un modo di effettivamente centrare il testo. 

In realtà, il mio motore di ricerca, a differenza del reale di Google, era tutto giustificato verso sinistra. E così ora in linea 21, che sto dicendo, hey browser crea una divisione della pagina. Dammi solo un grande rettangolo invisibile. Ecco come voglio pensare alla pagina web. E poi stilizzare come segue. All'interno di quelle citazioni, Ora, è una seconda lingua che abbiamo introdotto oggi cosiddetti fogli di stile CSS. Per fortuna, non è troppo un linguaggio di programmazione, quindi è molto limitato nella sua sintassi, ma anche molto limitata nella sua funzionalità considerando HTML è tutto marcare i dati di una pagina web e la struttura di una pagina web. CSS è generalmente di circa il ultimo miglio, l'estetica, ottenere la dimensione e il colore e la posizionamento è giusto in una pagina web. E in effetti, è formato con coppie di valori chiave. 

Una proprietà come questa, il testo allineare, seguito da due punti, seguito dal valore di tale proprietà, che in questo caso è il centro. E ora si nota possono nidificare queste cose. Se volevo tutto in quella Ho evidenziato di essere centrato, è per questo che ho la linea 21 e la corrispondente linea di 31. Ma supponiamo ora vuole dire John Harvard, benvenuto a casa mia pagina. 

Simbolo di copyright John Harvard. E supponiamo che io voglio il primo dei quelle linee di essere abbastanza grande. 36 pixel. In modo che sia di dimensioni adeguate. E volevo il suo peso di essere audaci. Ma poi sotto, Voglio testo più piccolo. E sotto questo, voglio ancora più piccolo del testo. Scusate. Oggi si sente come un giorno di riposo. 

Così ora, che cosa sto facendo per esprimere questo? Qui sulla linea 22 è un incorporato div div nidificato o, se si vuole. Essa ha anche un proprio tag style. A specificare una dimensione del carattere di 36. A specificare una dimensione del carattere del grassetto. Quaggiù, a specificare solo 24 pixel. E, infine, in linea 28, a specificare 12. Così come un controllo di integrità rapido e come una lettura umana questo, quali parole sullo schermo sono in realtà sta per essere in grassetto? Quali le linee sono in realtà in grassetto? 

Proprio John Harvard. Destra? Perché proprio come la linea 22 dice hey Browser, ecco una divisione della pagina. Rendono la dimensione del carattere 36 punti. Rendere il peso grassetto. Non appena si raggiunge la tag di chiusura corrispondente o tag di chiusura sulla linea 24, che significa, ehi del browser, Smettere di fare qualunque cosa si sta facendo. E notate per essere chiari, anche se linea 22 ha tutti questi attributi come stile, quando si chiudere il tag in linea 24, si menziona solo il nome del tag. 

Non ripetere lo stile parola o tutto ciò che è all'interno di quelle citazioni. E così, se guardo questo ora nel mio browser, diamo un guardare il risultato finale. Lasciami andare avanti a questo file, che è CSS 0. Ed è ancora piuttosto semplice, ma sempre piuttosto interessante. Ma si scopre là del altre cose che posso fare qui, e con il rischio di fare questo completamente orribile, noterà qui che nel mio corpo della pagina web, Posso fare qualcosa di divertente come bg o colore di sfondo. 

E veloce, qual è il tuo colore preferito? Verde Ho sentito. Tutto ok. Così ora, se ho colpito ricarica ora, abbiamo una pagina web verde. Va bene, in modo che non è male. E ora, se voglio fare davvero freddo, posso fare il colore del mio testo anche rosso. Così vediamo che cosa questo assomiglia. Ora che sta cercando piuttosto bene. E qui, se davvero voglia di pasticciare con qualcuno o se si vuole essere una di quelle persone che cerca di ingannare l'utente a visitare un sito web pagina perché hanno ingannato Google a pensare c'è un sacco di parole chiave like-- Vediamo, ricaricare. Dove è andato? E lì ci. Tutto ok. Allora io dico questo come un a parte, ce la faremo parlare di queste cose in poche settimane quando si parla di la sicurezza, se effettivamente grappoli interi di incorporare le parole chiave in una pagina web, anche se non sono visibili ad una umano, uno come Google, naturalmente, può ancora effettivamente trovare questo. Va bene, allora che è abbastanza orribile abbastanza rapidamente. 

E infatti, non è tutto che molto a differenza di mia web pagina come studente universitario, che Ho iniziato googling intorno per trovare le versioni precedenti di miei vecchi siti web. E 'stato piuttosto male. In realtà, ho trovato uno appena prima classe. Ma c'è di peggio là fuori. Questo a quanto pare è stato il mio home page nel 1996. A quanto pare ho pensato che fosse opportuno chiedere alle persone il loro nome prima che potessero effettivamente vedere la mia pagina web. 

E poi li ho mostrato qualcosa di stupido, probabilmente. Io scavare di più per la prossima volta. Ma per ora, diamo prendere in considerazione un po 'di progettazione. Abbiamo parlato di stile. E questa pagina finora e quasi tutto ciò che ho scritto è abbastanza pulito stilisticamente. Ma per quanto riguarda il design? Beh, ci sono un sacco di ridondanza in quello che ho fatto qui. 

Ho menzionato la parola colore in un paio di posti. Ho menzionato la dimensione del carattere in un paio di luoghi e audace in un paio di posti. E in fondo, io sono co mescolando due lingue. Ho HTML con i miei tag e la mia attributi e poi tutto ad un tratto, tra virgolette, ho la seconda lingua di oggi chiamato CSS, che ancora una volta, è solo questi coppie di valori chiave o queste proprietà separati da due punti. 

Risulta molto come in C dove siamo può iniziare a scomporre del codice in file di intestazione, in modo che possiamo fare lo stesso in HTML. E un passo verso che è la seguente. Si noti che questa versione, è CSS1.html Strutturalmente la stessa pagina web esatto. Così ho un sacco di div, ma questa volta, ho deciso di eliminare l'involucro div come vedrete. 

E ho dato quei tre div alto, medio e basso, ID univoci. Questo è bello, perché, dando quelle divisioni della pagina identificatori univoci, Posso riferire altrove. Dove? Beh, mi permetta di scorrere verso l'alto. E fin qui, ogni volta che abbiamo esaminato alla testa di una pagina web, cosa l'unica modifica che abbiamo avuto in il capo di una pagina web? Un po 'più forte. Solo il titolo fino ad ora. Ma si scopre là del un paio di altre cose si può mettere in là, uno dei che si chiama un tag di stile. Quindi un momento fa, abbiamo guardato in un attributo di stile. Si scopre che c'è un tag di stile. Appartiene interno la testa di una pagina web. E ora accorgo quello che sto facendo. Ho all'interno di questa tag di stile la seguente. Sto letteralmente menzionare sulla linea 20 della il nome di un tag che voglio stilizzare. 

Poi ho aperto parentesi graffa e chiuso parentesi graffa. Quindi, simile nello spirito a C, ma di nuovo, questa non è una funzione, questo è solo un dettaglio sintattico qui. E poi, naturalmente, sto dicendo il browser, il browser hey, rendere l'intero corpo della pagina un allineamento del testo del centro. E poi questo dice quanto segue. Ehi del browser, se vedete un HTML elemento o tag nella pagina che ha un identificatore unico di top, in modo che il simbolo cancelletto qui significa solo un'idea unica di top, andare avanti e fare la sua dimensione del carattere 36 e il suo peso grassetto. 

Hey browser un elemento la cui ID è centrale, lo rendono 24 pixel. E hey del browser, se vedete un idea di fondo, rendono 12 pixel. L'effetto alla fine è esattamente il sam. Se vado in CSS 1, il pagina sembra la stessa. Ma siamo un passo verso un design leggermente migliore. Permettetemi ora di tornare qui per CSS2 e vedere cos'altro ho fatto. 

Ora la pagina è molto, molto pulito. In realtà, io posso andare bene tutti il contenuto di una pagina qui. Ma quello che ho io nuovo tag introdotto, ovviamente? Link. E non è il nome migliore per un tag, perché non è un collegamento in senso che lo sappiamo, ma questo significa un collegamento a un altro file. Questo è un po 'come acuto comprendono in C. 

Questo è il modo in HTML dire ehi del browser, andare a prendere il contenuto del il file denominato css2.css. Il rapporto, per me, è che si tratta di un foglio di stile. E in effetti, questo è ciò che quella del S di a fogli di stile CSS mezzi. Si tratta di un foglio di stile. E 'solo il file di testo contenente un sacco di proprietà. Si tratta di un insieme di stili che si desidera applicare a una pagina. 

E così questo è apparentemente riferendosi ad un secondo file. E se apro che, CSS2.css, Noto che tutto quello che ho fatto è copiare e incollare tutto questo in questo file. E ora, anche se non hai mai coded questa roba prima, basta considerare con la cappello ingegneria proverbiale su, perché si tratta di una migliore progettazione probabilmente? Factoring fuori quelle proprietà CSS, mettendoli nelle loro file. Anche se abbiamo risolto questo problema come cinque minuti fa nella prima versione. 

Noi non abbiamo migliorato la Pagina stilisticamente, questo è solo meglio disegno in un certo senso. Perché pensi? Già. Più flessibile come? Già. Quindi, se volete andare indietro e cambiare le cose, ora, si ha un posto in cui è possibile cambiare le cose. Ed in effetti, qualcosa come problema impostare sette, dove ci attuare una Stock Website trading, che sta per avere un tutta una serie di pagine. E sarebbe veramente fastidioso se si decide, hm, Non mi piace molto 24 pixel, voglio che sia 28 pixel o leggermente più grande. E poi hanno a che fare un globale trovare e sostituire o aprire tutti i file del tuo sito web semplicemente per cambiare realmente un valore. Con factoring fuori questi stili in un luogo centrale, ora è possibile aprire un file di testo in CS50IDE in qualsiasi programma, modificarlo, salvarlo, e fatto. Hai propagata quelli cambiamenti ovunque. E questo sarebbe lo stesso in un file di punti h pure. Quindi tutte le domande così lontano su questa sintassi? Va bene, quindi abbiamo fatto tutto sembra salvo applicare concretamente i collegamenti ipertestuali. E così andiamo avanti e fare questo. Lasciami andare avanti e creare un nuovo file qui. Io vado a chiamare link.html, inserire nel codice di oggi. 

E ho intenzione di fare aperto Staffa tipo doc html. Per inciso, questa cosa al top, questo dichiarazione di tipo doc, è l'unico che è strano con il punto esclamativo. Devi solo fare lì e significa che stiamo utilizzando la versione HTML 5. Versioni precedenti di lingua era molto più a lungo stringhe che avete avuto bisogno di mettere lì. Quindi, ecco un esempio chiamato collegamento. 

Ho bisogno di un corpo della pagina web qui. E qui dentro, un uguale href diciamo HTTP://www.disney.com e il mio sito web preferito, diremo. Va bene, allora molto , pagina facile da usare innocuo. Se ora vado nel mio elenco lista qui e di aprire link.html, abbiamo hyper text. 

E in effetti, questo è dove H in HTTP proviene. Protocollo di trasferimento Hypertext è sul trasferimento di testo che ha collegamenti ipertestuali ad altre risorse. E infatti, ecco il familiare, se retrò, in blu nel link che, se cliccato, in realtà mi portano a Disney.com. Ora, oh, che è di prossima uscita. Va bene, così ora, quali sono alcune delle implicazioni di questo? 

E, francamente, il mondo comincia per ottenere un po 'più familiare e anche un po 'più paura ma anche un po 'più auto difendibile volta che si avvia per capire queste cose. Perché probabilità sono, alcuni di voi, se si va attraverso la cartella spam di Gmail o anche la posta in arrivo, probabilmente avete ottenuto un qualche tipo di e-mail che ti chiede di cambiare la vostra Password forse o forse verificare le credenziali PayPal o roba del genere. 

E infatti, si potrebbe avere ricevuto qualcosa che dice come clicca qui per reimpostare la password PayPal. E ora, si noti, se questo non è Disney.com ma come badplace.com e ricaricare, notare che il testo qui potesse dire qualsiasi cosa. E in effetti, questo è solo parole. Perché non posso effettivamente essere super-cattivo e dire http://www.paypal.com. 

Clicca qui ripristinare il vostro Paypal password e ora ricaricare. Questo sembra piuttosto legittimo, giusto? Voglio dire, non mi fate clic su una e-mail che dice proprio questo. Ma bando la dicotomia qui. Dice www.paypal.com, e in effetti, aspetta un minuto, sappiamo che si desidera la s per la sicurezza. Così ora, andare a www.paypal.com HTTPS, ma se non hai mai fatto prima, non prendere l'abitudine di in bilico su piccoli link qui. Ed è difficile vedere sullo schermo lì, e non è tutto ciò che facile qui. Ma modo qui in il piccolo piccolo angolo fa il browser realtà che stiamo andando dire a badplace.com invece di Paypal.com. Ora, dove stiamo andando con questo? Tutti gli esempi che abbiamo fatto oggi, abbiamo codificato duro e digitato manualmente. Il web è incredibilmente interessante quando si dura codificare le tue pagine web in modo che i contenuti è statica e non cambia mai. Naturalmente, tutti i nostri siti web preferiti oggi, che si tratti di Gmail o Twitter o Facebook o qualsiasi numero di altri sono dinamici. Stanno cambiando in risposta all'input dell'utente proprio come i risultati di ricerca di Google. 

E così il Mercoledì, ciò che facciamo è lasciamo HTML e CSS introduzione dietro di noi e ci prendiamo per scontato che noi ora conoscerlo e introduciamo un nuovo linguaggio di programmazione chiamato PHP, che piace C, sta per dare noi il potere di creare realmente i programmi che si generare output. In questo caso, useremo PHP per generare dinamicamente web pagine utilizzando questo nuovo linguaggio. Quindi più che il Mercoledì. Ci vediamo. 

[RIPRODUZIONE DI BRANI MUSICALI]