Basics of HTML Programming - All HTML Tags and Elements
Introduction of HTML
HTML stands for Hyper Text Mark-up Language. Every HTML document should contain certain standard HTML tag. A tag is called HTML command that indicates now a part of web page should be displayed.
Every HTML document contains different types of tags. Each document is consist of head and body tags.
HTML Page Structure
An HTML tag consists of following tags-
<html>
This tag specifies the document as an HTML document.
<head>
This tag contain information about the document including its title, scripts used, style definitions and document descriptions.
<title>
This tag contains the document title. The title specified inside <title> tag appears on browser's title.
<body>
This forms the largest part of the HTML document. The <body> tag encloses all the tags, attributes and information to be displayed in the web page.
An HTML document Structure
<html>
<head>
<title>………………</title>
</head>
<body>
……………
……………
</body>
</html>
Example of a Program
#1INPUT
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body>
<center><h1>Introduction of HTML Language</h1></center>
<hr color="red">
Welcome to HTML
</body>
</html>
#1OUTPUT ON BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
| Attributes of Body Tag | Description |
| bgcolor | This command is used to change the default background color as per any other color. |
| Background | This command specifies the name of the gif file (image) that will be used as background of document. |
| text | This command changes the body text color from its default to the color specified with its attributes. |
#2INPUT
<html>
<body bg color="red">HTML</body>
<hr>
Welcome
</body>
</html>
#2OUTPUT ON BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
HTML Text
This is most basic element of any HTML page is a ASCII text. HTML pages, while they include html or .html file extension are simply ASCII text files.
Element
An element is a fundamental coponent of the structure of an HTML text document.
e.g. head, table, paragraph and list.
Types of HTML Element
HTML element can be categorized as:
- Container Element.
- Empty Element.
Container Element
This type of html element requires pair tags that is starting as well as an ending tag.
<title>…………………</title>
<ul>…………………</ul>
This is start tag (<title> ) while (</title>) is known as closing tag which having slash sign (/) in it.
html element includes both on and off tag are called container tag.
Empty Tag
This type of html elements require just a starting tag and not an ending tag.
eg. <br> breakrow tag
<hr> Horizontal tag.
These elements are called empty tag.
Heading Element
HTML has six levels of section heading numbered 1 to 6 with one being the most prominent section.
The first heading in each document should be tagged as <h1>
The syntax of the heading element is as follows-
<Hn> text of heading </Hn>, where n is number between 1 to 6 specifying the level of the heading (n=1,2,3,4,5,6)
Block Oriented Element
In the text , a blank line always separates paragraphs . But in HTML the tag <p> provides a blank line.
You must indicates paragraphs with <p> element . Without <p> elements. The document becomes one large paragraph.
#3INPUT
<body>
<h1>Welcome</h1>
<h2>Welcome</h2>
<h3>Welcome</h3>
<h4>Welcome</h4>
<h5>Welcome</h5>
<h6>Welcome</h6>
</body>
#3OUTPUT ON BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
Drawing Lines <hr>
<hr> draws horizontal line.
Attributes of <hr> tag
| Attribute | Description |
| Align | Align the lines on the screen e.g. align="left" (align the left of the screen) |
| Size | It changes the size of horizontal line |
| Width | It sets the width of line |
Some other tags
Text style
Bold <b>……………</b>
Italic <i>……………</i>
Underline <u>……………</u>
Font Size and
All the text specified with in the tags <font>………</font> will appear in the font size and color as specified by the attributes of tag of <font>
| Attribute | Description |
| Fontface | Sets the font to the specified font name |
| Size | Sets the size of the text and takes value between 1 to 7. The default value is 3 |
| Colour | It sets the colour of the text may be given as english color name or hexa-decimal value. |
#4INPUT
<html>
<body>
<b>Hello</b>
<i>Hello</i>
<u>Hello</u>
</body>
</html>
#4OUTPUT ON BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
<strong>
It will increase the actual size of text but just a bit.
<big>
It makes font one size larger than base font size.
<small>
It makes text font one size smaller from the base font size.
<sub>
The subscript enclosed by tag <sub>…………</sub>
puts the enclosed text in subscript (a bit lower than regular text)
<sup>
This text level element specifies that the enclosed text should be rendered in superscript.
#5INPUT
<html><body>
<big>Hello</big>
<small>Hello</small>
<strong>Hello</strong>
H<sub>2</sub>O<br>
H<sup>2</sup><br>
</body></html>
#5OUTPUT BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
<strike>
It strikes the text from middle as a cut between strike tag.
#6INPUT
<strike>Hi guys!</strike>
#6OUTPUT BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
List Tags
Using HTML , you can arrange items in list in several ways. The two most commonly used methods are-
- Bulledted Lists
- Numbered Lists
Bulleted Lists <ul>
This is an unordered list in which each item is preferred with a bullet. An unordered list is used for a list of items in which the ordering is not specific. The tags are <ul>…………</ul> Bullets may be in square, disc and circle.
#7INPUT
<html><body>
<ul type="disc">
<li>section1</li>
<li>section2</li>
</ul>
</body></html>
#7OUTPUT ON BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
Numbered Lists <ol>
This is an ordered list with numbers arranged in either ascending or descending order. The tags used for ol are <ol>…………</ol>
| Type value | Display style |
| 1 | 1,2,3,4…… |
| A | A,B,C,D,……… |
| a | a,b,c,d,……… |
| I | I,II,III,IV,……… |
| i | i,ii,iii,iv,……… |
#8INPUT
<html><body>
<ol type="I">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</body></html>
#8OUTPUT IN BROWSER
 |
| Basics of HTML Programming - All HTML Tags and Elements |
Read More:-
HTML Links
A browser highlights the identified text or image with colour and underline to indicate that is a hypertext link or a link.
Note
Link (anchor) mark texts or images as elements that points to other html documents, images, appletts, multimedia effect or specifies place with in an HTML document.
There are two types of links-
Links to an external document
Links to a specific place within the same document or internal linking.
Link to an External Document
Links are created in a Webpage by using <a>…………</a> tag.
Links are made up of three parts.
An anchor tag <a>
An attribute , href="……" which is created within the opening of anchor tag, like
<a href="………">…………</a>
An address (URL) , which tells about the file to link to URLs identify file locations (address) on the web or on your local hard drive. These addresses can be HTML documents or elements referenced documents. The URL is always enclosed in quotes.
E.g.
<a href="http://www.google.com/">For google search click here</a>
Links to a specific place within the same document
The absence of the file name .html before the symbol of indicates that a jump is required within the same document.
E.g.
<a href="#location name">…………</a>
Link to place in other HTML documents
If you want to create a link from a file to another html file to a specific place, you have to perform the following task.
Creating Tables
<tr>
It creates a table row, which contains one or more cell of information.
<td>
To create individual tag, we use this tag. It stands table data.
<th>
The TH element identifies a table header cell while TD identifies a table data cell.
Caption Element
It isused to label a figure or table. Its attribute is align, which is used to position the caption relative to the figure or table.
TD and TH Attributes
Align
Horizontal alignment of the paragraphs in a table row; values includes left, center, right, justify and decimal (text aligned on decimal points).
Colspan
Specifies the number of columns the cell spans.
No wrap
Prevents the browser from wrapping the contents of the cell.
Rowspan
Specifies the number of rows the cell spans.
Valign
Vertical alignments of material in a cell values include top, middle and bottom.
Attributes of <TABLE>
Border
To set the table border.
Align
To set the content of table alignment.
Cell Padding
You can set this to the number of pixels you want to place between the cells of the table.
Cell spacing
You can set this to the number of pixels you want to place around the data in the cells.
Width
It specifies how wide the table will be.
| Attributes | Functions |
| Align | Control alignment of the text that appears after the image. |
| align=top | shows the text after the image to be written at the top next to the image. |
| align=middle | shows the text after the image to be written at the middle next to image |
| align=bottom | shows the text after the image to be written at the bottom next to image. |
| border | Specifies the size of the border to place around the images. |
| Width | Specifies the width of image in pixels. |
| Height | specifies the height of image in pixels. |
| Hspace | Indicates the amount of space of the left and right of image |
| Vspace | Indicates the amount of space to the top and bottom of image. |
| Alt | Indicates the text to be displayed in case, the browser unable to display the image specified in SRC display. |
EXAMPLE
<html>
<body text="red">
<table border="5" bgcolor="pink" border color="blue">
<tr>
<td>
<img src="image path" height="100">
</td>
<tr>
</table>
</body></html>
Frames
With the help of frames we can divide the readers browsers window into multiple panes of information that can be viewed and changed independently. We can also control the display from one frame to another.
Percentage dimensions to parent frame.
Frameset
We can specify the size of the rows and columns as percentage of the total size of the browser window.
<frameset rows="30%, 30%, 40%">
<frameset cols="30%, 70%">
Relative dimension to parent frames
A relative dimension is specified with
<frameset rows="40%, 60%>
<frame src="………">
</frameset>
When we use <frameset> in our HTML programming , it acts as a replacement of <body>
Note
A frameset is a set of frames defined by the <frameset> tag in the frame definition documents.
Creating two or more columns (<frameset cols>)
When we define a <frameset> tag, we must include one of the two attributes. First of these attributes .
The syntax of the 'cols' attributes is as
<frameset cols="column width, column width…..">
We define the width of each frame in three different ways.
Pixels
Percentage of the total width of the <frameset>
An asterisk
Note
To define a frameset with three equal- width columns, use cols="*,*,*">
<frame> tag
Within the <frameset> and </frameset> tags, we should have a <frame> tag indicating which HTML document to display in each frame.
One of the attributes of <frame> tag is 'src' i.e. <frame src="………">. it specifies the address of document to be displayed in frame.
Syntax of src. attribute is
<frame src="document URL">
Example
<html><body>
<frameset row="40%,60%">
<frame src="www.rediffmail.com">
<frameset cols="50%,50%">
<frame src="www.google.com">
</frame>
</frameset>
</body></html>
You May also like:-
Tags:-
html,html (programming language),html tags,html5 (programming language),basics of html programming part 1,introduction to html programming | part 2 -html tags,html for beginners,html programming basics,programming language (software genre),introduction of html programming,programming,html tags and attributes,basic html tags,html programming part 1,tags,html programming tutorials,html programming
Labels: HTML
<< Home