手把手教你制作一个简单网页
Zac
Web360编辑
在这节课中我们将向大家展示：如何制作一个包含标题、链接和图片的基本网页。本课的目的是向大家展示构建基本网页的分步指南，学习制作基本网页的方法。
这是我们将要制作的（非常基本的）页面：
许多人认为用代码编写网页这种传统的方法非常困难。 但是这种方式是大多数专业网页设计师和开发人员使用的方法。直接用代码编写可能需要慢慢的习惯，但是如果你想学会更高阶的联盟营销，如插入AdSense代码或设置Meta标记，最终要掌握手写编辑网页代码。
手写编辑网页代码的优势：
- 可以完全掌控网页
- 只需要一个简单的文本编辑器
手写编辑网页代码的劣势：
- 需要大量的练习才能习惯
- 进行编辑时，无法看到正在编辑的结果
创建一个空白页面
首先，打开你的文本编辑器，单击“文件”>“新建”，将页面保存在适当的位置。 确保使用‘.htm’、‘.html’或‘.php’扩展名保存文件。
现在，你需要一个具有有效网页所需的基本代码。我为大家编写了一个基本的文件，你可以将其复制并粘贴到文档中：
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
这时，你可以随时在电脑上进行预览（通过使用“Windows资源管理器”或“Finder”，具体取决于你的操作系统），然后双击在浏览器中打开该页面。
添加标题
接下来是给你的页面加一个标题。在页面上的</body>标签之间，写下“Delicious Apple Pie Recipes”。 现在要把这些文本变成一个标题，只需将
放在它的前面，</h1>之后，就像这样：
...
<body>
<h1>Delicious Apple Pie Recipes</h1>
</body>
...
设置页面的标题时，查找到<head>标签之间的<title>标签，替换之间的文字“Untitled Document”。这些文字将出现在浏览器窗口顶部和搜索引擎排名的文本中。
图片
现在我们需要在页面中插入图片，把你要插入的图片复制到与网页相同的目录中。 然后，在页面中“插入”图片，请在页面中输入以下内容：
...
<body>
<h1>Delicious Apple Pie Recipes</h1>
<img decoding="async" src="apple-pie.jpg" alt="A picture of Apple Pie"/>
</body>
...
把这个需要“插入”的图片命名为“apple-pie.jpg”，它存放的位置要与网页在同一个文件夹。显然，你要将其替换为真实文件的名称和位置。alt =图片的说明文字。
链接
下一步为你的网站制作基本导航。虽然网站可能还没有其他页面，但从一开始就要将导航放置在正确的位置上。写下这些网页的标题，在这个例子中为了把它们分开，我使用了“|”符号。
因为你还没有其他页面来添加链接，可以将导航指向“虚拟”位置。 添加链接可以使用<a>标签，然后将其指向特定页面，如以下所示：
...
<img src ="apple-pie.jpg" alt ="Apple Pie的图片"/>
<a href="#">虚拟导航链接</a> |
<a href="page.htm">另一个链接</a> |
<a href="http://example.com">另一个网站</a>
...
‘＃‘只是一个虚拟位置，但page.htm和http://www.example.com是你实际想要链接的页面和网站。 <a> </a>标签之间的内容是页面上实际显示的内容。例如，“＃”的第一个链接将显示为“虚拟导航链接”。
添加网页内容文字
接下来开始写一些文字，这是你网站的主体内容。
你可能已经在链接示例中注意到这些内容各自分开。 但如果你在浏览器中查看它们，则都显示为同一行。
的确HTML的布局并不重要，但你必须非常具体地说明在何处放置换行符，使用<p>（“段落”的缩写）和<br/>（简称“换行符”） 标签，如下所示：
...
<p>这是一个段落（因为有个p标签）</p>
如果没有p标签，那么这是一个段落
将会是*下一个*段落。
<p>这是一个段落，但我想要一个换行。<br/>可以
使用br标签。</p>
...
这段代码的实际效果是：
这是一个段落（因为有个p标签）
如果没有p标签，那么这是一个段落 将会是*下一个*段落。这是一个段落，但我想要一个换行。
可以
使用br标签。
文字对齐
我们要做的最后一个步骤是改变文字在图片周围的位置。因此，我们需要修改图片的标签，如下所示：
...
<img decoding="async" src="apple-pie.jpg" alt="A picture of Apple Pie" align="left"/>
...
这部分的对齐标签，可以包含文本“左”或“右”对齐。
课程总结
在本课中我们学习了如何手写编辑一个简单的网页。包括以下几个步骤：
- 创建一个空白页面
- 添加标题
- 插入图片
- 添加链接
- 编写正文
- 文字对齐