Lession 2: How to easy learn HTML Elements?

Hello friends how are you? I hope you are fine !

Welcome back to My Blog !

Last session Am share HTML Basic's.... In this section we will see briefly in HTML Elements and How to make static webpages?

Ok lets come.............

Am describe here! Some important HTML Elements only...

HTML: Heading Tags

We use some heading in your webpage use this heading tag's. There are 6 heading tags available that is h1,h2,h3,h4,h5,h6

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>
<h1>Welcome</h1>
<h2>Welcome</h2>
<h3>Welcome</h3>
<h4>Welcome</h4>
<h5>Welcome</h5>
<h6>Welcome</h6>
</body>
</html>

Outout is:

HTML: Paragraph Tags

We can make paragraph use paragraph tags<p>....</p>. and additionally you can use attribute's.

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>
<p>A Web site on which an individual or group of users record opinions, information, etc. on a regular basis.</p>

<p align="center">A Web site on which an individual or group of users record opinions, information, etc. on a regular basis.</p>

<p align="justify">A Web site on which an individual or group of users record opinions, information, etc. on a regular basis.</p>

<p align="right">A Web site on which an individual or group of users record opinions, information, etc. on a regular basis.</p>
</body>
</html>

HTML Formatting tags:

Formatting tags is known as text formation. If you use bold, italic, underline, keyboard text,
Italic: <i>Text</i>
Bold:<b>Text</b>
Underline: <u>Text</u>
Keyboard Text: <kbd> Text</kbd>

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>
<i>Text</i>
<b>Text</b>
<u>Text</u>
<kbd> Text</kbd>
<strong>Text</strong>
<h6>Welcome</h6>
</body>
</html>

HTML Link:

Link is used to navigation purpose. You can set hyperlink text and image. you click this link page navigate to another page. Its done by anchor tag <a>.
If you set link important attribute is 'href'. This attributes denote navigation page url or target page url.

Syntax: <a href="target page">Link</a>

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>

<a href="home.html">Go to home</i>

</body>
</html>

HTML Image:

You can displayed an image on your webpage. use <img> tag. If you set image important attribute is 'src'. This attributes denote navigation image url. Note it this not an ending tag</img>. dont forget it. Another important attribute is 'width' and 'height'.

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>

<img src="images/baby.jpg" width="400" height="300" />
<a href="baby.html"><img src="images/baby.jpg" /></a>

</body>
</html>

HTML List:

There are three type of list available

Ordered List
Unordred List
Definition List

You can any type list. if you add list item you can use <li> list item tag. if you use defintion list <dt> and <dd> tags. that is defintion term and defintion data.

Syntax:

Ordered List:

<ol>

</ol>

Note: default ordered list takes an order is 1,2,3,4,.... This order wanna to be change you can attribute is "type".

Type1: default (1,2,3,4...)

Type2: "I" (I,II,III,IV....)

Type3: "A" (A,B,C,D....)

Type4: "a" (a,b,c,d.....)

Type5: "i" (i,ii,iii,iv,......)

Example:

<ol type="A">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ol>

Unordered List:

<ul>

</ul>

Note: default unordered list takes an order is disc format.This order wanna to be change you can attribute is "type".

Type1: disc (default)

Type2: circle

Type3: Square

Type4: Image

Example:

<ul type="square">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ul>

Definition List

Like the entires you find dictionary or encylopedia, complete with text,picture and other multimedia content.

<dl>

<dd>Definition</dd>

</dl>

HTML Table:

You can make table or page layout ,use Table tags. The three major tags available in table Elements

1. table : <table></table>

2. table row : <tr></tr>

3. table data : <td></td>

Note: <tr> are inside the <table> tag. ,<td> is inside the <tr> tag.

Example
<html>
<head>
<title>Heading tags</title>
</head>
<body>

<table>
<tr>
<td> Ist row table data </td>
</tr>

<tr>
<td>2st row table data </td>
</tr>
</table>

</body>
</html>

Basic Attributes of Table elements:

Attributes	Description	Example
border	Set table border	< table border="2">
width	Set width table and td	< table width="1000"> <td width="200">
Height	Set Height table and td	< table width="1000"> <td width="200">
bgcolor	Set bgcolor table and td	<table bgcolor="grey"> <td bgcolor="grey">
background	Set background image table and td	<tablebackground="bg.gif"> <tdbackground="bg.gif">

HTML Form Handling:

"Majorly we can use form to get input from user". HTML Froms are required when you collect data from the site visitor.
A form will take input from the site visitor and then will post your backend appilcation such as PHP, ASP, JSP. then your backend application will do required processing on that data in whatever way you like.

We make form

<form>
form controls like textbox, button..etc
</form>

Form Attributes:

Name : Its form name, user defined name.
Action : here mention action page url. client side datas are requested to a server.
Method : Specify the requested method GET or POST.
Enctype : Its use file upload

Form Controls:

Text input controls(Textbox,Password, Textarea)
Buttons( Button, Submit, Reset)
Checkbox
Radiobutton
Dropdownbox(Combo box)
File Upload
Hidden control

Form Control Attributes:

Type : Specify the input type like text, button,submit, radio, checkbox
Name    : Specify the control name. its give a related name for a control. Bcoz easily identify the control.
Value    : Provide the initial value and displayed purpose of controls.
Size    : Specify the size of text controls.
Maxlength : Specify the Maxlength of text control.
Rows : specify the rows value in textarea control
Cols : specify the cols value in textarea control

TEXTBOX:
<input type="text" name="username"/>
PASSWORD:
<input type="password" name="password"/>
TEXTAREA:
<textarea rows="5" cols="30" name="address"></textarea>
BUTTON:
<input type="button" name="buttoncmd" value="CLICK"/>
SUBMIT BUTTON:
<input type="submit" name="submit" value="SUBMIT"/>
RESET BUTTON:
<input type="reset" name="resetcmd" value="RESET"/>
CHECK BOX:
Languages:<input type="checkbox" name="lang" value="1">Tamil
<input type="checkbox" name="lang" value="2">English
RADIO BUTTON:

Sex:<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female

DROPDOWN BOX:
City:<select name="city">
<option>Dindigul</option>
<option>Madurai</option>

<option>Trichy</option>
<option>Chennai</option>
</select>

HIDDEN CONTROL:
<input type="hidden" name="pageno" value="2"/>

HTML iFRAME:

An iFrame is used to display a webpage with in a webpage or website. To add ifrmae, we can use following sytax:
<iframe>...............</iframe>

iFrame Attributes:

src : Webpage or website url
width : Specify the iframe width.
height : Specify the iframe height.
frameborder : To set iframe border. If you remove iframe border to set 0.
name : To set iframe name.

Example:

<iframe src="a.html" width="500" height="400" name="myframe" frameborder="0"></iframe>

set target link in iFrame:

<iframe src="a.html" width="500" height="400" name="myframe" frameborder="0"></iframe>
<a href="b.html" target="myframe">Show in iframe</a>

Easy Making webApps - Source code

Tuesday, 5 February 2013

Lession 2: How to easy learn HTML Elements?

No comments:

Post a Comment

What is AI- Artificial Intelligence - தமிழில்