Scribd
Upload
249 views14 pages

250 Pts. For Performance Task: HTML Actvity #1

The document provides instructions for an HTML activity to create a basic Facebook-style website. It includes steps to: 1. Develop a website with the domain name www.1stactivityinhtml.com and a red and blue background color. 2. Include navigation buttons labeled "Home", "Profile", "News Feed", and "Activity Log" that link to their own pages. 3. Create a profile page with personal information and center it, as well as add images and other details. 4. Develop additional pages for "News Feed" and "Activity Log" with sample posts and activities that are accessible via their buttons. Styling and other interactive elements are also described.

Uploaded by

Jasper Kelly Taeza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
249 views14 pages

250 Pts. For Performance Task: HTML Actvity #1

The document provides instructions for an HTML activity to create a basic Facebook-style website. It includes steps to: 1. Develop a website with the domain name www.1stactivityinhtml.com and a red and blue background color. 2. Include navigation buttons labeled "Home", "Profile", "News Feed", and "Activity Log" that link to their own pages. 3. Create a profile page with personal information and center it, as well as add images and other details. 4. Develop additional pages for "News Feed" and "Activity Log" with sample posts and activities that are accessible via their buttons. Styling and other interactive elements are also described.

Uploaded by

Jasper Kelly Taeza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
  • HTML Activity Overview: Outlines the requirements for the HTML activity involving the development of a website with multiple functionalities and design specifications.
  • 1st Page Setup: Describes the structure and elements of the first page, including Home, Profile, News Feed, and Activity Log sections.
  • Additional Elements: Provides instructions for adding supplementary features like comments sections, like buttons, and logout functionalities.

HTML ACTVITY #1

250 PTS. FOR PERFORMANCE TASK


1. DEVELOP A WEBSITE
2. NAME THE DOMAIN WWW.1STACTIVITYINHTML.COM
3. BACKGROUND COLOR IS RED AND BLUE
4. MAKE A BUTTON WITH NAMES: HOME, PROFILE, NEWS FEED, ACTIVITY LOG.
5. EACH BUTTON SHOULD BE DIRECTED TO IT’S OWN NAME.
6. CREATE YOUR FACEBOOK PROFILE. PUT ALL THE INFORMATION OF YOUR FB
ACCOUNT.
7. MARQUEE YOUR NAME,AGE,ADDRESS,EMAIL ADD AND CENTER IT.
8. ALL OF THE FOLLOWING INFORMATION SHOULD BE AT LEFT INDENTION.
9. PUT A DIFFERENT IMAGES BASED FOR YOUR PROFILE ACCOUNT.
1ST PAGE (PHASE)
HOME PROFILE NEWS FEED ACTIVITY LOG

1. NAKA MARQUEE NA NAME,AGE,ADDRESS,EMAIL ADD AND CENTER IT.


ETO ANG
HOME 2. At the bottom:
BUTTON Other information like hobbies, favorites, all about yourself, bio.
( indented at left side )

ALL OF THE HOME , PROFILE, NEWS FEED


AND ACTIVITY LOG BACKGROUND
SHOULD BE “LIGHT BLUE”
1ST PAGE (PHASE)
HOME PROFILE NEWS FEED ACTIVITY LOG

When you click the profile button

COVER PHOTO

PROFILE FULL NAME


PICTURE ALTERNATE NAME (PALAYAW)

BIO WHAT’S ON YOUR MIND? WRITE YOUR POST

HIGHLIGHT HIGHLIGHT RECENT POSTS


PHOTO PHOTO
HIGHLIGHT HIGHLIGHT ALL OF THE HOME , PROFILE, NEWS FEED
PHOTO PHOTO AND ACTIVITY LOG BACKGROUND
SHOULD BE “LIGHT BLUE”
1ST PAGE (PHASE)
HOME PROFILE NEWS FEED ACTIVITY LOG

ALL OF THE HOME , PROFILE, NEWS FEED


When you click the News Feed AND ACTIVITY LOG BACKGROUND
button SHOULD BE “LIGHT BLUE”

NEWS FEED

WHAT’S ON YOUR MIND? WRITE YOUR POST

FRIENDS PROFILE
PICTURE YOUR FRIENDS POSTS
FRIENDS PROFILE
PICTURE
YOUR FRIENDS POSTS

FRIENDS PROFILE YOUR FRIENDS POSTS


PICTURE

FRIENDS PROFILE
PICTURE YOUR FRIENDS POSTS
1ST PAGE (PHASE)
HOME PROFILE NEWS FEED ACTIVITY LOG

ALL OF THE HOME , PROFILE, NEWS FEED


AND ACTIVITY LOG BACKGROUND When you click the Activity Log
SHOULD BE “LIGHT BLUE” button

ACTIVITY LOG

You like “Friends Name” posts.

You commented at “Friends Name” posts.

You updated your status.

You changed your profile picture.


ADD THIS!
PROFILE

• CODE:
• <textarea name="comments" maxlength="1000" cols="178"
rows="6">What's on your mind?</textarea>
NEWSFEED
PRODUCE A BUTTONS :
LIKE, COMMENT AND SHARE
UNDER THE IMAGES

FOR LIKE: <button style="color:blue;background-color:white;font-family:arial;padding:


10px;margin:5px;border-radius:5px;"><strong>Like</strong></button>

FOR COMMENT:<button style="color:gray;background-color:white;font-family:arial;padding:


10px;margin:5px;border-radius:5px;"><b>Comment</b></button>

FOR SHARE: <button style="color:gray;background-color:white;font-family:arial;padding:


10px;margin:5px;border-radius:5px;“
><b>Share</b></button>
ACTIVITY LOG
TASK:
WHEN
YOU WHEN YOU CLICK IT
CLICK
THIS
BUTTON

THIS WILL APPEAR

CODE:
ACTIVITY LOG
EVERY PAGE SHOULD HAVE THIS 4 BUTTONS:

EVEN IF YOU CLICK THE HOME BUTTON, THE 4


BUTTONS SHOULD BE ALWAYS APPEARING AT THE TOP.
PUT A LOG OUT BUTTON!
Direct it to another page

AFTER YOU CLICK THIS


BUTTON!
AFTER YOU CLICK THE LOGOUT BUTTON!

You might also like