[音樂播放] 大衛·馬蘭：這是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生成動態網頁使用這種新的語言的網頁。因此，更多的是在週三。到時候見。 [音樂播放]