Order Now
Uncategorized

HTML Table, Prompt Box, And Custom Alert Window Examples

8 min read
Posted on 
August 26th, 2024
Home Uncategorized HTML Table, Prompt Box, And Custom Alert Window Examples

Creating an HTML Table

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

<html >

<style>

td, th {

border: 1px solid #dddddd;

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

    text-align:center;

    padding: 12px 20px;

</style>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Table</title>

</head>

<table style=”border-collapse: collapse;”>

<tr>

<th colspan=”6″>TIMETABLE</th>

</tr>

<tr>

<th>TIME/DAY</th>

<th>Mon</th>

<th>Tue</th>

<th>Wed</th>

<th>Thu</th>

<th>Fri</th>

</tr>

<tr>

<td>8 am</td>

<td>Science</td>

<td>Maths</td>

<td>Bahasa</td>

<td rowspan=”2″>Arts</td>

<td>PJ</td>

</tr>

<tr>

<td>9 am</td>

<td>English</td>

<td>History</td>

<td>Maths</td>

<td>Science</td>

</tr>

<tr>

<td>10 am</td>

<th colspan=”5″>LUNCH BREAK</th>

</tr>

<tr>

<td>11 am</td>

<td>Maths</td>

<td>Science</td>

<td>English</td>

<td>Bahasa</td>

<td rowspan=”2″>Project</td>

</tr>

<tr>

<td>12 am</td>

<td>History</td>

<td>Maths</td>

<td>Science</td>

<td>Maths</td>

</tr>

</table>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<script>

function myFunction() {

    var txt;

    var person = prompt(“Please enter your name:”, “”);

    if (person == null || person == “”) {

        txt = “User cancelled the prompt.”;

    } else {

        txt = person

    document.getElementById(“demo”).value = txt

</script>

<title>Prompt Box</title>

</head>

<body>

<button onclick=”myFunction()”>Click to enter your Name</button>

<input type=”text” id=”demo”>

</body>

</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<style>

.alert {

text-align:center;

    padding: 20px;

width:10%;

display:none;

.closebtn {

    color: black;

    font-weight: bold;

    font-size: 12px;

    line-height: 20px;

    cursor: pointer;

    transition: 0.3s;

padding:8px;

.closebtn:hover {

    color: black;

</style>

<script>

function myFunction() {

var txt = “”;

    var x = prompt(“Enter a number between 1 – 100:”, );

    if (x == 50) {

        txt = “Red”;

document.getElementById(“alert”).style.display = “block”;

document.getElementById(“alert”).style.backgroundColor = “red”;

document.getElementById(“color”).innerHTML = txt;

    }  else if(x < 50) {

        txt =x;

 txt = “Yellow”;

document.getElementById(“alert”).style.display = “block”;

document.getElementById(“alert”).style.backgroundColor = “Yellow”;

document.getElementById(“color”).innerHTML = txt;

 else if(x>=50 && x<100) {

txt = “Purple”;

document.getElementById(“alert”).style.display = “block”;

document.getElementById(“alert”).style.backgroundColor = “Purple”;

document.getElementById(“color”).innerHTML = txt;

else {

txt = “Green”;

document.getElementById(“alert”).style.display = “block”;

document.getElementById(“alert”).style.backgroundColor = “Green”;

document.getElementById(“color”).innerHTML = txt;

</script>

<title>Untitled Document</title>

</head>

<body>

<button onclick=”myFunction()”>Let’s play with numbers</button>

<div style=”text-align:center”>

<div class=”alert” id=”alert”>

<p id=”color”></p>

  <input type=”submit” class=”closebtn” onclick=”this.parentElement.style.display=’none’;” value=”Ok”>

</div></div>

</body>

</html>

Open Popup: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title> Open Popup </title>

</head>

<body>

<input type=”button” value=”Open a Popup Window” onclick=”window.open(‘popup.html’,’popUpWindow’,’height=500,width=400,

left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes’);”>

</body>

</html> 

Popup.html: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Untitled Document</title>

</head>

<body>

<p>This is a pop up window</p>

<input type=”submit” onclick=”javascript:window.open(”,’_self’).close()” value=”Exit” />

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<style>

.text {

text-align:right;

font-size:36px;

margin-right:40px;

.nav {

text-align:center;

.nav a{

text-decoration:none;

border-color:#330033;

padding:10px 35px;

color: #000000;

height:10px;

border: 1px solid;

.nav a:hover {

background-color:#93F9B1;

.nav a.active {

color:#999999;

.img1

text-align:right;

margin-right:350px;

.bottom {

text-align: center;

margin-top:50px;

.firstbox {

float:left;

border: 1px solid;

background-color:#00CC00;

width: 25%;

height: 30%;

padding: 45px;

border-radius:20px;

.seconfimage {

float:left;

.seconfimage img{

border-radius:20px;

margin-left: 80px;

.secondbox

border: 1px solid;

border-color:#00CC33;

width: 25%;

float:right;

padding: 45px;

border-radius:20px;

</style>

<title>Main Page</title>

</head>

<body>

<div class=”text”>

SMART ACADEMIC Tution Centre

</div>

<div class=”nav”>

<a href=”#” class=”active”>About Us</a>

<a href=”#”>Program and Fees</a>

<a href=”#”>Our Teachers</a>

<a href=”#”>Gallery</a>

<a href=”#”>Other Activities</a>

<a href=”#”>Announcements</a>

<a href=”#”>Contact Us</a>

</div>

<div class=”img1″>

<img data-src=”image1.png” />

</div>

<div class=”bottom”>

<div class=”firstbox”>

Limited Seats for IGCSE / SPM Seminar 2017REGISTER NOW! FREE TRIAL CLASS IS AVAILABLE COME JOIN US! BRING FRIEND & REDEEM 1 MONTH CLASS FOR FREE!

</div>

<div class=”seconfimage”>

<img data-src=”image2.png” />

</div>

<div class=”secondbox”>

Revision, study and examination technique are emphasised in all our classes to ensure each individual student is roached to achieve the highest grade or score possible.

</div>

</div>

</body>

</html>

References:

Duckett, Jon, Gilles Ruppert, and Jack Moore. JavaScript & jQuery: interactive front-end web development. Wiley, 2014.

Netravali, Ravi, Ameesh Goyal, James Mickens, and Hari Balakrishnan. “Polaris: Faster Page Loads Using Fine-grained Dependency Tracking.” In NSDI, pp. 123-136. 2016.

Nguyen, Hung Viet, Christian Kästner, and Tien N. Nguyen. “Varis: IDE support for embedded client code in PHP web applications.” In Proceedings of the 37th International Conference on Software Engineering-Volume 2, pp. 693-696. IEEE Press, 2015.

Wang, Xiao Sophia, Arvind Krishnamurthy, and David Wetherall. “Speeding up Web Page Loads with Shandian.” In NSDI, pp. 109-122. 2016.

Order an Essay Now & Get These Features For Free:

Turnitin Report

Formatting

Title Page

Citation

Outline

Place an Order
Calculate the price
Pages (275 words)
$0.00
Paper Answers
Company
Legal
How Our Service is Used:
Paper Answers essays are NOT intended to be forwarded as finalized work as it is only strictly meant to be used for research and study purposes. Paper Answers does not endorse or condone any type of plagiarism.
Subscribe
No Spam
© 2024 Paper Answers. All rights reserved.
Paper Answers will be listed as ‘Paper Answers’ on your bank statement.

Order your essay today and save 30% with the discount code ESSAYHELP

Order Now