如何在6个简单步骤中对网站进行编码

Whether you're looking for dining recommendations, ordering groceries, reading your favorite blog, or shopping for holiday gifts, the internet is the first place we turn to for information and convenience. Naturally, the best companies are positioned to catch a potential customer's attention well before they ever walk through the door with a professional and seamless website.

很容易talkabout having a website, but if you're a small business owner or fledgling entrepreneur, it's hard to know where to start. Fortunately, we've broken down the process of how to code a website into a few simple steps.

在我们深入研究之前，我想花点时间回答许多首次网站建设者遇到的两个常见问题。

Frequently Asked Questions About Coding a Website

1.编码网站需要多长时间？

Answer:it depends on the complexity of your website. For example, it will take a lot less time to launch a basic homepage with your business's address, contact information, and links to social media accounts than it will to build an online ordering portal that collects users' shipping information and processes payments.

However, just because you save time in the beginning doesn't mean that more advanced features aren't worthwhile. It depends on your business. If you are only trying to get foot traffic to your store, then online ordering doesn't make sense.

也就是说，您可能会错过可能不喜欢开车去实际位置而是would通过您的网站购买。如果您没有将物品运送到客户的带宽，那么这是传递创建电子商务网站的另一个好理由。

2.我需要编码我的网站吗？

简单答案：不。While everyone was manually coding their sites in the early days of the internet, many websites are now built with acontent management system (CMS)。CMS通过提供视觉界面来构建网页并构建网站来消除编码的需求。许多CMS都提供拖放功能，因此您可以轻松地将元素（例如按钮）放置在页面上。

我们的团队汇编了best CMSs我建议您阅读，如果您宁愿避免自定义编码路线。如果您准备学习一些代码，让我们一起浏览此过程。

1.选择您的代码编辑器。

代码编辑器是新开发人员的绝佳工具，因为它们提供了许多使我们生活更轻松的功能。例如，Visual Studio代码（我的选择）将提供语法建议，以便您避免使用代码中引起问题的简单错别字。最重要的是，它将为HTML自动完成关闭标签，并在文件中添加视觉标记，以便您可以轻松地分解不同的代码。

You can see the difference between a regular text editor and a code editor below. The code works the same in both documents, but one is much easier to understand at a glance than the other.

As I said before, Visual Studio Code is my preferred tool, but there are many免费代码编辑器out there for you to choose from. Visual Studio Code has extensions that add additional functions to the editor (like switching from dark to light mode) and a dedicated user base that is constantly creating more, but the most important thing is that you have a code editor for these next steps. The brand is not critical.

Note: I will be sharing screenshots from Visual Studio Code, so it will be easy to follow along in this tool as we dive into coding in the next step.

2. Write your HTML.

HTML代表超文本标记语言。如果现在没有意义，请不要担心。少关注定义，而更多地关注这张图片：我们正在建造房屋。最自然的起点是粉底，墙壁和屋顶，因为每个房屋都需要这些，然后再担心室内装饰或绘画。

With HTML, we're able to build this structure for our website. This is a metaphor I use when I lead HTML and CSS trainings, so we'll repurpose it for this tutorial as well.

Image Source

现在，我们拥有合适的工具来完成工作并了解我们的目标，现在该深入了解您在这里的原因：编码。

创建一个HTML文档。

我们所有的编码都将发生在我们保存到本地计算机的不同文件中。我们将创建的第一个文件是我们的HTML文档。首先，为您的网站文件制作新文件夹。由于我正在演示，所以我创造性地将我的名字称为“演示”。

现在打开代码编辑器中的文件夹。接下来，创建一个名为“ index.html”的文件，现在我们准备了第一个HTML文件。请注意，您不需要将文件命名为“索引”，但是您doneed to match the ".html" file extension. This tells our computer (and later our web browser) that this is an HTML document instead of a JPG, PDF, etc.

Our file is currently blank, so let's add the HTML document structure. I have laid everything out in the snippet below so you can copy and paste into your file (or write it out).

让我们简要回顾这些部分：

• <！doctype html>：向浏览器声明这是一种HTML文档类型，该类型将讲述如何处理我们的代码
• ：包装我们所有HTML的开放标签，以便浏览器知道我们的代码从哪里开始及其结束的位置（请注意关闭 tag）
• ：包含有关我们网页的所有不可见信息的开放标签，也称为元数据- 我们将在下一部分中仔细研究（请注意关闭标签）
• ：一个开放标签，用于包含我们网页上所有可见内容 - 我们将在本节中添加元素（请注意关闭标签）

Note：如果您不太熟悉HTML语法，我建议我们HTML guideas a good way to brush up on your skills before continuing.

Add metadata to your head.

Metadata is defined as data about the data. In the scope of our HTML document, think of it as information about the document for the web browser. It is housed under the, which separates our metadata from the我们的内容将居住的地方（请记住下一节）。让我们在我们的下添加一些元数据。

The