Learning how to make a website may seem a bit like re-inventing the wheel however, knowing the basics of how to make a website will definitely be an asset. Even if you plan on using a free blog service such as blogger or WordPress, knowing just a little HTML and CSS will enable you to tweak your code and personalize your online presence. Or if you are like me, you can become obsessed and spend everyday and most nights in front of a computer screen trying to keep up with the never ending onslaught of new ways to build and use websites.
This article is aimed at the absolute beginner so I will not go into any other extraneous subjects such as reserving a domain name, subscribing to a host or an internet service provider. If you can read and type and have a computer you’ll have a website by the end of this article. I am on a PC running Windows so the instructions will be specific to that platform. If you are on a MAC you will need to adjust certain things for your platform such as click-hold and and using the Finder toolbar as opposed to right clicking on the desktop to create and re-name files.
Begin by making a new text file on your desktop. Do NOT use MS Word or any other rich text editor. These programs will add all sorts of unwanted stuff to the code when saved as web pages. Please, don’t use Word, just use a plain old text editor such as notepad.
Open your new file by double-clicking it. At the top of your new file type the following…
HTML is an abbreviation for Hypertext Markup Language. HTML is the coding language used to make a web page. Each element of a web page must have a starting tag and an ending tag. An html tag is used to define the elements that will be the web page. By entering the beginning and ending html tags you have told your computer that this file is a web page. We will now put more elements in between these to further define our page.
The first sub-element in our head sub-element is the TITLE. The title doesn’t show up on the web page but it does on the browser, at the very top next to the little picture on the top, left of your browser. Just enter the following in between the starting and ending head tags.
The first sub element within our head sub element will be the TITLE. The title doesn’t necessarily show up on the web page but it does show up on the browser, at the very, very top next to the browser icon (the little picture on the top, left of your browser). To do this, enter the following in between the starting and ending head tags.
A good habit to get into is indenting sub-elements. Indentation helps the eye to follow the code which helps us find our way around, especially after our code gets bigger and contains more elements.
Your file should now look like this…
<html> <head> <title></title> </head> </html>
Now give your file a title by entering Page1 inside the title tags.
<html> <head> <title>Page1</title> </head> </html>
Now for the BODY tag. This is the text that will be the actual content of your web page. Just like the title and head, the body element must have a starting tag and an ending tag. Put it below the head element but still within the html element.
<html> <head> <title>Page1</title> </head> <body> </body> </html>
Now type something within the body tags. This will be the actual content that will be the first page of your website.
<html> <head> <title>Page1</title> </head> <body> Page1 </body> </html>
Now save your file. Next rename it by replacing the .txt extension with .html. Your file should now be named “Page1.html”. Open up a new browser window and drag and drop Page1.html file into it. Or just double click it and a browser will open automatically since the .html extension will tell the computer that this is a web page and the computer will know to open a browser.
You’re first web page is done.
We’re not finished yet. Let’s make another file and then link the 2 files together.
FIRST re-rename this file back to its original name with the .txt extension because we will be adding more to it and we need it to be a plain old text file. If you don’t do this when you double click to open it, it will open up in a browser because the computer will see the .html extension. Unless you have Dreamweaver or some other html editing program you need this to be a .txt file or it will not open in your plain old text editor.
Using the same process you used before for Page1 make another file on your desktop and rename it to Page2. Double-click to open it and replace both instances of Page1 with Page2.
<html> <head> <title>Page2</title> </head> <body> Page2 </body> </html>
Save this file. It will look the same as the 1st except with the Page2 added to the top of the browser and in the body.
Now go back to your 1st file, Page1.txt and open it up if it isn’t already. Add another line below the Page1 that says Page2. This line will be the link to the 2nd file.
Before we add the 2nd line of code lets put a line break after our 1st line of text. An html line break looks like this…
Notice that there are no starting and ending parts for the line break code, they’re actually combined, there is a space, then the forward slash then the less than bracket after the br part. It’s an all in one tag. Using this after the 1st line will move the next line down. If we didn’t do this the 2 lines would be right next to each other and that would not look right or even illegible.
<html> <head> <title>Page1</title> </head> <body> Page1 <br /> Page2 </body> </html>
This 2nd line of text in our 1st file will be the link. We’ll use the anchor tag. The anchor tag is a link however, anchor is the correct term. These are similar to the other tags (except the line break) since they have a beginning part and an ending part with the forward slash ( / ) denoting the ending part.
Replace Page2 with the following…
Keeping in mind that when we are done coding we will be renaming both files to have the .html extension.
The href=”” is the part of the anchor that has the name of the file you are linking to, in this case it is our second file, Page2.html (currently named Page2.txt).
Save this file.
Now we need a link to return to the 1st file from the 2nd file. Open up Page2.txt, add the <br /> after the 1st line of text then add a 2nd line just as we did before to make a link back to our 1st file.
Save this file. You should now have 2 files, Page1.txt and Page2.txt.
They’re code should look like this…
<html> <head> <title>Page1</title> </head> <body> Page1 <br /> <a href="Page2.html">Page2</a> </body> </html> <html> <head> <title>Page2</title> </head> <body> Page2<br /> <a href="Page1.html">Page1</a> </body> </html>
Rename them both to have the .html extensions. Page1.html and Page2.html.
Open the 1st file in your browser or just double click it. Now click the link to the 2nd file and there you are. Now click the link back to the 1st file and you’re back again.
You have just learned how to make a website.