Build-your-website Home Page

build-website-header
 

Starting 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 <tag> indicates the beginning of a tag-pair, and the </tag> 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.

<body bgcolor=”white”>

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 <HTML> is the same as <html>.

Next come the header tags <HEAD> and </HEAD>. 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 <TITLE> and </TITLE> 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 <BODY> and </BODY>, 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>

Here is how the headings would be displayed in a browser

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 <P>, and the end by </P>. When a browser comes across a <P> 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 </P> 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) :

<H1> Starting HTML - A beginners Guide </H1>

This is the first paragraph. Notice that I haven't used the paragraph tags as the heading tag itself puts some white space before and after it.

<H2> This is a sub heading with two paragraphs</H2>

<P> Paragraphs are a very important part of web page layout . It is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long.

</P>

<P> This is the second paragraph and I will use it to illustrate how very large paragraphs look on web pages. Has stated above it is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long. So here we are going to make a very large paragraph that you can later view in a browser of your choice just to see it it looks ok or not. The paragraph itself is not exceptionally long as it only spans 7 lines, Can you imagine how it would look it it spanned 10 or 15 lines.

</P>

<P>

Lets finish with a nice short paragraph

</P>

 

The file should look like this

 

Continue to next---->part3

part1<------Previous

Starting HTML  Sections

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Other HTML Books

Amazon UK

cover

HTML for the  World Wide Web with XHTML

Other HTML Books