[音樂播放] 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， 我不認為會有 是辦公時間週五。 所以真的試圖把它用做 週五，以便我們能夠一起慶祝 萬聖節週末。 好吧，我會看到你們下週。