updated html programs
DESCRIPTION
HTML documents along with coding for basic HTML tags.TRANSCRIPT
HTML UNIT- III and UNIT- IV
Example 1: Use of basic HTML tags
<html><head><title> My Page </title></head><body>My name is Mohit Gupta. <br>I am pursuing BBA fro IP university. <br>I love to play cricket and basketball. <br>I am very honest and hardworking. <br></body></html>
Result:
Example 2: Use of comment tag ( <!-comment given-> )
<html><body><p> My Bonnie lies over the ocean. My Bonnie lies over the sea. Oh, bring back my Bonnie to me.</p><!- Note that your browser ignores this line because it is a comment -></body></html>
NOTE:- <!- the commented text will be ignored by the browser ->A comment tag does not have any attribute.These are the legal comments:-
1. <!- hello->2. <!-hello—hello->3. <!->4. <!>
Example 3: Use of <p> paragraph tag
<html><body><p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.</p><p>Note that your browser ignores your layout!</p></body></html>
NOTE:- <p></p> tag has an attribute ALIGN, and can have the values LEFT,CENTER or RIGHT.
e.g. <P ALIGN=”CENTER”> this text comes at center of page </P>
Result:
Example4: Use H1 or H2 or H3 etc. for headings
<html><Body><h1 style=”text-align: center ;”>This heading 1 is center aligned </h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body></html>
Result:
Example 5: Use of <hr> tag
<html><head><title> Anchor Tag </title></head><body>Anchor Tag <hr><br><p> To create links in HTML anchor tag is used. It is made up of three parts </p><p> 1. start tag along with attributes </p><p> 2. text that acts as link </p><p> 3. end of tag </p></body></html>
NOTE:- <hr> tag draws the horizontal line on a page.
Result:
Example 6: Use of <del> and <ins> tags
<html><body><p>There is <del>twenty</del> <ins>twelve</ins> pieces in a dozen</p><p> Most browsers will overstrike deleted text and underline inserted text. </p><p>Some older browsers will display deleted or inserted text as plain text.</p></body>
</html>Result:
Example 7: Use of Pre-formatted tags:-These tags made computer programming codes easier to present. (i.e. used for documenting computer programs)
<html><body><code>Computer code</code> <br><kbd>Keyboard input</kbd><br><tt>Teletype text</tt><br><samp>Sample text</samp><br><var>Computer variable</var><br><p> <b>Note:</b> These tags are often used to display computer/programming code. </p></body></html> NOTE:-<tt>:- this tag changes to typewriter style text with in your text.<code>:- means programming lines, generally rendered as Monospaced.<kbd>:-means keyboard text, generally rendered as Monospaced.<samp>:-sample output, generally rendered as Monospaced.but slightly larger font than <code> tag.<var>:-variable, generally rendered as Italic. <br>:-this tag is meant to force a line break. The text after <br> tag scrolls to the next line. This tag never needs an end tag, that’s why it is called empty tag.
Result:
Example 8: Use of bold, italic and underline, strike through, marquee, blink tags
<html><head><title> Basics of HTML </title></head><body><p> <b> Basics Of HTML </b> </p>HTML stands for <i> Hyper Text Markup Language. </i><br> The HTML includes the following concepts:<br> 1. <b> <u> Tag </u> </b><br> 2. <b> <u> Element </u> </b><br> 3. <b> <u> Attributes </u> </b><br> 4. <b> <u> Nesting of Tags </u> </b></body></html>
Note:-1. <strike> tag is used to strike through the text.2. <blink> tag is used to make text blink.3. <marquee> tag is used to make the text moving on the web page.
<html><body><blink>how r u ?</blink><marquee>I am fine.</marquee><strike> what about you?</strike></body></html>
Result:
Example 9: Use of “ blockquote” tag (block of quoted text) :-
This tag usually indents the left margin of regular text in the browser window. It adds a return or one extra line on either side of the tag, so no paragraph tags are needed.
<html><body>A blockquote quotation:<blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.</blockquote><p><b>The browser inserts line breaks and margins for a blockquote element.</b></p>A short quotation:<q>This is a short quotation</q><p><b>The q element does not render as anything special.</b></p></body></html>
Result:
Example 10: Use of Font tag and its various attributes
<html><head><title> JIMS HOME PAGE </title></head><body><font color="red" face="comic sans MS" size="10"> JAGANNATH INTERNATIONAL MANAGEMENT SCHOOL </font>
<br><font color="blue" face="arial"> Its a largest instition in the city of Delhi. We provide quality education. </font></body></html>
NOTE:- font tag can be nested. The inner font tag will close first than the outer font tag.e.g. <font size=+3>hi<font color=red>how</font><font color=blue> are</font> <font face=”arial black”>you</font>?</font>
Result:
Example 11: The <basefont> tag:-
This is the font in which text is normally rendered, the actual size may be further modified by the <font> tag with a size attribute with a relative (signed> or absolute value. All text except headings, that is not explicitly marked up will be rendered in the fashion indicated by the <basefont> tag until the end of the document or until a further<basefont > tag is encountered. To specify the overall font for your page add the <basefont> tag at the beginning of the <body> section.This tag has three attributes i.e. Size, Color and Face.
<html><head><title> JIMS HOME PAGE </title></head><body><basefont color="red" face="arial, verdana, courier" size="10"> JAGANNATH <br>INTERNATIONAL <br>MANAGEMENT SCHOOL<br></body></html>
Example 12: Formatting of text (subscript and superscript)
<html><head><title>Linear Equations</title></head><body><b><big>SUMMARY</big></b><br>Two linear equations in the same two variables are called a pair of linear equations in two variables.<br>The most general form of equation is<br><i><font color="red">a<sub>1</sub>x+b<sub>1</sub>y+c<sub>1</sub>=0<br>a<sub>2</sub>x+b<sub>2</sub>y+c<sub>2</sub>=0</i></font><br>where a<sub>1</sub>, a<sub>2</sub>, b<sub>1</sub>, b<sub>2</sub>, c<sub>1</sub>, c<sub>2</sub><br>are real numbers, such that<br>a<sub>1</sub><sup>2</sup>+b<sub>1</sub> <sup>2</sup> and a<sub>2</sub> <sup>2</sup>+ a<sub>2</sub> <sup>2</sup> are not equal to zero.</body></html>
Result:
Example 13: Use of <pre> tag.
With in the preformatted tag, text and numbers etc. will be lined up exactly as you typed them. These are good for lists and forms.
<html><body>
<pre>This ispreformatted text.It preserves both spacesand line breaks.</pre><p>The pre tag is good for displaying computer code:</p><pre>for i = 1 to 10 print inext i</pre></body></html>
SOME MORE TAGS WITH EXAMPLES:
<html><body><strong>how are you </strong><big> how are you <big><small> how are you </small><em> how are you</em><address>house no.- 1234, sector-34,Dawarka, New Delhi</address></body></html>
Result:
Example 13: Use of ordered lists and unordered lists
Attributes of ordered list are (type=I,1,i,a,A) and (start=3) bur in an unordered list there is only one attribute i.e type= disc/circle/square
<html><body><font size="8" bold="bold"> MENU </font><OL type="1"><LI> BEVERAGES </LI>
<UL type="disc"><LI> Cold Drinks </LI><LI> Coffee </LI><LI> Tea </LI><LI> Milk </LI></UL>
<LI> SNACKS </LI><UL type="disc"><LI> Chips </LI><LI> Samosa </LI><LI> Biscuits </LI><LI> Patties </LI></UL>
</OL></body></html>
Result:
Example 14: Nested order list
<html><body><OL type="1"><LI> QUALIFICATION </LI>
<UL type="DISC"><LI> 10 +2 </LI>
<OL type="i"><LI> Science </LI><LI> Commerce</LI><LI> Arts </LI></OL>
<LI> GRADUATION </LI><OL type="i"><LI> BBA </LI>
<UL type="SQUARE"><LI> General </LI><LI> Travel and Tourism </LI><LI> Banking and Insurance </LI><LI> Modern Office Management </LI></UL>
<LI> BCA </LI><LI> B. TECH </LI><LI> BJMC </LI><LI> OTHERS </LI>
</UL>
<LI> PERCENTAGE IN GRADUATION </LI><UL type="DISC"><LI> >50 </LI><LI> > 70 & <50 </LI>
<LI> >90 & <70 </LI>
<LI> >90 </LI></UL>
</OL></body></html>
Result:
Example 15: Use of Definition lists
<html><body><strong> <u> COMPUTER HARDWARE AND SOFTWARE </u> </strong><DL>
<DT> MOUSE </dt><DD> A pointing device </dd>
<DT> KEYBOARD </dt><DD> used to enter text </dd><DT> MONITOR </dt><DD> used to display output </dd>
<DT> OPERATING SYSTEM </dt><DD> software that bridges the gap between hardware and software </dd>
<DT> APPLICATION SOFTWARE </dt><DD> which are used for specific purposes </dd>
</DL></body></html>
Example: Use of Directory/menu lists
<dir>/<menu><LI> Chips </LI><LI> Samosa </LI><LI> Biscuits </LI><LI> Patties </LI></dir>/</menu>
output
chips samosa biscuits patties
Result:
Example 16: Use of Image tag
<html><body><p><img src="G:\12.jpg" width="20" height="20" /></p><p><img src="G:\12.jpg" width="45" height="45" /></p><p><img src="G:\12.jpg" width="70" height="70" /></p><p>You can make an image smaller or larger by changing the values of the "height" and "width" attributes.</p></body>
</html>
Result:
Example 17: Working with Links
<html><body><p><a href="lastpage.htm">This text</a> is a link to a page on this Web site.</p><p><a href="http://www.microsoft.com/">This text</a> is a link to a page on the World Wide Web.</p></body></html>
Result:
Example 18: Working with Tables
<html><body>
<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr>
<tr> <td>C</td><td>D</td> </tr> </table> </td></tr><tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td></tr></table>
</body></html>
Result:
Example 19: Working with Tables- Rowspan and Colspan
<html><body><table border="1" width="500"><tr>
<td rowspan="3" align="center"> A</td><td colspan="3" align="center"> B </td></tr><tr><td align="center"> E </td><td align="center"> F </td><td rowspan="2" align="center"> C</td></tr><tr><td colspan="2" align="center"> D</td></tr></table></body></html>
Result:
EXAMPLE 20: Working with Tables and its various attributes
<html><body><head><title> JIMS </title></head><body> <table border="1" width="800" align="center" cellspacing="30" cellpadding="15"><caption size ="5" align="center"><b> <u> STUDENTS RECORD </u> </b> </caption><br><tr><th bgcolor="yellow"> FOR BBA STUDENTS </th></tr>
<td><table border="3" width="600" align="center">
<tr><th> S. No. </th><th> Name </th><th> Address </th><th colspan="2"> Contact No. </th></tr><tr><td> 1. </td><td> Nitin Gupta </td><td> 210-C, Ram Vihar, Delhi </td><td> 011- 23222325 </td><td> 09910233356 </td></tr><tr><td> 2. </td><td> Ashima Chaudhary </td><td> 210/12, Shahdra, Delhi </td><td> 011- 45213222 </td><td> 09251999221 </td></tr></table></td>
<tr><th bgcolor="yellow"> FOR BCA STUDENTS </th></tr>
<td><table border="3" width="600" align="center"><tr><th> S. No. </th><th> Name </th><th> Address </th><th colspan="2"> Contact No. </th></tr><tr><td> 1. </td><td> Ashish Goel </td><td> 11/12-A, Rani Bagh, Delhi </td><td> </td><td> 0999923111 </td></tr><tr><td> 2. </td><td> Sushmita Aggarwal </td><td> SP-12, Pitampura, Delhi </td><td> 011- 65982232 </td><td> 09015122232 </td>
<tr><td> 3. </td><td> Mohd. Khalid </td><td> 1/12A, Okhla, Delhi </td><td> 011- 26873433 </td><td> </td></tr></table></td>
</table>
</body></html>
Result:
Example 21: Working with Forms
<html><head><title> LOGIN </title>
</head><body><form>USER ID<input type="text" size="20" maxlength="15"><br>PASSWORD <input type="password" maxlentgh="10"><br><input type="submit" value="SUBMIT"> <input type="submit" value="CANCEL"></form></body></html>
Result:
Example 22: Working with Forms and its Various input tags
<html><head><title> CUSTOMER REGISTRATION </title></head><body><form><font size="4" face="arial">ENTER YOUR DETAILS-<br><br>Name <input type="text" size="15"><br><br>Gender: <br>Male <input type="radio" value="Male">Female <input type="radio" value="Feamle"><br><br>
Address<div align="topcenter"><textarea cols="30" rows="5"></textarea><br><br>Income Group<select><option> < Rs. 10000 </option><option> Rs. 10000- Rs. 25000 </option><option> < Rs. 25000 </option></select><br><br>Interest: Sports <input type="checkbox" value="Sports"> Cultural <input type="checkbox" value="Cutural"><br> Music <input type="checkbox" value="Music">Business <input type="checkbox" value="Business"></div><br>
<input type="submit" value="SUBMIT"><input type="submit" value="RESET"></font></form></body></html>
Result:
Example 23: Creating frames
<html><frameset rows="50%,50%"><frame noresize="noresize" src="http://www.Yahoo.com"><frameset cols="50%,50%"><frame noresize="noresize" src="http://www.Google.com"><frame noresize="noresize" src="http://www.facbook.com"></frameset></frameset></html>
Result:
Example 24: Creatting Inline Frame
<html><body><iframe src="http://www.yahoo.com"></iframe><p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p></body></html>
Result:
Example 25: Cascading Style Sheets I
<html><head><style type="text/css">h1 {color: red}h3 {color: blue}</style></head><body><h1>This is header 1</h1><h3>This is header 3</h3></body></html>
Result:
Example 26: Cascading Style Sheets II
<html><body><a href="http://www.yahoo.com" style="text-decoration:none">THIS IS A LINK TO YAHOO!</a></body></html>
Result:
Example 27: Link to an external style sheet
<html><head><link rel="stylesheet" type="text/css" href="styles.css" ></head><body><h1>I am formatted with a linked style sheet</h1><p>Me too!</p></body></html>
Result: