[RIPRODUZIONE DI BRANI MUSICALI] ALLISON Buchholtz-AU: Va bene, tutti. Bentornato alla sezione. Quindi il nostro ordine del giorno per oggi sta su molto più web dev roba. Non so quanti di avete visto i vostri p-set quando è stato rilasciato questa mattina. Vorrei come il numero di persone hanno letto le specifiche, ma visto che hai avuto tutto di, come, sette ore per guardare a questo ed è un Lunedi e probabilmente hai avuto classe, Ho intenzione di assumere che la maggior parte di voi non hanno. Se avete, complimenti extra. Tu sei fondamentalmente aiutando implementare un semplice web Server in C, che è un nuovo pset, così voi ragazzi arrivare a essere le cavie. Sta andando essere un divertimento, una settimana selvaggia, ma penso che sarà un sacco di divertimento e sarà davvero un buona esperienza in realtà. Quindi, per preparare per che, in sezione oggi, stiamo per andare chmod, TCP / IP, e poi un po 'di HTML e CSS. Alla fine, ci troveremo a codice una semplice pagina web insieme per aiutare voi ragazzi tipo di ottenere più familiarità con questo. E poi se non hai raccolto i tuoi quiz, che sono di fronte, ma sono abbastanza sicuro che tutti qui ha loro quiz. E anche su questa nota, soluzioni non sono ancora, ma appena ci finish-- piace, il ultime persone che prendono la loro quizzes-- saranno all'altezza. Se avete domande Intanto, sentitevi liberi di scrivermi personalmente. Risponderò con il vostro individuale domande, come faccio sempre. Così su quella nota, chmod. Quindi, in pratica tutto quello che bisogno di sapere su chmod è che è usato per cambiare i permessi dei file, giusto? Quindi è solo alcuni sistemi richiedono un cambiare i permessi, come si dice qui. E se vi capitasse di voler vedere Quali autorizzazioni ha un file, invece di fare ls, si potrebbe fare ls -l. L sta per molto tempo. Così potrai fare lunghi elenchi di tutto, e vi darà molto più dettagliata informazioni su ciascuno dei vostri file. E vedrai something-- sono andando a saltare per un secondo-- ma vedrete qualcosa di simile a che riga superiore ci per ogni file. E andremo attraverso che cosa significa. Quindi, fondamentalmente, di cambiare i permessi dei file, si vuole solo utilizzare chmod. Si può pensare ad esso come qualsiasi altro UNIX chiamata come ls o cd o roba del genere. E 'solo un po' come un'altra chiamata. Così facciamo chmod e poi ci avere tre cifre in genere. Ci sono un paio di modi per farlo essa, uno dei quali andremo oltre. Ma in genere, avrete tre cifre che vanno da 0 a 7 ogni volta. Quindi una cosa è che ci sono tre autorizzazioni diverse che siamo in grado di dare ad ogni file. Ed è leggibile, che è rappresentato da r, che senso in un po '; w, che è scrivibile; ed eseguibile, che è x. So che l'e uno, eseguibile, forse non ha più senso, ma noi rappresentare con x. E allora ciò che accade è ciascuno di questi hanno anche la rappresentazione dei numeri. Così abbiamo 1, 2, e 4. E in fondo ciò che accade è ciascuno di questi tre numeri questo corrisponde ad un diverso insieme di utenti che tali autorizzazioni riguardano. Quindi si può pensare che la prima numero corrisponde al vero utente o il proprietario del file, la seconda numero corrisponderà al gruppo, e l'ultima si riferisce al mondo, OK? Quindi, quello che succede è ricordare quelli r numbers-- è 4, w è 2, x è 1, giusto? Questa poi, se si somma questi in su, che ti dà quel primo numero che potremmo ingresso nel nostro chmod. Quindi, in questo caso, ciò sarebbe questo numero è? Sarebbe 4 più 2 più 1, che è un 7, giusto? E in questo caso, questi non hanno nulla, quindi questo qui sarebbe tradurre in chmod 700, OK? E ciò che fa è consente a tutte le di queste autorizzazioni per l'utente. Quindi questo significa che il nostro utente può fare ciò che vogliono. Si può leggere questo file. Possono eseguire questo file. Possono scrivere in questo file. Ma di gruppo e il mondo, non autorizzazioni di sorta, OK? Quindi un altro modo di scrivere che, possiamo fare chmod di tre cifre, ognuna delle quali corrisponde a qualsiasi somma o che gruppo specifico è, sottoinsieme specifico. Oppure possiamo fare davvero un'altra cosa. Resisti. Siamo in grado di fare qualcosa con questi qui. Quanti di voi hanno visto un esempio dove è stato come chmod un plus x? Hai visto che in conferenza, penso? Così una sta per tutti. Significa dare a tutti gli utenti, che ho dimenticato di mettere qui. Ma un plus x, se notare qui, se lo facciamo a chmod-- quale gruppo siamo parlare di più i permessi vogliamo dare loro. Quindi questo può essere un più o un meno. Inoltre aggiunge il permesso. Minus toglie il permesso. Abbastanza intuitivo, credo. Così un plus x significa chmod. Quindi, modificare le autorizzazioni di tutte le persone Se questo è un add permessi A--. E X-- che cosa significa il permesso stiamo concediamo tutti. Leggere, scrivere o eseguire? PUBBLICO: Esegui. ALLISON Buchholtz-AU: Esegui. Così stiamo dando tutti gli utenti il permesso di eseguire il file, OK? E se volessimo fare che con la forma numerica? Quindi ricorda con numerico, vogliamo tre numeri. PUBBLICO: 4. ALLISON Buchholtz-AU: Che cosa è stato? PUBBLICO: 4. ALLISON Buchholtz-AU: Non è un 4. PUBBLICO: 0, 0, 4. ALLISON Buchholtz-AU: Beh, noi vogliamo per dare a tutti gli utenti, giusto? Quindi stiamo andando ad avere un numero in ogni slot. Che sta per essere il stesso numero in ogni slot perché vogliamo solo dare permessi eseguibili tutti. Così eseguibile è 1, ma sulla strada giusta. Quindi, se abbiamo fatto chmod 111 che avrebbe essere l'equivalente di chmod un plus x. Questo fa senso per tutti? Stiamo per passare attraverso un paio di esempi. Così la grande asporto ecco un non è qui, ma significa solo dare a tutti gli utenti. u è se si desidera solo di dare o togliere una esplicita autorizzazione della l'utente o il proprietario. g è per il gruppo, in modo che cifre di mezzo. E poi gli altri si può pensare come il mondo, che l'ultima cifra. Quindi, con questo, andremo in un esempio, perché mi sento come esempi sempre fare queste cose più facili da capire. Così rwx-- siamo andati attraverso questo-- potrebbe anche essere rappresentare come 700. Questo è l'esempio abbiamo guardato da più del quadro. Così chmod 444 su qualche file darebbe quali autorizzazioni? Sei stato davvero vicino. PUBBLICO: leggibile a tutti. ALLISON Buchholtz-AU: leggibile. Così leggibile a tutti, giusto? E poi che cosa è un altro modo per farlo? Se vogliamo fare sia con chmod di w di R o, più e svantaggi, cosa sarebbe quella chiamata simile? Sarebbe chmod cosa? PUBBLICO: un plus r. ALLISON Buchholtz-AU: un plus r sul 5. OK, quindi questo è lo stesso di questo, solo due diverse traduzioni della stessa cosa. E con questo, abbiamo questi. Quindi voglio che voi ragazzi a provare e scrivere questo tipo di loro in modo opposto. Quindi, con chmod 555, che cosa sarebbe come? Sarebbe un segno più o u più o roba del genere? Per u più x, dammi i tre numeri. E poi dimmi di che cosa permessi stiamo in realtà la concessione e per chi? Quindi io ti darò due ragazzi minuti per lavorare su questo. Sentitevi liberi di parlare tra di loro. Per quelli di voi che sono venuti in un po ' in ritardo, c'è caramelle e camicie. Abbiamo tre camicie a sinistra, e abbiamo Kit Kats e Starbursts. Quindi sentitevi liberi di venire afferrare un po 'in questo piccolo intermezzo. Inoltre, l'ultima è difficile. Si tratta di due chmods per l'ultimo. A dire il vero, mi permetta di chiudere quella porta mentre voi ragazzi stanno lavorando su questo. Candy è sempre necessario su un Lunedi pomeriggio. OK, quindi chmod 555. Che cosa è un altro modo potremmo scrivere che? Tutte le idee? Sì. PUBBLICO: un plus rx. ALLISON Buchholtz-AU: R Plus rx. Vuoi spiegare il motivo per cui sarebbe stato rx? PUBBLICO: Perché hai 5, in modo che è 4 più 1, Ecco, questo è leggere più eseguibile, ed è per tutti. ALLISON Buchholtz-AU: Giusto. Quindi, solo per ribadire, 5 qui sappiamo come somma di 4 e 1, perché ogni numero nel nostro trio è il somma delle autorizzazioni per tale sottoinsieme, giusto? Sia l'uso, la gruppo, o il mondo. Quindi, in questo caso, sappiamo che 5 deve essere formato da 4 e 1. E 4 e 1 corrispondono a leggibile ed eseguibile. Stiamo dando a tutti, in modo che possiamo fare chmod un plus rx. E ovviamente, siamo andati attraverso le domande lì, così ora questo file è eseguibile e leggibile a tutti. E per quanto riguarda il secondo? Quale potrebbe essere il numero per quello essere? Tutte le idee? Vai avanti. PUBBLICO: 100 [incomprensibile]. ALLISON Buchholtz-AU: 100. Esattamente. Quindi vuoi spiegare perché 100? PUBBLICO: Perché è per il utente, quindi è in prima posizione. E poi x eseguibile è 1. ALLISON Buchholtz-AU: Esattamente. Così ci concediamo eseguibile autorizzazioni per solo l'utente. Quindi in questo caso, sarebbe 100. E ho tutte le risposte sulla diapositiva successiva nel caso stai scrivendo un sacco di cose. OK, quindi questo prossimo è in realtà fatto con due chmods, si poteva fare. Così qualcuno ha qualsiasi idea di come si potrebbe ottenere chmod 640 riscritto in altro modo? È possibile modificare l'utente e poi è possibile modificare il gruppo è il mio suggerimento. Quindi, se siamo stati solo cambiando il utente, che è il primo qui quello che potrebbe essere la nostra chiamata? Quindi l'utente è u, giusto? Così chmod u più che cosa? Mmhmm? PUBBLICO: rw. ALLISON Buchholtz-AU: rw. Destra, per leggere e scrivere, perché di lettura è 4, w è 2, quelli che somma insieme come 6. Così otteniamo chmod u più rw, e otteniamo il nostro primo 6 lì. Ecco che allora per ottenere il 4, ora vogliamo a cambiare le nostre impostazioni del gruppo. Quindi stiamo andando a fare chmod g più che cosa? Che cosa è un 4? PUBBLICO: r. ALLISON Buchholtz-AU: r. Proprio. Così stiamo dando il proprietario leggere e scrivere le autorizzazioni e stiamo dando lettura di gruppo permessi, che abbiamo tutti qui. Mmhmm? PUBBLICO: Se è possibile scrivere qualcosa, implica puoi eseguirlo? ALLISON Buchholtz-AU: Si può scrivere a something-- Non credo che implica puoi eseguirlo. Freddo. Ecco, questo è tutto quello che siamo andati attraverso. Così in questo successivo, è casi solo tipo di comuni che si desidera mantenere in mente per il vostro problema impostato. Questi sono in genere i permessi che ci piace di utilizzare. Così per 711, che dà noi, naturalmente, l'uso tutte le autorizzazioni, che tende ad avere un senso. E poi è eseguibile dal gruppo nel mondo, che ha un senso se si dispone di una directory, si vogliono essere in grado di attraversare in esso. La gente ha bisogno di accesso. Per qualsiasi tipo di file non PHP, si sta andando di utilizzare 644, che fare che cosa? Che cosa implica, o che cosa autorizzazioni sono che danno? Quindi, il proprietario può cosa? PUBBLICO: Leggere e scrivere. ALLISON Buchholtz-AU: Leggere e scrivere. E poi di gruppo e gli altri può solo leggere, giusto? E poi chmod 600 per qualsiasi File PHP che si utilizza, il tuo padrone, ancora una volta, può leggere e scrivere ad esso ma tutti gli altri è solo un po 'bloccato. Quindi questo sarà effettivamente essere più utile quando si arriva al vostro problema impostare la prossima settimana in cui si sta effettivamente costruire un sito web. Quindi, se mai esegue in problemi strani dove non sta caricando correttamente, forse si bisogno di aggiungere un file eseguibile il permesso, o forse hai bisogno di una lettura o il permesso di scrittura. Piccole cose che tendono a inciampare persone up, ma questo è un po 'come il go-to quando si avvia pset della prossima settimana. E darei più suggerimenti su pset di questa settimana, ma devo ancora vedere le cose dal è stato rilasciato questa mattina. Ma tu mi email, io ho guardato a lui per il momento rispondo domani. Così ora, è tutto buono con chmod? Tutte le domande persistenti? Abbastanza semplice. Solo tipo di tenere traccia di ciò che lettura, scrittura ed esecuzione numeri sono è probabilmente la parte più difficile. Quindi, con TCP IP, tutti questi protocolli /, un po 'come con le strutture di dati la scorsa settimana, è molto più importante per tipo di ottenere intuizione livello più alto di loro. Questo non è CS143 dove stiamo andando per chiedere di implementare una rete, così andrà tutto bene se non si capisce la parte fondamentale di tutti i protocolli. Quello che è importante capire è un po 'come ciò che rappresentano e perché sono importanti. Così TCP / IP, naturalmente, è il Transmission Control Protocol o Internet Protocol, che è fondamentalmente solo una serie di leggi in fondo o norme che dicono i dati come dovrebbe essere gestito, come dovrebbe essere packetized, trasmessi e ricevuti. Quindi, fondamentalmente, così come dice qui, aumenta le possibilità che i dati finisce dove si desidera raggiungere. Sono sicuro che se voi ragazzi è andato a conferenza o guardato on-line, egli has-- Non so se lo ha fatto quest'anno, ma so che l'anno scorso, ha avuto un demo dove aveva una foto di Rob e ha spaccato in su in quattro e metterlo in buste e ha cercato di farlo attraverso Sanders. E si può tipo di pensare in questo modo. E 'solo un insieme di regole che dire i dati come arrivare da qualche parte e ti consente di sapere se ti manca di dati, allo stesso modo che se si è prendendo più pagine di note e li etichetta con la pagina 104, pagina 204, e si torna a studiare tardi e ti manca something-- Non è possibile trovare la pagina 304-- sai qualcosa che non va, in modo da in grado di guardare attraverso le note di nuovo o chiedere a qualcuno di inviare di nuovo voi la conferenza rileva da quel giorno. Allo stesso modo con i dati su Internet. Se sto chiedendo qualcosa da alcuni server e ha bisogno di inviare in più pacchetti, probabilmente andando a numero in qualche modo, far me so quante avrei ritirato, e dimmi, oh, questo è uno dei 10 o questa è una delle 10.000. In questo modo quando vado a riassemblare tutti i pezzi insieme, So che se qualcosa manca e posso chiedere di nuovo. Questo fa senso? Solo un insieme di regole. Alla sua base, un insieme di regole, OK? Così abbiamo anche parlato un po 'di porte. Questo è in realtà solo uno standard che permette di sapere che tipo di dati viene trasmesso in questi pacchetti. Se andiamo con la nostra esempio busta, non lo facciamo so che si tratta di una foto di Rob in là se non lo scriviamo all'esterno della nostra busta. Quindi, le porte sono fondamentalmente la stessa cosa. E 'solo un modo per capire che cosa tipo di dati che vengono trasmessi. Così abbiamo tutti i la maggior parte dei più comuni qui. Così 21-- questi sono anche gentile di come le cose buone da sapere. È un po 'una domanda facile quiz. Siate come, che cosa porta 80 fare? Oppure, che cosa porta 443 fare? Quindi le cose buone da sapere. Così abbiamo qui, il 21 è il file protocollo di trasferimento, quindi basta le regole che governano il trasferimento di file. 25, qualcosa che tutti noi utilizzare troppo, è e-mail. 53 è il nome di dominio sistema, che è fondamentalmente solo tipo di una ricerca per la Indirizzo IP di un nome di dominio. Quindi sono abbastanza sicuro che fosse di cui lezione, se andare a qualcosa di simile google.com, ha un indirizzo IP che è associato con esso. In realtà non è google.com. E così 53 è la porta che prende in realtà cura di tipo di tradurlo in tale indirizzo IP per voi. E poi 80 e 443 sono molto comuni. Hai la tua pagina web o avete la vostra pagina Web protetta, che un sacco di pagine web sono trasferimento verso la società. Ecco, questo è un po 'alto livello Panoramica del protocollo di trasferimento. Non vedo molto più in profondità. È un po 'di cose interessanti se siete interessati. C'è un sacco di risorse. Wikipedia è in realtà una buona pagina. Così stavo guardando esso solo un po 'di tempo fa, quindi mi raccomando guardando se siete interessati o prendere 143 in due anni, perché Penso che sia ogni due anni. Così alla fine di questo, siamo parlando di pagine web e HTTP, che in realtà è il nostro prossimo argomento per oggi prima di andare in HTML e CSS e si può effettivamente codificare una pagina web. Sarà divertente. Avremo immagini di coniglietti e sarà fantastico. Così HTTP, come potete vedere qui, è una delle belle sigle per questa settimana, che è Hypertext Transfer Protocol. Quindi, di nuovo, è solo un'altra serie di regole che disciplina ipertesto trasferire, in questo caso. Quindi il modo migliore per imparare questo è solo un po ' per scomposizione in queste singole parole perché ci sono molte parole sullo schermo lì. Quindi stiamo andando a iniziare con l'ipertesto. Quindi "iper", si può pensare "Al di sopra", come super-tipo di cosa. Quindi è in realtà solo il testo portato in livello successivo, quindi è come il testo super, come il testo successivo. Quindi è fondamentalmente solo testo che ci dà più informazioni rispetto testo normale fa, OK? Quindi in questo caso qui, questa è ipertesto. Questo ci dice che abbiamo qualche link che stiamo andando a, che è cs50.net, che è ora cs50.harvard.edu. Queste diapositive sono un po 'vecchio. E sta andando a visualizzare come tale, come un collegamento ipertestuale, e poi un sito web davvero cool. Quindi è testo, che è un po ' po 'di cose davvero cool in là. In modo da poter collegare le cose e si può inserire immagini ed è possibile lo stile cose. E la cosa più familiare che si ragazzi hanno probabilmente con l'ipertesto è HyperText Markup Language, HTML, che naturalmente è tutto il web che vediamo intorno a noi, concesso con un po 'di stile CSS gettato in. Ma se qualcuno fosse davvero grande con MySpace, Sono sicuro che tutti voi usate HTML tutto il tempo per creare i profili perfetti, giusto? Mi sento come che potrebbe essere un riferimento obsoleto ora, ma qualunque cosa. Solo un little-- voi ragazzi non sono che molto più giovane. Alcuni di voi sono più grandi di me. MySpace è stato ancora una cosa quando ero giovane. Non sono così vecchio. In ogni modo, HTML solo una forma di ipertesto. Quindi ipertesto è solo il testo con le caratteristiche aggiunte. Così protocollo di trasferimento è probabilmente la cosa più incerto da spiegare. Ovviamente, transfer-- solo il trasferimento dei dati. Quindi, o tra il client, come tuo fratello web, e un server. Quindi, in pratica solo il modo in cui funziona Internet. Quindi la richiesta esatta di come funzionano, siamo in realtà andando a guardare un esempio di richiesta e risposta. Ma come si richiede informazioni da un server e come il server risponde per noi è ciò che questo protocollo di trasferimento governa. Quindi la richiesta e la risposta hanno di seguire queste specifiche serie di regole. Si standardizzato in modo che non importa in cui si sta utilizzando Internet, funziona sempre lo stesso, OK? Anche in questo caso, il protocollo, un insieme di regole. E 'solo un normale interazione nello stesso modo che il professor Malan parla se qualcuno si estende la loro mano, si sa che è cortesia comune raggiungere il vostro fuori e stringe loro la mano. Questo è un protocollo, giusto? Così ho dare qualche richiesta standardizzata, che è che voglio stringerti la mano, e si dà un po 'standardizzato risposta, che è o no grazie oppure si potrebbe cercare di scuotere la mia mano o forse si sta andando a provare e pugno mi urto. E noi non abbiamo un protocollo per questo. Si rompe. Ma se ognuno segue la stesso protocollo, ovviamente, va molto di più senza soluzione di continuità. La gente di conoscersi l'un l'altro. Tutti sono felici. Così nel mondo del web, ognuno segue la stessa rules-- leggermente migliore rispetto agli standard sociali. Ma con questo, vedremo ad un esempio di richiesta qui. Quindi c'è questa piccola chiave qui in basso che ti dice i diversi colori, quello che si suppone significhi. Così il bianco è proprio come il tuo metodo richiesta e il protocollo version-- così metodo di richiesta, versione. E allora questo è un certo nome del campo e il valore di quel campo, che ci sarà andare in molto, molto presto. Quindi questo è un esempio di richiesta. Questo è come me si estende, volendo presentarmi. Questo è ciò che il cliente o che cosa il vostro browser web sarebbe l'invio al server. Quindi questa è una richiesta GET, quindi è chiedere qualcosa dal server. Ed è, ovviamente, HTTP ed è la versione 1.1. Così il resto di questo qui è ciò che noi chiamiamo l'intestazione e le informazioni supplementari che ci dà una migliore idea di quello che stiamo realmente chiedendo, o le informazioni che vogliamo dare il server che potrebbe essere pertinente. Così User-Agent dà ancora un po ' Descrizione on-- per esempio, qui, ricciolo / 7.24.0 è in realtà sta per dire il server che stiamo usando Google Chrome come il nostro browser. Quindi, se avete mai sentito circa le persone che parlano di fare un app reattivo per più browser, questo è qualcosa che si avrebbe utilizzato perché se si non so quale browser la richiesta proviene da, Non è possibile personalizzare i dati a questo. Quindi, in questo caso, l'utente è solo dare questo tipo delle informazioni di identificazione su quale browser l'utente sta utilizzando, OK? Allora abbiamo anche padrone di casa, che è dove stiamo realmente voglia di andare. In questo caso, vogliamo andare a apple.com, acquistare alcuni nuovi iPad fresco o qualcosa del genere, forse carino luci presso i nostri dormitori. E il valore nome alla fine è solo un riempitivo, solo una cosa generale per voi ragazzi a vedere. In realtà non corrispondono a nulla qui. Così si può avere più o poco quanto si vuole in ogni caso. La maggior parte del tempo, questi sono opzionali. Dipende solo da cosa dal browser è necessario, dal vostro utente, al fine di dare correttamente la richiesta. O dipende da ciò che il vostro utente in realtà vuole rinunciare al server. Così si può avere molti, molti di questi nomi di campo di intestazione o si può solo avere un paio. Come per tante cose L'ho già detto in questa sezione, in realtà dipende dal contesto di come si sta utilizzando questo. Così fa che abbia un senso per tutti? Questo è solo un esempio di una richiesta, intestazioni, roba del genere. OK, così con questo, abbiamo qualche risposta. Ancora una volta, abbiamo il nostro codice di stato, il protocollo versione, e poi il nome del campo e il campo valorizzare come sempre. Così la nostra versione del protocollo e il nostro codice di stato 200. OK, il che significa che, Sì, tutto è andato bene. Ecco ciò che si desidera. Il tipo di server, il contenuto type-- ci dice, OK, tu sei andando a prendere un po 'di testo HTML. Qui è la lunghezza di esso e qui cosa si dovrebbe fare con la connessione. OK, quindi ancora una volta, a seconda sui dati che siete chiedendo, a seconda che il server vuole per tornare a te, si può avere più di questi campi nomi, potrebbe essere meno. Totalmente dipendente dal contesto. E quanto questo status codice qui, naturalmente, 200 non è l'unico si potrebbe avere, giusto? Abbiamo un sacco di codici di stato. Qualcuno ricorda una delle altri che abbiamo menzionato in conferenza? Molti di loro iniziano con 4. PUBBLICO: 404. ALLISON Buchholtz-AU: 404, che è? PUBBLICO: File non trovato? ALLISON Buchholtz-AU: File non trovato. Esattamente. E per quanto riguarda 403? PUBBLICO: Proibita. ALLISON Buchholtz-AU: Proibita. Allora, cosa ne pensi questo significa che con chmods? PUBBLICO: Significa che non hanno il permesso di leggerlo. ALLISON Buchholtz-AU: Esattamente. In qualche modo, non è necessario il permesso di accedervi, giusto? Così 404, 403. C'è una molto divertente quello che abbiamo sempre presentare ogni anno che Avrei dovuto inserire qui, come il 413, che è io sono una teiera. È possibile google questo. E 'divertente come, cioè il codice 413 ed è che sono una teiera. Che io non so perché si farebbe mai bisogno che su internet, ma sto divagando. PUBBLICO: Forse sei una teiera. ALLISON Buchholtz-AU: Forse il server è una teiera. Chi lo sa? Va bene, allora stiamo per transizione in vera e propria codifica. Mi sento come voi ragazzi state andando uscire di qui abbastanza rapidamente. PUBBLICO: Perché lo fa dire "server: due volte? ALLISON Buchholtz-AU: Hm? Server due volte? Questa è una buona domanda. Non sono sicuro. Lo scoprirò e Io con la posta elettronica tutti. OK, tutte le altre domande oltre a quello? Buono? Freddo. HTML e CSS, e ora siamo raggiungere tutte le parti divertenti. Quindi, come ho detto prima, HTML è probabilmente una delle cose voi ragazzi sono più familiarità. Così abbiamo HyperText Markup Language. Il modo migliore per imparare questo-- non lo faccio Per qualsiasi diapositive o nulla preparati per voi ragazzi con HTML. E 'davvero di imparare la sintassi. E se tu fossi in MySpace giorno, si dovrebbe avere questo verso il basso. Quindi, in realtà, la cosa più importante è solo di praticare e sperimentare. Una delle grandi risorse vorrei Consiglio vivamente usando è W3Schools. Quindi, solo W, 3, e poi le scuole. Hanno un sacco di risorse su HTML, il CSS, e che in realtà hanno un Divisione dello schermo genere di cose dove vi daranno esempio di codice. Si può giocherellare con esso, modificarlo e premere Update, e vi mostrerò quello che in realtà lo fa per la pagina web. Quindi mi raccomando utilizzando tale. E 'piuttosto fresco. Non sarà possibile ottenere gli errori seg qui quando le cose vanno male. Se si riesce a ottenere un guasto seg con HTML, non me lo faccia sapere perché io sono andare da vera incuriosito. Ma è davvero cool, perché è possibile cambiare le cose, è possibile vederli aggiornati in tempo reale. E penso che avrai una molto comprensione più intuitiva di HTML se in realtà solo passare un po ' tempo a sperimentare con esso. Ecco, questo è il motivo per cui ho detto, pratica e sperimentare. Google, da qui in poi out, sarà probabilmente uno dei tuoi migliori risorse e amici. O Bing-- sto lavorando a Microsoft, quindi forse dovrei dire Bing. Ma praticamente qualsiasi cosa è solo andare a essere la sintassi, in modo da capire quali sono i tag, understanding-- almeno con CSS-- come modificare determinati attributi. Sarà super utile. Quindi, anche se non lo facciamo avere le cose preparate, noi abbiamo genere di alcune buone pratiche che vogliamo che voi ragazzi a provare e rispettare by-- o meglio, si dovrebbe rispettare fino a nuovo avviso. Quindi, chiudere tutti i tag. Speriamo che tutti has-- sai una cosa, se questo non ha senso in questo momento, Io prometto che avrà senso quando stiamo codifica la pagina. Ma chiudere tutti i tag. Quindi, se avete mai avuto un po ' colpo di testa che è la staffa, H1, staffa, assicurarsi che ogni volta che hai finito con questo, si chiude tale intestazione. Confermi la sua pagina con W3 Validator. Se non si chiude i tag, è possibile ottenere un comportamento imprevisto. Si dirà che la pagina non è valido se lo si esegue attraverso questo validatore. Così, quando in doubt-- e, soprattutto, su di questa settimana e la prossima settimana di pset-- nello stesso modo in cui chiediamo di utilizzare il check 50 e 50 stile, si potrebbe pensare a questo come uno dei vostri controlli, OK? Quindi, se non passa il W3 Validator. Questo è qualcosa che noi approdiamo voi su. O che ti sto dicendo a destra ora, io attraccherà voi su. Quindi assicurarsi che convalida. Non è difficile. Basta incollare nel codice e ti sia dire buon lavoro o vi state perdendo qualcosa nello stesso modo che stile 50 ti dice dove si sta rovinare. E poi un'ultima cosa è che si vuole separare il tuo markup, che è tutto ciò che HTML o il testo, e il vostro stile. Quindi faremo un esempio di che subito dopo questo. Quindi, HTML e CSS dovrebbero essere separati. E stiamo andando a parlare di MVC, che è Model View Controller, la prossima settimana. Voi ragazzi dovreste probabilmente conoscere che in conferenza domani se aveste già imparato oggi. Ed è solo un po ' un paradigma che tendiamo da utilizzare durante la creazione di web pagine per separare le cose. Si può pensare ad esso nello stesso modo che tendiamo a funzioni separate in C dove hash per trovare le cose. E 'solo un modo per rendere la vita più facile. Si separa attributi o codice che si sarebbe utilizzando più e più volte, ma in questo modo, esso genere di mantiene bello e pulito. E se si desidera modificare una cosa, si cambia una volta ed è cambiato tutto il resto. Quindi è più per la tua facilità e flessibilità. Quindi, con i CSS, è molto simile in HTML, ma invece di tag di cui ho parlato poco fa, abbiamo utilizzare ciò che è chiamato selettori. E fondamentalmente solo tipo di associare un determinato tag in HTML con attributi diversi. E quando dico attributi, voglio dire cose come il colore del carattere, lo stile del carattere, il colore dello sfondo, il colore del testo. Questo genere di cose. Come se è centrato, se è a destra, se si tratta di inverted-- tutto di queste cose interessanti. Tutte le cose stilistiche che fate per il vostro testo, questo è ciò che intendo con gli attributi. E poi due cose principali da sapere è che selectors-- due dei factors-- principale sono ID, che è unica. È possibile utilizzare solo che per una cosa. In caso contrario, sta andando a urlare contro di voi. E quando lo definiamo in un file CSS, sarà essere ID hash e poi quali attributi che vogliamo. Ti prometto che andremo a passare attraverso un esempio. Farà molto più senso. Classe può fare riferimento a più blocchi. Così si può avere il tuo primo e terzo comma avere lo stesso tipo di attributi se li associa con la stessa classe. E quando noi li definiamo in CSS, facciamo una classe di punti, con classe è tutto ciò che si desidera essere nominato. Quindi so che questo è giusto ora molto astratto. È per questo che stiamo andando a codice. So che voi ragazzi amore che, e siete tutti mi aiuterà perché questa è la vostra pagina web. Questa la pagina web della nostra sezione, ragazzi. Quindi ci sono delle domande prima di spegnere il PowerPoint, o qualsiasi cosa vuoi che io per scorrere indietro a prima di iniziare a scrivere codice? PUBBLICO: Quando si dice corrispondente a Tags, vuoi dire selettori o tag? ALLISON Buchholtz-AU: è possibile pensare a loro come la stessa cosa. E 'solo parole diverse. Voglio dire, come selettori. Ma selettori mappa anche ai tag. Così si può pensare a loro come effettivamente la stessa cosa. Prometto che sta andando a fare più senso quando codice. Qualsiasi cosa, da la PowerPoint o tutte le domande in questo momento prima di riuscire a generazione pagina della nostra sezione? Tutti pronti? Freddo. Così ho iniziato uno. Mi permetta di aumentare il tipo di carattere per voi ragazzi. OK, così in questo momento, non ci resta che una ossa nude pagina web proprio qui. Abbiamo un po 'HTML. Abbiamo un po 'di testa, che noi vedi qui come esempio pagina web. Alcuni titolo, un po 'di carattere. Questi sono i tag, OK? Così, quando voglio dire chiudere i tag, vediamo qui questa testa staffa è la vostra apertura tag, e questa staffa / Testa sta chiudendo, ok? Così si potrebbe pensare a questo come la tua parentesi a tua se condizioni o il vostro cicli for. Se si dispone di una all'inizio, volete uno alla fine. Si continua a funzionare più del tempo se non si dispone di un tag di chiusura, ma pratica migliore è chiudere i tag. Quindi, in questo caso, cambiamo questo. Stiamo per avere sezione sette. "Sezione pagina web." Così sto solo andando a cambiare questo. E se andiamo qui e ci devo reload-- salvare e reload-- notiamo che qui è cambiato, giusto? Freddo. Quindi, questo cambia il titolo. Questo è tutto quello che è sulla vostra scheda. Quindi questo è una specie di guardando un po 'noioso. Non so di ragazzi. Penso che noi vogliamo qualcosa di diverso qui. Quindi, quello che possiamo fare è la intestazione è proprio lì. Facciamo una sorta di corpo. Così abbiamo un corpo qui. Faccio sempre aperta e Chiudo tag per iniziare, nello stesso modo che faccio parentesi graffe. Ah. Aspetta, che cosa? PUBBLICO: [incomprensibile]. ALLISON Buchholtz-AU: Ah. Voi ragazzi mi ha fatto. Buon lavoro. Stella d'oro. OK, quindi abbiamo un po 'di corpo qui. E ora iniziamo l'aggiunta di un testo. In modo da avere una coppia diversa opzioni per l'aggiunta di testo. Ci sono cose come le intestazioni. Abbiamo solo testo normale. Quindi cerchiamo di iniziare solo con un colpo di testa. In realtà, se voi volete per tirare su HTML di W3 Scuola, è possibile tipo di guardarsi intorno e se c'è qualcosa particolare che si desidera provare con questa pagina web, possiamo farlo. Quindi, in questo caso, facciamo solo fare un po 'h1. Così h1 è come la più alta intestazione. Essa vi darà qualcosa di che è molto grande e in grassetto. E in questo caso, quello che vogliamo per il primo testo sul nostro sito? Qualsiasi cosa. Voi ragazzi stanno andando a creare questo. Sto solo andando a digitare. PUBBLICO: Benvenuti. ALLISON Buchholtz-AU: Benvenuti. OK, quindi se lo salviamo e ricarichiamo, abbiamo un grande grande benvenuto. Quindi, solo così è possibile vedere il differenze, facciamo qualcosa su H6. Cosa vogliamo proprio qui? Giusto? OK, così solo così si può vedere la differenza. Sì, Sublime. Quindi, se si nota, h1, molto, molto grande. h6, come il grassetto, ma molto più piccolo, e si dispone di tutto il resto. Così si potrebbe avere h2, h3, h4. E queste sono solo le intestazioni, quindi se si sta cercando per creare una pagina web che ha diverse sezioni, forse si vuole utilizzare intestazioni in là da qualche parte. Freddo. Quindi aggiungeremo un po 'di più cose nel nostro corpo. Vedo che sarebbe sorta di fresco se avessimo una foto. Mi sento come se tutti potevano usare forse un quadro simpatico coniglietto proprio in questi giorni, quindi stiamo andando a trovare un quadro coniglietto prima. Non so se voi ragazzi avete qualsiasi preferenze su quale vogliamo. Avete delle preferenze? Questa qui? Giù. Ok. Quello che è. Buone scelte. OK, quindi stiamo andando a vedere la nostra immagine. Guardate che. Guardate che cosa adorabile. Come puoi essere triste su un Lunedi con questo? Quindi stiamo solo andando per copiare l'URL dell'immagine. E quello che vogliamo fare è, diciamo solo dire che abbiamo un po 'di p per paragrafo. Andiamo a dire: "Guarda guardare il coniglio carino. d'awwww ". Amo i miei coniglietti. Ho un coniglio a casa. Mi manca il mio coniglietto. Così che cosa stiamo andando a fare-- Non so se voi volete to google questo-- ma con HTML, come si potrebbe includere un'immagine? Letteralmente, se google "Includere immagini HTML," Perché non me l'hai detto ragazzi ciò che questo tag dovrebbe avere? PUBBLICO: img sorgente-- ALLISON Buchholtz-AU: img sorgente-- PUBBLICO: --equals-- ALLISON Buchholtz-AU: --equals-- PUBBLICO: --quote-- sì. ALLISON Buchholtz-AU: Perfect. Incantevole. Vedi, la generazione di MySpace, giusto? Pubblico: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. E 'stato pazzesco. Ok. Quindi assicuratevi ho questo diritto. Freddo. Quindi questo dovrebbe essere qui. E poi se ricarichiamo, abbiamo il nostro coniglio sulla pagina non è questo adorabile? Questo è così carino. Si è scelto un grande, grande foto. Sto scavando esso. OK, quindi abbiamo questo adorabile coniglietto ora. Siamo stati in grado di aggiungere un immagine, proprio così. Quindi, in pratica se c'è qualche immagine che si desidera aggiungere alla tua pagina web, è possibile aggiungerlo come questo. Altra cosa sarebbe se avete l'immagine memorizzata nella stessa cartella questo file, si può solo scrivere quello il nome di quell'immagine è invece di avere un collegamento web. E sarebbe ancora tra virgolette. Sarebbe solo come se avessimo chiamato questo-- se questa immagine fosse stata salvata nella cartella con il file HTML che sto modificando e è stato chiamato bunny.jpg. Potremmo anche farlo e sarebbe presentarsi. Tuttavia, non ho salvato in questo il file e voglio mantenere il coniglio, quindi stiamo andando a mantenere il collegamento. PUBBLICO: Che cosa è rabbit.org? ALLISON Buchholtz-AU: rabbit.org. E 'un appropriate-- guarda, si può adottarlo. Adozione. bunny.jpg. Voglio adottare questo coniglio. Oh, Dio, è così carino. OK, quindi abbiamo aggiunto le intestazioni. Abbiamo aggiunto una foto. Ovviamente, abbiamo aggiunto un po 'di testo qui, giusto? Se volessimo aggiungere altro testi, ci piacerebbe andare in questo modo. Quindi questo è un altro paragrafo. E noi diciamo "questo è un altro paragrafo." Inoltre, io sono un correttore ortografico orribile, così che io possa errori ortografici cose. Cordiali saluti. Quindi abbiamo un altro paragrafo qui, giusto? Così forse si vuole fare qualcosa un po 'più interessante di un semplice hanno tutto il testo, come allineato a destra. Forse si vuole centrare il testo, OK? Quindi, se qualcuno vuole usare quelli computer a portata di mano di fronte a voi e dimmi come sei andando a centrare il testo, PUBBLICO: p align. ALLISON Buchholtz-AU: Così p align è uguale a "centro". Egli sta uccidendo, ragazzi. Y'all devono moltiplicare. E abbiamo "Questo è centrato." E ora abbiamo centrato qualcosa. Allo stesso modo, se voglio allineato a sinistra, si potrebbe fare uguale allineamento sinistro, allineamento è uguale a destra. Totalmente a voi. Se ho fatto bene qui, allora questo should-- ora è allineato a destra. PUBBLICO: Allison? Da fonte dell'immagine, perché non è lì vicino della sorgente IMG? ALLISON Buchholtz-AU: Mi dispiace. Questo dovrebbe essere Ora ci si sta bene. Ora siamo a posto. PUBBLICO: Non hai per chiuderla lì, o no? ALLISON Buchholtz-AU: Bene, così img fonte, questo è solo-- con l'immagine, è solo visto come un elemento, mentre se si nota per il resto di questi, abbiamo qualche tag, allora le informazioni che esso riguarda e poi un tag di chiusura. Ma con l'immagine, tutto è appena sorta di self-contained. Freddo. Quindi, voi ragazzi sapete come creare un intestazione, si sa come inserire il testo, sai come mettere un'immagine ora, è possibile allineare le cose. Un'altra cosa che si potrebbe desiderare di essere in grado di fare è quello di creare una lista in CS-- siamo tipo di andare in pset della prossima settimana. La roba che abbiamo tipicamente insegnare questa settimana va molto bene con pset della prossima settimana, quindi siamo tipo di miscelazione, si sovrappongono le cose qui. Ma sarà utile per la prossima settimana. Quindi, se abbiamo voluto creare un po ' lista, come potremmo farlo? Non è possibile rispondere questa volta. Qualcun altro deve. Non è difficile, ragazzi, prometto. Google "lista non ordinata HTML." Che cos 'era questo? PUBBLICO: [incomprensibile]. ALLISON Buchholtz-AU: Giusto. Così vogliamo ordinato o non ordinato? Facciamo un non ordinato. Così abbiamo un po 'ul, che sta per elenchi non ordinati. E cosa abbiamo per ogni elemento? Fa bisogno di un proprio tag? Possiamo solo iniziare a scrivere le cose? PUBBLICO: li. ALLISON Buchholtz-AU: li. Allora, qual è la nostra lista sta per essere? Che cosa vogliamo qui? Dobbiamo solo fare i nomi. Basta fare Jacob. Alimenti Coniglio: UDIENZA. ALLISON Buchholtz-AU: alimenti coniglio. OK Mi piace questo. Alimenti coniglio. OK, quindi abbiamo le carote. Mi piace questo tema coniglio. Sto scavando un sacco. PUBBLICO: In realtà, ho pensato che Jacob sarebbe un legit. ALLISON Buchholtz-AU: Jacob? Jacob è cibo per conigli. Se avete visto Giacobbe foto dalla orario d'ufficio, si potrebbe pensare ha ottenuto attaccato da un coniglio assassino. PUBBLICO: Ho un coniglio ora. Ho un coniglio assassino ora. ALLISON Buchholtz-AU: Ma stai scherzando? PUBBLICO: Porterò la prossima sezione. Ce l'ho. ALLISON Buchholtz-AU: Questo è ridicolo. In ogni caso. PUBBLICO: [incomprensibile] PUBBLICO: Sì, il mio procuratore ha un coniglio pure. ALLISON Buchholtz-AU: Voglio un coniglio. OK, chi porta un vero e proprio coniglio la sezione successiva, il totale punti brownie. PUBBLICO: [incomprensibile] PUBBLICO: Oh, non è vero. E 'un coniglio ripieno. ALLISON Buchholtz-AU: Oh sì, possiamo chiudere questi. Sembra rad. PUBBLICO: Ha davvero importanza? ALLISON Buchholtz-AU: Non è così. Con la maggior parte di queste cose, non si chiude il tag, Il 99% del tempo nulla di male sta andando che accada, ma è buono stile, troppo. Giacobbe. E abbiamo lattuga. PUBBLICO: Per i collegamenti, è davvero importante. ALLISON Buchholtz-AU: Hm? Destinatari: per i collegamenti ipertestuali. ALLISON Buchholtz-AU: per i collegamenti ipertestuali. Sì, i collegamenti ipertestuali bisogno. OK, vediamo qui. E abbiamo la chiusura della nostra lista. E guardiamo a questo. Abbiamo tutto-- Jacob, proprio lì. Cibo per conigli. Mi ricorda Bunnicula. PUBBLICO: [incomprensibile] ALLISON Buchholtz-AU: sto riportando Tutti i vecchi riferimenti scuola oggi, non sono io? Appena tutti i vecchi riferimenti scuola. Dovuto portare come Gogurts o qualcosa del genere per gli spuntini. PUBBLICO: O Gushers. ALLISON Buchholtz-AU: Oh. Ok. Vedrò se riesco a tenere traccia giù Gushers per la prossima settimana. Penso di poter fare. Penso che potremmo avere alcuni in ufficio. OK, abbiamo trattato un sacco di diverso cose che si possono fare con HTML, giusto? E come probabilmente si può vedere, è nothing-- si spera, non troppo intim-- se lo è, non voglio dire sminuire nessuno. Se hai problemi, si prega di venire a parlare con me. Ma la maggior parte di esso è solo guardando la sintassi, giusto? Se volete una lista non ordinata, se volete qualche sorta di lista, se si desidera allineare qualcosa o Formato di qualcosa, è tutta una questione solo tipo di guardare in alto del sintassi per HTML, giusto? E una cosa che è piuttosto fresco in realtà è se si va a-- vediamo, che cosa è un bel sito che ci piace? Qualcuno ha qualche siti web preferiti che sono OK per far apparire on-line? Sai una cosa, facciamo solo fare CS50. Questo è bello e sicuro, giusto? OK, così CS50 qui. Oh guarda, c'è una sezione in questo momento. Se ti piace il suo aspetto. PUBBLICO: [incomprensibile]. ALLISON Buchholtz-AU: Non siamo intenzione di fare la sezione meta, ragazzi. Non sta succedendo. Che sarebbe stato bello, ma non abbiamo intenzione di farlo. Allora, cosa si potrebbe fare fare se ti piace il modo questo funziona è che si può sempre ragione fare clic su qualsiasi pagina web che ti piace e si può fare Visualizza sorgente pagina. Si aprirà tutto il codice HTML. E questo è in realtà un ottimo modo per lo stile la propria pagina web. Andare a una pagina web che si piace molto e guardare il codice HTML e capire come hanno fatto. E letteralmente, purché come si citano le cose, fino a quando non sei solo rubare da persone, va bene. Soprattutto per CS50 [? finanziamo?], siamo gentile da parte vostra in attesa di ottenere ispirazione da altri siti web. Quindi sentitevi liberi. Guardare attraverso i siti web che pensate che sono davvero carina e capire come usano HTML e CSS per fare queste cose. Quindi, come vedete qui, non c'è, ovviamente, come i collegamenti e abbiamo una classe qui. Abbiamo un link qui. Abbiamo una lista. Probabilmente abbiamo un po ' foto in qui da qualche parte. Abbiamo un certo stile fresco qui. Questa è la prossima cosa stiamo andando a fare. Quindi stile, ogni volta che vedi questi staffe di stile, è fondamentalmente CSS. Ben, hai avuto una domanda? PUBBLICO: Che cosa è div? ALLISON Buchholtz-AU: div è proprio quello che è a-- div? PUBBLICO: Divisione. ALLISON Buchholtz-AU: Divisione. Sì, è proprio come separare diversi elementi. OK, ecco è ciò che siamo intenzione di andare in successiva. Quindi questo potrebbe non essere il migliore stile, perché, se si nota abbiamo HTML e stile nella stessa pagina, e vogliamo davvero separare quelli, Ok? E in realtà, mi permetta aprire il mio quello giusto perché questo dovrebbe essere il PDF, quindi abbiamo style.css. Che cosa possiamo fare qui è questi sono cose interessanti come alcuni dissolvenza e potremmo cercare di farlo, ma mi sento come farei confusione che fino al volo, così Vi incoraggio ragazzi a andare provare che da soli, ma io non ho intenzione di farlo adesso. Quindi, se voi ragazzi, ricordo, se mai colpito set problema, qualcosa piomba dal lato. Ha a che fare con la dissolvenza e la transizione e quant'altro. PUBBLICO: E questo è tutto CSS e HTML? ALLISON Buchholtz-AU: Tutti i CSS e HTML. Sì. Così si può fare un sacco di veramente cose interessanti con i CSS e HTML. Quindi, con il nostro fantastico pagina web coniglietto qui, abbiamo stanno andando a fare un po ' po 'di stile CSS con esso. Quindi, se avete mai avuto uno stile foglio, che abbiamo qui, si può chiamare style.css. Si può chiamare quello che vuoi. Quello che è importante è che stiamo andando di riferimento nel nostro web.html qui. Così che cosa stiamo andando a fare è we-- quindi non si scherza questo up-- ci accingiamo a collegare questi due file insieme. Così nella stessa way-- vado disegnare un analogia C qui. Allo stesso modo che se si dispone di alcuni library-- e abbiamo cs50.h-- il nostro compilatore collega. Questo è solo un esplicito Link da parte nostra. Quindi, nello stesso modo in cui lo facciamo hash includere qualche file, cosa Sto per scrivere è solo il HTML / CSS equivalente di quella. Stiamo solo dicendo, OK, questa pagina web sta per utilizzare questo foglio di stile, OK? Così abbiamo link rel pari al foglio di stile. E poi abbiamo il tipo, css. E poi è uguale a href. Ok. Quindi, tutto questo ha fatto qui è possibile pensare a questo come la stessa cosa come un hash includere. Ovviamente sembra un po 'più complicato, ma in tutti i casi, è effettivamente la stessa cosa. Quindi, questo è solo un po 'di collegamento di un foglio di stile, è di tipo text / css, e il nome di essa è style.css. Ciò che è importante sapere è che la pagina web che sto lavorando proprio now-- web.html e style.css-- sono nella stessa cartella. Perché in cartelle diverse, è necessario dare la radice reale ad essa o il percorso. Ma in questo caso, stiamo mantenendolo super semplice e che sta per essere qui. Quindi, se lo facciamo, ho un po ' cose già in coda qui. Così abbiamo un corpo, che sta di avere il nostro colore di sfondo, che in questo momento è di colore azzurro. Siamo in grado di cambiare se vogliamo, ma se ricordo correttamente, si deve solo cambiare alla luce blu. E ora abbiamo uno sfondo blu chiaro. E abbiamo avuto qui-- qualcuno può ricordare che uno è ID hash o di classe? PUBBLICO: ID. ALLISON Buchholtz-AU: ID. Freddo. Così che cosa vogliamo fare è che di questi tipi di carattere o which-- vogliamo "Guarda il coniglio carino "essere viola? Credo che noi vogliamo che per essere viola. Sono abbastanza giù con che essere viola. Quindi, ciò che si fa è di fare ID equals-- in questo caso Ho detto, che cosa, piuttosto colore qui. Ricarichiamo. Tutto d'un tratto, si è viola. OK, quindi con ID, ricordare deve essere unico, quindi dovrei mai usare questo ID in qualsiasi altro luogo. Ma con classe, come abbiamo qui con un bel carattere, Dovrei essere in grado di utilizzare che ovunque io voglio. Allora, facciamo questo qui. Quindi possiamo dire che classe è uguale piuttosto font. E se guardiamo ora, abbiamo questo bel carattere fresco qui. Così forse voglio fare entrambe le cose. OK, io in realtà non so se questo è andare al lavoro, ma voglio provare. Ed è così che si impara CSS e HTML. Sei come, sai cosa, voglio provare questo. Non sono sicuro se si tratta di andare a lavorare. Vediamo se funziona. E guarda un po '. Ora è in viola e si tratta di un bel carattere. OK, in modo da avere tutte queste cose che si possono fare. Hai una domanda? PUBBLICO: Sì. Beh, proprio come i colori Stai usando sei parole. C'è un modo per fare i colori con l'esadecimale RGB? ALLISON Buchholtz-AU: È possibile anche farlo con esadecimale, credo. Sì. Ma è una specie di bello se si non voglio guardare in su. Si può solo essere come, viola o blu. PUBBLICO: Speriamo che sanno che cosa significa. ALLISON Buchholtz-AU: Giusto. Quindi cerchiamo di fare questa lettura o chartreuse. Perché mai scegliere chartreuse? Si tratta di un colore interessante. OK, quindi ovviamente possiamo vedere noi può cambiare le cose però vogliamo. Se si voleva create-- diciamo abbiamo voluto creare un'altra classe. Che cosa voi ragazzi potrebbe desiderare di cambiare? Se si tira su W3Schools ' Documentazione CSS, Lascio la parola a voi ragazzi. Possiamo cercare di fare qualcosa di fresco con questo negli ultimi due minuti. Perché ho tipo di dato un Crash Course su un sacco di cose interessanti che si può fare. Ma alla fine, come ho detto, se si solo esperimento, imparerete molto. PUBBLICO: Hai guardato in su che tipo di carattere? ALLISON Buchholtz-AU: Sì, Alzai lo sguardo quel font. Così come, letteralmente, mi andato a-- cosa ho fatto? Ho fatto l'elenco dei font CSS, e poi ho fatto pila di carattere, e poi mi sono detto, guarda, qui sono tutti i font interessanti si possono fare. E c'era questo, quindi Ho copiato al mio appunti. E poi mi sono detto, OK, fresco, ci andiamo. Tutto fatto. PUBBLICO: quindi bisogna fare in modo che i CSS sa che cosa quel font sia. ALLISON Buchholtz-AU: Sì. PUBBLICO: Cosa dice alla fine? Corsivo? ALLISON Buchholtz-AU: Cursive. Sì. PUBBLICO: Immagine di sfondo. ALLISON Buchholtz-AU: Immagine di sfondo. Ok. Quindi vuoi dirmi come fare questo. Lascio a voi. Sto solo scrivendo qui ora. La ruota è nelle vostre mani. PUBBLICO: OK ALLISON Buchholtz-AU: OK. Che cosa sto facendo? PUBBLICO: Doing-- So cosa viene dopo la parentesi graffa. ALLISON Buchholtz-AU: OK. Quindi probabilmente in corpo, mi avrebbe assunto, perché siamo fare l'immagine di sfondo. PUBBLICO: Sì, facciamolo. ALLISON Buchholtz-AU: OK. PUBBLICO: OK, allora sfondo colon, e poi ci bisogno di un indirizzo URL di quell'immagine. Forse pseudo-codice che per ora, forse. ALLISON Buchholtz-AU: Che cosa vuoi che a-- PUBBLICO: Sto pensando come un GIF. ALLISON Buchholtz-AU: A GIF? Che sta per essere interessante. OK, che cosa sono io googling qui? PUBBLICO: No, questa è la vostra scelta. ALLISON Buchholtz-AU: Perché non we-- se si tratta di un coniglio, Mi sento come dovremmo avere un bel prato erboso o qualcosa del genere. PUBBLICO: Prato. Un prato. ALLISON Buchholtz-AU: Un prato? Ok. PUBBLICO: O Rachel Maddow. ALLISON Buchholtz-AU: Questo sembra piuttosto. Oh, questo è molto piccolo, però. Abbiamo bisogno di una buona immagine di dimensione. Vediamo. Oh, guarda. Questo è un bel prato. Sai cosa, mi piace questo. Cerchiamo di copiare questo. PUBBLICO: OK, quindi penso che sia l'URL, parentesi aperte. ALLISON Buchholtz-AU: OK, URL. PUBBLICO: Quindi l'indirizzo. ALLISON Buchholtz-AU: OK. È che tutti abbiamo bisogno? PUBBLICO: Chiudi parentesi e virgola, e poi spazio, sfondo trattino due punti di attacco fisso, e parentesi graffa. ALLISON Buchholtz-AU: OK. Vediamo se funziona. Sta andando essere abbastanza freddo se lo fa. Sono davvero felice qui. Non ha funzionato. Mi chiedo perché. PUBBLICO: Forse l'URL deve essere tra virgolette. ALLISON Buchholtz-AU: Forse. Ed è così che si impara, ragazzi. PUBBLICO: Possiamo avere sfondo il colore e l'immagine di sfondo? PUBBLICO: No. Si sostituisce l'altra. ALLISON Buchholtz-AU: Non lo so. Vediamo. Andiamo a controllare e vedere. PUBBLICO: Oh, forse, sì. [VOCI interponendo] ALLISON Buchholtz-AU: OK, questo è obviously-- I [incomprensibile] qui. Quindi OK. PUBBLICO: attaccamento Sfondo. ALLISON Buchholtz-AU: Ah. PUBBLICO: OK, io non lo so. ALLISON Buchholtz-AU: Si sembra che dovrebbe funzionare. Sei sicuro che sia i due punti dopo l'URL? PUBBLICO: No, è punto e virgola. ALLISON Buchholtz-AU: E 'punto e virgola. PUBBLICO: Ho detto colon? ALLISON Buchholtz-AU: Hai detto due punti. PUBBLICO: Oh no. ALLISON Buchholtz-AU: ci si va. PUBBLICO: Oh, aspetta, ora non siamo in grado di leggere il testo. ALLISON Buchholtz-AU: Ora Non è possibile leggere il testo, ma abbiamo l'immagine di sfondo. Mmhmm? PUBBLICO: Fa HTML supportare contenuti dinamici? Come, potrebbe ridimensionare quella foto a seconda della dimensione della finestra, o è che un CSS-- ALLISON Buchholtz-AU: Così CSS ha a che fare questo. Quindi, se voi siete interessati nell'apprendimento avanzata CSS, Io sono co-docenza di un seminario sul CSS al 7 °. E vi prometto che vi essere molto più in profondità e fare molto di più fresco cose in questa sezione. E il mio co-insegnante è come totale front-end web dev master. Così sarà piuttosto fresco se si desidera per conoscere tutte le cose interessanti che i CSS può fare. Ma quello che abbiamo qui con il suo attaccamento sfondo fixed-- quindi è un po 'size-- fisso ma si può effettivamente dynamically-- se avete mai visto le pagine web, come maggior parte delle pagine web buone farà, quando si regola il dimensione del tuo browser, regola lo sfondo o quanto sta mostrando o riformatta le cose, giusto? Ecco, questo è ciò che noi chiamiamo posizionamento relativo. E CSS può effettivamente afferrare quanto è grande il tuo larghezza del browser è o quanto alto sia, e si può posizionare le cose secondo le dimensioni relative rispetto a dimensioni assolute. E questo è ovviamente più avanzata CSS, ma questo è qualcosa che si può fare. Se volete imparare più, venire al mio seminario. In modo che sia qualcosa che si può fare. E CSS può effettivamente fare-- CSS e JavaScript, di cui parleremo nel prossimo week-- può permettere di cambiare in modo dinamico pagine senza dover ricarica loro tutto il tempo. E si arriva a fare un po ' roba abbastanza fresco. Così, c'è un'altra cosa che voi ragazzi potrebbe voler fare o tutto quello che vuoi esplorare? Abbiamo 10 minuti dalla fine. Possiamo anche partire presto, ma se si vuole fare un po 'di roba web, possiamo, ma non sono andando a costringerti a. Ma possiamo anche semplicemente mangiare caramelle. PUBBLICO: Evidenziare il testo bianco in modo da poter leggere. ALLISON Buchholtz-AU: OK. Quindi, in questo caso, vogliamo alcune p. PUBBLICO: Dovremmo farlo nel corpo in modo che si applica a tutta pagina? ALLISON Buchholtz-AU: Sì, possiamo in realtà. Questa è una buona idea. Così abbiamo have-- Sei il sappiamo che cosa dovremmo essere? Non so se si può fare il colore del testo. Stavo andando a cercare di creare un'altra classe qui. PUBBLICO: Come si ottiene così che ha suggerimenti? ALLISON Buchholtz-AU: Così se voi siete interessati, questo è un altro testo Editor chiamato Sublime. Si dovrebbe essere in grado di installarlo sul vostro apparecchio. A volte diventa un po 'difficile. Se si vuole aiutare in questo, Sono super felice di aiutarvi con essa, perché gedit è grande e è impressionante perché si può compilarlo sul fondo, ma realmente come Sublime perché è abbastanza e lo fa fare le cose come il completamento automatico. Così si può sicuramente sentire liberi di fatemi sapere se si desidera farlo. Se solo Google "Sublime il testo, "è in genere ha le istruzioni su come installare su vari sistemi operativi. E 'davvero cool, mi pensare, a mio parere. Così p. Penso di poter fare solo text-- o possiamo solo fare colore è "bianco". Là. Quindi quello che ho fatto qui è che io non ha modificato tutto il testo. Ma p qui è solo un tag che abbiamo, giusto? Questo tag di paragrafo. Così ho appena creato un elemento CSS che detto, OK, qualsiasi cosa con questo tag p, rendono il colore bianco. Quindi, se avete notato, ha fatto questo bianco e questo bianco. Non aveva la nostra lista bianca perché non è associato a questo. Si potrebbe passare attraverso e si potrebbe say-- PUBBLICO: Do colore di sfondo. ALLISON Buchholtz-AU: Colore di sfondo? PUBBLICO: Sfondo di tubi in colore in cui si inserisce il tag p. ALLISON Buchholtz-AU: OK. Lo vuoi bianco? PUBBLICO: Mmhmm. ALLISON Buchholtz-AU: OK. Ecco fatto. PUBBLICO: Questo è strano. ALLISON Buchholtz-AU: Abbastanza freddo, giusto? Quindi, se si scherza, hai intenzione di imparare molto. E può essere piuttosto fresco. Penso che sia decisamente più gratificante che a volte perché non c'è bisogno di aspettare per il vostro programma per la compilazione. Si può solo colpire Aggiorna e tu sei come, oh, guarda, ha funzionato, o oh, io sono probabilmente manca qualcosa. E questo è qualcosa che è veramente interessante di questa nuova parte della classe, è è sicuramente, ho pensare, più facile da controllare come si va lungo la strada contro dover scrivere questi lunghi programmi e desiderando e pregando che funziona alla fine. E con questo, credo voi ragazzi sembrano tutti bene. Se avete domande, come sempre, venire a parlare con me, vieni me lo faccia sapere. Sarò proprio fuori per i prossimi 15 minuti se si vuole parlare di tutto e di più. Quindi spero che guys-- buona fortuna con questo pset. Il termine ultimo è il Venerdì a mezzogiorno perché è stato rilasciato alla fine. Così mi sarà probabilmente vedendo un sacco di voi ragazzi il Giovedi, ma speriamo non. Forse avrai fatto da allora. Sarei super-orgoglioso. Ma se non, ci vediamo Giovedi. È inoltre possibile utilizzare una data di fine, che si estende a Sabato a mezzogiorno. Ma io don't-- eh? PUBBLICO: Halloween. ALLISON Buchholtz-AU: È Halloween, un, e b, Non credo che ci sarà essere l'orario di ufficio il Venerdì. Quindi, in realtà non cercare di farlo fare da Venerdì in modo che tutti possiamo festeggiare Fine settimana Hallow. Va bene, ci vediamo ragazzi la prossima settimana.