[音樂播放]
ALLISON BUCHHOLTZ-AU： 好吧，大家好。
歡迎回到一節。
因此，我們今天的議程是怎麼回事 在更多的Web開發的東西。
我不知道有多少的 你已經看到你的pset
因為它被釋放 今天上午早些時候。
我想有多少 人們讀了規範，
但看到你是如何把所有 ，如，七小時，看它
這是一個星期一 你可能已經過課，
我將假設 你們中的大多數都沒有。
如果你有多餘的讚譽。
>> 你基本上幫助 實現一個簡單的web
在C中的服務器，這是一個全新的pset， 讓你們去是豚鼠。
這將是一個有趣的，瘋狂一周， 但我認為這將是一個很大的樂趣
而這將是一個真正的 良好的實際體驗。
所以，為您準備 即，在今天部分，
我們要去CHMOD，TCP / IP，並 然後HTML和CSS的一點點。
>> 最後，我們將實際的代碼 一個簡單的網頁在一起
種幫你們弄 更熟悉了。
然後，如果你還沒有回升 您的測驗，他們在前面，
但我敢肯定每個人都 在這裡有自己的測驗。
而且關於這一點， 解決方案沒有起來，
但只要我們finish--喜歡的 最後幾人走了quizzes--
它們將是向上。
如果您有任何問題 同時，
隨時親自給我​​發電子郵件。
我將與你的個人回應 問題，因為我總是這樣。
>> 所以，關於這一點，文件模式。
所以基本上所有你 需要了解CHMOD
是它用來改變 文件權限，對不對？
所以它只是某些系統稱之為 更改權限，因為它說在這裡。
如果你想看看 什麼權限的文件有，
而不是僅僅做 LS，你可以做的ls -l。
L代表長。
>> 所以，你會做的長列表 一切，和它
會給你更詳細的 每個文件的信息。
你會看到something--我 要跳到一個second--
但你會看到類似的東西 該頂行有針對每個文件。
我們將經歷什麼意思。
>> 所以基本上，改 您的文件權限，
你只是想使用chmod。
你可以把它想成其他任何 UNIX致電比如ls或CD或諸如此類的東西。
這只是一種另樣的呼叫。
>> 所以，我們做chmod和然後我們將 有三種典型的數字。
有幾個方法可以做到 其中之一是，我們就去了。
但通常情況下，你有三個 數字範圍從0到每次7。
>> 這麼一件事是，有 三種不同的權限
我們可以給每個文件。
和它的可讀性，這是 用r表示，這將是有意義
在一點點;瓦特，這是 可寫;和可執行文件，它為x。
我知道，電子的，可執行的， 也許不是最合理的，但我們
它表示為x。
>> 然後發生的事情是所有這些 還有數表示。
因此，我們有1個，2個和4個。
基本上發生的事情是 這三個數字
這裡對應於一個 不同組的用戶
這些權限涉及到。
>> 所以，你能想到的第一個 數對應於實際用戶
或文件的所有者，第二 號將對應於該組，
和最後一個指 走向世界，好不好？
所以會發生什麼是記憶 那些numbers-- r為4，w為2，
x是1，對不對？
如果這些總結起來This--， ，讓你的第一個數字
我們可能投入在我們的文件模式。
>> 所以在這種情況下，什麼 將這個數字是什麼？
這將會是4加2加 1，這是一個7，對不對？
並且在這種情況下，這些 沒有什麼，
所以這個就在這裡會 翻譯和chmod 700，OK？
什麼是做的是它賦予所有 這些權限的用戶。
>> 因此，這意味著我們的用戶 可以為所欲為。
他們可以讀取該文件。
他們可以執行這個文件。
他們可以寫入這個文件。
但是，集團與世界，沒有 任何權限，OK？
>> 因此，另一種方式來寫，我們可以 做的三位數字的搭配chmod，其中每一個
對應於任何的總和或 具體基團是，特定子集。
或者我們可以真正做另一件事。
堅持，稍等。
我們可以做一些與這些在這裡。
>> 你們有多少人看到了一個例子 它就像和chmod加X？
你有沒有看到，在講座中，我認為？
因此，一個代表所有。
這意味著它給所有的用戶， 我忘了這裡。
>> 但加X，如果我們 看到這裡，如果我們這樣做
以chmod--我們什麼組 說起加上權限
我們希望給他們。
所以這可以是一個加號或減號。
Plus增加了許可。
零下帶走許可。
非常直觀的，我想。
>> 所以加x表示文​​件模式。
因此，改變所有人的權限 如果這是一個A--附加的權限。
和x--這意味著什麼權限 我們給予每個人。
讀，寫或執行？
>> 聽眾：執行。
>> ALLISON BUCHHOLTZ-AU：執行。
所以，我們給所有用戶 權限執行此文件，OK？
因此，如果我們想要做什麼 隨著數字形式？
所以，記得數字， 我們希望三個數字。
>> 聽眾：4。
ALLISON BUCHHOLTZ-AU：那是什麼？
聽眾：4。
ALLISON BUCHHOLTZ-AU：不是4。
聽眾：0，0，4。
ALLISON BUCHHOLTZ-AU：嗯，我們要 把它給所有的用戶，對不對？
因此，我們將有 數在每個時隙中。
這將是該 在每個時隙中相同的數字
因為我們只是想給 大家可執行權限。
所以可執行文件是1， 但在正確的軌道。
>> 所以，如果我們沒有搭配chmod 111將 是CHMOD加x的等價物。
這是否有意義大家？
我們將通過 幾個例子。
>> 因此，最大的外賣 這裡是不是在這裡，
但只是意味著把它給所有用戶。
u是如果你只是想 給予或帶走
從一個特定的權限 用戶或所有者。
g是為基， 使中間數字。
然後其他你能想到的 作為世界上的最後一個數字。
>> 所以這樣，我們會去一個例子， 因為我覺得自己總是例子
使這些事情變得更容易理解。
所以rwx--我們通過this--去 也可以表示為700。
這就是我們看到的例子 在更多的圖片。
所以搭配chmod 444上的某些文件 會給哪些權限？
你真的很近。
聽眾：可讀所有。
ALLISON BUCHHOLTZ-AU：可讀。
所以，讀給大家，對不對？
然後什麼是另一種方式來做到這一點？
如果我們想要做的文件模式與任 的r和W的，加號和減號，
什麼是呼叫樣子？
這將是文件模式是什麼？
>> 聽眾：加河
>> ALLISON BUCHHOLTZ-AU：5上加河
好了，這是與此相同， 只是兩個不同的譯本
同樣的事情。
所以這樣，我們有這些。
所以我想，你們試試，寫 這些種在其相反的方向。
>> 所以，用chmod 555， 那會是什麼樣的？
會是一個加號或U加或諸如此類的東西？
為了使u加X，給我的三個數字。
然後告訴我什麼權限 我們實際上是給予和誰？
>> 所以，我給你們2 分上工作了。
隨時與對方交談。
對於那些你們誰進來一點點 晚了，有糖果和襯衫。
我們已經離開了三件襯衫，和 我們有工具阿拉伯茶和星形圖案。
所以隨意快來搶 一些在這個小插曲。
>> 此外，最後一個是棘手。
這是2 chmods的最後一個。
其實，讓我關閉的門 你們正在從事的一段時間。
糖果總是必要的 在星期一的下午。
>> OK，這樣搭配chmod 555。
什麼是我們可以寫另一種方式？
任何想法？
是。
>> 聽眾：加RX。
>> ALLISON BUCHHOLTZ-AU：R及RX。
你想解釋一下為什麼它會被RX？
>> 聽眾：因為你 5，所以這是4加1，
這樣的閱讀加 可執行文件，它的所有。
ALLISON BUCHHOLTZ-AU：對。
所以只是重申，在這裡5 我們知道，作為4和1的總和，
因為我們三人中的每個數字是 該子集的權限之和，
對不對？
任一用戶，該 基，或整個世界。
所以在這種情況下，我們知道 5具有由圖4和1來形成。
>> 與圖4和1對應 可讀和可執行。
我們給給大家， 所以我們可以做搭配chmod加RX。
很顯然，我們只是去 經過那裡的問題，
所以現在這個文件是可執行的 易讀給大家。
>> 那麼，關於第二個？
什麼可能的一個數字是什麼？
任何想法？
前進。
>> 聽眾：100 [聽不清]。
>> ALLISON BUCHHOLTZ-AU：100。
沒錯。
所以，你要解釋為什麼100？
聽眾：因為這是為 用戶，所以它在第一的位置。
然後X可執行文件1。
ALLISON BUCHHOLTZ-AU：沒錯。
因此，我們給予可執行 權限只是用戶。
所以在這種情況下，這將是100。
我知道所有的答案 起來的情況下的下一幻燈片
你寫的很多東西下來。
>> 好了，這下一個實際上是做 有兩個chmods，你可以做到這一點。
因此，沒有人有 任何想法，你怎麼可能
獲得CHMOD 640改寫 在其他的辦法嗎？
你可以先再更改用戶 您可以更改組是我的暗示。
>> 所以，如果我們只是改變 用戶，這是本第1這裡
什麼可能我們的電話是什麼？
因此，用戶為u，對不對？
因此，文件模式ü加什麼？
Mmhmm​​？
>> 聽眾：RW。
ALLISON BUCHHOLTZ-AU：RW。
對的，因為讀取和寫入，因為讀 為4，w為2，這些總和在一起，6。
所以我們得到CHMODü加RW， 我們得到我們的第一個6出現。
>> 所以後來拿到4，我們現在要 改變我們的組設置。
所以，我們要做的搭配chmod G PLUS是什麼？
什麼是4？
>> 聽眾：河
ALLISON BUCHHOLTZ-AU：河
精確。
所以，我們給了老闆 讀取和寫入權限
我們正在給一群讀 的權限，這是我們都在這裡。
Mmhmm​​？
>> 聽眾：如果你能寫的東西， 它意味著你可以執行嗎？
>> ALLISON BUCHHOLTZ-AU：你 可以寫something--
我不相信它 意味著你可以執行它。
涼爽。
所以，這一切，我們剛剛經歷了。
所以在這下一個，它的 只是一種常見情況
要保持 介意你的問題集。
這些都是典型的權限 我們喜歡您使用。
>> 因此，對於711，給出 當然，我們的用戶
所有的權限，這 往往使感。
然後它的可執行文件 集團在世界上，這是有道理的
如果你有一些目錄，你 要能夠遍歷到它。
人們需要訪問。
>> 對於任何非PHP文件，你會 使用644，這該怎麼辦？
這是什麼暗示，或者是什麼 它的權限，讓？
因此，車主可怎麼辦？
聽眾：讀，寫。
ALLISON BUCHHOLTZ-AU：讀，寫。
然後組和其他 可剛讀了吧？
再搭配chmod 600的任何 你使用PHP文件，
你的老闆，再次，可以 讀取和寫入
但所有人都 剛種擋著。
>> 所以這實際上 更有用的時候
你得到你的問題 將於下週在哪裡
你實際上是建立一個網站。
所以，如果你曾經遇到 任何奇怪的問題
它不是裝載 正確的，也許你
需要補充的可執行 權限，或者你需要一個讀
或寫權限。
這往往會絆倒人的小東西 了，但是這有點像去到
你下週開始的PSET時。
我會給你更多 提示本週的pset中，
但我還沒有看它，因為 今天早上被釋放。
但是，你給我發電子郵件，我會看著 它的時候，我的明天作出回應。
>> 所以，現在，是每個人都很好用chmod？
任何揮之不去的問題嗎？
很簡單。
剛種跟踪什麼 讀，寫和執行數字
可能是最難的部分。
>> 因此，與TCP / IP，所有的這些協議， 有點像你的數據結構
上週，它的更 重要的實物拿到
它們的較高級別的直覺。
這不是CS143我們要去的地方 問你實現一個網絡，
所以你會沒事的，如果 你不明白
所有協議的細節問題。
什麼是重要的，了解是 有點像他們所代表
為什麼他們很重要。
>> 這樣的TCP / IP，當然，它是 傳輸控制協定
或因特網協議，它是 基本上是一組基本的法律
或標準告訴數據 應該如何處理，
應該如何打包， 發送和接收。
因此，它基本上，正如它 在這裡說，增加了機會
這些數據得到的地方 你想讓它去。
>> 我敢肯定，如果你們去 講座或看過了網上，
他has--我不知道 如果他今年做到了，
但我知道，去年他有一個 演示在那裡，他搶的照片
他分割成 4並把它放在信封
並試圖得到它跨越桑德斯。
你可以種 認為這樣的說法。
這只是一組規則 告訴數據如何得到某個地方
並讓你知道，如果 你缺少數據，
以同樣的方式，如果是 以多頁的筆記
你中有104頁，頁面標記它們 204，你回去以後學習
和你缺少something-- 你找不到頁面304--你知道
什麼是錯的，所以你 可以瀏覽你的筆記
又或者問別人重新發送您 講座中指出，從那天。
以同樣的方式與在互聯網上的數據。
如果我要求 一些服務器的東西
而且它需要發送 它在多個數據包，
大概要數 它以某種方式，讓
我知道多少，我應該已經收到， 並告訴我，哦，這是10個1
或者，這是10000 1。
當我去重新組合這種方式 所有的拼在一起，
我知道，如果有什麼地方遺漏 我可以再問了點。
這是否有道理？
只是一組規則。
在它的基礎上，設定規則，OK？
>> 因此，我們也談了 有關端口的一點。
這其實只是一個標準， 讓你知道什麼類型的數據
在這些數據包被發送。
如果我們與我們的 信封例子，我們不
知道它是一個圖片 羅布在那裡，除非我們把它寫
在我們的包絡線的外側。
因此，港口基本上是同樣的事情。
這只是一種方法來找出 數據的類型被發送。
>> 因此，我們有所有的 最常見的位置。
所以21--這也是一種 像好東西就知道了。
它是一種容易競猜的問題。
像，什麼端口80呢？
或者說，什麼端口443做什麼？
這麼好的東西就知道了。
>> 所以，我們在這裡，21檔 傳輸協議，所以只是
用於管理文件傳輸的規則。
25，什麼是我們所有 使用太多，就是電子郵件。
53是域名 系統，該系統基本上是
只是那種查找的的 一個域名的IP地址。
>> 所以我敢肯定這是 在演講中提到，如果你
去像 google.com，它具有一個IP地址
，它將與它相關聯。
它實際上不是google.com。
等53是端口 這其實需要
保健樣的翻譯它的 到你的IP地址。
然後80和443都是很常見的。
要么你有你的網頁或 你有你的安全網頁，
其中大量的網頁是 傳送過來了。
>> 所以這是一種高層次 概述傳輸協議。
我看不出在深入得多。
這是一種很酷的東西 如果你有興趣。
有豐富的資源。
維基百科其實是 一個不錯的頁面。
所以，我一直在尋找它 只是一小會兒前，
所以我會強烈建議 看著它，如果你有興趣
或乘坐143在兩年內，因為 我認為這是每隔一年。
>> 因此，在今年年底，我們 談到網頁和HTTP，
這實際上是我們的下一個主題 在今天之前，我們進入的HTML和CSS
而實際上你可以編寫一個網頁。
這會很有趣。
我們將有圖片 兔子，這將是巨大的。
>> 所以HTTP，你可以在這裡看到， 是可愛的縮寫詞之一
本週，這是 超文本傳輸協議。
如此反复，這只是 另一套規則，
治超 傳送，在這種情況下。
所以，最好的學習方法 這個是正中下懷
打破它分解成 這些單個的單詞
因為有很多 也就是說在屏幕上出現。
>> 因此，我們要開始與超文本。
因此，“超”，你能想到的 “上面，”像超式的東西。
所以，它真的只是文本帶到了 一個新的水平，所以它像超文本，
就像下一個文本。
因此，它基本上只是 文字給我們
比的更多信息 普通的文本呢，好不好？
>> 因此，在這裡這種情況下，這是超文本。
這告訴我們，我們有 一些鏈接，我們要去，
這是cs50.net，這 現在cs50.harvard.edu。
這些幻燈片是一個小老頭。
而且它會顯示 作為此，作為一個超鏈接，
再一個很酷的網站。
>> 所以它的文字，它是一個小 真正酷的東西在裡面一點。
所以，你可以聯繫的東西，你可以 插入圖片，你可以風格的東西。
而最熟悉的東西，你 男人可能有超
是超文本標記語言，HTML， 當然，這是所有網頁的
我們看到我們身邊，授 與拋出一些CSS樣式。
>> 但如果有人是 真正的大與MySpace，
我敢肯定，你使用的所有HTML 所有的時間來打造
這些完美的輪廓，對不對？
我覺得這可能是一個 引用過時了，但不管。
就在little--你們 是不是年輕了許多。
你們當中有些人比我大。
MySpace的仍然是一個 的事情時，我還年輕。
我沒那麼老。
>> 不管怎麼說，HTML超文本的一種形式。
因此，超文本僅僅是 文字添加功能。
這樣的傳輸協議可能是 更玄乎的東西來解釋。
顯然，transfer-- 只是傳輸數據。
因此，無論是客戶端之間，像 您的Web哥哥和一個服務器。
所以基本上只 這樣的網絡作品。
>> 這樣的準確請求 如何將這些工作中，我們
實際上要去看看的 例如請求和響應。
但是，我們如何要求 從一服務器的信息
如何在服務器響應給我們的是 這是什麼傳輸協議管轄。
這樣的請求和響應有 遵循這些特定的規則。
它是標準化的，因此，不管 在那裡你正在使用的網絡連接，
它總是以同樣的好不好？
>> 再次，協議設定的規則。
這只是一個正常的 以同樣的方式相互作用
這馬蘭教授談 如果有人伸出自己的手，
你知道，這是常見的禮貌 達到你出去和他們握手。
這是一個協議，對不對？
>> 所以我給了一些標準化的要求， 這是我想握你的手，
你提供一些標準化 對此，它或者是不，謝謝
或者你可以嘗試動搖我 一方面也許你會嘗試
和拳頭撞了我。
而我們沒有一個協議為該。
它打破了。
但是，如果每個人都遵循 當然，相同的協議，
它會更加完美。
人們去了解對方。
每個人的快樂。
>> 所以在網絡世界中， 每個人都遵循相同的rules--
不是社會標準略勝一籌。
但是，我們來看看 在這裡舉例的請求。
因此，有這個小 這裡的關鍵在底部
告訴你不同的顏色， 他們是怎麼認為的意思。
>> 所以白就像你的方法 要求和協議version--
這樣的方法要求，版本。
然後這是一些 字段名稱和值
這一領域中，我們將 進入非常，非常短。
因此，這是一個例子請求。
這就像我伸出， 想介紹一下我自己。
>> 這是在客戶端 或者你的網絡瀏覽器
將被發送到服務器。
因此，這是一個GET請求，所以它的 要求從服務器的東西。
和它的，當然，HTTP的 而它的1.1版本。
>> 所以這個位置的其他部分就是我們所說的 頭，它的額外信息
這給了我們一個更好的主意 我們實際上是在要求，
或者說我們想要的信息給 這可能是相關的服務器。
因此，用戶代理提供了一些更 說明on--例如，在這裡，
捲曲/ 7.24.0實際上是要告訴 我們使用谷歌服務器
鉻作為我們的瀏覽器。
所以，如果你聽過 關於人誰說話
有關使一個應用程序響應 多個瀏覽器，
這是後話，他們 如果你會因為使用
不知道是什麼瀏覽器 該請求是從哪裡來的，
你無法將數據調整到這一點。
所以在這種情況下，用戶 只是給這種
的識別信息 什麼瀏覽器
您的用戶目前正在使用，好不好？
>> 這樣的話，我們也有許多，這是 其中，我們實際上想要去。
在這種情況下，我們想要去 apple.com，買一些很酷的新的iPad
什麼的，也許可愛 燈光在我們的宿舍裡。
並在最後的名字值只是 填充物，只是一個普通的事
為你們看到的。
它實際上並不 對應於什麼位置。
>> 所以，你可以有盡可能多或盡可能 只要你想在每一種情況下很少。
大多數時候，這些都是可選的。
這只是取決於什麼 您的瀏覽器需要，
從以用戶為 給予適當的請求。
或者，它取決於你的用戶 實際想放棄給服務器。
所以，你可能有很多很多 這些報頭字段名
或者你可能只是有一對夫婦。
由於有這麼多的事情 我說在本節中，
這真的取決於上下文 你正在使用這個方式。
>> 這是否有道理給大家？
這只是一個例子 的請求，報頭，諸如此類的東西。
好了，就這樣，我們有一些反應。
>> 再次，我們有我們的狀態代碼，協議 版本，然後字段名和字段
重視一如既往。
因此，我們的協議版本 而我們的狀態碼為200。
行，這意味著， 是的，一切都很順利。
這裡就是你想要的。
>> 服務器類型，內容 類型 - 它告訴我們，OK，你
會得到一些文本的HTML。
下面是它的長度和這裡的 你應該做的連接。
OK，如此反复，這取決於 在你的數據
要求，這取決於在 服務器要返回給你，
你可能有更多這樣的領域 名字，你可能有少。
完全依賴於上下文的。
>> 而據該狀態 當然，這裡的代碼，
200是不是唯一的一個 你可以有，對不對？
我們有很多的狀態代碼。
有誰還記得任何的 別人認為我們在課堂上提到的？
很多人開始4。
>> 聽眾：404。
>> ALLISON BUCHHOLTZ-AU：404，這是？
>> 聽眾：找不到文件？
>> ALLISON BUCHHOLTZ-AU：未找到文件。
沒錯。
那麼，關於403？
聽眾：故宮。
ALLISON BUCHHOLTZ-AU：紫禁城。
所以，你有什麼感想 這意味著與chmods？
>> 聽眾：這意味著你 沒有權限讀取它。
>> ALLISON BUCHHOLTZ-AU：沒錯。
在某種程度上，你不必 權限來訪問它，對不對？
所以，404，403。
有一個非常有趣的 一個我們永遠
每年推出的 我應該把在這裡，
就像413，這是我一個茶壺。
你可以google一下。
這很有趣，那就是代碼 413和它的我是一個茶壺。
我不知道你為什麼會 在任何時候需要在互聯網上，
但我離題。
聽眾：也許你是一個茶壺。
ALLISON BUCHHOLTZ-AU：也許 該服務器是一個茶壺。
誰知道？
好吧，那麼我們將要 過渡到真正的編碼。
我覺得你們要 離開這裡很快。
>> 聽眾：為什麼這 說“服務器：兩次？
>> ALLISON BUCHHOLTZ-AU：嗯？
服務器的兩倍？
這是一個很好的問題。
我不知道。
我會找出來， 我會向您發送電子郵件所有。
>> OK，除此之外沒有其它問題？
好不好？
涼爽。
>> HTML和CSS，而現在我們 讓所有的有趣的部分。
因此，正如我前面提到的，HTML 大概的事情之一
你們是最熟悉的。
因此，我們有超文本標記語言。
>> 最好的方式來學習this--我不 有準備的幻燈片或任何
為你們使用HTML。
這的的確確是學習語法。
如果你在MySpace上 一天，你會下來。
>> 因此，其實，最重要的事情是 只是練習和實驗。
一個偉大的資源，我會 強烈推薦使用的W3Schools的。
因此，只要W，3，然後學校。
他們有很多的 在HTML資源，對CSS，
自己卻是一個 分屏之類的事情
在那裡，他們會給你的示例代碼。
你可以用它撥弄， 改變它，並按下更新，
它會告訴你什麼 實際上做的網頁。
>> 所以，我強烈建議使用。
這實在是太酷了。
你不會得到賽格故障 在這裡，當事情出錯。
如果你成功地獲得 一個賽格故障使用HTML，
不要讓我知道，因為我 將要真正的興趣。
但它真的很酷，因為 你可以改變的事情，
你可以看到他們的現場更新。
我想你會得到一個更 更直觀地掌握HTML的
如果你真的只花了一些 時間用它進行試驗。
所以這就是為什麼我說， 實踐和實驗。
>> 谷歌，從這裡開始 出，可能會
您的一個最好的資源和朋友。
或Bing--我的工作在微軟， 所以也許我應該說兵。
但是，相當多的東西 只是要成為語法，
因此，了解什麼樣的標籤， understanding--至少與CSS--
如何改變某些屬性。
這將是非常有用的。
>> 因此，即使我們不這樣做 有任何準備的東西，
我們確實有那種的一些最佳實踐 我們希望你們嘗試和遵守
by--或者說，你應該 遵守，直至另行通知。
因此，關閉所有標籤。
希望大家has--你知道嗎， 如果這沒有任何意義，現在，
我保證它才有意義 當我們正在編碼的頁面。
但是，關閉所有標籤。
因此，如果你曾經有一些 報頭的支架，
H1，支架，確保 每當你做完這些，
您關閉這個頭。
驗證與W3驗證頁面。
如果你不關閉你的標籤， 你可以得到意外的行為。
它會說你的網頁是無效的 如果您通過此驗證程序運行。
因此，當在doubt--，尤其是 在本週的和下週的
pset--在我們要求以同樣的方式 您可以使用檢查50和50的風格，
你可以認為這 為您的檢查之一，好不好？
>> 因此，如果它沒有通過W3驗證。
這是我們將停靠你。
或者，我告訴你正確的 現在，我將停靠你。
所以一定要確保它驗證。
它並不難。
你剛才粘貼在你的代碼 它會要么說好工作
或者你錯過 一些以同樣的方式
這種風格50告訴你 在那裡你搞亂了。
>> 然後最後一件事 是你要分開
您的標記，這是所有HTML 或者你的文字和你的造型。
所以，我們要做的一個例子 之後這是正確的。
因此，HTML和CSS應該是分開的。
而我們將要談論 MVC，這是模型視圖控制器，
下週。
你們或許應該 了解，在講座
明天如果你有 現在已經學會了。
>> 而且這只是一種 我們傾向於範例
創建網站時使用 頁面分離出來的東西。
你可以把它以同樣的方式 我們傾向於在C分離功能
我們哈希找東西。
這只是一種方式 讓您的生活更輕鬆。
它分離出來的屬性或代碼， 你會用一遍又一遍，
但在這種方式中，一種 對保持其漂亮和整潔。
如果你想改變 有一件事，你一旦改變它
和它的其他地方改變了。
所以，它更您 緩解和靈活性。
>> 因此，與CSS，這是非常相似的 為HTML格式的，而是標籤
我剛才提到，我們 用什麼叫做選擇。
他們基本上只是一種 關聯的特定標籤
在HTML中具有不同的屬性。
當我說的屬性，我的意思是 之類的東西字體顏色，字體樣式，
背景的顏色， 你的文字的顏色。
這些各種各樣的事情。
如果它像為中心， 如果是關閉的權利，
如果是inverted--所有 這些很酷的事情。
任何風格的東西 你做你的文字，
這就是我的意思是帶屬性。
>> 然後兩個主要的事情知道的是， selectors--兩個主要factors--的
有ID，這是獨一無二的。
您只能使用一件事。
否則，它會衝你大吼大叫。
而當我們把它定義 在一個CSS文件，它會
是散列ID，然後 我們想要的屬性。
我保證我們將 經過一個例子。
這會讓很多更有意義。
>> 類可以指多個塊。
所以，你可以有你的 第一和第三段
具有相同的排序，如果屬性 您將它們與同一類關聯。
而當我們將它們定義 在CSS中，我們做了點類，
與class是什麼 你希望它被命名。
>> 所以，我知道這是正確的 現在很抽象。
這就是為什麼我們要的代碼。
我知道你們愛 這一點，大家都
要幫我，因為 這是您的網頁。
這是我們部分的網頁，伙計們。
所以，在我之前有沒有問題 關閉PowerPoint或任何東西
你要我向後滾動 之前我們開始編碼？
>> 聽眾：當你說比賽的標籤， 你的意思是選擇或標記？
ALLISON BUCHHOLTZ-AU：你可以 認為它們是一回事。
這只是不同的單詞。
我的意思是，像選擇。
但選擇也映射到標籤。
所以，你可以把它們想像成 有效的同樣的事情。
我保證這將使得 當我們的代碼更感。
任何從 PowerPoint中的任何問題或
現在其實我們之前 創建我們的部分的頁面？
大家都準備好了嗎？
涼爽。
>> 所以，我有一個開始。
讓我增加字體為你們。
好了，現在，我們只是有一個 光禿禿的骨頭網頁就在這裡。
>> 我們有一些HTML。
我們有一些標題，這是我們 在這裡看到為例網頁。
一些標題，一些字體。
這些都是標籤，好不好？
所以，當我的意思是關閉的標籤，我們可以看到 在這裡頭支架是你開
標籤，而這個支架 /頭關閉它，好不好？
>> 所以，你可以認為這是 在你的情況，如果你的牙套
或者你的循環。
如果有開頭， 你想要一個在末端。
它仍然可以工作的大部分時間 如果你沒有一個封閉的標籤，
但最好的做法是關閉的標籤。
>> 所以在這種情況下，讓我們來改變這種情況。
我們將有第7。
“部分網頁。”
所以，我只是要改變這一點。
>> 如果我們去了這裡，我們 reload--得保存和reload--
我們在這裡看到，高達 它改變了，對不對？
涼爽。
因此，這將標題。
這是你的卡上的任何的。
>> 因此，這是一種 找那種無聊的。
我不知道的傢伙。
我認為我們想別的東西在這裡。
>> 所以，我們可以做的是 包頭就是那裡。
讓我們做一些身體。
因此，我們在這裡有一些身體。
我總是這樣開放， 關閉我的標籤開始，
以同樣的方式，我做的牙套。
啊。
等等，什麼？
>> 聽眾：[聽不清]。
ALLISON BUCHHOLTZ-AU：嗯。
你們收到了嗎？
好工作。
金名將。
>> 好了，我們有一些身體在這裡。
現在，讓我們開始添加一些文字。
所以，你有幾個不同的 選擇添加文本。
我們喜歡的東西頭。
我們只是普通的文本。
所以，就讓我們先從一個頭。
其實，如果你們想 拉起W3學校的HTML，
有種你可以看看周圍 如果有什麼事，
尤其是你想嘗試 這個網頁，我們可以做到這一點。
因此，在這種情況下，我們只是做一些H1。
所以H1就像是最高的頭。
它會給你的東西 這是非常大的，大膽的。
>> 在這種情況下，什麼做我們想要 對我們的網頁第一個文本？
任何事情。
你們將要創建此。
我只是打字。
聽眾：歡迎。
>> ALLISON BUCHHOLTZ-AU：歡迎。
好了，如果我們將它保存和我們刷新， 我們有一個偉大的熱烈歡迎。
因此，只要這樣你就可以看到 差異，讓我們做一些事情上H6。
我們究竟要在這裡？
對不對？
>> 好了，只是讓你可以 看到的差別。
是的，崇高。
所以，如果你發現，H1，非常，非常大的。
H6一樣大膽，但要小得多， 你有之間的一切。
所以，你可以有H2，H3，H4。
而這些都只是頭， 所以，如果你想
創建一個網頁， 有不同的部分，
也許你想使用 頭在那裡的某個地方。
>> 涼爽。
因此，我們將添加一些更多 事情在我們身上。
我認為，這將是一種 如果我們有一個很酷的圖片。
我覺得每個人都可以使用的可能 一個可愛的小兔子圖片一下吧，
所以我們要找到 兔子圖片第一。
>> 我不知道你們有什麼 喜好哪一個我們想要的。
你有什麼偏好？
這一個在這裡？
下來。
行。
一個是。
不錯的選擇。
>> 好了，我們要查看我們的形象。
你看那個。
看看那個可愛的東西。
你怎麼能難過 在週一與此？
>> 所以我們只是去 複製圖片網址。
我們想要做的是，讓我們只 說我們有一些P的段落。
我們會說：“你看 看著可愛的小兔子。
D'awwww。“
我愛我的小兔子。
我有一隻小兔子在家裡。
我想念我的小兔子。
所以，我們要do--什麼 我不知道，如果你們想
谷歌this--但隨著HTML， 怎麼可能，你有一個形象？
從字面上看，如果谷歌 “包括像HTML”
為什麼你們不告訴我 這是什麼標籤應該是什麼？
>> 聽眾：IMG source--
>> ALLISON BUCHHOLTZ-AU：IMG source--
聽眾：--equals--
ALLISON BUCHHOLTZ-AU：--equals--
聽眾：--quote--啊。
ALLISON BUCHHOLTZ-AU：完美。
可愛的。
見，MySpace的一代，對吧？
聽眾：尼奧。
ALLISON BUCHHOLTZ-AU：尼奧。
哦，好吧。
哇。
它已經瘋了。
行。
>> 所以一定要確保我得到這個權利。
涼爽。
所以這應該是在這裡。
然後如果我們刷新，我們有我們的 兔子在頁面上這不是很可愛嗎？
>> 這是太可愛了。
你選擇了一個偉大的，偉大的照片。
我挖了。
>> 好了，我們有這個可愛的小兔子了。
我們能夠添加 形象，就這樣。
所以基本上，如果有任何影像 要添加到您的網頁，
您可以添加它，就像這樣。
另一件事是，如果 你的圖像存儲
在同一文件夾中 這個文件，你可以
寫圖像的任何名稱 是不是有一個網頁鏈接。
>> 它仍然是在引號中。
它也只是象 如果我們有一個名為this--
如果這幅畫已被保存 這個HTML文件的文件夾中
我正在編輯並 被稱為bunny.jpg。
我們也可以這樣做 它會顯示出來。
不過，我沒有這個保存 的文件，我想保持小兔子，
所以我們要保持聯繫。
>> 聽眾：什麼是rabbit.org？
>> ALLISON BUCHHOLTZ-AU：rabbit.org。
這是一個appropriate-- 看，你可以採納。
收養。
bunny.jpg。
我想收養這個小兔子。
哦，上帝，它是如此的可愛。
>> 好了，我們增加了頭。
我們增加了一個圖片。
很顯然，我們增加 這裡的一些文字，對不對？
如果我們想要添加其他 文本，我們會是這樣的。
因此，這是另一個段落。
>> 我們說：“這是另一段。”
另外，我是一個可怕的拼寫， 所以我可能拼錯的事情。
僅供參考。
>> 因此，我們有另一種 在這裡段落，對不對？
因此，也許你想要做的事 不只是一點點更有趣
把所有的文字，像右對齊。
也許你要居中的文字，好不好？
>> 因此，如果有人想利用這些 在你面前得心應手電腦
並告訴我你是怎麼 要圍繞這個文本，
>> 聽眾：對對齊。
>> ALLISON BUCHHOLTZ-AU：那麼 P對齊等於“​​中心”。
他殺死它，伙計們。
你們都需要加強。
此外，我們還有“這是中心。”
現在我們有一些居中。
>> 以同樣的方式，如果 希望它左對齊，
你可以這樣做等於對齊 左，對齊等於正確。
完全取決於你。
如果我沒有在這裡，那麼這 should--現在它的右對齊。
>> 聽眾：佳佳？
通過圖像源，為什麼不 有接近IMG源？
ALLISON BUCHHOLTZ-AU：對不起。
這應該是 還有現在你是好。
現在，我們是很好的。
聽眾：你不有 關閉它在那裡，還是不？
ALLISON BUCHHOLTZ-AU：嗯，所以IMG 源，這個人是just--與形象，
它只是被視為一個元素，而 如果你注意到了這些剩下的，
我們有一些標籤，然後信息 它涉及到，然後關閉標籤。
但隨著圖像，一切都 只是有點自成一體。
涼爽。
所以，你們知道如何創建一個 頭，你知道如何輸入文本，
你知道如何把一個圖像 在現在，你可以調整的東西。
>> 另一件事，你 可能希望能夠做
是在創建一個列表CS--我們 種進入下週的PSET。
的東西，我們 這一周通常教
去真的很好用 下週的PSET，所以我們
一種混合，在這裡重疊的東西。
不過，這將是下週有用。
>> 因此，如果我們想創造一些 列表中，怎麼可能我們做到這一點？
你不能回答這個問題時。
別人有。
它並不難，伙計們，答應。
谷歌“無序列表的HTML。”
那是什麼？
>> 聽眾：[聽不清]。
ALLISON BUCHHOLTZ-AU：對。
所以我們想有序或無序？
讓我們做一個無序。
因此，我們有一些UL，其中 代表無序列表。
和我們有什麼對每個元素？
是否需要自己的標籤？
我們可以開始寫東西呢？
>> 聽眾：李。
>> ALLISON BUCHHOLTZ-AU：李。
那麼，什麼是我們的名單將是？
我們究竟想在這裡？
我們只是做名字。
只是做雅各布。
>> 聽眾：兔子的食物。
>> ALLISON BUCHHOLTZ-AU：兔子的食物。
好吧，我喜歡這個。
兔子的食物。
>> 好了，我們有胡蘿蔔。
我喜歡這個兔子的主題。
我挖了很多。
聽眾：其實，我覺得 雅各將是合法的。
ALLISON BUCHHOLTZ-AU：雅各布？
雅各布是兔子的食物。
如果你看到了雅各布的 從照片辦公時間，
你可能會以為自己聽錯 一個殺手兔的攻擊。
>> 觀眾：我有一隻兔子了。
我有一個殺手兔子了。
>> ALLISON BUCHHOLTZ-AU： 你在開玩笑吧？
>> 觀眾：我會帶它下一節。
我有它。
>> ALLISON BUCHHOLTZ-AU： 這是荒謬的。
無論如何。
>> 聽眾：[聽不清]
>> 聽眾：是啊，我的監考官 有一隻兔子為好。
>> ALLISON BUCHHOLTZ-AU：我要一隻兔子。
OK，誰帶來了真正的兔子 在下一部分中，總的印象分。
聽眾：[聽不清]
聽眾：哦，這不是真實的。
這是一個毛絨兔子。
>> ALLISON BUCHHOLTZ-AU：呵呵 是的，我們可以關閉這些。
看起來弧度。
聽眾：其實是否重要？
ALLISON BUCHHOLTZ-AU：它沒有。
與大多數的這些東西， 你不關閉的標籤，
99％的時間沒有什麼不好是怎麼回事 發生的，但它是良好的作風了。
於是雅各。
此外，我們還有生菜。
顧客：鏈接， 這真的很重要。
ALLISON BUCHHOLTZ-AU：嗯？
顧客：超鏈接。
ALLISON BUCHHOLTZ-AU：超鏈接。
是的，超鏈接需要它。
OK，讓我們在這裡看到。
和我們有密切的我們的名單中。
我們期待在那。
我們all--雅各，就在那裡。
兔子的食物。
提醒Bunnicula我。
>> 聽眾：[聽不清]
ALLISON BUCHHOLTZ-AU：我帶回 今天所有的老同學參考，
是不是我？
只是所有的老同學參考。
應該把像 Gogurts什麼小吃。
>> 聽眾：還是Gushers。
ALLISON BUCHHOLTZ-AU：哦。
行。
我去看看我能跟踪 下Gushers下週。
我想我能做到這一點。
我想我們可能有 一些在辦公室裡。
>> 好了，我們已經介紹了很多不同的 東西，你可以用HTML做的，對不對？
正如你也許可以看到，它的 nothing--希望，不要太intim--
如果是，我的意思不是 貶低任何人。
如果您遇到問題， 請你跟我說話。
>> 但大部分只是 看語法，對不對？
如果你想要一個無序列表， 如果你想要某種名單，
如果要對齊或東西 形式的東西，它是所有關於剛
那種仰視 語法HTML，對不對？
還有一件事是 其實很酷
就是如果你去to--讓我們來看看， 什麼是一個不錯的網站，我們喜歡？
任何人有任何喜愛的網站 這都OK，彈出在線？
你知道嗎，我們只是做CS50。
這是很好的，安全的，對嗎？
>> 好了，CS50在這裡。
哦，你看，有一個部分現在。
如果你喜歡的方式，它的外觀。
>> 聽眾：[聽不清]。
ALLISON BUCHHOLTZ-AU：我們不是 要做的事情元部分，伙計們。
它沒有發生。
這將是很酷，但 我們不打算這樣做。
>> 那麼，你可以 做，如果你喜歡的方式
這個作品是你能永遠是對的 點擊你喜歡的任何網頁
你可以做的查看頁面源代碼。
它將使所有的HTML。
其實這是一個非常好的 這樣的風格你自己的網頁。
轉到一個網頁，你 真的很喜歡並期待在HTML
並弄清楚他們是如何做到的。
>> 和字面上看，只要 你舉的事情，
只要你不只是 從人偷，它的確定。
尤其是對CS50 [？理財？]，我們
那種期待您獲得 靈感來自於其他網站。
所以隨意。
瀏覽網站 你認為是真的很漂亮
並弄清楚他們如何使用 HTML和CSS做這些事情。
>> 所以，當你看到這裡，有明顯的 類似的聯繫，我們有一個類在這裡。
我們這裡有一個鏈接。
我們有一個列表。
我們可能有一些 在這裡的某個地方的照片。
>> 現在我們得到了一些冷靜的風格。
這是未來的事情 我們要做的。
所以，風格，當你看到這些 風格括號，這是基本的CSS。
奔，你們有問題嗎？
>> 聽眾：什麼是DIV？
>> ALLISON BUCHHOLTZ-AU：DIV 只是A--什麼格？
聽眾：事業部。
ALLISON BUCHHOLTZ-AU：司。
是啊，它就像 分離不同的元件。
好了，這裡就是我們 要進入下一個。
所以這可能不是最佳的 ，風格，因為如果你發現
我們有HTML和風格，在同一頁上， 而我們真正想要分開的，
行？
而實際上，讓我 打開我的正確的
因為這被認為是 PDF格式，所以我們的style.css。
>> 所以，我們可以在這裡做的就是這些 是很酷的事情好像有些褪色
我們可以嘗試這樣做，但我覺得 就像我會陷入困境，截至上飛，
所以我鼓勵你們到 去試試自己找，
但我不會把事情做對了。
所以，如果你們這些傢伙，記住， 如果你打的問題集，
事情從側面猛撲。
它必須做的褪色和 過渡和諸如此類的東西。
>> 聽眾：這就是所有的CSS和HTML？
>> ALLISON BUCHHOLTZ-AU：所有的CSS和HTML。
是啊。
所以，你可以做很多真正的 涼的東西用CSS和HTML。
因此，我們的真棒 這裡的兔子網頁，我們
打算做一點 CSS樣式與它的位。
>> 因此，如果你曾經有一番風情 表，我們這裡有，
你可以打電話的style.css。
任何你想要的，你可以調用它。
最重要的是，我們要去 引用它在我們的web.html這裡。
>> 所以，我們要做的是什麼 we--所以我不惹這個up--
我們要鏈接 這兩個文件一起。
因此，在相同的方式 - 我要去 打個比喻為C這裡。
以同樣的方式，如果你有 一些library--我們有cs50.h--
我們的編譯器鏈接吧。
這僅僅是一個明確的 聯繫我方。
所以在同樣的方式，我們做 哈希包括一些文件，有什麼
我要寫的只是 HTML / CSS等效的那個。
>> 我們只是說，好吧，這個網頁 將使用這個樣式表，好不好？
因此，我們有鏈接REL等於樣式表。
然後我們有型，CSS。
然後HREF等於。
>> 行。
因此，所有在這裡所做的是你可以 認為這是同樣的事情
作為散列包括。
顯然，它看起來多了幾分 複雜，但在所有情況下，
它是有效的同樣的事情。
所以這是一個只是一些鏈接 樣式表，它的類型是text / CSS的，
和它的名字是style.css文件。
>> 什麼是重要的是知道 是該網頁
我正在工作的權利now-- web.html 和style.css--在同一個文件夾中。
因為在不同的文件夾， 你需要給實際的根
它或它的路徑。
但是，在這種情況下，我們保持它 超級簡單，它會到這裡來。
因此，如果我們做到這一點，我有一些 事情已經排隊在這裡。
>> 因此，我們有一些身體，這是怎麼回事 有我們的背景色，這
現在的問題是淡藍色的。
我們可以改變它，如果我們想要的，但 如果我沒有記錯這一點，
它應該只是將其更改為淡藍色。
現在我們有一個淡藍色背景。
我們不得不這裡 - 任何人都可以記住 哪一個是散列ID或類？
>> 聽眾：ID。
>> ALLISON BUCHHOLTZ-AU：ID。
涼爽。
所以我們想要做的 是這些字體
或which--做我們想要的“看看 可愛的兔子“是紫色的？
我認為，我們想要的是紫色的。
我跟那個是紫色​​的漂亮了。
>> 所以你要做的就是你 在此情況下的ID equals--
我說，什麼，漂亮的顏色在這裡。
我們重裝。
突然，它的紫色。
OK，所以用ID，記住 它必須是唯一的，
所以我也不會用 這個ID在其他地方。
但隨著類，因為我們有 這裡有一個漂亮的字體，
我應該能夠使用 無論我想。
>> 因此，讓我們在這裡做這件事。
所以我們可以說類的equals漂亮的字體。
如果我們現在看，我們有 這個很酷很此處字體。
所以，也許我想兩者都做。
好吧，其實我不知道這是不是 去上班，但我想嘗試一下。
這是你如何學習CSS和HTML。
你喜歡，你知道 是什麼，我想試試這個。
我不知道它是否去上班。
讓我們來看看它的工作原理。
>> 而且看那個。
現在是紫色和 這是一個非常字體。
好了，你把所有這些 不同的事情可以做。
你有問題嗎？
>> 聽眾：是的。
好吧，只是喜歡的顏色 你用的詞。
有沒有辦法做到色彩 用十六進制RGB？
ALLISON BUCHHOLTZ-AU：你也可以 這樣做有十六進制，我相信。
是啊。
但它是一種很好的，如果你 不想看他們。
你可以像紫色或藍色。
聽眾：我們希望他們 知道這意味著什麼。
ALLISON BUCHHOLTZ-AU：對。
因此，讓我們使這個讀或黃綠色。
為什麼你會永遠選擇黃綠色？
這是一個有趣的色彩。
>> OK，所以很明顯，我們可以看到我們 可以改變的事情但是我們想要的。
如果你想create--讓我們說 我們要創建另一個類。
什麼可能你們想改變？
如果你拉起W3Schools的 CSS文件，
我離開地板你們。
我們可以嘗試做一些很酷的東西用 這在近一分鐘。
樣的，因為我已​​經給你一個 在很多很酷的事情速成班
你可以做。
但最後，正如我所說，如果你 剛才的實驗中，你會學到很多東西。
>> 聽眾：你有沒有抬頭的字體？
>> ALLISON BUCHHOLTZ-AU：是啊， 我抬起頭的字體。
所以像字面上看，我 去了to--我做了什麼？
我做了CSS字體列表， 然後我做的字體棧，
然後我當時想，你看，這裡 都是很酷的字體，你可以做。
並有這一項，所以 我複製到我的剪貼板。
然後，我很喜歡， OK，性涼，有我們走。
全部完成。
>> 聽眾：所以你必須確保 該CSS知道是什麼字體。
>> ALLISON BUCHHOLTZ-AU：是的。
>> 聽眾：什麼是它在最後說什麼？
草書？
>> ALLISON BUCHHOLTZ-AU：行草。
是啊。
>> 聽眾：背景圖片。
>> ALLISON BUCHHOLTZ-AU：背景圖片。
行。
所以，你要告訴我如何做到這一點。
我離開這個給你。
我只是打字了這裡。
該輪是在你的手中。
>> 聽眾：OK
>> ALLISON BUCHHOLTZ-AU：OK。
我在做什麼？
>> 聽眾：Doing--我知道 談到在大括號之後。
ALLISON BUCHHOLTZ-AU：OK。
所以大概在身，我 會承擔，因為我們
這樣的背景圖像。
>> 聽眾：是啊，讓我們做到這一點。
>> ALLISON BUCHHOLTZ-AU：OK。
聽眾：好了，背景 冒號，然後我們
需要一個圖像的URL地址。
也許偽代碼，就目前而言，也許吧。
>> ALLISON BUCHHOLTZ-AU：是什麼 你想我to--
聽眾：我想就像一個GIF。
ALLISON BUCHHOLTZ-AU：一個GIF？
這將是有趣的。
OK，我在谷歌上搜索嗎？
>> 聽眾：不，那是你的選擇。
>> ALLISON BUCHHOLTZ-AU：為什麼 如果它是一個兔子不we--，
我覺得我們應該有一個 漂亮的草地草坪什麼的。
>> 聽眾：草甸。
草地。
>> ALLISON BUCHHOLTZ-AU：草地？
行。
聽眾：還是雷切爾·瑪多。
ALLISON BUCHHOLTZ-AU： 這個看起來很漂亮。
哦，那是微小的，但。
我們需要一個良好的尺寸的圖像。
讓我們來看看。
哦，你看。
這是一個相當草甸。
你知道嗎，我喜歡這一個。
讓我們複製這一個。
>> 聽眾：OK，所以我認為這是 網址，打開括號。
>> ALLISON BUCHHOLTZ-AU：OK，網址。
>> 聽眾：那地址。
>> ALLISON BUCHHOLTZ-AU：OK。
那是我們所需要的？
>> 聽眾：關閉括號分號， 然後空格，連字符背景
附件結腸固定，大括號。
>> ALLISON BUCHHOLTZ-AU：OK。
讓我們看看是否能工程。
這將是，如果它確實很酷。
我真高興在這裡。
它沒有工作。
我不知道為什麼。
聽眾：也許網址 必須在報價單。
ALLISON BUCHHOLTZ-AU：也許吧。
這就是我們如何學習，伙計們。
>> 聽眾：我們能有背景 顏色和背景圖片？
>> 聽眾：沒有。
一個取代另一個。
>> ALLISON BUCHHOLTZ-AU：我不知道。
讓我們來看看。
讓我們來看看，看看。
>> 聽眾：哦，也許，是的。
[插VOICES]
>> ALLISON BUCHHOLTZ-AU：OK，這是 obviously--我[聽不清]在這裡。
這樣就OK了。
聽眾：背景附件。
ALLISON BUCHHOLTZ-AU：嗯。
>> 聽眾：OK，我不知道。
ALLISON BUCHHOLTZ-AU：它 看起來像它應該工作。
你確定這是結腸癌的網址呢？
>> 聽眾：沒有，它的分號。
ALLISON BUCHHOLTZ-AU：這是分號。
聽眾：我說了結腸？
ALLISON BUCHHOLTZ-AU：你說一個冒號。
聽眾：哦，不。
ALLISON BUCHHOLTZ-AU：你去那裡。
聽眾：哦，等等，現在 我們看不懂的文字。
ALLISON BUCHHOLTZ-AU：現在 你看不懂的文字，
但我們的背景圖像。
Mmhmm​​？
>> 聽眾：請問HTML 支持動態內容？
喜歡，你可以調整大小的圖片 根據窗口大小，
或者是，一個CSS--
>> ALLISON BUCHHOLTZ-AU： 所以，CSS有做到這一點。
所以，如果你們有興趣 在學習先進的CSS，
我合作教 研討會CSS 7日。
我保證它會 要深入得多
和做更多很酷 事情本節。
和我合作的老師就好 總前端Web開發高手。
因此，這將是，如果你想很酷 要了解所有的很酷的事情
該CSS可以做。
>> 但是，我們這裡有 他的背景附件
fixed--所以它的一些固定size-- 但實際上你可以dynamically--
如果你曾經看到的網頁，如 最拿手的網頁會做，
當你調整 您的瀏覽器的大小，
它調整的背景下，有多少 是顯示或重新格式化的東西，對吧？
所以，這就是我們所說的 相對定位。
>> 和CSS實際上可以搶有多大你 瀏覽器寬度或多高是，
你可以放置東西 根據相對尺寸
與絕對大小。
而這顯然是更先進 CSS，但這是你可以做的。
如果您想了解 更多的，來我的研討會。
>> 所以這是你可以做的。
和CSS實際上可以 do-- CSS和JavaScript，
我們將進入下一week-- 可以讓你動態修改
無需頁 重裝他們所有的時間。
你可以做一些 很酷的東西。
>> 那麼，有另一件事 那你們可能想要做
或者任何你想要去探索？
我們還剩下10分鐘。
我們也可以早點離開，但如果 你想要做一些網絡的東西，
我們可以，但我不 要強迫你。
但是，我們也只是吃的糖果。
聽眾：突出顯示文本 白色的，所以你可以讀取它。
ALLISON BUCHHOLTZ-AU：OK。
因此，在這種情況下，我們想要一些頁。
聽眾：我們應該這樣做的 機身使其適用於整個頁面？
ALLISON BUCHHOLTZ-AU： 是的，我們實際上可以。
這是一個好主意。
因此，我們have--你 知道我們應該是什麼？
我不知道，如果我們能做到文本顏色。
我要嘗試 在這裡創建另一個類。
>> 聽眾：你怎麼這麼 它有什麼建議？
ALLISON BUCHHOLTZ-AU：那麼 如果你們有興趣，
這是另一種文本 編輯器叫崇高。
你應該能夠 在設備上安裝它。
有時，它變得有點棘手。
如果你想與幫助， 我超級高興幫您
有了它，因為gedit中是偉大的， 它的真棒，因為你可以編譯
在底部，但我真的 像崇高，因為它很
而且它做的事情 像自動完成。
>> 所以，你絕對可以隨意 讓我知道，如果你想這樣做。
如果你只是谷歌“崇高 文本“，它通常
對如何安裝說明 在各種操作系統上。
這是真的很酷，我 想想，在我看來。
因此P。
我想我可以做text--或 我們可以做的顏色是“白色”。
那裡。
>> 因此，我在這裡做的是我 沒有改變的所有文本。
但是，P在這裡僅僅是一個 標籤，我們有，對不對？
這個段落標記。
所以，我只是創建一個CSS元素 說，OK，這個標籤什麼
P，使顏色變白。
>> 所以，如果你注意到了，這讓 這種白色和這白色的。
這並沒有使我們的名單，因為白 它不是與此有關。
你可以通過，你可以say--
>> 聽眾：你的背景顏色。
>> ALLISON BUCHHOLTZ-AU：背景顏色？
>> 聽眾：背景管 顏色你把p標籤。
>> ALLISON BUCHHOLTZ-AU：OK。
你想要白色的？
聽眾：Mmhmm​​。
ALLISON BUCHHOLTZ-AU：OK。
你去那裡。
聽眾：這是奇怪的。
ALLISON BUCHHOLTZ-AU： 很酷，對吧？
所以，如果你只是浪費時間， 你會學到很多東西。
它可以是很酷。
我認為這是肯定更 可喜有時比
因為你不必等待 為您的程序進行編譯。
你可以打刷新 和你一樣，哦，你看，
它的工作，或哦，我 可能失去了一些東西。
而這東西是真的 酷關於這個類的一個部分，
它是絕對的，我 想想，以便於檢查
你走的路與 不必編寫這些長期計劃
並祝愿祈福 它可以工作在末端。
>> 所以這一說法，我認為 你們似乎都不錯。
如果您有任何疑問，一如既往， 來跟我說話，來讓我知道。
我就在外面 在接下來的15分鐘
如果你想聊 予取予求。
>> 所以，我希望你guys-- 好運與此PSET。
報名截止日期為週五中午 因為天色已晚發布。
所以，我很可能會看到 很多你們在週四，
但是希望不是。
也許你會擁有它了，然後做了。
我是超級驕傲。
>> 但如果沒有，我會看到你週四。
您還可以使用一晚日期，這 它延伸到週六中午。
但我don't--吧？
>> 聽眾：萬聖節。
>> ALLISON BUCHHOLTZ-AU： 這是萬聖節，a和b，
我不認為會有 是辦公時間週五。
所以真的試圖把它用做 週五，以便我們能夠一起慶祝
萬聖節週末。
好吧，我會看到你們下週。