How to Make a Webpage

Instructions for Making a Simple Webpage

  1. First, open a writing program like MS WORD that will save what you write in text-only format: Also, be sure to have Internet Explorer the browser open while you work on the page, so that you can see the changes you are making.
  2. At the top of the Text document, type: <html> This lets Netscape, Internet Explorer, or whatever browser people are using, know that it is about to view a webpage.
  3. At the very bottom of the page type: </html> This lets the browser know that it has come to the end of your document. Be sure that everything you write in this document fits between <html> & </html>
    <html>





    </html>


  4. Now, between <html> & </html>, type: <head>, then on the next line: <title> After this type what you want to call this page. It's what the browser will show in the description window when it is open. For example <title>LMS Pirates Victory Page
    Then, of course type: </title> You will soon learn that everything that gets enclosed in < > must have a closure by using the "/" function when you want it to end.
    On the next line, type: </head>
    <html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>



    </html>


  5. Now save this file as ______.html and replace "______" with whatever you want to call it. For example mortimer.html If you now open the file with the browser, you should see a blank page with a grey background. (with Internet Explorer, it may appear as a blank white page)
  6. Now, on the line after </head>, type: <body bgcolor="white">, and towards the bottom of the page, on the line before </html> type: </body> This lets the browser know that the page needs to have a white background. Re-open this file again with the browser and you should see a blank page with a white background! Try some other colors - like "red", "yellow", etc. It works! If you chose to use a colorful background, you'll have to make sure your font color shows up! If it's dark, consider using: <font color=white>
    <html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>
    <body bgcolor="white">



    </body>
    </html>     		<html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>
    <body bgcolor="purple">
    <font color=white>


    </body>
    </html>


  7. You are now ready to start putting in your page what you want to say to people who read it! On the line after <body bgcolor="white">, type <p><font size=5><b>_______</b></font size=5>
    replace the "_______" with what you want to have as the title of your document. This will appear at the top of the page, and should probably be larger than everything below it! Try different font sizes like 4 and 3, to see how much smaller each size is. The largest is 6.
    <html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>
    <body bgcolor="white">
    <p><font size=5><b>Welcome to The LMS Pirates Victory Page!</b></font size=5>



    </body>
    </html>


  8. For writing the other parts of your page, you might want smaller lettering and certain placement; for instance: <p align center><font size=3> will place a line in the center of the page and font size will be much smaller than the Title. Another thing you might be wondering is, "How do I create more space between things?" The answer is a line break: <br> If you need lots of space vertically, then just insert lots of <br> (breaks), one after another!

    To make an ordered list: <ol>, then <li> for each list item defines a list. Note that you do not have to type numbers in front of your list items. The browser will keep track of the order for you. For example:
    <html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>
    <body bgcolor="white">
    <p><font size=5><b>Welcome to The Angevine Bobcats Victory Page!</b></font size=5>
    <p align=center><font size=3>
    Notice How this is Centered?
    </font size=3>
    <ol>
    <li>Why is there air?
    <li>Why do baby's cry?
    </ol>


    </body>
    </html>

    Welcome to the LMS Pirates Victory Page!

    Notice How this is Centered?
    1. Why is there air?
    2. Why do babies cry?


  9. Inserting "links" where you'd like people to go from your page is done by, first finding a website. Then, Copy the "URL" which is the code in the top window of your browser. It starts with "http". Paste it into the following phrase: <a href="http://________">link name</a>. Of course replace "_______" with the URL code.
    <html>
    <head>
    <title>LMS Pirates Victory Page
    </title>
    </head>
    <body bgcolor="white">
    <p><font size=5><b>Welcome to
    The LMS Pirates Victory Page!</b></font size=5>
    <font size=3>
    <ol>
    <a href="http://home.mindspring.com/~mcdave1/DidjeriduPage.html">All about Didjeridus</></a>
    <li>What are didjeridus?
    <li>How do you play didjeridu?
    </ol>


    </body>
    </html>

    Welcome to the LMS Pirates Victory Page!

      All about Didjeridus
    1. What are didjeridus?
    2. How do you play didjeridu?


  10. For adding pictures, use this code: <img src="picname.gif-or-jpg">. Of course you'll have to replace "picname.gif" with whatever the actual picture file name is that you want to use. To download a picture from the internet, find what you want then right click if it's a PC, or just click and hold if it's a Mac and select "Save As", and select the folder where you're saving your working webpage file.
    You can also make a picture be a link to another website:
    <a href="http://animaldreams.net/school/student.html"><img src="kidicon.gif" border=0></a>
    It should be noted that a picture is just one of many possible file types which can work this way. Other possibilities include sound or movie files. Warning: Sound and Movie Files are EXTREMELY Large!
  11. Tables are quite useful in spreading out information across a page. For example, if you would like a set of pictures to line up nicely with descriptions centered beside them, the use of table would be a nice way to square up the page.
    The code for a table function is: <table>, and each cell in the table is: <td>. After you have established a row, the return function for another row is: <tr> For example:
    <table border=1>
    <td>
    <img src="kidicon.jpg">
    </td>
    <td>
    LMS Pirates Rule!
    </td>
    </table>
    LMS Pirates Rule!


  12. In order to place a repeating background picture on your webpage, you'll need this little bit of code: <body background="______.gif-or-jpg">, and naturally you'll need to replace "_______" with the name of the picture!

    Another thing you might want know at this point, is how to make another page that links to the page you're making now. You just make another page like your first, saved in the same folder as the first, and with a different name. The link to open it is done the same as the other links I've showed you, except that you don't have to preceed the URL with http://www.domainname. Instead you link it this way: <a href="______.html">whateverthispageis</a>
    For example:
    <html>
    <head>
    <title>LMS Science Rocks!
    </title>
    </head>
    <body background="sci2.gif">

    <a href="escicrs.html">LMS Science</a>
    </body>
    </html>
    LMS Science


  13. A helpful hint for those who might like to see how websites you like are making things happen with code you might want to use for yourself, is simply to select "View Source" from your browser's top menu. Try that for this page and notice how I was able to create this page from raw code!

    For more information on HTML code, click here! A Guide to HTML

    So that everyone can access your page on the internet, you must have a parent who has available web space for you to use, or is willing to pay for your webspace, then you'll need to get your .html document and "ftp" it with the correct ftp codes to "upload" to their server.
    How to FTP Files

  14. Grade Your Own Page

My Home Page