HTML - Basic Tags

Post date: Oct 01, 2012 4:30:27 AM

<HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the entire HTML document. Therefore HTML is called a container element. You should use the HTML element for each of your web pages.

<BR>

<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line.

<P>

<P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.

<HR>

<HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags.

<HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags

Open your index.html file and type in this bit of code:

Please type:

<HTML>

<HEAD>

<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>

</HEAD>

<BODY>

Hi, my name is ___________.<BR>

This is my first attempt at a Web page.<HR>

Here is a riddle for you.

<P>Why did the lobster blush?<HR>

Because it saw the salad dressing.<BR><BR><HR>

</BODY>

</HTML>

What does it look like when you view the file in a web browser?

<HEAD> and </HEAD> tags

Each web page must have the HEAD element. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed in your browser. It can be seen by choosing Source, or Page Source or Document Source from the View menu of your browser (one of these choices should be in the browser's View menu). The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below).

<TITLE> and </TITLE> tags

One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. The title in our example (line 3) is "WEB PAGE DESIGN - BASIC TAGS". Notice that this title is placed by the browser at the very top of the screen - above the menu choices.

The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page. That is, when a visitor bookmarks your site (adds it to their favorites list), it is the title that appears in the list. Most search engines also use the title in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. Most search engines insist on a short title and a general rule of thumb is no more than 75 characters including spaces.

<BODY> and </BODY> tags

After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages is declared through the BODY element. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY> tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are container tags, containing the body of your document. The BODY tag can actually be left out. If you place all the HEAD elements first, the browser will know where the actual body begins.

HEADER TAGS

Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time.

There are only six HEADER tags and they range from H1 to H6.

H1 produces the largest size heading and is called the "level 1 heading".

H6 produces the smallest size heading and is called the "level 6 heading".

Try this code in your index.html file and check it in your web browser:

<HTML>

<HEAD>

<TITLE>HEADING LEVELS</TITLE>

</HEAD>

<BODY>

<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.

<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.

<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.

<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.

<H5>THIS IS H5.</H5> THIS IS NORMAL SIZE.

<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR>