 OMSI/WinterHaven PSD2000 Project:
Inquiry Sessions | Portfolio | Resources | Teaching Guide
Inquiry Session 3: Making a Basic Web Page
Would you believe you only need to know six HTML tags to make a basic web page?
Basic HTML Tags | Formatting HTML | Make a Basic Webpage | When Things Go Wrong
Basic HTML Tags
Listed below are the six basic HTML tags you need to know to create any webpage.
The opening and closing tags are listed in the exact order of a complete HTML document with sample text (in black) in between.
| <HTML> |
beginning of a HyperText Markup Language (HTML) document |
| <HEAD> |
beginning of document's head section |
| <TITLE> |
beginning of document's title |
| A Basic Webpage |
actual page title |
| </TITLE> |
end of document's title |
| </HEAD> |
end of document's head section |
| <BODY> |
beginning of document's body section |
| <H1> |
beginning of a top-level headline |
| A Basic Webpage |
actual headline |
| </H1> |
end of a top-level headline |
| <P> |
beginning of a paragraph |
| This is a basic webpage that includes all the required HTML tags, and also a top-level headline and a paragraph. |
actual paragraph text |
| </P> |
end of paragraph |
| </BODY> |
end of document's body section |
| </HTML> |
end of document |
 As you can see, the entire webpage is enclosed in the <HTML> open and </HTML> close tags. This tells the web browsers that everything inside those tags is in HyperText Markup Language.
 All webpages have two main parts: a head (inside the <HEAD> open and </HEAD> close tags) and a body (inside the <BODY> open and </BODY> close tags).
 The <HEAD> of a webpage is where you put general information about the page that only the web browser needs to know. Nothing inside the <HEAD></HEAD> tags will appear in the web browser window, except the <TITLE>, which will appear at the top of the browser window, not on the page itself.
 The <BODY> of a webpage is where you put everything that will actually appear in the web browser window.
Every webpage should have the <HTML> <HEAD> <TITLE> and <BODY> tags, as well as whatever tags you use in the <BODY> to format your text, such as <H1> and <P>.
 There are six levels of headline tags <H1> through <H6>. The most important headlines in your webpage should use the <H1> tag, the next-most important the <H2> tag and so on down to <H6>.
|
EXAMPLE:
<H1>Where I Live</H1>
<H2>The Universe</H2>
<H3>The Galaxy</H3>
<H4>The Solar System</H4>
<H5>Earth</H5>
<H6>My Hometown</H6>
|
 Use the <P> tag for each paragraph in your webpage.
|
EXAMPLE:
<H1>Where I Live</H1>
<P>This is a webpage where I describe where I live. I'll start at the top...</P>
|
Formatting HTML
Now that you've learned all the HTML tags you need to make a basic webpage, you're almost ready to create your own!
But first, a remarkable fact about HTML: your HTML code can look very complicated or messy but your webpage may still be as neat as a pin!
Take a look at the HTML code for our basic webpage. Here it is all orderly and neat:
|
WELL-FORMATTED HTML CODE:
<HTML>
<HEAD>
<TITLE>A Basic Webpage</TITLE>
</HEAD>
<BODY>
<H1>A Basic Webpage</H1>
<P>This is a basic webpage that includes all the required HTML tags, and also a top-level headline and a paragraph.</P>
</BODY>
</HTML>
|
And here's the same basic webpage, but now the HTML code is as messy as can be!
|
BADLY-FORMATTED HTML CODE:
<hTmL><HEAd>
<title>
A Basic Webpage</TITLE>
</hEAD>
<BodY><H1>A Basic Webpage
</H1><P>
This is a basic webpage that includes all the required HTML tags,
and also a top-level headline and a paragraph.</P>
</bODy></HtMl>
|
It may surprise you to find that well-formatted HTML code and badly-formatted HTML code look exactly the same as webpages in a browser!
Both pages look the same because when a browser displays HTML, all extra spaces between words and lines (called "whitespace") are ignored and it doesn't matter if HTML tags are in upper or lower case. As long as all the right tags are there in the right places, the webpage will look the same!
However, if the webpage from the messy HTML code above didn't look right, how would you figure out what was wrong?
For HTML to work, all the right tags have to be in the right places. Messy code often doesn't work the way you want it too and it's hard to figure out what tags are missing or out of place.
If you make a habit out of formatting your HTML code neatly and consistently, it will be much easier to fix the HTML tags if something doesn't look right.
Make a Basic Webpage
Now you're ready to make your own basic webpage! Begin by making a new folder on your own computer just for this webpage.
Let's say you named your new folder "webpage". Now you are ready to create a webpage and save it in that folder.
Open a basic text editing program, and create your webpage by entering all the tags and text from the basic webpage above. At any time you can replace the black text inside the <TITLE> <H1> and <P> tags with your own. Hint: you can also copy the entire basic webpage from the Well-Formatted HTML Code above and paste it into your text editor!
Now save your webpage (with a name like "home.htm") in the folder you created for it ("webpage").
You're now ready to test your webpage! Even though your webpage isn't on a web server connected to the Internet, you can still view the webpage on your own computer.
Open a web browser program (like Netscape Navigator or Communicator or Microsoft Internet Explorer) and choose "Open File" or "Open Page" or "Open" from the "File" menu -> Navigate to your webpage folder and open it ("webpage") -> Open your webpage ("home.htm").
Congratulations! You now should see the title of your webpage at the top of the browser window and your webpage in the browser window as you made it.
When Things Go Wrong
If you don't see what you expect in the web browser, it's time to troubleshoot!
If you can't find your webpage, don't see anything at all, see a bunch of strange characters, or get an error message, follow the three basic troubleshooting tips of web design:
|
WEB DESIGN TROUBLESHOOTING:
- Make sure the file is in the right place: Browse on your computer to make sure you have put the file you are looking for in the right place. If you can't find the file, try your computer's "Find" feature to look for it and put it in the right place.
- Make sure the file has the right name: Rename the file following the Rules for Naming Web Folders & Files in Session 2. Make sure the file name ends with a period and the right three-letter extension (".htm" for HTML files; ".gif" for GIF image files; ".jpg" for JPEG image files; ".png" for PNG image files).
- Make sure the file is in the right format: Webpages must be plain text files and image files must be in web formats like GIF, JPEG or PNG. Review the Web File Formats section in Session 2 if necessary.
|
go back to Inquiry Session 2 | Inquiry Session 4 coming soon!
Inquiry Sessions | Portfolio | Resources | Teaching Guide
|
