GCSE 計算機/HTML

網頁現在是許多人生活和工作中不可或缺的一部分。越來越多的計算機功能現在轉移到基於 web 的應用程式，熟悉這項技術非常重要。

如何學習 HTML

學習 HTML 最簡單的方法是製作一些網頁。如果你有像 Dreamweaver 這樣的程式，請確保你使用程式碼檢視，不要像使用高階文字處理器一樣將專案拖放到頁面上。一個很好的網站，可以讓你瞭解下面解釋的標籤，是 https://w3schools.tw/html/ ，並使用他們優秀的“試一試”功能。

網頁結構

你可能在中學使用過所見即所得編輯器（例如 Front Page 和 Dreamweaver）製作過一些網站。在 A-Level 計算機課程中，我們將研究這些編輯器生成的程式碼，以及如何用程式碼構建網頁。在任何瀏覽器中開啟本華夏公益教科書頁面，然後在 Firefox/Chrome 中按 CTRL+U 或在 Internet Explorer 中按 檢視 -> 頁面原始碼，你應該可以看到網頁程式碼。

HTML - 超文字標記語言，用於構建網頁的語言

所有網頁都具有以下基本結構

HTML - 指定這是一個網頁
- Head - 包含頁面的標題，以及程式碼和 CSS 包含
- Body - 顯示主要頁面內容

可以用以下標籤在 HTML 程式碼中表示

<html>
  <head>
    <title> Title goes here</title>
  </head>

  <body>  The main body of the website goes here - likely to many lines </body>
</html>

<title>先訪問我的網站</title> - 這會在瀏覽器頂部（而不是網頁頂部）放置一個標題
<meta name="Description" content="使用最純淨的......"> - 使搜尋引擎能夠更好地對網頁進行分類，他們可以知道該網站是關於什麼的
<meta name="Keywords" content="優質......，批次......，堅固......，......公司"> - 你曾經可以新增關鍵字來告訴搜尋引擎該網站是關於什麼的。這種方法很容易被濫用，因為網站設計人員只是添加了他們能想到的所有詞語，這種方法現在已經不常用，但你仍然需要了解它。

示例網頁

示例：繪製網站

為以下內容繪製一個 web 瀏覽器顯示

<html>
  <head>
    <title>Kempoogle</title>
    <meta name="Description" content="The best site in the world">
  </head>
  <body>hello world!</body>
</html>

練習：網站基礎

網站上最頂層的標籤是什麼

答案

編寫程式碼，建立一個網頁，其橫幅標題為“Moogle - 購物網站”，元描述為“世界上最好的網站”。

答案

<html>
  <head>
    <title>Moogle - shopping site</title>
    <meta name="Description" content="The best site in the world">
  </head>
  <body>...</body>
</html>

你如何使用網頁的 <head> 部分來提高網頁在搜尋引擎中的排名？

答案

調整

<meta name=Description ...>

和

<meta name=Keywords ...>

標籤

塊級標籤

塊級標籤只是會在螢幕上顯示內容，並在其之前開始新行的標籤。內聯標籤（見下文）的功能類似，但 *不會* 開始新行。

最重要的塊級標籤，使用頻率很高

<h#></h#> - 標題
<div></div> - Div
<p></p> - 段落

其他常用標籤

<ol></ol> - 有序列表
<ul></ul> - 無序列表
<li></li> - 列表項
<hr /> - 水平線

標題

<h#></h#> - 標題標籤使標籤之間的任何文字成為標題，數字越高（h#），標題的重要性越低

<html>
  <head>
    <title>Examples of headings</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    Normal Text
  </body>
</html>

上面的程式碼產生以下內容

標題 1

標題 2

標題 3

對於所有以下示例，html、body 和 head 標籤都被省略了。這並不意味著它們不存在，如果您編碼，則必須包含它們。

練習：標題

畫出以下程式碼會產生什麼

  <h1>Years</h1>
  <h2>Year 12</h2>
  <h2>Year 13</h2>
  <h1>Staff</h1>

{{CPTAnswer|

年份

12 年級

13 年級

教職工

  <h1>Introduction</h1>
  <h2>My Life</h2>
  <h2>My Cats</h2>
  <h2>My Dogs</h2>
  <h3>Barry</h3>
  <h3>Aubrey</h3>
  <h3>Rex</h3>
  <h1>Theories</h1>
  <h1>Conclusions</h1>

答案

介紹

我的生活

我的貓

我的狗

巴里

奧布里

雷克斯

理論

結論

編寫程式碼以生成以下標題輸出裝置

顯示器

揚聲器

答案

  <h1>Output Devices</h1>
  <h2>Monitors</h2>
  <h2>Speakers</h2>

隊伍

守門員

後衛

中場

前鋒

魯尼

蘇格拉底

體育場

老特拉福德

答案

  <h1>Team</h1>
  <h2>Goalies</h2>
  <h2>Defenders</h2>
  <h2>Midfield</h2>
  <h2>Strikers</h2>
  <h3>Rooney</h3>
  <h3>Socrates</h3>
  <h1>Stadia</h1>
  <h2>Old Trafford</h2>

列表

有兩種型別的列表您需要了解，ordereld 列表 (<ol></ol>) 和unorderld 列表 (<ul></ul>)。每個列表都有單獨的listitem (<li></li>) 來儲存所有資料。

無序列表 <ol></ol>
為您提供一個由專案符號組成的列表

  <ul>
    <li>apples</li>
    <li>oranges</li>
    <li>pears</li>
  </ul>

上面的程式碼會為您提供

蘋果
橘子
梨

  <ol>
    <li>apples</li>
    <li>oranges</li>
    <li>pears</li>
  </ol>

上面的程式碼會為您提供

蘋果
橘子
梨

如您在上面看到的那樣，各個列表項包含在 <li></li> 括號內。

練習：HTML 列表

編寫 HTML 程式碼來建立以下列表

傑弗裡
邦格爾
齊皮
喬治

答案

<ul>
  <li>Geoffrey</li>
  <li>Bungle</li>
  <li>Zippy</li>
  <li>George</li>
</ul>

維特根斯坦
奧古斯丁
海德格爾
馬塞爾

答案

<ol>
  <li>Wittgenstein</li>
  <li>Augustine</li>
  <li>Heidegger</li>
  <li>Marcel</li>
</ol>

以下程式碼會輸出什麼

<ul>
  <li>Kierkegaard</li>
  <li>Jaspers</li>
  <li>Frankl</li>
  <li>Rand</li>
</ul>

答案

克爾凱郭爾
雅斯貝爾斯
弗蘭克爾
蘭德

以下程式碼用於列印有序列表，有什麼問題

<ul>
  <li>Kierkegaard<li>
  <li>Jaspers</li>
  <li>Frankl</ul>
  <li>Rand</li>
</ul>

答案

以下程式碼已透過註釋進行修正

 
<ol> <!--this needs to be <ol> as it is an ordered list-->
  <li>Kierkegaard</li> <!--this needs a closing /-->
  <li>Jaspers</li>
  <li>Frankl</li> <!--this had the incorrect closing tag-->
  <li>Rand</li>
</ol> <!--this needs to be </ol> as it is an ordered list-->

將頁面分解

Div 元素用於將網頁劃分為多個部分 <div></div> - 這會在頁面上佔用空間，並且您放置的元素越多，頁面看起來越大。段落 <p></p>，使您可以像編寫論文一樣構建您的文字

內聯標籤

這些與塊級標籤幾乎相同，但它們不會導致換行

最重要的內聯標籤

<a></a> - 建立一個連結或一個錨點，
<img /> - 新增一個影像
<span></span> - 將頁面劃分為多個部分，

您不應使用的舊式標籤

(因為您應該使用 CSS 代替)

<strong></strong> - 使文字加粗，
<em></em> - 使文字傾斜，
<br /> - 換行
線，

例子

超連結

示例：簡單超連結

<a href="http://news.bbc.co.uk>BBC News</a>

以上程式碼的輸出如下
BBC 新聞

影像

示例：影像

<img src="Googlelogo.png" />

以上程式碼的輸出如下
要使其正常工作，必須在您的網頁所在的同一個資料夾中有一個名為“Googlelogo.png”的影像。

同時使用多個標籤的示例

示例：HTML 示例

<h2>Ditty</h2>
<p>I tell you naught for your comfort, 
  <br /> 
  Yea, naught for your desire,<br /> Save that the sky grows <strong>darker</strong> yet 
  <br /> 
  And the sea rises <em>higher</em>
</p>
<hr />
<p>- G.K.Chesterton, <em>The Ballad of the White Horse</em>(1911)</p>

以上程式碼的輸出如下

小調

我告訴你，不是為了你的安慰，
是的，不是為了你的願望，
只是為了告訴你天空變得更暗了
而大海變得更高了

- G.K. 切斯特頓，《白馬的民謠》（1911）

如您所見，HTML 程式碼的佈局並不總是反映它在螢幕上的顯示方式。請記住，您開始新行的時間只有當您遇到 <br /> 或 <p> 或其他塊級元素時。

練習

練習：內聯標籤

編寫程式碼以產生以下輸出

你好 怎麼樣 你？

答案

<em>Hello</em> <strong>how</strong> are <strong><em>you</em></strong>?

我很好
謝謝您

答案

<strong>I'm</strong> <em>fine</em><br />
thank you

這是一個到bbc 網站的連結。

答案

This is a <a href="http://www.bbc.co.uk">link</a> to the <em>bbc website</em>.

快速的棕色狐狸

跳過懶惰的狗

答案

<p>The <strong>Quick Brown Fox</strong></p>
<p>Jumped over the <em>Lazy Dog</em></p>

粗體
到 google 的連結
斜體

答案

{抱歉，這是一個陷阱問題！}

<ul>
  <li><em>Bold</em></li>
  <li><strong>Link to google</strong></li>
  <li><a href="http://www.google.com">Itallic</a></li>
</ul>

編寫程式碼以建立以下頁面，將名為 cat.jpg 的影像連結到文字“這是一張貓的圖片：”

答案

<html>
  <head>
    <title>Cat picture</title>
  </head>
  <body>
    This is a picture of a <em>cat</em>:<br/>
    <img src="cat.jpg">
  </body>
</html>

編寫程式碼以建立以下頁面，將名為 dog.jpg 的影像連結到頁面 http://college.ac.uk 這張狗的圖片連結到我的學院網站

答案

<html>
	<head>
		<title>Dog picture</title>
	</head>
	<body>
		This picture of a <strong>dog</strong> links to my college's website:<br/>
		<a href="http://college.ac.uk"><img src="dog.jpg"></a>
	</body>
</html>

以下程式碼會產生什麼

The invention<br />
of <strong>weights<strong> and <strong>measures</strong><br />
Makes robbery easier<br /><hr />
<em>- Chuang Tzu</em>

摘自：Merton, Thomas. (1969). The Way of Chuang Tzu. New York: New Directions.

答案

地址

發明
重量和度量
使搶劫更容易

- 莊子

<p><em>Modern art has taken the wrong turn in abandoning the 
search for the <br /><strong>meaning of existence</strong></em>
<br /> in</p><p>order to affirm the value of the <strong>individual
</strong> for his own sake</p><p><em>- Andrei Tarkovsky</em></p>

摘自：Tarkovsky, Andrei (1989). Sculpting in Time. University of Texas Press

答案

請注意，程式碼行末的換行符沒有任何作用，我們只用 <br /> 和 <p> 以及其他塊級元素來放置換行符

現代藝術在放棄尋找
存在的意義
方面

走錯了路，為了個人自身的利益而肯定個人價值

- 安德烈·塔可夫斯基

為以下網頁編寫完整的 html 頁面程式碼

汽車天堂

歡迎來到the汽車網站

汽車
貨車
腳踏車

本週30%折扣

答案

<html>
  <head>
    <title>Car heaven</title>
  </head>
  <body>
        <h1>Car heaven</h1>
        <p>Welcome to <em>the</em> car site</p>
        <ul>
                <li>Cars</li>
                <li>Vans</li>
                <li>Bikes</li>
        </ul>
        <p>This week <strong>30%</strong> discount</p>
  </body>
</html>

為以下網頁編寫完整的 html 頁面程式碼，其中影像地址為：contempt.jpg，alt 文字為：contempt，網頁地址為：http://bbc.co.uk

教育

地址

輕蔑

如果沒有對教育懷有溫和的輕蔑，
任何紳士的教育都不算完整

瞭解更多

點選這裡瞭解更多

答案

<html>
  <head>
    <title>Education</title>
  </head>
  <body>
        <h1>Contempt</h1>
        <p>without a gentle <strong>contempt</strong> for education,<br /> no gentleman's education is complete</p>
        <img src="contempt.jpg" alt="contempt">
        <h2>Learn More</h2>
        <p>Click <a href="http://bbc.co.uk">here</a> to go to learn more</p>
  </body>
</html>

-->

有時您想在網頁的 HTML 程式碼中寫一些東西來幫助您更好地理解程式碼。這稱為註釋，是任何計算語言中普遍存在的特性。註釋不執行任何計算功能，也不會在完成的網頁上顯示，它們僅僅供網頁設計師使用，以便他們能夠更好地理解頁面。對於 HTML，我們使用以下標籤

  <head>
    <title>Love</title>
  </head>
  <body>
        <h1>What Love is</h1>
        <p>"Love means to love that which is unlovable; or it is no virtue at all."</p>
        <!Quote from G. K. Chesterton (1874-1936)>
  </body>
</html>

在上面的示例中，以 <! 開頭的行是一個註釋。此標籤中的所有內容都不會顯示在螢幕上，產生以下結果

什麼是愛

“愛意味著愛那些不可愛的東西；否則它就不是美德。”

練習：註釋

對於以下程式碼，請草擬它輸出的內容

<html>
  <head>
    <title>Friendship</title>
  </head>
  <body>
        <h1>Hello</h1>
        <p>Can I be your friend?</p>
        <ol>
          <li>Yes</li>
          <li>No</li>
          <!--<li>Maybe</li>-->
        </ol>
        <!What a horrible question!>
  </body>
</html>

答案

友誼

地址

你好

我可以成為你的朋友嗎？

是
否

擴充套件：自學 HTML

網路上充滿了免費資源可以讓你提升自己的技能，沒有什麼能阻止你成為一名頂尖的網頁設計師。這裡的這些問題適合讓你透過這個課程，並帶有一些額外的元素。如果你想真正精通各種網路技術，你應該嘗試自學。一個很好的起點是 w3schools 網站，在那裡你可以學習

HTML
Javascript，互動網站背後的語言

如果你想了解構建動態網頁的程式碼，包括 Facebook，請檢視

PHP

擴充套件：HTML 5

我們一直在學習的都是網頁設計的非常基礎的東西。如果你喜歡你一直在做的事情，你最好看看 HTML5。HTML5 開始讓網站完全互動，能夠快速嵌入影片並與網頁互動。在接下來的幾年裡，你會越來越多地看到應用程式遷移到這項新技術，所以趕上潮流，從 w3schools 開始學習。

標籤以左尖括號開頭	<
然後是標籤名稱 - 一個單詞、短語或單個字母	a
然後可能包含一些更多資訊	href="http://www.bbc.co.uk"
然後是右尖括號	>
然後是應該顯示在螢幕上的內容	連結到 BBC 網站
然後關閉標籤，重複標籤名稱，如下所示	</a>