Ragasa Act9

Bulacan State University
College of Engineering
Computer Engineering Department
CPE 312 – ELECTIVE 1 - Activity 9

DYNAMIC STYLE EFFECTS
Name:_________________________________________Score:_________________
C/Y/S: _________________________________________ Date: _________________
OBJECTIVES:
1. To be able to use HTML, CSS, JAVASCRIPT and jQuery Dynamic Style Pages.
2. To understand the use of effects.
3. To understand how to use DOM.
REQUIREMENTS:
Notepad or any software or platform IDE applicable.
ACTIVITY EXERCISES:
1. Use your preferred editing software.

2. Open a new file.
3. Practice creating and viewing simple dynamic page. The image use is attached
in the file. Copy the codes below, and save it to
SURNAME_FIRSTNAME_LABACT9a.HTML
1
4. By using the above example: Create a web page that manipulate colors by using
mouse events. The output example is shown below. Save it to
SURNAME_FIRSTNAME_LABACT9b.HTML.
Write your codes here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCRIPTING</title>
<style>
td{
font-weight: bolder;
padding: 50px;
}
h1{
text-align: center;
color: blue;
font-weight: bolder;
}
.blue:hover{
background: blue;
}
.red:hover{
background: red;
}
.yellow:hover{
background: yellow;
2
}
.green:hover{
background: green;
}
</style>
</head>
<body>
<h1>MOUSE EVENTS</h1>
<table align="center" border="4" width="600" height="200">
<tr>
<td class="blue" colspan="5" align="center" onmouseover="over(this)"
onmouseout="outalt(this)"></td>
</tr>
<tr>
<td class="red" colspan="1" align="center" rowspan="3"
onmouseover="over(this)" onmouseout="outalt(this)"></td>
<td class="yellow" colspan="1" align="center" onmouseover="over(this)"
<td class="green" colspan="1" align="center" onmouseover="over(this)"
<td class="red" colspan="1" align="center" rowspan="3"
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td class="blue" colspan="5" align="center" align="center"
</tr>
</table>
</body>
</html>
3
5. Create a website that will create a dynamic effect on the websites. The text
effects use rainbow color and larger the text when a mouse over the text. It turns
to have different color when you clicked. The Sample video and output is
indicated below. Save it to SURNAME_FIRSTNAME_LABACT9c.HTML.
Write your codes here:
<!DOCTYPE html>
<html>
<head>
<title>SCRIPTING</title>
<style>
.center {
text-align: center;
}
.rainbow-text {
animation: rainbow 2s infinite;
}
@keyframes rainbow {
0% {
color: red;
}
25% {
color: orange;
}
50% {
color: yellow;
}
75% {
color: green;
}
100% {
color: blue;
4
}
}
.red-text {
color: red;
}
.green-text {
color: green;
font-size: 48px;
}
</style>
<script>
function hitMe() {
var text = document.getElementById("hit-me");
text.innerHTML = "Do you dare point your cursor at me?";
text.classList.add("red-text");
text.onmouseover = function () {
text.innerHTML =
"Drag the mouse over me to see me get larger and turn green";
text.classList.remove("red-text");
text.classList.add("green-text");
};
text.onmouseout = function () {
text.innerHTML = "Do you dare point your cursor at me?";
text.classList.remove("green-text");
text.classList.add("red-text");
};
}
function makeRed() {
var text = document.getElementById("click-text");
text.style.color = "red";
}
</script>
</head>
<body>
<h1>MY DYNAMIC STYLE SHEET</h1>
<p>
<span id="click-text" onclick="makeRed()"
><b>Click me, if you DARE!</b></span
>
</p>
<div class="center">
<span id="hit-me" onclick="hitMe()">Hit me once!</span>
<br /><br />
<span class="rainbow-text">The text appears in a rainbow of color</span>
</div>
</body>
</html>
5
RUBRIC FOR HTML WEB PAGE ACTIVITY
Name__________________________________ C/Y/S:______________ Date: ___________
Points
Category 5 10 15 20 Total
The pages appear The pages are The pages are well
The pages are “busy” or “boring”. eye-catching and organized with
unattractive. Text Text may be attractive. Text is tables. Text spacing

Layout/Design is difficult to read. difficult to read. easy to read. The and alignment make
The backgrounds The backgrounds backgrounds are reading easy. The
are distracting. are somewhat subtle and backgrounds
distracting. appropriate. enhance the page.
Photos are blurry
or fuzzy; icons Photos, icons, and
There are no
and clip art do not clip art are Photos, icons, and
photos, icons or
“fit” with the topic. appropriate, of high clip art are used
Graphics clip art or they are
Too many pictures quality, and creatively and may
inappropriate or of
make the download fairly follow a theme.
low quality.
download time quickly.
slow.
Information could
Information is well
Information is be better written
written and Information is
poorly written, and too much
Information interesting to read creatively written and
inaccurate, or information is
and is presented in cleverly presented.
incomplete. given in each
short sections.
section.
Links are
The user may
The user may consistent and
become confused Links are created
become lost or easy to find so that
Navigation/Link when navigating with images and
links may be the user can easily
s between pages. icons to enhance the
missing or not navigate back and
Some links may text links.
working. forth through
not work.
pages.
Minimal effort. Was well done and Was extremely clever

Poor Was clever at interesting to the and presented with
layout/design. Did times; audience; added a originality. Excellent
not incorporate incorporated most few original layout/design work
required of the attributes; touches to incorporating all
Creativity
attributes, used a limited enhance the required attributes,
graphics, did not variety of project; used a great variety of
resize pictures, appropriate good variety of appropriate graphics
inappropriate graphics. appropriate that enhanced the
graphics. graphics. pages.
Final Grade

Ragasa Act9

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ragasa Act9

Uploaded by

Copyright:

Available Formats

Bulacan State University

CPE 312 – ELECTIVE 1 - Activity 9

Notepad or any software or platform IDE applicable.

1. Use your preferred editing software.

Write your codes here:

Write your codes here:

Minimal effort. Was well done and Was extremely clever

You might also like