Scribd
Upload
94 views

Text Formatting

The document discusses various HTML tags for formatting text, inserting images, creating hyperlinks, tables and more. It provides examples of tags like head, title, body, headings, font, blockquote, paragraph, image, hyperlink, table, and others.

Uploaded by

Seraj Ahmad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views

Text Formatting

The document discusses various HTML tags for formatting text, inserting images, creating hyperlinks, tables and more. It provides examples of tags like head, title, body, headings, font, blockquote, paragraph, image, hyperlink, table, and others.

Uploaded by

Seraj Ahmad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

TEXT FORMATTING: 1) HEAD ,TITLE and BODY: EXAMPLE: <!

My First Page > <html> <head> <title>First Page</title> </head> <body>This is my first webpage.We can explore more ....!!!!</body> </html> 2) TEXT FORMATTING: EXAMPLE: <!My Second Page >

<html>
<head> <title>Second Page</title> </head> <body> <b>This is my second webpage.We can explore more ....!!!!</b><br> <i>It displays italic text</i><br> <u>It displays underlined text</u><br> <big>It displays text in large fonts</big><br> <small>It displays text in small fonts</small><br> <strong>It displays text in bold</strong><br> <blink>It blinks the text</blink><br> H<sub>2</sub>SO<sub>4</sub><br> a<sup>2</sup>+b<sup>2</sup><br> Quotation is written as :<q>What you give to other,you will get the same thing back in life</q><br> <tt>It is used for teletype rendering text.The browser uses Courier font by default for this purpose.</tt><br> <em>The text written within this is emphasized</em><br> 1

<strike>It strikes the text</strike><br> <kbd>keyboard input</kbd><br> <samp>Sample text</samp><br> <var>Computer variable</var><br> <code>Computer code</code><br> <s>This is also strikes the text</strike> </body> </html>

3) HEADING (H1 H6 ): EXAMPLE-1: <!My Third Page > <html> <head> <title>third Page</title> </head> <body> <h1>This is my third webpage.We can explore more ....!!!!</h1> <h2>This is my third webpage.We can explore more ....!!!!</h2> <h3>This is my third webpage.We can explore more ....!!!!</h3> <h4>This is my third webpage.We can explore more ....!!!!</h4> <h5>This is my third webpage.We can explore more ....!!!!</h5> <h6>This is my third webpage.We can explore more ....!!!!</h6> </body> </html> EXAMPLE-2: <!My Third Page > <html> <head> <title>third Page</title> </head> <body> <center> <h1>This is my third webpage.We can explore more ....!!!!</h1> <h2>This is my third webpage.We can explore more ....!!!!</h2> 2

<h3>This is my third webpage.We can explore more ....!!!!</h3> <h4>This is my third webpage.We can explore more ....!!!!</h4> <h5>This is my third webpage.We can explore more ....!!!!</h5> <h6>This is my third webpage.We can explore more ....!!!!</h6> </center>

</body> </html> EXAMPLE-3: <!My Third Page > <html> <head> <title>third Page</title> </head> <body> <center> <h1 align="left">This is my third webpage.We can explore more ....!!!!</h1> <h2 align="center">This is my third webpage.We can explore more ....!!!!</h2> <h3 align="right">This is my third webpage.We can explore more ....!!!!</h3> <h4>This is my third webpage.We can explore more ....!!!!</h4> <h5>This is my third webpage.We can explore more ....!!!!</h5> <h6>This is my third webpage.We can explore more ....!!!!</h6> </center> </body> </html> 4) IMAGE SOURCE TAG: <!OUR FINAL COMPUTER LAB > <html> <head> <title>Image Tag</title> </head> <body> <img src="hills.jpg" height=75 width=75 align=left border=10 alt="BEAUTIFUL HILLS" vspace=50 hspace=30 title="This picutre is about HILL"> <img src="sunset.jpg" height=75 width=75 align=left border=10 alt="SUN GIVES US LIGHT"> <img src="winter.jpg" height=75 width=75 align=left border=10 alt="Winter has came"><br><br><br><br><br> <center> 3

<img src="kmc.jpeg" height=200 width=200 align=left border=10 alt="Winter has came"> </center>

</body> </html> 5) HYPERLINK: EXAMPLE 1: <!My Last Computer Lab > <html> <head> <title>Hyperlink </title> </head> <body> <H1> KMC COLLEGE</H1> <a href="image1.html">THIS WILL OPEN FILE image1.html.</a><br><br> <a href="http://www.google.com">THIS WILL OPEN WEBSITE:www.google.com</a><br><br> <a href="mailto:[email protected]">THIS WILL MAIL TO abc</a><br><br> <a href="http://www.facebook.com"><img src="sunset.jpg" width=130 height=150</a><br><br> <a href="hills.jpg"><img src="sunset.jpg" width=300 height=300></a><br><br><br> <a href="image1.html"><img src="kmc.jpeg" width=300 height=300></a><br>

</body> </html> EXAMPLE 2: <!My Last Computer Lab > <html> <head> <title>Hyperlink </title> </head> <body bgcolor="gray"> <H1> KMC COLLEGE</H1> <a href="#bot">Go to bottom</a><br><br> <a name="top">Go to top of the page</a> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <a name="bot">Bottom of the page</a><br> <a href="#top">Go to top</a>

</body> </html> 6) BODY TAG (BGCOLOR,BACKGROUND,TEXT,BGPROPERTIES,LINK,VLINK,ALINK): <!My Final Lab of Computer > <html> <head> <title>TAG USED INSIDE BODY</title> </head> <body bgcolor="#0000ff" background="kmc.jpeg" text="cyan" alink="#ff00ff" vlink="red" link="green" bgproperties="fixed"> <b>Here we used tag about body.</b><br> Lets see body tags are used. <p> <font color="red"> This is about LINK,VLINK,ALINK.<br> Lets see all example one by one<br> <IMG SRC="sunset.jpg" alt="logo" width="200" height="200" border="3"><br> <a href="HR.html "align="centre">HORIZONTAL LINE</a><hr> <IMG SRC="hills.jpg" width="200" height="200" alt="kmc" border="6"><br><br> <a href="http://www.google.com" align="centre">ekantipur</a><hr> <IMG SRC="water.jpg" width="200" height="200" alt="kmc" border="6"><br><br> <a href="second.html" align="centre">ekantipur</a><hr> <IMG SRC="winter.jpg" width="200" height="200" alt="kmc" border="6"><br><br> <a href="FONT_a.html" align="centre">ekantipur</a><hr> </font>

</p> </body> </html> 7) FONT ( FACE ,SIZE,COLOR,BLOCKQUOTE): <!My First Page > <html> <head> <title>Third Page</title> </head> <body> <center> <h1>Net<font color=purple>CYBER</font></h1> </center> <hr> <font size="4" face="georgia" color="green">This is our final lab in college.</font><br><hr> <font size="5" face="helvetica"georgia" color="blue">We must work hard.</font><br><hr> 5

<font size="6" face="arial" color="red">Lets dont waste time.</font><br><hr> <font size="8" face="georgia" color="pink">kmc.<font size="-7">This will decrease the font size</font><br><hr> <font size="1" face="arial" color="blue">Bagbazar.<font size="+5">This will increase the font size</font><br><hr> </body> </html>

8) HR (size,width,left,right,center,NOSHADE): <!My First Page > <html> <head> <title>First Page</title> </head> <body>This is my first webpage.We can explore more ....!!!! <hr size="6" color="red" >It draws 6 pixel thick red line.<br><hr> Now second line . <hr size="2" color="green" >It draws 2 pixel thick green line.<br><hr> Now third line. <hr size="6" color="pink">It draws 8 pixel thick pink line.<br><hr> Now fourth line. <hr size="12" noshade>It draws 12 pixel in dark grey.<br><hr> Now fifth line. <hr width="100%" color="purple">It draws 20% pixel in purple.<br><hr> Now sixth line. <hr size="10%" color="magneta">It draws line with 10 width.<br><hr> right line<hr width="80%" color="maroon" align=right ><br> center line<hr width="25%" color="aqua" align=center ><br> left line<hr width="6%" color="gray" align=left ><br> <hr size="5%" color="green" >It draws 2 pixel thick green line. </body> </html> 9) BLOCKQUOTE: It works just as JUSTIFY or indent the left margin of the text. <!My First Page > <html> <head> <title>First Page</title> </head> <body> <h1>This is an example of BLOCKQUOTE</h1> <blockquote> This is my first <b>webpage.</b>We can explore more ....!!!!<br> This is my first <u>webpage.</u>We can explore more ....!!!!<br> 6

<b>This is my</b> first webpage.We can explore <i>more ....!!!!</i><br> This is my first webpage.We can explore more ....!!!!<br> This is my first webpage.We can <i>explore </i>more ....!!!!<br> </blockquote> </body> </html> 10) PARAGRAPH ( ALIGN:LEFT,CENTER,RIGHT,JUSTIFY) <!My Computer Lab Page > <html> <head> <title>PARAGRAPH AND FONT TAG</title> </head> <body> <p align="center"><font color="blue"><b>Nepal is beautiful country</b></font></p> <p align="left"> <font color="red" size=4 face=georgia> MY HTML LAB<br> I MUST WORK HARD<br> TIME IS RUNNING OUT.<br> EXAM IS NEAR.<br> </font> <p align="center"> <font color="red" size=4 face=georgia> LETS TRY OPTION JUSTIFY<br> JUSTIFY TAG<br> TIME IS RUNNING OUT.<br> EXAM IS NEAR.<br> </font> </p> </body> </html> 11) MARQUEE ( DIRECTION:LEFT,RIGHT,UP,DOWN / BEHAVIOUR:SCROLL,SLIDE,ALTERNATE /SCROLLAMOUNT:IN PIXEL, / WIDTH=IN PIXEL / LOOP:INFINTE or NUMBER OF TIMES / BGCOLOR ) <!My First Page > <html> <head> <title>Marquee</title> </head> <body>

<marquee direction=right behavior="scroll" loop=infinite bgcolor="red" width=500>This is KMC college</marquee><br><br> <marquee direction=left behavior="slide" loop=5 bgcolor="blue" width=500>Our college is great</marquee><br><br> <marquee direction=right behavior="scroll" loop=infinite bgcolor="red" width=500>This is KMC college</marquee><br><br> <marquee direction=right behavior="alternate" loop=10 width=500 bgcolor="maroon">We are at the top.</marquee><br><br> </body> </html> 12) INSERTING SOUND : <!My First Page > <html> <head> <title>INSERTING SOUND</title> </head> <body> <H1>EMBEDDING AUDIO</H1> <embed src="aa.wav"> <H2>EMBEDDING VIDEO</H2> <embed src="dd.mp4"> <NOEMBED>File does not support by the browser</NOEMBED> </body> </html> 13) TABLE: Example-1: <html> <head> <title>KMC ELECTRONICS</title> </head> <body bgcolor="gray"> <table border=1 width=450 align=center> <caption>KMC COLLEGE IS BEST COLLEGE IN KTM.<br></caption> <tr> <td width=100>Biratnagar</td> <td width=100>Nepalganj</td> <td width=100>Pokhara</td> </tr>

</table> </body> </html> Example-2: <html> <head> <title>KMC ELECTRONICS</title> </head> <body> <table border=1 align=center> <caption>Digital Devices<br><br></caption> <tr> <td>Cell phone</td> <td>Laptop</td> <td>Movie camera</td> </tr> <tr> <td>Watch</td> <td>LCD Monitor</td> <td>LED Monitor</td> </tr> </table> <center><caption> By.Raj</caption></center> </body> </html> Example-3: <html> <head> <title>TABLE1</title> </head> <body> <table align="center" border="2" cellspacing="1" cellpadding="5" bgcolor="orange"> <caption> <font face="arial" size="4" color="navy"><b>KMC STAFFS SALARY</B></FONT><HR><BR><BR> </CAPTION> <TR> <th bgcolor="red">Sr.</th> <th bgcolor="red">Name</th> <th bgcolor="red">Basic Salary</th> </TR> <tr> <td>2</td> 9

<td>Mr.Ramesh</td> <td>Rs.11234</td> </tr> <tr> <td>3</td> <td>Mr.Shyam</td> <td>Rs.25000</td> </tr> <tr> <td>4</td> <td>Mr.Hari</td> <td>Rs.17000</td> </tr> <tr> <td bgcolor="forestgreen">5</td> <td bgcolor="forestgreen">Mr.Gopal</td> <td bgcolor="forestgreen">Rs.14000</td> </tr> <tr> <td bgcolor="pink">6</td> <td bgcolor="pink">Mr.Jevan</td> <td bgcolor="pink" background="boating.jpg">Rs.25000</td> </tr> </table> </body> </html> Example-4: <html> <head> <title>TABLE1</title> </head> <body> <table align="center" width=95%border="2" cellspacing="1" cellpadding="5" bgcolor="orange"> <tr> <td> YOU STUDY WHAT OTHERS HAVE ALREADY INVENTED AND KEPT IN BOOK TO LET YOU KNOW.<hr></td> <tr> <td>Still you feel hard to learn what others have already invented?<hr></td> </tr> <tr> <td align="left"valign="middle"><img src="kmc.jpeg" width="70" height="71" alt="My College"><br>Still you feel hard to learn what others have already invented?</td> </tr> 10

</tr> </table> </body> </html> Example-5: ROWSPAN: <html> <head> <title>TABLE1</title> </head> <body> <h1 align="center">This is an example of ROWSPAN</h1> <table align="center" border="2" cellspacing="1" cellpadding="5" bgcolor="orange"> <tr> <td rowspan=2>Economics</td> <td>Math</td> <td>Science</td> <td>English</td> <td>Geography</td> </tr> <tr> <td>Nepali</td> <td>Computer</td> <td>Physics</td> <td>Chemistry</td> <td>Games</td> </tr> <tr> <td>HARDWARE</td> <td>NETWORKING</td> <td>PROGRAMMING</td> <td>GRAPHICS DESIGN</td> <td>Video game</td> </tr> </table> </body> </html> EXAMPLE-6: COLSPAN: <html> <head> 11

<title>TABLE1</title> </head> <body> <h1 align="center">This is an example of COLSPAN</h1> <table align="center" border="2" cellspacing="1" cellpadding="5" bgcolor="orange"> <tr> <td colspan=3>Economics</td> <td>Math</td> <td>Science</td> <td>English</td> <td>Geography</td> </tr> <tr> <td>Nepali</td> <td>Computer</td> <td>Physics</td> <td>Chemistry</td> <td>Games</td> </tr> <tr> <td>HARDWARE</td> <td>NETWORKING</td> <td>PROGRAMMING</td> <td>GRAPHICS DESIGN</td> <td>Video game</td> </tr> </table> </body> </html> EXAMPLE-7: <html> <head> <title>TABLE1</title> </head> <body> <h1 align="center">This is an example of ROWSPAN</h1> <table align="center" border="2" cellspacing="1" cellpadding="5" bgcolor="orange"> <tr> <td rowspan=3>Economics</td> <td>Math</td> <td>Science</td> <td>English</td> <td>Geography</td> 12

</tr> <tr> <td>Nepali</td> <td>Computer</td> <td>Physics</td> <td>Chemistry</td> <td>Games</td> </tr> <tr> <td>HARDWARE</td> <td>NETWORKING</td> <td>PROGRAMMING</td> <td>GRAPHICS DESIGN</td> <td>Video game</td> </tr> </table> </body> </html> EXAMPLE-8: (CELL PADDING / CELL SPACING ): <html> <head> <title>KMC ELECTRONICS</title> </head> <body> <h4 align=center>First:Table with cellspacing and cellpadding</h4> <table border=3 cellspacing=5 cellpadding=5 align=center> <caption>Digital Devices<br><br></caption> <tr> <td>Cell phone</td> <td>Laptop</td> <td>Movie camera</td> </tr> <tr> <td>Watch</td> <td>LCD Monitor</td> <td>LED Monitor</td> </tr> </table> <center><caption> By.Raj</caption></center> </body> 13

</html> ORDERED / UNORDERED LIST: TYPE ( DISC,CIRCLE,SQUARE)::<LI> has no ending tag. EXAMPLE-1: <html> <head> <title>ORDERED LIST</title> </head> <body bgcolor=#0055bb> <h2>Cold Drinks</h3> <ol type=a start=2> <li>kmc <li>college <li>Mirinda </body> </html> EXAMPLE-2: <html> <head> <title>Nested List</title> </head> <body bgcolor=#0055bb> <h2>This is nested list</h3> <ol type=1> <li>kmc <li>college <li>Mirinda <ul type="disc"> <li>Kathmandu <li>Biratnagar <li>Patan </ul> <li>Famous places of Nepal <ul type=circle> <li>This is best college <li>This is situated at bagbazar <li>This is top college.. </ul> <li>This is very interesting subject. </ul> <ul type="square"> <li>parrot <li>eagle 14

<li>bird </ul> <li>DIPAK <li>HARI <ol type=a start=1> <li>G <li>h <li>i </ol> <li>GOPAL </ol> </body> </html> EXAMPLE-3: <html> <head> <title>ORDERED LIST</title> </head> <body> <table border="5" width="55%"> <tr> <td width=20%><img src="sunset.jpg" width="120" height="100"><img src="winter.jpg" width="120" height="100"></td> <td width="20%"><b><font color="blue" size="2"><u>KMC COLLEGE</u></font></b> <ul> <li>Sunday <li>Monday <li>Tuesday </ul> </td> </tr> </table> </body> </html> EXAMPLE-4: <html> <head> <title>ORDERED LIST</title> </head> <body> 15

<ol start="3"> <li>HARD DISK <li>MOUSE <li>SCANNER <li>FLOPPY </ol> <ol start="10"> <li>Printer <li>Camera <ul type=circle> <li>Bike <li>Car </ul> <li>Scanner <li>Light Pen </body> </html> DIR AND MENU (Displayed as Unordered List): EXAMPLE-1: <html> <head> <title>First Page</title> </head> <body> <dir> <li>Basket <li>Wallets <li>Bag </dir> </body> </html> EXAMPLE-2: <html> <head> <title>First Page</title> </head> <body> <menu> <li>Basket <li>Wallets <li>Bag 16

</menu> </body> </html> EXAMPLE-3: <html> <head> <title>First Page</title> </head> <body> <dl> <dt>Basket <dd>Wallets <dd>Pencil <dd>Eraser <dt>Bag <dd>copy <dd>Book <dd>Geometery Box </dl> </menu> </body> </html> PREFORMATTED TAG: <html> <head> <title>First Page</title> </head> <body> <pre> TO The Principal kmc college Dear sir, Our college got highest mark. </pre> </body> </html> META TAG: EXAMPLE-1: <html> 17

<head> <title>First Page</title> <meta name="author" content="kmc"> <meta name="author" content="kmc"> </head> <body> This is about meta tag. </body> </html>

EXAMPLE-2:

<html> <head> <title>First Page</title> <meta HTTP-EQUIV="Refresh" content="5;URL=http://www.HSEB.edu.np"> </head> <body> This is about meta tag. </body> </html>

DIV TAG: <html> <head> <title>First Page</title> </head> <body>This is my first webpage.We can explore more ....!!!!</body> <div align=center> our college is great.<br> our college is great.<br> 18

our college is great.<br> our college is great.<br> </div> <div align=right> our college is great.<br> our college is great.<br> our college is great.<br> our college is great.<br> </div> <div align=left> our college is great.<br> our college is great.<br> our college is great.<br> our college is great.<br> </div> </html> MULTICOL:COLS,GUTTER,WIDTH Supported by Netscape Navigator: <html> <head> <title>First Page</title> </head> <multicol cols="2" gutter="7" width="20"> It is a pointing device. A trackball is a mouse lying on its back. To move the pointer,you rotate the ball with your thumb,your finger or the palm of your hand. </multicol> </html> FORMS: RADIO BUTTON: EXAMPLE-1: 19

<html> <head> <title>RADIO BUTTON</title> </head> <body> <form> <input type="radio" name="user" value="yes" checked>One<br> <input type="radio" name="user" value="yes">Two<br> <input type="radio" name="user" value="yes">Three<br> <input type="radio" name="user" value="yes">Four<br> </form> </body> </html> EXAMPLE-2: <html> <head> <title>RADIO BUTTON</title> </head> <body> <form> Martial Status:<input type="radio" name="u1" value="Married" checked>Married <input type="radio" name="u1" value="unmarried">Unmarried<br><br> Gender:<input type="radio" name="u3" value="male" checked>Male <input type="radio" name="u3" value="Female">Female<br> </form> </body> </html> CHECKBOX: EXAMPLE-1: <html> <head> <title>RADIO BUTTON</title> </head> <body> <form> Martial Status:<input type="checkbox" name="u1" checked>Married <input type="checkbox" name="u2" checked=true>Unmarried<br><br> Gender:<input type="checkbox" name="u3" checked>Male <input type="checkbox" name="u4">Female<br> </form> </body> </html> 20

PASSWORD BOX: <html> <head> <title>RADIO BUTTON</title> </head> <body> <form> <input type="Password" name="mypass" maxlength="6" size=30> <input type="submit" value="Submit Your Form"><br><br> <input type="reset" value="Clear the form"> </form> </body> </html> FILE BROWSER: <html> <head> <title>FILE BROWSER</title> </head> <body> <form> Select any file:<input type="file" size=20 maxlenght=40> </form> </body> </html> BUTTON : <html> <head> <title>FILE BROWSER</title> </head> <body> <form> Click Here:<input type="button" value="ok"><br><br> Send Form:<input type=submit value="send"><br><br> Send Form:<input type=image src="sunset.jpg" alt="Send" height=20 width=200><br><br> For Clear Form:<input type=reset value="Clear"></br> <input type="Password" name="mypass" maxlength="6" size=30>

</form> </body> 21

</html> SELECT TAG: size / multiple: <html> <head> <title>RADIO BUTTON</title> </head> <body> <form> COUNTRY:<select name="country" size=1> <option>Nepal</option> <option>UK</option> <option>USA</option> <option>CHINA</option> </select> </form> </body> </html> TEXT_TEXTAREA: <html> <head> <title>RADIO BUTTON</title> </head> <body> <form> Note:<br><textarea rows=5 cols=20 name=user1></textarea><br><br> Name:<input type="text" name="name"><br><br> Address:<input type="text" name"add" size=20 maxlength=30><br><br> Country:<input type="text" name="e-mail" value="[email protected]"><br><br> </form> </body> </html> BASEFONT: <!My First Page > <html> <head> <title>First Page</title> </head> <body> <basefont size=+11>Nepal<br> </body> </html> 22

SPECIAL CHARACTERS: <!My First Page > <html> <head> <title>First Page</title> </head> <body bgcolor="green"> ONE SPACE:<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>Nepal<br><br> AMERSAND:&amp;<br> LESS THAN:&lt;5<br> GREATER THAN:&gt;6<br> CENT SYMBOL:&cent;<br> COPYRIGHT SYMBOL:&copy;<br> PLUS MINUS SYMBOL:&plusmn;<br> REGISTERED TRADE MARK:&reg;<br> JAPANESE YEN SYMBOL:&yen;<br> TRADE MARK SYMBOL:&trade;<br> GREEK MICRO SYMBOL:&micro;<br> PARAGRAPH SYMBOL:&para;<br> SECTION SIGN:&sect;<br> LETER "A":&#065;<br> LETTER "B":&#066;<br> DEGREE:&deg;<br> </body> </html> FRAMES: EXAMPLE-1: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="50%,50%"> <frame src="radio1.html"> <frame src="radio2.html"> </frameset> </html> EXAMPLE-2: <!My First Page > <html> <head> 23

<title>FRAME1</title> </head> <frameset cols="20%,*"> <frame src="radio1.html"> <frame src="radio2.html"> </frameset> </html> EXAMPLE-3: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset rows="20%,*"> <frame src="radio1.html"> <frameset cols="30%,*"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> </frameset> </html> EXAMPLE-4: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="20%,20%,20%,20%,20%"> <frame src="radio2.html"> <frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> </html> EXAMPLE-5: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset rows="20%,20%,20%,20%,20%"> <frame src="radio2.html"> 24

<frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> </html> EXAMPLE-6: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="10%,*,2*"> <frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> </html> EXAMPLE-7: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="10%,3*,*,2*"> <frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> </html> EXAMPLE-8: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="10%,*,2*"> <frameset rows="50,*,*"> <frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> 25

</html> EXAMPLE-9: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="40%,*,2*"> <frameset rows="30%,*,3*"> <frame src="radio1.html"> <frame src="radio2.html"> <frame src="radio1.html"> </frameset> <frame src="radio1.html"> <frameset rows="50%,50%"> <frame src="radio1.html"> <frame src="radio2.html"> </frameset> </frameset> <body><noframes>Your browser doest not handle frames</noframes> </html> EXAMPLE-10: <!My First Page > <html> <head> <title>FRAME1</title> </head> <frameset cols="10%,*,2*"> <frameset rows="50,*,*"> <frame name="first" src="radio1.html"> <frame name="second" src="radio2.html"> <frame src="radio1.html"> </frameset> <frame name="second" src="radio2.html"> <frameset cols="50%,*,2*"> <frame name="third" src="radio2.html"> <frame name="fourth" src="radio1.html"> </frameset> </html>

26

IFRAME: <html> <body> <center><IFRAME width="200" height="250" name="master"></iframe> </center> <li><a href="image1.html" target="master">FOREBRAIN</a> </body> </html>

GET and POST Method: Index_get.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <form method="get" action="success.html"> <input type="text" name="full_name" placeholder="Full Name...."><br> <input type="text" name="roll" placeholder="Your Roll Number...."><br> <input type="submit" name="submit" value="Submit"> </form> </body> </html> Index_post.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <form method="post" action="success.html"> <input type="text" name="full_name" placeholder="Full Name...."><br> <input type="text" name="roll" placeholder="Your Roll Number...."><br> 27

<input type="submit" name="submit" value="Submit"> </form> </body> </html> Success.html Thanks for Your Query.

CSS(CASCADING STYLE SHEET):


INLINE SYLE: EXAMPLE: <!My First Page > <html> <head> <title>INLINE-1</title> </head> <body> <h1 style="font-size:30pt;color:blue;text-decoration:underline">KMC COLLEGE</h1> <h2 style="font-size:20pt;color:red;text-decoration:overline">COMPUTER SUBJECT</h2> <h3 style="font-size:15pt;color:green;text-decoration:linethrough">I WONT BE FAIL IN COMPUTER SUBJECT</h2> </body> </html>

(a)EMBEDED or INTERNAL STYLE:


<!My First Page > <html> <head> <title>EMBEDED STYLE-1</title> <style> p { font-size:20pt; color:purple; text-align:center; background-color:red; border-style:inset; border-color:yellow; border-width:10; 28

} </style> </head> <body> <p>KMC COLLEGE</p> </body> </html>

(b)ELEMENT SPECIFIC STYLE:


<!My First Page > <html> <head> <title>ELEMENT SPECIFIC STYLE-1</title> <style> h1.font1{font-size:20pt;} h2.font2 { color:purple; text-align:center; background-color:red; border-style:inset; border-color:yellow; border-width:10;} } </style> </head> <body> <h1 class="font1">KMC COLLEGE</h1><br> <h2 class="font2">BAGBAZAR</h2> </body> </html>

(c) UNIVERSAL STYLE CLASS:


<!My First Page > <html> <head> <title>ELEMENT SPECIFIC STYLE-1</title> <style> .x1{font-size:20pt; } .x2 { color:purple; text-align:center; background-color:red; 29

border-style:inset; border-color:yellow; border-width:10;} } </style> </head> <body> <h1 class="x1">KMC COLLEGE</h1><br> <h2 class="x2">BAGBAZAR</h2> </body> </html> EXTERNAL STYLE SHEET: MAIN FILE:( external_stylesheet1.html) <!My First Page > <html> <head> <title>EXTERNAL STYLE SHEET-1</title> <link rel="stylesheet" href="test.css"> </head> <body> <h1 class="x1">KMC COLLEGE</h1><br> <h2 class="x2">BAGBAZAR</h2><br> <h3 class="x3">I WILL SECURE 74 IN COMPUTER</h3> </body> </html>

Test.css
.x1 { font-size:20pt; } .x2 { color:purple; text-align:center; background-color:red; border-style:inset; border-color:yellow; border-width:10; } .x3 { color:purple; 30

font-size:60pt; border-style:dashed; text-align:center; background-color:green; border-color:yellow; border-width:20; }

31

You might also like