Step HTML Part 2

HTML TAGS Explained

We will start by examining the HTML we saw in the earlier lesson. This is a very basic HTML page but it illustrates the most basic feature of HTML.

< html >


Starting HTML- my first web page


< /HTML >


HTML consists of a series of tags which are enclosed in Triangular brackets (< >). HTML tags are in pairs and are case-insensitive; that is, it doesn't matter whether you type them in upper or lower case. Using upper case makes the tags easier to pick out in a document, but you can do whatever you like.

HTML tags are used by the browser for formatting the page but they are not displayed. Tags typically occur in 'begin-end' pairs. These pairs are in the form

< tag > .... .. < /tag >

Where the indicates the beginning of a tag-pair, and the indicates the end. (The dots indicate an arbitrary amount of content between the tags. The opening tags can also contain attributes which modify the tag e.g.

The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is:

< html > < /HTML >

That's it. If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen, but it is a valid Web page

Apart from a few exceptions HTML is case insensitive and so is the same as .

Next come the header tags and . The header tags contain all of the document's header information like the document title and so on. They are not displayed by the browser. Between the title tags you should have the title of your document in this case --Starting HTML---.

This will appear at the top of the browser's title bar, and also appears in the history list of the browser and any bookmarks. If you don't type anything between the title tags or don't include the title tags at all then the browser will typically use the actual file name for the title which can be confusing.

Finally the body tags and , between which you find everything that gets displayed in the browser window

Basic HTML Page

The basic HTML page that includes all the required tags is shown in the table below:

< html >

< head >

< title >starting html< /TITLE >

< /HEAD >

< body >

< /BODY >

< /HTML >

If you type the above into Notepad or just cut and paste the code and then save the file as start-html-example.htm. Then if you open start-html-example.htm using internet explorer. Internet explorer should display start-html-example.htm as shown in Figure below:

Notice in the above screen shot how the title "starting HTML" is displayed.


Main HTML Tags

We will now look at the other main HTML tags you need to know. We will start first with the formatting tags:

Headings

The heading structures are most commonly used to divide sections of text. There are six levels of heading (from H1 to H6) and by default browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases. Heading tags look like this:

< h1 >Text for Heading 1< /H1 >
< h2 >Text for Heading 2< /H2 >
< h3 >Text for Heading 3< /H3 >
< h4 >Text for Heading 4< /H4 >
< h5 >Text for Heading 5< /H5 >
< h6 >Text for Heading 6< /H6 >

Paragraphs

A page is composed of a number of sections separated by headings, each of which is composed of one or more paragraphs. Each paragraph is composed of words, and each word of letters. The beginning of a paragraph is marked by

, and the end by

. When a browser comes across a

tag it starts a new line and adds some vertical white space between the last line and the new line.

Paragraphs don't strictly speaking require the closing tag

but you should use it.

Exercise

Open the start-html-example.htm file in Notepad and insert a few carraige returns (hit enter key a few times) so that we open a little space between the body tags. We are going to insert our text between the body tags.


< html >
< head >
< title >starting html< /TITLE >
< /HEAD >
< body >

Our text will go here!

< /BODY >
< /HTML >

Insert the following between the body tags ( copy and paste) :

Continue to next---->Part3