Scribd Logo
Upload

Welcome to Scribd!

  • MCSL-016 SounakSolvedAssignment HTML

    Uploaded by

    sounak kumar pandey
    214 views25 pages
    The document provides HTML code examples for creating basic web pages with different formatting elements like colors, fonts, images, links, lists and tables. It is divided into 7 sessions with 3 questions in each session covering topics like adding titles, backgrounds, inserting text with different styles, inserting images and links, creating ordered and unordered lists, basic tables and nested tables. The code shows how to structure an HTML document and use different tags to control formatting and layout of a web page.

    Original Description:

    IGNOU Lab manual ,HTML Advance Html Coming Soon........ Only Html codes no Theory portion included.

    Original Title

    MCSL-016 SounakSolvedAssignment Html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides HTML code examples for creating basic web pages with different formatting elements like colors, fonts, images, links, lists and tables. It is divided into 7 sessions with 3 questions in each session covering topics like adding titles, backgrounds, inserting text with different styles, inserting images and links, creating ordered and unordered lists, basic tables and nested tables. The code shows how to structure an HTML document and use different tags to control formatting and layout of a web page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    214 views25 pages

    MCSL-016 SounakSolvedAssignment HTML

    Uploaded by

    sounak kumar pandey
    The document provides HTML code examples for creating basic web pages with different formatting elements like colors, fonts, images, links, lists and tables. It is divided into 7 sessions with 3 questions in each session covering topics like adding titles, backgrounds, inserting text with different styles, inserting images and links, creating ordered and unordered lists, basic tables and nested tables. The code shows how to structure an HTML document and use different tags to control formatting and layout of a web page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    MCSL : 016 Internet Concepts and Web Design HTML

    Session 1 1.Write html code to develop a web page having the background color red and titleMy first Page in any color. <html> <head> <title>My First Page</title> </head> <body bgcolor="#ff0000"> <font color="#0000ff"><strong>My First Page</strong></font> </body> </html>

    2. Create an html document giving details of your name, age, telephone no, address,TLC Code & enrolement no aligned in proper order <HTML> <HEAD> <TITLE>MyWebSite</TITLE> </HEAD> <BODY BGCOLOR="#fa5f66"> <p ALIGN ="CENTER" ><B>MY PERSONAL DETAILS</B></p>

    <HR SIZE="1" WIDHT=100%></HR> <H2> <table> <tr> <td>NAME: </td> </tr> <tr> <td>AGE: </td> </tr> <tr> <td>TELEPHONE NUMBER: </td> </tr> <tr> <td>ADDRESS:</td> </tr> <tr> <td>TLC CODE:</td> </tr> <tr> <td>ENROLMENT NUMBER:</td> </tr> </table> </H2> </BODY> </HTML>

    3. Write an HTML Code to design a page containing text, in form of paragraphs giving suitable heading Style <html> <head> <title>My First Page</title> </head> <body> <h1 align="center">Key Features Of Windows 8</h1> <h2 align="justify">Support for both x86 PCs and ARM tablets Windows 8 is the first edition of Windows to operate on both ARM-based tablets and traditional x86 PCs based on ARM processors from Intel and AMD.</h2> <h3 align="justify">Touch-centric, Tiles-based User Interface (UI) Although Windows 8 might look and feel like an entirely new "user experience,", Microsoft is actually layering a new animation-enabled user interface (UI) on top of an only somewhat upgraded Windows 7</h3> <h4 align="justify">Charms In large part, "charms" is a new implementation of the traditional Windows start bar. Charms can also be used to quickly configure settings for individual apps. On an ordinary non-touch PC, charms are accessed by dragging the mouse to the bottom-left corner of the screen, to the same spot as the old Windows start button. On a tablet, you swipe from the right side of the screen to bring up charms.</h4> </body> </html>

    Session 2 1. Create a page to show different attributes of font tag <html> <head>

    <title>My First Page</title> </head> <body> <font size="6" color="#2a28e6"><center>WINDOWS 8</center></font> <p align="left"><strong><font color="#0000FF" face="Segoe Script">Key Features of Windows 8</font></strong></p> <p><font color="#fa9ad0" face="Arial">Support for both x86 PCs and ARM tablets Windows 8 is the first edition of Windows to operate on both ARM-based tablets and traditional x86 PCs based on ARM processors from Intel and AMD.</p> <p><font face="Bauhaus 93"><strong><em>Although Windows 8 might look and feel like an entirely new "user experience,", Microsoft is actually layering a new animation-enabled user interface (UI) on top of an only somewhat upgraded Windows 7</em></strong></font></p> <p><font color="12345a" face="Mistral" size="6">Charms In large part, "charms" is a new implementation of the traditional Windows start bar. Charms can also be used to quickly configure settings for individual apps. On an ordinary non-touch PC, charms are accessed by dragging the mouse to the bottom-left corner of the screen, to the same spot as the old Windows start button. On a tablet, you swipe from the right side of the screen to bring up charms.</font></p> </body> </html>

    2.Create a page to show different attributes: italics, bold, underline. <html> <head> <title>My First Page</title> </head> <body color="fa34af"> <p align="left"><strong>Bold</strong></p> <p align="left"><em>Italics</em></p>

    <p align="left"><u>underline</u></p> <p align="left"><strong><em>Bold and Italics</em></strong></p> <p align="left"><em><u>Italics and Underline</u></em></p> <p align="left"><strong><u>Bold and Underline</u></strong></p> <p align="left"><strong><em><u>Bold,Italics and Underline</u></em></strong></p> </body> </html>

    3.Design a Page having background color yellow, giving text color red and using allattributes of font tab. <html> <head> <title>My First Page</title> </head> <body bgcolor="Yellow"> <p><font color="red">Likes And Dislikes are Person Feelings</font></p> <p><font color="red" face="Baskerville Old Face">Ignou</font></p> <p><font color="red" face="Bauhaus 93" size="3">My Name Is Khan and I'm not a terrorist</font></p> </body> </html>

    Session 3

    1. Write an html code to create a webpage of blue color and display links in red color<html> <head>

    <title>My First Page</title> </head> <body bgcolor="#0000ff" link="red" vlink="red" alink="red"> <h2><a href="ses1(1).html">Link to Sessson1</a></h2> <h2><a href="ses2(1).html">Link to Session2</a></h2> <h2><a href="ses1(3).html" target="_blank">Link to Session1(3)</a></h2> </body> </html>

    2.Write an html code to create a webpage that contains an image at its Center. <html> <head> <title>Centerlised Image</title> </head> <body> <div align="center"><img src="sachin-shane.jpg" width="300" height="200"></div> </body> </html>

    3.Create a web page with appropriate content and insert an image towards the left hand side of the page. When user clicks on the image, it should open another webpage. <html> <head> </head> <body>

    Wix.com offers an easy-to-use online platform that enables anyone to design and publish professional, beautiful websites for free. With total design control, E-Commerce features and superior search engine results, Wix offers a complete solution for launching an exquisite website while saving tons of money. <div align="left"><a href="ses2(2).html"><img src="sachin-shane.jpg" width="300" heigth="200" border="0"></a></div> </body> </html>

    Session 4 1 . Create a web page using href attribute of anchor tag & the attribute alink, vlink etc. <html> <head> </head> <body link="00ff00" alink="00aaaa" vlink="0000ff"> <a href="ses1(2).html" target="_blank">Link1</a> <a href="ses1(3).html" target="_self">Link2</a> <a href="ses2(3).html" target="_parent">Link3</a> </body> </html>

    2 . Create a Webpage, wherein when the user clicks on the link it should go to the bottom of the page.

    <html> <head> </head> <body link="a32f43" alink="a435f2" vlink="0fa344">

    <a href="#down">go to Bottom Of the Page</a> <p>a1</p> <p>b1</p> <p>c1</p> <p>d</p> <p>e1</p> <p>f1</p> <p>g1</p> <p>h1</p> <p>i</p> <p>j1</p> <p>k1</p> <p>l1</p> <p>m1</p> <p>n1</p> <p>o1</p> <p>p1</p> <p>q1</p> <p>r1</p> <p><a name="down"></a>s1</p> </body> </html> 3 .Write html code to create a web page of pink color and display a moving message in red color.

    <html>

    <head> </head> <body bgcolor="pink"> <marquee><font color="red" size="4"><em>Any Body Can Dance</em></marquee> </body> </html>

    Session 5

    1. Create a web page showing an ordered list of names of five of your Friends. <html> <head> </head> <body> <ol> <li>Sounak</li> <li>Harish</li> <li>Ravi</li> <li>Naveen</li> <li>Amersh</li> </ol> </body> </html>

    2.Create an html document containing a nested list showing the content page of any book

    <html> <head> </head> <body> <ol> <li> Design goals</li> <li>Name</li> <li>History</li> <ul><li>Versions</li></ul> <li> Syntax</li> <ul><li>Distinguishing features</li></ul> <li>Common type system</li> <ul> <li>Categories of data types</li> <li> Boxing and unboxing</li> <li> Generics</li> <li>Preprocessor</li> </ul> <li> Code comments</li> <li>XML documentation system</li> <li>Libraries</li> <li>"Hello world" example</li> <li>Standardization and licensing</li> <li>Implementations</li> <li> See also</li>

    <li> Notes</li> <li>References</li> <li>Further reading</li> <li> External links</li> </ol> </body> </html>

    3.Create a web page showing an unordered list of names of five of your Friends. <html> <head> </head> <body> <ul> <li>Sounak</li> <li>Manish</li> <li>Rounak</li> <li>Sweta</li> <li>Vithika</li> </ul> </body> </html>

    Session 6

    1.Create a web page, which should contain a table having two rows and two columns.

    <html> <head> </head> <body> <table width="100%" border="1" cellspacing="2"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </body> </html>

    2 . Fill some dummy data in the table created by you in question 1 of this session.

    <html> <head> </head> <body> <table width="100%" border="1" cellspacing="2">

    <tr> <td>NAME</td> <td>COURSE</td> </tr> <tr> <td>Rounak</td> <td>BCA</td> </tr> </body> </html>

    3. Create the following table with dummy Data. (Check out the table from your lab Manual)

    <html> <head> </head> <body> <table width="100%" border="1" cellspacing="2"> <tr> <td rowspan="2"><strong>Name of Train</strong></td> <td rowspan="2"><strong>Place</strong></td> <td rowspan="2"><strong>Destination</strong></td> <td rowspan="2"><strong>Train No.</strong></td> <td colspan="2"><center><strong>Time</strong></center></td> <td rowspan="2"><strong>Fair</strong></td>

    </tr> <tr> <td width="8%">Arrival</td> <td width="8%">Departure</td> </tr> <tr> <td>Sramjeevi SExp.</td> <td>Rajgir</td> <td>New Delhi</td> <td>12391</td> <td>13:55</td> <td>10:55</td> <td>750</td> </tr> <tr> <td>Lichchivi Exp.</td> <td>Gorakhpur</td> <td>Allahabad</td> <td>15004</td> <td>15:05</td> <td>4:55</td> <td>250</td> </tr> </body> </html>

    Session 7

    1. Create the Following Table.(Check out the Design from your lab Manual)<html> <head> </head> <body bgcolor="aabbcc"> <table width="100%" border="1" bordercolor="black"> <tr bgcolor="white"> <td colspan="3">&nbsp;</td> </tr> <tr> <td bgcolor="red">&nbsp;</td> <td bgcolor="green">&nbsp;</td> <td bgcolor="black">&nbsp;</td> </tr> </table> </body> </html>

    2 . Design an HTML page having 3 images placed in the following format. (Check out the Design from your lab Manual) <html> <head> </head>

    <body > <table width="100%" height="50%" border="1" align="center" cellpadding="20"> <tr> <td> <table width="50%" align="center" cellspacing="0" cellpadding="0"> <tr> <td> <img src="sachin-shane.jpg" width="300" height="200" > </td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td> <img src="sachin-shane.jpg" width="300" height="200" > </td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td> <img src="sachin-shane.jpg" width="300" height="200"> </td>

    </tr> </table> </td> </tr> </table> </body> </html>

    3 . Write HTML code to generate the following output. (Check out the Design from your lab Manual)

    <html> <head> </head> <body> <table width="100%" border="1"> <tr> <td rowspan="2" >Weather</td> <td><strong>Delhi</strong></td> <td><strong>Mumbai</strong></td> </tr> <tr> <td>40</td> <td>35</td> </tr> </table>

    </body> </html>

    Session 8 1.What are HTML Physical style tags and Logical style tags? Physical Style Tags:-A Physical Tag controls how the Characters are formatted. Common physical Style tags: Tags <b> Bold----Display text as bold <big> big---Display text in a big font Example Output This is <b>Bold</b> This is Bold This is <big>big font</big> This is big font

    Logical Style Tags:-Describes how the text is being used not necessarily how it is formatted. Tag <code>---Displays the characters as code usually <del>-----Displays text with a line through it. Example Output <code>y=m*x+b</code> y=m*x+b <del>Deleted</del>text Deleted text 2. Which Tag allows you to Scroll Text on Web Page? Scrolling Tag allows us to scroll text on the Web Page <iframe align="left" scrolling="yes" width="100%" height="100%"src="luv.html"> </iframe>

    3. What is the Comment tag in HTML Comment tags are used to provide comments to the webpage. The contents inside the tag will not displayed by the web browser when it displays the page Eg. <! Its comments used to help the web designers >

    4. Design an HTML page for the Block Introduction of this book. The page should allow scrolling and the code should contain comment header with your name and enrolment number. <! NAME: SOUNAK> <! ENROLLMENT NO: 139822> <html> <head> </head> <body> <table width="100%" border="1"> <tr> <td><strong>Block Introduction</strong></td> </tr> <tr> <td height="140px" > <iframe scrolling="yes" width="100%" height="100%" src="fees.pdf"> </iframe> </td> </tr> </table> </body> </html>

    Session 9

    1.What difference does it make if we express the width of a table in percentage or pixel value? And

    how do we set the width of a particular column or cell in a table?


    Pixels:- If you use pixels then, its an absolute measurement and will be rendered irrespective of the browser's window size. Percentage:-Percentage is a relative measurement which will be rendered with respect to the browser's window size. <table width=100% border=1> <tr> <td width=60%></td> <td width=400px></td> </tr> </table>

    2.Write HTML Code to generate the following outputs. (Check out the Design from your lab Manual) <html> <head> </head> <body> <table width="100%" border="1"> <tr> <td width="28%">1</td> <td width="25%">2</td> <td width="25%">3</td> <td width="22%">4</td> </tr> <tr> <td >5</td> <td colspan="2" rowspan="2"><img src="sachin-shane.jpg" height="50" width="300"></td> <td>6</td> </tr>

    <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table> </body> </html>

    3.Create a web page that should contain a table having seven rows and four columns, along with attributes- colspan and rowspan <html> <head> </head> <body bgcolor="#a29405"> <table width="100%" border="1"> <tr> <td width="20%">A</td> <td width="30%">B</td> <td width="25%">C</td> <td width="25%">D</td>

    </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td rowspan="2" align="center"><strong>Example of rowspan</strong></td> <td colspan="2"><b><i>Example of colspan</i></b></td> </tr> <tr> <td>J</td> <td colspan="2"><center>L</center></td> </tr> <tr> <td>K</td> <td>L</td> <td>M</td> <td>N</td> </tr> <tr> <td>O</td> <td>P</td>

    <td>Q</td> <td>R</td> </tr> <tr> <td>S</td> <td>T</td> <td>U</td> <td>V</td> </tr> </table> </body> </html>

    Session 10 1 . What are different versions of HTML? 1 HTML 2.O 2 HTML 3 3 HTML 3.2 4 HTML 4.0 5 HTML 4.0.1 6 XHTML 7DHTML

    2 . List 5 different HTML Editors a)Visual Studio 2012 b) Microsoft SharePoint Designer c) BlueGriffon d) Kompozer e)Adobe Dreamweaver

    3 . What is the different image formats? a) jpg/jpeg (Joint Photographic Experts Group) b) gif- (Graphic interchange format) c) bmp ( bitmap) d) TIF/TIFF(Tagged Image File Format) e) PNG (Portable Network Graphics)

    Thank you Me ------Any query Write to snkpandey1@gmail.com

    You might also like