Web Page Template
By Stephen Bucaro
It might surprise you to know that you can create a webpage document by simply typing
any text into a simple ASCII text editor, like Windows Notepad, or Mac Textedit. Do not
use a fancy word processor because they add their own tags that interfere with HTML.
Notepad is a simple editor that saves text only in ASCII format. To save in ASCII format
in Textedit you have to use Format - Convert To plain Text before typing anything. Or
set use plain text; add .txt extension when saving in the Preferences of Textedit.
Every webpage starts out with a basic set of tags. Shown below is the template for a
basic webpage. Type these tags into a file and than save it with the .htm file extension.
<title>The HTML5 Herald </title>
Now, I will describe the tags starting with the first line and working my way down the page.
The doctype (Document Type Declaration) tells the browser what type of document it is.
The doctype tag should always be first at the top of the HTML file. There are different
doctypes for older versions of HTML, and the doctype tag tells the browser how to
interpret the code. This tag defines the document as containing HTML5.
Just below the doctype line is the html element. The html element contains the lang
attribute set with a value of "en". This specifies that the document is in English.
An html attribute is a property name and value within an opening tag that provide
additional information about the element. An example might be width="500".
Each type of HTML element has specific attributes. Each attribute has a default
value that will be used if you don't specify that attribute within the HTML tag.
Because this is XHTML we need a closing </html> tag, which you'll find at the bottom
of the code. To put it another way, the <html></html> element is a container for
all the other elements of the webpage.
The next line of our page is the <head> element. The head element defines the head
section. The head section contains any code that must be interpreted before the body of the
contains <meta> elements. Meta elements are tags placed in the head section of your
webpage that help define its contents. For example, a description meta tag is used by
search engines to display a description of your page in their search results.
In this case the head section contains the <meta charset="utf-8">, which defines
the character set used to encode the webpage. The utf-8 (8-bit Unicode Transformation Format)
character set is character encoding capable of encoding all 1,112,064 characters in Unicode
using four 8-bit bytes.
There are many other types of Meta elements, but we need only the character set Meta tag for now.
The head section also contains the <title> tag. This is were you type the title
of your webpage as you want it to be displayed in the browser's title bar.
Just below the closing </title> tag line is the closing </head> tag.
Just below the closing </head> tag is the opening <body> tag. Between the opening
and closing </body> tag is were all the HTML code for all the visual elements of the
webpage should be placed. Since this is a just a template, there are no visual elements.
Just below the closing </body> tag is the closing </html> tag. This indicates
the last bit of webpage code has been entered.
If you submitted this template to your browser (in most systems by double-clicking on its
file name, you would see nothing. To continue further, make a copy of this template, then
enter some text into the body element. Then when you submitted this new page to your
browser, the text will be displayed.
To be technically correct, when you type text into the body section as I described above, it
should be contained within a paragraph element <p>Your text.</p>. The browser would
take text just typed in to the body element and (behind the scenes) place it within an anonymous
element. So it would display, it just would not be coded technically correct.
More HTML Code:
• Aligning an Image on Your Web Page
• HTML Numbered or Ordered List
• Easy Code to Add Yahoo Site Search to Your Website
• Code For a Basic 2-Column Fluid Webpage Layout
• Easy Code to Add Google Site Search to Your Website
• HTML Definition List
• HTML center Tag
• The Font Tag
• Wrapping Text Around Images
• Changing the Size of an Image on Your Webpage