DAVEN FARNHAM:今天,我要 說一下關於HTML, 超文本標記語言。 你看到的HTML到處都是這些天。 事實上,如果你在看這個 在瀏覽器中的視頻,你 查看HTML現在。 HTML不是一種編程語言, 相反,它是通過使用一種標記語言 Web瀏覽器渲染網頁 在互聯網上。 所以,你可能會問,究竟是怎麼寫 網頁中的HTML不同 從編程編寫一個程序 像C語言? 那麼,C是非常嚴格的語言 該需要是語法規則 編譯後才能運行。 如果你曾經忘記了包括 分號在一個語句的結束 你的C代碼,你知道我在說什麼 大約在問候嚴格的語法。 雖然Web瀏覽器,是一個比較 原諒,當涉及到的HTML。 即使你的HTML在語法上不 正確的,你的頁面可能仍然是 在瀏覽器中顯示,但它可能 不看你意。 因此,它總是最好 遵守規則。 獲得一個直覺的最佳方式 有關如何工作的事情是 經過一個例子。 所以,我們這裡是一個基本的 藍圖的網頁。 你可能已經注意到了很多東西 在尖括號中。 那麼,那些都只是標籤。 標籤基本上告知Web瀏覽器 那個,嘿嘿,東西 是未來的路。 但請記住,當你打開一個 標籤,你需要關閉它,一旦你有 用它做。 因此,例如,我打開一節 與開放代碼 支架體,右方括號。 我再添加一些文字,在這種情況下,我 第一個網頁然後我去的時候 結束這一節,我用的差不多 具有相同的標籤,除了這一次 體前正斜杠。 在一般情況下,這是你的格式 去每當你打開使用 標記和結束標記。 總之,開放標記和結束標記 構成所謂的一個元素。 如果你看第一行,你會 看到一個感嘆號後面 DOCTYPE HTML。 這真的只是告訴瀏覽器 該文件是一個網頁 用HTML編寫的。 HTML標記本質上說, 這裡談到一些HTML。 然後我們有一個頭與標籤 裡面一個標題標籤。 head標籤你能想到的作為 自帶的包括HTML程式碼 你的大部分網頁的 實際內容。 一般情況下,你把標題您 這裡的網頁,雖然有一些 可能出現的其他標籤 在這裡也。 接下來是您網頁的身上, 您的網站實際的肉和骨頭。 在我們的例子中,我們只是把一個簡單的 一句話,我的第一個網頁, 其中,如果我們運行我們的網站,看起來 有點像這樣。 我們的網頁是不是太奇怪, 但不要擔心。 我們很快就會雲杉它。 所以上面的HTML,我們會給你一個非常 基本模板的網頁, 沒什麼特別的,只是光禿禿的骨頭。 但是,如果我創建一個網頁, 如果我想添加一個 ,比如說我自己的圖片? 好吧,我能做到這一點。 有幾個方法可以 將圖像添加到您的網站。 如果圖像是在同一文件夾中 您的HTML文件,您可以鏈接到 通過路徑的圖像是這樣的。 你打開了一個圖像標記後面 通過在alt屬性 源的圖像。 alt屬性的值僅僅是一些 在另一種情況下,一個文本用戶不能 查看該圖像。 或者,您也可以鏈接到 通過一個完整的URL的圖像,像這樣。 現在,該網站實際上並不存在, 但如果有一個圖像 我在這個地址,我可以使用 來源網址,包括 它在我的網站形象。 無論哪種方式,你結束了一個多 漂亮的網站,這樣的事情。 嗯,這是很酷,但我種 的想一些文字在這裡。 因此,讓我們剛剛添加的東西 上述超簡單 圖像,類似的標題。 所有我到目前為止所做的是使用頭 標籤,H1和換行符標籤,BR。 標題標籤使字體有點 位更大,更突出。 換行標記,對其他 手,是那種很酷。 與大多數其他標籤,你沒有 在開幕式和閉幕式換行標記,只是 上面所示的1。 這是因為休息沒有內容 因此,是一個空元素。 這樣的空元素,你可以打開 同時密切只需 包含斜線的 在最初宣布結束。 所以現在我的網站看起來有點 這樣的事情。 一種更好的,但感覺 就像一個死胡同。 有無處可去一邊 從這個主頁。 好吧,讓我們來解決,通過 包括一個鏈接。 我什麼都做的,是使用 由A表示的屬性,使 圖像的鏈接,讓我們說,CS50電視。 這樣一來,只要有人點擊了我, 他們的瀏覽器將被引導到 另外,可能更 有用的網頁。 我不得不盡量減少大小 文字有點,因為我們的網頁是 越來越先進。 但我希望,它仍然是清晰的。 我的網站看起來一模一樣的唯一 現在,每當我點擊圖片, 我的瀏覽器會打開另一個 標籤為CS50.tv網頁。 最後,讓我們說我要去風格 本網站以後使用CSS。 CSS是被稱為一 級聯樣式表。 它基本上提供了一個高效 的方式來編輯和風格 相似的塊的代碼。 我要開始組織我的HTML 使其更易於樣式以後。 在這裡,我設置了兩種不同的 標識符來幫助組織我的代碼。 我用的ID屬性裡面 部門或div標籤,我已經使用了 裡面的類屬性 另一個div標籤。 id和class屬性 類似的工作。 唯一的區別是只能有 一種元素,具體的ID,但 任意數量的元素 可以共享一個類。 因此,例如,我可以使用類 圖像多次,但我不能 創建另一個師 與ID頂部。 雖然我沒有深入研究的CSS, 常用的另一種語言 旁邊的HTML,一旦我開始造型 我的代碼利用CSS,我可以使用這些 組織屬性的影響 我的網頁的美觀。 該部門內的頂級一切 將具有類似的花式或任何 另一組的HTML我組進 一流的形象將共享同樣的目光。 這是比試圖編輯更加容易 和風格的圖像或塊 個別文本。 於是我們過的怎麼樣的基礎知識 做一個網頁的HTML。 HTML有很多其他的功能了 當與其他語言配對 如CSS和JavaScript,才能真正 使網頁中脫穎而出。 獲得舒服的最好方法 HTML只是周圍的混亂了, 看看是什麼在起作用,哪些沒有。 我的名字是Daven法納姆。 這是CS50。 因此,例如,我可以使用 類圖像 - 不,有這麼多的屬性。 我的名字是Daven法納姆。 這是CS 650。 我想說的CSS。 這是CSS。