Introduction to

Internet
What is Internet?
is a global system of networked computers that
allows user to user communication and transfer of
data files from one machine to any other on the
network.

World’s largest computer spanning nearly of the

entire globe.

Topic
Other names of internet
Web
Cloud
Matrix
Cyberspace
I-way
Information Superhighway
Net

Topic
 People have access on internet called
as:
Net surfers
Cyber surfers
Internauts
Netizens

Topic
Who runs the internet?
There is no single authority for
the internet as whole, it is called
Anarchic
means self policing, self
regulation

Topic
Authority of an Internet
Internet Society (ISOC)- to promote a global
information exchange through internet technology
Internet Architecture Board (IAB) - responsible
for the technical management and the direction of
the internet
Internic – an organization that allocates certain
resources like internet addresses and domain
names.

Topic
 Information’s in the
internet comes into many
forms:
Searchable databases
On going private and public discussions
Real time chat sessions
Electronic mail
Business
Products to sell
Governments department with information to share and posts
on net

Topic
FEW THINGS ALLOWS PEOPLE
TO DO IN THE NET
Send email
View websites
Download files such as mp3 and images
Chat with people live online
Post messages on newsgroups and forums
Play multiplayer games online
Watch movies and TV programs
Chat and view on webcams

Topic
WHAT WE CAN DO ON THE
INTERNET?
EMAIL
Find general information about subject
Access information not easily available elsewhere
Discuss your interests with like minded people
Meet people
Learn
Have fun and be entertained
Get latest news
Find free software
Buy things

Topic
WHY DO PEOPLE PUT THINGS ON
WEB?

To advertise a product
To sell product
To take money
To share knowledge with the world

Topic
Internet Service Provider (ISP)
 An ISP is a business or org. that provides
consumer or business to access to the internet and
related services. Most ISP’s were run by phone
companies.
 Bayan Telecommunications
 Globe Telecommunications
 Smart
 Irigatel and etc..
ISP Connections Options
 ISP employs a range of technologies to enable customers to
connect to their network .

Example connections:
 Dial-up
 DSL
 Broadband Wireless Access
 Cable Modem
 FTTH- Fiber To The Home
 DSL-Digital Subscriber Line
 ADSL- Asymmetric Digital Subscriber Line
www (World Wide Web)
 www is a mix of computational concepts for
presenting and linking information dispersed
across the internet in an easy way.
 3 Parts of the WWW.
 Internet-Network
 Hypertext- Machine Readable Text that provides link
to other documents.
 Multimedia- text and Graphics
How could I browse the INTERNET?
 You will be using WEB BROWSERS
“These are client based software that are used to navigate
the web”
Examples are:
 Mozilla Firefox
 Google Chrome
 Internet Explorer
 Opera
 Safari and many more.
 How will I use the WEB
BROWSERS?
 To
use the WEB BROWSERS, you will need a URL or the
Uniform Resource Locator.
 This is an addressing system needed to describe not only the
location of the file of he server, but also it’s type.
Example URL:
http://www.web.com.ph:8080/directory/filename
2 Forms of URL
 DNS-Domain Name Server-Uses NAMES instead
of numbers
Ex: www.facebook.com
 DHCP-Dynamic Host Configuration Protocol-
Uses NUMBERS instead of Names.
Ex: 192.168.2.1
Parts of a URL

Protocol Extension(Domain) Port

Hypertext Transfer Protocol

http://www.facebook.com.ph:8080/directory/f
ilename

Prefix Hostname Country

Domain Name Abbreviation
Different Extensions (Domains)
 .com Commercial Website
 .edu Education Organization
 .gov Government Institution
 .mil Military Organization
 .netNetwork Provider
 .org Non-Profit Organizations
Netiquette
A combination of NET and ETIQUETTE, It refers to an
understood agreement of social and technical guidelines
for internet behavior.
 NET or INTERNET- is a global system of networked
computers that allows user to user communication and transfer
of data files from one machine to any other on the network.

 ETIQUETTE- Rules governing socially acceptable behavior

 SocialConduct – Placing you in a normal human behavior,
Go out , Mingle and Socialize.

 Technical Courtesy- Never attempt to hack or illegally access

other system or destroy a specific computer system for any
reason or whatsoever.
NETIQUETTE- Basic Manners when
Surfing the Web.
TOP 10 NETIQUETTE GUIDELINES
1. Use Computer with courtesy
-It is important to be courteous and
respectful of others online.

“respect each other in the online world”

NETIQUETTE- Basic Manners when
Surfing the Web.
2. Use Emoticons
– With the use of emoticons, writers emotion
could be properly conveyed.
NETIQUETTE- Basic Manners when
Surfing the Web.
3. Be Brief ONLINE – Keep it short and be brief!
-by using common chat abbreviations and acronyms.
Ex:
brb – be right back. LOL- Laughing Out Loud
slr – Sorry late reply
otw – on the way
atm – at the moment
And many more..
NETIQUETTE- Basic Manners when
Surfing the Web.
4. DON’T SHOUT!!

–Writing in all CAPITAL LETTERS is

considered as shouting and is considered as rude.
NETIQUETTE- Basic Manners when
Surfing the Web.

5. Pay attention to Language Issues

-Improper, Inappropriate or bad language
-Language barriers might also be an issue.
 NETIQUETTE- Basic Manners when
Surfing the Web.
6. Think before posting

– It is important to think first before you POST coz’ it might

be charged against you.
NETIQUETTE- Basic Manners when
Surfing the Web.
7. Keep Personal Information Private
-IDENTITY THEFT is a rapid growing concern
these days..
- Divulging to much information could give the
strangers and those with bad intentions valuable
information about you.
NETIQUETTE- Basic Manners when
Surfing the Web.
8. Obey Copyright Laws
- Don’t Steal, Avoid Copy and Paste.

PLAGIARISM- The use or close imitation of the

language and ideas of another writer without
acknowledgement from the author.
 NETIQUETTE- Basic Manners when
Surfing the Web.
9. Help Internet Newbies
- Be helpful and patient with others.

ALWAYS REMEMBER, “Everyone was a newbie Once” 

NETIQUETTE- Basic Manners when
Surfing the Web.
10. BE AWARE OF CYBER BULLYING

 Iftargeted by a cyber bully, DO NOT

RESPOND, Keep all ORIGINAL Messages
with dates and time as possible.

 Ifthe message is threatening or your safety is

concerned, Contact law enforcements.
Some Netiquette for E-mails and
Chatting
 Never send chain letters via E-mails, These are forbidden in
the internet.
 Be careful when addressing mails.
 Use mixed case, Not all upper case..
 Mail should have a subject heading which will reflect the
content of the message.
 Be brief without overly abrupt. when replying to a message,
include enough original material to be understood.
 Always say goodbye or farewell message and wait to see a
farewell from the other person before ending the session.
COMPUTER
and
INTERNET
Safety
Standards
 Taking Care of your PC
1. Don’t keep the computer running overnight.
2. Turn off the monitor, printers and other devices when not in
use.
3. Avoid extreme temperatures.
4. Clean your computer weekly or monthly.
5. Do not block ventilations.
6. Use a reliable Anti-Virus Programs.
7. Avoid smoke and dust to get inside the computer
8. Keep beverages AWAY from the keyboard.
9. Plug the computer into a dedicated power line.
10. Install a built-in disk tool.
 Common Computer Viruses
  FAT Virus
 Worms
 Trojans or Trojan Horses
  File Infectors
 Network Virus
INTERNET SAFETY
 Internet Danger - The Internet is a tool that can be
used for good and evil. The Internet Dangers section
highlights the primary dangers to kids online with
specific focus on the sexual exploitation of children.
 Pornography
 Mislead or false information
 Illegal Downloads
 Potential Dangers in the internet
 Gang Violence
Internet Issues
 Security Issues
- Disclosure of private information that put
oneself at risk.

 Viruses and worms

– UPDATE ANTI-VIRUS REGULARLY.
Criminal Activities
 Hacking- intention to find and identify security
holes in an internet sites.
 Cracking- Opening a secured site and opening it for
the use of others.
 Email Bombing and Spamming- Flooding of mails.
And spamming is sending thousands of mails to
many unknown users.
 Phishing- Creating imitations of existing web pages
and accounts.
FUNDAMENTALS of HTML
HTML- Hyper Text Markup Language
 Isa platform independent that can create or code
(HTML Files) on a computer and then uses a
browser to view the file as a WEB PAGE.

 TIM BERNERS-LEE Developed the HTML.

Web pages are text files containing
HTML
HTML – Hyper Text Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)

Looks (looked?) like:

A Microsoft Word document
The markup tags provide information
about the page content structure
 AnHTML file must have an .htm or .html file extension
 HTML files can be created with text editors:
 NotePad, NotePad ++, PSPad
 Or HTML editors:
 Microsoft FrontPage
 Macromedia Dreamweaver
 Netscape Composer
 Microsoft Word
 Visual Studio
The 3 BASIC PARTS
 Opening Tags
 Elements Content
 Closing Tags
Elements of the HTML
(Container tags)
The <html> Elements…</html>
 <html></html> begin and ends each and every
web page.
 </html>this closes the html.

SYNTAX:
<HTML>
….
</HTML>
The <head> Elements </head>
 Placed before the body elements
 Functions “behind the scenes”
 Element used for java scripting and CSS.

SYNTAX:
<html>
<head> </head>
…
</html>
The <Title> Elements </title>
 Element to title your page.
 Displayed at the top of your web page.

SYNTAX:
<html>
<head> <title> TEXT HERE</title> </head>
…
</html>
The <body> Elements </body>
 The “meat” of the html programs because this is
where all of it was placed (paragraph,
pictures,tables..etc..
SYNTAX:
<html>
<head><title> TEXT HERE</title></head>
<body> TEXT HERE</body>
</html>
 The Container Tags
<html>
<head>
HEAD <title> </title>
</head>
HTML <body>
BODY
</body>

</html>
Body Attributes
HTML Tags possess certain characteristics that wen
declared can enhance the look of the web pages. They are
called as the ATTRIBUTE or PROPERTIES.
This are placed at the opening tags.
BODY ATTRIBUTES
 Background- an attribute that strengthens the
visual impact of the webpage content

Syntax:
<body background=“image.jpg”>

<body background=“URL or Address of the

webpage”>
Background Color- Specify the background color of the page.

Syntax:
<body bgcolor=“blue”>
Name of the Color
<bodybgcolor=“rgb(255,255,255)”>

<body bgcolor=“#FFFFFF”> RGB Value

Hexadecimal Color
Value
 53

First HTML Page

test.html
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Activity
 Create an HTML Document using the diff.
Container tags. Also add up any background image
on your HTML Document.(Downloaded file will
do.)
 The webpage should contain your Personal
Information such as Your Name, Age, Address,
your section, your Motto and your dream Job.
Headings, paragraph, line break,
comments and horizontal rule
Plain HTML Codes and Attributes
Headings
 There are 6 levels of headings and the browsers
generally show a diff. font size for each level.
Use this Tag:
<h1> your text will be here </h1>
<h2> your text will be here </h2>
<h3> your text will be here </h3>
<h4> your text will be here </h4>
<h5> your text will be here </h5>
<h6> your text will be here </h6>
Take Note!
The Smaller the Heading Level Number,
The Larger the print size that will be
displayed on your browser.
You can also add up some attributes
1. Alignment- Specifies the alignment of the text
 Left
 Right
 Center
 Justified
Use this code:
<h1 align=“center”>This is me</h1>
You can also add up some attributes
2. Title - is a text that appears when the mouse
passes over the heading.

Use this code:

<h1 title=“I love you so much”>Crush

Name</h1>
 IF YOU WANT TO USE IT AT THE
SAME TIME
 USE THIS CODE:

<h1 align=“center” title=“bilberry”>Grade9</h1>

Lets try it..

Paragraph
Determine a certain paragraph..
Uses the code:
<p>grade 9 bilberry</p>
ALIGNMENT
 Alignment could also be set.
 Same attributes

Use code:

<p align=“center”> text here

</p>
LINE BREAK
<br>
 (new line)
 Very important
 Uses the command <br> to insert a line break.
 Subsequent text will appear one line down on the
left margin.
 TAG FORMAT: <br>
 To be added at the end of each line.
HORIZONTAL RULE
<hr>
The <hr> tag places a shadowed line across the width of
the web browser’s window.
 <hr> tag does not have a closing tag.

Attributes Definition Values

Align Defines the alignment Left, Right and Center
<hr align=“center”>

Size Assigns the size, in pixels Pixels (1……….10)

<hr size=“3”> of the line

Width Defines the width or the 1% to 100%

<hr width=“30%> span of the line

Color Defines the color of the Color name or hex codes

<hr color=“red”> line
Can I apply all the attributes in one
code/opening tag?
 yes.! Just use this code:

<hr align=“center” size=“3” width=“70% “

color=“blue”>
Activity #2 (30 points)

Identify the codes used at the webpage below. Use a 1 whole sheet of
paper.
Text and Image
formatting
&nbsp
&nbsp; is a non breaking space, which represents an
empty space where no line break occurs.
If you will use this.. You could add up as many
spaces that you want.
Use the code:

&nbsp -Do not add <> on the code..

 Text Formatting
 Text formatting tags modify the text between the opening tag and
the closing tag
 Ex. <b>Hello</b> makes “Hello” bold

<b></b> bold
<i></i> italicized
<u></u> underlined
 Samplesuperscript
 Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<strike></strike> strikethrough

70
Nesting the Formatting tag
 Tocombine effects of one type of tag with another,
simply enclose the container tags in another
container tags

<i><strong>italic and strong</strong></i>

 Keep in mind that tags should be consistent on

its structure and properly arranged.
FONT TAGS
 Font Face – Defines the font to be used.
Code:
<font face=“tahoma”>text here</font>

the font face that you will use are those fonts that are
installed at your computer.
 Font Color- Defines the color of the font
Code:
<font color=“red””>text here</font>

 Font Size – Defines the size of the font (Range:1-7)

1 is the smallest, 3 is the normal font size and 7 is the largest.
Code:
<font size=“7”>Hello World!</font>
 Could I use the font attribute all at the
same time?
 Yeah! By adding up all the attributes.

Code:

<font face=“jokerman” size=“4” color=“blue”>hello world!</font>

Working with images
RELATIVE PATH
"Relative path" means the file path to where the image is located
"relative" to the HTML page. In other words you determine the
path to the image with the HTML page as the starting point. Using
our example folder structure mentioned above we would modify
our src attribute so that our <img> tag looked like this:

 <img src="../MyImages/flower.jpg" alt="Yellow Flower"

width="125" height="125">

 The "../" tells the browser to go up one folder from where the
HTML page is located. Then it goes down the folder structure
into the "MyImages" folder where our image file is located. If
you need to go up two folders then use "../../" and so on.
ABSOLUTE PATH
 Absolute paths are a different than Relative paths in
that it doesn't matter where the image files are located
relative to your web pages. This is because you tell the
browser exactly where the file is on.
 To use the absolute path in your HTML page you
would change your src attribute in your <img> tag to
look like this:
<img src="C:\Users\MichaelB\Pictures\yellow.jpg"
alt="Yellow Flower" width="125" height="125">
IMAGE tags and attributes
 Image tags do not have a closing tags.
Uses the code:
Source Width Height
<img src=“picture.jpg” width=150 height=100
align=“center” alt=“Picture”>
Alignment Alternate text- Text to display if your image
doesn’t load
Supported Images
(Supported image formats)

 JPEG (Joint Photographic Expert Group)

 GIF(Graphic Interchange Format)
 PNG(Portable Network Graphics)
 BMP(Bitmap Image)
MY ADVICE!
Use
Pictures
Assignment
Look for a poem or your favorite song, Create an
html document using the poem or song. Create it’s
code and use the diff. codes learned.
Your assignment will be encoded ON MONDAY AT
THE LABORATORY as your activity.

Be creative..
Can't Get You Out Of My Head
Once again I write to you
The sun is shining the sky is blue
And all I do is sit and think.....
Only about you without a blink
The days pass and the nights yearn
From all that has happened I wish I
could learn
That life isn't always what you desire
It leaves you lost in flames of fire
You see your day and see it through
Knowing what I'm writing is all so
true
You ignore the meaning of all of this
Thinking that I'm being childish
I've tried to ignore I've tried to forget
But all I see is the first time we met
I don't know why this happened to me
Maybe it's a dream, pinch me and see
All I request is a closing chapter
Meet me for 5 don't let me wonder
All I want is for you to reflect on
Whether I lie and this is for fun
Hopefully you'll find the answer is no
That this for me isn't a show
Don't forget the moments we had
The day you left I was sad
Unleash your Creativity

Activity
Submit FIRST your assignment
Create an HTML Document containing
your PERSONAL INFORMATION (Just
Edit your Previous HTML File) add in
your Picture on any part of the page you
want, or you can add up any picture that
you want, Add up a poem or a song. (You
can use the internet ) but most
importantly, MAKE YOUR PAGE
BEAUTIFUL and Be Creative.