Showing posts with label html totorials. Show all posts
Showing posts with label html totorials. Show all posts
Sunday, September 27, 2009

WHAT IS AN HTML

Ah, the eternal question… Well, actually, no. But still, it obviously puzzles enough people. Let’s get some answers to the basic and most frequently asked questions first then, eh?

What is HTML?

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the >>W3C, the organisation charged with designing and maintaining the language.

The definition of HTML is HyperText Markup Language.

  • HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
  • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
  • HTML is a Language, as it has code-words and syntax like any other language.

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

What are the tags up to?

The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:

These words will be bold, and these will not.

In the example above, the tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through an ordinary web browser.

Is this going to take long?

Well, it depends on what you want from it. Knowing HTML will take only a few days of reading and learning the codes for what you want. You can have the basics down in an hour. Once you know the tags you can create HTML pages.

However, using HTML and designing good websites is a different story, which is why I try to do more than just teach you code here at HTMLSource — I like to add in as much advice as possible too. Good website design is half skill and half talent, I reckon. Learning techniques and correct use of your tag knowledge will improve your work immensely, and a good understanding of general design and the audience you’re trying to reach will improve your website’s chances of success. Luckily, these things can be researched and understood, as long as you’re willing to work at it so you can output better websites.

The range of skills you will learn as a result of running your own website is impressive. You’ll learn about aspects of graphic design, typography and computer programming. Your efficiency with computers in general increases.You’ll also learn about promotion and your writing will probably improve too, as you adapt to write for certain audiences.

Do I have to be online all the time?

Not at all. You can code your entire website offline, storing it all on your own computer, and then just transfer all the files onto the web. Then whenever you have new content, you just add that to the existing online version of your site. It’s really quite simple.

Is there anything HTML can’t do?

Of course, but since making websites became more popular and needs increased many other supporting languages have been created to allow new stuff to happen, plus HTML is modified every few years to make way for improvements.

Cascading Stylesheets are used to control how your pages are presented, and make pages more accessible. Basic special effects and interaction is provided by JAVASCRIPT, which adds a lot of power to basic HTML. Most of this advanced stuff is for later down the road, but when using all of these technologies together, you have a lot of power at your disposal.

Friday, September 25, 2009

BASIC HTML PROGRAMS







Lab Program
1



<!A HTML program to mark up a chosen text by
using header level 1, paragraphs, strong and
emphasis.>


<HTML>


<HEAD> <TITLE> PROGRAM 1
</TITLE> </HEAD>


<BODY>


<H1
ALIGN=justify> Welcome to HTML </H1>


<P>


<STRONG>D</STRONG>dynamic <EM>
HTML </EM>is an extents of <EM> HTML
</EM>


powered
by programming scripts that<BR>


lets
you add that extra bit of interactivity to
your<EM>W</EM>website


was
just not possible with
<BR>plain<EM>HTML</EM>.<STRONG>V</STRONG>


validations are possible
through<EM>DHTML.</EM>


<P>


<STRONG>T</STRONG>here are various
scripting languages that are useful for implementation


of
<EM>D</EM>dynamic<EM>HTML</EM>.</p>



<H1> SCRIPTING LANGUAGES
</H1>


<B> Javascript </B>
<BR>


<I>VBscript</I>
<BR>


<U>JSP</U>
<BR>


<STRIKE>ASP</STRIKE>
<BR>


<EM>XML</EM>
<BR>


</BODY>


</HTML>







Lab Program
3



<!A HTML program to create an web
page using an image (.gif file).>


<HTML>


<HEAD><TITLE> Program
3</TITLE></HEAD>


<BODY BACKGROUND="../GRASS.JPG" >


<H1>


<p><b><u> Demo Program of Images
</u><b></p>


<b> WELCOME TO ANIMAL WORLDS
<B>


<div
align=left> parrot image </div>


<img
src=../parrot1.jpg width=100
height=100 align=left alt="loading picture"
border=2>


<div
align=left> crane image </div>


<img
src=../crane.jpg
align=left
border=5>


<div
align=left> Leopard image </div>


<img
src=../leopard.jpg width=200
height=200 alt="loading picture" border=2>


</H1>



</BODY>



</HTML>






Lab Program
4



<!A
HTML program to create a Link for popular web
sites>


<HTML>


<HEAD>


<TITLE> CREATION OF LINKS </TITLE>


</HEAD>


<BODY>


<CENTER>


<H1> POPULAR WEB SITES
</H1>


<HR> <H2> REGULARLY VISITED MAILING
ADDRESS </H2>


<HR
WIDTH="20%">


For
visiting Yahoo mails:


<A
HREF="www.mail.yahoo.com">YahooMail</A>
<BR>


For
visiting Rediff mails:


<A
HREF="www.rediffmail.com">RediffMail</A>


<HR> <H2> Searching Address
</H2>


<HR
width="20%">


POPULAR
SEARCH ENGINE:


<A
HREF="www.google.com">GOOGLE</A>


</CENTER>


</BODY>


</HTML>







Lab Program
5



<! A Web page that displays grade of a
Student.>


<HTML>


<HEAD> <TITLE> GRADES OF THE STUDENT
</TITLE> </HEAD>


<BODY>


<CENTER>


<TABLE BORDER="3">


<CAPTION>


<B> <H1> AVERAGE GRADES OF THE STUDENT
BY YEAR </H1> </B>


</CAPTION>


<COLGROUP>


<COLSPAN=5
ALIGN="CENTER">


</COLGROUP>


<TR>


<TH
COLSPAN=5 ALIGN="CENTER" WIDTH="30%"> REPORT CARD
</TH>


</TR>


<TR><TH><TD> 1999<TD>
2000<TD> 2001<TD> 2002</TR>


<TR><TH> SOCIAL <TD> B
<TD> B+ <TD> A <TD> A+
</TR>


<TR><TH> MATHS<TD> A<TD>
A+<TD> A+<TD> A+</TR>


<TR><TH> SCIENCE<TD>
B+<TD> B<TD> A+<TD>
A</TR>


</TABLE>


</CENTER>


</BODY>


</HTML>






Lab Program
6



<!A script that
reads three non-zero values entered by the user in prompt dialogs and
determine they could represent the sides of a triangle.>


<HTML>


<HEAD> <TITLE> SIDES OF A TRIANGLE OR
NOT </TITLE>


</HEAD>


<BODY>


<SCRIPT
LANGUAGE="JavaScript">


var
x,y,z;


do


{


x=parseInt(window.prompt("ENTER THE SIDE
X","0"));


y=parseInt(window.prompt("ENTER THE SIDE
Y","0"));


z=parseInt(window.prompt("ENTER THE SIDE
Z","0"));


}


while((x<0)||(y<0)||(z<0));


max=Math.max(x,Math.max(y,z));


if(max==x)


if((y+z)>max)


window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");


else


window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");


if(max==y)


if((x+z)>max)


window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");


else


window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");


if(max==z)


if((x+y)>max)


window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");


else


window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");


</SCRIPT>


</BODY>


</HTML>







Lab Program
7



<!A script for
small retail shop.>


<HTML>


<HEAD> <TITLE> RETAIL SHOP
</TITLE>


<SCRIPT
LANGUAGE="JavaScript">


var
x,pno,quantity,value,totalvalue


pno=-1;


totalvalue=0.0;


document.writeln("<TABLE
BORDER=1><TR>
<TH>Product
No<TH>Price(in RS.)");


document.writeln("<TH>Quantity<TH>Value(in
RS.)</TR><TR>");



while(pno!=0)


{


pno=parseInt(window.prompt("Enter the Product
Number, 0 to quit","0"));


if(pno==0)


break;


quantity=parseInt(window.prompt("Enter the
Quantity sold for one day:","0"));


switch(pno)


{


case 1:
value=3.50;




break;



case 2:
value=4.75;




break;


case 3:
value=6.50;




break;


case 4:
value=7.99;




break;


case 5: value=9.49;


}



x=quantity*value;


totalvalue+=x;


document.writeln("<TD>"+pno+"<TD
align=right>"+value+"<TDalign=right>");


document.writeln("<TD
align=right>"+quantity+"<TD
align=right>"+(Math.floor(x*100+0.5)/100)+"</TR><TR>");


}



document.writeln("<TD colspan=3>Total Retail
Value for the Last week <TD
align=right>");


document.writeln((Math.floor(totalvalue*100+0.5)/100)+"</TR>
</TABLE>”);


</SCRIPT>


</HEAD>


</HTML>








Lab Program
8



<!A function that determines for a pair of
integers whether the second integer is a multiple of the
first.>


<HTML>


<HEAD>


<TITLE>Whether second number is multiple of
first number or not


</TITLE>


<SCRIPT
LANGUAGE="JavaScript">



function multiple(x,y)


{


if(y%x==0)


return
false;


else


return
true;


}



function check()


{


var
x=parseInt(document.f1.firstnumber.value);


var
y=parseInt(document.f1.secondnumber.value);


if(multiple(x,y))


window.alert("second number is
multiple of first number");


else


window.alert("second number is not
a multiple of first number");


}




</SCRIPT>


</HEAD>


<BODY BGCOLOR="black"
TEXT="white">


<FORM NAME=f1>


<TABLE BORDER="4">


<CAPTION> USER INPUT
</CAPTION>


<TR>


<TH> First Integer


<TD><INPUT TYPE=text NAME=firstnumber
SIZE=10> </TR>



<TR>


<TH> Second
Integer


<TD><INPUT TYPE=text NAME=secondnumber
SIZE=10> </TR>


<TR>


<TD
colspan=2>


<INPUT TYPE=button VALUE="calculate"
onclick="check();"> </TR>



</TABLE>


</FORM>


</BODY>

</HTML>





Lab program
9



<!A Java script that inputs three integers fro
the user and outputs their sum, average, largest use alert dialog box to
display results.>


<HTML>


<HEAD>


<TITLE>


Finding
the sum, average, largest among the given three
numbers


</TITLE>


<SCRIPT
LANGUAGE="JavaScript">



var x,y,z,result,data;




x=parseInt(window.prompt("ENTER THE FIRST
NUMBER","0"));


y=parseInt(window.prompt("ENTER THE SECOND
NUMBER","0" ));


z=parseInt(window.prompt("ENTER THE
THIRD NUMBER","0"));



data=x+","+y+","+z;


function sum()


{


result=x+y+z;


window.alert(" SUM OF " + data + "
NUMBERS IS " +
result);


}




function avg()


{


result=((x+y+z)/3);


window.alert(" AVERAGE OF " + data
+ " NUMBERS IS " +
result);


}




function large()


{


result=Math.max(Math.max(x,y),z);


window.alert(" LARGEST OF " + data
+ " NUMBERS IS " +
result);


}




</SCRIPT>


</HEAD>


<BODY>




<FORM>


<TABLE BORDER="2">


<CAPTION> <H3> Sum, Average and
Largest </H3> </CAPTION>



<COLGROUP>


<COLSPAN="2"
ALIGN="right">


</COLGROUP>



<TR><TH> To Sum of those
numbers


<TD><INPUT TYPE="button" VALUE="SUM"


ONCLICK="sum();">
</TR>



<TR><TH> To get Average of those
numbers


<TD><INPUT TYPE="button" VALUE="AVERAGE"


ONCLICK="avg ();">
</TR>



<TR><TH> To find Largest of those
numbers


<TD><INPUT TYPE="button" value="LARGEST"


ONCLICK="large();">
</TR>



</TABLE>


</FORM>


</BODY>


</HTML>







Lab Program
10



<!A script for selection for selection
sort.>


<HTML>


<HEAD>


<TITLE> SELECTION SORT
</TITLE>


<SCRIPT
LANGUAGE="JavaScript">


var
arr=[9,4,1,5,7];


var
i,j,temp;


document.writeln("Before sorting Array elements
"+arr.join("->"));


n=arr.length;


for(i=n-1;i>0;i--)


{


large=arr[0];


index=0;


for(j=1;j<=i;j++)


{



if(arr[j]>large)


{



large=arr[j];



index=j


}



}



arr[in
dex]=arr[i];



arr[i]=large;


}


document.writeln("<BR> After sorting Array
elements"+arr.join("->"));


</SCRIPT>


</HEAD>


</HTML>






Lab Program
11



<!A script to write word equivalent of check
amount.>


<HTML>


<HEAD>


<TITLE> WORDS TRANSFORMATIONS
</TITLE>


<SCRIPT
LANGUAGE="JavaScript">


function dispwords()


{


var
n=0,i=0,temp=0,r="";


var arr= new
Array();


n=parseInt(document.f1.num.value);


temp=n;


while(temp>0)


{



k=temp%10;



arr[i++]=words(k);



temp=Math.floor(temp/10);


}


arr.reverse();


r=arr.join("
");


document.f1.res.value=r;


}




function words(k)


{


switch(k)


{


case 0:return
"ZERO";


case 1:return
"ONE";


case 2:return
"TWO";


case 3:return
"THREE";


case 4:return
"FOUR";


case 5:return
"FIVE";


case 6:return
"SIX";


case 7:return
"SEVEN";


case 8:return
"EIGHT";


case 9:return
"NINE";


}


}




</SCRIPT>


</HEAD>


<BODY>


<FORM NAME=f1>


NUMBER
<INPUT TYPE=text NAME=num>


<P>


RESULT
<INPUT TYPR+text SIZE=80 NAME=res>


<P>


<INPUT TYPE=button VALUE='WORDS'
ONCLICK='dispwords();' >


</FORM>


</BODY>


</HTML>






Lab Program
12



<!A screen object to get the users screen, then
use information to place an image in the middle of the
page.>


<HTML>


<HEAD>


<TITLE> DEMO ON IMAGES
</TITLE>


</HEAD>


<BODY>


<SCRIPT
LANGUAGE="JavaScript">


var
a,b,l,r;


a=screen.width;


b=screen.height;


l=(a/4);


r=(b/5);


document.writeln("<img src='cookie.jpg'
style='position:absolute; top:"+r+"; left:"+l+"
'>");


document.writeln(c+
"</h1>");


document.writeln(a+"
"+b);


</SCRIPT>


</BODY>


</HTML>






Lab Program
13



<! A CSS program to explain background
attachments.>


<HTML>


<HEAD>


<TITLE> IMAGES AND TEXT
</TITLE>


<STYLE>


body
{




background-image:url(F:\KRISHNA\BHASKAR\bliss.bmp);




background-position:bottom right;




background-repeat: no-repeat;




background-attachmant: fixed;



}


</STYLE>


</HEAD>


<BODY
BGCOLOR=CYAN>


<H1>WELCOME<H1>TO<H1>WORLD<H1>OF


<H1>H<H1>T<H1>M<H1>L</H1>


</BODY>


</HTML>








Lab Program
14



<!A CSS program that explains bordering and
filling boxes>


<HTML>


<HEAD>


<TITLE> BOX AND BORDER
</TITLE>


<STYLE>




DIV { background-color:'blue';



padding:2em;



color:white;



border-color:red;



}


</STYLE>


</HEAD>



<BODY>


<div
style="width:30%"> Just for testing in the call for HTML,CSS is
cascading styles are helpful.


</div><P>


<div
style="width:60%;text-align:right;border-style:groove">


Just
for testing in the call for HTML,CSS is cascading styles are
helpful.


</div><P>



<div
style="width:20%;height:40%;overflow:scroll">


Just
for testing in the call for HTML,CSS is cascading styles are helpful.Just
for testing in the call for HTML,CSS is cascading styles are
helpful.


</div><P>



<div
style="position: absolute; left: 350px; top: 150px; width: 20%;
height:40%;
overflow:scroll;border-style:outset">


Just
for testing in the call for HTML,CSS is cascading styles are helpful.Just
for testing in the call for HTML,CSS is cascading styles are
helpful.


</div><P>



<div
style="position:absolute; left:450px; top:10px; width:20%; height:20%;
border-style:solid">


CSS is
cascading styles are helpful.


</div>


</BODY>


</HTML>






Lab Program
15



<!A function that responds to a click anywhere
on the page.>


<HTML>


<HEAD>


<TITLE> Click any where
</TITLE>


<SCRIPT
LANGUAGE="JavaScript">


function ondoClick()


{


window.alert("Just
Click");


}


</SCRIPT>


</HEAD>


<BODY bgcolor=tan>


<FORM
ONCLICK="ondoClick();">


<H1> ERROR TESTING
</H1>


<H3> CLICK ANY WHERE ON THIS DOCUMENT
</H3>


</FORM>


</BODY>


</HTML>






Lab Program 16



<!A script that blurs image and slowly un-blurs
them when they are fully loaded.>


<HTML>


<HEAD> <TITLE> BLUR FILTER
</TITLE>


<SCRIPT
LANGUAGE="JavaScript">


var
s=1,d=0,f=0;


function start()


{


img.filters("blur").direction=0;


img.filters("blur").strength=1;


img.filters("blur").add=true;


img1.filters("blur").direction=0;


img1.filters("blur").strength=1;


img1.filters("blur").add=false;


}



function run()


{


if(s==35||s==0)



f!=f;



img.filters("blur").strength=(f?
s++:s--);


if(s==0)



img.filters("blur").direction=((d+=45)%360);



img1.filters("blur").strength=s;


if(s==0)



img1.filters("blur").direction=((d)%360);


}



</SCRIPT>



</HEAD>



<BODY onload="start()"
bgcolor=white>


<H1>BLUR
IMAGE</H1>


<div
id="img" style="position:absolute;top:100;left:300;padding:0;
rfilter:blur(add=0,direction=0,strength=0);background-color:white;">


<img
width=200 height=100 align="middle" src= "Bliss.bmp">


</div>


<div
id="img1" style="position:absolute;top:100;left:20;padding:0;
rfilter:blur(add=0,direction=315,strength=20);background-color:white;">


<img
width=200 height=100 align="middle"
src="Bliss.bmp">


</div>


</BODY>

</HTML>





Lab Program
17



<! Use the path control to simulate the
motion of the text inside a MARQUEE tag.
>


<HTML>


<HEAD>


<TITLE> PATH CONTROL
</TITLE>


</HEAD>


<BODY
style="background-color:wheat">


<MARQUEE id="h"
style="position:absolute"><H1>WORLD WIDE
WEB</H1></MARQUEE>


<OBJECT id="oval"
classid="CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">


<param name="AutoStart" value="1"
/>


<param name="Repeat" value="-1"
/>


<param name="Duration" value="6"
/>


<param name="Bounce" value="1"
/>


<param name="Shape"
value="Polygon(4,0,0,80,200,50,0,-400,90)" />


<param name="Target" value="h"
/>


</OBJECT>


<FORM>


<INPUT type=button
style="position:absolute;top:150;left:70" onclick="oval.stop()"
value="onlyMarquee">


<INPUT type=button
style="position:absolute;top:150;left:210" onclick="oval.play()"
value="Along Path">


</FORM>


</BODY>


</HTML>






Lab Program
18



<! Digital clock in a web page.>


<HTML>


<HEAD>


<TITLE> DIGITAL CLOCK
</TITLE>


</HEAD>


<SCRIPT
LANGUAGE="JavaScript">


function start()


{


window.setInterval("run()",10);


}


function run()


{


var
d=new Date();


hh=d.getHours();


mm=d.getMinutes();


ss=d.getSeconds();


h.innerText=hh+":"+mm+":"+ss


}


</SCRIPT>


<BODY bgcolor=tan
onload="start()">


<H1> DIGITAL CLOCK


<H1
id=h> WELCOME </H1>


</HTML>






Lab Program
19



<! Write an ASP program to connect to a
database under test dsn and display the data from Sridhar table in a
tabular format of HTML.
>


<%@Language="VBScript"%>


<%



Set
db=Server.CreateObject("ADODB.Connection")



call db.Open("test","","")



Set
rs=Server.CreateObject("ADODB.RecordSet")



call rs.Open("select * from CSIT",db)



Response.Write("<BODY
bgcolor='tan'">)



Response.Write("<TABLE border=1
cellspacing=3>">


Response.Write("<TR>")



Response.Write("<TH>ROLL
NUMBER<TH>NAME</TR>")



Response.Write("</TABLE>")



while not rs.EOF



Response.Write("<TR>")



Response.Write("<TD>")



Response.Write(rs.fields(0))



Response.Write("<TD>")



Response.Write(rs.fields(1))



Response.Write("</TR>")



Rs.MoveNext()



wend


%>