There are many ways to build a website. Options range from the simple, a couple pages on your computer, to a website on a remote server where content is stored in a database. This article describes the simplest option. In the next few magazine issues, I'll describe more technical ways to build a website.

However you learn to build a website, it can be a great way to learn about computing, computer science, plus have some fun.

What Is a Website?

This might seem an odd place to start. However, parts of building a website only make sense when you understand what a website is and how they work.

If you don't already know, the internet is a set of computers that use software to speak the same language as they send and receive data between each other. This could be sending email from software on your computer upstream to another computer at the company that provides your internet access and from there to other computers until your email arrives at a computer near the person you emailed. They open their email software and see your email.

Websites work in a similar way. You open a web browser, type in a web address, your browser sends the address upstream to a computer at the company that provides your internet access and from there to other computers until the request arrives at a computer where your web address is received, processed, then sent back to your web browser. The data sent back to you is code to display in your web browser. This return data is text and images with instructions on how to organize the data visually in your browser.

To create a website visible on the internet, you need access to a computer on the internet that will translate a unique web address into data displayed in a web browser. Access can be through publishing software stored on that remote computer or using software to connect to the remote computer then upload or download files.

At every stage in this process, remember, computers talk back and forth in one or more common languages. HTML is one of those languages, a standard set of instructions used to organize data displayed in web browsers (as we will see). HTTP (hyper text transfer protocol) is another standard, used to transport data from web browsers to web servers and back again. FTP (file transfer protocol) is used to upload and download files from your computer to a remote web server.

Imagine if every person in the world spoke French or English or Swahili. Computers on the internet speak the same language made of different sets of standards, like dialects or vocabularies. Here's another way to think about it. Imagine if you had one language used to get dressed, another language to go to school (or work), another language to drive your car, and so on. That's how the internet works.

You do not have to be a rocket scientist to build a website or maintain a website. As you'll see, it can be a fairly simple project. You will learn a few things but there are ways to build websites without being too technical.

Like Goldilocks and the Three Bears, we'll do three versions, a Baby Bear Website today with a Momma Bear Website and a Poppa Bear website in the next few issues of this magazine. Your mileage will vary. Maybe you don’t like bears, for example.

A Simple (Baby Bear) Website

Yes, you could go to Wix.com or dozens of other websites and create your own website from scratch. But you would not learn much about how websites are created and how they work. This project will show you hands on the basics of the code behind web pages and how web pages link. It’s also a project where you can easily tweak the code to add pages and play around to learn even more.

In it's simplest form, a website can be one or two HTML web pages. To create the web pages, you'll need text editor software, for example, Notepad in Windows or Textpad in Mac. You'll also need a web browser. If you don't have these tools, links are at the bottom of this article.

Let's create your first web page:

1. Open your text editor software.
2. Type in the code below these instructions. Or copy/paste the code into your text editor.
3. Save your file to your computer desktop as my-webpage.html.
4. On your computer desktop, right mouse click over your my-webpage.html file and open the file with your web browser.
5. Go back to your text editor software and change the text between the H1 and P tags. Reload your web page in your browser to see your changes. If you make a mistake, no worries: start again with the code below.

Here is the code to type or copy then paste into your text editor in Step 2 above:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>

    <h1>My First Web Page</h1>
    <p>Wow, this is my first web page!</p>
    <p>Well, this is <strong>bold</bold> and <em>italics</em>!</p>
    <p>Here is <a href=&#34;my-second-page.html&#34;>a link</a></p>
</body>
</html>

No worries if you don't know HTML, the structured language above. It's a simple language to understand and learn. Basically HTML is a set of tags you use to tell a web browser how to display content. See the H1 tag in the code above? It tells the browser the text between <h1> and </h1> is heading text. The browser then displays heading text a default way compared to other text. For example, text between H1 heading tags is always displayed in a large font size and bold.

Do you also see how the <h1> and </h1> tags are paired? Same for <p> and </p>. Even the <a href=""> tag has a pair, the </a> tag. The </a>, </p>, and </h1> tell the web browser where each of these tags end and, therefore, when to stop doing what they do.

In the case of the <a href=""></a> tag, the href="" bit tells the web browser what to link to since this tag is used to create links between web pages. The </a> tag, as noted before, tells the web browser where to stop linking text. So my-second-page.html is a second web page we'll build next, to build a website with two pages, or more if you want to take what you've learned and create more pages.

And here are explanations for each part of this code:

The bottom of this article has links to more information about HTML tags and how they work. Remember, the biggest mistake people make with HTML is forgetting to close a tag for an HTML tag that has a close tag. The bottom half of your page, for example, will be all large type if you forget to close the </h1> after heading text. Add in the close tag and magically your text returns to normal.

With one web page created, and a general idea how HTML is used to create web pages, let's create a second web page:

1. Open your text editor software.
2. Type in the code below these instructions.
3. Save your file to your computer desktop as my-second-page.html.
4. On your computer desktop, right mouse click over your my-second-page.html file and open the file with your web browser.
5. Go back to your text editor software and change the text between the H1 and P tags. Reload your web page in your browser to see your changes. If you make a mistake, no worries: start again with the code below.

Here is the code to type or copy then paste into your text editor in Step 2 above:

<html>
<head>
<title>My Second Web Page</title>
</head>
<body>

    <h1>My Second Web Page</h1>
    <p>This is my second web page!</p>
    <p>Well, this is <strong>bold</bold> and <em>italics</em>!</p>
    <p>Here is <a href="my-webpage.html">a link to my first web page</a></p>
</body>
</html>

Notice how the <a href="my-webpage.html"> tag now links to my-webpage.html, the file name of your first web page? When you save the code above as my-second-page.html — which is the file name in the href="" value used in your first web page, you should be able to click the link on your first web page and go from there to your second web page, back and forth.

Congratulations! You have a simple website plus the basic knowledge to add content and create pages of content. Feel free to add pages. Browse the HTML resources linked at the bottom of this article to add images and do other neat stuff. And be sure to come back in the next few months for more advanced tutorials to create websites.

Learn More

W3 Schools

While there are many online HTML reference sites, this one makes it easy to practice HTML.
http://www.w3schools.com/html/
http://www.w3schools.com/tags/

HTML Help by the Web Design Group

This site is a little ancient but it includes prior versions of HTML, if that is useful.
http://htmlhelp.com/