Basic HTML Webpage
All HTML tags use the same basic structure. All tags are made up of words inside of brackets like these: < and >.
Almost all HTML tags come in sets of two.
There is an open tag and a close tag.
The close tag always contains a forward slash:
There are very few exceptions to the two tag rule.
HTML code is not case sensitive.
All of these code examples would produce the same result.
Basic Page Code
The basic code for a web page is shown below.
The head section of a document is defined between these two tags.
<head></head> The head section provides information for browsers and search engines.
I’m going to cover the head section of a web document in a later lesson. For now I’ll concentrate on the body section of the web page.
The body section of the document is defined between these two HTML tags:
This is where the code is placed that makes the text and pictures of your web page appear in the browser.
Copy this block of code and paste it into your text editor:
Save the page in your htdocs folder as firstpage.html.
Be sure to use the ‘Save As’ function and save it with the .html extension.
Be sure to save it in your htdocs folder.
Now open your browser. Use the File function and navigate or browse to your htdocs folder. Open firstpage.html in your browser.
You should see a blank screen. If you see code, you saved the page with a txt extension. Go back and open the page and resave it with the .html extension. If you got the blank screen, you are almost ready to proceed to the next lesson.
Note: After you look at your web page in the browser, don’t close it , just minimize it. When you save your next change, bring the browser up by clicking its tab on the bottom of the desktop. Right click inside the browser window and click Refresh or Reload to see your changes. You don’t need to open and close the browser every time.
The doctype is placed at the very top of the page before the opening HTML tag. I won’t go into detail about what is does, it’s just too technical for this little tutor. It does need to be there for W3C compliance.
Here’s the one we’ll use. There are others that you can use but this one will suffice for this little site.Copy this code and paste it into the very top of the web page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Then save your changes.