<!DOCTYPE html>
<!-- Source code for exercise3.html --/>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 3</title>
</head>
<body>
<h1>Exercise 3</h1>
<p>This is a test paragraph.<br>
This is the second line.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<table>
<tr>
<th>State</th>
<th>Capitol</th>
<th>State Bird</th>
</tr>
<tr>
<td>Illinois</td>
<td>Springfield</td>
<td>Northern Cardinal</td>
</tr>
<tr>
<td>Nebraska</td>
<td>Lincoln</td>
<td>Meadowlark</td>
</tr>
</table>
</body>
</html>
The directory structure on the studentweb server should look like this.
Indentation means subfolder.
public_html
it238
sample-page
index.html
This is the URL for accessing this file on studentweb, if ssmith is your campusconnect username:https://studentweb.cdm.depaul.edu/ssmith/it238/sample-page/index.html
h2 { color: navy; }
identify the property, selector, and value.
public_html
it238
index.html <-- index of proj1a and proj1b
styles.css
proj1a
index.html <-- stub files
script.js
styles.css <-- if needed
proj1b
index.html <-- stub files
script.js
styles.css <-- if needed
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<style>
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
</style>
<script>
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
</script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday?</p>
<p id="p2"></p>
<input type="button" value="Show Answer"
onclick="showAnswer( )">
<body>
</html>
Answer:
---- index.html ----------------------
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday?</p>
<p id="p2"></p>
<input type="button" id="btn1" value="Show Answer">
<body>
</html>
---- styles.css ----------------------
/* BirthdayRiddle Example */
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
---- script.js -----------------------
// BirthdayRiddle Example
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
function init( ) {
var button = document.getElementById("btn1");
button.onclick = showAnswer;
// or
// button.addEventListener("click", showAnswer);
}
window.onload = init;
// or
// window.addEventListener("load", init);
--------------------------------------
These examples were not discussed in class on Jan 6, but are included here for your reference.