Scribd
Upload
185 views10 pages

IP LAB Manual

The document contains sample HTML code and exercises for a fundamentals of internet programming course. There are 11 questions with HTML code examples demonstrating basic HTML tags, links, images, tables, forms, stylesheets, menus and more. The code provides the output of each example to show how it will display in a web browser.

Uploaded by

Sakshi Sonavane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
185 views10 pages

IP LAB Manual

The document contains sample HTML code and exercises for a fundamentals of internet programming course. There are 11 questions with HTML code examples demonstrating basic HTML tags, links, images, tables, forms, stylesheets, menus and more. The code provides the output of each example to show how it will display in a web browser.

Uploaded by

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

WSU,SoI, IT Alemayehu Dereje

Wolaita Sodo University


School Of Informatics
Department of Information Technology
Fundamentals of Internet Programming I Practical Exercises
Prepared by Alemayehu Dereje ([email protected])
Question 1 Write an HTML webpage that displays “Welcome to Fundamentals of
Internet Programming LAB session”.
Note:
Ttitle caption:- My First Webpage
Body:- Welcome to Fundamentals of Internet Programming LAB session
Bgcolor:- “ccffcc”
Text font:- size=22,color=blue
Apply marquee style to the text
File name:-myfirstweb.html
<html>
<hread>
<title> My First Webpage</title>
</head>
<body bgcolor="ccffcc">
<font size=18 color=blue><marquee behavior="alternate">Welcome to Fundamentals of
Internet Programming LAB Session</marquee></font>
</body>
</html>
Output:

Sample IP I Exercises for Weekend Students 1


WSU,SoI, IT Alemayehu Dereje
Question 2 An html code that creates a link and insert image into webpage
<html>
<hread>
<title> Links and Inserting image</title>
</head>
<body bgcolor="cyan">
<h1> Creating an link</h1>
<a href="myfirst.html"> Click here</a><br>
<img src="images/Manchester United.gif" alt="My Photo" title="Real Name of the
image" width=10%
height=15%>
</body>
</html>
Output:

Question 3 Headings in HTML


<html> Output:
<head><title> Headings in HTML</title></head>
<body bgcolor="pink">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5> <h6> Heading 6 </h6>
</body>
</html>

Sample IP I Exercises for Weekend Students 2


WSU,SoI, IT Alemayehu Dereje
Question 4 Creating Table
<html>
<head>
<Title> basic of html</title></head>
<body bgcolor="ffccff" vlink="red">
<table border="2" bordercolor="blue" bgcolor="cyan" align=center Frame=”box”
cellpadding="15" cellspacing="5" >
<th colspan=3>Student List</th> OUTPUT
<tr> <caption> Table 1 List of
Student</caption>
<tr>
<td>Name</td>
<td> Sex</td>
<td> Age</td></tr>
<tr> <td> Yonatan Alemayehu</td>
<td> Male</td>
<td> 3</td>
</table>
</body>
</html>

Question 5 Bullets and Numbering


<html>
<head><title>Bullets and Numbering</title></head>
<body>
<ol Type="a" Start="3" >
<li>Introduction</li>
<li>Basic HTML</li>
<li>Databases</li>
</ol>
Sample IP I Exercises for Weekend Students 3
WSU,SoI, IT Alemayehu Dereje
<table>
<tr><td>
OL in UpperCase(alphabet) OUTPUT
<ol Type="A" Start="3" >
<li>Introduction</li>
<li>Basic HTML</li>
<li>Databases</li>
</ol></td>
<td>
OL in Roman Number
<ol Type="I" Start="3" >
<li>Introduction</li>
<li>Basic HTML</li>
<li>Databases</li>
</ol></td><td>
OL in Arabic Number
<ol Type="1" Start="3" >
<li>Introduction</li>
<li>Basic HTML</li>
<li>Databases</li>
</ol></td>
</table>
Unordered list(circle) </ul>
<Ul Type="circle"> Unordered list(square)
<li>Introduction</li> <Ul Type="square">
<li>Basic HTML</li> <li>Introduction</li>
<li>Databases</li> <li>Basic HTML</li>
</ul> <li>Databases</li>
Unordered list(disk) </ul>
<Ul Type="disc"> </body>
<li>Introduction</li>
<li>Basic HTML</li> </html>
<li>Databases</li>

Sample IP I Exercises for Weekend Students 4


WSU,SoI, IT Alemayehu Dereje
Question 6 Forms and html
<html>
<head>
<title>Using Form</title>
</head>
<body bgcolor=ffccff>
<form name="F1" method="POST" action="">
First name: <br><input type="text" name="FN" value=""size=30 maxlength=20><br>
Last name: <br><input type="text" name="lastname" value=""size=30 maxlength=20><br>
Password: <br> <input type="password" name="password"value=""size=30 maxlength=20><br>
Sex<input type="radio" name="rd" Value="Male">Male<br>
<input type="radio" name="rd" Value="Female">Female<br>
Courses you registered for:-<br> OUTPUT
<input type="checkbox" name="c" Value="IP">Internet
Internet Programming<br>
<input type="checkbox" name="c"
Value="IP">Advanced Database System<br>
<textarea name="textarea" >

Type any texyt you want


</textarea><br><br>
Select tthe color:<br>
<select name=”color” size =”3”>
<option value=”Red”>Red</option>
<option value=”Cyan”>Cyan</option>
<option value=”Green”>Green</option>
<option value=”Blue”>Blue</option>
</select><br><br>
Upload you photo<br>
<input type="File" name="fu"><br>
<input type="Submit" name="sbt" Value="Send">
<input type="Reset" name="rest" Value="Clear"><br>
</form>
</body>

Sample IP I Exercises for Weekend Students 5


WSU,SoI, IT Alemayehu Dereje
</html>

Question 7 Inline and internal style


<html>
<head><title>Example Inline & Internal Styles</title>
<style type="text/css">
p.floating_para {
float:center;
width:100%;
border:5 dotted red;
text-align:center;
background-color:silver;
margin: 25px;
font-size:32;
color:blue;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline overline; font-weight: bolder;">
Information Technology Weekend Year II(Inline etyle)
</h1>
<p class=floating_para>This is amazing layout(Internal/embeddeed style) </p>
</body>
</html> OUTPUT

Sample IP I Exercises for Weekend Students 6


WSU,SoI, IT Alemayehu Dereje
Question 8 Internal stylesheet
<html>
<head>
<title> Internal Stylesheets</title>
<style type="text/css">
P{
text-align:center; output
color:blue;
font-size:28;
text-decoration:overline underline;
}
</style>
</head>
<body>
<p> I'm very happy with internal CSS</p>
</body>
</html>
Question 9 Multiple stylesheet
<html>
<head>
<title> Internal Stylesheets</title>
<style type="text/css">
P.right{text-align:right;
color:blue;
font-size:32;}
P.left{text-align:left;
color:blue;
font-size:32;}
</style>

Sample IP I Exercises for Weekend Students 7


WSU,SoI, IT Alemayehu Dereje
</head>
<body>
<p class ="right"> This paragraph is right aligned</p>
<p class="left">This paragraph is left aligned</p>
</body>
</html> OUTPU

Question 10 External Stylesheet


<html>
<head>
<title> Style sheets exercises</title>
<link rel="Stylesheet" type="text/CSS" href="externalstyle.css">
</head> OUTPUT
<body>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
<p>This a center aligned
paragraph</p>
</body>
</html>

Sample IP I Exercises for Weekend Students 8


WSU,SoI, IT Alemayehu Dereje
Question 11 Menu
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About School of Informatics ￬</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">School of Informatics ￬</a>
<ul class="hidden">
<li><a href="4.html">Information Technology</a></li>
<li><a href="#">Information System</a></li>
<li><a href="#">Computer Science</a></li>
</ul>
Sample IP I Exercises for Weekend Students 9
WSU,SoI, IT Alemayehu Dereje
</li>
<li><a href="23.html">News Feed</a></li>
<li><a
href="#">Contact</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Live</a></li>
</ul>
</body>
</html>
Output

Sample IP I Exercises for Weekend Students 10

You might also like