You are on page 1of 57

Project Work On HTML (Computer applications) Basic Webpages and a Website

CONTENTS

Certificate Acknowledgement

1. Design a simple web page to show all the basic tags of HTML document (HTML, Head, Meta, title, BODY) and also use all attributes of body tag also give a snapshot of the coding. 2. Design a web page to show all types of headings styles from H1 to H6. 3. Design a web page using all text tags (implicit and explicit both ) and also include a paragraph to explain the difference between these 2 types. (<B>, <strong>,<I>, <cite>,<em>, center>,<tt>and <U>. 4. Design a web page to show the use of paragraph tag and how <pre> tag is different from <p>. 5. Design a web page using address tag and show at least 5 horizontal line with different thickness and all attributes. 6. Create a web page to represent use of block quote and font tag along with their attributes. 7. Design a web page to show an unordered list inside an ordered list. 8. Design a web page to show train schedule using table tags with different attributes. 9. Create a web page to represent a calendar and with an image in the background of it. 10. Design a web page to design a signup form. 11. Design a web page to create a frame inside another frame.

12. Design a page using frameset tag where table of contents gets open in another frame. 13. Design a website of at least 5 pages for a company. 14. Design a web page to show the use of CSS.

CERTIFICATE

This is to certify that AJAY SETHI has successfully completed the project titled HTML (Computer applications) as the partial fulfillment of the requirement for the award of degree of Bachelor Of Business Administration by Guru Gobind Singh Indraprastha University, New Delhi (2011-2014)

To best of my knowledge the report is original and has not been copied or submitted anywhere else . It is an independent work done by him.

FACULTY: PLACE:

AARTI BUDHIRAJA NEW DELHI INSTITUTE OF MANAGEMENT

ACKNOWLEDGEMENT

The present work is an effort to throw some light On HTML (Computer applications) . The work would not have been possible to come to the present shape without the able guidance, supervision and help to me by my mentor. With deep sense of gratitude I acknowledge the encouragement and guidance received by Mrs. Aarti Budhirja (Faculty Guide) who not only played the role of my Philosopher and Guide at New Delhi Institute of Management, New Delhi but also mentored me at every stage of my project work.

AJAY SETHI

1. Design a simple web page to show all the basic tags of HTML document (HTML, Head, Meta, title, BODY) and also use all attributes of body tag also give a snapshot of the coding.

CODING: <html> <head> <title>my first webpage</title> <meta name=author content="AJAY SETHI"> </head> <body><H1 ALIGN="CENTER"><B>INTRODUCTION OF MARKETING RESEARCH</B></H1> <P>The term marketing research is used extensively in modem marketing management. It acts as a tool for accurate decision making as regards marketing of goods and services. It is also useful for studying and solving different marketing problems in a systematic and rational manner. Research means detailed, systematic and comprehensive study of a problem. Here, the details of the marketing problems are collected and studied, conclusions are drawn and suggestions (recommendations) are made to solve the problems quickly, correctly and systematically. In marketing research, marketing problem is studied in depth and solutions are suggested to solve the problem relating to consumers, product, market competition, sales promotion and so on. According to American Marketing Association (AMA), MR is "The systematic gathering, recording, and analyzing of data about problems relating to the marketing of goods and services. </P> <font size="3"><br>Nikhil Sharma<br>

9/2344<br> old lane</p> To spice up your text you can make it <b>"BOLD"</b>,<br><br> <i>ITALIC</i> <br><br>or<br><br> <U>UNDERLINED</u> <br> Or even combine the tags to make <b><i>BOLD ITALIC</i></b><br> or <i> <u>ITALIC UNDERLINED</u></i> <p> <h3> <CENTER>Use of font color and size</h3></CENTER> <title>to change font color and size</title> <body bgcolor=pink><div align=center> <font color=blue size=3>This is blue color and size 3</font><br> <br> <font color=red size=5>This is red color and size 5</font><br> <br> <font color=green size=7>This is green color and size 7</font><br> <br></div> </font> </body> </html>

2. Design a web page to show all types of headings styles from H1 to H6.

CODING: <html> <head> <title>HEADINGS </title> </head> <body> <h1><center> "GRAPHOLOGY"<br><br> Step 1.If you write complete letter with no part left/broken/loose you may fullfill the space between your thoughts and actions means you will not be imaginative but practical in your daily actions.</h1> <br> <br> <h2> Step 2.About your baseline: Which is mostly uneven, If you write in one consistent lengthyou may have more tactfullness in your decision making. </h2><br> <br> <h3>Step 3.About your Upstrokes as I said earlier theymay make your aspirations more higher and build up ur mind from imagination to realisation. </h3> <br><br> <h4>step 4.Downstrokes in letter 'G' & 'Y': Try to write them vertically straight and not as you wrote them twisted back. It will help you come out of your past. </h4> <br><br>

<h5> step 5. 'T' bars: the short line which crosses everysmall letter ' t ' should be crossed evenly and more on top high mark.It can enrich your knowledge and intelligence. </h5> <br><br> <h6>Step 6.Lastly for your over all writing kindly write more systematically and especially dont leave loose/broken ends in letter 'P' & 'D' or in any other letters if you notice it by yourself. </h6> <br> <br> </center> </body> </html></html>

3.Design a web page using all text tags(implicit and explicit both) and also include a paragraph to explain the difference between these 2 types. (<B>, <strong>,<i>, <cite>,<em>, centre>,<tt>and <U>.

CODING: <html> <head></head> <title></title> <body BGCOLOR="#F0F8FF"> <h1><CENTER>IMPLICIT AND EXPLICIT TAGS</h1></CENTER><br> <br> <br> In HTML there are both implicit tags and explicit tags. Implicit tags are designed to describe (to the browser) the enclosed text's meaning. An example of a implicit tag is the <strong>In HTML there are both implicit tags and explicit tags. Implicit tags are designed to describe (to the browser) the enclosed text's meaning. An example of a implicit tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance .By default all browsers make the text appear bold when in between the <strong> and </strong> tags. <BR><BR> Explicit tags on the other hand provide specific instructions on how to display the text they enclose. Examples of explicit tags include: <b>: Makes the text bold. <BR><BR> <big>: Makes the text usually one size bigger than what's around it. <BR><BR> <i>: Makes text italic. <br> <br> <b>: Makes the text bold.</B><BR><BR> <big>: Makes the text usually one size bigger than what's around it.</BIG><BR><BR>

Explicit tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have explicit tags. Rather than use explicit tags to style your HTML pages, you should use style sheets. <br> <br> <FONT SIZE="4">TYPE OF EXPLICIT AND IMPLICIT TAGS<br><BR> EXPLICIT TAGS-:<BR><BR> <B>THIS TEXT IS BOLD</B> <BR><BR> <I>THIS TEXT IS ITALIC</I> <BR><BR> <U>THIS TEXT IS UNDERLINED</U> <BR> <BR> IMPLICIT TAGS-:<BR><BR> <EM>THIS IS FOR EMPHASIS ITS SAME LIKE ITALIC TEXT</EM><BR> <BR> <STRONG>THIS IS FOR STRONG EMPHASIS THE TEXT ITS SAME LIKE BOLD TEXT</STRONG><BR> <BR> <TT>THIS IS FOR TELETYPE ITS SAME LIKE MONOSPACED TEXT</TT><BR><BR> </FONT> </body> </html>

4.Design a web page to show the use of paragraph tag and how <pre> tag is different from <p>.

CODING: <html> <head> <title>p and pre tag</title> </head> <body bgcolor="skyblue"> <h2>p tag</h2> <p>The basic rule of thumb with paragraphing is to keep one idea to one paragraph. If you begin to transition into a new idea, it belongs in a new paragraph. There are some simple ways to tell if you are on the same topic or a new one. You can have one idea and several bits of supporting evidence within a single paragraph. You can also have several points in a single paragraph as long as they relate to the overall topic of the paragraph. If the single points start to get long, then perhaps elaborating on each of them and placing them in their own paragraphs is the route to go. </p> <br> <br> <h2>pre tag</h2> <pre> As students advance, to improve writing skills they need in-depth support. They need to organize their thoughts and learn to clearly communicate their ideas in writing. However, it can be challenging for teachers to provide personal attention to each pupil. This is where Paragraph Punch fits in. Paragraph Punch takes users through the process of writing a basic paragraph. From pre-set writing prompts users develop an idea and write their own topic sentence, body, and a conclusion. </pre> </body> </html>

5. Design a web page using address tag and show at least 5 horizontal line with different thickness and all attributes.

CODING: <HTML> <HEAD> <TITLE>ADDRESS AND HR TAG</TITLE> </HEAD> <BODY> <ADDRESS> W3C AUSTRALLIAN OFFICE <BR> CSIROICT<BR> BUILDING 108, NORTH ROAD, AUSTRALLIAN NATIONAL UNIVERSITYCAMPUS <BR> ACTON, CANBERRA<BR> ACT 2061, AUSTRALIA </ADDRESS> <HR> <BR><ADDRESS> W3C AUSTRALLIAN OFFICE <BR> CSIROICT<BR> BUILDING 108, NORTH ROAD, AUSTRALLIAN NATIONAL UNIVERSITYCAMPUS <BR> ACTON, CANBERRA<BR> ACT 2061, AUSTRALIA </ADDRESS> <HR ALIGN="CENTER" WIDTH="50%" COLOR="RED" SIZE="10" NOSHADE> <BR> <BR> <ADDRESS> W3C AUSTRALLIAN OFFICE <BR>

CSIROICT<BR> BUILDING 108, NORTH ROAD, AUSTRALLIAN NATIONAL UNIVERSITYCAMPUS <BR> ACTON, CANBERRA<BR> ACT 2061, AUSTRALIA </ADDRESS> <HR ALIGN="CENTER" WIDTH="50%"> THIS IS TO SHOW HOW THESE TAGS ACTUALLY WORKS. <BR> <BR><ADDRESS> W3C AUSTRALLIAN OFFICE <BR> CSIROICT<BR> BUILDING 108, NORTH ROAD, AUSTRALLIAN NATIONAL UNIVERSITYCAMPUS <BR> ACTON, CANBERRA<BR> ACT 2061, AUSTRALIA </ADDRESS> <HR ALIGN="LEFT" WIDTH="75%"> <BR> <ADDRESS> W3C AUSTRALLIAN OFFICE <BR> CSIROICT<BR> BUILDING 108, NORTH ROAD, AUSTRALLIAN NATIONAL UNIVERSITYCAMPUS <BR> ACTON, CANBERRA<BR> ACT 2061, AUSTRALIA </ADDRESS> <HR NOSHADE SIZE="20"> </BODY> </HTML>

6. Create a web page to represent use of block quote and font tag along with their attributes.

CODING: <html> <head> <body> <h2>blockquote tag and font tag</h2> <p><font style="calabiri"size="7"colour="blue"> here is a quote from WWF'S website:</font></p> <blockquote cite="http://www.world wildlife.org/who/index.html"> for 50 years,WWF has been protecting the future of nature.The world's leading conservation organisation,WWF works in 100 countries & is supported by 1.2 millon members in the united states and close to 5 million globally. </blockquote> <p> <b>Note:</b>browsers usually indent & lt;blockquote & gt;elements.</p> <h2>The &lt;q & gt;tag</h2> <p>The & lt;q & gt;tag defines a short quotation</p> <p>WWF's goal is to: <q>build a future where people live in harmony with nature</q> <p><b>Note:</b>browser insert quotation marks around the &lt;q &gt;tag</p> </body> </html>

7. Design a web page to show an unordered list inside an ordered list.

CODING: <html> <head> <title>Write a code in HTML to demonstrate the ordered list in unordered list.</title> </head> <body bgcolor="White"> <h1><font color="red"><center>ORDERED AND UNORDERED LIST </center></font></h1> <font size=5> <ol type="1" start=1 > <li> <font color=fuchsia> ANALYSIS</font> <li> <font color=blue> SPECIFICATION BUILDING </font> <li> <font color=green> DESIGN AND DEVELOPMENT </font> <li> <font color=orange> CONTENT WRITING </font> <li> <font color=red> CODING </font> <li> <font color=teal> TESTING </font> <li> <font color=gray> PROMOTION </font> <ul type="square"> <li> <font color="black"> INDEX YOUR WEBSITE WITH INTERNET SEARCH ENGINES AND DIRCTORIES </font> <li> <font color="aqua"> INCLUDE REFERNCES TO YOUR WEBSITE AND ITS FEATURES </font> <li> <font color="maroon"> SET UP LINKS TO YOUR WEBSITE FROM RELATED SITES </font> <li> <font color="red"> SET UP LINKS TO YOUR WEBSITE ON HIGH TRAFFIC SITES </font> <li> <font color="blue">UTILIZE TARGETED MASS MARKETING TO INFORM YOUR AUDIENCE ABOUT YOUR WEBSITE </font> </li></ul>

<li> <font color="navy"> MAINTAINENCE AND UPDATING </font> </li></ol> </body></html>

8. Design a web page to show train schedule using table tags with different attributes.

CODING; 1.
<HTML> <HEAD> <TITLE>INDIAN RAILWAYS</TITLE> </HEAD> <BODY STYLE="BORDER:SOLID 5PX RED; MARGIN: 2"><center> <H1>INDIAN RAILWAYS</H1></center> <P ALIGN="JUSTIFY"> Indian Railways (reporting mark IR) is an Indian state-owned enterprise, owned and operated by the government of India through the Ministry of Railways. It is one of the world's largest railway networks comprising 115,000 km (71,000 mi) of track over a route of 65,000 km (40,000 mi) and 7,500 stations. As of December 2012, it transported over 25 million passengers daily (over 9 billion on an annual basis). In 2011, IR carried over 8,900 million passengers annually or more than 24 million passengers daily (roughly half of which were suburban passengers) and 2.8 million tons of freight daily. In 2011-2012 Indian Railways had revenues of 111984.89 crore (US$20 billion) which consists of 69675.97 crore (US$13 billion) from freight and 28645.52 crore (US$5.2 billion) from passengers tickets.<BR><BR> Railways were first introduced to India in 1853 from Bombay to Thane. In 1951 the systems were nationalized as one unit, the Indian Railways, becoming one of the largest networks in the world. IR operates both long distance and suburban rail systems on a multi-gauge network of broad, metre and narrow gauges. It also owns locomotive and coach production facilities at several places in India and are assigned codes identifying their gauge, kind of power and type of operation. Its operations cover twenty four states and three union territories and also provides limited international services to Nepal, Bangladesh and Pakistan.<BR><BR> Indian Railways is the world's ninth largest commercial or utility employer, by number of employees, with over 1.4 million employees. As for rolling stock, IR holds over 239,281 Freight Wagons, 59,713 Passenger Coaches and 9,549 Locomotives (43 steam, 5,197 diesel and 4,309 electric locomotives). The trains have a 5 digit numbering system as the Indian Railways runs about 10,000 trains daily. As of 31 March 2013, 23,541 km (14,628 mi) (36%) of the total 65,000 km (40,000 mi) km route length was electrified.[4] Since 1960, almost all electrified sections on IR use 25,000 Volt AC traction through overhead catenary delivery. </P> <BR><BR><BR> <A HREF="RESERVATION.HTML">RESERVATION</A><BR> <A HREF="TRACK TICKETS STATUS.HTML">TRACK TICKETS STATUS</A><BR> <A HREF="SCHEDULE.HTML">SCHEDULE</A><BR> </BODY> </HTML>

2.
<HTML> <TITLE>INDIAN RAILWAYS</TITLE> </HEAD> <BODY STYLE="BORDER:SOLID 5PX RED; MARGIN: 2"> <H1 ALIGN="CENTER">INDIAN RAILWAY </H1> <H3 ALIGN="CENTER">TRAIN SCHDULE</H3> <H5>Following is the list of all the trains running between Delhi to Chandigarh Railway Stations:</H5> <TABLE> <TR> <TH>TRAIN</TH> <TH>TRAIN NAME</TH> <TH>ORIGIN</TH> <TH>DEPARTURE</TH> <TH>DESTINATION</TH> <TH>ARRIVALTRAIN</TH> <TH>M</TH> <TH>T</TH> <TH>W</TH> <TH>T</TH> <TH>F</TH> <TH>S</TH> <TH>S</TH> </TR> <TR> <TD>12005</TD> <TD>KALKA SHATABDI</TD> <TD>NEW DELHI</TD> <TD>17:15</TD> <TD>CHANDIGARH</TD> <TD>20:37</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR>

<TR> <TD>12011</TD> <TD>KALKA SHATABDI</TD> <TD>NEW DELHI</TD> <TD>07:40</TD> <TD>CHANDIGARH</TD> <TD>11:05</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> <TR> <TD>12057</TD> <TD>UHL JANSHATABDI</TD> <TD>NEW DELHI</TD> <TD>14:35</TD> <TD>CHANDIGARH</TD> <TD>19:05</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> <TR> <TD>12217</TD> <TD>SAMPARK KRANTHI</TD> <TD>H NIZAMUDDIN</TD> <TD>10:42</TD> <TD>CHANDIGARH</TD> <TD>15:40</TD> <TD>Y</TD> <TD>N</TD> <TD>N</TD> <TD>N</TD>

<TD>N</TD> <TD>N</TD> <TD>N</TD> </TR> <TR> <TD>12687</TD> <TD>DEHRADUN EXPRESS</TD> <TD>H NIZAMUDDIN</TD> <TD>21:10</TD> <TD>CHANDIGARH</TD> <TD>04:30</TD> <TD>N</TD> <TD>N</TD> <TD>N</TD> <TD>N</TD> <TD>Y</TD> <TD>N</TD> <TD>N</TD> </TR> <TR> <TD>12925</TD> <TD>PASCHIM EXPRESS</TD> <TD>H NIZAMUDDIN</TD> <TD>10:29</TD> <TD>CHANDIGARH</TD> <TD>15:52</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> <TR> <TD>13008</TD> <TD>U A TOOFAN EXPRESS</TD> <TD>NANGLOI</TD> <TD>05:56</TD> <TD>CHANDI MANDIR</TD> <TD>05:23</TD>

<TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> <TR> <TD>14095</TD> <TD>HIMALYAN QUEEN</TD> <TD>DELHI S ROHILLA</TD> <TD>05:40</TD> <TD>CHANDI MANDIR</TD> <TD>10:44</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> <TR> <TD>14217</TD> <TD>UNCHAHAR EXPRESS</TD> <TD>DELHI</TD> <TD>04:25</TD> <TD>CHANDI MANDIR</TD> <TD>10:15</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> <TD>Y</TD> </TR> </BODY> </HTML>

3.
<HTML> <HEAD> <TITLE>INDIAN RAILWAYS</TITLE> </HEAD> <BODY STYLE="BORDER:SOLID 5PX RED; MARGIN: 2"> <H1 ALIGN="CENTER">INDIAN RAILWAY PASSEMGERS RESERVATION ENQUIRY</H1> <H3 ALIGN="CENTER">ACCOMODATION AVAILABILITY</H3> <FORM> <TABLE> <TR> <TD>TRAIN NUMBER:</TD> <TD><INPUT TYPE="TEXT " NAME="TEXT1"></TD> <TD>JOURNEY DATE:</TD> <TD><SELECT NAME="MONTH"> <OPTION>JAN <OPTION>FEB <OPTION>MARCH <OPTION>APRIL <OPTION>MAY <OPTION>JUNE <OPTION>JULY <OPTION>AUG <OPTION>SEP <OPTION>OCT <OPTION>NOV <OPTION>DEC </SELECT> <SELECT NAME="DATE"> <OPTION>01 <OPTION>02 <OPTION>03 <OPTION>04 <OPTION>05 <OPTION>06 <OPTION>07 <OPTION>08 <OPTION>09 <OPTION>10

<OPTION>11 <OPTION>12 </SELECT> <SELECT NAME="YEAR"> <OPTION>2012 <OPTION>2013 <OPTION>2014 <OPTION>2015 <OPTION>2016 <OPTION>2017 <OPTION>2018 <OPTION>2019 <OPTION>2020 </TD></SELECT> </TR> <TR> <TD>SOURCE STATION CODE:</TD> <TD><INPUT TYPE="TEXT" NAME="TEXT1"> <TD>DESTINATION STATION CODE:</TD> <TD><INPUT TYPE="TEXT" NAME="TEXT1"> </TR> <TR> <TD>CLASS:</TD> <TD><SELECT NAME="CLASS"> <OPTION>SLEEPER <OPTION>III AC <OPTION>II AC <OPTION>I AC </TD></SELECT> <TD>QUOTA:</TD> <TD><SELECT NAME="QUOTA"> <OPTION>GENERAL <OPTION>DEFENCE <OPTION>LADIES <OPTION>YUVA </TD></SELECT> </TR> </TABLE><BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="GET AVAILABILITY"> <INPUT TYPE="RESET" NAME="SUBMIT" VALUE="CLEAR"> </FORM>

</BODY> </HTML>

4.
<TITLE>INDIAN RAILWAYS</TITLE> </HEAD> <BODY STYLE="BORDER:SOLID 5PX RED; MARGIN: 2"> <H1 ALIGN="CENTER">INDIAN RAILWAY </H1> <H3 ALIGN="CENTER">TRACK TICKET STATUS</H3> <FORM> <TABLE> <TR> <TD>PNR NUMBER:</TD> <TD><INPUT TYPE="TEXT " NAME="TEXT1"></TD> </TR> </TABLE><BR> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="TRACK STATUS"> <INPUT TYPE="RESET" NAME="SUBMIT" VALUE="CLEAR"> </FORM> </BODY> </HTML>

9 .Create a web page to represent a calendar and with an image in the background of it.

CODING:
<HTML> <HEAD> <TITLE>CALENDAR </TITLE> <BODY> <H1><CENTER>FEBRUARY 2013</CENTER></H1> <CENTER> <TABLE BORDER="6" HEIGHT="400" WIDTH="500"> <font size="8"> <TR> <TH>MON</TH> <TH>TUE</TH> <TH>WED</TH> <TH>THU</TH> <TH>FRI</TH> <TH>SAT</TH> <TH>SUN</TH> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> <TD>9</TD> <TD>10</TD> </TR> <TR> <TD>11</TD> <TD>12</TD>

<TD>13</TD> <TD>14</TD> <TD>15</TD> <TD>16</TD> <TD>17</TD> </TR> <TR> <TD>18</TD> <TD>19</TD> <TD>20</TD> <TD>21</TD> <TD>22</TD> <TD>23</TD> <TD>24</TD> </TR> <TR> <TD>25</TD> <TD>26</TD> <TD>27</TD> <TD>28</TD> </font> </TR></CENTER></TABLE> <H1>ABOUT FEBRUARY</H1> <P><FONT FACE="CALIBRI" COLOR="blue" SIZE="6"> February is the second month of the year in the Julian and Gregorian calendars. <BR> It is the shortest month and the only month with fewer than 30 days; the month has 28 days in common years or 29 days in leap years.<BR> February is the third month of meteorological winter in the Northern Hemisphere. In the Southern Hemisphere, February is the seasonal equivalent of August in the Northern Hemisphere (which is the third month of summer), in meteorological reckoning.<BR> February starts on the same day of the week as March and November in common years, and on the same day of the week as August in leap years. February ends on the same day of the week as October every year and on the same day of the week as January in common years only.<BR> In leap years, it is the only month that ends on the same weekday it begins. </FONT></P> </BODY> </HEAD> </HTML>

10. Design a web page to design a signup form.

CODING:
<html> <head> <title>Ques No.6 Write a code in HTML to design a SIGN-UP FORM.</title> </head> <body bgcolor="blue"> <font size=6 font color="white"> <center><b><u> SIGN-UP FORM </b></u></center></font> <br> <table> <tr> <td><b><font size=4 font color="white">NAME</td><td><INPUT TYPE="text" NAME="AJAY SETHI" value=""> <INPUT TYPE="text" NAME="AJAY SETHI" value=""> <INPUT TYPE="text" NAME="AJAY SETHI" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">ADDRESS</td><td><INPUT TYPE="text" value=""> <INPUT TYPE="text" value=""> <INPUT TYPE="text" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">PHONE NO.</td><td><INPUT TYPE="number" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">GENDER</td><td><select name="select gender"> <option value="none" selected="selected'> Select gender</option> <option name=male value="male">MALE</option> <option name=female value="female">FEMALE</option> <tr> <td><b><font size=4 font color="white">USER ID</td><td><INPUT TYPE="text" NAME="AJAY" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">PASSWORD</td><td><INPUT TYPE="password" NAME="psswd" value=""></td> </tr>

<tr> <td><b><font size=4 font color="white">RE-ENTER PASSWORD</td><td><INPUT TYPE="password" NAME="psswd" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">ALTERNATE E-MAIL ID</td><td><INPUT TYPE="text" NAME="id" value=""></td> </tr> </table> <br> <br> <br><br> <b><font size=4 font color="white">If you forget your password....</b><br><br> <table> <tr> <td><b><font size=4 font color="white">SECURITY QUESTION</td> <td><select name="select a question"> <option value="none" selected="selected'> Select a question</option> <option name=childhood hero value="childhood hero">Who was your childhood hero?</option> <option name=school name value="school name">What was the name of your first school?</option> <option name=name of your pet value="name of your pet">What is your pet's name?</option> <option name=favourite game value="favourite game">Which is your favourite game?</option> <option name=favourite place value="favourite place">Which is your favourite place?</option> <option name=others value="others">Others?</option> </select></td> </tr> <tr> <td><b><font size=4 font color="white">YOUR ANSWER</td> <td><input type="text" value=""></td> </tr> <tr> <td><b><font size=4 font color="white">MY B'DAY</td> <td><input type="text" value=""></td> </tr> <td><b><font size=4 font color="white">ALTERNATE E-MAIL</td> <td><input type="text" value=""></td>

</tr> </table> <center><form> <input type="button" name=create my account value="CREATE MY ACCOUNT"> <input type="button" name=cancel value="CANCEL"> </font></form> </body> </html>

11. Design a web page to create a frame inside another frame.

CODING:
<html> <head> <title>TABLEm</title> </head> <body> <table border="2" color="white"> <tr> <td rowspan="4"> BLOCK 1</td> <td>BLOCK 1</td> <td>BLOCK 2</td> </tr> <tr> <td>BLOCK 3</td> <td>BLOCK 4</td> </tr> <tr><td colspan="2"> BLOCK 5 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbs p&nbsp BLOCK 6 </tr> <tr> <td>BLOCK 7</td> <td rowspan="2">BLOCK 8 </td> </tr> <tr> <td>BLOCK 9</td> </tr> </table>

12.Design a page using frameset tag where table of contents gets open in another frame.

CODING:
<html> <head> <title>Write a code in HTML to demonstrate the ordered list in unordered list.</title> </head> <body bgcolor="White"> <h1><font color="red"><center>ORDERED AND UNORDERED LIST </center></font></h1> <font size=5> <ol type="1" start=1 > <li> <font color=fuchsia> ANALYSIS</font> <li> <font color=blue> SPECIFICATION BUILDING </font> <li> <font color=green> DESIGN AND DEVELOPMENT </font> <li> <font color=orange> CONTENT WRITING </font> <li> <font color=red> CODING </font> <li> <font color=teal> TESTING </font> <li> <font color=gray> PROMOTION </font> <ul type="square"> <li> <font color="black"> INDEX YOUR WEBSITE WITH INTERNET SEARCH ENGINES AND DIRCTORIES </font> <li> <font color="aqua"> INCLUDE REFERNCES TO YOUR WEBSITE AND ITS FEATURES </font> <li> <font color="maroon"> SET UP LINKS TO YOUR WEBSITE FROM RELATED SITES </font> <li> <font color="red"> SET UP LINKS TO YOUR WEBSITE ON HIGH TRAFFIC SITES </font> <li> <font color="blue">UTILIZE TARGETED MASS MARKETING TO INFORM YOUR AUDIENCE ABOUT YOUR WEBSITE </font> </li></ul> <li> <font color="navy"> MAINTAINENCE AND UPDATING </font> </li></ol> </body></html>

13. Design a website of at least 5 pages for a company.

CODING: 1.
<HTML> <HEAD> <TITLE>COMPANY PROFILE </TITLE> </HEAD> <BODY bACKGROUND="GALAXYTAB2-0-0.JPG"><br> <br><br> <H3 ALIGN="CENTER"><FONT SIZE="9" FACE="BRUSH SCRIPT MT" COLOR="BLUE">SAMSUNG MOBILES</FONT></H3> <P ALIGN="JUSTIFY"> <FONT SIZE="4" FACE="TIMES NEW ROMAN" COLOR="black"> <U>INTRODUCTION:</U><BR></font> <br> <font size="3" face="Times New Roman" color="bLUE"> <p> Samsung Telecommunications is one of five business units within Samsung Electronics, belonging to the Samsung Group, and consists of the Mobile Communications Division, Telecommunication Systems Division, Computer Division, MP3 Business Team, Mobile Solution Centre and Telecommunication R&D Centre. Telecommunication Business produces a full spectrum of products from mobiles and other mobile devices such as MP3 players and laptop computers to telecommunication network infrastructure. Headquarters is located in Suwon, South Korea. In 2007 Samsung Telecommunication Business reported over 40% growth and became the second largest mobile device manufacturer in the world.[1] Its market share was 14% in Q4 2007, growing up form 11.3% in Q4 2006.At the end of November 2011, Samsung sold more than 300 million mobile devices which was a close second after Nokia with 300.6 million mobile devices sold in the first three quarter of 2011.As of Q3 2012, Samsung is the largest manufacturer of devices running Google Android with a 46% market share. </P></FONT> <H2 ALIGN="CENTER"><FONT SIZE="6" color="white"><U><I>DIFFERENT PRODUCTS</I></U></FONT></H2> <TABLE WIDTH="1000" HEIGHT="600" ALIGN="CENTER" BORDER="3"> <TR> <TD ALIGN="CENTER"><A HREF="SAM1.HTM"><img src="C:\Users\ajay\Documents\sam\SAMSUNG\in_GTP5100TSAINU_301_Front_thumb.jpg" WIDTH="250" HEIGHT="200" BORDER="1"><br><br>TABLETS<BR><BR></A></TD> <TD ALIGN="CENTER"><A HREF="SAM2.HTM"><IMG SRC="C:\Users\ajay\documents\sam\SAMSUNG\in_GTN7100TADINU_001_Front_gray_thumb.jpg" WIDTH="250" HEIGHT="200" BORDER="1"><BR><BR>TOUCH PHONE</A></TD> </TR>

<TR> <TD ALIGN="CENTER"><A HREF="SAM3.HTM"><IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\in_BGTS5222R_011_Front_black_thumb.jpg" WIDTH="250" HEIGHT="200" BORDER="1"><BR><BR>DUAL SIM</A></TD> <TD ALIGN="CENTER"><A HREF="SAM4.HTM"><IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\in_GTB5512HKAINU_001_Front_thumb.jpg" WIDTH="250" HEIGHT="200" BORDER="1"><BR><BR>QWERTY</A></TD> </TR> </TABLE><BR> <A HREF="samsung2.HTML">NEXT:</A><BR> </BODY> </HTML>

2.
<HTML> <HEAD> <TITLE>COMPANY PROFILE</TITLE> </HEAD> <BODY BACKGROUND="1-0-0C-0.JPG"> <h5 ALIGN="CENTER"><font size="5" color="#cococo">LIST OF OTHER PRODUCTS</font></H5> <OL><FONT SIZE="4" COLOR="BLUE"> <LI>TYPES: <LI>Galaxy TAB2 311 <LI>Galaxy TAB2 3100 <LI>Galaxy TAB 800 <LI>GT-P5100TSAINU_301 </UL><br> <br> <LI>TOUCH SCREEN <UL TYPE="DISC"> <LI>Galaxy S III <LI>GALAXY GRAND <LI>Samsung Galaxy S Duos S7562 <LI>Samsung Galaxy Discover S730M <LI>Samsung Galaxy Axiom R830 </UL> <br>

<br><br> <LI>DUAL SIM <UL TYPE="DISC"> <LI>SAMSUNG ACE DUOS <LI>Samsung Star Deluxe Duos S5292 <LI>Samsung Galaxy Pocket Duos S5302 </UL><br><br> <br> <LI>QWERTY <UL TYPE="FILLROUND"> <LI>Samsung Galaxy Chat B5330 <LI>Samsung Array M390 <LI>Samsung Galaxy Stratosphere II I415 <LI>GT-C3222FIASER </UL><br> </FONT> </OL> </BODY> </HTML>

3.
<HTML> <HEAD> <TITLE>MY COMPANY PROFILE </TITLE> </HEAD> <BODY BGCOLOR="white" text="BLUE"> <H1 ALIGN="CENTER"><U><b>SAMSUNG TABLETS</b></U></H1> <IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\galaxytab2-0-0.jpg" WIDTH="500" HEIGHT="400" HSPACE="400" VSPACE="40"> <P ALIGN="JUSTIFY"> <FONT SIZE="4" FACE="Times new romman" COLOR="blue"> <B> The Samsung Galaxy Tab is a line of Android-based tablet computers produced by Samsung.[1] The first model in the series, the 7-inch Samsung Galaxy Tab, was first introduced on 2 September 2010 at the IFA in Berlin.[2] Since then there have been several models released, including models with 7.7, 8.9 and 10.1-inch displays. The original Galaxy Tab was introduced on 2 September 2010 at the IFA in Berlin.[3] It has a single core 1 GHz Exynos processor, and a 7-inch TFT LCD display with a resolution of 1024 x 600 pixels.[4] Its operating system is based on Android 2.2 Froyo with some custom skins and applications.[5] Most Android 2.2 apps developed using Google's guidelines for Android should scale properly when displayed on larger-screen devices such as the Samsung Galaxy Tab, according to Samsung.[6] In May 2011 it was reported that Android

Gingerbread 2.3.3 was being made available in Italy, with other regions expected to follow.[7] Several updates have been made throughout the world and in February, 2012, Android version Gingerbread 2.3.6 is available </B> </FONT> </P><BR> <H3><FONT SIZE="5"><U>ITEMS:</U></FONT></H3> <TABLE BORDER="5" WIDTH="500" HEIGHT="100" CELLSPACING="10" CELLPADDING="10" align="center"> <TR> <TH>S.No.</TH> <TH>NAME</TH> <TH>PRICE(Rs)</TH> </TR> <TR> <TD>1</TD> <TD>Galaxy Tab 7.0 Plus</TD> <TD>18000</TD> </TR> <TR> <TD>2</TD> <TD>Samsung Galaxy Tab 10.1</TD> <TD>35000</TD> </TR> <TR><TD>3</TD> <TD>Samsung Galaxy Tab 7.7</TD> <TD>45050</TD> </TR> <TR> <TD>4</TD> <TD>Samsung Galaxy Tab 8.9</TD> <TD>23000</TD> </TR> </TABLE> </BODY> </HTML>

4.
<HTML> <HEAD>

<TITLE>MY COMPANY PROFILE </TITLE> </HEAD> <BODY BGCOLOR="WHITE" TEXT="blue" ALIGN="CENTER"> <H2 ALIGN="CENTER"><U><I>TOUCH SCREEN</I></U></H2><BR><BR> <IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\in_GTN7100TADINU_001_Front_gray_thumb.jpg" WIDTH="500" HEIGHT="400" HSPACE="400" VSPACE="40"> <P ALIGN="JUSTIFY"> <FONT SIZE="5" FACE="TIMES NEW ROMAN" COLOR="BLUE"> <B>ABOUT TOUCH SCREEN PHONE:<BR><BR>Samsung TOUCH SCREEN PHONES gives you a built-in shortcut; instant access right from the Menu button to apps, plus all your favorite social networking sites. Samsung's proprietary interface, TouchWiz, is easy-to-use and lets users interact with menus, widgets, and screen touch. TouchWiz is a fast and responsive interface that allows for an enhanced user experience</B> Always be ready to capture the moment with a spontaneous photo. </B></P><BR> <H3><FONT SIZE="5"><U>ITEMS:</U></FONT></H3> <TABLE BORDER="5" WIDTH="500" HEIGHT="100" CELLSPACING="10" CELLPADDING="10" ALIGN="CENTER"> <TR> <TH>S.No.</TH> <TH>NAME</TH> <TH>PRICE</TH> <BR> </TR> <TR> <TD>1</TD> <TD>SAMSUNG GALAXY S III</TD> <TD>38000</TD> <BR> </TR> <TR> <TD>2</TD> <TD>SAMSUNG GRAND</TD> <TD>21000</TD> <BR> </TR> <TR> <TD>3</TD> <TD>SAMSUNG GALAXY S II</TD> <TD>25000</TD>

<BR> </TR> <TR> <TD>4</TD> <TD>SAMSUNG DISCOVER</TD> <TD>17000</TD> <BR. </TR> </TABLE> </BODY> </HTML>

5.
<HTML> <HEAD> <TITLE>COMPANY PROFILE </TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="BLUE"> <H2 ALIGN="CENTER"><U><I>DUAL SIM PHONE</I></U></H2> <IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\DUAL_SIM.pnG" WIDTH="500" HEIGHT="400" HSPACE="400" VSPACE="40"> <P ALIGN="JUSTIFY"> <FONT SIZE="5" FACE="times new roman" COLOR="blue"> <B>ABOUT DUAL SIM PHONES:<BR><BR>Samsung Dual SIM mobiles Price in India listed on 2013 Mar 05th. Samsung has many dual SIM phones in India and we have listed all of them here. You can compare prices of Samsung dual SIM phones from all the leading mobile phone dealers in India. Main phones in the list include Samsung Galaxy Y Duos, Samsung Champ Duos, Samsung Star 3 duos, Samsung Galaxy S Duos, Samsung Galaxy Y Duos Lite and the upcoming Galaxy S2 Duos.. </B> </FONT> </P><BR> <H3><FONT SIZE="5"><U>ITEMS:</U></FONT></H3> <TABLE BORDER="5" WIDTH="500" HEIGHT="100" CELLSPACING="10" CELLPADDING="10" align="center"> <TR> <TH>S.No.</TH> <TH>NAME</TH> <TH>PRICE(Rs)</TH> </TR> <TR>

<TD>1</TD> <TD>Samsung Galaxy Chat B5330 <TD>8099</TD> </TR> <TR> <TD>2</TD> <TD>Samsung Array M390</TD> <TD>7000</TD> </TR> <TR> <TD>3</TD> <TD>Samsung Galaxy Stratosphere II I415</TD> <TD>9000</TD> </TR> <TR> <TD>4</TD> <TD>GT-C3222FIASER</TD> <TD>12000</TD> </TR> </TABLE> </BODY> </HTML>

6.
<HTML> <HEAD> <TITLE>COMPANY PROFILE </TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="BLUE"> <H2 ALIGN="CENTER"><U><I>SAMSUNG QWERTY PHONES</I></U></H2> <IMG SRC="C:\Users\ajay\Documents\sam\SAMSUNG\DUAL.JPG" WIDTH="500" HEIGHT="400" HSPACE="400" VSPACE="40"> <P ALIGN="JUSTIFY"> <FONT SIZE="5" FACE="TIMES NEW ROMAN" COLOR="blue"> <B>ABOUT QWEERTY PHONES:<BR><BR> QWERTY is the latest trend among the mobile users across the world and the QWERTY mobile phone by Samsung are very much appreciated and adopted by the youngsters as well as the office going crowd. QWERTY stands for the first six letters of the top row of the keyboard. Prior to mobiles, this kind of keypad was used only in computer keyboard and in laptops. Most of the phones that are available in the market, either are smartphones or basic

phones, have QWERTY keypad that allows the users to type with ease and comfort and with this keypad, they do not have to double or triple press a single key in order to type a word or letter. This keypad also enables the users to use special characters and symbols easily and quickly. Gone are the days when the mobile phones came loaded with alpha numeric keypad, now even the fully touchscreen mobile phones have virtual QWERTY keypads. A wide range of Samsung QWERTY phones are serving the Indian market that varies from low end segment to high end segment. Features of Samsung QWERTY mobile phones include separate key for each letter and number that prevents multiple pressing of a single button, availability of special characters and symbols that were unavailable in the alpha numeric keypads, fast typing and many more unique features that make QWERTY keypads the top most choice by the customers. Some of the popular Samsung QWERTY mobile phones are Samsung Galaxy Pro, Samsung Chat 322, Samsung Chat 222, Samsung Galaxy Y Pro Duos, Samsung Galaxy Y Pro B5510 and lot more. Samsung Galaxy Pro is one of the best Samsung QWERTY mobile and is available for Rs. 6,200. QWERTY mobile phones are considered to be the best handsets for messaging and e-mailing</B> </FONT> </P><BR> <H3><FONT SIZE="5" font color="BLUE"><U>ITEMS:</U></FONT></H3> <TABLE BORDER="5" WIDTH="500" HEIGHT="100" CELLSPACING="10" CELLPADDING="10" align="center"> <TR> <TH>S.No.</TH> <TH>NAME</TH> <TH>PRICE(Rs)</TH> </TR> <TR> <TD>1</TD> <TD>Samsung Galaxy Chat B5330</TD> <TD>12000</TD> </TR> <TR> <TD>2</TD> <TD>Samsung Array M390</TD> <TD>16000</TD> </TR> <TR> <TD>3</TD> <TD>GT-C3222FIASER</TD> <TD>13060</TD> </TR> <TR> <TD>4</TD> <TD>Samsung Galaxy Stratosphere II I415</TD> <TD>15000</TD>

</TR> <A HREF="samsung.HTML">back:</A><BR> </TABLE> </BODY> </HTML>

14. Design a web page to show the use of CSS.

<HEAD> <TITLE>ELEMENT BOX WIDTH EXAMPLE</TITLE> <STYLE> <!.. BODY{FONT-FAMILY:"ARIAL BLACK", IMPACT, SAS-SERIF; FONT-SIZE:16PT} P.TWENTY{WIDTH:20%; BORDER: 4PX SOLID BLUE} P.FIFTY{WIDTH:50%; BORDER: 4PX SOLID BLUE} P.EIGHTY{WIDTH:80%; BORDER: 4PX SOLID BLUE} P.HUNDRED{WIDTH:100%; BORDER: 4PX SOLID BLUE}/!.. > </STYLE> </HEAD> <BODY> <P CLASS="TWENTY">THIS PARAGRAPH HAS A STYLE SHEET WIDTH OF 20%</P>

<P CLASS="FIFTY">THIS PARAGRAPH HAS A STYLE SHEET WIDTH OF 50%</P> <P CLASS="EIGHTY">THIS PARAGRAPH HAS A STYLE SHEET WIDTH OF 80%</P> <P CLASS="HUNDRED">THIS PARAGRAPH HAS A STYLE SHEET WIDTH OF 100%</P> <br> </BODY> </HTML>

You might also like