Students Activity in HTML

Class Objectives:
The student will be able to:
1. familiarize the use of the common HTML tags;
2. Can embed images and videos;
3. Use proper formatting and spacing;
4. Applying appropriate shade of colors and design; and
5. Integrate and apply the use of tables.
6. Use of Hyperlinks in web pages.
7. Application of HTML tags such as table, image, hr, anchor (link within a page=top and bottom), <a href=>
(hyperlink to other pages, video and etc. )
8. Apply the concepts of design in personal webpage and develop creativity among students.

Create a personal website that contains your Information. Use your resume and the information in your
autobiography in Powerpoint activity. Make sure to have at least 4 webpages which is linked to each other and
also apply the anchor tag within a page. You can apply inline css style in this activity but not the whole
concept of CSS. Be Creative.

Sample Resume Content

Complete Name

Complete Address

Telephone No./Cp No.

Picture width and height

Email Address/FB account
=150

Personal Information
Date of Birth:
Place of Birth:
Sex:
Height:
Weight:
Parents Information
Name of Father: Occupation:
Name of Mother: Occupation:
Training and Seminars Attended
Date Name of Training Conducting Agency

Use ordered list tags

Hobbies/Interests

Use unordered list tags

 Favorite Music Video

Embed an .mp4 video here with width and height attribute

Story of My Life/ Autobiography

Write your story at least 300 words

Include significant moments/people that happened in your life, plans or future career, and anything that
seems so important that you cannot forget since you were born.

Note:
You can use any font type, color and size. Make sure that it matches your theme as a whole.
Use proper alignment in each part. Customize your own design. Please read the criteria below.

Points
(no output will be marked zero)
Category 5 10 15 20 Total

The pages are eye- The pages are well

The pages appear
The pages are catching and organized with tables.
“busy” or “boring”.
unattractive. Text is attractive. The text is Text spacing and
Text may be difficult
difficult to read. The easy to read. The alignment make
Layout/Design to read. The
backgrounds are backgrounds are reading easy. The
backgrounds are
distracting. subtle and backgrounds enhance
somewhat distracting.
appropriate. the page.

Photos are blurry or

Photos, icons, and clip
There are no photos, fuzzy; icons and clip Photos, icons, and clip
art are appropriate, of
icons, or clip art or art do not “fit” with art are used creatively
Graphics high quality, and
they are inappropriate the topic. Too many and may follow a
download fairly
or of low quality. pictures make the theme.
quickly.
download time slow.

Information could be Information is well

Information is creatively
Information is poorly better written, and written and interesting
Information/ Originality of written and cleverly
written, inaccurate, or too much information to read and is
Content presented with
incomplete. is given in each presented in short
originality.
section. sections.

The user may become Links are consistent

The user may become confused when and easy to find so Links are created with
Navigation/Links lost or links may be navigating between that the user can easily images and icons to
missing or not working. pages. Some links navigate back and enhance the text links.
may not work. forth through pages.

Was extremely clever

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

Final Grade 100%

You can cite the authors of the pictures or any elements that you will be using at the information page of your
webpage. You can include google pictures for this activity.