Universal HTML: HTML basics

Introduction to HTML

HTML stands for Hyper Text Markup Language
HTML is used for developing static web pages
HTML files have an extension of either .htm or .html

A HTML file consists of many markup tags. Tags inform the browser as to how text, images, tables, etc should be displayed.

HTML is not case sensitive
HTML standards are developed by W3C (World Wide Web Consortium) [www.w3.org]. The latest version of HTML is HTML 5 which was published in January 2008.

HTML tags

HTML tags are enclosed within angled brackets (“<>”). The general form of a HTML tag is:

Here the opening tag takes the form of : <opening tag> and the closing tag is of the form: </closing tag>. The difference between the opening and the closing tag is the closing tag contains a forward slash (“</>”). Most of the HTML tags have both an opening and a closing tag. There are only a few tags that don’t have both (opening and closing) tags (which will be discussed latter). As a good practice every opening tag should have a corresponding closing tag, even though browsers are cable of rendering documents where certain closing tags are missing. There are many tags associated with HTML.

Structure of a HTML document

The basic structure of a HTML document is:

<html>

<head>

</head>

<body>

</body>

</html>

A HTML document should start a with a <html> tag. So when the browser sees the opening <html> tag it identifies a HTML document. The last tag of the document should be a closing </html> tag which indicates the ending of a HTML document.

A HTML document can mainly be divided into two sections. i.e: the head section and the body section. Material displayed (tag, text, etc) between <head> and </head> comes under the head section. Material appearing in this section is not displayed in the browser page. Material in this section provides information about the document. The main tag in the head section is <title></title>. Any text appearing between <title> and </title> is displayed on the title bar of the browser window.

Contend appearing in the body section is displayed in the browser page. Most of the tags defined in HTML come under the body section.

Some times it s confused between tags and elements. This can be explained by an example.

Tags refer to the opening and closing tag. Element refers to the tags and the element content taken together.

Let's start our First web page.

This is a very simple html document. First open your Notepad and enter the bellow lines.

<html>

<head>
<title>My First Web Page</title>
</head>

<body>

<p>
My First Web Page </p>
</body>

</html>

Now we should save the file So Follow bellow steps to save.

File => Save as

File should save with adding .html or .htm to the end of the file name. Eg: first.html

Give “All Files” as Save as Type.

Then open Your browser and open your saved file (first.html). The output should be like this

Content between <title>and </title> of the head section is displayed in the title bar of the browser. In the body section there is only one element, which is <p> My First Web Page </p>. Content of this element is displayed in the browser page.

As explained before an HTML document consists of a head section and a body section. Now let’s take a look at some of the tags that appear in each of the section.

Parts of a HTML document

Document head

Some of the tags permitted in the head section of a document are:

<title> - there can only be one title for a web page.

<base> - specifies the documents base URL

Document body

There are wide varieties of elements that appear in the body section. Certain elements are associated with structuring the document and certain elements are associated with styling. Also HTML elements can be differentiated between “Block elements” and “Inline elements”.

Block elements

When displaying content of block elements the browser will have a line break before and after the element content. Some of the important block elements are given in table

Now let’s try out some examples with block elements.

Example 1:

Now let’s try out some examples with block elements.

<html>

<head>
<title>My First Web Page</title>
</head>

<body>

<p>
My First Web Page </p>
</body>

</html>

Example 2:

<html>

<html>

<head>
<title>Headings</title>
</head>

<body>

<h1>
This is Heading level 1</h1>
<h2>
 This is Heading level 2</h2>
<h3>
This is Heading level 3</h3>
<h4>
 This is Heading level 4</h4>
<h5>
 This is Heading level 5</h5>
<h6>
 This is Heading level 6</h6>
</body>
</html>

Inline Elements

Inline elements don’t have a line break before or after the element. Usually inline element appears within block elements. If inline element appear separately a break tag (“<br>”) is used to make a line break.

Note: when inline elements are not included within block elements then a break tag needs to be added to make line break. <br> tag is a special tag, since it does not have a opening and a closing tag. The break tag can be typed as either “<br>” or <br />. <hr> is another tag that does not have both a opening and a closing tag. It can also be typed as either as “<hr>” or “<hr />” in HTML. <hr> tag creates a horizontal line across the web page.

Attributes

Attributes give more meaning to elements. Attributes are places in the opening tag. The syntax of an attribute is:

<opening_tag attribute=”value”>element content</closing_tag>

Eg: <body bgcolor=”red”>
      …………
      ………….
   </body>

Here the bgcolor attribute is placed in the <body> tag. bgcolor is the name of the attribute. The value of the attribute is placed inside double quotes (“”). In this example the value of the bgcolor attribute is red. Though it is not mandatory to place an attribute value within double quotes, it is a good practice to follow.

There are wide varieties of attributes used with elements. Most of the important attributes will be discussed during the course in various sections. In general attributes can be put into five groups. They are universal attributes, language attributes, events, presentational attributes and specialized attributes. Some of the universal and presentational attributes will be discussed in this chapter.
2.5.1 Universal attributes

id attribute

The “id” attribute gives an element a unique identity in the document. The id attribute value must be unique otherwise during rendering the browser will throw an error message. “id” attribute must start with a letter or an underscore and should only contain alphanumeric characters. “id” attribute has replaced the use of the “name” attribute.

Style attribute

This attribute is used to introduce style into a document. But however style sheets are a better method of styling than using this attribute. This attribute is supported by many elements.

Example:

<html>

<html>
<head>
<title>Use of Style Attribute</title>
</head>

<body style="background-color:yellow">

<p style="font-size:24pt; font-type:arial">
A paragraph with a font size of 24pt's and the 
font type is arial</p>
<p>
Standard font size and type</p>
<p style="background-color:green; font-size:16pt">
text with a backround color of green</p>
<p style="margin:18pt">
A block of text with a 18 pt's margin</p>
</body>
</html>  <br>

<body style="background-color:yellow"> changes the background color of the whole page to yellow.

But when this is used on a <p> tag as:

<p style="background-color:blue; font-size 16pt">text with a backround color of blue</p> only the background covering the paragraph will be changed. Here also the text of the paragraph section will be set to a font size of 16.

font-type:arial sets the desired font type.

margin:18pt sets the margin to 18pt’s. Here the margin is set to 18pt’s all around. margin-left sets only the left margin. Likewise margin-right, margin-top and margin-bottom sets the appropriate margin to the given value.

Presentational attributes

The align attribute

Tells an element how to align its content. The possible values for this attribute are left, right and center.

Presentation attributes of the body element

background - sets the background to an image set by an URL. The image will be tiled across the page
bgcolor – discussed in a previous section
text – assigns a color to text. This attribute value will be applied to the whole page
link – assigns a color to a link before being activated
vlink – assigns a color to a link after being activated
alink – assigns a color to a link while being activated

Font element and its presentational attributes

Font is an inline element. Its presentational attributes are:

size – sets the font size. Ranges from 1 to 5, the default being 3.
color – sets the font color
face – sets the font name (type)

HTML Comments

In a well prepared web page there would be comments. Comments are placed by developers to make code more readable and easier to understand. Though comments will appear as part of the coding it wont appear on the web browser. The syntax of HTML code is: You can see a comment box in this site.

HTML basics