2 assignments with answers
smartman1212
IT230_Assignment-1.docx|
Pg. 01 |
|
Question One |
|
|
|
|
Deadline: Thursday 08/10/2020 @ 23:59
Web Technologies
IT230
College of Computing and Informatics
|
|
|
|
|
|
|
|
Question One
2 Marks
Learning Outcome(s):
Create web pages using XHTML and Cascading Styles sheets. (2.2)
Write HTML code to get the following output that include the following elements.
1. The title is: Favorite Books
1. Large heading with text “Your Favorite Books”
1. Form that has 3 input values (two text boxes and one drop down list)
1. Drop-down list contains the following options,
0. Pearson
0. Mc-Graw Hill
0. Wiley
1. Submit information to “books.php” using GET request.
Answer
<html>
<head>
<title>Favorite Books</title>
</head>
<body>
<h1> Your Favorite Books </h1>
<form action="books.php" method="get">
Book Title:<input type="text" name="bookTitle"><br><br>
Author Name:<input type="text" name="authorName"><br><br>
Publisher Name :<select>
<option value="Person">Person</option>
<option value="Mc-Graw Hill">Mc-Graw Hill</option>
<option value="Wiley">Wiley</option>
</select><br><br>
<input type="button" name="submit" value="Submit">
</form>
</body>
</html>
Question Two
2 Marks
Learning Outcome(s):
Develop dynamic web pages using JavaScript (2.3)
Display a simple message "Welcome" on your demo webpage. When the user hovers over the message, a popup should be displayed with a message "Welcome to our new WebPage!!!".
Answer
<html>
<head>
<title>Demo Webpage</title>
<script type="text/javascript">
function showMessage()
{
alert("Welcome to our new WebPage!!!");
}
</script>
</head>
<body onload="start();">
<h1 onmouseover="showMessage()">Welcome</h1>
</body>
</html>
Question Three
2 Marks
Learning Outcome(s):
Create web pages using XHTML and Cascading Styles sheets. (2.2)
Create XHTML and CSS file to show your information. Style the table to match the on in the picture. You are allowed to choose your preferred colors; however, you cannot change the style of the table.
· The table must be centered in the page
· Heading font is Times New Roman
· Text in table cells must be centered
HTML File
<html>
<head>
<title>My Information</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<table class="TableCenter">
<caption>My Information:</caption>
<tr>
<td class="column1">Name:</td>
<td class="column2">Mamdouh</td>
</tr>
<tr>
<td class="column1">ID:</td>
<td class="column2">01007153601</td>
</tr>
<tr>
<td class="column1">Major:</td>
<td class="column2">IT</td>
</tr>
</table>
</body>
</html>
CSS File
body{
background-color:#add9e6;
font-family:"Times New Roman";
}
.TableCenter{
margin-left:auto;
margin-right:auto;
margin-top:15%;
width:75%;
}
.column1{
border-style:solid;
background-color:#f1ffff;
font-weight:bold;
text-align:center;
padding:8px;
border-width:2px;
}
.column2{
border-style:none none dashed none;
background-color:#f5f5dd;
text-align:center;
padding:8px;
border-width:2px;
}
caption{
text-align:left;
font-weight:bold;
font-size:25px;
line-height:2;
}
