HTML TUTORIAL

EMBEDDED STYLE

<html>
<head>
<title>inline style</title>
</head>
<body>
<center>
<h1>Style difference</h1>
</center>
<span style="letter-spacing:20px">letter-spacing:20px</span>
<br>
vertical-align:<span style="vertical-align">super</span>
<br>
<span style="text-decoration">text-decoration:underline</span>
<br>
<span style="margin-left:20%">margin-left</span>
<br>
<span style="text-indent:20px">text-indent:20px</span>
<br>
<span style="text-decoration:overline">text-decoration:overlin
</span>
</body>
</html>
Preview

HTML TUTORIAL

Embedded styles heets

<html>
<head>
<title>
css tutorial
</title>
<style type="text/css">
body {background:white;color:black}
A:link{color:red}
A:visited{color:blue}
A:active{color:green}
H1 {FONT-SIZE:36pt}
</style>
</head>
<body>
welcome to my page
<a href="http://wwww.arenagraphics.blogspot.com%22%3earena/ graphics</a>
</body>
</html>
Preview

 

HTML TUTORIAL

External style sheetsexternal style sheets are stored separately from your webpage.These are useful when if you are setting the styles for an entire websites,meaning all the pages in the site.When you change the style in an external style sheet ,you effectively change the style of all the pages that use it.

HTML TUTORIAL

Type of creating style.

1.Embedded style sheetts:Styles are specified in the <style> element.

2.External style sheets:useful when you want allthe pages on Your Websites to follow same style.

3.Inline Styles -style attribute of the tags that you want to style is used,insted of the <style>element.

Note-Different browsers show different output of css.

Frame HTML Tutorial

STEP WISE FRAME TUTORIAL
With help of frame we can create multiple display areas.
body is replaced by <frameset>
Step1.create some HTML document 1st.
Document 1

<html>
<head>
<title>frame document 1</title>
</head>
<body>
 frame photoshop
</body>
</html>
save it as frame photoshop.html.
Document 2

<html>
<head>
<title>document 2</title>
</head>
<body>
frame coreldraw
</body>
</html>
save it as frame coreldraw.html
Document 3
<html>
<head>
<title>document 3</title>
</head>
<body>
frame max
</body>
</html>
save it as frame max.html
 Document 4<html>
<head>
<title>document 4</title>
</head>
<body>
frame indesign
</body>
</html>
save it as frame indesign.html

 Document 5
<html>
<head>
<title>document5</title>
</head>
<body>
frame illustator
</body>
</html>
save it as frame illustrator.html

ALL HTML DOCUMENTS AND INDEX HTML DOCUMENT SHOULD BE IN SAME FOLDER.
IMAGE FOLDER SONG FOLDER ALSO SHOULD BE IN SAME FOLDER.
NOW TRY THIS
EXAMPLE 1
<html>
<head>
<title>frame tutorial</title>
</head>
<frameset cols="150,*,2*">
<frame src="frame photoshop.html">
<frame src="frame max.html">
<frameset rows="50%,50%">
<frame src="frame coreldraw.html">
<frame src="frame indesign.html">
</frameset>

</frameset>
</html>
save it as index.html
PREVIEW-

EXAMPLE 2

 <html>
<head>
<title>frame tuitorial</title>
</head>
<frameset cols="80,*,2*">
<frameset rows="80,*,2*">
<frame src="frame photoshop.html">
<frame src="frame photoshop.html">

<frme src="frame photoshop.html">
</frameset>
<frame src="frame max.html">
<frameset rows="50%,50%">
<frame src="frame coreldraw.html">
<frame src="frame indesign.html">
</frameset>

</frameset>
</html>

save it as index html.

EXAMPLE 3

<html>
<head>

<title>frame tutorial</title>
</head>
<frameset cols="300,*">
<frameset rows="300,*">
<frame src ="image/logo.png"width=300 height=300 scrolling=no marginwidth=1 marginheight=1>

<frame src="frame photoshop.html">

</frameset>
<frame src="frame max.html">

</frameset>
</html>

save it as index html.

EXAMPLE 4

<html>
<head>

<title>frame tutorial</title>
</head>
<frameset cols="300,*" border=30 bordercolor=#ook66c">
<frameset rows="300,*">
<frame src ="image/logo.png"width=300 height=300 scrolling=no marginwidth=1 marginheight=1>

<frame src="frame photoshop.html">

</frameset>
<frame src="frame max.html">

</frameset>
</html>

Save it as index .html

 

 

HTML tutorial

Directory and menu list

<HTML>
<HEAD>
<TITLE>Directory and menu list </TITLE>
</HEAD>

5
<BODY>
Directory and menu list
<dir>
<li>photoshop
<li>illustrator
<li>coreldraw
</dir>
</BODY>
</HTML>
preview-

HTML tutorial

Definition list

<html>
<head>
<title>definition list</title>
</head>
 
<dl >
<dt>matter
<dd>Any thing which occupies space, have mass called matter  
 
<dt>chemistry
<dd>The branch of science which deals with matter and its transformation. 
</dl>
</body>
 
</html>
preview-

HTML tutorial

Text breaking

<HTML>
<HEAD>
<TITLE>breaking tag</TITLE>
</HEAD>
<body>
i like following  graphics software<br>Adobe ohotoshop<br>Adobe illustrator<br>CorelDraw
 
</BODY>
</HTML>
 
 
 
 
 
Preview-
 

HTML tutorial

Text properties

<HTML>
<HEAD>
<TITLE>text properties</TITLE>
</HEAD>
<body>
<b>bold</b><i> italic</i> <u>underline</u><font size=10>font size </font><font face="arial">FONT FACE ARIAL</font>
<FONT COLOR="#005647"> FONT COLOR</font>
 
 
</BODY>
</HTML>
 
 
 
 
 
 
preview-

HTML tutorial

col span

<html>
<head>
<title>row span</title>
</head>
<body>
<table border=3 CELLPADDING=30>
<tr>
<td colspan=2 BGCOLOR="#crft64">colspan</TD>
<td BGCOLOR="#b6f444">B</TD>
<td>&nbsp</td>
 
</TR>
<tr>
<td rowspan=2 BGCOLOR="#8f5t4">rowspan</TD>
<td BGCOLOR="#fkfdt4">F</TD>
<td BGCOLOR="#3gltt4"G> </TD>
<td>H</TD>
 
</TR>
<tr>
 
<td BGCOLOR="#fkfdt4">F</TD>
<td BGCOLOR="#3gltt4"G> </TD>
<td>H</TD>
 
</TR>
</table >
</body>
</html>
 
preview

HTML tutorial

Table background

<html>
<head>
<title>TABLE BACKGROUND COLOR</title>
</head>
<body>
<table BGCOLOR="#ggftt4" border=3 CELLPADDING=30>
<tr>
<td>A</TD>
<td>B</TD>
<td>C</TD>
<td>D</TD>
 
</TR>
<tr>
<td>E</TD>
<td>F</TD>
<td>G</TD>
<td>H</TD>
 
</TR>
</table >
</body>
</html>
 
preview-

HTML tutorial

Table tags

<html>
<head>
<title>table</title>
</head>
<body>
<table border=1 width=700 HEIGHT= 300>
<tr>
<td VALIGN="TOP">sarvan IN ACTUAL SIZE</td>
<td VALIGN="RIGHT">ranjeet</td>
<td>vikash</td>
<td VALGN=<CFNTER>guddu</td>
<table border=3 width=100% HEIGHT= 100%>
<tr>
<td>sarvan IN PRCENTAGE</td>
<td>ranjeet</td>
<td>vikash</td>
<td>guddu</td>
</TR>
</table >
</body>
</html>
preview-

HTML tutorial

List tag

<html>
<head>
<title>list tag</title>
</head>
<body>My Hobbies and interest
<ul type=disc>
<li>movies
<li>listioning music
<li>cricket
<li>traveling
</ul>
My favourite movies
<ul type=square>
<li>Guide
<li>Munna Bhai M.B.B.S
<LI>Dhol
<li>Dhamal
</ul>
My favourite cricketer
 
<ul type="circle">
<li>sachin tendulkar
<li>shane warne
<li>Harbhajan singh
</ul>
 
</body>
</html>  
 
preview-