Scribd
Upload
28 views3 pages

Project Direction in Tle 8

The document provides instructions for a student project to design a basic website with multiple pages using HTML and CSS, including requirements to create navigation links using different CSS selectors, apply styles using internal CSS stylesheets, and add images. Students are asked to build out pages for a home, about, services, and contact section and submit their project by the specified deadline.

Uploaded by

daphney ponce
Copyright
© © All Rights Reserved
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
28 views3 pages

Project Direction in Tle 8

The document provides instructions for a student project to design a basic website with multiple pages using HTML and CSS, including requirements to create navigation links using different CSS selectors, apply styles using internal CSS stylesheets, and add images. Students are asked to build out pages for a home, about, services, and contact section and submit their project by the specified deadline.

Uploaded by

daphney ponce
Copyright
© © All Rights Reserved
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/ 3

MUNTINLUPA SCIENCE HIGH SCHOOL

999 Buendia St., Tunasan, Muntinlupa City

TECHNOLOGY AND LIVELIHOOD EDUCATION


TLE 8
WEB PAGE DESIGN

PROJECT IN TLE 8
WEB SITE LAYOUT

PROJECT REQUIREMENTS:

-NOTEPAD, WEB BROWSER(LIKE GOOGLE CHROME OR INTERNET EXPLORER,


etc),
- NEW CONTENT OF YOUR WEBSITELAYOUT(TEXT,PICTURES)

WEB PAGES CONTENTS:

PICTURES,INFORMATION(TEXT OR PARAGRAPH)

DIRECTION:

Do the following:
1. In your Website, create at least 4 navigation links. Use/Apply the 3 types of CSS
links SELECTORS.

SAMPLE LINK BELOW

A. a
B. a:hover
C. a:active
Note: Yu can user other links name. On your first link, use HOME link.

HOME PAGE
What is the purpose of a websites home page?
The homepage of your site is the first introduction each visitor will have to your business. Before they
make up their mind to become a customer, they'll review your homepage to get an idea of what you
sell, why that matters to them, and how they can benefit from what you have to offer

ABOUT US PAGE

An About Us page is a section on a website that provides information about a


company, organization, or individual . It is an opportunity to tell your brand's story,
share your vision, history, values, and achievements, and introduce team members.
This is where you build trust and credibility with customers.

SERVICES PAGE
A service website is a type of website that's designed to showcase and promote a
specific service or set of services from a business or individual The main purpose of
a service website is to inform potential clients or customers about the services
provided, while highlighting the benefits of those services.
.
CONTACT PAGE
A contact page is a common web page on a website for visitors to contact the
organization or individual providing the website . The page contains one or more of
the following items: an e-mail address. a telephone number. a postal address,
sometimes accompanied with a map showing the location.

2. To create and design your navigation links, use the following CSS properties:
A. text-decoration
B. background-color
C. color
D. font-size
E. font-family

3. Use Internal Stylesheet Stylesheet in your web pages.

4. You can use either element selector, id selector, class selector, universal selector , or
grouping selectors in the CSS styles you will create.

Example:
body{background-color:blue;} – ELEMENT SELECTOR

5. For the background of your links, you can use color or pictures, depending on which you prefer.

A. background-color
-use color name value
B. background –image
-use jpg or any image format.
-use other css background properties to change the layout of your background-image:This are the
following:
- Background-image
- background-repeat
- background-size
- background-position

6. Apply the other CSS properties in your other web pages:

A. CSS TEXT & FONT PROPERTIES


-color
-font-size
-font-family
-text-decoration
-font-style
-font-weight
-text-shadow
-text-indent
-letter-spacing/word spacing

B. BORDER PROPERTIES
border-style
border-color
border-width

7. Add relevant images or pictures that are related to your website. Use the the <img>
tag to create a photo or photo galleries in your web pages. Add images a total of 20
images in your web pages.
Example:

. <img src="ANIME1.jpg" width="200" height="200">

8. For your main web page name as HOME.html.


9. Save the home.html file inside your project folder.
Example:PROJECT FOLDER NAME
DELA CRUZ, JUAN C. - 3RD
10. Save the copy of your project in TLE 8 in your computer and flashdrive or
usb.

REMINDER:

If you are done with your project, submit it earlier and don't wait for the deadline.
Late projects submitted will have a grade of 75 only.

DEADLINE SUBMISSION OF PROJECT – MARCH 25, 2024 (MONDAY)


- up to 12 pm only.

You might also like