课程
开始
开始学习
CodeGym /课程 /Docker SELF /创建一个简单的HTML网站

创建一个简单的HTML网站

Docker SELF
第 7 级 , 课程 2
可用

创建一个简单的HTML网站

1. 为什么需要HTML网站？

欢迎来到有趣的web开发世界！今天我们会创建一个简单的静态HTML网站并将其部署到你在之前课程中设置的web服务器上。即使你以前从未写过HTML代码，也不用担心——一切都很简单明了。我们的目标不仅是理解HTML的基础知识，还要学会如何通过web服务器让你的网站对全世界可见。

现在我们将迈出下一步——创建属于自己的HTML网站，并通过你的web服务器设置它的显示。准备好征服web空间了吗？那让我们开始吧！

HTML (HyperText Markup Language) 是所有网页的基础。它负责网站的结构和内容。在标准HTML中，你可以描述标题、文本、图像、链接甚至表格。它学起来简单，但功能足够强大，可以成为任何网站的基础。

在实际生活中，使用静态HTML页面的技能在很多情况下都很有用：

  • 快速创建web应用的原型。
  • 编写和测试文档的静态页面。
  • 为服务器应用准备基础界面。

HTML还是一个很棒的方式来创建简历的网页形式（没错，招聘员有时候很喜欢）。对于我们程序员来说，掌握HTML的基础知识绝对是必须的。

2. 第一步：HTML 基础：创建你的第一个页面

编程就像 LEGO：适合所有年龄段的人喜欢的活动。从一个小的“积木”开始——我们的第一个网页。

HTML 文档的最小例子

用任何文本编辑器创建一个名为 index.html 的文件（比如 nano, vim，或者甚至是 gedit，如果你喜欢一点图形界面），然后写下以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网站</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我用 HTML 写的第一个网页。</p>
</body>
</html>

代码解释

  1. <!DOCTYPE html> – 告诉浏览器我们使用的是 HTML5。
  2. <html> – 打开整个文档。页面的所有内容都在这个标签内。
  3. <head> – 网站的元信息部分（比如页面标题、样式或脚本的链接）。
  4. <title> – 页面标题，显示在浏览器的标签上。
  5. <body> – 主要部分，所有可见内容都放在这里。
  6. <h1> – 一级页面标题（数字越小，标题越大）。
  7. <p> – 一段文字。

是的，这只有七行代码，但它们就是你网站的基础！

3. 第2步：将HTML站点部署到服务器上

现在，我们的页面已经准备好了，是时候将它展示给全世界了。为此，我们将使用我们的web服务器。

准备站点文件夹

创建一个目录来存储你网站的文件。如果你想在一个虚拟主机上使用域名example.com部署你的站点，可以执行以下命令：

sudo mkdir -p /var/www/example.com

然后将你的index.html文件移动到这个文件夹里：

sudo cp index.html /var/www/example.com/

神奇的事情开始了——文件已经准备好运行了。

4. 第三步：配置Web服务器以提供网站服务

Nginx配置

  1. 打开虚拟主机配置文件：

    sudo nano /etc/nginx/sites-available/example.com

  2. 插入以下配置：

    server {
    listen 80;
    server_name example.com;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

  3. 激活虚拟主机并重启服务器：

    sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Apache配置

  1. 打开虚拟主机配置文件：

    sudo nano /etc/apache2/sites-available/example.com.conf

  2. 插入以下配置：

    <VirtualHost *:80>
    ServerName example.com

    DocumentRoot /var/www/example.com
    <Directory /var/www/example.com>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

  3. 激活虚拟主机并重启服务器：

    sudo a2ensite example.com.conf
sudo systemctl restart apache2

测试网站

现在打开你的浏览器，输入http://example.com（或你的服务器IP地址），然后享受结果。如果你看到美丽的"你好，世界！" – 恭喜，一切正常！

5. 第4步：美化我们的网站

静态内容挺好的，但加点CSS会更棒。咱们来加点样式吧。

在同一个文件夹 /var/www/example.com/ 下，添加一个新文件 style.css：

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

h1 {
    color: #ff5722;
}

现在，更新你的 index.html ，加上对CSS的引用：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我第一个用HTML写的网页。</p>
</body>
</html>

刷新页面后你会看到样式有了一些小变化。现在你的网站看起来稍微更漂亮了一点！

6. 常见问题及其解决方法

在处理网站时可能会遇到一些问题，但别担心，我们已经帮你准备好了：

  • 错误 "403 Forbidden". 检查一下网站文件夹的权限。你可以使用:

      sudo chmod -R 755 /var/www/example.com

  • 错误 "404 Not Found". 检查一下网站的文件是否放在正确的文件夹里，文件名是否正确。

  • 网站未显示. 检查你的web服务器服务是否已启动：

      sudo systemctl status nginx
  sudo systemctl status apache2

现在你的网站对所有知道地址的人开放了。这是不是很有成就感？在接下来的课程中，你将学会更多：比如添加HTTPS来提升安全性以及管理服务器设置。

评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION