Bukidnon Association of Catholic Schools, Inc. (Buacs) : Impalambong, Malaybalay City

This document discusses elements that must be considered when designing an effective website, including links, forms, form validation, status messages, and animations. Students are instructed to find a website, take screenshots of these different elements, and write a reflection on why they are important. Elements like links, forms, validation, and feedback help users navigate and interact with websites effectively.

Uploaded by

Daryll glenn Tumalon

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

126 views

Bukidnon Association of Catholic Schools, Inc. (Buacs) : Impalambong, Malaybalay City

Uploaded by

Daryll glenn Tumalon

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 2

BUKIDNON ASSOCIATION OF CATHOLIC SCHOOLS, INC.

(BUACS)
Impalambong, Malaybalay City
S.Y. 2021-2022

FIRST QUARTER LEARNING ACTIVITY SHEET IN EMPOWERMENT TECHNOLOGIES

TOPIC: Evaluating Websites ACTIVITY SHEET NO: 4

I. LEARNING TARGET/OBJECTIVES
Today, your topic is about Evaluating Websites. The following questions are presented to
understand these topics better:
1. What are the elements of websites?
2. How these elements help people using it?
II. DETAILED INSTRUCTION
Read and understand the content of this module. Takedown note the things that you think are
important from this topic. If you have questions don’t hesitate to ask.
III. CONTENT DISCUSSION
Web Design Elements
To come up with a good design an effective visual and technical appeal of a website, there are
some elements that must be considered. Here are the following elements:
 Links
Include the following states for all links on the page:
Normal this is the default state
Visited this link is not being hovered over or click but whose been target has been
visited by the user
Active is one that is currently being clicked by the user.
Hover hiver state is what link looks like when the user moves the mouse over it.
 Forms
Two of the most important considerations when laying
out a form are:
Form label typically collect data that users are reluctant to
give.
Input field and labels plan on how the input field of the
form will be laid out on the page and how the labels for those field
will be styled and oriented relative to the fields.
 Form Validation
An important related detail is form validation. This is the critical
point where the website communicates the user requirements and errors in
a form. There are three core this to consider:
Required Fields all required field should be indicated. This is done
usually with asterisk
Real-time-Validation some validation can be done in real time as the
user complete the form.
Post-back validation the kind of validation happens after the user
have submitted the form.
 Status Messages: Errors, Warnings, Confirmation
Users will usually need some sort of feedback after performing an action on your
website. Usually after submitting a form, but many other could occur as well.
 Animations: Po-ups, Tooltip, Transitions
On standard HTML and CSS, animations and transition are so easy to overlook.
Tooltips those little pop-ups when mouse hover over elements.
1
Image rotators or Sliders Home page side shows are all the rage, and a wide range of
options is available for transitions and styles.
Lightbox you can style not only the lightbox itself, but also the transition to it.

IV. ACTIVITIES
Activity 1
Find a website online that you can observe the different elements discussed above. I want you
to snip/screen shot the different elements and arrange it in a word processing software and print
your output in a short bond paper (if you can’t print send it via email or messenger), don’t forget to
put label to your pictures and the links of the website. Avoid duplication of website used, there are
millions of websites in the internet.
Please Follow the Format Below: (Time New Roman, 12 font size, Narrow (0.5) margins, Short Bond
Paper)

Name: _____________ Grade and Section:

Empowerment Technologies
Activity Sheet No. 4
Link: www.example.com

Links

Picture

…
Reflection:
SUMMARY
To come up with a good design an effective visual and technical appeal of a website, there are some elements
that must be considered. Here are the following elements:
Links
Forms
Form Validation
Status Messages: Errors, Warnings, Confirmation
Animations: Po-ups, Tooltip, Transitions

V. REFLECTION (5 points)
Why the elements of websites do are important? Do you also find these element or qualities in
your friends or special someone? Why? (Encode your Reflection on your activity)