Build Your Own Web Page In A Few Easy Steps

Step 1

You have to create an empty document to put your web page in.
  1. Open Windows Notepad
  2. Copy The text in the box below.
  3. Paste it into Notepad
  4. Save it. In the file name put myPage.html. Below the file name change the "file type" to all files. If you leave it set to .txt this won't work.
  5. Notice where you saved the file
  6. From now on when you save changes to the file in notepad, just hit refresh on the browser and the latest version will show up.

The text you just placed on the page is the structure of the web page. The < and > symbols are "tags". Most tags have a matching closing tag which starts with a / so the opening tag of the page is <html> and the closing tag is </html>. Everything we add from now on will be between either the head tags, or between the body tags. Things between the head tags won't be seen by the user, its where we put JavaScript and CSS. Things that we do want the user to see will be between the body tags.

Step 2

Lets put some stuff on the page! We will start with a title. Copy the code from below BETWEEN the <body> and </body> tags.

Save your file and refresh the page in the browser.

You should now see My Title written in big letters at the top of the page.

You can change the text to something else, save it, and refresh it to see the change. Just make sure you don't delete any <or> symbols.

Next you can try changing the size and boldness of the title. If you change the 1s inside the tags to 2s, so they look like this <h2> and </h2> and save it, and then refresh your browser, you will see that the size changes.

These are called "Headers" and there are 7 levels, h1 through h7. Try several and find one that you like. Also, keep in mind that it might look a little different in a different browser.

Step 3

Now I'm going to add a list of my favorite animals. You can copy my list and then change it. Make sure you put this after the </h2>, but before the </body>

First I am going to put a title. I want it smaller than the main title, so I'm going to use <h3> and </h3> before and after it.

To start my list I start with <ul>. This stands for "unordered list". That means a list with bullets. If I want a numbered list, I would put an <ol> at the beginning instead of a <ul>. If you want to change it to a numbered list instead of just the bullets, make sure you change both u's to o's.

After that you will see I have a <li>. This stands for List Item. I will put this tag before every item on my list. Then it will have a bullet or number in front of it and it will start on a new line.

Here's my list

Step 4

No web site would be complete without some pictures. Normally you would copy the pictures to the same server as the page, but for this we will just link directly to a picture somewhere on the web.

Copy the code from the box below. Put it after the closing /ul tag but before the /body tag. We will change it to display your own picture next.

Save and reload the page, you should see a picture of a polar bear

Now find a link to a picture you want to display (make sure the address ends in .png or .jpg) and replace everything inside the quotation marks after src= with your address.

The width="300" tells the page to show the picture 300 pixels wide. If you don't specify a width or height it will display at the actual picture size. You can also specify the height of the image like width="300" height="300" and it will display the image square, but it will squish the picture out of proportion (see the second picture below). If you specify only height or only width it will size it in the same proportion as the original.

Now copy the code a second time and paste it on the line below the first one

Notice when you save and refresh it, the pictures are side by side (unless they are too wide to both fit). HTML ignores returns and multiple spaces. If you want to go to a new line you have to use a "break" tag. Just put <br> between the two image tags and it will put the second picture below the first.

Step 5

Most web pages have links to other pages. Now we'll add one. Copy and paste the text below after your images, but before the /body tag

Save and reload the page, you should see a link to a web page.

Now replace the link inside the quotation marks with a link to a page you want, and change the text that says "Polar Bears International" with a description of the page you linked to.

The target="_blank" tells the browser to open the link in a new tab.

Polar Bears International

Step 6

Now we need to make the page prettier. We do this using CSS. CSS goes between the <head> and </head> tags. The <style> and </style> tags tell the browser that everything between is a styling instruction.

Copy the text inside the box below between the <head> and </head> tags on your page. Save and refresh the browser.

When you save and refresh you will see I have made your page really ugly. The "color:red" set the text color as red. The "background-color:yellow" set the background color to yellow, "font-family:Courier" made the font Courier. The "font-size:14px" made the text 14 pixels high. Look at the link below to find color names that you can use instead of the ugly ones I chose.

Color Names

Font names are a little trickier. There are some that work on most computers, but if you choose an unusual one it might work on your browser, but not on other peoples. Here's a few common ones: Times, Georgia, Arial, Verdana, Courier, Palatino, Impact. Some may not work, it depends on the computer. You can specify up to three like this... font-family:Impact, Arial, Courier It will use the first one that is installed.

Step 7

One last thing. Notice that in the tab at the top of the browser your page just has the file name (which is probably myPage.html if you followed the instructions in step 1). Lets change that. Copy the following after the <head> tag, but before the <style> tag. This will set the text in the tab to "New Name". Now change it to whatever you want.