Task 1:
Create below form
Solution:
<!DOCTYPE html>
<html>
<head>
<style>
table{
width:50%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
text-align: left;
}
.ractangle{
width: 150px;
height: 100px;
}
.square{
width: 150px;
height: 150px;
}
.ractangle, .square{
background: grey;
margin:10px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">RACTANGLE</th>
</tr>
<tr>
<td>
<div class="ractangle"></div>
</td>
<td>
<ul>
<li>Side length = a and b</li>
<li>Area = ab</li>
<li>Perimeter = 2(a+b)</li>
</ul>
</td>
</tr>
<tr>
<th colspan="2">SQUARE</th>
</tr>
<tr>
<td>
<div class="square"></div>
</td>
<td>
<ul>
<li>Side length = a</li>
<li>Area = a<sup>2</sup></li>
<li>Perimeter = 4a</li>
</ul>
</td>
</tr>
</table>
</body>
</html>Task 2:
Creating web form
Solution:
1. Design the web form (you only need to draw the form, you do Not need to write any programming code)
Answer:
2. Which method, GET or POST, would you choose for this form? Explain why.
Answer: we should Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field,
while by using GET method the submitted form data will be visible in the page address field.
3. Write the html code for the form.
<!DOCTYPE html>
<html>
<body>
<form action="http://whosvilleuni.edu/feedback" method="post">
Student Number:<br>
<input type="number" name="stdnum" value="Mickey">
<br>
Student Type:<br>
<select name="stdtype">
<option value="u">Undergraduate</option>
<option value="p">Postgraduate</option>
</select>
<br>
Feedback topic:<br>
<select name="fbtopic">
<option value="course">Academic Courses</option>
<option value="admin">Administration</option>
<option value="fin">Financials</option>
<option value="web">Website</option>
<option value="other">Others</option>
</select>
<br>
Feedback: <br>
<textarea name="fb"></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Task 3:
Explain CSS Questions
Ans:
1. Describe the three type of CSS.
Answer: CSS comes in three types:
In a separate file (external): External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page.
At the top of a web page document (internal): Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet allow you to 'override' an external style sheet -- for that special page that wants to be a nonconformist.
Right next to the text it decorates (inline): Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore.
2. Write HTML and CSS code example to explain class selector.
Answer:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1>Definition and Usage</h1>
<div class="highlight">
<p>The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.</p>
</div>
<p>HTML elements can also refer to more than one class.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>3. Write HTML and CSS code example to explain id selector.
Answer:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">The id Selector</p>
<p>The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.</p>
</body>
</html>
Task 4:
JavaScript
Ans:
<!DOCTYPE html>
<html>
<body>
<form name="form" id="form">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname" value="Smith">
<br><br>
<input type="submit" value="Say Hi">
</form>
</body>
<script>
var form = document.getElementById('form');
form.onsubmit = function validateForm(e) {
e.preventDefault();
alert("Hi "+form.firstname.value+" "+form.lastname.value);
}
</script>
</html>Task 5
Ans:
<!DOCTYPE html>
<html>
<body>
<button type="button" id="A" onclick="btnClicked(event)">A</button>
<button type="button" id="B" onclick="btnClicked(event)">B</button>
<button type="button" id="C" onclick="btnClicked(event)">C</button>
<button type="button" id="Clear" onclick="btnClicked(event)">Clear</button>
<p id="message"></p>
</body>
<script>
var msg = "";
var btnClicked = function(e){
switch(e.target.id){
case 'A':
msg += 'A';
break;
case 'B':
msg += 'B';
break;
case 'C':
msg += 'C';
break;
case 'Clear':
msg = "";
break;
}
if(msg.length){
document.getElementById('message').innerText = "You have entered " + msg;
}else{
document.getElementById('message').innerText = "";
}
}
</script>
</html>Task 6:
Ans
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="getRandomDigits()">Display Random Digit</button>
<button type="button" onclick="stop()">Stop</button>
<p id="randomDigit"></p>
</body>
<script>
var gameFlag;
var randomDigit = document.getElementById('randomDigit');
var getRandomDigits = function(){
randomDigit.innerText = "Random Digit : " + Math.floor(Math.random() * 10);
gameFlag = setTimeout(getRandomDigits, 3000);
}
var stop = function() {
clearTimeout(gameFlag);
randomDigit.innerText = "";
}
</script>
</html>
Task 7:
Solution
1. What does the plus sign (+) mean in this code <!ELEMENT studentReport (student+)>
Answer: The + sign in the example above declares that the child element "student" must occur one or more times inside the "studentReport" element.
2. Write an XML document which conforms to the above DTD file.
Answer:
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE studentReport [
<!ELEMENT student (studentNumber, courseCode, totalCreditPoint)>
<!ELEMENT studentNumber (#PCDATA)>
<!ELEMENT courseCode (#PCDATA)>
<!ELEMENT totalCreditPoint (#PCDATA)>
]>
<studentReport>
<student>
<studentNumber></studentNumber>
<courseCode></courseCode>
<totalCreditPoint></totalCreditPoint>
</student>
</studentReport>
Task 8:
Solution:
1. Write the javascript code to create an object representing a student with student number K123789, first name John, last name Smith.
Answer:
var student = {
studentNumnber: ‘K123789’,
firstName: ‘John’,
lastName: ‘Smith’
}2. Write the Javascript code to translate the above student object into JSON string.
Answer:
let json = JSON.stringify(student);
alert(typeof json); // we've got a string!
3. What is the JSON string representing this student object?
Answer: It will represent like:
{“studentNumnber”: “K123789”, “firstName”: “John”, “lastName”: “Smith”}Contact Us to get html, css, javascript project related help with an affordable prices, send your requirement details at realcode4you@gmail.com to get any HTML, CSS, JavaScript project help.