DAVID J. MALAN：好的。 我們回來了。 所以，這最後一次會議的目標 是介紹幾個概念 也給每個人一個機會 以一種舒展你的手指 實際上做一些事情 有點動手。 我們的目標是不給轉 我們都為Web開發人員 以任何手段，但實際上只是 給你一些味道 什麼樣的基本構造的 進入網絡編程和網絡的今天 發展，所以 的things--靜態側 沒有邏輯，沒有編程 語言只是靜態內容。 它會給我們一個機會 實際看到的Web服務器是什麼， 看到一個HTML文件是什麼，看什麼 它是HTTP實際上是服務了。 但在此之前，我們在潛水，追溯 關於雲計算的問題 抵押或在兩者之間什麼嗎？ 沒有？ 好了，好了，讓我們 為此，以防萬一 報名參加的過程 東西需要幾分鐘的時間。 我們會讓它做它在後台運行。 來吧，如果你能， 這個URL這裡 - c9.io. 這是一個第三方service-- 平台即服務，如果你will-- 這是要邀請您 註冊一個帳戶， 並且它去給你們每個人 在所謂的雲的帳戶 在別人的基礎設施， 一家名為Cloud9。 但是，什麼是關於nice 這是他們給你 的近似值 實際的現實世界的發展 環境，雖然在 雲和在網絡瀏覽器， 我們會用這個實際 今天試驗了一下。 然後繼續前進，只是導航 自己的方式註冊過程 如果你可以。 因此，我們在發生該類使用此 我教所有的學生， 在校園和關閉，現在， 它取代歷史是什麼 否則被下載的軟件。 那麼，你獲得訪問 是這些虛擬機之一， 本質上，我前面描述。 因此，這家公司可能Cloud9 從第三party--的確租金 在這種情況下，Google--一個整體 束的虛擬機的 他們莫名其妙地砍成 各個服務器的錯覺 我們每個人都有完全控制權。 這不是很準確的說 他們是虛擬機， 雖然，因為什麼 Cloud9實際使用 是一個有些較新的技術 所謂的集裝箱。 讓我抓住這個圖片 這裡畫這幅畫。 容器是，如果 你還記得圖片 從早期的，有點輕 重量比的虛擬機。 實際上，而最後 一次，我們談到有 作為一個經營 系統管理程序 然後客戶機操作系統，來賓 操作系統，來賓操作系統 系統之上的 物理硬件， 這種新的差異 技術，集裝箱， 是，它們都以某種方式分享 相同的操作系統。 但他們仍然創造 大家的錯覺 有他或她自己的專屬 管理權限和文件 在服務器上。 但是，有一個在更少的軟件 你和硬件之間。 其結果是，在 理論上，一個更高的性能， 因為你使用或 浪費更少的資源 關於所謂的虛擬化層。 因此，這被稱為 集裝箱的性質 由稱為多克爾技術的方式， 這是非常進入它自己。 這是東西 工程師貴公司 也許那種類型的談話開始 關於很快，如果他們還沒有準備好， 雖然有肯定沒有 理由跳上任何bandwagons。 所以這麼說，是什麼 你可能現在看 是，看起來有點像這樣的畫面。 好。 如果沒有，只是叫我過來。 如果so--我就過來如果不是。 來吧，點擊大 再加上創建一個工作區， 你會看到這樣的畫面。 您可以致電工作區 命名你想現在任何東西。 而實際上只是為了簡單起見， 去還有 - 還有，你們中的一些 已經有工作區。 說它不管你want--業務， 哈佛，週四，無論你想。 不需要的描述。 你可以把它私有的，除非你 已經有一堆的工作區。 如果你不得不把它公開， 這很好今天的目的。 在這裡，也就是加售之一。 你得到一個私人工作空間 默認。但是，如果你想要更多， 你要付出更多。 否則，他們強迫你 使您的工作公開。 但是，這很好，因為他們也 在開源社區這個目標 鼓勵人們 其實合作。 這是很重要的最後一件事， 雖然，是，你選擇一個名字後， 而你選擇私立或公立之後， 單擊HTML5的大橙色圖標 左邊第二個，並且 然後單擊創建工作區。 它將可能 花一分鐘左右， 但你再有一個 環境，一旦你 做到這一點，看起來讓人想起 我有什麼在屏幕上現在這裡。 但是，再次，它可能需要一分鐘 以上才能到該屏幕 當您點擊創建工作區。 但就我旗在，如果你想我 要看看什麼或提出建議。 好吧。 所以，我要這個背景現在。 給我打電話了，如果你似乎 有任何技術上的困難。 但是，再次，它可能需要一 點點的打開。 讓我們繼續談什麼 它實際上就是使一個網頁， 什麼HTML是，怎麼了這一切 現在作為互連我們開始 實際使用的一些技術。 所以，事實證明，我可以 繼續我的小蘋果在這裡， 打開一個叫做簡單程序 文本編輯，或在Windows上我可以 開放所謂Notepad.exe的。 我可以只是簡單地做一些事情 像this--“你好，世界”。 然後，我會這樣保存為 hello.txt的所以沒有魔法存在。 這有沒有關係網絡 編程無關的HTML。 只需創建一個簡單的文本文件。 但事實證明，一個網絡 網頁是字面上這一點。 這是一個簡單的包含文本文件中的文本 你可能在你的鍵盤輸入， 但其通常但不總是 在結束不.txt文件，但.HTML或.htm。 而你不只是 鍵入文件中的話。 實際上，你必須使用所謂的東西 標籤或更一般地，一些 稱為標記語言。 所以，我要非常快速輸入 然後解釋如下。 我要去第一 鍵入此，它說， 哎，瀏覽器，來了一個 網頁用HTML編寫的。 而這兩個東西放在一起說，哎， 瀏覽器，以下是確實的HTML。 嘿，瀏覽器，來了 頭或我的頁面的頂部。 哎，瀏覽器，頂部的內 我的網頁，把一個標題就是，“你好， 世界。” 嘿，瀏覽器，該負責人後，我 頁面，這才是我的頁面的主體。 而且，嘿，瀏覽器的身體我 網頁還應該說，“世界你好”。 那麼什麼是顯著的細節嗎？ 這就是通常的 被稱為文檔類型聲明， ，坦率地說，這是一個有點 很難在第一次記住這一點。 你只是一種複製粘貼。 這是正規途徑 他說，哎，瀏覽器， 我使用的HTML版本5，其 出來了最近一些。 這是一個神奇的咒語，一些 人類與設計意識薄弱 決定把在 該文件的最上方， 儘管這是一個 小奧術，這是所有 它是指：哎，瀏覽器，在這裡 帶有HTML 5版本。 這樣做的其餘部分已經與我們 一段時間以來，從歷史上看， 但它在不斷發展，它的 可能已經開始有點簡單。 注意幾個特點 什麼我突出。 有這些東西有角度 brackets--左括號 右括號。 這裡注意的對稱性。 並且對稱，我的意思是，就像我 這裡有這樣的開始標籤或標籤開放 如果你願意，這兒我有一個 結束標記或結束標記這是 不同僅因為它具有此 在字的開頭削減 HTML。 你能想到的 這是我隨便 提出前，嘿嘿， 瀏覽器，來了一些HTML。 而反過來說，哎，瀏覽器，這是 它為HTML--開始和結束。 同時哎，瀏覽器，在這裡 說到我的網頁的頭部。 嘿，瀏覽器，這是它的頭部。 嘿，瀏覽器，這裡是 身體我的網頁。 嘿，瀏覽器，這是它的身體。 而且裡面的一些 現在任意文本。 和頭部的內部，同時， 一些任意的，但標記， 可以這麼說，文本說，標題 我的網頁應為“你好，世界”。 現在，現在，你可以 假定瀏覽器 有only--或者說，網頁有 只有兩個曲子分為頭部和主體。 和頭部通常僅有 如菜單欄，東東 真的只是在最高層。 而且身體頁的膽量， 一切都在那個大的矩形 那充滿屏幕。 所以我要繼續前進，並做到這一點。 我要繼續前進， 單擊保存，保存文件。 而且我要救 以此為hello.html的， 我只是要 把它放在我的桌面上。 我要去 進取，點擊保存。 而notice--我的Mac在 至少在我大呼小叫。 你確定要這麼做嗎？ 而且我會說，是的，使用HTML。 我知道在這種情況下更好。 現在我會去我的桌面 在那裡我有這個文件突然。 而且我要雙擊它。 而且你會發現，通過 默認情況下，Chrome瀏覽器打開。 這是因為這是 我的默認瀏覽器。 而且它只是說，“你好，世界”。 但它說“你好， 世界“，在兩個地方。 注意左上角。 相當困難的錯過。 這是大和大膽。 和別的地方它似乎 說：“你好，世界”？ 聽眾：該選項卡。 戴維·馬蘭：是的，標籤本身。 所以，當我說的頭 網頁是一切行動top-- 這確實是標題。 這只是在這裡標籤。 我可以拉這個標籤 出以免混淆。 這僅僅是一個單一的標籤，現在， 而事實上，我們看到“你好，世界” 在這裡和“你好，世界”到這裡。 所以很簡單。 但它也相當簡單。 而且，事實上，我放大英寸 我可以更改字體大小 放大可訪問性。 但是，讓我們現在做的事 更有趣一點。 我要去go--哎呦，讓 我回到我的文本文件。 我要回我的 文本文件，然後我要去 要改變這一點，說 “你好，迪斯尼世界。” 保存。 而回到我 瀏覽器，然後單擊刷新。 現在，當然，它 說，“迪斯尼世界”。 我要去人為地放大 在短短所以它更容易看到。 所以，現在，不幸的是，我有點想 中場休息其實，這是一個Mac的功能。 我想點擊迪斯尼世界 和去的地方像disney.com， 但是，這並不工作。 所以紙幅的一個基本原則是 超鏈接，也去其他地方的聯繫。 那麼，如何做呢？ 好吧，我可以說， “你好，http://www.disney.com。” 保存此。 重新載入。 但是，這也不能點擊。 什麼是不錯這裡，即使 這不是功能呢， 是，它似乎 瀏覽器從字面上只做 我告訴它做的事。 所以，如果我只是輸入網址這樣， 它只是要告訴我的URL。 我需要使用標記或標記 語言居然告訴 瀏覽器做更多。 所以我要繼續前進， 刪除了一會兒。 而我會說，嘿， 瀏覽器，從這裡開始錨， 一個鏈接可以這麼說。 與超基準，目的地 錨的，應該是這個URL。 並注意我的報價。 我可以用單引號也一樣， 但你必須是一致的， 我會一般只使用 雙引號保持簡單。 請注意，我將關閉該標籤。 然後，在這裡我會 說，“迪斯尼世界”。 而現在我需要一些symmetry-- 開放式支架，/一，封閉支架。 所以，我有什麼介紹？ 我們已經有一些標籤。 HTML，頭，標題，正文 都是標記，可以這麼說， 開放和封閉的同行。 但通知，這是排序 根本不同。 這就是我們會打電話給 在HTML屬性。 和一個屬性是 只是一個鍵值對。 這是常見的事 計算機science--鍵值對。 這有點貿易的工具。 一個鍵和一個值。 一個字，然後一些 其他的字或詞。 在這種情況下，關鍵是HREF， 和值是完整的URL。 什麼屬性確實是 影響標籤的行為。 在這種情況下，我們需要影響 錨標記的行為， 因為我們需要錨定 這個鏈接的地方。 怎麼你這樣做是 由屬性的方式。 所以我要繼續前進 現在保存文件。 回到我的瀏覽器和重裝。 而且，瞧，我們現在有 一個合法的網頁的開端。 超級簡單，但如果我懸停 在左下角this--通知， 它的超小型。 但是你看到www.disney.com。 如果我點擊它，這的確 拂塵我帶到disney.com。 現在，奇怪的事 這裡是，它是不 在best--最適銷對路的URL，但 這很好，因為這個文件不 存在在萬維網上。 它存在作為顯然是一個本地文件 我的用戶directory-- / jharvard-- 約翰Harvard-- /桌面。 但它有一個網址。 這恰好是本地的。 不幸的是，沒有一個可以訪問 這一點，因為如果你輸入這個網址， 你會告訴你的瀏覽器， 尋找一個名為hello.html的 在你的硬盤驅動器。 而且，當然，除非你已經 手動沿之後， 它不會存在那裡。 所以這是很好。 我們還需要一種方式，最終， 得到這個文件放到網上， 但讓​​我們梳理出幾個 的安全隱患我們剛剛 看到和領帶回較早 從今天上午的討論。 事實證明，如果 瀏覽器從字面上少了點 我告訴它做的事，似乎 到是一個錨定標記的話 由的值的影響 此屬性稱為HREF 但它顯示此 文本，這似乎 暗示我可以把網址 在這兩個地方，然後重裝 而現在看到的網址，然後轉到URL。 請注意，如果我將鼠標懸停在左下角， 我確實要去仍然disney.com。 所以，如果你曾經去過 phished--的P-H-I-S-H-E-D-- 這些偽造郵件的一個 從PayPal等銀行， 你可能得到的內部鏈接 你正在閱讀的電子郵件 告訴你點擊這裡去確認 您的密碼或者確認您的生日 社會或社會上的東西 工程您披露 信息。 好吧，我可以那種拿 利用這一點，我能不能？ 我能說些什麼 像，www.paypal.com。 而不是disney.com，我 可以去一樣，badguy.com。 重新載入。 而且是多麼容易欺騙， 特別的非技術性讀者 或粗略閱讀 讀者比點擊 像這樣的鏈接，如果我點擊它 - 我其實不想去badguy.com。 我不知道什麼是真正在那裡。 所以paypal.com，通知，是 它說，它打算， 但當然，如果我往下看 超低價，這是一個有點模糊， 但它說badguy.com。 這是唯一的告訴現在 我要去到錯誤的地方。 當我剛才說的銀行 真的不應該鼓勵或火車 用戶點擊鏈接，這 只是它的一個表現。 它就是這麼簡單。 你現在的對手，如果 你做這樣的事情 並試圖誘騙用戶 到訪問您的網站。 但現在，我們會繼續 整潔，乾淨。 我們要繼續前進 和倒帶這些變化。 重新加載頁面。 我回去disney.com。 讓我們看看，如果我們不能去惹 這除了多一點。 因此，“你好，迪斯尼世界。” 我要在這裡說下。 也許我會做一些空間。 “我們希望你過得愉快！” 保存。 重新載入。 這不是rea--這不是 我故意的，對吧？ 我的意思是，如果我對待我的文字 文件像文字​​處理器， 那你希望在這裡會發生？ 是啊，我覺得好像有 應該是一個換行符在這裡， 所以感覺越野車以某種方式。 但是，這實際上是故意的， 因為就像以前一樣， 瀏覽器只會 做什麼你告訴它做的事。 我還沒有告訴它斷行。 我沒有告訴它向下移動，甚至 不過，直覺，我覺得我做到了。 因此，原來我們需要 多一點的標記， 我要去解決這個問題如下。 我要第一個前言本打招呼 什麼叫做一個段落標記。 然後我要繼續前進 而這個包裹等句話 在另一個段落標記，即使 他們是超級簡短的段落。 現在，我要救。 重新載入。 而現在我們有 空間，我們的排序 具有的語義 兩個獨立的段落。 這是一切優秀和良好的，但它會 是不錯的圖像添加到這個頁面， 所以我打算去看看 米老鼠在谷歌圖片。 而只是為了好玩，我 要抓住這一形象。 我現在要繼續前進， 抓住這個圖片的URL， 儘管有不同的 如何做到這一點。 現在，我只是去複製網址。 我要回去了我的文字 文件，我要在這裡說， IMG SRC =報價引文結束 該URL，超長。 再一個概念 形象是一個有點不同。 真的沒有首發的概念 的圖像並結束一個圖像， 就像一個開始標記結束標記。 所以感覺有點怪異 我語義做到這一點， 有一個近距離圖像標籤。 這不是不正確。 這是完全正確的， 和它的鼓舞， 但有速記符號。 我可以種同時進行 打開和關閉同一個標籤， 而且，這將使瀏覽器高興。 因此，這只是一個小 更簡潔的東西 在概念真的不 意義的開始和結束。 他們只是在那裡，或者他們沒有。 所以我要拯救這個回去 我的“你好，世界”網頁，並重新加載。 而且它失控了一下， 由於該圖像實​​際上是 有點大，但沒關係。 我可以在一個程序調整其大小。 或者，你知道的。 只是為了演示，我 要實說 那這個東西的寬度應 只有200像素，200點。 讓我繼續前進，保存 並重新加載，而現在的頁 看起來有點更合理。 但是要注意的格局。 嗯，我有種教你一切 在某種意義上的HTML，至少 概念上，因為所有的HTML是為 這些tags--開放標籤，標籤關閉， 和屬性 修改其行為。 和，很明顯，每 標籤可以具有零個或一個 或兩個或多個屬性，每個 它做一些事情有點不同。 現在，你怎麼知道存在什麼？ 你只是聽別人 像我告訴你存在， 或者你只是谷歌周圍的教程 在HTML，它真的是這麼簡單。 確實，當我是一名大學生 幾年前，得知HTML， 我的數學教學中的一個 助理剛剛度過 時間一點點的我家教 像半小時，一小時， 然後我在我的方式。 我是在我對製作方法 最可怕的網站不斷， 其中，顯然，我沒有 真正的發展遠遠超出。 但問題是，一旦你 了解這些簡單的ideas-- 如果神秘text--但這些簡單的 開始的思想觀念 和關閉的思想，保持 一切都很好地平衡， 看的東西了，修改 該標籤的行為，這真的所有 就是這麼簡單。 而事實上，如果我們現在去 類似實際上google.com--， 讓我們去的地方多一點 reasonable-- stanford.edu。 我要去查看， 開發人員，查看源代碼。 它的醜陋，但notice-- 我會在通知放大 有些東西，這已經熟悉。 這裡有這件事， 這是一個瀏覽器。 這裡談到HTML5。 還有HTML。 顯然，有一個 屬性我沒 使用指定 頁面的語言， 這可以幫助自動 翻譯之類的東西。 下面是頁面的頭部。 這裡是斯坦福大學的網頁的標題。 有一個標記我沒有 說說yet-- Meta標記。 這只是排序 背景資料。 它有助於SEO，或 搜索引擎優化， 或谷歌搜索結果等。 但是，如果我們繼續找，保持 看，這裡的Body標籤。 而且還有其他串 標籤我們沒有談過呢。 但是，事業部是一個用於 頁面的分工。 這就像一個無形的矩形 如果你有種想弱智 將您的頁面到 不同的單位在網上。 然後大量的div的我 看，一種叫類， 但我們會回來這一點。 這是interesting--形式。 所有的表單都在網上。 任何搜索框你 使用過的一種形式。 而且，所以，讓我們實際看到的。 形成。 行動。 這種形式的作用，不管是什麼 由於歷史的原因，就是網址。 方法是“後”。 原來，HTTP請求可以使用 動詞“獲得，”像我們以前看到的， 或“後”。 並且會看到一個差異 這個瞬間。 讓我們真切地看到這是什麼。 讓我回到斯坦福大學的網頁。 什麼樣的形式。他們說什麼呢 一下，你覺得呢？ 什麼你跳出來？ 聽眾：搜索框。 戴維·馬蘭：是的。 於是起來右上方 這裡是這個搜索框。 這就是他們如何實現它 - 一 標籤這是字面上的開放式支架形式。 然後讓我們尋找的東西。 讓我們搜索好友 的mine--“尼克Parlante”。 輸入。 當然，它去 一個稍微不同的URL。 讓我走回到這裡。 讓我們搜索“的課程。” 該死的。 又到一個不同的URL。 因此，斯坦福大學的加入一些魔法 說他們不帶我去的網址 我們在看到 action屬性那裡。 但這裡有個形式，純粹是實施 這裡所該標記的方式，這些標籤。 事實上，這裡是輸入 您要搜索的類型。 這裡是對輸入 另一種類型的搜索。 這裡是字符串本身的輸入端。 因此我們的目標是不包 我們周圍所有這些標籤的頭腦 只是去看看。 它只是打開和關閉 標籤和期待的事情了。 是嗎？ 維多利亞？ 聽眾：[聽不清] DAVID J. MALAN：這是一個很好的問題。 這是一個有點麻煩看看。 讓我回來了 在短短幾分鐘的問題 當我們看一些所謂的 CSS或級聯樣式表， 我們可以嘗試推斷 盡可能從頁面。 所以，如果我們現在google.com來看看， 讓我們來看看他們的網頁是什麼樣子。 你會they're--今天的可愛。 好。 全做完了。 好吧，查看源文件。 你可能會認為谷歌有 很不錯的源代碼。 所以，很顯然，是怎麼回事呢？ 而事實上，這甚至不是HTML。 這就是所謂的JavaScript。 讓我們繼續下去，下去。 我甚至不知道該頁面的開始。 我將使用命令 樓打開支架HTML。 好吧，它就在那裡。 我發現頁面的開始， 有這麼多東西在這裡。 什麼是真正回事？ 那麼，你知道嗎， 我們可以打掃一下。 如果我不是去這個檢查 工具欄，這個特殊的診斷工具， 去沒有網絡， 我們今天繼續下去， 但如果我去的元素， 什麼是真正好的 是一個瀏覽器有很多 更好的眼睛比我好。 而瀏覽器可以讀取 網頁的那些亂七八糟， 該HTML郵件我們只是 看著，並且它可以 解析它或閱讀 分析它，並重新格式化 在一個不錯的人性化的方式。 那麼，我現在看到 這裡該屏幕 元素下，完全相同的內容， 但他們已經縮進的一切， 他們已經著色，但 這是完全相同的文字 我從服務器下載。 什麼現在是很好的，我可以看到 在體內，對instance--通知， 頁仍然由 的只是一個頭部和一個體， 我可以分層潛水這裡。 請注意，谷歌似乎有 到divs--這一個，這一個。 我可以展開。 還有其他的div的一大堆。 所以這是一個有點複雜。 可是等等。 這似乎這麼多 可讀性強，比較，莫過於此。 為什麼谷歌尷尬 本身只是發送 這個巨大的一些代碼混亂 排序只是為了實現一些 這乍看上去這麼簡單嗎？ 就像，他們為什麼不增加更多的空間？ 他們為什麼不按Enter鍵像我一樣？ 怎麼看怎麼好，我是 在寫一個網頁。 我敲回車這麼努力。 我縮進所以一切 既漂亮又可讀。 為什麼谷歌不練一樣嗎？ 聽眾：[聽不清] DAVID J. MALAN：好。 很公平。 它們不具有一些 人在谷歌手動 再更新主頁。 這不是1999年了。 因此，他們有軟件。 他們有其他工具 動態他們的HTML生成。 當然，該代碼本身 被寫了人類， 但現實是， 這是相當公平地說， 瀏覽器肯定不會 關心代碼是如何凌亂的。 但是，還有一個更 令人信服的技術原因 ，谷歌分配他們的HTML 在這樣一個草率的編碼，看似 鋪天蓋地的方式，所有擠在一起 用很少的方式 - 非常小 在格式化像我一樣的方式。 聽眾：[聽不清] DAVID J. MALAN：更快？ 為什麼？ 你是怎麼說的，肥姐？ 更快？ 為什麼要快？ 聽眾：[聽不清] DAVID J. MALAN：有 沒有空間來閱讀。 是啊。 所以，想想一個空間是什麼。 所以在鍵盤上每個字符需要 的空間量來表示， 無論是身體，喜歡它 佔用太大的空間， 或以某種方式下的 油煙機，需要的內存。 而作為一個aside--，我們將 談論這個明天...... 鍵盤上的每一個字符 通常需要8位，或一個字節。 因此，8為零的圖案或 的人，或者只是1個字節，因為我們 人類通常會說。 所以這是小，但 它仍然是非零。 它仍然是一些空間量。 因此，如果一個工程師或谷歌命中 空格鍵只有一次，並且假設 Google--這是超級popular-- 假設一個十億人 訪問他們的主頁，每天 或一些數量的人 訪問主頁 每天十億倍， 多少額外的字節有 軟件工程師只是成本谷歌 擊中一次，他或她的空間吧？ 聽眾：[聽不清] DAVID J. MALAN：還不至於那麼糟糕。 只是一個字節次十億。 所以A-- 聽眾：8十億字節。 DAVID J. MALAN：不是8十億。 8個十億字節。 但是，1千兆字節。 1千兆字節是衡量單位。 如果他或她做了兩 空間，2千兆字節。 三千兆字節。 對？ 它擴展昂貴。 所以，在像谷歌的情況下， 其中，理所當然的，是極端的情況下， 還有一些剛剛出現的其他問題 通過非常合理的決定 或採取很簡單的人的行為， 因為它有這樣放大效應。 這樣的原因之一 這看起來如此壓縮 正是因為維多利亞說 - 這是 僅僅通過電腦生成的反正。 所以，沒什麼大不了的。 讓瀏覽器看著辦吧。 但它也故意 沒有太多的空間， 由於空間是不必要的。 而空間裡，真正花錢。 它要么耗費時間， 因為剛推 那麼多的更多的數據出 google.com的總部只有 得到了取一定量 時間，即使是毫秒 或微秒，但是這增加了 在如此多的用戶，或者更可能的， 它可能要花錢的。 谷歌可能連接到 這世上有人在，其他人 那些窺視 點，如果他們有 某種金融關係 因此他們的數據費錢， 他們還不如 減少多少數據 他們對隨地吐痰 他們的互聯網連接。 於是有趣的事情，不過，最終， 或者也許是令人欣慰的事情， 是，即使這看起來可怕 壓倒，在一天結束時， 它仍然是完全相同的原則 這裡一個HTML的這個非常簡單的頁面 頁。 所以只是總結等你 有一個官方版本，如果你沒有 通過選擇以下沿這裡，在這裡 可能是最簡單的網頁， 這樣的東西用也許以後玩。 好吧，讓我們引入 幾個其他的想法了。 我們即將推出 所謂的style標籤。 我們可以樣式化頁面 更有趣的方式。 因此而HTML電子郵件 在所有了解標記 數據，排序，指定到 瀏覽器如何組織數據， 把它放在哪裡，CSS或 級聯樣式表， 是第二語言 一般獲取與HTML混合 正如我們將see--，但我們可以清理 ，最多在moment--的需要 它的最後一英里，而且風格化它。 它得到的顏色恰到好處， 字體大小剛剛好， 定位恰到好處。 這是所有關於美學 或格式化，不是 的基本數據本身。 而最簡單的方式來顯示 這也許是通過例子。 所以我要去了 我簡單的文本文件。 而在短短的一瞬間，我就 走我們走過的過程 中這樣做自己。 我要回到我的文件 在這裡，只是重新加載頁面 確認是什麼樣子。 這就是我們現在所在。 我覺得孩子們會喜歡 有一些顏色來此網頁。 所以我要在這裡上去 到頁面的頭部。 而我要做的風格，/風格。 然後，在這裡面，我要去 告訴我page--的身體 這格式化，在 乍看之下，也許有點 奇怪，但傳統。 我會說，背景 本頁面的顏色應該是綠色的。 這是很不幸 排序的不是最好的設計。 請注意，以前 在HTML的世界裡， 我說的屬性 這些鍵值對。 東西等於報價 引文結束“的東西。” 在世界上的CSS，這是 一些不同的人設計的， 他們決定，在他們 世界，鍵值對 將字結腸癌的東西。 所以這是同樣的想法，雖然。 它關聯的值 有一些關鍵的莫明 影響這個頁面的行為。 你可能已經猜到。 這是什麼可能將 即使你從來沒有做 看到HTML或CSS過嗎？ 聽眾：改變背景顏色。 戴維·馬蘭：是啊， 改變背景顏色。 而具體的 身體的背景顏色。 但是，只要該 身體現在是網絡 page--它是唯一的事情 下方的標題欄真的 - 它可能會 影響同樣的事情。 因此，讓我們來看看。 讓我們保存此。 去這裡並重新加載。 這是非常可怕的。 而且這是怎麼回事 這裡是一個副作用。 我只是選擇了這個圖像隨機。 為什麼是綠的，沒有 背後滲透米奇？ 聽眾：[聽不清] DAVID J. MALAN：沒錯。 事實證明，圖像，漂亮 多，我們可能會使用的所有圖像， 是矩形的所有rectangles--。 即使米奇有一些曲線 自己和具有背景， 這樣的背景下必須要有些東西。 它必須是白色。 它必須是黑色或別的東西。 它可以是透明的。 而事實上，我可以 打開米老鼠這裡 在一個叫做Photoshop程序 或類似的東西 而改變這一切的白 背景透明， 因此，綠色將彪炳。 但是，這件事情我需要 問自己或圖形藝術家 或在我的設計師 公司，例如， 這樣做，尤其是因為我剛剛 借這一個從互聯網上。 但是，這是為什麼發生這種情況。 那麼還有什麼我們可以想幹什麼？ 好了，我們可能想說我們 真的希望你過得愉快。 而對於強調，我想 使這種強烈的， 所以我會說開強 關閉強後重裝。 這是一個有點硬 看投影機上 但也許真的現在 你跳出多一點。 所以，你可以在此添加斜體 方式，在這種方式粗體面。 我們可以改變顏色。 其實，只是踢，我 要繼續前進，並做到這一點。 我真的不喜歡我怎麼樣 段落此併攏， 所以我可能會做這樣的事情。 我要告訴瀏覽器， 改變每段落標記有， 讓我們其實say--，你知道嗎， 讓我們來對齊文本對齊，居中。 再次，我知道這只是 因為有人教給我 或者我看著它在 網上參考。 因此，讓我保存這個。 而且啊，現在我 中心的形象出現。 而實際上，你知道嗎，如果 我把我的形象到一個段落 tag--所以第三段， 即使它不是文本。 讓我們保存並重新加載。 現在這一頁已經開始看樣 of--我的意思是，它仍然很醜陋， 但至少它看起來像我花 2分鐘代替一分鐘 進行中。 所以，逐步，才能使 現在這些審美更改頁面？ 我沒有真正改變數據的 頁面比真正加字等。 我已經添加元數據，如果你願意。 嘿，瀏覽器，使 單詞“真正”大膽。 但數據不強。 這是元數據。 該數據是“真的”。 所以，我們還是有一定的 相同的概念和以前一樣。 現在，當然，這不是在網絡上， 所以我要在這裡做的最後一個步驟。 我要去的Hello.html 和公正的突出和複製此。 而現在我要去 進入Cloud9，這 我會帶您在短短的時刻。 賠率是，你會很快，如果 沒有準備好，在這樣的屏幕上。 讓我只是給你一個快速 遊覽什麼Cloud9實際上是。 如此反复雲9 這種基於雲的服務 ，讓你我的錯覺 具有我們自己的虛擬機 在雲中，在技術上 在雲中的容器中， 我們有充分的 管理員權限來。 因此在理論上，沒有一個 在世界其他有 訪問我的屏幕 在看現在， 也許除了人 誰跑工地， 因為從技術上他們有 物理訪問等等。 那麼，我們在這個環境中看到了什麼？ 我要縮小， 因為它是小了點。 讓我點滿 這裡只是一瞬間。 論左邊我和你 屏幕上，有一個在左一個文件瀏覽器。 因此，在神似 到Mac OS和Windows。 這些都是的 文件在我的帳戶。 並且默認情況下，如果你的 帳戶是像我這樣的， 你會看到或很快看到 的helloworld.html和readme.md。 在這裡就對了，這是 在我的文本文件要去。 如果你曾經使用過微軟 Word或記事本或文字編輯， 這是我的字編輯 文件還將會持續下去。 然後最神秘 這種環境的功能 我們不會真的需要使用的 到這裡所謂的終端窗口。 如果你用過DOS從 去年，這是在Linux 或Linux相當於DOS的。 這是一個基於文本的interface-- 沒有鼠標點擊，拖動無。 所有你能做的就是輸入 命令，但是這些命令 可以創建文件，移動文件，打開 目錄，目錄接近， 做任何多的東西。 但現在，我們只 花時間在這裡。 因此，讓我們做到這一點。 如果你在這 環境，你應該 ，如果你創建了一個工作區 已經，繼續前進，只是去了 到文件，新建了一會兒。 這會給你一個新的 標籤這裡在中間。 我just--，讓我們 繼續前進，做到這一點。 讓我們繼續前進，現在做文件，另存 並繼續前進，把它叫做hello.html的， 不與混淆 的helloworld.html，這 帶著新的免費帳戶， 這僅僅是一個示例文件。 你會看到它突然出現， 最有可能在左側， 和標籤仍然是開放的。 讓我鼓勵你現在重新創建 此文件或它們的一些變體。 如果你不能完全看到它的 屏幕上，這是相同的幻燈片 那你可能在另一個選項卡。 因此，在短期，讓你的第一個網頁， 保存它，然後在短短的一瞬間， 我會告訴你如何 其實可以查看此。 但是，改變至少有一點。 更改到的HelloWorld 你自己選擇的東西， 讓你確信這是你的 文件並沒有我剛才創建的。 好吧。 而當你ready--沒有 當你準備好rush--， 繼續前進，保存文件 一旦你做了這些改變。 如果你點擊 RUN鍵向上頂，這 要打開一個新標籤，將告訴 你哪個網址您可以訪問您的文件， 但它可能會花點時間 報價解除引用“啟動Apache”，這 是網絡服務器的名稱。 所以要小心做的正是 什麼是文件中的最終。 所以現在，我會放大操作。 如果我開始打字 開放式支架HTML，通知 它促使我完成我的想法。 如果我完成了我的思想，它 自動給我的結束標記。 但期望是那麼我會打 回車，然後將裡面 並做頭顱內， 然後我身體裡面。 和它的起初有點古怪， 因為它做的工作給你， 但要意識到最終 這樣可以節省你的按鍵。 而事實上，一個很常見的特徵 編程環境，這些天 既為Web開發像 這和實際的編程， 我們將談論明天， 這是自動完成的功能， 事情只是讓 程序員或設計者 鍵入較少的擊鍵 完成同樣的事情。 有時候，這是很好的，雖然。 有時，它只是惱人。 並再次，一旦你轉錄 滑動或它們的一些變型中， 你可以點擊運行按鈕往上頂。 然後在底部 窗，我們會通知你 在什麼網址可以訪問你的網頁。 礦，例如，是在 business-daharvard.c9users.io 等等。 好吧，那麼，讓我 - 什麼問題嗎？ 有關剛開任何其他問題 該工作之前，我們增加新的功能？ 讓我求婚，只是 讓鄉親comfortable-- 因為它是一回事，只是 一味的複製粘貼我做了什麼。 但是，僅僅讓鄉親搏鬥 至少有一個待辦事項， 我會打開一些音樂。 我要提出的名單 事情你可能會增加。 你當然可以使用谷歌。 而我們為什麼不只是 建議你嘗試解決 至少在這裡一個具體問題。 因此，在標籤而言， 讓我重用這個在這裡。 其實，讓我把 它在一個文本形式。 比方說，我們可能會在標籤中 這裡使用在這邊，一些標籤。 我們已經看到了段落標記。 現在，它會自動完成。 段落標記，錨標記。 比方說，你想 做出更大的東西， 所以你可能like-- 跨度標籤可以提供幫助。 嗯，你可能需要一些幫助 對於在短短的時刻。 我們已經看到了格。 你會看到有表。 還有一些所謂的TR，TD。 日，TD。 回過頭來，在一個時刻。 還有什麼可能會派上用場？ 有強烈的。 有重點，或者說他們。 There's--還有什麼 你可能會看中這裡？ 好了，我們將採取 在這一起來看一下。 形式，這是我們見過的。 有形式。 有輸入和其他幾個人。 好吧，讓我們做到這一點。 要回答維多利亞的 問題，讓我先 只是確保每個人都 能夠得到他們的招呼工作。 那就讓我來介紹 一對夫婦的其他想法。 然後，我們將讓鄉親們解決 一些自己的問題。 然後，我們將真正回來 到窗體的這一概念， 我們實際上將重新實現 一起前端接口， 可以這麼說，對於谷歌本身。 我們將使用谷歌作為後端，讓 他們做的辛勤工作，搜索， 但我們會重新前端 谷歌和搜索表單 他們有自己的主頁。 因此，我們會回來的 這些標籤在短短的時刻。 所以這是我 提出剛才。 我們可以程式化添加到 這種風格標籤內頁， 我們可以風格化背景 顏色，文本對齊， 無論是中心或左​​或右。 但很快你會 或者找一個網頁設計師 會發現，這 變得有點笨拙， 因為你在做什麼 所謂的混合內容 與呈現體。 你是混合數據 及其美學。 而事實上，如果考慮 有什麼事情發生了時間 - 這是一個非常小 網頁，當然。 但是，如果我添加內容到這個網頁 我添加樣式到這個頁面， 頁面很快得到 長和長。 再假設，我想 具有第二網頁 全體這些屬性。 假設我的第二個網頁為我的 相關網站 - 也是，我想要的一切中心， 我也想要的一切 與綠色背景。 我幾乎將不得不 複製和粘貼一些線路 成第二個文件，這感覺很好。 這將解決這個問題。 但是，如果我想要什麼第三頁 或第30頁或40頁？ 現在我將要複製和 粘貼了大量的重複代碼 在多個文件中。 所以假設 我決定還是有人告訴我， 哎，我們沒有使用 綠色背景了。 我們將開始使用橙色。 你有什麼改變？ 好吧，你必須改變這種風格 從綠色到橙色多少地方？ 像30或40位。 這是乏味的。 它們也容易出錯。 有許多原因 在這裡你不會想誘使 那種痛苦為自己的。 所以就不是很好 如果我們能夠採取什麼我只是 這兩個黃色之間放 標籤，這些標籤的風格， 它因素出來，把我所有的 風格化到一個中央文件 所有30或40的我的其他文件 借用或以某種方式引用， 沒有什麼不同的網絡 圖我們以前在做什麼？ 所以，如果我去這裡，我 要真正提出 我們更換 風格標籤的東西 所謂的鏈接標籤， 是可怕的，可怕的名字命名， 因為你不使用 鏈接標記創建什麼 我們人類所知道的在Web頁面的鏈接。 為此，您使用的標籤？ 如何創建一個網頁中的鏈接？ 聽眾：在A。 DAVID J. MALAN：在A，或錨 標籤，在此之前去了迪斯尼。 這裡的鏈接標籤說 this--鏈接一個名為 styles.css的，在何種關係 將是，它是我的樣式表。 因此，這是S在一 CSS--級聯樣式表。 風格sheet--兩個的s中的CSS。 層疊樣式表。 這也就意味著，哎，瀏覽器，訪問 找到styles.css的本地服務器上 並把它作為你的樣式表， 這意味著文件的內 將是所有的 我們剛剛完成的風格化。 還等什麼該文件 可能看起來像就是這個。 我會只是做這是一個快速 例如，因為我們不需要 獲得太多進入這裡的雜草。 但是，如果我複製這個，就是我建議 是一個程序員創建一個新的文件， 粘貼這些lines-- 在這些線路whoops--粘貼， 保存為styles.css中，然後，在 另一個文件，刪除了這一切 和替換它，而不是 此鏈接標記。 所以，如果我鏈接HREF =“styles.css的” 的關係應是“樣式” 結束標記。 保存。 回到我的HelloWorld。 重新載入。 從字面上看什麼都沒有發生。 這是一件好事，因為它 意味著它實際上是所有的工作。 為了證明之多，假設我做一個 錯字，我稱之為“Styles.css中” 用大寫字母S，這是 不正確，然後重新裝入。 現在，你可以看到它是行不通的。 現在，為什麼？ 好吧，讓我們用一個 從早期的技術。 讓我繼續前進，並在 我的瀏覽器，在Chrome中，我 將開闢特別 網絡選項卡和以前一樣， 讓我重新加載頁面。 你是什​​麼人並不感到驚訝，現在看？ 或者，也許你很驚訝地看到它。 無論哪種方式，你怎麼看現在？ 聽眾：[聽不清] DAVID J. MALAN：它沒有找到。 為什麼沒有發現？ 那麼，Styles.css--資本 S--不存在。 我名不副實了。 簡單的拼寫錯誤。 但我現在越來越理解 404，因為服務器是在說，哎， 它沒有找到。 從字面上看，我不知道 文件所在。 因此，作為結果，瀏覽器 告訴您什麼是可以的， 頁面的原始內容， 這是一個200時，HTML， 但程式化不能 在此後加。 這是什麼通過級聯的意思​​。 您可以排序的添加 之後，它的排序 細化網頁的美觀。 你甚至可以覆蓋這些 樣式還沒有其他的樣式表文件 如果你想。 它沒有發現，雖然，在這種情況下， 因為，當然，我名不副實了。 所以，我必須先解決這個問題。 因此，讓我們繼續前進， 提出以下建議。 讓我們繼續前進，並做到這一點。 或許與開始 您的HelloWorld文件， 讓我只邀請一對夫婦 均設有建議。 所以，維多利亞，你想 做一些文字更大，對不對？ 好吧，所以我們可以 不要讓文字變大。 我們會每拔斷 只有一個問題要解決。 讓文字變大。 我不會去打擾 我們在寫這個 有子彈的技術就在這裡。 所以一些問題。 因此，我們打算嘗試 使文字更大。 好吧。 還有什麼會有人求婚？ 我們還有什麼可能想 在一個網頁怎麼辦？ 讓我們拿出一個 東西短名單 然後委託給 組摸不著頭腦。 聽眾：[聽不清] DAVID J. MALAN：OK，位置文本 在頁面的不同側面？ 好吧。 別的東西。 聽眾：[聽不清] 戴維·馬蘭：是的。 因此，一個GIF只是一個 不同的文件格式。 我們只是用，有什麼，一個 PNG或可能是一個JPG？ 我們使用的JPG。 如果你好奇，過度 回答你的問題 是JPG通常用於 照片，因為它支持 數以百萬計的顏色或24位色。 一個GIF一般用於一樣， 網絡爆紅這些days--動畫， 像GIF動畫。 但它發生在使用較小的色 調色板中，只有256種可能的顏色， 但它支持 透明度和動畫。 然後還有PNG，它支持 透明度和更多的顏色 但不是動畫。 所以這是一個折衷。 所以添加GIF，不過， 在功能上 相當於增加一個PNG或JPG格式。 是啊。 圖片來源等於。 所以別的東西。 讓我們拿出的東西， 我們送到維多利亞在這裡做。 聽眾：添加按鈕的形式。 DAVID J. MALAN：OK。 因此，添加按鈕的形式。 我們會做一個在一起。 所以這將是一個完美的SEGUE 之後這一挑戰。 還要別的嗎？ 你可能會喜歡做什麼？ 該網站給人的感覺非常深刻印象 如果這是我們所能做的。 聽眾：更改文本的顏色。 DAVID J. MALAN：改變是什麼？ 聽眾：文本的顏色。 DAVID J. MALAN：文本改變顏色。 好吧。 所以，讓我們做到這一點。 只是再這樣，你是沒有，只是 死記硬背，做的正是我在做什麼， 我要打開音樂 這裡也許五分鐘。 歡迎你使用谷歌。 歡迎你來問我，和 我會在你的耳邊耳語了伏筆。 歡迎您看 在其他的肩上。 但是，僅僅解決這些問題之一。 但是，我們會做的最後一個， 形成一個，如果我們能一起。 所以，五分鐘解決 這些問題中的任一項 使用谷歌，直覺，或任何 您可以使用其他手段。 [音樂] 好吧。 如果你想無後顧之憂 保持修修補補， 但我會寵一對夫婦 這些答案。 所以從第一個建議 維多利亞是使文字更大。 因此，有幾個方法可以做到這一點。 目前我已經恢復 我的屏幕上這個尺寸， 雖然我已經放大 人為剛才看到的東西。 讓我們做到這一點。 讓我繼續前進，搶 一些通用的拉丁文本 只是讓我們有一些工作。 所以給我的只是一個瞬間。 我會讓三段。 好。 這將是一個更好的例子。 所以對於好奇，在 我hello.html的，我只是 粘貼3無厘頭 拉丁段落 只是讓我們有一些文字的工作。 和維多利亞的目標是 做一些文字做大。 所以，我可以像以前一樣，在這裡猶豫。 讓我做了正確的方式。 我將有一個鏈接 標記，指向文件 所謂“styles.css的”的關係 其中又是“樣式”。 然後，我要保存 並開闢這個“styles.css的。” 所以，像以前一樣，我有 才能在這CSS文件 實際上覆蓋默認 網頁的美學， 和默認美學， 當然，是相當平淡。 這有點正常的字體大小，黑色 文字，白色背景，等等。 因此，假設我要打 這一切的文字更大。 我可以做一些事情。 在我styles.css的文件，我 可以說，你知道嗎， 適用於以下內容 身體我的網頁。 來吧，讓 字體大小24點， 這是一個數字我可能 在Microsoft Word中使用。 讓我回到我的網站 這裡是頁和重裝， 你可以看到， 它已經大得多。 而且，我們可以得到一個有點瘋狂， 就像我們可以在desktop-- 讓96分。 重新載入。 而且它變得有點 笨重在這點。 但我可能是有點更精確。 相反，應用此的 樣式表到我的頁面的主體， 還有什麼會我把它應用到相反， 還有什麼其他的標籤可能仍然 以同樣的方式的功能？ 聽眾：p標籤？ DAVID J. MALAN：P標記。 這樣的頭部將不會 正確的，因為頭部， 你不能真正 控制的美觀。 有兩種文本有或沒有。 但是，在p tag--我可以在一個小跳水 更深層次的，可以這麼說，段落 標籤。 而且即使有三種， 這是完全正常的，因為在CSS， 我只是說“P”，這 是指應用以下 要匹配這個任何標記 選擇器，選擇器剛 作為標記的名稱。 所以，無論你看到一個 “P”，應用的字體大小， 讓我們使它更 合理again-- 24點。 你知道嗎， 只是良好的措施， 讓我們的顏色 紅只是一瞬間。 現在，如果我重裝，現在我們 看到三醜段落。 但現在假設我是那種 of--我想第一段 在用戶跳出。 我不想只是增加 一切的字體大小。 所以，其實我是想找出或 這些段落進行區分。 因此，讓我們擺脫了紅， 因為這只是樣的俗氣， 讓我們繼續前進，使 字體大小12點在默認情況下， 讓我們回來的東西 多了幾分合理性。 而現在我只是想增加 第一段的字體大小。 我可以在幾做到這一點 方法，但這是一種方式 也許最教學在 時刻做到以下幾點。 讓我繼續說，這 段有一個唯一的ID“第一”。 我可以把這個事情我想要的。 我可以稱之為“富” 或任何其他的話， 但我要去給它一些 語義上有意義的名字 像“第一”。 這是唯一的標識符， 的ID，我的第一個段落。 我現在可以做我的樣式表 是有點更精確。 與其說，適用 下面的p標籤， 我可以說的following-- 應用下面， 或選擇，HTML元素 具有的一個獨特的ID“第一”。 我怎麼想申請呢？ 24點的字體大小。 所以，我有兩個選擇現在。 一個使所有的 第12點。 但是這一次，特別是因為它涉及 second--說到最後在file-- 這有一個連鎖效應。 我只是做了我所有的 段落標記12點， 但是這個現在瀑布和 將覆蓋任何元素 在該頁面，在其頁面中的任何標記 獨有的ID是報價引文結束“第一”。 在這方面包括hashtag 只是意味著“唯一標識符”。 我不把它放在HTML文件。 我，在這裡，只說 報價引文結束“第一”。 因此，讓我重裝。 現在我看啊，OK。 我的意思是，它不是 漂亮，但它是一種 像序文到 本書或類似的東西， 其中第一款是更大的。 可以用更加精確 只是第一個字母，但至少 我已經行使更多的控制。 現在maybe--也許我想這樣做 偶爾會因為種種原因， 所以我不希望這 適用於只有一個HTML標籤。 相反，讓我們say--讓我們 也可以在下面。 CLASS =“進口”。 而一個ID用於唯一 確定一件事，一個標籤， 在網頁中，一個類，就是要 在任意數量的元素或標記的使用 在您的網頁。 所以它的可重複使用的。 一個ID是不能重複使用。 一類是可重用的。 你知道嗎，不管是什麼 哲學reasons-- 我沒有完成我的 以為 - 我要說 該第一段和 第二段是很重要的。 所以我打算申請調用的類 “重要”，如果我救我的文件 並重新加載，無 功能影響呢。 不過，我已經添加了一些 元數據文件， 諸如此類的東西分開 從該文件的核心數據， 所以，現在在我的樣式表，如果我 而不是說“。重要” - 要知道， 什麼這很重要，我 將會使字體顏色，red-- 或者更確切地說，不是字體​​顏色，只是顏色。 有不一致之處 在CSS中不幸。 並重新加載。 現在注意到的第一件 兩個段落是紅色的 而第三個，因為我只 應用之類的“重要” 前兩個的那些東西。 所以在IDS中，你有能力 指定非常精確。 帶班，你可重用性。 但在這兩種情況下，請注意 那種良好的設計原則 在這裡我分解出來的所有的 美學我styles.css的文件。 所以，這裡沒有雜亂。 有沒有紅色提及或 在這個文件中大膽面向或字體大小。 而我有語義， 有意義的特點我數據， 這裡是一些重要的數據。 這裡是一些更重要的數據。 此外，這裡是 “第一次”我的重要數據。 因此，HTML是所有關於排序 的標籤，從字面上看，字 和段落結構在 這些小提示頁面，如果你 願意，你可以 不知何故利用使用 其它技術，如在這種方式的CSS。 所以在回答維多利亞的問題， 我們可以使文本的那樣大。 有這麼多其他的方法，但 字體tag--開括號“字體” - 其實是幾年前。 而這就是問題所在， 也與只依靠 在線resources-- 他們往往是過時的。 事實上，這是被棄用， 因為世界上實現， 是什麼“FONT-SIZE = 7”是什麼意思？ 它沒有。 等多年，並 此day--側之一 這裡指出的是，它實際上是 令人難以置信的痛苦，有時還 開發對站點 網絡，因為微軟 和谷歌和Mozilla和 別人不同意往往對如何 解釋如HTML規範。 有HTML的規​​則手冊說 一般所說的每一個標籤的意思。 但有時它留下來的 執行的自由裁量權， 微軟的自由裁量權和谷歌。 所以你會經常 看到一個網站的東西 看起來在PC上不同 比它在Mac上， 這就是真正的原因， 在一天結束時， 他們沒有測試 以及在這兩個平台。 但它也因為合理的， 聰明的人會不同意 和公司會不同意，等 編程的挑戰之一 針對網絡或設計 東西網路 是寫你的網站的方式 的作品在每一個網頁瀏覽器。 但是，即使這是不合理的，對不對？ 有這麼多這麼多版本 瀏覽器在那裡，在某些時候， 你還必須作出判斷電話 你必須決定作為一個公司， 尤其是電子商務式 在這裡你的網站 嘗試使用最新和最偉大 技術給一個很好的用戶 經驗。 但是，你的用戶的一些百分比可能 仍然在使用Internet Explorer 6或7 或8，尤其是取決於 國家，他們來自。 所以非常普遍 徵詢的東西 像“網絡瀏覽器的統計數據。” 而如果我們中場休息讓我們來看看維基百科 看看如何了最新的這張圖 如果有一個。 所以在這裡你可以看到 其中，實際的瀏覽​​器 是，根據2015年12月， 根據美國政府。 Chrome是在42％的市場份額，其次 通過IE瀏覽器主要是在企業設置 或PC設置，當然， 其次是火狐， 那麼Safari瀏覽器，然後歌劇院沒 使地圖這裡出於某種原因， 然後其他人。 也許這是在其他。 但更重要的問題is-- 讓我們來看看維基百科也有 瀏覽器版本version-- 讓我們去到瀏覽器的統計數據。 IE瀏覽器。 甚至這還不夠。 瀏覽器統計數據。 我的版本。 這不會是正確的。 讓我們來看看版本。 瀏覽器市場份額。 讓我們來看看這來了。 好。 這是現在越來越 一點更加有用。 所以在這裡，請注意，我們都 不同版本的瀏覽器。 而且，我的上帝，如果你look--鉻 48，鉻47，鉻31，鉻45。 我的意思是，越來越多的瀏覽器更新， 有時某些更改 在顯著 功能方面。 因此在某些時候，該 產品經理或工程師 需要進行decision--你 知道嗎，世界上只有1％ 仍在使用IE 7。 與他們的地獄。 我們只是不打算 支持該瀏覽器。 什麼意思不支持？ 這可能意味著，按鈕 不要你的網頁上工作， 或者它可能意味著 格式是完全關閉。 或者你可能不得不做出 同樣的判斷調用 移動這些天，在這裡，我們 不會支持iOS 5了。 因此，人們只需要升級。 或者，我們不會支持蛋糕 在Android操作系統的Andr​​oid設備， 因為隨著天下 - 作為 高科技世界需要向前推進， 它種要拖 世界與它，使他們不 要繼續 向下兼容所以他們 可以提供新的和好的特點。 這確實是原因之一 為什麼這麼多的公司正在推出 自動更新和排序迫使 軟件對我們的最新版本。 甚至有企業 像蘋果將整理的 強迫你幾乎強令 你在市場力量方面 新買的手機，因為他們只是 不會再更新您的舊手機。 所以，你錯過了 最新，最大的特點， 因為它是昂貴的它們作為一個 公司保持舊的，按理說 劣質版本的軟件。 但淨效果是 我們也遭受這一點。 因此，讓我們來看看剛 一對夫婦的最後的東西在這裡。 讓我們敲斷實快一些 其他子彈，如果好奇。 所以，如果你想， 例如，位置 在不同側面的文字 頁面，我打算做一快捷方式， 但有不同的 這樣做的方法。 讓我繼續前進，eliminate-- 簡化如下。 讓我回到我的 簡單，簡單的段落。 讓我回到我的styles.css的。 而我只是將使用simple-- 你可能已經看到在谷歌 或者回憶先前已經 文本右對齊。 然後刷新頁面。 現在，一切似乎 是右對齊， 因為你可能在開銷在這裡看到。 我們可以使它看起來多了幾分 書狀，我們可以說“辯解” 並重新加載。 現在是很好的和兩個廣場 兩側，這是一種不錯的。 我們在這裡有另一個目標 是文字的改變顏色。 因此，我們看到，與我的紅色文字。 現在添加按鈕的形式。 那麼，我們為什麼不嘗試做正是這一點？ 但是，首先讓我去一個網站， 我們大多數人每天使用谷歌day--。 讓我們來看看 谷歌如何實際工作。 但我會做到這一點。 首先讓我來做in--是的， 讓我去谷歌第一。 我將不得不去 到谷歌設置， 因為我想禁用 一些所謂的立竿見影的效果。 所以，你可能會在已經注意到 谷歌這些days--讓我回去 並把這個上。 所以，如果我開始搜索 對於“貓”這樣， 注意到，不僅做到 我得到自動完成向上 頂，一下子，頁面本身 似乎很快改變為好， 這就是谷歌使用的語言 JavaScript調用嘗試是有益的。 但不幸的是，它種 的食堂了我們的討論 什麼實際發生 這裡的引擎蓋下面。 所以，我只是那種迅速 關閉立竿見影的效果。 而且我要點擊保存。 現在我要去開 該診斷工具欄，我 保持網絡選項卡下開幕。 因此，讓我們做到這一點。 讓我 - whoops-- 這個滾動了一點。 讓我搜索“貓”。 而現在notice--實際上， 這是一個很好的機會 一會兒討論。 請注意，那一刻我類型 - 停止它。 停下來。 好。 請注意，那一刻我鍵入字母 C，看屏幕的底部。 A- T- S.什麼底部 這個畫面，我的網絡選項卡， 建議正在發生各 一次，我鍵入字母？ 不幸的是，青蛙很 今天分心或三葉草 或不管他是。 什麼是每次我打的時間發生了什麼？ 讓我清除 緩衝區並再次鍵入它。 So--哎呦。 我每次鍵入一個字母，C- A- T-- 所以新行顯然繼續出現。 什麼是每個那些行的代表， 基於我們所看到的和討論 迄今？ 聽眾：搜索？ DAVID J. MALAN：搜索，或 更一般地，一個HTTP請求 從我的瀏覽器到服務器。 那麼，為什麼我的瀏覽器發送HTTP 要求我每次鍵入一個字母？ 聽眾：[聽不清] 戴維·馬蘭：是的，它給 我這些自動完成的結果。 等等，其中做這些 搜索結果從何而來？ 好吧，我每次鍵入 信中，谷歌發送更多 而且越來越多的 我打字的話。 為什麼？ 因為他們想給我一個 好，更好的建議， 建議列表，為了什麼字 我想真正完成。 因此，這是從字面上說，每 字符鍵入到谷歌 被發送，並最終在 散裝，而且有時候一個人 在為了實現時間 這些自動完成功能時 該數據是，當然，在網絡上。 現在，讓我們來看看究竟是什麼 當我點擊谷歌搜索發生。 然後，我們將利用這個自己。 所以，如果我現在向下滾動到非常 剛剛發生的第一次請求。 請注意以下內容。 它被送到一個相當長的URL-- https://www.google.com/search？ 然後一大堆東西。 現在，讓我們真切地看到這 在瀏覽器選項卡本身。 讓我們擺脫工具欄的位置。 下面是搜索結果的頁面。 並注意這裡的URL。 現在，你可能已經猜到 這是怎麼回事的部分。 所以首先，定義。 這顯然是目標 其中，提交表單。 所以，當我在輸入 詞“貓”並按下回車鍵， 顯然谷歌發送 我的文字輸入到該網址 我已經強調 還有，斜線搜索。 事實證明，在一個URL，任何 之後發生的一個問號是， 正如我們一直在說，一個鍵值對 被輸入到表格或以某種方式 從發送的 瀏覽器到服務器。 所以，任何時候你輸入型 到Web上的表單 並且我們將它的發送 一直在討論，通過GET， 這些虛擬之一 信封，內容 那envelope--是，保持 得到身體釀 入類信封 今天，但技術 它實際上是放在URL。 所以，事實上，讓我通過這個篩選。 你在哪裡看到用戶輸入？ 你在哪裡看到的東西 我自己輸入了嗎？ 是啊，所以“貓”。 對？ 因此，讓我這個提煉 成簡單的東西。 我要刪除有關的一切 這個網址我不明白， 而我只是要離開 它作為this-- /搜索？Q =貓。 我們會看到其中q 來自於一個時刻， 但感覺就像最低 我提供的信息量。 而現在我要敲回車。 並注意它仍然有效。 我們還是拿回一大堆貓。 因此，谷歌是票友 比這這些天。 這是2016年，1999年沒有。 因此，有其他的東西，我的 瀏覽器發送到服務器。 但是，這是最低限度 所有的必要。 發生什麼了？ 那麼，首先讓我去前進，去 回到Cloud9，讓我繼續前進 並關閉我的標籤前面。 我會做我的 自己只是片刻。 我要繼續前進 並創建新的文件。 而且我打算把它保存為google.html您。 而且我會很quickly-- 我要偷，其實， 有些這段文字只是為了節省時間。 我要粘貼在了這裡。 我不會跟打擾 任何程式化這個時候。 我們要稱之為“我的谷歌。” 而且我要擺脫 在體內的一切。 而且我要做到以下幾點。 讓我放大]。 形成action--和我簡要地提到 先前已經whoops--我簡要 如前所述，一個動作 形式是，將數據發送到。 所以google.com/search。 和方法我想使用 可能是兩件事情之一。 它可以是“得”，作為我們不斷 討論，也可以是“後”。 現在，根本 不同的是，如果你使用“獲得” 所有的信息 用戶提供的URL被發送。 這是偉大的東西像搜索 發動機和一些其他的應用， 但在什麼情況下會 你不想填寫表格 並具備信息落得 URL，就像在瀏覽器的地址欄？ 什麼樣的形式做你 - 聽眾：[聽不清] 戴維·馬蘭：是的，像什麼？ 聽眾：密碼。 戴維·馬蘭：是啊，所以你登錄 到Facebook或某些網站。 這是一個從用戶輸入 一種形式，一個文本框， 但你可能不希望它 顯示了在瀏覽器的URL。 為什麼？ 我的意思是，也許有一些 在網絡上的安全隱患， 但緩慢 - 喜歡，更簡單地說，如果有什麼 你的室友，你的顯著等， 你的孩子，你的配偶看起來 通過您的瀏覽器歷史記錄？ 還有就是你的密碼正確 有在瀏覽器的歷史記錄。 這並不覺得自己是最好的設計。 甚至更多技術上， 假設你想 上傳照片到Flickr 或Facebook或wherever-- 即用戶輸入，即使 這是一個有點interesting--如何 我擠在地址欄的形象呢？ 你有種那種不能。 你有種就可以。 不過，說真的，我是捉襟見肘 想像這樣做。 所以，我需要另一種方法 上傳照片到網站， 和其它方法被稱為“後”。 但現在，我們只說說 “獲取”，這是兩者的簡單。 它只是把所有的 用戶輸入的URL。 因此，這裡是我創建的形式。 我想要的輸入。 你知道嗎？ 我要在這裡採取了猜測。 我要我的回憶 輸入“Q”的“查詢”。 我認為這是一個 原創設計，也許，從1999年。 然後該輸入的類型 只是將是“文字”。 然後，我將有另一個輸入 這並不需要一個名字，因為我們很快就會 看，它的類型是“提交”。 而這將 給我一個特殊的按鈕。 就是這樣。 因此，讓我繼續前進，保存此文件。 我要回到我的 瀏覽器並轉到google.html您。 輸入。 而且它是一種疏 至少可以說。 但讓​​我先走 並搜索“貓”。 並注意我目前 在這個Cloud9 URL。 但此刻我點擊這個， 你在哪裡希望我將結束？ 聽眾：谷歌。 DAVID J. MALAN：谷歌。 因此，讓我們點擊提交。 事實上我已經重新實現谷歌。 對？ 這是簡單的。 它更輕。 我的意思是，我的代碼顯然要比好 他們從混亂我們前面看到的。 你知道嗎？ 我要這個香料一點點。 我沒有提到這點。 有標籤，如H1，標題1， 在一個頁面的最重要的項。 “我的谷歌，”我會叫這個。 讓我重裝。 它看起來好一點了。 而且，事實上，你知道嗎？ 我已經already--我撒謊了。 我說我不會去的風格這一點， 但我要的作風，像以前一樣。 而我的身體將是， 讓我們說，文本對齊中心。 它看起來更像是谷歌了。 我需要一個換行符，不過， 對於提交按鈕。 而事實證明，你 可以使用段落， 或者你可以更從字面上只是說， 給我一個換行符這裡 - 的br標籤。 如果我重新加載此，現在去那裡。 這是一個有點難看，所以我 可以做多換行， 但讓​​我們不要太貪這裡。 所以，現在讓我們來看看它是否適用於“狗”。 這似乎為“狗”，正常工作。 所以，這裡有什麼令人信服的外賣？ One--是不是一個巨大的飛躍， 介紹幾個更多的標籤， 像輸入標籤的形式標記。 但更重要 是，我們所做的 正在利用我們的理解 HTTP和事實的 形成最終改變 什麼是瀏覽器的URL， 等等，因此，我們可以 機械地提供輸入到一個服務器 通過HTML表單和了解 服務器理解的HTTP， 就像我們的身體的理解一樣， 搖我的手，同樣的協議， 等我們回到響應 我們期待最終。 因此，讓我們試著做一 最後一件事，現在移動， 我會make--我來補充 此代碼的幻燈片。 所以，如果你想鼓搗，你 當然可以把它從那裡。 但我要去 進取，做一件事。 我要繼續前進， 打開我的索引page-- 我招呼頁面之前，這 有很多這樣的仿拉丁文字， 或無意義的拉丁文字和has-- 它看起來像這樣在這個字體大小。 但讓​​我繼續前進，做到這一點。 我要進入Cloud9。 而你沒有做到這一步。 我只是做我自己。 我要單擊共享。 這是一個功能 只是Cloud9，其中 我可以讓我的環境公開。 和公正的緣故 演示，讓我這樣做。 我打算讓我的應用程序公開。 注意它的警告我，我 我相信，我想這樣做， 因為這會令所有人 在世界上，無論他們現在在這裡 或更高版本觀看錄像上 互聯網能夠看到我所看到的。 但是，這是確定。 我會說：“完成”。 讓我鼓勵你，如果我這樣做 這correctly--讓我先對它進行測試。 來吧，如果你不mind-- 在您的計算機上的瀏覽器， 去這個網址，並希望 你會看到我的拉丁文字。 並且要清楚，這是 在我的筆記本電腦上運行沒有。 這是在雲中。 這是對Cloud9，從字面上看，但 我做了我的工作區公開 使任何人在互聯網上 可以訪問我的拉丁主頁。 轉到同一URL上 您的手機，如果你能。 如果它會花費你，但是，你 可以只查看一個肩膀。 聽眾：[聽不清] DAVID J. MALAN：對不起？ 聽眾：[聽不清] DAVID J. MALAN：只是拉丁詞。 就這樣。 但是，這是你應該看到的。 聽眾：是的。 戴維·馬蘭：是的。 是啊。 好。 所以，我可以抱你 手機只是一瞬間？ 所以，我希望，如果你訪問 它，它看起來幾乎無法讀取。 這是我still--意思是，這是 不可讀，因為拉丁語的。 但它也是不可讀 其他什麼原因？ 喜歡，有什麼不高興你這個？ 聽眾：這是小的。 DAVID J. MALAN：這是超級，超級小。 所以，我們怎麼能解決這個問題？ 這是超級，超級小 在維多利亞的電話 並且，如果你拉 它自己，可能 小您的手機上，除非你 啟用輔助功能設置。 那是什麼？ 你可以只捏和 變焦，這是可行的， 但你只能看到 同時幾句話。 所以等一下。 我知道如何解決這個問題。 對？ 我可以使用CSS，我可以改變 字體大小從12點到24點。 但是，該副作用， 當然，現在想要是， 台式機或筆記本電腦上， 現在文字的兩倍大。 所以它會有種很好 設備之間進行區分， 它原來有 是這樣做的方法。 有幾個 不同的方法，事實上， 即使用CSS和票友功能 我們不會進入的很詳細， 你基本上可以查詢 瀏覽器，並說， 如果你的屏幕比這個更小 許多像素，使用的字體大小。 如果你的屏幕比這個更大 許多像素，使用其他字體大小。 你可以更炫動。 如果你曾經訪問過 網頁，在桌面上， 有一個很大的菜單可能關閉的 側，然後將所有的內容 是的那側menu-- 這是一種常見的範例。 菜單在左邊，內容 右，反之亦然。 無法在移動真正的工作，當你 屏幕只有這麼多像素寬。 因此，比較常見的移動是， 你的菜單會突然得到 崩潰了，你必須 點擊一個按鈕，看看吧， 或網站將會把菜單 它上面並把它下面的內容。 並且可以實現這些 事情以多種方式了。 你可以問你的程序員， 哎，隊伍，隨時 你看從Android的HTTP請求 裝置，微軟裝置，谷歌 設備，一台蘋果設備，使用此 字體大小和使用這個菜單佈局， 或者使用此默認更大的佈局。 現在，使用的是什麼 今天基本技術 可以在工程師使用 要知道無論是 一個iPhone，Android手機，一台筆記本電腦， 桌面訪問公司服務器？ 其中，而他們得到這些信息？ 聽眾：頁眉？ 戴維·馬蘭：是的，HTTP頭。 所以每一個HTTP請求從哪裡來 他們的客戶他們的服務器 包括內部的虛擬 信封，一大堆 HTTP報頭的，其中一個是 瀏覽器和操作系統 甚至，如果你願意 該級別的細節。 現在，它是一個神秘的前瞻性的字符串，但 存在軟件將只 簡化了，你可以問問 編程代碼 - PHP，JAVA，C ++， whatever--什麼手機是this-- 什麼設備是該用戶使用？ 然後，你可以說，告訴他們這 該網站的版本，如果它是一個手機。 告訴他們這個版本的 如果它是一個網站的筆記本電腦或台式機。 但是，你甚至不需要 服務器端的複雜性。 你可以做事情，甚至最簡單的。 我要做到這一點。 我要繼續前進進入 我Cloud9環境， 我要去添加一個標籤 您在谷歌之前看到的。 這就是所謂的元標記。 我從來不記得這一個，所以 我要在這裡抄寫它。 META NAME =“視口”，然後 內容=“WIDTH =設備寬度，intital 規模= 1“，僅此而已。 因此，它很可能會成為 就像一個神奇的咒語。 這還不是全部清楚，但這 是與視口， 並且視口的公正身體 網頁，所述矩形區域 定義頁面的大部分。 而這僅僅是告訴 瀏覽器，你知道嗎？ 使該網頁的寬度 有效等於器件的寬度。 換句話說，不要以為 你有排序的無限空間。 假設你只有盡可能多 空間作為裝置本身大。 所以現在，如果我重新加載此 在我的瀏覽器，我看沒有變化。 但是，如果我這樣做correctly--和 讓我過我的fingers--如果所有 重裝你的手機，你 看到一個引人注目的變化？ 是啊，是that-- 聽眾：[聽不清] 戴維·馬蘭：是的。 好。 所以才更易讀現在呢？ 還小，是公平的，但不 如此的渺小，以難以管理。 我當然可以覆蓋此 進一步與CSS或在服務器端， 但越來越多的你在做什麼 看到的是越來越多的功能 被添加到 客戶端environments-- JavaScript的，因為我們將討論 明天，CSS和HTML--等等 所有這些查詢 可以在客戶端上完成 這樣打擾 服務器少了很多，而不是 以有跟上，為 例如，不斷猛攻 新操作系統的 版本，新版本的瀏覽器。 你可以讓瀏覽器 問設備，有多大你， 然後進行邏輯有點 基於該決定。 但我們會看到更多的機會 邏輯的決定 明天的背景下， 的編程語言。 因此，任何問題的話， 關於Web開發？ 今天不是網絡編程，每 SE，因為大多數的一切，我們做了 很唯美，如果你願意。 沒有決策權 我們寫的代碼， 所以這就是為什麼HTML是一種標記 語言，而不是一種編程語言。 但明天我們會採取 咋一看，最終， 在JavaScript中，這是 一個實際的編程 語言，讓我們多做一點。 任何問題？ 好吧，讓我提出了兩個 機遇可選的功課。 其中is--這些Cloud9 帳戶不會過期。 歡迎您使用 他們鼓搗。 這是服務的自由程度。 認識到，如果在創建時 您的工作區，你做公開， 這確實意味著對任何人 互聯網可以看到你輸入的內容。 因此，也許只考慮 不為難自己 如果你把你的第一個網頁 在那裡公開網頁意外， 但沒有人會 知道反正那裡尋找。 而two--讓我折騰 了這個網址為好， 特別是如果你來到今天 小比別人不太舒服， 不確定什麼是所有這些東西的意思。 要知道，更這段視頻的， 這既是入睡的好方法 也笑，同時 這樣做，也有 很多societally有趣的 與安全相關的討論 其中從約翰·奧利弗， 雖然是一個喜劇演員。 但是，如果沒有其他問題， 這給我們帶來了招待會。 那麼，為什麼我打開音樂。 應該有飲料 和小吃外。 我很高興打成一片的作為 只要人們願意， 回答問題更一對之一。 但是，否則，歡迎您 在任何時候起飛， 我們將再次見到你 明天早上多一點。 好，謝謝。