维基少年:树莓派/树莓派网页服务器和 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://127.0.0.1 与 https://127.0.0.1/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 文件可在维基共享资源上找到。