HTML Refrence Notes

HTML[Hyper Text Markup Language]
HTML – Hyper Text Markup Language
Hyper Text – That type of text which has its significance in electronic form in other word , such type
of text which have a link with other file or document or different position of same or other file.
HTML is not a case sensitive language.
It is a command based language. In HTML that command are called TAGS.
Tags can be written in following form.
<tag name>Statement</tag name>
HTML files can be written in any text editor but its file extension must be either ‘htm’ or ‘html’.
Web Browser – Web Browser are responsible for displaying the HTML file. Ex – Internet Explorer ,
Netscap Navigator , Mozilla , Opera etc.
Example of HTML code
<html>
<head><title>Hello ! world</title></head>
<body>Rocking world</body>
</html>
HTML tags
1. Heading <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
<h1>Hello ! Rocking world</h1>
2. <br> - Line Break
3. <b> - Bold Formatting
4. <i> - Italic Formatting
5. <u> - underline Formatting
6. <sup> - superscript Formatting
7. <sub> - subscript Formatting
8. <pre> - preformatted
9. <strike> - strike throw
10. <big> - Big font
11. <small> - Small font
12. <center> - Center Alingment
13. <p> - make paragraph. It have a white line above and below the
paragraph.
<p align=”left” or align=”right” or align=”center”>Hello ! </p>
Use any one alignment.
14. <div> - Make paragraph
15. <body> - HTML Body section
HTML Reference Notes By Gunjan Kumar Page 1

<body bgcolor=”black” background=”image path” leftmarging=”0” topmargin=”0”
rightmargin=”0” bottommargin=”0” bgproperties=”fixed”>
You can use any or all attribute of tag.
16. Img - insert image in HTML page
<img src=”image path” height=”20px” width=”30px” border=”1”>
Image path or URL is of two type .Absolute and Relative path.
17. <table> - insert tabular format
<table border=”1” cellpadding=”2px” cellspacing=”0px” bgcolor=”gray”>
<tr bgcolor=”silver”>
<th>Roll No.</th>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>GUNJAN KUMAR</td>
<td>JAVA</td>
<td>56</td>
</tr>
<tr>
<td>2</td>
<td>AMIT KUMAR VERMA</td>
<td>ORACLE</td>
<td>74</td>
</tr>
</table>
18. <form> -
<form name=”form name” method=”GET or POST” action=”action.php”>
19. Text Box
<input type=”text” name=”TextBoxName” maxlength=”20” size=”40” value=”Hello”>
20. Password Text Box
<input type=”text” name=”PasswordTextBoxName” maxlength=”20” size=”40” >
21. Text Area
<textarea rows=”10” cols=”5”></textarea>
22. Radio Button
<input type="radio" name="sex" checked="checked" value="male" />Male
<input type="radio" name="sex" value="female" />Female
23. Check Box
<input type="checkbox" name="ck1" checked="checked" value="Cricket" />Cricket
<input type="checkbox" name="ck1" value="Cricket" />Hockey
24. Drop Down Button
<select name="country">
<option value="India">India</option>
<option value="America">America</option>
<option value="China">China</option>
</select>
25. Button

<form>
<input type="button" name="Register" value="Register Here" />
<input type="submit" name="Login" value="Login" />
<input type="reset" name="reset" value="Clear" />
</form>
26. Marquee
<marquee behavior="alternate or scroll or slide" direction="left or right or top or bottom"
loop="2" height="100px" width="200px" scrollamount="50" scrolldelay="100">
27. List
<ol>
OUTPUT
<li>Science</li>
<ol>
1. Science
<li>Physics</li>
1. Physics
<li>Chemistry</li>
2. Chemistry
<li>Mathematics</li>
</ol> 3. Mathematics
<li>Arts</li> 2. Arts
<ol> 1. History
<li>History</li> 2. Geography
<li>Geography</li> 3. Civics
<li>Civics</li>
</ol>
</ol>
28. Hyperlink
<a> - Anchor Tag
<a href=”file location”>Click here to open web page</a>
<a href="#contactus">Contact us</a><br />
<a href="index.htm">Home Page</a><br />
This is a test web page.
<a name="contactus">Email me at gunjankumarverma@gmail.com</a>
29. Frame
<frameset> and <fram> tag
<frameset rows=”10%,*”>
<frame src=”left_page.htm”>
<fram src=”main_page.htm”>
</frameset>
<frameset rows=”left_page.htm” name=”frame name” scrolling=”no” noresize>
30. Fieldset
<fieldset >
<legend>Login</legend>
<table border="0" cellpadding="5px"
cellspacing="0" >
<tr>
<td>Enter user name</td>

<td><input type="text" name="username"
size="20" maxlength="15" /></td>
</tr> Output
<tr>
<td>Enter Password</td>
<td><input type="password"
name="password" size="20" maxlength="10"
/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="login"
value="Login" />
<input type="reset" name="reset"
value="Reset" />
</td>
</tr>
</table>
</fieldset>
“HTML with CSS” Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="google-site-verification" content="gr-
0Qzl4JI4Zphwpgwa_NF35HYQA8APehz26wqWojdw" />

<meta http-equiv="Content-Type" content="UTF-8.0" />
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)" />
<meta http-equiv="Content-Type" content="UTF-8.0" />
<meta name="author" content="Gunjan Kumar verma" />
<meta name="resource-type" content="document,images" />
<meta name="distribution" content="global" />
<meta name="language" content="en" />
<meta name="robots" content="index,follow">
<meta name="keywords"
content="computer,education,institute,training,var,zone,city,patna,software,social,courses,pagetrac
ker,ica,infolink,2010,bihar,com,objective,,11540611,catch,experienced,information,uplift,publishing,
affordable,18648,consulting,script,viz" />
<meta name="description" content="City Zone Established on May 2008 in V S Centre , Opp -
Viswakarma Timber , Near - Uma Cinema , Pirmohani , Kadamkuan , Patna - 800 003 .City Zone
computer education and training institute provides quality computer education at a very affordable
fees to uplift the people from rural areas and the financial weaker sections of the society. Students
can purely benefit from the computer courses. Vishwakarma Udhayami Smajik Sansthan organized,
maintained and funded for City Zone. " />



<link href="css/default.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<title>City Zone , Patna</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>
<body>
<table id="web-base" align="center" cellpadding="0 " cellspacing="0">
<tr >
<td id="web-heading" colspan="3">
<a href="index.php"><img src="images\TOP.jpg" title="CITY ZONE" /></a></td>
</tr>
<tr>
<td colspan="2" id="top-menu" >
<li id="home" title="Home page of City Zone"><a href="index.php">Home</a></li>
<li title="Student/Administrative Login"><a href="stu_admin_login.php">Login</a></li>
<li title="Courses"><a href="courses.php">Courses</a></li>
<li title="Photo Gallery"><a href="photo-gallery.php?page=1">photo Gallery</a></li>
<li title="Faculty"><a href="faculty.php">Faculty</a></li>
<li title="Enquiry"><a href="enquiry.php">Enquiry</a></li>
<li title="Contact us"><a href="contact.php">Contact</a></li></td>
</tr>
<tr>
<tr>
<td id="left-panel" valign="top">
<div style="border:1px solid white; color:#FFA500; font-size:14px; padding:5px; text-align:center"
onmouseover="javascript:this.style.background='white'"
onmouseout="javascript:this.style.background=''"><a href="feedback.php" style="color:orange
">Feedback</a></div>
<br />
<div style="border:1px solid white; color:#FFA500; font-size:14px; padding:5px; text-align:center"
onmouseover="javascript:this.style.background='white'"
onmouseout="javascript:this.style.background=''"><a href="quiz.php" style="color:orange
">Online Quiz test</a></div>
<br />

<div id="left-heading">Notice board</div>
<div id="left-heading-contents">
<div align="right"><a href="NoticeBoard.php?page=1">View All</a></div>
</div>

<br />

<center>
<img src="images/advt1.jpg" alt="Web Designing and hosting" />
</center>
</td>
<td id="body-section" valign="top">
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td valign="top" >
<table>
<tr>

<td valign="top">
<img src="images\Logo\Logo.jpg" width="70px"/> </td>
<td valign="top">

<b> <center><h3> A computer education and training institute with a
social objective</h3></center></b>
</td>
</tr>
</table>
City Zone Established on May 2008 in V S Centre , Opp - Viswakarma Timber ,
Near - Uma Cinema , Pirmohani ,
Kadamkuan , Patna - 800 003
.City Zone computer education and training institute provides quality computer education
at a very affordable fees to uplift the people from rural areas and the financial weaker sections of
the society. Students can purely benefit from the computer courses. Vishwakarma Udhayami Smajik
Sansthan organized, maintained and funded for City Zone.
<br /><br />
City Zone offers the best professional training in IT (INFORMATION TECHNOLOGY), viz;
Data Processing, Accounting, Programming, Hardware/Software Maintenance, Repairs,
Networking & internet services.
</td>
<td valign="top" width="200px">
<div id="left-heading">Courses</div>
<div id="left-heading-contents" >
<table>
<tr><td>»</td><td> DCA</td></tr>
<tr><td>»</td><td> DEG </td></tr>
<tr><td>»</td><td> DOM </td></tr>
<tr><td>»</td><td> CCA </td></tr>
<tr><td>»</td><td> DCAA </td></tr>
<tr><td>»</td><td> DCP </td></tr>
<tr><td>»</td><td> CCH </td></tr>
<tr><td>»</td><td> DCH </td></tr>
<tr><td>»</td><td> Desktop Publishing </td></tr>
<tr><td>»</td><td> English Spoken </td></tr>
</table>
<div align="right"><a href="courses.php">More..</a></div>
</div>
<br />

<div id="left-heading">News</div>
<div id="left-heading-contents">
<div align="right"><a href="News.php">View All</a></div>
</div>

</td>
</tr>
</table>
</td>
</tR>
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0"><tr>
<td width="25%" valign="top"><form method="post" action="index.php" name="comment">
<table bgcolor="silver" align="center" cellpadding="5" cellspacing="0" width="270px">
<tr>
<th colspan="2"> Write your comment</th>
</tr>

<tr>
<td>Enter Your Name</td>
<td><input type="text" size="20" name="name" /></td>
</tr>
<tr>
<td>Enter Your Email</td>
<td><input type="text" size="20" name="email" /></td>
</tr>
<tr>
<td>Enter Your Blog</td>
<td><input type="text" size="20" name="website" value="http://"/></td>
<tr>
<td colspan="2">Enter Your Comment</td>
</tr>
<tr>
<td colspan="2" align="center"><textarea rows="5" cols="25" wrap="virtual"
name="comment"></textarea></td>
</tr>
</tr>
<tr>
<td colspan="2" align="center"><input type="hidden" name="do_comment" value="1" />
<input type="hidden" name="page" value="index.php" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" /></td>
</tr>
</table>
</form>
</td>
<td valign="top">
<div id="comment">
<center>
<b>Comment on index.php</b>
</center>
<br />
<a target='_blank' href='http://gunjankumarverma.blogspot.com'><b>Gunjan Kumar</a>
(gunjankumarverma@gmail.com)</b><i> Wrotes </i><b>Nice website.
Thanks</b><hr> </div>
<div align="right" style="padding:5px;" ><a href="comment.php"
style="color:#0000FF">View All</a></div>
<br />
</td>
</tr></table>
</td>
<tr>
<td colspan="2" bgcolor="#CC3300" style="padding:5px; font-size:10px" align="center">
<a href="index.php">Home</a>|<a href="stu_admin_login.php">Student/Admin Login</a>|<a
href="courses.php">Courses</a>|<a href="photo-gallery.php?page=1">Photo Gallery</a>|<a
href="faculty.php">Faculty</a>|<a href="enquiry.php">Enquiry</a>|<a
href="NoticeBoard.php?page=1">Notice Board</a>|<a href="News.php">News Board</a>|<a
href="#" onClick="javascript:alert('E-mail us at
cityzone@rediffmail.com');window.location='contact.php';">Advertise with us / Web
Design</a>|<a href="contact.php">Contact us</a></td>
</tr>
<TR>
<td id="bottom-panel" colspan="2">
Copyright © City Zone | Website Designed and Developed by City Zone Students with the support

of<i><a href="mailto:gunjankumarverma@gmail.com">Mr. Gunjan Kumar</a></i></td>
</tr>
</table>
</body>
</html>
Above HTML Code also contains CSS, JavaScript
This is just for your reference if you already study HTML. This is just a revision notes. If you
find any mistake on this revision notes please email me at gunjankumarverma@gmail.com.
Correction Notes of this reference notes will be posted on http://www.scribd.com.
Thanks
Gunjan Kumar
Mob - +91 9334457195
gunjankumarverma@gmail.com

HTML Refrence Notes

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Refrence Notes

Caricato da

Copyright:

Formati disponibili

HTML[Hyper Text Markup Language]

HTML – Hyper Text Markup Language

HTML is not a case sensitive language.

It is a command based language. In HTML that command are called TAGS.

Tags can be written in following form.

<tag name>Statement</tag name>

Example of HTML code

HTML Reference Notes By Gunjan Kumar Page 1

HTML Reference Notes By Gunjan Kumar Page 2

HTML Reference Notes By Gunjan Kumar Page 3

“HTML with CSS” Example

HTML Reference Notes By Gunjan Kumar Page 4

HTML Reference Notes By Gunjan Kumar Page 5

HTML Reference Notes By Gunjan Kumar Page 6

HTML Reference Notes By Gunjan Kumar Page 7

HTML Reference Notes By Gunjan Kumar Page 8

Potrebbero piacerti anche