>> [音樂播放]
>> 大衛·馬蘭：這是CS50和 這是7週的開始。
因此，歡迎回來。
你可能還記得， 在問題設置四，
有一點尋寶的 對於一些豐富獎品，由此
在恢復的照片 在這裡和在紐黑文的工作人員，
你面臨的挑戰是找到盡可能多的 這些計算機科學家，你可能。
而且我們已經有了一個整體 一堆意見書。
想我會分享一些 你今天在這裡。
>> 我們將發布所有這些網上。
但我特別想 請你注意用於：井一，
山姆是在相當多的人 通常冒充這樣。
但現在看來，作為 今天上午，大獎得主
在某一個叫肯用 工作人員的24相機拍下
或幾個，當你考慮到更多 考慮多個工作人員中的圖片。
圖為肯下一個 瑪麗在紐黑文。
>> 現在，肯，不過，變成 出是一個角落的情況下位
這不是還沒有發生過。
事實證明，它並沒有發生 我把在問題小字
設4，指出員工 不合格的豐富獎品
因為肯，當然，其中一個 我們的工作人員攝影師。
現在，隨著中說，他 最初寫我說的話
請不要在網上發布這些照片。
我認為，這在很大程度上 因為大部分照片
這個攝影師拍了一下 有點這樣的事情。
和類似物。
>> 但肯要我向你保證 他是一個非常好的攝影師，
他是一個專業的，他以 照片是不模糊的，
對焦的更好，他 拿了不少的我們自己的員工。
但是，而不是只承認 肯，我們認為我們會做
是通過列表 誰提交的實際學生。
而事實證明，蘭斯與 15張照片截至今天上午
是我們的贏家。
>> 而圖為蘭斯與科爾頓， 與Skaz，與自己，與山姆。
但後​​來事實證明，作為 上午11點46分，所以只是一點點前，
我回到我的電子郵件，發現 我們還沒有一個更多提交
一個叫邦妮學生 只有這樣的電子郵件中說。
不會說謊，我 在課堂上這樣做。
繼而又附加剛 14張照片，人們害羞蘭斯的15。
>> 但在邦妮的照片，原來 出人多工作人員，山姆
其中，所以我們認為我們 會做的是承認這兩個。
所以除了得到Dropbox的 空間，大家誰參加
接收，這兩部分也將 收到一個不錯的午餐照顧他們
和它們的部分 接下來的一周配合。
所以你會聽到來自美國， 蘭斯和邦妮有關。
這麼大的恭喜他們。
現在，你們誰願意 像午餐更普遍
知道CS50午餐在劍橋 和紐黑文是這個星期五​​。
進入CS50網站斜線RSVP。
而現在在研討會一句話。
更多curricularly。
因此，我們已接近 點學期
在這裡，你應該開始 想著最終的項目。
而事實上，在短短的一點，將 所謂的預提案到期。
所以預提案是為了 是相當低的影響，真的
只是一個機會 您撰寫一個簡短的說明
你的教學同胞去通知 他或她你在想什麼，你
可能要為你的最終項目。
>> 現在，很多學生結束了 這樣做基於網絡的最終項目。
當然，我們只是 現在，上週在該
超越潛入Web編程。
所以，不，如果你擔心 完全不知道怎麼樣
你將建立的想法， 你可能在你的心中。
這真的只是一個強制功能 讓你的思維和說話
你對此TF。
但是，為了幫助你這一點， 與最終的項目最終，
知道CS50有一個傳統 中提供了研討會。
>> 而這些都是可選的，雙手， 或基於機會的演講
了解更多有關的話題 一個小配套的課程的
教學大綱，但仍然精彩 料開車決賽項目。
所以這是列表的 在這裡紐黑文CS50的工作人員
紛紛拿出了 今年有關的iOS
編程，機器人 編程，遊戲開發，
更多的工具和串 與語言和技術。
>> 因此，保持眼睛的CS50的網站。
而在此期間，如果你想 在任何這些註冊您的利益，
去CS50的斜線寄存器。
我們將隨後跟進的 天，飛行時間和地點
和一切 - 最一切都會 流式傳輸，也可根據需求
之後，如果你不能真正做到這一點。
因此，事不宜遲，我們 不放過最後一次與GET。
>> 這就像是這樣的消息 虛擬信封中，回憶，
我們從路由器傳送到路由器 Web瀏覽器和網絡之間的路由器
服務器。
這消息看起來 有點這樣的事情。
這是更神秘的消息， 實際上是一個信封中
寫在一張紙上，其 第一行說，從字面上看，得到的斜線。
>> 而只是作為一個全面的檢查， 沒有斜杠什麼表示？
這是什麼意思斜線時， 請求網站？
你要求它所有的時間。
幾乎任何時候你訪問一個網站，你 實際上不鍵入文件名。
你可能只要到Facebook.com， 輸入，gmail.com，或類似物。
又是什麼斜線代表什麼？
是什麼文件？
還是什麼頁面，具體一點嗎？
>> 該指數是啊。
所以默認頁。
所以，如果你不指定文件 名字作為我們就可以看到，
你實際上只是請求 給我的Facebook的默認頁面
或者給我我的收件箱或提供 我的消息的默認頁面
在CNN的網站等。
和服務器然後響應 有一些消息
像這樣的，他說是的，我 說HTTP 1.1版。
>> 200，它是一個狀態 我們人類很少代碼
看到過，因為這是很好的。
因為這意味著OK，請求 已接收並妥善處理。
與內容類型 顯然在響應
相當經常，但不總是，文本。
具體而言，HTML。
而這實際上是 我們看今天。
>> 所以，事實上，我要去 進取，不斷開拓的瀏覽器。
我將使用Chrome瀏覽器，你可以使用 幾乎所有的瀏覽器在今後幾個星期。
我們一般建議Chrome瀏覽器 因為它是特別
良好的軟件開發人員。
它有很多內置的 工具，使人們更容易
不僅要制定HTML和CSS， 事情我們就開始談論今天，
但也有其他語言。
>> 而且我要繼續前進，去用於： 我要控制或右鍵
點擊網頁上的任何地方。
而且我會去檢查元素。
而且我會調整我 屏幕只是一點點在這裡一點。
讓我搬這個底部。
原來這就是被稱為 Chrome的檢查。
因此，這就像一個調試 工具內置於Chrome瀏覽器。
>> 所有你已經有了這個 如果你使用Chrome已經。
它可以讓你看到是怎麼回事 一些網頁的罩的下方。
因此，讓我們真正需要 看看這個如下。
它的方式更多的功能 而大家關心的今天。
但是有這些標籤在這裡。
元素，網絡，資源， 時間線，和一些其他的東西。
我要點擊 網絡了一會兒。
>> 這是一個有點勢不可擋 在這裡乍看之下。
但是我什麼都做的是讓 我簡化它一點點。
我要打開 記錄光，這樣它是紅色。
而我要說保存日誌。
而這僅僅是一點點 的事情，我想通了
隨著時間的推移，那將節省 一切發生在瀏覽器中。
現在我要去 到http://facebook.com。
>> 其實，讓我們做WWW 良好的措施，大幅削減。
輸入。
因此，一個URL許多與 你可能已經訪問過。
現在，Facebook的網頁 頁面出現在頂部。
然後一大堆 東西飛過底部。
而事實上，事實證明， 當您訪問Facebook.com，
你不只是使一個HTTP請求， 事實證明，要Facebook.com
送41的信封， 每個都有自己的get請求，
所示，雖然在屏幕背後 這裡，在屏幕的底部，
它表明，事實上，我 瀏覽器41作出的請求。
>> 及在總，它傳送861 千字節，並花了因某種原因
多達八個秒 下載了這一切。
所以這實際上是一個有點怪異 Facebook的網站將採取
長，但也只能如此在這種情況下。
現在，這一切我真的不關心 有關除了最上面的請求。
因此，讓我們去這一個就在這裡 讓我縮小只是一瞬間。
>> 讓我放大這一點。
因此，我在左邊，即使已經做了 有很多在這裡怎麼回事
是我突出 Facebook.com然後
請注意，我向下滾動， 向下滾動，向下滾動，
請求頭。
你會看到Chrome的顯示 我基本上內內容
請求我做了。
這不是格式完全一樣 方式，但要注意有提得到，
請注意，其中提到的主持人， Facebook.com，路徑，或斜線，
這就是我所要求的文件。
>> 然後，如果我滾動 備份，我們實際上
看到什麼Facebook的返回 對我來說，所有這些頭。
因此，虛擬信封中 的確有很多鍵值對。
一個字，一個冒號，然後是值。
一個字，一個冒號和一個值。
這些都是所謂的頭。
還有的方法更詳細，這裡比 我們真正關心現在。
>> 但是，這是第二次到 最後一次出現了下滑，
請注意，這Facebook.com的服務器， 這裡的確是說來一些文本的HTML。
所以，這一切是說 當你請求一個網頁的
從一個瀏覽器向一個頁 服務器，該服務器響應
與自己的包絡線 其內部是文本。
換句話說，HTML。
超文本標記語言。
這是另一種語言 今天我們介紹
人類或計算機生成 為了實現網頁。
>> 具體來說，讓我們來看看這個。
我打算現在回去 Facebook的網站。
而我要去剛 控制或右擊
並點擊查看頁面源代碼。
而且，即使你不使用Chrome， IE瀏覽器可以做到這一點，火狐可以做到這一點，
Safari瀏覽器可以做到這一點，即使菜單 選項可能看起來有點不同。
這是HTML的馬克和 公司在Facebook的采寫。
>> 而集體，這種語言在這裡 實現了藍色和白色的頁面
我們剛才看到的。
現在，這是一個有點勢不可擋。
但是，如果我們仰望左上角，我們 將開始看到一些模式。
它看起來像有很多 這些開放的角度支架
然後有這個關鍵字的HTML。
這裡的另一個開放 尖括號和頭部。
>> 在這裡，如果我們向下滾動 上下上下，我
要繼續前進，並嘗試 要尋找的東西。
有辦法在右側 這裡是開放式支架體。
而從過去的回憶 我們提出的時間
最簡單的網頁 一個人可以寫
看起來有點像這樣。
打開HTML標記，開目 標籤，打開標題標籤，
然後關閉標題，閉頭，開 身體標記，一些文本，封閉體，
封閉的HTML。
>> 但暫停這裡只是一瞬間。
此代碼，即使你 以前從來沒有寫過這
但還是不太明白 這是怎麼回事，看起來還不錯。
沒錯，這是非常乾淨的。
這是非常不錯的文體。
很多縮進和空白的。
Facebook的不是。
那麼，為什麼是Facebook的這麼多 比我差在寫HTML？
顯然。
>> 對，這好像人 出五項風格。
有一個令人信服的理由 他們削減這些角落。
好了，所以他們不希望 讓您更容易閱讀。
因此，在某種意義上說，他們是 之類的模糊處理它，爭先恐後它
至少美學等等 這是MySpace的困難
去撕掉他們的 網頁和HTML它。
事實證明，使用程序 不過，包括瀏覽器，
我們可以很容易的超清潔本了。
因此，它不是想像中的那麼的緣故。
還有什麼可能是原因。
是啊。
是啊，白色的空間成本數據。
你是什​​麼意思？
是的，沒錯。
如果你打的Tab鍵大量或 空格鍵，可以考慮的影響。
所以，你的鍵盤上的每個按鍵是一個 [聽不清]表示作為一字節。
>> 因此，假設馬克或任何開發者的 這幾天打空格鍵只有一次
在這個HTML頁 代表Facebook的主頁。
而Facebook有很多 用戶的這些日子。
因此，假設Facebook的主頁 由十億人今天被訪問。
而有人在Facebook有 按空格鍵一次。
>> 因此，一個額外的字節， 一個十億的請求，
多少數據是Facebook的 傳送通過互聯網
因為有人打 空格鍵他或她的鍵盤上？
十億字節，或一千兆字節 數據正在從Facebook的服務器發送
周圍的人 世界上沒有很好的理由。
現在，這只是一個空格。
>> 試想一下，如果我們真的擦拭本 事情並縮進，並添加
大量的白色空間， 製表符和空格，
你最終消費千兆字節， 如果不是千佛字節更多的空間。
而在這樣的超級共同 Web開發的現實世界
是中縮小你的代碼。
我們最終會看到 你怎麼可能做到這一點。
>> 但今天，我們就開始編寫代碼 這是由我們人類真正可讀。
事實證明，不過，如果你回去 在Chrome瀏覽器這一工具檢查元素，
以前，我們的網絡選項卡上。
事實證明，如果你去了 元素標籤，你實際看到
是Chrome的漂亮的印刷 版本相同的HTML。
因此，我們反混淆了。
因此，它是敵不過一台電腦。
現在你可以實際 按一下周圍，並開始
看層次結構是一個網頁。
因此，讓我們真正做到這一點。
我要繼續前進，在開拓 我的Mac一個名為文本編輯程序。
和召回，這只是 一個超級簡單的文本方案。
Windows有NOTEPAD.EXE。
而且我要一字不差 鍵入以下命令。
文檔類型的HTML，開放式支架 HTML，封閉支架HTML，
我們有頁的頭部這裡， 頁的頭部這裡結束時，
標題會是怎樣，世界你好。
>> 然後到這裡，我們需要 該網頁的身體。
收身。
然後在這裡，世界你好。
好的。
因此，我們已經寫了一個超快速的網頁。
我將其保存為 hello.html的我的桌面上。
我的Mac的去抱怨， 認為，等一下，
這是一個文本文件，這樣做 你怎麼稱呼它.TXT？
但是，沒有，我想用點HTML。
>> 然後，什麼是好，如果我 只需雙擊該文件，
hello.html的，這裡是我的網頁。
不幸的是，我是 只有人在世界
現在誰可以訪問這個頁面。
由於它在哪裡生活明顯？
這是在我的Mac上，對不對？
這是沒用的。
就像沒有人在這個房間 更何況在互聯網上
實際上可以訪問該網頁。
所以今天，我們需要 引入另一個元素。
>> 而要做到這一點，我要去 去進取，不斷開拓雲9。
所以，雲9當然是一個 基於雲的service-- CS50
IDE--那有我們所有的工作區 某處的互聯網上運行。
這意味著我們所有的文件 公眾開放了。
因此，讓我們繼續前進，做到這一點。
我要繼續前進， 創建一個新的文件NCS50IDE。
我將其保存為前 為hello.html的，然後點擊保存。
而現在只是為了節省時間，我要去 繼續前進，複製粘貼此代碼
而不是重新輸入。
並保存它。
所以現在我有一個 文件名為hello.html的。
但我怎麼竟 打開它作為一個網頁？
哦，原來出內置到CS50 IDE不僅是一個編譯器像鐺
而像GDB調試器和 其他方案的束，
實際上有一個完全成熟 Web服務器CS50 IDE中運行。
>> 在座的各位，也就是說， 擁有自己的Web服務器。
和Web服務器只是一塊 其目的在生活的軟件
是來提供網頁。
要收聽來自瀏覽器的請求和 很少有虛擬信封回應
裡面，其中是 我寫的內容。
所以這個Web服務器 實際上自由和開放源碼。
凡開源只是手段 軟件別人有
撰文指出，我們都可以 真正看到和下載，甚至
改變的源代碼。
而這就是所謂的Apache。
>> 我們找到了一個比較容易 通過調用它的Apache 50 CS50IDE使用。
因此，它實際上可以 了解以下。
我要說的Apache 50開始。
然後，我只是說了點。
我們看到一些稍微 神秘的消息，
設置Apache的文件[？組？] 家，Ubuntu的，不管它是什麼，
大幅削減工作區。
啟動Web服務器 Apache的成功2。
>> 所以長話短說，我 剛剛推了按鈕
並把Web服務器誰是現在 監聽TCP端口在互聯網上
80，在一個特定的地址。
它說，在這裡， 此功能的方法改變
您的用戶名和其他因素的影響， 但要注意，現在如果我點擊這個，
IDE50點jharvard等和 因此，請注意，這段時間
在過去的幾 週，你可能有
發現自己的用戶名 埋設在右上角
角落CS50IDE的。
>> 而這實際上已經這一切 時間地址您可以在哪些
通過Web訪問您的所有文件。
到現在為止，還沒有要緊， 因為在C，你一般
要在運行中的事 終端，而不是在網絡上。
但是今天，我們開始 編寫基於Web的代碼
我們確實希望 在訪問公開網址。
那麼，我要 要做的就是點擊這個網址。
>> 而且請注意，我看到一個相當 醜陋的索引，目錄列表，
但什麼文件跳出你可能？
的Hello.html。
那是因為我救了 在我的工作空間中的文件。
而我已經告訴了Apache Web服務器 是看在大衛的工作空間目錄。
而讓任何人在 世界看到這些文件。
>> 事實上，如果我現在 點擊hello.html的，
我這個標籤正是文件中看到。
現在請注意，雲9所做的， 東西我們一點幫助。
在CS50 IDE中，注意有 突然一個地址欄。
這是因為，即使我們是 使用Chrome訪問CS50IDE，
CS50IDE的內部是它自己的 版本網絡瀏覽器的現在。
因此，而不是 複雜的事情是這樣的，
我要繼續前進 而只是複製此網址。
我要繼續前進，只是 打開我自己的Chrome瀏覽器窗口。
因此，有沒有魔法在這裡，沒有CS50IDE。
我只是從字面上貼 我Ĵ哈佛的URL，然後按Enter。
瞧，現在我和 從理論上講，每個人都
在互聯網上，如果我配置 適當的權限，
可以訪問此文件。
所以現在，如果我說 hello.html的，瞧，有
我難以置信的深刻印象網頁。
因此，讓我們做一個快速的完整性檢查。
因為所有這一切 是概念上的設置。
而我們實際上已經不是真的 教你如何寫HTML本身。
因此，任何問題遠 什麼只是發生了什麼？
是。
請問CS50擁有這些網頁？
在什麼意義？
好問題。
因此，CS50的擁有CS50.io.
我們的確買了該域名。
並通過你們的性質 登錄CS50IDE，
你們得到了什麼叫做一個子域。
>> 所以IDE50-馬蘭，或IDE50-Rob.CS50.io， 這是在你的唯一地址
我們的域名。
因此對於過程的目的， 你有自己唯一的地址。
但我們通過簡單的事情 購買頂級域名，CS50點
I / O，然後其他人都 那裡面，可以這麼說。
我們會回來的 在幾個星期的可能，
尤其是在最後的項目 一次，當你們中的一些
可能希望讓自己的域名。
這確實比較 簡單。
好的。
現在讓我們做到這一點。
我要去回 CS50IDE，在我的文件，現在，
hello.html的，是不是所有的有趣。
我想要做的事情 比更好一點。
所以我會做這樣的事情。
讓我開paragraphs.html。
所以這是一個文件，我事先寫道。
在它的頂部，就像 以往，我們有意見。
但在HTML，評論 看起來有些不同。
在三線和14號線，你 看到語法開始評論
和結束註釋。
>> 但是，在沒有任何的東西 在功能方面之間。
這只是一個音符到 人類什麼是怎麼回事。
而只是作為一個快速的理智 檢查時，如果我向下滾動，
有什麼明顯的新 標籤，我們已經出台？
到目前為止，我們已經看到了這種標籤是開放的 支架HTML，頭，標題和正文。
但顯然現在新？
>> 是啊，所以頁。
p標籤或段落標記。
然後，我只是借用了一些默認 拉丁文字構成我的段落。
因為我想 證明你是怎麼可能
代表HTML文本的段落。
所以什麼開始出現 這裡要說的是有已經
一個模式發展。
讓我繼續前進，做到這一點。
首先，我關掉了Apache。
而且我要告訴它自行啟動 再次內今天的源7
米目錄。
所以，我有機會獲得的一切。
>> 而現在，如果我回去 此目錄列表，
請注意，我看到今天的每一個文件。
你會在看 下一個問題集，我們將
給你指示 這樣做正是這一點。
如果我打開paragraphs.html，這可能 還有看起來像一個編程語言
給你，如果你不說或讀拉丁文。
但是，這只是三段 文本的標記在HTML中。
>> 並注意段落 它們之間的休息時間。
因為事實證明， 而即使你
可能傾向於做到這一點， 而在現實世界中，
如果你想要把線 事物之間的休息時間，
你可能很簡單 做到這一點，最後點擊保存。
而現在，如果我重裝這裡，通知 這一切都只是模糊起來
在短短的一個BLOB文本。
因為HTML是個不會說話的語言。
>> 它是指在這樣的使用 一種方式，瀏覽器將只
做明確你告訴它做。
所以，如果你不告訴它 給我一個新的段落，
你不會看到一個新的段落。
而事實上，有什麼 瀏覽器會做
甚至，如果你敲回車， 讓我們一次又一次地說，
並再次，移動該文本方式 倒在屏幕上，然後保存
然後重新加載，瀏覽器是怎麼回事 折疊所有這一切空白
成只是一個單一的，可見的空白。
好的。
所以這是段落標記。
所以什麼模式 這正在開發嗎？
好了，這似乎是這樣的情況 HTML是所有關於啟動標籤
和結束標記。
什麼是標籤？
那麼，它的語法只是一大塊。
打開托架，一個關鍵字， 封閉的支架，是一種標記。
或者開始標記。
然後當你 做了表達自己，
在你與段落做， 你可以這麼說相反。
但相反的是不完全倒退。
>> 您只需前綴相同標籤的 名正斜杠是這樣的。
好的。
所以，不是所有的精彩。
而事實上，我們並沒有使 網站所有的更有趣。
如果我想要什麼 事情越做越大膽？
因此，原來這裡是一個例子 在headings.html，凡在我的身上，
我有一個H1標籤，H2，H3， 四個，五個，或六個，所有這些都
似乎很神秘。
但是，如果我去開這個 例如，讓我們一起來看看。
Headings.html。
>> 因此，瀏覽器在默認情況下可以給你短信 這是大和大膽的不同尺寸。
H1大。
H6較小，然後 一切在兩者之間。
所以這是有趣的，但仍 沒有真正的網絡，我知道。
如果我們想要我有什麼 像的列表。 。
所以這裡有一個項目符號列表 3哈佛大學的房子。
>> 你是如何去這樣做？
好了，看看list.html。
在這裡，我們看到了一個 funkiness點點
但讓​​我們來考慮發生了什麼。
因此，基於你所看到的， UL表示無序列表。
無序列表只是意味著項目符號。
有沒有數字。
還有一種叫做 有序列表，這是一個在OL標籤。
然後李，列表項都是這個意思。
>> 並自動所以它 號碼為你的一切。
但同樣，我所有的壓痕 和空白只是為了我的緣故。
瀏覽器的不 究竟要關心。
因此，即使你不能 做到這一點，僅僅是明確的，
你不應該，即使 瀏覽器仍然會
能理解就好了。
我打重裝我 瀏覽器，我點擊刷新
沒有正在發生變化 因為瀏覽器仍
在做什麼，我告訴它做的事。
>> 好的。
因此，這一切都只是文字。
現在，讓我們做一些更有趣。
我要繼續前進， 借用一些這樣的HTML。
我要繼續前進， 在這裡創建一個新的文件。
我們會打電話給這個rick.html。
我們有不成比例 用過的東西
叫里克卷本 今年課，我不知道，
它只是發生有機。
>> 現在它的失控。
所以，我只是去用它。
如果我去谷歌 圖像和里克·阿斯特利。
如果你不知道我們為什麼做 這一點，只是讀了維基百科。
你點擊鏈接時，都會 有人一直在笑的地方。
而讓我去ahead--有 我們走了，讓我們來查看此圖像。
>> 所以在這裡我們有一個 圖像在谷歌圖片。
而且，我們認為，這是 合理無處不在互聯網上。
所以我要承擔它的確定對我來說 真正把我的網頁這一點。
我要繼續前進 和複製圖片地址。
而現在，如果我回去雲 9，讓我們來看看有什麼我可以在這裡做。
因此，這裡只是一個網頁。
這是里克·阿斯特利，哈哈， 我打算現在回去
到我的瀏覽器，重新加載，和有趣。
>> 瑞克在哪兒？
因此，讓我看看發生了什麼事。
其實，我要去 假裝我並沒有這樣做。
[聽不清]把他放在這裡。
我們會回來的，在一個瞬間。
因此，這裡的rick.html。
所以，這不是里克·阿斯特利。
所以，事實證明，我們可以 居然把他加在了這裡。
這是里克·阿斯特利。
我會說給我一個圖像，其 源是我剛才複製的URL，這
顯然是幸福的 生日或其他東西。
>> 現在我要去 關閉這樣的標籤。
因此，這是包裝超長。
但是請注意，我的一切。 做的是開放式支架的形象，
源與一個這樣的屬性。
這是一個很長的URL。
並且在最後，注意到這一點。
為什麼我做了斜線角度的支架 而不是，像所有其他標記，
具有開放的支架， IMG，封閉支架？
只要採取一種猜測，即使你 不熟悉任何
與HTML之前。
>> 因此，它是如何關閉 命令，但為什麼
它沒有真正直觀 踏踏實實做的東西多一點
長篇大論喜歡接近的形象？
是啊。
就在語義上，有沒有感覺 起始圖像和結束的圖像，
它要么存在或不是。
所以，它沒有任何意義，留下一個缺口 為別的圖像的內部。
你不能做到這一點。
這樣一來，語法 就一般只是
做正斜杠內 打開標籤或開始標記
然後打保存。
>> 所以，如果我現在重新加載該文件，現在 我有一個好的網頁烹飪這裡。
我們可以肯定 真的惹惱人
通過嵌入代替 像一個YouTube鏈接。
而事實上，任何時候 你曾經去到YouTube，
讓我真正意外 里克推出自己在這裡。
所以里克輥。
所以里克roll--我要去這裡。
>> [音樂播放]
>> OK，一個人喜歡的。
所以，注意這一切的時候，如果你 點擊分享鏈接，你當然
獲取URL，你實際上可以 嵌入到電子郵件或法醫形象
或在習題集或幻燈片。
而現在，如果我不是點擊嵌入， 請注意，這一切的時候，這東西
一直存在。
我要繼續前進並複製本。
>> 而只是讓我們可以更好地看到它，我 將其粘貼到我的文本編輯器。
請注意，這是什麼 YouTube上已經告訴你了。
您訪問一個每次 的YouTube視頻，如果你
要嵌入的視頻你 網頁，只需抓住這一點。
因此，這是另一種 HTML標記所謂的iframe。
或在線框。
因此，它也看起來有點多 比其他複雜。
所以，事實證明，圖像 標籤和明顯的iframe標籤
採取所謂的屬性。
>> 這是另一種 一塊語法的HTML。
除了標記的 名，開括號標記名稱，
你可以控制標籤的行為 通過有一大堆屬性
等於價值。
屬性等於值。
因此，例如， YouTube正在告訴我們
如果你想這個視頻的寬度 為420像素，高度
是315像素，這是 如何在HTML中表達出來。
>> 視頻的源會 要那麼久YouTube網址
然後一些其他的東西 像框線為零，
所以這可能意味著有 周圍的東西沒有邊框。
可能允許全屏 意味著用戶
可以點擊一個按鈕， 實際上全屏視頻。
所以，如果我真的想成為 在里克點HTML令人印象深刻的這裡，
而不是使用的圖像標籤，讓 我刪除，而不是粘貼。
現在重裝。
現在又來了。
好了，這就足夠了。
好吧，所以我會盡力 很難不再次做到這一點。
那麼，這裡的一些外賣的？
所以HTML，醜如這些網頁 是，其實很簡單。
這是不是一種編程語言。
它不具有的功能。
它沒有環路。
它沒有條件。
它所擁有的幾十個 不同的標記，其中每一個
具有零個或多個屬性。
而事實上，有什麼好玩的約 HTML作為你開始潛入
是，這是很自我受教。
>> 它所需要的是理解 對HTML的總體框架。
什麼是標記，是什麼屬性， 您怎樣配置一個網頁
如下。
和其他一切是真的結果 尋找在網上參考
或者谷歌搜索如何做一些 技術或如我們所看到的，
看著Facebook的源 碼，看一個網站
你喜歡在它的源代碼， 了解如何開發有
實際佈設的東西出來。
>> 因此，我們可以做的影像。
而事實上，我們剛才做的。
讓我繼續前進，只是告訴你。
下面是一些示例代碼。
如果你想看到不爽貓。
所以請注意，我可以 這裡有一個形象的標籤。
而且我知道了以上評論。
我有一個替代 文字無障礙。
因此，有人誰是使用屏幕 讀者視線的原因
實際上然後有自己的 屏幕閱讀器說，脾氣暴躁的貓。
因為如果他們不能 看到的圖像，它們
至少可以有自己的電腦 告訴他們口頭上它是什麼。
與該文件的來源是cat.jpeg。
所以，事實上，如果我真的想 弄巧，我能有done--
我答應不要去里克·阿斯特利，所以 我要去，而不是谷歌的一隻貓。
如果我去谷歌圖片 在這裡，我們假設
這是我的貓的照片。
>> 假設我有控制點擊 或者右鍵點擊這個，不小心
讓人毛骨悚然。
而cat.jpeg我要去 救我的桌面上。
現在讓我回去雲9。
請注意，在這裡，我可以 到本地的文件上傳。
如果我抓住這個 文件cat.jpeg，通知
我可以拖動它， 把它放到雲9
並且它會在我在這裡嚷嚷。
>> 因為我們已把 給你一個cat.jpeg文件，
但它的超級容易 搶出你那照片
從Facebook採取 或Flickr或類似
居然將其拖放 進入雲9，然後使它
您自己的個人部分 網站或問題
設置七八個，因為我們很快就會看到。
然後當你 最後參觀的貓，
假設我下載的貓一樣， 通知that--這是可愛的。
>> 什麼，你會看到的是 像這樣的臉在這裡。
因此，文件，您 在網頁內的參考
可以是本地在你自己 帳戶或遠程其他服務器上
如在瑞克的情況下 Astley的照片一點點前。
那麼，else--什麼 還能做嗎？
因此，讓我們來看看下面的內容。
你知道什麼樣的涼爽？
>> 我們迄今已使 非常靜態的網頁。
我想如下香料的東西。
我想我自己的搜索引擎。
因此，為了使搜索引擎，讓我們 繼續前進，開始這樣做。
我要繼續前進，創造 一個新的文件名為search.html。
我們已經在網上prefabed版本。
哎呦。
不要粘貼到你的終端窗口。
預製版本在線。
而且我要開始如下。
所以這裡的開始 一個名為search.html。
我將它保存在 今天的源目錄。
我要稱之為搜索。
事實上，我們會做的更好。
CS50搜索，實際上品牌吧。
而現在，我要說的話 像H1 CS50搜索。
再往下這裡，H2即將上市。
而只是為了回顧一下，H1和 H2分別指什麼？
>> 是啊，這麼大，大膽，和 不一樣大，但仍大膽。
所以，如果我保存這個走在這裡， 讓我們來看看該文件search.html。
好了，而這一次 是right-- [聽不清]。
待機。
大衛是困惑。
哦，它就在那裡。
大衛是個白痴。
確定。
所以它是。
因此，CS50搜索即將推出。
所以，現在，讓我們來合成 我們上週做了。
>> 當我們談到了 HTTP水平較低機制。
而這些新的想法 HTML中，這僅僅是
這個標記語言，你 告訴瀏覽器該怎麼做
並實現我們自己的搜索引擎。
因此，而不是僅僅 他說快到了，我
要介紹 一些所謂的表單標籤。
而在這種形式下，我要去 有類似的輸入字段。
>> 與此輸入的名稱 現場，我打算把它稱為Q.
而這種輸入字段的類型 我想說的只是“文字”。
和文本字段，如我們 看，只是一個文本框。
所以它不會感覺到這裡有 它裡面任何東西在這一點上。
所以我只是去 關閉與該標籤
斜線右邊的標籤本身。
然後我要去 有一個其它的輸入。
輸入類型等於提交。
然後我要去 關閉這一個了。
>> 現在我要去回到這裡。
而且我們已經看到， 雖然很醜陋，我已經
得到的開端 在這裡我自己的搜索頁面。
事實上，讓我嘗試 打掃一下一點點​​。
事實證明，在 輸入在這裡，我可以有
所謂的佔位符其他屬性。
我可能會看到類似的關鍵詞， 或更具體地，查詢對於q。
>> 同時注意，現在，我有 這種灰色的文字
即消失， 一旦我開始打字，
但它可能是什麼 你見過在其他網頁。
我真的不喜歡提交按鈕。
所以，實際上，我給 提交按鈕搜索的值。
而現在，如果我重新加載，請注意 我的按鈕將變為命名的搜索。
你知道，我真的不 喜歡這裡的標誌。
因此，谷歌字體生成。
>> 我想進一步調劑這件事。
因此，CS50搜索。
讓我創造我自己的標誌。
這看起來不錯。
所以，現在讓我保存這個as--來吧。
它在哪裡去？
有。
確定。
錯過了。
另存為。
愚蠢的瀏覽器。
待機，我們要 解決這個問題一勞永逸。
在那裡，我們走了。
好的。
抱歉。
關閉一天。
現在，這是時髦的。
退出全屏。
好的。
>> 現在，像一個正常 人，保存圖像。
Logo.gif。
現在，我要進入CS50IDE和 我要簡單地抓取標誌，
我打算把它拖到 我的消息來源7目錄，
文件已經存在，我與該確定。
所以我要重寫它 因為我已經辦完了。
現在我該如何擺脫呢？
>> 讓我們繼續在這裡做 圖片來源等於logo.gif。
關閉這一點。
保存。
而現在，如果我回到我的搜索 頁面，現在它看起來相當不錯。
好吧，所以它沒有 完全完成任何用處。
事實上，讓我試試搜索 一隻貓，看看會發生什麼。
貓。
該死。
它不只是工作，顯然。
那麼什麼是關鍵棋子 唯一缺少的嗎？
>> 對了，即使你不知道任何HTML， 我已經開始打了電話形式
我已經告訴它怎麼去投入， 給我一個文本框和一個提交按鈕，
哪塊顯然缺少什麼？
假設我們要真正得到 這個東西正常工作。
什麼是我們需要做什麼？
我們有必要實行後端 數據庫或搜索引擎本身，
而這將需要一段 一大堆的時間，坦率地說。
>> 所以請記住我們所做的最後一次。
所以，如果你搜索的東西在谷歌 並且您已經提前關閉，
召回，即時搜索。
因此，讓我把它們關掉 因此，這實際上是
行為就像一個老派的瀏覽器， 如果我現在要查找類似貓科動物，
回憶一下網址樣子。
這是非常神秘的。
但是嵌入在裡面， 召回，是斜線搜索。
問號Q等於貓。
>> 這似乎給我 一大堆的搜索結果。
所以，你知道我該怎麼辦？
我要借錢 谷歌只是一分鐘。
我要去了 在這裡，我要說
這一形式的行動，或 目的地，可以這麼說，
應該從字面上是谷歌。
而法，我想 要使用將是獲得。
>> 那麼，什麼是行動？
動作古怪命名， 但是這只是意味著
誰去處理 這種形式的行動？
當我點擊搜索，在那裡 應結果去了？
如果我現在回到我的表 這裡刷新我的網頁
現在搜索的東西 喜歡狗，現在通知
我已經重新實現谷歌。
對嗎？
>> 如果我要尋找的東西 否則，它適用於不只是狗，
它也適用於貓。
這也適用於CS50。
和OK，這只是 在空前的，是不是？
好吧，但它的實際工作。
那麼，實際上已經持續？
所以，我教我的瀏覽器，使用 的HTML，採取從用戶輸入
實際上發送輸入 到遠程服務器使用HTTP。
>> 而由於我的瀏覽器 理解HTTP，它實際上
構造URL，這樣什麼 我結束了在我的瀏覽器，
注意到發生了什麼 當我搜索犬。
如果我點擊搜索，請注意 網址改變，因為我打算
以google.com/search~~V查詢等於狗。
這是因為形式 知道，因為該方法得到的，
簡單地把它添加到URL存在。
>> 現在，這些網頁都還難看。
因此，讓我們引入另一個 一塊語法如果今天我們能做到。
這是已知的東西 作為級聯樣式表。
因此，讓我看看 這個例子在這裡，看看
如果我們可以推斷出這是怎麼回事。
這是CSS0.html。
這是哪裡的東西 變得有點難看。
因為不幸的是， 在幅材的世界，
HTML不能單獨做的一切。
所以，如果你想 風格化您的網頁，
你真正需要關注的 美學以不同的方式。
所以在這裡，我有我的網頁的身體 其中，內頁是一個很大的股利。
而一個div只是意味著分工。
所以，它就像一個段落，但 不具有相同的語義
的一段文字。
>> 這也就意味著到 瀏覽器，這裡來
我的網頁大矩形區域 頁面，我想特別處理。
現在，第21行是分區的開始。
而只是採取一種猜測。
什麼是線21上的作用 其餘的頁面的內容？
圍繞它。
這就是全部。
所以，我們還沒有看到的一種方式 實際上圍繞文本。
>> 事實上，我的搜索​​引擎， 不像實際的谷歌，
一切都有道理到左邊。
所以，現在在第21行，我說，哎 瀏覽器，創建頁面的一個部門。
只要給我一個很大的，無形的矩形。
這就是我想 想想網頁。
然後風格化它如下。
裡面那些報價， 現在，是第二語言
我們今天推出 所謂的級聯樣式表。
值得慶幸的是，它太不 一種編程語言，
所以它是非常有限的語法，但 也非常有限其功能
而HTML是所有關於 標記了一個網頁的數據
和網頁的結構。
CSS通常是關於 最後一英里，美學，
得到的大小和顏色和 佈局完全正確的網頁。
事實上，它形成 與鍵值對。
>> 這樣，文字的屬性 對齊，隨後是結腸，
其次是該值 屬性，在這種情況下是中心。
而現在注意到你 可以嵌套這些東西。
如果我想要的一切在那 我一直強調為中心，
這就是為什麼我有21行和 相應的行31。
但是，現在假設想說約翰 哈佛，歡迎訪問我的主頁。
>> 版權符號約翰哈佛。
再假設我想第一 這些線路是相當大的。
36像素。
所以這是一個體面的大小。
我想它的重量要大膽。
但隨後跌破這一位置， 我想小文。
其下方，我想 更小的文本。
抱歉。
今天感覺就像一個休息日。
>> 所以，現在，我在做什麼來表達呢？
在這裡，第22行是一個嵌入式 格或div嵌套，如果你願意。
它也有自己的風格標籤。
我指定的36字體大小。
我指定粗體的字體粗細。
到這裡，我只指定了24個像素。
最後，在第28行，我指定12。
因此，正如一個快速完整性檢查 而作為一個人讀這篇文章，
哪些詞在屏幕上的 究竟要大膽？
哪些線路實際上是大膽？
>> 只是約翰哈佛​​。
對嗎？
因為正如行22說：哎 瀏覽器，這裡的頁面的一個部門。
讓它的字體大小36點。
使字體粗細大膽。
一旦你到達 相應的結束標記
或線24封閉的標記， 這意味著，嘿嘿瀏覽器，
停止做不管它是你正在做的。
而通知明確，即使 線22具有所有這些屬性
喜歡的風格，當你 關閉標籤在第24行，
你只提標籤的名稱。
>> 你不重複的字樣式或 任何的這些報價內。
所以，如果我看這個現在 在我的瀏覽器，讓我們
看看最後的結果。讓我走 未來到這個文件，這是CSS 0。
它仍然是相當平淡， 但得到相當有趣。
但事實證明，有 其他的事情，我可以在這裡做，
並且在製造的風險 這完全可怕的，
注意這裡，在我 我的網頁的身體，
我可以做一些有趣的事情 像血糖或背景色。
>> 快捷，什麼是你最喜歡的顏色？
綠色聽說。
好的。
所以，現在，如果我打重裝現在， 我們有一個綠色的網頁。
好了，所以這不是壞的。
而現在，如果我想使這個真 很酷，我可以讓我的文字的顏色
甚至紅色。
因此，讓我們看看這是什麼樣子。
現在，它看起來相當不錯。
而到這裡，如果你真的 想惹別人
或者，如果你想成為 那些人之一誰
試圖誘騙用戶訪問一個網頁 頁面，因為他們已經欺騙了谷歌
到思維有一大堆 關鍵詞like--讓我們來看看，重裝。
哪兒去了？
它就在那裡我們。
好的。
所以我說這是題外話，我們將 談論這個東西在幾個星期
當我們談論 安全，如果你真的
中嵌入整串 在網頁中的關鍵詞，
即使他們不可見的， 當然，人，有人喜歡谷歌，
可實際上仍然發現這一點。
好了，所以這是很 可怕的很快。
>> 而事實上，這還不是全部 那麼多不像我自己的網站
頁面作為一名大學生，這 我開始使用Google四處找
過去的版本我的舊網站。
這是非常糟糕的。
事實上，我確實發現 ONE僅有上課前。
但更糟糕的是在那裡。
這顯然是我的 主頁早在1996年。
顯然，我認為這是 應該問的人他們的名字
才可以 居然看到我的網頁。
>> 然後我給他們 一些愚蠢的事，大概。
我會挖多為下一次。
但現在，讓我們來 考慮位的設計。
我們已經討論過的風格。
而這個頁面從而遠不及 最一切，我已經寫了
很乾淨的曲風。
但怎麼樣的設計？
嗯，有很多冗餘 在什麼我已經在這裡做什麼。
>> 我已經提到這個詞 顏色在幾個地方。
我在一對夫婦提到字號 地方和大膽的在幾個地方。
從根本上，我的合作 交融兩種語言。
我有HTML與我的標籤和我 屬性，然後突然之間，
引號之間的，我有 第二語言的今天
所謂的CSS，它再次，只是這些 鍵值對，或這些屬性
用冒號分隔。
>> 事實證明，很多 就像C一樣，我們
可以先對因子 一些代碼為標題的文件，
所以我們可以做同樣的HTML。
並朝著一個步驟如下。
請注意，這個版本，CSS1.html是 在結構上完全相同的網頁。
所以，我有一大堆 申報單的，但是這一次，我已經
擺脫了包裝的 DIV，你會看到的。
>> 我已經給這三個div的 頂部，中部和底部，唯一ID。
這是很好的，因為 給這些部門
頁面唯一標識符， 我可以在其他地方引用它們。
在哪裡？
好吧，讓我向上滾動。
因此到目前為止，任何時候我們已經看了 在網頁的頭，有什麼
我們已經在唯一的標籤 一個網頁的頭？
大聲一點。
就在標題為止。
但事實證明，有 一些其他的東西
你可以把在那裡，一 它之所以被稱為風格標籤。
所以剛才我們看了 在樣式屬性。
原來有一個風格的標籤。
它屬於內部 網頁的頭部。
現在發現我在做什麼。
我有這裡面 風格標籤下面。
我從字面上提的第20行的 我想風格化標籤的名稱。
>> 然後，我有大括號 和封閉大括號。
因此，在精神為C相似，但 再次，這不是一個功能，
這僅僅是一個語法在這裡的細節。
那當然，而且我要告訴 瀏覽器，瀏覽器哎，
使頁面的整個主體 有中心的文本對齊方式。
然後這話說以下。
嘿，瀏覽器，如果你看到一個HTML 在頁面元素或標記，
具有頂部的唯一標識符， 因此，井號這裡只是指
頂部獨特的想法，繼續前進 並使其字體大小36
其字體粗細大膽。
>> 嘿瀏覽器，元素，其 ID為中，使其24像素。
哎瀏覽器，如果你看到一個 底部的理念，使其12像素。
最終的效果 正是SAM。
如果我去到了CSS 1， 頁面看起來都一樣。
但我們走向了一步 一個稍微好一點的設計。
現在讓我回到這裡CSS2 ，看看還有什麼我所做的一切。
>> 現在的網頁是真的，真的很乾淨。
其實，我可以適應所有的 頁面上的內容在這裡。
但是，新的標籤有我 介紹，很明顯？
鏈接。
而且這不是一個最好的名字的標籤， 因為它不是在這個意義上一個鏈接
我們知道，但這意味著 在某些其它文件的鏈接。
這是一種像尖銳包括C.
>> 這是HTML的方式 說哎瀏覽器，
去得到的內容 該文件名為css2.css。
的關係，對我來說， 是，這是一個樣式表。
事實上，這正是的一個 的s在級聯樣式表的手段。
這是一個樣式表。
這只是包含文本文件 一大堆的財產。
這一大堆的風格 要應用到的頁面。
>> 所以這顯然是 參照一個第二文件。
如果我打開，CSS2.css， 請注意，所有我做
是複製和粘貼的所有 這到這個文件。
而現在，即使你從來沒有 之前編碼這個東西，
只是考慮與 眾所周知工程帽
對，這是為什麼一個 更好的設計可能？
分解出的CSS屬性， 把他們變成自己的文件。
即使我們解決了這個 問題像五分鐘前
在第一個版本。
>> 我們沒有好轉的 頁面風格上，
這僅僅是更好 設計在某種意義上。
為什麼你覺得呢？
是啊。
更靈活的怎麼樣？
是啊。
所以，如果你想要去 背部和改變的東西，
現在，你有一個地方 在這裡你可以改變的事情。
而事實上，對於一些 類似的問題設置七，
在這裡，我們將實現一個 股票交易網站，
那將會有一個 一大堆的頁面。
而這將是非常 惱人的，如果你決定，嗯，
我真的不喜歡24像素，我想 它是28像素或稍大。
然後還要做 全球查找和替換
或打開所有的網站的文件 只是真正改變一個值。
通過分解出這些風格 在一個中心位置，
你現在就可以打開一個文本文件 在CS50IDE到任何程序，
改變它，保存它，並完成。
你傳播的 變化無處不在。
這將是相同的 在一個點.h文件也是如此。
因此，任何問題從而 據有關此語法？
好了，所以我們 所做的一切似乎
但實際執行的超鏈接。
因此，讓我們繼續前進，做到這一點。
讓我繼續前進， 在這裡創建一個新的文件。
我要叫它 link.html，放在今天的代碼。
>> 而我要做的開 支架的文檔類型的HTML。
順便說一句，這東西在 頂，這個文檔類型聲明，
它是唯一一個很奇怪 與感嘆號。
你只需要做到這一點存在，並且 我們使用的HTML版本，5表示。
老版本的 語言有更長的時間
你需要串放在那裡。
因此，這裡是被稱為鏈接的示例。
>> 我需要我的網頁的身體在這裡。
和在這裡，A HREF等於 讓我們說HTTP://www.disney.com
我最喜歡的網站，我們會說。
好吧，所以很 無關痛癢的，用戶友好的頁面。
如果我現在去到我的目錄 在這裡上市，開拓link.html，
我們有超文本。
>> 事實上，這是在哪裡 在HTTP轟得來的。
超文本傳輸協定 是有關傳輸文本
具有超鏈接到其他資源。
事實上，這裡是大家熟悉的， 如果復古，藍色鏈接，如果點擊，
實際上將導致我Disney.com。
現在，噢，那很快就出來了。
好了，那麼現在，有哪些 本作的含義是什麼？
>> 坦率地說，這個世界開始 得到一點更熟悉
並且也有點可怕 同時也多了幾分
自我辯護的，一旦你開始 了解這些東西。
因為賠率是，一些你，如果你去 通過您的Gmail的垃圾郵件文件夾，甚至
您的收件箱，你可能 得到某種形式的電子郵件
是在問你改變你的 密碼也許或者驗證
您的PayPal憑證或諸如此類的東西。
>> 而事實上，你可能已經收到 東西說，像請點擊這裡
重置您的支付寶密碼。
現在，請注意，如果 這不是Disney.com
但像badplace.com和 重裝，注意，這裡是正文
任何能說什麼。
而事實上，這只是話。
為什麼不讓我其實是超級惡意 並說http://www.paypal.com。
>> 點擊此處重置您的支付寶 密碼現在重裝。
這看起來很合理，對不對？
我的意思是，我不會點擊 一封電子郵件，只是說這個。
但這裡要注意的兩分法。
它說www.paypal.com， 而事實上，等一下，
我們知道你想要 在S安全。
所以，現在，去www.paypal.com HTTPS， 但如果你以前從來沒有這樣做，
不要陷入習慣 徘徊在小鏈接在這裡。
而且它是很難看到 在屏幕上出現，
這不是所有的容易在這裡。
但一路下來這裡 在小小的角落
做瀏覽器實際 告訴你，我們要
以badplace.com代替Paypal.com。
現在，我們去哪兒用呢？
所有我們今天所做的例子， 我們已經硬編碼，並手動輸入了。
該網站是令人難以置信 無趣，當你辛苦
編寫你的網頁，這樣的內容 是靜態的，從來沒有改變。
當然，我們所有的 今天最喜愛的網站，
無論是Gmail或Twitter或 Facebook或任何其他一些
是動態的。
他們正在改變 響應於用戶輸入
就像谷歌的搜索結果。
>> 因此在週三，我們做的是 我們離開的HTML和CSS介紹
過去，而我們走 理所當然，我們現在
知道它，我們引入 一種新的編程語言
所謂的PHP，它喜歡 C，是要給我們
實際創建的程序的權力 這本身產生的輸出。
在這種情況下，我們將使用 PHP生成動態網頁
使用這種新的語言的網頁。
因此，更多的是在週三。
到時候見。
>> [音樂播放]