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
