維基少年:樹莓派/樹莓派網頁伺服器和 HTML 教程
教程作者：Andrew Oakley
公有領域 2017 年 1 月 28 日
www.cotswoldjam.org
使用樹莓派選單 - 附件 - 終端啟動終端。
我們將安裝一個網頁伺服器。伺服器是一個可以供其他人連線的程式。
普通使用者 pi 沒有安裝軟體的許可權，所以我們使用 sudo 命令臨時切換到超級使用者（也稱為 root 使用者）。輸入
sudo apt update
sudo apt upgrade
update 命令獲取最新的軟體列表。upgrade 命令安裝任何過時的軟體的新版本。如果你的網際網路連線速度很慢，upgrade 可能需要很長時間。你可能會被要求透過按下 Y 和 ↵ Enter 來確認。現在讓我們安裝 Apache 網頁伺服器，這是 Linux 上最常用的網頁伺服器。
sudo apt install apache2
你會看到這要求安裝 apache2 以及其他一些程式。這些被稱為“依賴項” - 它們是 apache2 正常工作所需的程式。
Apache 安裝完成後，啟動你的網頁瀏覽器。在樹莓派 2 或 3 上，你可以使用 Pi 選單 - 網際網路 - Chromium 網頁瀏覽器。
如果你是使用更老的樹莓派 1 或樹莓派 Zero，選擇 Pi 選單 - 執行 - 然後輸入 epiphany 並按下 ↵ Enter。Epiphany 是一個更簡單的瀏覽器，適用於速度較慢的電腦。
在網頁瀏覽器的位址列中，輸入 localhost 並按下 ↵ Enter。
你應該看到 Apache2 預設頁面。localhost 始終指的是你正在使用的電腦。所以如果有人在他們的樹莓派上輸入它，它將指的是他們的樹莓派，而不是你的。
回到終端並輸入
hostname它將告訴你你的電腦名稱。這可能是 raspberrypi，或者有人可能為你定製了它，例如 rpi-ab12。現在回到你的網頁瀏覽器，並輸入
hostname.local… 其中 hostname 是你的電腦名稱。你必須在 Linux 電腦上輸入 .local。在 Microsoft Windows 上，你會使用 .lan 代替：hostname.lan
假設你沒有與同一個網路上的其他人使用相同的 hostname（通常“你的網路”意味著“你的建築物”），那麼這應該只找到你的電腦。這被稱為 Zeroconf，也稱為 Avahi 或 Bonjour。一些電腦不支援 Zeroconf，因此你可以找到你的 IP 地址
hostname -I(注意大寫字母 i) 你的 IP 地址將看起來像四組數字，例如 192.168.0.42。現在嘗試在網頁瀏覽器中瀏覽到你的 IP 地址。
回到終端，輸入
cd /var/www/html
ls -lh
/var/www/html 是網頁存放的地方。你應該看到 index.html。我們將把它重新命名為 -old（為了保留一份副本，以防萬一）並建立一個我們自己的新 index.html。
sudo mv index.html index-old.html
sudo leafpad index.html
一個文字編輯器程式應該會彈出，其中包含一個空白頁面。開始輸入
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>
Hello world
<p>
My name is Andrew
</body>
</html>
將 Andrew 更改為你的名字，並使用檔案選單 - 儲存儲存頁面。
使用位址列附近的重新載入按鈕或按下 F5 鍵重新載入網頁瀏覽器。
<html> 告訴瀏覽器這是網頁的開始；</html> 是結束
<head> 表示這是頁首的開始，標題放在這裡；</head> 是結束
<body> 是網頁文字的開始；</body> 是結束
<p> 是一個新段落的開始；在 HTML5 中，結束標籤 </p> 是可選的
index.html 是一個特殊的檔名，如果你沒有指定一個特定的網頁，它就會被載入。所以 https:// 與 https:///index.html 相同
在“My name is Andrew”下，現在輸入
<p>
<a href="pet.html">My favourite pet</a>
不要忘記檔案 - 儲存，然後重新載入瀏覽器。
<a> 是一個指向另一個網頁（或網頁瀏覽器中的任何檔案）的連結。href（超文字引用）可以是“相對的”，例如 pets.html - 這將變為 http://hostname.local/pets.html，因為 pets.html 與 index.html 在同一個資料夾中。
要連結到其他電腦上其他資料夾中的網頁，你可以使用一個“絕對”地址，例如：http://www.bbc.co.uk/news/technology-37305200
使用右上角的 X 關閉 Leafpad。我們將新增一張照片。讓我們列出這些照片（如果你沒有使用 Cotswold Jam 預裝的 SD 卡，你需要找到自己的照片）
ls -lh /home/pi/Pictures/pets
| cat.jpg | dog.jpg | guineapig.jpg | hamster.jpg |
 |  |  |  |
選擇一個寵物（貓、狗、豚鼠、倉鼠）並將圖片複製到網頁伺服器目錄
sudo cp /home/pi/Pictures/pets/cat.jpg /var/www/html
使用以下命令建立一個新的網頁
sudo leafpad pet.html
<html><head>
<title>My favourite pet</title>
</head><body>
<p>
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>
重新載入瀏覽器並點選“My favourite pet link”連結。你可以使用後退按鈕返回到索引頁面。
現在嘗試瀏覽其他同學的網站。你需要知道他們的 hostname 或 IP 地址。例如 http://rpi-12ab.local 或 http://192.168.0.123
如果你的 hostname 是 raspberrypi（預設值），那麼它可能會與其他同名電腦衝突。你可以透過轉到 Pi 選單 - 首選項 - 樹莓派配置並更改 hostname 來更改它。完成後，你會被提示重啟你的電腦。
如果你想解除安裝 Apache
sudo apt remove apache2 && sudo apt-get -y autoremove
層疊樣式表（CSS）是網站用來更改每個網頁上的內容外觀的檔案。
與 index.html 檔案一樣建立 styles.css 檔案。
sudo leafpad styles.css
輸入以下 CSS 來更改 <p> 標籤。
p {
font-weight: bold;
font-size: 16px;
}
現在將 CSS 檔案新增到 HTML 檔案中，以便網頁瀏覽器知道使用它。
<html><head>
<link rel="stylesheet" href="styles.css">
<title>My favourite pet</title>
</head><body>
<p>
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>
只需使用標籤本身的名稱，這將改變標籤的所有使用方式。CSS 使用類，它可以用於特定標籤。在 styles.css 檔案中輸入以下內容以新增一個類
p.pet {
font-weight: bold;
font-size: 16px;
}
然後將類宣告到 <p> 標籤。
<html><head>
<link rel="stylesheet" href="styles.css">
<title>My favourite pet</title>
</head><body>
<p class="pet">
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>
你可以嘗試使用其他 CSS 屬性來為你的網頁設定樣式，例如：
font-style: italic;使字型變為 *斜體*。margin在標籤周圍新增邊距，以便將其與頁面上的其他元素分隔開來。單獨使用margin會在標籤的四邊都新增邊距。color: #F00將文字顏色更改為紅色。background-color: #000將網頁的背景顏色更改為黑色。
你可以參考下面的顏色表或進行谷歌搜尋來找到你喜歡的顏色。CSS 支援 RGB、HSL 和十六進位制顏色標準，但十六進位制顏色標準是首選，因為它最為簡潔。
| 顏色 | 十六進位制 | RGB | HSL |
|---|---|---|---|
| 黑色 | #000 | 0, 0, 0 | 0, 0, 0 |
| 紅色 | #F00 | 255, 0, 0 | 0, 0, 0 |
| 綠色 | #0F0 | 0, 255, 0 | 0, 0, 0 |
| 藍色 | #00F | 0, 0, 255 | 0, 0, 0 |
| 青色 | #0FF | 0, 255, 255 | 0, 0, 0 |
| 黃色 | #FF0 | 255, 255, 0 | 0, 0, 0 |
| 洋紅色 | #F0F | 255, 0, 255 | 0, 0, 0 |
| 白色 | #FFF | 255, 255, 255 | 255, 255, 255 |
 | 二進位制數被稱為“二進位制位”，縮寫為“位”。8 位構成 1 位元組。 |
數值基數是用於計數的單個數字的數量。在日常數學中，我們使用 **十進位制（基數 10）**，即數字 0、1、2、3、4、5、6、7、8 和 9。
計算機基於 **二進位制（基數 2）**，它使用單個數字 0 和 1。這意味著它們不會像我們一樣進行計數或執行計算。
**十六進位制（基數 16）** 是寫二進位制的一種簡化方法，它可以避免我們寫很多零！就像二進位制是數字 0 和 1 一樣，十六進位制是數字 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E 和 F。
例如：十進位制 255 = 二進位制 11111111 = 十六進位制 FF
每一位二進位制數在每列都加倍。因此 1+2+4+8+16+32+64+128 = 255
| 十進位制（基數 10） | 256 | 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
|---|---|---|---|---|---|---|---|---|---|
| 二進位制（基數 2） | 0 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 十六進位制（基數 16） | 0 | F | F | ||||||
更多資訊：https://www.mathsisfun.com/numbers/bases.html
要使你的網站對網路之外的人可見（例如，在其他建築物、其他城鎮或其他國家），你需要一個公共 IP 地址。閱讀你路由器的使用手冊，瞭解如何為埠 80 設定埠轉發。你可以透過在谷歌搜尋“我的 IP 地址是什麼”來找到你的公共 IP 地址。
你的公共 IP 地址可能會發生變化；向你的網際網路服務提供商諮詢靜態公共 IP 地址。然後，你可以購買一個域名，並將它與你的靜態公共 IP 地址關聯。對於一些英國 ISP，你可能已經擁有一個子域名，例如 Plusnet 為每個客戶提供 accountname.plus.com。
在終端中
sudo systemctl stop apache2
在瀏覽器中重新載入 **localhost**。注意錯誤訊息 - web 伺服器已停止。
sudo systemctl status apache2
顯示“Active: inactive (dead)” – 它沒有執行。
sudo systemctl start apache2
重新載入 
瀏覽器。它再次工作。
sudo systemctl status apache2
顯示“Active: active (running)”
sudo systemctl status bing-bong-bop
顯示“Loaded: not-found”。這意味著 bing-bong-pop 不存在，沒有安裝，或者你拼錯了。當然它不存在，我只是把它舉個例子。
使用 Pi 選單 - 關機... - 重啟來重啟機器。
機器重啟後，瀏覽到 **localhost**。注意 web 伺服器是如何在啟動時自動啟動的。從終端
sudo systemctl disable apache2
再次重啟，並在重啟後嘗試瀏覽到 **localhost**。你會收到一條錯誤訊息 - web 伺服器在你重啟時沒有自動啟動。
你可以使用以下命令手動啟動它：
sudo systemctl start apache2
或者你可以重新啟用它，使其在每次重啟時自動啟動：
sudo systemctl enable apache2
sudo apt remove apache2
sudo apt-get autoremove
還記得那些“依賴項”嗎？它們是 Apache 需要安裝的額外程式，以便 Apache 能夠正常執行？我們在解除安裝 Apache 後使用 **autoremove** 指令來解除安裝它們。
sudo apt update
sudo apt upgrade
…獲取你已經擁有軟體的最新版本。
你可以在以下網站找到要安裝的其他軟體包的名稱和描述：**http://www.raspberryconnect.com/raspbian-packages-list**
完成 apt update 後，你可以使用以下命令安裝新軟體：
sudo apt install packagename
…其中 packagename 是你要安裝的軟體的名稱。
注意任何要求安裝大量其他軟體包的東西。瞭解如何備份你的 SD 卡，例如使用 Windows 筆記型電腦上的 Win32DiskImager。
本教程的原始 PDF 檔案可在維基共享資源上找到。