1. Polangui General Comprehensive High School
Polangui, Albay
Prepared by:
Mr. Eric M. Marilag
PGCHS ICT – Teacher

2. What is Internet?
• a computer network made up of
thousands of networks worldwide
• It consist of millions of computers
interconnected with one another
via a modem and Transmission
Control Protocol/Internet Protocol
suite, (TCP/IP)

3. What is Internet?
is a global network of computers which
are mostly connected using telephone
lines/satellites for the purpose of sharing
information

4. What is Internet?
• Is also known as Interconnected
Net, Information Highway, or
simply known as NET.
• Is a mechanism to distribute
information and provide
interaction between individuals
and their computers without
regard for geographic location.

5. What is Internet?

6. Uses of Internet
1.Internet is used to communicate
with people.
2.Internet is used to get information.
3.Internet is used for on-line
shopping.
4.Internet is used for entertainment.
5.Internet is used to transact
business.

7. Requirements Needed to
Access the NET
• Is the machine used
to send and receive
electronic documents
via internet.

8. Requirements Needed to
Access the NET
• Is a device that transmit
analog signal and
receives data in digital
signal through
telephone lines. It is
short for Modulator
/Demodulator.

9. Requirements Needed to
Access the NET
Are used to transmit
signals from one
computer to another
with help of modem.

10. Requirements Needed to
Access the NET
Internet Service Provider
– is a company that provides
connection to the Internet.

11. Requirements Needed to
Access the NET
Web Browser
– is a program that is
used to navigate the
internet.

12. HOW THE INTERNET WORKS

13. HOW THE INTERNET WORKS
1. Do a dial – up connection to your
internet Service Provider (ISP.
2. The modems converts the signals
from your computer to signals that
travel over the telephone lines to your
ISP.
3. Open the Web browser and then,
enter a website address in the
address box.

14. HOW THE INTERNET WORKS
4. The Web browser sends the request
to the ISP.
5. The Web server locates the files and
then downloads them to your
computer.
6. The web browser assembles the Web
page on the screen.

15. What is a Web page?
Web page are actually pages of
text with coded messages telling a
browser what to do. If you open a
web page through a word
processor, you will see a lot of
funny looking symbols and codes.
When you view the same page
through your browser, you see text,
colors and images.

17. Different types of Web pages
STATIC WEB PAGE
A web page that is written and then
served to the user as is, with no other
information added to it, all the web
server does is display it. Often these
types of pages will be the basis for an
interactive site, as static pages load
faster, and because they don't have any
changing information in them, you know
how they will be displayed, as there is
less to go wrong in them.

19. Web browser
is a software application used to
locate and display Web pages.
The purpose of a web browser is to
read HTML documents and display
them as web pages. The browser
does not display the HTML tags, but
uses the tags to interpret the content
of the pages.

20. Website
Collection of web pages.
A website can be viewed through
its website address or technically
known as UNIFORM RESOURCE
LOCATOR (URL).

21. What is URL
•Uniform Resource Locator –
is the address of an
object, a document, a file or
a web page on the internet.

22. Parts of URL
World Wide Web Locator
http:www.learnthenet.com/english/start/.htm
Protocol
Domain Name Related Web Pages

23. Parts of URL
http://. (Hypertext transfer protocol)
- Protocol used in the communication
between the browser and the web
server
www.
- Represents by the characters www.
This indicates a page on the world wide
web

24. Parts of URL
Domain Name
- Tells the name of the owner of the site.
- Suffix type extension name that tells
what the site is about.
- Sometimes it has country code that
tells where the website is located.
- Learnthenet – name of the owner of the
site.
- .com – a suffix name that tells a site is a
commercial site.

25. Some Common Suffix Extension
Name.
.com - commercial site
.edu - educational site
.gov - government site
.net - network site
.org - organizational site
.mil - military agency

26. Some of the Country Location
Code
.ph - Philippines
.ca - Canada
.uk - United Kingdom
.au - Australia

27. Parts of URL
Related Web Pages
english/start.htm
• Is a directory or folder connected
to the web that contains a group
of related web pages.

29. Identify the Parts of URL
7
http:www.learnthenet.com/english/start/.htm
8
9 10

31. Hyper
Text
Markup
Language

32. HTML
• The language used to write Web pages
which consists of codes (tags)
embedded in the text.
• It is not a programming language, it is
a markup language.
• Invented in 1990 by Tim Berners – Lee
• Simple ASCII text files.
• File extension name .html or .htm

33. HTML
• Hidden codes that helps us
communicate with others on the
World Wide Web (www).
• The tags tell the built in function in
the web browser how to structure the
text. For instance put text in a bold
font
• An HTML file can be created using a
simple text editor

34. This is what HTML looks like

35. Markup Language
- Combines text and extra
information about the text. The
extra information, for example
about the text’s structure or
presentation, is expressed using
markup, which is intermingled with
the primary text.

36. • Markup Language – is a set of markup tags

37. Basic Tools To setup a Website
Text editor - Page Spinner for
Macintosh
- Notepad for windows
- WordPad.
Web Browser - Internet Navigator
- Mozilla Firefox

38. HTML Basic Structure
HTML
– the first and last tags in a document
should always be the html tags.
These are the tags that a web
browser where the html in your
document begins and ends.
<HTML> </HTML>

39. HTML Basic Structure
HEAD
– the head tags contain
all of the document’s
header information.

40. HTML Basic Structure
TITLE
this container is placed
within the head structure
between the title tags, you
should have the title of your
document.

41. HTML Basic Structure
BODY
– comes after the head structure.
Where the actual document
contents are placed.

42. HTML Document Template
<HTML> - tells the web on the
type of document.
<HEAD> - technical information
about the document is
stated.
<TITLE> - gives the document a
name.
<BODY> - where the actual
document contents are
placed.

43. <HTML>
<HEAD>
<TITLE>Document
Title</TITLE>
</HEAD>
<BODY>
This is for the body…….
</BODY>
</HTML>

44. TAGS
• Are the building blocks of HTML.
• Keywords surrounded by angle
brackets.
• It contains the layout and formatting of
the elements in HTML.
• HTML markup tags are usually called
HTML tags

45. Left angle bracket Right angle bracket
Element
Element - is the coded commands
within HTML.
- tells the browser how to
display the web pages.

46. Parts of HTML Tag
VALUE CLOSING TAG
TAG TEXT

47. Two kinds of HTML tags
Container tag
are paired with a beginning
(or open) and an ending tag.
(/) forward slash is an indicator that
the tag has ended.
<html> opening tag
</html> closing tag

48. Two kinds of HTML tags
Empty tag
can stand alone.
this tag can be encoded even
without the closing tag.
the tag <br> is one that adds a line
break.

49. Tag – NAME is the name of the tag or the
html command.
TAG – NAMEs cannot contain spaces
ATTRIBUTES control the properties of the
tag using the given VALUE and are placed
ONLY inside the starting tag
VALUE is surrounded by quotation marks
Affected Text /Image /Object is displayed
based on the tag and its attributes.

50. An equal sign (=) separates the attributes
from its value.
Each tag has some default value for its
attributes.
A tag can have many attributes and each
attributes can have many values; some
attributes have no value.
Tags usually surround Affected Text / image /
object

51. HTML Text Structure
Headings
–The heading structure
are most commonly used
to set apart document or
section titles.

52. Headings
• Define the format of structure of the
document
>there are six levels of headings in
HTML
<H#> - start of heading
</H#> - end of heading
Where # is a number from 1 to 6
Ex. <h1>Heading</h1>

53. <html>
<head>
<title>This is a sample Heading</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>

54. <Heading>Tag Attributes
Heading tags have attributes and the
important attributes are ALIGN and TITLE
• ALIGN – changes the alignment of the
headings.
Values
• Left (Default Value) aligns the heading to
the left
• Right – aligns the heading to the right.
• Center – aligns the heading to the center.
• Justify – justifies the heading.

55. Example:
<h1 align="center">Align Center</h1>
<h2 align=“right”>Align Right</h2>

56. <BODY>Tag Attributes
- Controls the properties of the document as
a whole.
• TEXT – specifies the color of normal text in
the page.
Sample: <BODY TEXT=“Red”>
• LINK - specifies the color of text with
hyperlink in the page
Sample: <BODY LINK=“Blue”>
• VLINK – specifies the color of text with a
visited hyperlink in the page.
Sample: <BODY VLINK=“#FF0000”>

57. <BODY>Tag Attributes
• ALINK – specifies the color of text with
hyperlink when clicked
Sample: <BODY ALINK=“#FF0000”>
• BGCOLOR – specifies the background color
the page.
Sample: <BODY BGCOLOR=“#0000FF”>
• BACKGROUND – specifies the background
image of he page.
Sample: <BODY
BACKGROUND=“MybackgroundImage.jpg” >

58. Paragraphs
• In HTML you indicate paragraphs with
the <P> and </P> elements.
• Without these elements the document
becomes one long paragraph.

59. HTML Code Browser Display
This is a very short paragraph
<P> This is a very short
to illustrate my point.
paragraph to illustrate my
point.</P> <P>And this is
And this is the second
the second paragraph. </P>
paragraph.
<P> Although this
Although this is written
is written differently
differently with lots of
with lots of carriage returns
carriage returns it still only
it still only displays
displays the paragraphs when
the paragraphs when
you put in the Paragraph Tag.
you put in the Paragraph
Tag.</P>
Like so.
<P> Like so.</P>

60. Paragraph Attributes
• Paragraph alignment can be manipulated
by including either the RIGHT, LEFT, or
CENTER attributes within the <p>
HTML Code Browser Display
<P ALIGN=“left”> This paragraph is
This paragraph is left aligned.
left aligned. </P>
<P ALIGN=“CENTER”> This is a
This is a centered paragraph.
centered paragraph. </P>
<P ALIGN=“RIGHT”> This paragraph
This paragraph is right aligned.
is right aligned. </P>

61. BREAK TAGS
LINE BREAK TAGS <BR>
are used to introduce any line breaks
Tell the browser that this is the end of
the line and start to a new one.
<BR> - place where the line break is to
inserted
Example: First line<BR>

62. NO LINE BREAK TAGS
Used to surround text that will be
displayed in a single line
<NOBR> - Start of no line break tags
</NOBR> - End of no line break tags

63. Adding lists
a) unordered list.
<ul>
<li> the first list item</li>
<li> the second list item</li>
</ul>

64. PHYSICAL TAGS
• Define how text should be
displayed on the browser
• Control the physical characteristic
of the text
• There are 10 physical tags in
HTML.

65. Physical Tags
1. ITALIC - formats the text to italic
<I> - start of the italic
</I> - end of the italic format
Example : <I>Italic</I>
Result : Italic
2. BOLD – formats the text to bold.
<B> - start of the bold format
</B> - end of the bold format
Example : <B>Bold</B>
Result : Bold
3. UNDERLINE – underlines the text
<U> - start of the underline text
</U> - end of the underline text
Example : <U>Underlined</U>
Result : Underlined

66. Physical Tags
4. STRIKETROUGH – strikes through the text.
<STRIKE> - start of the struck text
</STRIKE> - end of the struck text
Example : <STRIKE>Struck</STRIKE>
Result : Struck
5. SUPERSCRIPT – superscript the text
<SUP> - start of the superscripted text
</SUP> - end of the superscripted text
Example : <SUP>Superscripted</SUP>
Result : Superscripted
6. SUBSCRIPT – subscripts the text
<SUB> - start of the subscripted text
</SUB> - end of the subscripted text
Example : <SUB>Subscripted</SUB>
Result : Subscripted

67. Physical Tags
7. TYPEWRITER – uses typewriter font as text font.
<TT> - start of the typewriter font text
<TT> - end of the typewriter font text.
Example :<TT>Typewriter</TT>
Result :Typewriter
8. BIG – uses bigger font size.
<BIG> - start of the bigger text.
</BIG> - end of the bigger text.
Example :<BIG>Tag</BIG>
Result :Tag
9. SMALL – uses small font size.
<SMALL> - start of the smaller text.
</SMALL> - end of the smaller text.
Example :<SMALL>Tag</SMALL>
Result :Tag

68. Physical Tags
10. STRIKETROUGH (alternative) – strikes through
the text.
<S> - start of the struck text.
</S> - end of the struck text
Example : <S>Struck</S>
Result : Struck
PHYSICAL TAGS NESTING
-One tag can be placed inside another.
Example : <B><S>Struck</S></B>
Result : Struck
Example : <I><B><S>Struck</S></B></I>
Result : Struck

69. LOGICAL TAGS
• Indicate the type of content they
enclose
• Do not determine the display of the
text
• There are 9 logical tags in HTML.

70. Logical Tags
1. STRONG - indicates the text to be strong
<STRONG> - start of the strong
</STRONG> - end of the strong
Example : <STRONG> HTML </STRONG>
Result : HTML
2. EMPHASIS – emphasis the text.
<EM> - start of the emphasis
</EM> - end of the emphasis
Example : <EM> HTML </EM>
Result : HTML
3. ABBREVIATION – indicates that the text is an abbreviation.
<ABBR> - start of the abbreviation
</ABBR> - end of the abbreviation
Example : <ABBR>abbreviation </ABBR>
Result : abbreviation

71. Logical Tags
4. CITATION - indicates the text is a citation.
<CITE> - start of the citation
</CITE> - end of the citation
Example : <CITE> Citation </ CITE>
Result : Citation
5. CODE – indicates the text is a code.
<CODE> - start of the code
</CODE> - end of the code
Example : <CODE> Code</CODE>
Result : Code
6. DEFINITION– indicates that the text is a definition.
<DFN> - start of the definition
</DFN> - end of the definition
Example : <DFN>definition</DFN>
Result : definition

72. Logical Tags
7. KEYBOARD - indicates that the text should be like keyboard strokes. .
<KBD> - start of the keyboard strokes
</KBD> - end of the keyboard strokes
Example : <KBD> keyboard </KBD>
Result : keyboard
8. SAMPLE – indicates the text is a sample.
<SAMPLE> - start of the sample
</SAMPLE> - end of the sample
Example : <SAMPLE>Sample</SAMPLE>
Result : Sample
9. PROGRAMMING VARIABLE – indicates that the text is a programming
variable.
<VAR> - start of the programming variable
</VAR> - end of the programming variable
Example : <VAR>Programming Variable</VAR>
Result : Programming Variable

73. HORIZONTAL RULE
HORIZONTAL RULE <HR>
- used to separate blocks of text in a
document.
- puts a straight line across the page .
- no end tag
<HR> - puts a horizontal rule

74. HORIZONTAL RULE ATTRIBUTES
WIDTH – changes the width of the horizontal
rule.
VALUES
In pixel
In Percentage
Ex: <HR WIDTH=“50”> - puts a 50 pixels long
line.
< HR WIDTH=“50%”> - puts a line 50% of the
page’s width.

75. HORIZONTAL RULE ATTRIBUTES
SIZE – changes the sizes of the horizontal rule.
Ex: <HR SIZE=“5”> - puts a 5 pixels THICK line.
ALIGN – changes the alignment of the horizontal
rule
Example: <HR ALIGN=“CENTER”>
COLOR – changes the color of the horizontal rule.
Examples:
<HR COLOR=“RED”>
<HR COLOR=“#FF0000”>

76. FONT TAG
• Changes various properties of text
<FONT> - start of the font specific
text.
</FONT> - end of the font specific
text.

77. FONT ATTRIBUTES
• Allows you to specify font properties.
FACE – changes the font face or font
type
Values:
Name of the font
Example:
<FONT FACE=“Arial”>HTML</FONT>

78. FONT ATTRIBUTES
COLOR – changes the font color.
Values can be:
Color Name – name of the color (Ex: Red, Blue,
etc.) Color Code
– 6 Digits Hexadecimal Color Code.
Ex:
<FONT COLOR=“Blue”>HTML</FONT>
<FONT COLOR=“#FF0000”>HTML</FONT>

79. FONT ATTRIBUTES
SIZE – changes the font size.
Values can be:
Any number between 1 to 7: being the smallest
and 7 being the biggest, (3 is the default value)
Relative values, + and -, for increasing or
decreasing font size relative to the current size.
Ex:
<FONT SIZE=“1”>Smallest text</FONT>
<FONT SIZE=“+4”>larger text</FONT>

80. MARQUEE
<MARQUEE>………..</MARQUEE>
• Scrolling Objects (makes your text, objects
scroll.)
(Text, Graphics, etc.)
Attributes:
Direction = left/right/up/down
Behavior = scroll/slide/alternate
Bgcolor = color or Hexadecimal
Width = n%
Height = n%

81. MARQUEE
<MARQUEE>………..</MARQUEE>
Ex:
<marquee behavior=“slide” direction=“left”
bgcolor=“red”> The Marquee
</marquee>
<marquee behavior=“slide” direction=“left”
bgcolor=“red” width=“50” height=“30”>
The Marquee </marquee>

82. ORDERED LISTS
• It includes letters or numbers that indicate the
sequence
<OL> - Mark the start of list and indention
</OL> - is required to signal end of the list and
cancel indention and sequencing.
<LI> is used for individual list item.
Ex.
<OL>
<LI>List item one
<LI> List item two

83. UNORDERED LISTS
UNNUMBERED LIST or BULLETED LIST.
<UL> ………</UL>
ATTRIBUTE:
TYPES – changes the bullet used by the list.
VALUES:
disc(default) - disc bullet
circle – circle bullet
square - square bullet

84. UNORDERED LISTS
UNNUMBERED LIST or BULLETED LIST.
<UL> ………</UL>
ATTRIBUTE:
TYPES – changes the bullet used by the list.
VALUES:
disc(default) - disc bullet
circle – circle bullet
square - square bullet

85. UNORDERED LISTS
Example:
<UL TYPE=“square”>
<LI> List item one
<LI> List item two
<LI> List item three
</UL>

86. Nested List

87. <IMG>
• Used to display an image file into your web
page.
Attributes:
SRC (source) = “filename”
- Specifies the filename of the image
Align - “left/center/right”
Width – pixels
Height – pixels
HSPACE – pixels
- specifies the horizontal distance of the
text beside the image

88. <IMG>
VSPACE – pixels
- specifies the vertical distance of the text
above or below the image.
Alt = “Text”
- specifies the alternative text to be displayed if
the images was not loaded.
Border
- displays a border around the image.
Ex:
<IMG SRC=“bha.jpg” alt=“bha”>
<IMG SRC=“bha.jpg” width=“100” height=“100”>

89. ANCHOR TAGS
<A> Indicates an anchor for a piece of text or
</A> image that serves as the origin of the
hyperlink.
Example:
<A>Hot Spot</A>
Attributes
HREF (required) – the hyperlinks reference
Value: URL of the destination page.
Example:
<A HREF=“http:www.msn.com”>MSN</A>

90. Anchor Tags
Adding links to other pages
This a link to <a
href="peter.html">Peter's page</a>
turn an image into a hypertext link
<a href=“home.html"><img
src="logo.gif" alt="home page"></a>

91. Tips in making a Website
1. What is your website all
about?
2. Why are you creating your
web site?
3. Who is your audience?
4. Draw a navigation diagram of
your web site.

92. Tables
• Tables are used for information as well as for layout.
• Tables are used to display information in columns and
rows.
There are three t

93. •<EMBED> - tag is used to include
video file in HTML document.
Attributes:
SRC – identifies the URL of the video
file.
HEIGHT & WIDTH – specifies the
dimension in pixel values.
http://www.echoecho.com/htmlforms01.htm

94. LOOP – determines the number of
times the video file should be played
Value:
FALSE – plays the video file once
TRUE – plays the video file infinitely
http://www.echoecho.com/htmlforms01.htm

95. Flash movies (.swf), AVI's (.avi), and
MOV's (.mov) file types are supported by
the embed tag.
.swf files - are the file types created by
Macromedia's Flash
program.
.wmv files - are Microsoft's Window's
Media Video file types.

96. .mov files - are Apple's Quick Time Movie
format.
.mpeg files - set the standard for
compression movie files created by the
Moving Pictures Expert Group.
The listings above are the most commonly
used formats for the internet. ".mpeg" files and
Macromedia's .swf files are the most compact
and widely used among the internet. Stick to
any of the file types above for use with your
web pages.

98. •Used to gather information from visitors
•Used with client –side language or server-side
technology
<form> - start of form
</form> - end of form
http://www.echoecho.com/htmlforms01.htm

99. Tables
• Tables are used for information as well as for layout.
<table border="1">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>
<table border="1" cellpadding="10">
<table border="1" cellpadding="10"
cellspacing="10">
<table border="1" cellpadding="10" width="80%">

100. Create an HTML document containing
PHYSICAL TAG as a title and will look like this.
WORDS
Words have power. Political leaders could
provoke war or peace because of the words they
spoken to people. Words could feed the mind
with ideas that can make people act to certain
things.

101. Match the tags in column A with the effects of
those tags found in column B.
A B
1. <I> </I> A. I. T BYTE
2. <B> </B> B. HTML
C. Bad Habits
3. <SUB> </SUB>
D. Stars
4. <U> </U> HTML
E.
5. <I><S><B> </B></S></I>
F. Love
6. <SUP> </SUP>
G. PGCHS
7. <U><B> </U></B> H. ICT
8. <B><I><SUB> </SUB></I></B> I. Stars
9. <STRIKE> </STRIKE> J. In a Rush
10. <TT> </TT>

102. Activitiy
Create an HTML document containing your name
Basic Tags as a title. Type the following for the body.
Once you know the basic tags you are ready to start
with HTML. Basic tags are the tags that should
always be present in creating an HTML document. It
serves as the foundation in creating a powerful
website.

103. 1. It specifies the web address of a file stored
on a computer connected to the Internet.
2. A program that help you to view or navigate
web pages in the internet.
3. A large network of computers that are
connected to each other by network cables.
4. It is a protocol used in the communication
between the browser and the web server.
5. It tells the name of the owner of the site.
6. It is a directory or folder connected to the web
that contains a group of related web pages.

104. ORDERED LISTS <OL> </OL>
a.k.a. NUMBERED LIST