This document discusses creating a personal web page and home page. It defines a personal page as something an individual creates about themselves or others to share thoughts, interests, and information with others. The home page is described as the first page displayed when visiting a website, and often includes a welcome message, logo, and navigation links. The document provides instructions on adding headings, paragraphs, line breaks, and lists to create a basic web page structure.

1. My First Web Page
Information and Communication Technology - 8

2. Objectives
 Define a Personal Page
 Define Home Page
 Apply the different levels of headings
 Write web contents in paragraphs and use the line
break
 Add lists and create simple web page.

4. What is a Personal Web Page?
 Something that someone creates about themselves or for
others.
 It can be about you or for somebody else importantly, it
should be personal.
 A personal webpage should show your thoughts, ideas,
interest, hobbies, friends and family that you strongly
want to inform others.
Examples:
 Online Diaries
 Family Pets
 Self-Written books or poems
 Favorite topics; health, politics, music and arts etc.

5. What is Home Page?
 Serves as the entry point in your website.
 It is the first page that is displayed on your browser when
you type in the website address.
 Home page varies depending on the purpose of the website.
 Here are few things you may include on your home page:
 A welcome message or an introduction
 A logo – for the website branding
 The site navigation bar – a link to other pages on your website
 Latest updates and modification of your site.

6. Creating your Headings
 A heading is used to give emphasis to certain topic title.
 It will serve as the title for a section of your documents.
 Headings are marked by the <h1> tag and closed by the </h1> tag.
 This tag has six levels, the lower-numbered headings stand for more important
headings with a larger font size, down to less important, with smaller size.
The Six Levels of Heading tags:
<h1> </h1> - Largest font size
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> - Smallest font size

7. The hgroup Element
 The <hgroup> element is one of the new elements defined in HTML5.
It is used to group headings with their associated subheadings (h1-h6
tags).

8. Creating Paragraphs
 Writers separate their thoughts and arguments into sequences of
paragraphs. The <p> element is used to mark a block of text into a
paragraph.
Syntax : <p> contents. . . . . </p>
Applying Line Breaks
 This tag forces the browser to have a single break. It just like pressing
the Enter key to create a blank space or start a new line .
 This tag s stand alone tag and doesn’t require a closing tag.
Syntax: <br>

9. Adding List
 A list is a series of names, words, or other items written, printed or
imagined one after the other.
 You can create several types of list in HTML, including a numbered list,
bulleted list and definition list.
 The table below shows the different types of list in HTML:
Tags Description
<ol> Defines an ordered list of items. (This is for a
numbered list)
<ul> Defines an unordered list of items. (This is
bulleted list)
<li> It is used for specifying a list item. It can be used
on both numbered and bulleted list.
<dl> It is used for declaring a definition list.

10. Sample:

11. HTML <dl> Tag
 The <dl> tag defines a description list.
 The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd>(describes each term/name).

12. Note:
 The list element is also used in page navigation to link other contents or
pages within the website.
 A navigator bar is a list of links. This is why the most semantic way of
marking up a list is to use a list element.
 It also has a great advantage when it comes to providing structure.

13. Hands-On Exercises
 Using a Notepad do the Hands-On Exercises in the lesson.
From 6.1 to 6.5.
 Follow the necessary instructions and use all the tags we have
discussed.
 Open the html document using any available browser on the
computer.

14. Assignment (Graded)
Personal Website
 Research on the World Wide Web any personal website
and try to analyze and evaluate how the over-all
appearance of it.
 List down 3 good features and 3 features that needs to be
improve.
 Try to write a minimum of 5 sentences on why Personal
Website became necessary on this modern time.
 Printed on a short bond paper, Font: Calibri Size: 12 (One
Page Only)
 Don’t forget to include the link of the website or a
screenshot as well.
 Submission next meeting.

15. Category 5 4 3 2 1
Quality of
Information
Information
clearly relates to
the main topic.
Three sources
were documented
Information
clearly relates to
the main topic.
Two sources were
documented
Information
somehow relates
to the main topic.
One source were
documented
Information
somehow relates
to the main topic.
No sources were
documented
Information
doesn’t relates to
the main topic. No
sources were
documented
Sources and
Format
All sources
(information and
graphics) are
accurately
documented in
the desired
format.
All sources
(information and
graphics) are
accurately
documented, but
some are in the
desired format.
All sources
(information and
graphics) are
somehow
documented, but
few are in the
desired format.
All sources
(information and
graphics) are
somehow
documented,
many are not in
the desired
format.
All sources
(information and
graphics) are not
properly
documented,
many are not in
the desired
format.
Conclusion
Reached
The conclusion is
strong and shows
deep
understanding on
the given topic.
Main Idea stands
out and is
supported by
detailed
information.
The conclusion is
strong and shows
understanding on
the given topic.
Main Idea is clear
but the supporting
information is
general.
The conclusion
shows
understanding on
the given topic.
Main Idea is
somewhat clear
and needs
supporting
information.
The conclusion
shows somewhat
understanding on
the given topic.
Main Idea is
confusing and
needs supporting
information.
The conclusion
shows somewhat
understanding on
the given topic.
Main Idea is not
clear and needs
supporting
information.