Sie sind auf Seite 1von 21

1.

1) Working of Basic HTML Tags


<html>

<head>
<title>Basic HTML Tags</title>
</head>

<body>
<h1>This is heading 1</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>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
<center>
<p>This text is in the center.</p>
</center>

</body>

</html>
1.2) WORKING OF BR, HR, COMMENT AND MARQUEE TAG

<html>
<head>
<title> Working of br, hr, marquee and comment tags</title>
</head>
<body>
<p> O’er all the hilltops<br>
Is quiet now,<br>
In all the treetops<br>
Hearest thou<br>
Hardly a breath;<br>
The birds are asleep in the trees:<br>
Wait, soon like these<br>
Thou too shalt rest.
</p>

<!-- Document Header Starts -->


<title>This is document title</title>
<!-- Document Header Ends -->
<p>Document content goes here.....</p>

<marquee>This is basic example of marquee</marquee>


<p>This text will be followed by a horizontal line <hr /></p>
</body>

</html>

1.3) WORKING OF FORMATTING TAGS


<html>
<head>
<title>Working of formatting tags</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses an <i>italicized</i> typeface.</p>
<p>The following word uses an <u>underlined</u> typeface.</p>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>

<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
</pre>

<p>
<font size="2" color="blue">This is a text with blue color.</font>
</p>
<p>
<font size="3" color="red">This is a text with red color and bigger.</font>
</p>
<p>
<font face="arial" color="green">This is a text in different font style and with green color.</font>
</p>

</body>
</html>

1.4) DISPLAY NESTED LIST


<html>
<body>

<h2>A Nested List</h2>


<p>List can be nested (lists inside lists):</p>

<ul>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ul>

</body>
</html>
1.5) Working of menu list
<html>
<body>
<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()">
<menuitem label="Save..." onclick="saveFile()">
</menu>
</li>
<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<men uitem label="Cut..." onclick="cutEdit()">
<menuitem label="Copy..." onclick="copyEdit()">
<menuitem label="Paste..." onclick="pasteEdit()">
</menu>
</li>
</menu>
</body>
</html>
Directory list
<html>
<head>
<title>HTML dir Tag</title>
</head>
<body>
<p>The following are the values:</p>
<dir>
<li>car</li>
<li>bike</li>
<li>ship</li>
</dir>
</body>
</html>
Definition list
<html>
<body>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><p>Style sheets are used to provide presentational suggestions.</p>
<p>Documents structured using XML or HTML are able to make use of them.</p></dd>
<dt>Content Management</dt>
<dd>The process of collecting, managing and publishing content to various media.</dd>
</dl>
</body>
</html>
1.6) Insert an inline hyperlink image in different frames
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg">
<FRAME src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg">
</FRAMESET>
<FRAME src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
1.7) Insert Table of 5 columns and 7 rows with, cell spacing, cell padding and border.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 15px;
}

</style>
</head>
<body>

<h2>Table</h2>
<table style="width:100%">
<table cellspacing="10">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Course</th>
<th>Semester</th>
</tr>

<tr>
<td>Rahul</td>
<td>Sharma</td>
<td>19</td>
<td>BBA</td>
<td>1st sem</td>
</tr>
<tr>
<td>Anjali</td>
<td>Gupta</td>
<td>20</td>
<td>BBA(CAM)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Simran</td>
<td>Bhardwaj</td>
<td>18</td>
<td>BBA(LLB)</td>
<td>5th sem</td>
</tr>
<tr>
<td>Ridhi</td>
<td>Sharma</td>
<td>19</td>
<td>BBA</td>
<td>1st sem</td>
</tr>
<tr>
<td>Diya</td>
<td>Gupta</td>
<td>20</td>
<td>BBA(GEN)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Dhruv</td>
<td>Gupta</td>
<td>20</td>
<td>BBA(LLB)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Arush</td>
<td>Malhotra</td>
<td>21</td>
<td>BBA(LLB)</td>
<td>7th sem</td>
</tr>

</table>
</body>
</html>
Table of 5 columns and 7 rows with colspan and rowsapn
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h2> Table</h2>
<table style="width:100%">

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th colspan="2"> Course</th>

</tr>

<tr>
<td rowspan="2">Rahul</td>
<td>Sharma</td>
<td>19</td>
<td>BBA</td>
<td>1st sem</td>
</tr>
<tr>

<td>Gupta</td>
<td>20</td>
<td>BBA(CAM)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Simran</td>
<td>Bhardwaj</td>
<td>18</td>
<td>BBA(LLB)</td>
<td>5th sem</td>
</tr>
<tr>
<td>Ridhi</td>
<td>Sharma</td>
<td>19</td>
<td>BBA</td>
<td>1st sem</td>
</tr>
<tr>
<td>Diya</td>
<td>Gupta</td>
<td>20</td>
<td>BBA(GEN)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Dhruv</td>
<td>Gupta</td>
<td>20</td>
<td>BBA(LLB)</td>
<td>3rd sem</td>
</tr>
<tr>
<td>Arush</td>
<td>Malhotra</td>
<td>21</td>
<td>BBA(LLB)</td>
<td>7th sem</td>
</tr>

</table>
</body>
</html>
1.8) Design application form
<html>
<body>

<h2>Employee Application Form</h2>

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname" >
<br>

Age:<br>
<input type="text">
<br>

<p>Gender:<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><p>

<p>Nationality:<br>
<input type="radio" name="nationality" value="Indian"> India<br>
<input type="radio" name="nationality" value="Outside India"> Outside India<br><p>

<p>Interested Department:<br>
<select name="select2" size="3">
<option selected="true">HR Department</option>
<option>Sales Department </option>
<option>Marketing Department</option>
<option>Finance Department</option>
<option>Manufacturing Department</option>
<option>R & D Department</option>
<option>IT Department</option>
</select>
<br><p>

<p><input type="checkbox" name="cb1" value="true" checked>You have filled your information


correctly <br><p>

<p><input type="submit" value="Submit"><p>


</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>
</html>
2.1)
<html>
<head>
<title>Table</title>
</head>
<body>
<script type="text/javascript">
for (var a=1; a <= 10; a++) {

document.write("2"+"x"+a+"="+2*a+"<br>");
}

</script>
</body>
</html>
<html>
<h1> Arithmetic Operators </h1>
<body>
<script type+"text/javascript">
var a = 5;
var b = 2;
var c = a + b;
document.write("addition =" );
document.write(c + "<br>");
var x = 5;
var y = 2;
var z = x - y;
document.write("subtraction =");
document.write(z+"<br>");
var k= 5;
var l= 2;
var m = k*l;
document.write("multiplication =");
document.write(m);
</script>
</body>
</html>

Das könnte Ihnen auch gefallen