#2 -- Your First Webpage

It is time to get started on your homepage.  For your first page, you will do things the old-fashioned way, you will type out the HTML code for the page, not create it in an HTML editor program. 

HTML stands for Hyper Text Markup Language. This this the language that all web pages are written in. To create a webpage, you make a file written in this language (also called "code") either in a text editor or an HTML editor (these are both software programs). 

HTML code will look very strange to you, and not at all like what you see in a web browser.  That is because a web browser reads HTML code and "translates" it into what you see on your computer screen.  To see what the HTML code looks like for this page, move your mouse up to the "View" menu at the top of your browser's toolbar and choose "source." A window will open up in front of you showing the HTML code for this page. You can close the source window after you have looked at it. 

Did that look overwhelming? Don't worry about how it looked. You don't need to know what it all means yet.  Right now, all you need to do is follow the directions below and I'll explain things later. 
 

  • First, start the plain text editor that comes on all Windows based computers It is called NotePad (go to the Start button, then Programs, then Acccessories and choose NotePad). 

    •  
  • Next, type <HTML> and press the ENTER key. 

    •  
  • Third, type <HEAD> and press the ENTER key. 

    •  
  • Now type <TITLE> __________'s Homepage </TITLE> (type in your own name instead of the blank) then press the ENTER key. 

    •  
  • Type </HEAD> and press ENTER. 

    •  
  • Type <BODY> and press ENTER. 

    •  
  • Type <P> Hi, my name is _____________________. I am a student at George Mason University.  Then press ENTER.
  • Type </BODY> and press ENTER. 
  • Type </HTML> and press ENTER. 

    •  
  • Save your file with the name index.html (you can save it in My Documents)
    • Go to the File menu and choose Save As ... 

      •  
    • At the top of the dialog box that opens, in the Save in rectangle, use the little black down arrow to choose My Documents

      •  
    • In the File Name rectangle, type in the file name index.html
      • Be sure to type in the .html extension too!

        •  
    • In the Save As Type rectangle, keep file type as Text Documents (*.txt)

      •  
    • Click the Save button
You did it! You made your homepage. If you want to see what it looks like, under the "file" menu in your web browser, choose "open" and then use the "Browse" or "Choose file" button to get to your file (remember you called it index.html) in My Documents (this is kind of like browsing for a file to attach in e-mail). Click the open and/or ok buttons and your webapge will open in the screen in front of you. 

You might think it looks boring right now, but you've got to start somewhere! 

To help you understand a little bit of the HTML code you typed, let's start with the term "tag." 

  • An HTML tag is anything you typed between angle brackets < >. Most tags come in pairs. 
    • For example, you started by "opening" an HTML tag, <HTML>. You ended your file by closing the HTML tag, </HTML>. The HTML tag tells a web browser that the file it is reading is an HTML file (and when you close the tag, you tell the browser that it has come to the end of the file). 

HOMEWORK:  Look at your practice webpage as it looks in a web browser and try to discover answers the following questions. 
 
  1. Where does the text you typed in the TITLE tag appear on your computer monitor? 

    2.  
  2. What text "shows" up on your webpage when you view it in a browser? 

    3.  
  3. Does any of the text within a tag show up on your webpage in a browser? 


E-mail me your answers by the beginning of next class. Send your index.html as an attachment to the message. 

ALSO, send yourself a copy of your index.html file as an attachment in an e-mail message to yourself.
 
Maintained by: Laurie Miller
Last updated: September 15, 2003