HTML Exercises

                                Exercise 6

Design and create webpage for your wish list (What you want to do). Also list challenges and opportunities along with images to present your dreams

(List ordered and unordered, Image, table)

<html>

<head>

<title> Wish list </title>

</head>

<body>

<center><h1> DREAMS </h1>

<img src="Dreams.jpg" height="200" width="200"></center>

<ol type="1">

<li>Completing my diploma in Computer Science & Engineering. </li>

<li>Completing my Bachelor degree in a reputed engineering college.</li>

<li>Want to work hard to score First class / Distinction.</li> </ol>

<center><h2> OPPORTUNITIES </h2>

<img src="Opportunities.jpg" height="200" width="200"></center>

<ul>

<li>Focus on what you can control and have a plan for the rest</li>

<li>Go beyond immediate tasks and think of the big picture</li>

<li>Do a periodic comparison of your annual goals with your to-do list</li></ul>

<center><h3> CHALLENGES </h3>

<img src="Challenges.png" height="200" width="400"></center>

<table border="1">

<tr>

<th>SL NO</th>

<th>CHALLENGE</th>

</tr>

<tr>

<td>1.</td>

<td>Putting your goals off until someday.</td>

</tr>

<tr>

<td>2.</td>

<td>Waiting to take action until you 'feel' ready.</td>

</tr>

<tr>

<td>3.</td>

<td>Viewing mistakes as failure.</td>

</tr>

<tr>

<td>4.</td>

<td>Not making your goal a priority.</td>

</tr>

</table>

</body>

</html>

                             Exercise 7

Design and create webpage using HTML and CSS about an awesome animal (Use necessary CSS tags)

<html>

<head>

<title> Awesome Animal </title>

<style>

div img

{

margin:10px;

padding:10px;

border:10px solid red;

height:250px;

width:250px;

float:left;

}

</style>

</head>

<body bgcolor="cyan">

<h1> <font color="Blue">Awesome Animal </font></h1>

<h2><font color="Green">Lion</font></h2>

<div class="img">

<img src="Lion.jpg">

</div>

</body>

</html>

                             Exercise 8

Design and create web page for a travel book / recipe book with more than 3 pages, table to list places/recipes (iframe, hyperlink)

Here we implemented 4 web pages for recipe book, so we should create 4 web pages namely

1. Recipe.html (Homepage)

2. Rice.html (Recipe 1)

3. Chapati.html (Recipe 2)

4. Tips.html (Cooking Tips)

<iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

<hyperlink> The HTML <a> tag defines a hyperlink. You can click on a link and jump to another document.

Recipe.html (Homepage)

<html>

<head>

<title>Recipe Book</title>

</head>

<body>

<marquee>

<b><u>Welcome</u></b></marquee>

<center><h1> The Joy of Cooking </h1></center>

<img src="joy of cooking.jpg" height="300" width="500">

<h2> Contents: </h2>

<table border="1">

<tr>

<th>SL NO</th>

<th>RECIPE NAME</th>

<th>SERVING TIME</th>

</tr>

<tr>

<td>1.</td>

<td>Rice and Sambar</td>

<td>Afternoon</td>

</tr>

<tr>

<td>2.</td>

<td>Chapati</td>

<td>Night</td>

</tr>

</table>

<h3> <center> General Cooking Tips is shown below </center></h3>

<center><iframe src="tips.html" height="75%" width="75%">Recipe</iframe></center>

<h3>If you want to know about Recipe #1 & #2, click on below link</h3>

<a href="Rice.html">Recipe #1</a> <br> <br>

<a href="chapathi.html">Recipe #2</a>

</body>

</html>

Rice.html (Recipe 1)

<html>

<head>

<title>Rice and Sambar</title>

<body bgcolor="green">

<marquee><b><u>The Joy of Cooking</u></b></marquee>

<h1>Rice and Sambar</h1>

<img src="sambar.jpg" height="200" width="200">

<h2>How to make sambar</h2>

<ol>

<li>Before we begin making sambar, it always helps to soak tamarind in water earlier.<br>

So soak 1 tablespoon tamarind in 1 by 3 cup hot water for 20 to 30 minutes.</li><br>

<li>Once the tamarind gets soft, then squeeze the tamarind in the water itself. <br>

Discard the strained tamarind and keep the tamarind pulp aside.</li><br>

<li>Rinse half cup toor dal (100 grams) a couple of times in water.</li><br>

<li>Drain all the water and add the dal in a 2 litre pressure cooker. Also add ¼ teaspoon turmeric powder.</li><br>

<li>Add 1.5 to 1.75 cups of water and mix.</li><br>

<li>Cover and pressure cook dal for 7 to 8 whistles or 10 to 12 minutes on medium flame.</li><br>

<li>When the pressure settles down on its own, open the lid and check the dal.<br>

The dal should be completely cooked and mushy. mash the dal with a spoon or wired whisk.</li><br>

</body>

</html>

Chapati.html (Recipe 2)

<html>

<head>

<title>Chapati</title>

<body bgcolor="cyan">

<marquee><b><u>The Joy of Cooking</u></b></marquee>

<h1>Chapathi</h1>

<img src="chapati.jpg" height="200" width="200">

<h2>How to make chapati</h2>

<ol>

<li>Pour the wheat flour, salt, and ghee into a bowl and mix the ingredients together.</li><br>

<li>Add half a cup of water to the flour mixture and stir the mixture until it's soft and supple.</li><br>

<li>Add the remaining water slowly, stirring until it's fully combined.</li><br>

<li>Place the dough into an oiled bowl and cover it for 25 minutes.</li><br>

<li>Divide the dough into 10-12 small balls, and dip them into flour.</li><br>

<li>Roll the dough with a rolling pin until the balls resemble thin, round pancakes.</li><br>

<li>Heat a heavy frying pan, tawa, or griddle over medium heat and cook each chapati on both sides.</li><br>

<li>Remove the chapati from the heat, and wrap it in a towel until they are all ready to serve.</li><br>

</body>

</html>

Tips.html (Cooking Tips)

<html>

<head>

<title>cooking tips</title>

<body bgcolor="pink">

<marquee><b><u>The Joy of Cooking</u></b></marquee>

<h1>General Cooking Tips</h1>

<img src="cooking.jpg" height="200" width="200">

<ol>

<li>Take notes as you go.</li><br>

<li>Read the recipe all the way through before you start.</li><br>

<li>Put a damp paper towel under your cutting board.</li><br>

<li>Set your timer for a few minutes less than the called-for time.</li><br>

<li>Season and taste as you go.</li><br>

<li>Trust yourself!</li><br>

</body>

</html>

                                Exercise 9

Design and create web page with JavaScript to design a simple calculator to perform the following operations: sum, product, difference and quotient

<html>

<head>

<script>

function dis(val)

{

 document.getElementById("result").value+=val

}

 function solve()

{

 let x = document.getElementById("result").value

 let y = eval(x)

 document.getElementById("result").value = y

}

 function clr()

{

 document.getElementById("result").value = ""

}

</script>

<style>

input

{

 width:100%;

 padding:20px;

 background-color:cyan;

}

</style>

</head>

<body>

<center><h1>MY CALCULATOR</h1>

<table border="1">

<tr>

<td colspan="3"><input type="text" id="result"/></td>

<td><input type="button" value="Clear" onclick="clr()"/> </td>

</tr>

<tr>

<!-- create button and assign value to each button -->

<!-- dis("1") will call function dis to display value -->

<td><input type="button" value="1" onclick="dis('1')"/> </td>

<td><input type="button" value="2" onclick="dis('2')"/> </td>

<td><input type="button" value="3" onclick="dis('3')"/> </td>

<td><input type="button" value="/" onclick="dis('/')"/> </td>

</tr>

<tr>

<td><input type="button" value="4" onclick="dis('4')"/> </td>

<td><input type="button" value="5" onclick="dis('5')"/> </td>

<td><input type="button" value="6" onclick="dis('6')"/> </td>

<td><input type="button" value="-" onclick="dis('-')"/> </td>

</tr>

<tr>

<td><input type="button" value="7" onclick="dis('7')"/> </td>

<td><input type="button" value="8" onclick="dis('8')"/> </td>

<td><input type="button" value="9" onclick="dis('9')"/> </td>

<td><input type="button" value="+" onclick="dis('+')"/> </td>

</tr>

<tr>

<td><input type="button" value="." onclick="dis('.')"/> </td>

<td><input type="button" value="0" onclick="dis('0')"/> </td>

<!-- solve function call function solve to evaluate value -->

<td><input type="button" value="=" onclick="solve()"/> </td>

<td><input type="button" value="*" onclick="dis('*')"/> </td>

</tr>

</table>

</center>

</body>

</html>

                             Exercise 10

Design and create a personal webpage with dashboard

<html>

<head>

<title>MY DASHBOARD</title>

</head>

<body>

<p align="center"><u>MY PERSONAL DASHBOARD </h1></u></p>

<u><h1>1. ABOUT ME</h1></u>

<p align="center">

<img src="IMG.jpg" height="300" width="500">

</p>

<u><h1>2. MY FAMILY</h1></u>

<p align="center">

<img src="IMG.jpg" height="300" width="500">

</p>

<u><h1>3. MY EDUCATION STATUS</h1></u>

<p align="center">

<img src="IMG.jpg" height="300" width="500">

</p>

<u><h1>4. MY HOBIES</h1></u>

<p align="center">

<img src="IMG.jpg" height="300" width="500">

</p>

</body>

</html>

                            Exercise 10

Design and create a personal webpage with dashboard

<html>

<head>


<title>MY DASHBOARD</title>

</head>

<body bgcolor="cyan">

<marquee><u><h1> MY  PERSONAL DASHBOARD </h1></u></marquee>

<table>

<tr>

<td><h1><pre>      1.ABOUT ME</h1></pre></td>

<td><h1><pre>                     2.MY FAMILY</h1></pre></td>

<td><h1><pre>                     3.MY EDUCATION STATUS</h1></pre></td>

</tr>

<table>

<p align="left">

<table>

<tr>

<td><img src="I:\IMAGE2.png"height="200" width="450" ></td>

<td><img src="I:\IMAGE2.png"height="200" width="450" ></td>

<td><img src="I:\IMAGE2.png"height="200" width="450" ></td>

</tr>

<table>

<table>

<tr>

<td><pre>           Santosh V Patil </pre></td>

<td><pre>                                                     IT Skills Lab</pre></td>

<td><pre>                                                     I Sem CS</pre></td>

</tr>

<table>

</p>

</body>

</html>

                               Exercise 11

Design and create web page about advantages of business process automation with respect to your branch of engineering

<html>

<head>

 <title> Computer science & engineering </title>

<style>

h1

{color:red;}

h2

{color:BROWN;}

h3

{color:blue;}


</style>

</head>

<body bgcolor="pink">

<h1> <marquee><b><u>How Automation in Computer Science & Engineering is Beneficail </marquee></b></u></h1>

<p align="center">

<center><iframe src="E:\CPOMPUTER.HTML" height="60%" width="100%">Recipe</iframe></center>

</p>

<h3>Banking Sector</h3>

<p>

In banks, computers are used for keeping account information of customer accounts.</br>

Banks use technology to carry out payments effectively and successfully.</br>

Computers help bankers keep a record of and verify financial records much quicker.</br>

In today’s world, ATMs are seen almost on every lane, which would be a machine itself that enables customers to save time.</br>

Online banking is also one way for individuals to make purchases at any time or display their balance.</br>

</p>

<h3>Education</h3>

<p>

Storage of Information </br>

Quick Data Processing </br>

Audio-Visual Aids in teachnig</br>

Better Presentation of Information </br>

Access to internet </br>

Faster communication between students, parents & teacher</br>

Data analyizing </br>

</p>

<h3>Industry</h3>

<p>

Computers are used to perform several tasks in industries like managing inventory,</br>

 designing purpose, creating virtual sample products, interior designing, video conferencing, etc. </br>

Online marketing has seen a great revolution in its ability to sell various products</br>

 to inaccessible corners like interior or rural areas. Stock markets have seen phenomenal </br>

participation from different levels of people through the use of computers.</br>

</p>

<h3>Hospitals</h3>

<p>

Major uses of computers in medicine include hospital information system, </br>

data analysis in medicine, medical imaging laboratory computing,</br>

 computer assisted medical decision making, care of critically ill patients, </br>

computer assisted therapy and so on.</br>

</p>

</body>

</html>

                             Exercise - 12

Create a workflow for education loan approval in bank/diploma admission process (Using Sequence diagram tool)

Title Diploma Admission Process

participant STUDENT

participant COLLEGE

participant DTE

STUDENT->COLLEGE:APPLIES FOR ADMISSION

STUDENT<--COLLEGE:CHECK FOR ELEGIBILITY AND GIVE ADMISSION APPLICATION

STUDENT->COLLEGE:FILLS THE APPLICATION AND SUMBITS IT BACK TO COLLEGE ALONG WITH NECESSARY DOCUMENTS

STUDENT -->COLLEGE:VERIFIES ALL THE DOCUMENTS AND APPLICATION

note over COLLEGE,DTE:**PROVIDES A CIRCULAR FOR DOCUMENT VERIFICATION**

COLLEGE-->DTE:SUBMITS ALL REQUIRED DOCUMENTS TO DTE

COLLEGE<<-DTE:Verifies and acknowledges the student admission

STUDENT <<- COLLEGE: Provides admission to the student




Comments

Post a Comment

Popular posts from this blog

Dharawad District Tourist Places

Image
  Agadi Thota  “Agadi Thota” was conceptualised in the year of 2000 with a theme we grow, we offer, we process our produce. In the year 2017, as a value addition and to generate additional income to make agriculture more self sustainable, we started to offer a special authentic North Karnataka’s ethnic food which is a geographical indicator of this region. The whole day we keep serving various items in unlimited quantities, starting from Fruit juice as a welcome drink, different variety of seasonal naturally grown and ripened fruit cuts, Millet based breakfast with natural Lemon Tea, Ragi Malt, Tamarind chigali, Sugarcane Juice, North Karnataka cuisine Lunch, Butter milk, pan, evening Masala Girmit with Sev, Mirchi to end with Tea/coffee.                        Agadi Thota Waterfall                           Agadi Thota  Mandir       ...
Read more