YOU ARE HERE: Home Page - Web Design - Build Your Own Site - Step 1

Design your own website


.:Step 1:. - .:Step 2:. - .:Step 3:. - .:Step 4:. - .:Step 5:. - .:Step 6:. - .:Step 7:.
Before we get to any coding or explanations on them, I would like to show you how it all works. Once you understand the basic works of a website, we will explore some more tags and attributes.

1. Create a new folder and call it anything you want. Inside that folder, open a new file in a text editor, any type of text editor would do, I always use Note pad, or Note pad ++.
2. Type the following into the text editor:
(Note: You can copy and paste, but for now, let's rather type. Use the enter button to go to the next line, and don't leave any lines open.)

3. Save the file as mysite.html and you have your first website. In the folder, you will now have two items, your text document as well as a internet icon. To view your site, simply open the internet file.
Don't get too excited yet, this is just a blank page, with no words, and no meaning. Let me shed some light on what you have just done:
In order to put anything in your website, you act the same as putting something in the fridge.
How do you put an elephant in the fridge ?
Open the door, put the elephant in, close the door.
Your website works the same way. To open and close anything, we use opening tags, and closing tags. All tags ar always between < and >, without the spaces.

So, let's take a closer look at what you've done:

  • < html > Opening html tag - This is your html start tag. The Opening tag of your website.
  • < head > Opening head tag - this is the opening tag for the head of your website. The head gives information about the content of your website.
  • < title > Opening title tag - This tag opens the title of the current page. It is displayed at the top of your website.
  • < /title > Closing title tag - Since the title is just one line, it is closed immediatly usually all in the same line of your text document.
  • < /head > Closing head tag - Closes the head of your site
  • < body > Opening body tag - Your opening body tag. The body is where you put all the content that you want inside your site.
  • < /body > Closing body tag
  • < /html > Closing html tag - This tags shows the end of your site.

    • But it is not the end for us yet. If you closed your notepad, open it again by right clicking on the new file you saved, and click on open with, then select notepad. Between your opening and closing title tags, type in My Site. Now, just after your opening body tag, type in My first site. Your notepad should now look like this:

    Save this and open your webpage, which should now have My site in the top bar and the words "My first website" in the page. Keep these files as we will be using them for the rest of the steps and just keep building on this.