Question
Homework 8 Re-write this code using a style sheet not in-line styles <html> <head><title>position</title> </head> <body>...
Homework 8 Re-write this code using a style sheet not in-line styles
<html> <head><title>position</title>
</head>
<body>
<img src= "snow.jpg" style="positon: absolute; top:0px; left: 0px; z-index: 1">
<img src="nagano_1.jpg" Style = "position: absolute; top:70px;
left: 150px; z-index:2">
<h1 style= "position: fixed; top:50px; left: 50px; color:2338ee; z-index:3";>
this is a test of position</h1>
</body></html>
Answers
1)HTML page displaying the message 'Hi There!' at loading:
Output:
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<script>
alert("Hi There!");
</script>
</head>
<body>
<img src= "snow.jpg" style="positon: absolute; top:0px; left: 0px; z-index: 1"><img src="nagano_1.jpg" Style = "position: absolute; top:70px; left: 150px; z-index:2">
<h1 style= "position: fixed; top:50px; left: 50px; color:2338ee; z-index:3";>this is a test of position</h1>
</body>
</html>2) HTML page displaying grades and score
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<script>
var TestScore = prompt("Please enter test score", " ");
var testScoreGrade;
if(TestScore >= 90 && TestScore <= 100)
testScoreGrade = 'A';
else if(TestScore >= 80 && TestScore <= 89)
testScoreGrade = 'B';
else if(TestScore >= 70 && TestScore <= 79)
testScoreGrade = 'C';
else if(TestScore >= 60 && TestScore <= 69)
testScoreGrade = 'D';
else if(TestScore < 60)
testScoreGrade = 'F';alert("Grade: "+testScoreGrade);
</script>
</head>
<body>
<img src= "snow.jpg" style="positon: absolute; top:0px; left: 0px; z-index: 1"><img src="nagano_1.jpg" Style = "position: absolute; top:70px; left: 150px; z-index:2">
<h1 style= "position: fixed; top:50px; left: 50px; color:2338ee; z-index:3";>this is a test of position</h1>
</body>
</html>EXPLANATION:
Generally,in HTML with the help of javascript we can popup the message using global functions like - alert(), prompt() and confirm().
alert() - With 'OK' button displays a popup message on the screen.
confirm() - With 'OK' and 'Cancel' buttons popup a message and takes the user confirmation for proceeding.
prompt() - Takes the input message and displays the output through popping up the message.
Please note that I have taken some samples from internet and I'm displaying those as per the requirement here.
1 2 3 4 5 6 7 8 9 10 first.html x <!DOCTYPE html> <html> <head> <title>position</title> <script> alert("Hi There!"); </script> </head> <body> <img src= "snow.jpg" style="positon: absolute; top:0px; left: 0px; z-index: 1"> 11 12 <img src="nagano_1.jpg" Style = "position: absolute; top:70px; left: 150px; z-index:2"> 13 14 <h1 style= "position: fixed; top: 50px; left: 50px; color:2338ee; z-index:3";>this is a test of position</h1> </body> </html> 15 16first.html х + → X File | C:/Xampp/htdocs/test/first.html This page says Hi There! OK3 position X + File | C:/xampp/htdocs/test/first.html ulls is test of positionX 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 first.html <!DOCTYPE html> <html> <head> <title>position</title> <script> var TestScore = prompt("Please enter test score", " "); var testScoreGrade; if(TestScore >= 90 && TestScore <= 100) testScoreGrade = 'A'; else if(TestScore >= 80 && TestScore <= 89) testScoreGrade 'B'; else if(TestScore >= 70 && TestScore <= 79) testScoreGrade = 'C'; else if(TestScore >= 60 && TestScore <= 69) testScoreGrade else if(TestScore < 60) testScoreGrade = 'F'; 'D'; alert("Grade: "+testScoreGrade); </script> </head> <body> <img src= "snow.jpg" style="positon: absolute; top:0px; left: Opx; z-index: 1"> 25 26 <img src="nagano_1.jpg" Style = "position: absolute; top:70px; left: 150px; z-index:2"> 27 28 <h1 style= "position: fixed; top: 50px; left: 50px; color:2338ee; z-index:3";>this is a test of position</h1> </body> </html> 29 30position Х + x File | C:/xampp/htdocs/test/first.html This page says Please enter test score OK CancelC position X + File | C:/xampp/htdocs/test/first.html This page says Please enter test score 89 ОК Cancelposition X + File | C:/xampp/htdocs/test/first.html This page says Grade: B OK3 position X + File | C:/xampp/htdocs/test/first.html ulls is test of position
