Scribd
Upload
2 views

First Program

Uploaded by

meghana31p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

First Program

Uploaded by

meghana31p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

WEB TECHNOLOGY LAB

For this program:


Basic Requriments: Install Notepad++
Program No:1. Static Website Development
A. Create a static website using HTML tables.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}</style>
<table>
<tr>
<td>Student Name</td>
<td>Class</td>
<td>Roll Number</td>
<td>E-Address</td>
</tr>
<tr>
<td>ABC</td>
<td>CSE</td>
<td>1</td>
<td>[email protected]</td>
</tr>

<tr>
<td>Hillary</td>
<td>CSE</td>
<td>2</td>
<td>[email protected]</td>
</tr>

<tr>
<td>Lary</td>
<td>CSE</td>
<td>3</td>
<td>[email protected]</td>
</tr>
</table>
</html>
Output:

Student Name Class Roll Number E-Address

ABC HCSE 1 [email protected]

Hillary CSE 2 [email protected]

Lary CSE 3 [email protected]

B. Create a registration form using HTML forms.


<html>
<body bgcolor="orange">
<center>
<h2>REGISTER HERE</h2>
<form>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
NAME:<input type="text" name="username" value=""><br><br>
PASSWORD:<input type="password" name="password" value=""><br><br>
&nbsp&nbsp
E-MAIL ID:<input type="text" name="email" value=""><br><br>
PHONE NO:<input type="number" name="phno" value=""><br><br>
GENDER:<input type="radio" name="gender" value="male">male
<input type="radio" name="gender" value="female">female<br><br>
DOB:<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select>
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
<option>may</option>
<option>jun</option>
<option>jly</option>
<option>aug</option>
<option>sep</option>
<option>oct</option>
<option>nov</option>
<option>dec</option>
</select>
<select>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select><br><br>
LANGUAGES KNOWN:
<input type="checkbox" name="chk" value="eng">English
<input type="checkbox" name="chk" value="tel">Telugu
<input type="checkbox" name="chk" value="hin">Hindi
<input type="checkbox" name="chk" value="tml">Tamil<br><br>
<label>ADDRESS:</label>
<textarea type="text" rows=3 cols=20 scrolling="yes"> </textarea><br><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
</form>
</center></body></html>
Output:
C. Apply various CSS attributes and styles. Registration.html

<html> <head> <style type="text/css">

body {background-image:url('images/cse.png');

background-repeat:no-repeat;

background-position:center center;

background-attachment:fixed;

background-color:pink;

}a:link { text-decoration:none;color:orange;

} a:visited { text-decoration:none;color:red;

} a:hover

{ text-decoration:underline;color:blue;

} a:active { text-decoration:underline;

color:purple;

} h3 { color:green;

} .c1{cursor:crosshair} .c2{cursor:pointer} .c3{cursor:move} .c4{cursor:text} .c5{cursor:wait} .c6{cursor:help}

</style> <link rel="stylesheet" type="text/css" href="style.css">

</head> <body bgcolor="cyan">

<h1 style="color:blue;text-align:center;">

CSS (Inline, Internal and External)

</h1> <p>This Paragraph is a Not Styled</p>

<p class="left">This Paragraph is Styled by class "Left"</p>

<p class="center">This Paragraph is Styled by class "Center"</p>

<p class="right">This Paragraph is Styled by class "Right"</p>

<b>This is normal Bold</b> <br>

<b id="headline">This Bold Text is Styled </b> <h2><b><a href=" ">This is a link</a></b></h2>

<h3 class="c1">The cursor over this element is plus sign</h3> <h3 class="c2">The cursor over this element is a pointing
hand</h3> <h3 class="c3">The cursor over this element is a grasping hand</h3>

<h3 class="c4">The cursor over this element is a I bar</h3> <h3 class="c5"> The cursor over this element is a wait</h3> <h3
class="c6"> The cursor over this element is a question mark</h3> </html>
Source Code: Style.css
p.left {

text-align:left;

color:blue;

font-family:Cambria;

font-size:large;

text-indent:20px;

p.center {

text-align:center;

text-decoration:underline;

text-transform:uppercase;

letter-spacing:-3px;

word-spacing:20px;

font-size:larger;

}p.right {text-align:right; color:red; font-family:Tahoma;

font-size:15pt; text-decoration:overline; font-style:italic;

b#headline {

color:orange; font-size:22px; font-family:arial; text-decoration:underline; }


Output:

You might also like