HTML

Preparing

下載並安裝VSCode
開啟Visual Studio codeVSCode
開啟W3School HTML隨時當參考
開啟一個預設資料夾web
新增檔案index.html
複製並貼上HTML Basic的內容
安裝Live Server Extension
Go Live
安裝Beautify Extension以自動化縮排、整理程式碼。按F1打Beautify，即可Beautify你所選擇的程式碼，或整份檔案。

What is element? and what is attribute of element?
What is id and class?

An HTML

以下是W3School的HTML簡介與描述，你可以參考W3School的網頁。

什麼是HTML？ HTML是用來描述網頁的一種語言。為超文本標記語言(Hyper Text Markup Language)的縮寫。HTML不是一種編程語言，而是一種標記語言(markup language)，使用標記標籤來描述網頁
HTML標籤。HTML標記標籤通常被稱為HTML標籤(HTML tag)。 HTML標籤是由尖括號包圍的關鍵詞，比如，且通常是成對出現的，比如<b>和</b>，第一個標籤是開始標籤，第二個標籤是結束標籤。
HTML檔案=網頁。Web瀏覽器的作用是讀取HTML文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示HTML標籤，而是使用標籤來解釋頁面的內容

在index.html中輸入以下內容。下列程式碼是基本的HTML文件，包含宣告這是一個html5文件、還有<head>與<body>兩個元素。

<!--This is an html 5 document-->
<!DOCTYPE html> 
<html>
    <head>
        <title>your website title</title>
        <!-- put your css and js here -->
    </head>
    <body>
        <!--put your main content here-->
    </body>
</html>

Elements 元素

弄懂Elements（元素）、HTML Tags（標籤）和Attribute（元素的屬性）指的是什麼。

以下為兩個來自Google Images的圖檔，分別用來說明何謂標籤、元素和屬性，你可以參照著看。但請你記住，何謂元素、標籤、屬性、屬性值、和內容（element, tag, attribute, attribute value, content），將有助於你學習HTML和CSS。

版面區塊標籤<div>

下圖右是一個最典型的網頁，包含上面的Banner、左側的Outliner（或Navigator）、中間的MainText、下方的Footer、右方的Supporting Information（Optional）。在這個Free CSS Layout連結中幾個網頁內容都一樣，唯一的差別是layout。http://www.free-css.com/free-css-layouts/page1。

區分這些區塊的方法要用<div>，以控制哪些文字要放在哪一個區塊。以下圖為例，分為幾個區塊。先在<div>中新增id屬性，來指示該<div>的用途。

橫幅區塊<div id=“banner”></div>
瀏覽工具區塊<div id=“nav”></div>
主文件區塊 <div id=“content”></div>
註腳區塊<div id=“footer”></div>
其他內容區塊<div id=“supporting”></div>

...
    <body>
        <div id="banner"></div>
        <div id="nav"></div>
        <div id="content"></div>
        <div id="supporting"></div>
        <div id="footer"></div>
    </body>
...

<div>出現的順序

原則上版面是由上而下，由左而右。若要排出下圖左方的版面，顯然要依照#banner、#content、#nav、#supporting、#footer排下來；若是要排成右方的版面，則是要先排#banner、#nav、#content、#supporting、#footer。

內容結構標籤<h1>, <p>

切完區塊以後定義本文的結構。何謂「結構」？下面的標題一、標題二或列表等就是一個文章的結構。前一步驟的<div>區塊元素是為了定義整個視覺化版面的結構，但這個<h1>、<h2>則是文章的結構。

<p> paragraphs.
<h1>~<h6> headings.

HTML標籤裡面可能包含另一組標籤，但也可能直接包含內容，例如下列的#nav、#banner等都是直接包含內容。基本的導覽區塊（#nav）的內容多以下一節的<li>來呈現，不會呈現在這裡。

<body>
        <div id="nav">For Navigation</div>
        <div id="banner">HSIEH HSIEH</div>
        <div id="content">
            <h1>About us</h1>
            <p>Jilung Hsieh</p>
            <h2>Eductaion</h2>
            <p>Dept. of CS, NCTU, BS, MS, PhD</p>
            <h2>Researches</h2>
            <h2>Projects</h2>
            <h2>Grand</h2>
        </div>
        <div id="footer">Here is footer</div>
        <div id="supporting">Here is supporting information</div>
</body>

但通常你看到像上述有些其實應該放在同一區塊的內容，通常會分別用<div>包起來。我重新把內容組織一下如下圖。

<div id="content">
     <div><h1>About us</h1></div>
     <div><h1>Members</h1></div>
     <div><h1>Quantified self</h1></div>
     <div><h1>Social sensing</h1></div>
</div>

資料結構化呈現的標籤 <li> <table>

用<li>, <ul>, <ol>來設計#nav的導覽按鈕或超鏈結

現在假設我希望在我的網站裡面產生一個列表，例如syllabus的calendar，且包含日期、主題和活動等三項資料，那應該用什麼方式做？最簡單的方式是用<ul>列出所有的日期、主題、活動，但這項內容是「該日期和主題有該活動」，必須要用階層式的<ul>，例如<ul><li><ul></ul><li>。<ul>表示unordered list，<ol>表示ordered list。

<li>可用來製作超鏈結選單。

例如可以在#nav這個<div>加入以下項目，預期屆時加入超鏈結後，點選後可以跳到該區段。

<div id="nav">
     <ul>
         <li>About us</li>
         <li>Members</li>
         <li>Quantified self</li>
         <li>Social sensing</li>
     </ul>
</div>

<table>

若希望做成表格，程式碼大致如下，可上W3School查閱<table>的HTML寫法。

<tr>為table row
<th>為table head（標題欄位）
<td>為table data。

要如何設定表格或列表的樣式，請見CSS一節之表格或列表的樣式化。

<h1>Members</h1>
<table>
    <tr>
        <th>Names</th><th>From</th><th>Topics</th>
    </tr>
    <tr>
        <td>Hsieh</td><td>Area 1</td><td>...</td>
    </tr>
    <tr>
        <td>Prof. Yu</td><td>Area 2</td><td>Skill 1</td>
    </tr>
    <tr>
        <td>Prof. Wen</td><td>Geography</td><td>GIS</td>
    </tr>
    <tr>
        <td>Prof. Tsai</td><td>Politics</td><td>Election</td>
    </tr>
</table>

超鏈結<a>

此時我希望#nav區塊的鏈結按了以後，#content區塊的內容就會捲動到相對應的位置。首先要為#content區塊中的每一個段落建個<div>並取個id，讓你#nav區塊鏈結按了以後就跳到相對應的區塊（href你可以把它唸成hyper reference比較好記）。

    <div id="content">
        <div id="about">
            <h1>About us</h1>
        </div>
        <div id="members">
            <h1>Members</h1>
        </div>
        <div id="quantifiedself">
            <h1>Quantified-self</h1>
        </div>
        <div id="socialsensing">
            <h1>Social sensing</h1>
        </div>
    </div>

Nav中的超鏈結

根據前面的#content<div>，#nav大致如下（你可以用自己想用的id）。我會盡量讓#nav中每一個項目的content和該Hyperlink所指到的id一樣。這樣比較好記好管理。

你也可以隨意為id取名，唯獨記住id要連字，連字建議用底線，不要用dash，日後無論做任何操作都比較不會有問題，但絕對不要有空白。
前面有掛#的這種在HTML+CSS中都代表id
這時候可能超鏈結捲動的狀況會不如預期，這等到CSS階段再做修正。
提供模板的設計師通常會先把要放超鏈結的地方標註<a href=”#”>。代表那個地方要插入一個超鏈結。

<div id="nav">
        <ul>
            <li><a href="#about">About us</a></li>
            <li><a href="#members">Members</a></li>
            <li><a href="#quantifiedself">Quantified-self</a></li>
            <li><a href="#socialsensing">Social sensing</a></li>
        </ul>
</div>

影像作為超鏈結<img>

影像本身也可以是hyperlink，例如我在我的「主資料夾」中建一個新的assets資料夾，並在裡面放圖片16.png。然後我把上面#about那一個鏈結的「內容」改為影像如下（src is an attribute, standing for “source”）。

<li><a href="#about"><img src="assets/16.png"></a></li>

字樣標籤<b><i><u>

這邊就是文字的修飾了，包含<b>、<i>、<u>等bold、italic、underline字樣。但事實上這些都可以後續用CSS來調整，如果是我，我喜歡在CSS再來調整。沒事也不用去特別裝飾你的文字樣式。

<h1>是結構類標籤，前述的<b>、<i>、<u>才是字樣標籤，字樣標籤無關乎文章結構。

版面編排進階

為何經常在別人的網頁中看到很多層的<div>（範例https://www.twreporter.org/a/opinion-mountaineer-yang）？這是為了製作版面的「階層性」。下面兩個網頁看起來很相近，但其實版面結構性不太相同。

方法一：用階層式的<div>來製作版面的分組

此時，一個做法是用<div>把#banner、#content、#supporting、#footer群組在一起（稱為右方群組），而#nav則為左方群組。屆時可以用CSS或JavaScript分開控制。

    <body>
        <div id="div_left">
            <div id="nav"></div>
        </div>
        <div id="div_right">
            <div id="banner"></div>
            <div id="content"></div>
            <div id="footer"></div>
            <div id="supporting"></div>
        </div>
    </body>

方法二：指定每個<div>的class屬性來製作版面分組

另一種做法是指定<div>的class屬性，告訴瀏覽器說，哪些區塊是一組的。

What is Class? 顧名思義，所有的元素中，id屬性的值必須是唯一的；class相較於此，既然他中文被翻為「類別」，那意味著多個元素都可以使用這個類別。

    <body>
        <div id="nav" class="left"></div>
        <div id="banner" class="right"></div>
        <div id="content" class="right"></div>
        <div id="footer" class="right"></div>
        <div id="supporting" class="right"></div>
    </body>

Final HTML

注意事項

HTML中空白

HTML的程式碼中不管是有多少個連續空白均只會被列為一個空白，所以有些程式設計師會利用這些空白來讓程式碼排列更好看。若非要空白不可，就要打Escape character:   http://www.w3schools.com/html/html_entities.asp

Meta tags

https://metatags.io

PreviousSlides NextCSS - basic

Last updated 3 years ago

Was this helpful?