编写您自己的 HTML 网页简介

图片来自

网站是开源软件项目的绝佳资源。网站为用户提供了一个极好的机会来了解您的项目。项目网站可以分享额外的资讯、截图、示例代码、视频和其他对开发者和用户有用的资源。

如果您有兴趣启动您自己的网站，本文正适合您。

其他选项

当然，您不需要为您的开源软件项目构建网站。如今，您可以将您的开源软件项目托管在 GitHub 或 GitLab 等平台上，并通过标准的 "Readme.md" 风格的项目描述来维持。这对于许多项目都适用，并且对于那些希望更多关注项目代码编写而不是维护网站的开发人员来说，这是一个完美的解决方案。

但是，如果您想创建一个网站，您可以利用工具和网站构建器来为您完成这项工作。例如，开源的 TYPO3 Web 内容管理系统是一个优秀的网站构建器。或者您可以使用许多其他的开源内容管理系统和网站构建器来创建和管理一个项目网站，而无需学习任何 HTML 代码。

但是，本着开源软件的精神，我更喜欢手工编写我的开源项目网站代码。在本文中，我将向您展示使用 HTML 和 CSS 构建您自己的网站的基础知识。

网页结构

HTML 是一种简单的超文本标记语言，易于人类编写且易于计算机阅读。 HTML 的核心是标签，这是一种标记，用于告知 Web 浏览器有关页面或页面中的内容。 HTML 标记以小于号 (<) 开头，以大于号 (>) 结尾。例如，启动 HTML 页面的标签是

<html>

大多数标签都要求您分别标记某事物的开始和结束。结束标签在标签内包含斜杠 (/)。例如，结束 HTML 页面的标签是

</html>

这样，我们就可以看到网页的顶级轮廓。其 HTML 代码如下：

<html>
</html>

在 HTML 页面的开始和结束标签内，您将包含其他代码块。所有页面都需要一个 body 块来定义网页的文本正文。大多数页面还以一个特殊的 head 块开始，该块定义 Web 浏览器的某些参数，例如在何处查找样式表。我们稍后将探讨样式表。

<html>
  <head>
  </head>
	 
  <body>
  </body>
</html>

空格，包括“换行符”以及空格和制表符，对于 Web 浏览器来说并不重要，但是大多数 Web 开发人员都会缩进其他 HTML 块内的 HTML 块，以使代码对人类更具可读性。这就是为什么我在示例代码中缩进了 head 和 body 块的原因。

一个简单的网页大纲

大多数网页都遵循一个通用大纲。通常，顶部是页眉和导航栏，中间是主要内容，底部是页脚。 HTML 版本 5 标准定义了执行此操作的标签。让我们添加到代码示例中以包含这些标签

<html>
  <head>
  </head>
	 
  <body>
    <header>
    </header>
		 
    <nav>
    </nav>

    <main>
    </main>
		 
    <footer>
    </footer>
  </body>
</html>

您的网页内容位于每个代码块中。例如，您应该在标题中包含您的开源项目名称。还可以考虑在标题中添加有用的导航链接，并在页脚中添加您的联系信息和任何社交媒体链接。您可以使用 HTML 标记定义每个元素。

要开始使用，您可以在页面中使用这些常用标记

<h1>标题级别 1（通常是标题中的标题）</h1>
<h2>标题级别 2（通常是正文中的主题标题）</h2>
<p>正文段落。这是最常用的 HTML 标记。</p>
<i>斜体文本</i>
<b>粗体文本</b>
<a href="http://example.com">链接到页面或站点</a>
<img src="https://open-source.net.cn/image.png" alt="您要显示的图片" />

显示图片的 img 标记与我们到目前为止所探讨的其他标记不同。这是一个“自闭合”标签的示例，该标签独立存在以执行某些操作。在最新版本的 HTML 中，您不需要结束斜杠。

对于图片，请务必在 alt 参数中包含替代描述性文本。设置为不显示图片的视力障碍用户将改用替代文本。如果无法加载图片，您也会看到替代文本。

使用这些新标签，我们可以扩展 HTML 代码示例以创建一个简单但功能齐全的网页。让我们在标题中添加一个徽标和页面标题，并在正文中添加一些简单的文本。我们还将在导航栏中包含指向其他页面的链接，并在页脚中包含指向 Twitter 的链接和一个联系电子邮件地址。

<html>
  <head>
<h1><img src="https://open-source.net.cn/logo.png" alt="FreeDOS logo" /> The FreeDOS Project</h1>
  </head>
	 
    <body>
      <header>
        <h1><img src="https://open-source.net.cn/logo.png" alt="FreeDOS logo" /> The FreeDOS Project</h1>
      </header>

      <nav>
        <a href="http://wiki.freedos.org/">Wiki</a>
          <a href="https://open-source.net.cn/download/">Download</a>
      </nav>

      <main>
        <h2>Welcome to FreeDOS</h2>
        <p><b>FreeDOS is open source software!</b> It doesn’t cost anything to download and use FreeDOS. You can also share FreeDOS for others to enjoy! And you can view and edit our source code, because all FreeDOS programs are distributed under the GNU General Public License or a similar open source software license.</p>
        <p><a href="http://wiki.freedos.org/">Read the wiki</a></p>
        <p><a href="https://open-source.net.cn/download/">Download FreeDOS 1.2</a></p>
    </main>
		 
    <footer>
      <p><a href="https://twitter.com/freedos_project">Follow us on Twitter</a></p>
      <p>Contact me at <i>jhall@freedos.org</i></p>
    </footer>
  </body>
</html>

呈现后，代码会生成以下内容

向您的网页添加样式

如果您在浏览器中查看此简单网页，您会发现它只是纯文本。您可以使用样式表向您的网页添加一些活力。样式表通常是一个单独的文件，用于告诉 Web 浏览器如何显示网页的某些部分。您可以在此处设置网页字体、背景颜色或其他样式。

样式表的格式与 HTML 完全不同。在样式表中，您可以指定要修改的标签或“元素”的名称，然后在花括号集中列出不同的样式。例如，这个简单的样式表定义了所有内容的文本颜色和背景颜色，即整个页面。

body {
    color: black;
    background-color: white;
}

如果您只是在学习如何创建网页，我建议您从这些简单的样式表说明开始

background-color: 颜色;
color: 颜色;
font-weight: bold;
text-style: italic;
text-decoration: underline;
height: 尺寸; and width: 尺寸;（有助于设置图片的大小）
text-align: center;

您可以通过使用 <style> 块将其包含在 head 部分中，将样式表嵌入到 HTML 页面中。让我们添加一个非常简单的样式表，该样式表将默认颜色设置为白色背景上的黑色，将页眉设置为蓝色背景上的居中白色文本，并将页脚设置为灰色背景上的斜体黑色文本。我们还将徽标设置为 50 像素高。

<html>
  <head>
    <style>
      body {
        color: black;
        background-color: white;
        }
      header {
        color: white;
        background-color: blue;
        text-align: center;
      }
      img {
        height: 50px;
      }
      footer {
        color: black;
        background-color: gray;
        text-style: italic;
      }
    </style>
  </head>

  <body>
    <header>
      <h1><img src="https://open-source.net.cn/logo.png" alt="FreeDOS logo" /> The FreeDOS Project</h1>
    </header>

  <main>
    <h2>Welcome to FreeDOS</h2>
    <p><b>FreeDOS is open source software!</b> It doesn’t cost anything to download and use FreeDOS. You can also share FreeDOS for others to enjoy! And you can view and edit our source code, because all FreeDOS programs are distributed under the GNU General Public License or a similar open source software license.</p>
    <p><a href="http://wiki.freedos.org/">Read the wiki</a></p>
    <p><a href="https://open-source.net.cn/download/">Download FreeDOS 1.2</a></p>
  </main>

  <footer>
    <p><a href="https://twitter.com/freedos_project">Follow us on Twitter</a></p>
    <p>Contact me at <i>jhall@freedos.org</i></p>
  </footer>
  </body>
</html>

这是渲染后的效果

样式表允许您在不更改 HTML 代码的情况下完全更改网站的外观。这是一个更高级的样式表，它添加了新的颜色、字体、间距、边框、阴影和悬停效果，以使相同的 HTML 具有全新的外观。

body {
  color: black;
  background-color: white;
  font-family: 'Open Sans', Calibri, sans-serif;
  margin: 0;
}
header {
  color: white;
  background-color: steelblue;
}
header > h1 {
  font-size: small;
  margin: 0;
  text-align: center;
}
header img {
  border: 0;
  height: 50px;
  vertical-align: middle;
}
nav {
  background-color: darkorange;
  box-shadow: 0 0 4px dimgray;
  padding: .5em 0;
  text-align: center;
}
nav > a {
  color: white;
  background-color: transparent;
  padding: .5em 1em;
}
nav > a:hover {
  background-color: orange;
}
main {
  border-left: 1px dotted lightgray;
  border-right: 1px dotted lightgray;
  margin: 0 10%;
  padding: 2em 1em;
}
main a {
  color: royalblue;
}
main a:hover {
  color: dodgerblue;
}
main h2 {
  border-bottom: 1px solid dimgray;
  font-size: 1.2em;
  margin: 2em 0;
  text-align: center;
  text-transform: uppercase;
}
footer {
  color: dimgray;
  background-color: lightgray;
  border-top: 2px solid dimgray;
  font-size: small;
  padding: 1em 0;
  text-align: center;
}
footer a {
  color: black;
}
footer a:hover {
  color: dimgray;
}

在浏览器中渲染时