KOM 3404

CHAPTER 5
INTERNET
HTML Programming
Language
Introduction & definition
History
Introduction to HTML
HTML Editor
Web Page Development
Introduction
What is the Internet ?
 The largest network of networks in the world
 Uses TCP/IP protocols and packet switching
 Runs on any communications substrate
Introduction
Also called the Net
One huge gobal interconnected networks that comprised
millions of computers
A world-wide collection of networks that links millions of
business, government agencies, educational institutions
and individual
Internet services widely used-World Wide Web & e-mail
Introduction
A technology to link LAN network to a bigger network
Every computer in the network can directly share data and
information with other computers
Internet Service Provider (ISP) are responsible to provide
internal services:
 Examples: Jaring, MIMOS, TMNet, Telekom, Maxis.net,
Time Telekom
Introduction
Choosing Your Internet Access Device & Physical
Connection: The Quest for Broadband
 Bandwidth: an expression of how much data can be sent
through a communications channel in a given amount of
time
 Baseband: allows only one signal at a time
 Broadband: several signals can be sent at once
Introduction
Download-to transmit data from a remote computer to a
local computer
Upload-to transmit data from a local computer to a remote
computer
Introduction
“Galactic” network
 A network that is connected globally where each
computers are able to retrieve data directly and share
information
 Every computer on the internet has an IP address (similar
to a telephone number) and it is able to exchange data
directly with other computers by “dialing” the
computer’s address
 The internet uses packet switching concept where data
sent are divided into smaller units known as packets
 Each unit of packet has a number and destination address
Introduction
Interoperability
 The Internet allows every computer in a network to
operate even though each remote computers are of
different brands and models or in a cross-platform
network
 For example, a user can contact other computers like
MAC, Windows PC, UNIX Machine and Mainframe using
MAC
 Telnet is an example of an Internet service where a user
can access a remote computer in a network after keying
in login and password
Introduction
How to connect to Internet
 All computers have a unique Internet Protocol (IP)
address
 All computers use TCP/IP protocol to communicate
 Requires communication device like modem, ISDN
adapter, Ethernet card, telephone line
Introduction TCP/IP
TCP/IP
 Transmission Control Protocol/ Internet Protocol (TCP)- a
combined set of protocols that tells computers how to
exchange information over the Internet
 TCP monitors and ensures correct transfer of data
 IP receives the data from TCP, breaks it up into packets,
and ships it off to a network within the Internet
Introduction TCP/IP
Each internet services require different protocols
Examples like FTP and HTTP sit on top of TCP/IP
 FTP (File Transfer Protocol) accessed using FTP browser
or DOS prompt
 HTTP (Hypertext Transfer Protocol) accessed using Web
Browser
 POP3 and SMTP accessed using Mail Browser
Introduction Access to
Internet
Role of ISP
 Access is provided by the Internet Service Provider (ISP)
i.e. Jaring, TMNet
 ISP provides a back bone to the network-either:
 PSTN (Public Switch Telephone Netwotk)
 ISDN (Integrated Services Digital Network) or
 SONET (Synchronized Optical Network)
 ISP also provide domain name registration for each
organization
Introduction Access to Internet
Domain Names represent IP address i.e.
 jaring.my=192.228.20
Registration hierarchy
 MyNIC InterNIC NIC

Domain categories
 *gov (Government Agencies)
 *edu (Educational Institutions)
 *org (Non-Profit Organizations)
 *com.my (Malaysian Businesses) and
 *net (ISP Networks)
Introduction Access to
Internet
Communication Link
 Shell Access
 Usually by free shell account provides used for text-
based email, IRC
 Modem and phone line  temporary IP
 Computer providers that connect to the Internet (not
directly connect to internet)
Dial up point to point (PPP)
 Modem, phone line, ISDN adapter  temporary IP
 Computer  Internet
Introduction Access to
Internet
Cable/ Satellites
 Dial-up with modem and phone line  temporary IP
 Faster transmission rate
Leased Line
 Modem and dedicated line  fixed IP
 Usually to host Internet/ Web server
 Support Extranet ( external internet ).i.e. Sony Malaysia
and Sony Japan
History
1962
 Started from Licklider’s “Galactic Network” idea that
introduced the concept of Packet Switching. RAND researchers
concluded that Packet Switching was the best concept
1968
 Lawrence G Roberts from DARPA formulated the specifications
for Advanced Research Agency Network (ARPANET)
1969
 ARPANET connected 4 computers in California and Utah,
connecting university and research center with the
Department of Defence (DoD)-USA
History
1973
 ARPANET became an international network
1981
 ARPANET connected 213 computers
1984
 Total computers connected to ARPANET reached 1000
1987
 Total computers connected to ARPANET reached 10, 000
History
Packet Switching
 In 1962, Galactic Network introduced the concept of
packet-switching, a new technology to transfer
information between 2 distant computers
 Packet-switching technology will break each message/
data into smaller unit called packets for speedy and
guaranteed delivery
 Each packet carries a unique identification number and
the destination address
History-ARPANET
ARPANET-(ADVANCED RESEARCH PROJECTS
AGENCY NETWORK)
 In 1968, L.G.Roberts from DARPA institute published a
specification for Advanced Research Agency Network
(ARPANET)
 In 1969, ARPANET successfully connected 4 research
computers in California & Utah
 E-mail services was introduced in 1972-people exchange
text messages across a long distance
 In 1973, ARPANET become international network
History-ARPANET
By 1981, ARPANET has 213 inter-connected computers
called the Internet
In 1982, ARPANET was taken by DARPA and given to NSF
(National Science Foundation)
In 1983, the Internet Protocol (TCP/ IP) was introduced by
Kahn & Cerf
By 1984, the network has grown to 1, 000 computers and
increased to 10, 000 in the following 3 years
History-WWW
World Wide Web (WWW)
 In 1989, a researcher named Tim Berners-Lee proposed
the idea WWW while working at CERN (a physics
laboratory in Europe)
 In 1993, a group of professors and students at the
University of ILLONOIS NATIONAL CENTRE FOR
SUPERCOMPUTING APPLICATIONS (NCSA) release
mosaic- the first graphically based web browser
Introduction to HTML
HTML
 HyperText Markup Language
 Is the major language of the Internet’s World Wide Web
 Ability to bring together text, pictures, sounds, and links
 HTML Version 4.0 – plus some additional features that
have been widely and consistently implemented in
browsers
Introduction to HTML
Hypertext <link rel=“stylesheet”
 Active text href=“style.css”
 Link <html> <head>
 Clicking causes an action <title>

Markup Language </title><head>

 Tags indicate formatting and <body><h3>
document structure </h3><table>
 Source is processed by a
program that understands
the tags and formats the <tr><th>
page </th><tr><td>

</td> </table>
<form>…
HTML Editor
HTML documents are plain-text (also known as ASCII)
files that can be created using any text editor.
Popular editor
 Netscape Composer
 Microsoft Frontpage
 Microsoft Visual InterDev
 HomeSite
 HotDog
 Web Publisher
 Dreamweaver
 Other notepad, word
Web Page Development
Preparing a web page
 Writing vehicle
 Programming in HTML
 Authoring software
 Browser
 Test the code locally
 Test the code on the server
 Server
 Test links to other sites
 Store your published site
Web Page Development
HTML document – tags
 HTML is composed of tags
 Tags – tells browser how to display the information
provided
 HTML tags are always enclosed in angle-brackets
 (< > ) and are case-insensitive
 <tag> … </tag>
 e.g., <H1> and </H1>
 Generally used in pairs
 Open tag
 Closing tag – same tag with / in front
Web Page Development
<HTML> … </ HTML>
 Beginning and end of every HTML document

<HEAD> … </HEAD>
 Contains information about the document including the title that is to
appear in the title bar

<BODY> … </BODY>
 All content for the page is placed between these tags

<!-- … -- >
 Comment tags
Web Page Development
HTML document – basic tags
 <HTML>
 <HEAD>
 </HEAD>

 <BODY>
 </BODY>
 </HTML>

 If you view this from the browser, you will a blank page
Web Page Development
Each document consists of head and body text
The head contains the title, and the body contains the
actual text that is made up of paragraphs, lists, and other
elements
Web Page Development
example
<HTML>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn<H1>
<P>Welcome to the world of HTML. This is the first paragraph. While short
it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
Web Page Development
HTML document – heading
◦ HTML has six levels of headings, numbered 1 through 6,
with 1 being the largest
Headings are typically displayed in larger and/ or bolder
fonts than normal body text
The syntax of the heading element is:
◦ <Hy> Text of heading < /Hy>
◦ Where y is a number between 1 and 6 specifying the
level of the heading
Web Page Development
HTML document – heading tags

◦ <H1> … </H1> Largest heading

◦ <H2> … </H2>
◦ <H3> … </H3>
◦ <H4> … </H4>
◦ <H5> … </H5>
◦ <H6> … </H6> Smallest heading
Web Page Development
HTML document – body
 Background color/ graphics
 Attributes of <BODY>
 BGCOLOR=“code”
 specify color for background of the screen
 BACKGROUND=“path/ file”
 tiles the graphic in the file to fit the screen

 <BODY BGCOLOR=“green”
 <BODY BGCOLOR=“#00F00”>
 <BODY BGCOLOR=“flower.jpg”>
Web Page Development
HTML Document – list
 HTML supports unnumbered, numbered, and definition
lists

Unnumbered Lists
 <UL> Output
 <LI> apples •apples
 <LI> bananas •bananas
 <LI> grapefruit •grapefruit
 </UL>
Web Page Development
Numbered List Output
 <OL> •1. oranges
 <LI> oranges •2. peaches
 <LI> peaches •3. grapes
 <LI> grapes
 </OL>

Find – Definition List & Nested List

 Web Page Development
HTML Document – text formatted
 <BR> - tag break same as enter/ return
 <B> … < /B> - bold text
 <I> … </I> - italic text
 <U> … </U> - underline
 <PRE> … </PRE> - generate text in a fixed-width font
 <BLOCKQUOTE> … </BLOCKQUOTE>
 Tag to include lengthy quotations in a separate block on the
screen
Web Page Development
HTML Document – linking
 Hyperlink – browser higlights the identified text or image
with color and/ or underlines to indicate that it is a
hypertext link
 Relative linking – the path to the linked file relative to
the location of the current file
 <A HREF= “page1.html”>Click Page 1 </A>
 Absolute linking – linking to documents that are not
directly related
 <AHREF=“http://www.fsktm.upm.edu.my”>FSKTM</A>
Web Page Development
HTML Document – mailto
 Send electronic mail to a specific person or mail alias by
including the mailto attribute in a hyperlink
 A href=mailto:fazlida@fsktm.upm.edu.my> Mail to
Dr.Fazlida </A>
 Web Page Development
HTML Document – line break tag

<BR>
Line Break – Forces a new line

<br>Learning HTML <br>is<BR>fun!</P>

Web Page Development
HTML Document – image
 Format such as *.gif*, *.jpeg*, *jpg, *.xbm, *png.
 <IMG SRC= “picture1.gif”>
 <IMG SRC=“picture1.gif HEIGHT=100 WIDTH=65>
 <A HREF=“page1.html”><IMG
 SRC=“picture1.gif”</A>
Web Page Development
GIF
 Graphics Interchange Format
 Use for graphics
JPG
 Joint Photographic Experts Group
 Use for photographs
PNG
 Portable Network Graphics
 Expected to replace GIF
Web Page Development
Tables
 <TABLE> … </TABLE>
 Define table in HTML
 <TR> … </TR>
 Specifies a table row within a table
 <TH> … <TH>
 Defines a table header cell
 <TD> … </TD>
 Defines a table data cell
Web Page Development
<TABLE BORDER>
Table – example
<TR>

<TD>Country</TD>
Output :
<TD>Capital</TD>

</TR> Country Capital

<TD>Malaysia</TD> Malaysia Kuala Lumpur
<TD>Kuala Lumpur</TD>
China Beijing
</TR>

<TR>

<TD>China</TD>

<TD>Beijing</TD>

</TR>

</TABLE>
Web Page Development
Tables – more properties
 BORDER = X
 Add borders to the table
 WIDTH = x, HEIGHT = ,
 Control the size of the table
 ALIGN = left or center or right
 Align a table / data to the left, center or right
 CELLSPACING – the width of the spacing between cell and along
edges of cells
 CELLPADDING – amount of space inserted btw cell content and the
inner edge of a cell
Web Page Development
Themes
 Unified set of design elements and color schemes that
you can apply to a page to give it a consistent and
attractive appearance
 Background
 Fonts
 Banners
 Bullets
 Link buttons
Web Page Development
Using a theme is a quick and easy way to make sure your
Web pages are visually consistent and appealing.
Microsoft FrontPage includes many complete themes that
you can use right away
You can also change those themes or create new ones
Web Page Development
Themes - e.g.