In another article, “How to Build a Website,” we talked about a robust, long-term set of guidelines for beginners who want to experience the power of creating a new website. However, that article dealt only with long-term guidance, and had no hands-on steps for actually teaching you how to make a website.
In this article, we’ll show you the direct nuts and bolts of how to build a website – albeit, the simplest website you’ve ever seen.
Before you start, you’ll need:
- Notepad, or Simpletext, or some other plain text editing program. Every computer has this.
- A list of web pages you’d like to link to. Come up with 10 or 20 websites, or articles, and divvy them into categories.
- A few color choices. Here’s an excellent page that visually shows you the many color choices available: http://www.computerhope.com/htmcolor.htm
Alright, let’s get started learning how to build a website!
Step 1: The basic document structure.
In your plain text editor, put the following code:
<title>My First Website!</title>
<h1>Hey, it’s a start!</h1>
<p>Cut me some slack, I’m just learning how to build a website for the first time!</p>
The indenting and extra lines are purely optional, but helpful to you.
Save that file on your desktop, and name it something like “mywebsite.html.”
Important tip: In Notepad’s file save dialog, be sure to choose “Files of type: All files” before you save – or it might mangle the filename by adding .txt at the end.
Once it’s saved, double click that file, and it should open in your web browser. You should see the title (My First Website!) in your browser’s top-most bar. The heading and paragraph will appear rather plain, but they will indeed appear!
You’ve just learned how to build a website in less than 10 minutes!
Now, let’s teach you how to build a website that’s a bit more useful. The following advice will help you later, if you ever write blog posts, or want to share a few ideas or links with colleagues.
Even though you’ll probably use software to create the finished web page in the future, you’ll still know more about how to create a website by following these tips.
Step 2: Adding links.
You should have noticed above that everything in a website has a pair of matching tags, for example:
<p>This paragraph has a start “p” tag and and end “/p” tag.</p>
When you see <these things> in the HTML code, that’s called “markup code.” (The “M” in HTML stands for “Markup.”) Here’s how to use a new tag, called the “anchor” or simply “a-tag” to create a website with links.
Underneath the paragraph you already entered in basic website you just created, add this:
<p>This is <a href=”http://www.5shades.com”>a link to a great web design company!</a></p>
If you’re going to learn anything about how to create a website, then we’d better break that down briefly.
The <a> tag is how you create links to other pages. You’ll notice that the a-tag doesn’t immediately end with a closing bracket, but it continues with href=”something” … and in the example above, that something was this website’s main page.
Then some text appears – in that example the text was “a link to a great web design company!” After that text, was the closing </a> tag.
Save the file with that addition, and reload it in your web browser. You’ll be able to click the linked text, and arrive at our website!
That’s the basics! For more help getting started with building a website, continue to part two of this article, “Hello, Web Design!“