68
http://faizar.onestop.net/ http://faizar.ning.com/ [email protected] Internet & Hyperlinks Internet & Hyperlinks WEB WEB Oleh Oleh Ahmad Faizar Jaafar Ahmad Faizar Jaafar Unit Web & Digital Komponen Unit Web & Digital Komponen Jabatan Pengurusan Sistem & Teknologi Maklumat Jabatan Pengurusan Sistem & Teknologi Maklumat (JPSTM) PTAR (JPSTM) PTAR http://faizar.onestop.net http://faizar.multiply.com http://faizar.ning.com

Hyperlink

Embed Size (px)

DESCRIPTION

Bengkel Metadata, RDA & Hyperlink PUiTM 2010 Anjuran : BPBPT PTAR Tarikh : 6 April 2010 Tempat : Pusat IT PTAR 1 Penceramah : En. Ahmad Faizar Jawatan: Pustakawan

Citation preview

Page 1: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Internet & Hyperlinks Internet & Hyperlinks WEBWEB

OlehOlehAhmad Faizar JaafarAhmad Faizar Jaafar

Unit Web & Digital KomponenUnit Web & Digital KomponenJabatan Pengurusan Sistem & Teknologi Maklumat Jabatan Pengurusan Sistem & Teknologi Maklumat

(JPSTM) PTAR(JPSTM) PTARhttp://faizar.onestop.net

http://faizar.multiply.com http://faizar.ning.com

Page 2: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

What is What is Internet ?Internet ?The Internet (also known simply as the Net) is the worldwide, publicly accessible system of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP).

It consists of millions of smaller domestic, academic, business, and government networks, which together carry various information and services, such as electronic mail, online chat, and the interlinked Web pages and other documents of the World Wide Web.

Contrary to some common usage, the Internet and the World Wide Web(WWW) are not synonymous: the INTERNET is a collection of interconnected computer networks, linked by copper wires, fiber-optic cables, wireless connections etc.; the WEB(WWW) is a collection of interconnected documents, linked by hyperlinks and URLs, and is accessible using the Internet. The Internet also provides many other services including e-mail, file sharing

Page 3: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Internet HistoryInternet History

• • 19571957- The USSR launches Sputnik, the first artificial - The USSR launches Sputnik, the first artificial earth satellite. In response,the United States forms earth satellite. In response,the United States forms the the Advanced Research Projects Agency (ARPA) within the within the Department of Defense (DoD) to establish to establish US lead in science and technology applicable to the US lead in science and technology applicable to the military.military.

• • ARPANET, used Network Control Protocol (NCP) as its ARPANET, used Network Control Protocol (NCP) as its transmission protocol from 1969 to 1982, when NCP transmission protocol from 1969 to 1982, when NCP was replaced with the now widespread TCP-IP was replaced with the now widespread TCP-IP (Transmission Control Protocol - Internet Protocol).(Transmission Control Protocol - Internet Protocol).

• • 1982:1982: Internet technology protocols are developed, Internet technology protocols are developed, commonly known as TCP/IP (Transmission Control commonly known as TCP/IP (Transmission Control Protocol and Internet Protocol). This leads to one of Protocol and Internet Protocol). This leads to one of the first definitions of an "internet" being a the first definitions of an "internet" being a connected set of networks. connected set of networks.

Page 5: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Overview Of InternetOverview Of Internet

•Classful IP AddressingClassful IP Addressing•Subnetting a NetworkSubnetting a Network •Planning IP AddressingPlanning IP Addressing •Assigning TCP/IP AddressesAssigning TCP/IP Addresses

Page 6: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Classful IP AddressingClassful IP Addressing

• IP AddressesIP Addresses • IP Address ClassesIP Address Classes

Page 7: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Network ConnectivityNetwork Connectivity

Bindings

Bindings

Network Adapter (0)Network Adapter (0)

ProtocolsProtocols

ServicesServicesClient for MicrosoftClient for MicrosoftNetworksNetworks

Client for MicrosoftClient for MicrosoftNetworksNetworks

Gateway (and Client) Gateway (and Client) Services for NetWareServices for NetWare Gateway (and Client) Gateway (and Client) Services for NetWareServices for NetWare

TCP/IPTCP/IPTCP/IPTCP/IP NWLinkNWLinkNWLinkNWLink

Windows Network

Windows Network

Novell NetWareNovell NetWareNetworkNetwork

Novell NetWareNovell NetWareNetworkNetwork

Windows client

Page 8: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

IP AddressesIP Addresses

192.168.1.0192.168.1.0 192.168.3.0192.168.3.0

192.168.1.100192.168.1.100 192.168.2.101192.168.2.101

192.168.2.100192.168.2.100 192.168.3.100192.168.3.100

192.168.2.0192.168.2.0

192.168.1.100192.168.1.100192.168.1.100192.168.1.100IPAddress

Host IDHost ID

Network IDNetwork ID

Page 9: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

IP Address ClassesIP Address Classes

ww xx yy zz

Class A Network IDNetwork IDNetwork IDNetwork ID Host IDHost ID

Class B Network IDNetwork IDNetwork IDNetwork ID Host IDHost ID

Class C Network IDNetwork IDNetwork IDNetwork ID Host IDHost ID

Page 10: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

•Subnetting a NetworkSubnetting a Network

• SubnetsSubnets

• Subnet MasksSubnet Masks

• Determining Local and Remote HostsDetermining Local and Remote Hosts

Page 11: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

SubnetsSubnets

RouterRouter

Subnet 1 Subnet 2

1111 2222

HubHub HubHub

Page 12: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Subnet MasksSubnet Masks

IPAddress

Host IDNetwork ID

192.168.192.168.192.168.192.168. 2.200

SubnetMask 255.255.255.255.255.255.255.255. 0.00.0

192.168.

IPAddress 10.10.10.10. 50.100.20050.100.200

SubnetMask 255.255.255.255. 0.0.00.0.0

NetworkID 10.10.10.10. 0.0.00.0.0

IPAddress 10.50.10.50.10.50.10.50. 100.200100.200

SubnetMask 255.255.255.255.255.255.255.255. 0.00.0

NetworkID 10.50.10.50.10.50.10.50. 0.00.0

IPAddress 10.50.100.10.50.100.10.50.100.10.50.100. 200200

SubnetMask 255.255.255.255.255.255.255.255.255.255.255.255. 00

NetworkID 10.50.100.10.50.100.10.50.100.10.50.100. 00

Page 13: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Lab A: Determining Class Addresses and Subnet Masks

Page 14: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Planning IP AddressingPlanning IP Addressing

•Addressing GuidelinesAddressing Guidelines •Assigning Network IDsAssigning Network IDs •Assigning Host IDsAssigning Host IDs

Page 15: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Addressing GuidelinesAddressing Guidelines

The Host ID Cannot Be All Zeros The Host ID Cannot Be All Zeros

The Host ID Cannot Be All 255s The Host ID Cannot Be All 255s

The First Number in the Network ID Cannot Be 127 The First Number in the Network ID Cannot Be 127

The Host ID Must Be Unique to the Local Network ID The Host ID Must Be Unique to the Local Network ID

Page 16: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Assigning Network IDsAssigning Network IDs

1111 2222

3333

RouterRouter

10.0.0.010.0.0.0 192.168.2.0192.168.2.0 172.16.0.0172.16.0.0

Page 17: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

1111 2222

RouterRouter

172.16. 0.12172.16. 0.12

172.16. 0.11172.16. 0.11

172.16. 0.10172.16. 0.10

10.0.0.1210.0.0.12

10.0.0.1110.0.0.11

10.0.0.1010.0.0.10

192.168.2.11192.168.2.11

192.168.2.10192.168.2.10

192.168.2.1192.168.2.1

10.0.0.110.0.0.1 172.16. 0.1172.16. 0.1

3333

10.0.0.010.0.0.0 192.168.2.0192.168.2.0 172.16.0.0172.16.0.0

Assigning Network IDsAssigning Network IDs

Page 18: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Lab B: Identifying Valid IP Addresses

Page 19: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Assigning TCP/IP AddressesAssigning TCP/IP Addresses

•Static IP AddressingStatic IP Addressing •Automatic IP AddressingAutomatic IP Addressing•Viewing TCP/IP ConfigurationViewing TCP/IP Configuration•Viewing TCP/IP ConfigurationViewing TCP/IP Configuration Using Using

IpconfigIpconfig

Page 20: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Viewing TCP/IP ConfigurationViewing TCP/IP ConfigurationInternet Protocol (TCP/IP) Properties

General

You can get IP settings assigned automatically if your network supports this capability. Otherwise, you need to ask your network administrator for the appropriate IP settings.

Obtain an IP address automatically

Use the following IP address:

IP address:

Use the following DNS server addresses:

Preferred DNS server:

Obtain DNS server address automatically

Advanced...

Alternate DNS server:

192 . 168 . 1 . 200

192. 168 . 1 . 1

255 . 255 . 255. 0Subnet mask :

Default gateway:

OK Cancel

Page 21: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Static IP AddressingStatic IP AddressingInternet Protocol (TCP/IP) Properties

General

You can get IP settings assigned automatically if your network supports this capability. Otherwise, you need to ask your network administrator for the appropriate IP settings.

Obtain an IP address automatically

Use the following IP address:

IP address:

Use the following DNS server addresses:

Preferred DNS server:

Obtain DNS server address automatically

Advanced...

Alternate DNS server:

192 . 168 . 1 . 200

192. 168 . 1 . 1

255 . 255 . 255. 0Subnet mask :

Default gateway:

OK Cancel

Page 22: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Automatic IP AddressingAutomatic IP AddressingInternet Protocol (TCP/IP) Properties

General

You can get IP settings assigned automatically if your network supports this capability. Otherwise, you need to ask your network administrator for the appropriate IP settings.

Obtain an IP address automatically

Use the following IP address:

IP address:

Use the following DNS server addresses:

Preferred DNS server:

Obtain DNS server address automatically

Advanced...

Alternate DNS server:

Subnet mask :

Default gateway:

OK Cancel

Page 23: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Configuring TCP/IP to Obtain an Configuring TCP/IP to Obtain an IP Address AutomaticallyIP Address Automatically

Assign IP address Assign IP address of 192.168.120.133 of 192.168.120.133

Assign IP address Assign IP address of 192.168.120.133 of 192.168.120.133

DHCP Client DHCP Server

Request for IP addressRequest for IP address Request for IP addressRequest for IP address

DHCP Automatically Assigns IP Addresses and DHCP Automatically Assigns IP Addresses and Other Configuration Information to DHCP ClientsOther Configuration Information to DHCP Clients

Automatic Private IP Addressing Enables the Automatic Private IP Addressing Enables the Configuration of IP Addresses Without Using Configuration of IP Addresses Without Using Static IP Addresses or Installing the DHCP Server Static IP Addresses or Installing the DHCP Server

Service.Service.

Automatic Private Automatic Private IP AddressingIP Addressing

Generates IP AddressGenerates IP Address

Automatic Private Automatic Private IP AddressingIP Addressing

Generates IP AddressGenerates IP Address

If No IP Address Returned

If No IP Address Returned

OR

Page 24: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Viewing TCP/IP Configuration Viewing TCP/IP Configuration Using c:\>ipconfigUsing c:\>ipconfig

Command Prompt

Microsoft Windows 2000 [version 5.00.2195](C) Copyright 1985-1999 Microsoft Corp.

C:\>ipconfig

Windows 2000 IP Configuration

Ethernet adapter Local Area Connection:

Connection-specific DNS Suffix . :IP Address. . . . . . . . . . . . : 192.168.1.200Subnet Mask . . . . . . . . . . . : 255.255.255.0Default Gateway . . . . . . . . . : 192.168.1.1

C:\>_

Page 25: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Viewing Trace Using Viewing Trace Using c:\>tracert (ip address)c:\>tracert (ip address)

Page 26: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

SPEEDTEST

http://www.speedtest.net/

http://speedtest.streamyx.com.my/

Page 27: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Viewing Trace Using Viewing Trace Using http://geobytes.com/http://geobytes.com/

Page 28: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

OverviewOverview• Identifying Internet ConceptsIdentifying Internet Concepts •Using Client TechnologiesUsing Client Technologies•Connecting to the InternetConnecting to the Internet• Identifying Web Server ConceptsIdentifying Web Server Concepts

The Internet & WebThe Internet & Web

Page 29: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Identifying Internet ConceptsIdentifying Internet Concepts•The InternetThe Internet • Internet ServicesInternet Services• IntranetsIntranets •Domain NamingDomain Naming

Page 30: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

IntranetsIntranets

Intranet

Extranet

Internet

Page 31: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

The Internet & WebThe Internet & Web

Client

Connection UsingTCP/IP Protocol

Internet

Server

Text, Audio, Video, and Graphics Data

Page 32: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Uniform Resource Locator (URL)Uniform Resource Locator (URL)

• URL (http://example.microsoft.com/tutorial/default.html)– Protocol used (http://)– DNS address (example.microsoft.com)– Path on the server (/tutorial/default.html)

http://example.microsoft.com/tutorial/default.htmlhttp://example.microsoft.com/tutorial/default.html

Page 33: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

http://www.checkdomain.com/list.html

Domain NamingDomain Naming

•Domain Name (istudent.uitm.edu.my)Domain Name (istudent.uitm.edu.my)– Top-level domain (edu)Top-level domain (edu)– Second-level domain (uitm.edu)Second-level domain (uitm.edu)– Subdomain (istudent.uitm.edu.my)Subdomain (istudent.uitm.edu.my)

eduedu

Library.uitm.edu.myLibrary.uitm.edu.my

uitm.eduuitm.edu

istudent.uitm.edu.my

Page 34: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Static Static vs Static Static vs Dynamic Web SiteDynamic Web SiteStatic Web SiteStatic Web Site• • HTML page content is

same for each request• Change to content

requires HTML page edit

• No user interaction• No access to live data•“ Web Site”

Page 35: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Static Static vs Static Static vs Dynamic Web SiteDynamic Web SiteDynamic Web Site• HTML pages dynamically enerated for each request• Content changes based on data, user login, etc.• Allows user interaction• Access to data real- time• “Web Application”

Page 36: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Dynamic Web SitesDynamic Web Sites

• • Web serverWeb server• • responds to HTTP requests and retrieves responds to HTTP requests and retrieves

resourcesresources• • Expand Web server capabilities by providing a Expand Web server capabilities by providing a

gateway between it and external programsgateway between it and external programs• • Common Gateway Interface (CGI)Common Gateway Interface (CGI)• • uses standard I/ Ouses standard I/ O• • new process for each requestnew process for each request• • slow and inefficientslow and inefficient

Page 37: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Dynamic Web Sites cont.Dynamic Web Sites cont.• • NSAPI, ISAPINSAPI, ISAPI

• • Web Server APIWeb Server API

• • runs in- process, making it faster than CGIruns in- process, making it faster than CGI

• • Java ServletsJava Servlets

Page 38: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

History of the WebHistory of the Web• Tim Berners- Lee “invented” the Web in 1990

writing the first Web server and browser.• Marc Andreesen exposed the Web to the

masses with Mosaic the first GUI Web browser in 1993.

• The rest is history...• History WWW

http://www.netvalley.com/intval1.html http://ben.home.cern.ch/ben/TCPHIST.html

Page 39: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

History Internet & WWW http://www.netvalley.com/intval1.html

Page 40: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Web Browsers

BrowserContoh:

Internet Explorer

BrowserContoh:

Internet Explorer

Mainstream Browsers (free and not free)Commercial Browsers (not free)Shareware Browsers (not free)Freeware Browsers (free)Browsers for People with Disabilities(semi)Browsers that Require IE 4/5 to RunOther Accessibility Software for the WebDemo Programs/Non-fullfledged Browsers/Mini-BrowsersObsolete browsers ~ rarely used anymore, if at all (free and not free)

Clearly Obsolete browsers (free and not free)Browsers under DevelopmentMail Readers & News Clients that Understand HTMLOther Programs that can Browse the WebOffline HTML browsers (no http support)Palm-top and Hand-held Browsers (free and not free) http://www.browserlist.fmajor.com/browser-list.shtml

Page 41: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Among Popular BrowserAmong Popular Browser

Web Browsers

Page 42: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

• Mozilla dir.yahoo.com/.../Browsers/Mozilla

• Netscape dir.yahoo.com/.../Browsers/Netscape

• Opera dir.yahoo.com/.../Browsers/Opera

• Safari dir.yahoo.com/.../Browsers/Safari

• Microsoft Internet Explorer (IE) (29) dir.yahoo.com/.../Browsers/Microsoft_Internet_Explorer__IE

• Lynx (13) dir.yahoo.com/.../Browsers/Lynx

• Amaya W3C's testbed browser.www.w3.org/Amaya

• Konqueror Unix-based Web browser, file manager, and universal viewer from KDE.www.konqueror.org

Web Browsers

Page 43: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

How World Wide Web works

WWW ServerWWW Server

Methods to Use to Connect:Home user – Direct ModemOrganization - LAN

PCPC

BrowserContoh:

Internet Explorer

BrowserContoh:

Internet Explorer

Page 45: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

EMAILEMAIL

Among Popular emailAmong Popular email

Page 47: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Internet ProtocolsInternet Protocols

Internet

•HTTPHTTP•HTTPSHTTPS•FTPFTP•SMTPSMTP•NNTPNNTP•HTMLHTML•DHTMLDHTML

Server

Data

Client

Connection Using anInternet Protocol

Page 48: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Hypertext Markup LanguageHypertext Markup Language

<HTML>

<HEAD>

<TITLE>Sales Report</TITLE>

</HEAD>

<BODY>

<H2>Q3 Sales by Region</H2>

</BODY>

</HTML>

Hypertext Markup Language ( HTML )http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Page 49: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Hypertext Markup Language• Generally text is unformatted in your Web

documents. However, to emphasize specific letters, words, or phrases you can use some text formatting options including boldfacing and italicizing.

Depending on your browser, you may also be able to add underlining to emphasize characters. The following examples show the code for boldfacing and italicizing.

• <B>This is bold.</B><STRONG>This is also bold.</STRONG>

• <I>This is italics.</I><EM>This is also italics.</EM>

Page 50: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

http://www.hyperlinkcode.com/make-hyperlink.php

The following is the most basic hyperlink code. To make a hyperlink, add the href attribute to the Anchor (a) tag. The href attribute can have an absolute value (http://www.hyperlinkcode.com/make-hyperlink.php) or a relative value (make-hyperlink.php).

HTML Hyperlink Code

Code <a href="http://www.hyperlinkcode.com">Hyperlink Code</a>

Output > Hyperlink Code

Code In Context Make <a href="http://www.hyperlinkcode.com">Hyperlink Code</a> easily. Output> Make Hyperlink Code easily.

How To Make a Hyperlink

Page 51: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

What is Hyperlink

A hyperlink, or simply a link, is a reference in a hypertext document to another document or other resource. It is similar to a citation in literature. Combined with a data network and suitable access protocol, it can be used to fetch the resource referenced. This can then be saved, viewed, or displayed as part of the referencing document.

The most common type of hyperlink is the URL used in the World Wide Web. A web browser usually displays a hyperlink in some distinguishing way, e.g. in a different colour, font or style.

Page 52: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

• A mouse pointer may also change into a hand motif to indicate a link. In most browsers, links are displayed in underlined blue text when not cached, but underlined purple text when cached. When the user activates the link (e.g. by clicking on it with the mouse) the browser will display the target of the link. If the target is not a html-file, depending on the file type and on the browser and its plug-ins, an other program may be activated to open the file.

Page 53: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

HypertextIn computing, a hypertext system is one for displaying information that contains references (called hyperlinks) to other information on the system, and for easily publishing, updating and searching for the information. The most well-known hypertext system is the World Wide Web.Timeline of hypertext technology and human-computer interaction projects and developments. 

This timeline of hypertext technology, including "hypermedia" and related human-computer interaction projects and developments from 1945 on.

o 1945 Memex (concept)

o 1967 Hypertext Editing System (HES)

o 1968 FRESS (File Retrieval and Editing System) NLS (oN-Line System)

o 1973 Xerox Alto desktop

o 1975 ZOG

o 1976 PROMIS

o 1978 Aspen Movie Map

o 1980 ENQUIRE (not released)

Page 54: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Timeline of hypertext technology….

• 1981• Xerox Star desktop

• 1983• Guide• Knowledge Management system (KMS)• TIES

• 1984o Cyco NoteCards

• 1985o Intermediao Symbolics Document Examiner (Symbolics 

workstations)• 1987

o Authorwareo Canon Cat ("Leap" function, interface)o HyperCard

• 1989o Macromedia Director

• 1990o World Wide Web

• 1991o Gopher

• 1995o WikiWiki

• 1998o Everything2o XML

• 2001o Wikipedia

Page 55: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Types of linksInline linkAn inline link displays remote content without the need for embedding the content. The remote content may be accessed with or without the user selecting the link. For example, the image above is a document that can be viewed separately, but it is included into this page with an inline link.A inline link may display a modified version of the content; for instance, instead of an image, a thumbnail, low resolution preview, cropped section, or magnified section. The full content will then usually be available on demand, as is the case with print publishing software – e.g. with an external link. This allows for smaller file sizes and quicker response to changes when the full linked content is not needed, as is the case when rearranging a page layout.

Page 56: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Types of links…

Anchor

A hyperlink anchor is not necessarily a piece of text - for instance, it may also be a hot area in an image (image map in HTML), a designated, often irregular part of an image. One way to define it is by a list of coordinates that indicate its boundaries. For example, a political map of Africa may have each irregularly shaped country hyperlinked to further information about that country. A separate invisible hot area interface allows for swapping skins or labels within the linked hot areas without repetitive embedding of links in the various skin elements.

Page 57: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

How hyperlinks work in HTMLA web browser usually displays a hyperlink in some distinguishing way, e.g. in a different colour, font or style. The behaviour and style of links can be specified using the Cascading Style Sheets (CSS) language.

In a graphical user interface, the appearance of a mouse cursor may change into a hand motif to indicate a link. In most graphical web browsers, links are displayed in underlined blue text when not cached, but underlined purple text when cached. When the user activates the link (e.g. by clicking on it with the mouse) the browser will display the target of the link. If the target is not an HTML file, depending on the file typeand on the browser and its plugins, another program may be activated to open the file.

Page 58: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

 The HTML code contains some or all of the five main characteristics of a link: link destination ("href" pointing to a URL) link label link title link target link class or link id

It uses the HTML element "a" with the attribute "href" (HREF is an abbreviation for "Hypertext REFerence"[3]) and optionally also the attributes "title", "target", and "class" or "id":<a href="URL" title="link title" target="link target" class="link class">link label</a>Example: To embed a link into a Page, blogpost, or comment, it may take this form:<a href="http://example.com/">Example</a>After publishing, the complex link string is reduced to the following for visualization in typical Web browsers:

Page 59: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

 The Google search engine uses PageRank, a measure of link popularity to determine which page should be ranked first. The more pages that have a hyperlink pointing to a page, the higher rank that page gets. It is actually slightly more complicated than that, see PageRank for more information.

Some websites claim that linking to them is not allowed without permission, see e.g. [1] and [2] (in Dutch). See also deep linking.

Page 60: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

PageRankPageRank is a family of algorithms for assigning numerical weightings to hyperlinked documents (or webpages) indexed by a search engine. Its properties are much discussed by search engine optimization(SEO) experts. The PageRank system is one of the methods that the most successful search engine,Google, uses to determine a page's relevance or importance. It was developed by Google's foundersLarry Page and Sergey Brin while at Stanford University in 1998. As Google puts it:

PageRank relies on the uniquely democratic nature of the web by using its vast link structure as an indicator of an individual page's value. Google interprets a link from page A to page B as a vote, by page A, for page B. But, Google looks at more than the sheer volume of votes, or links a page receives; it also analyzes the page that casts the vote. Votes cast by pages that are themselves "important" weigh more heavily and help to make other pages "important."In other words, a page rank results from a "ballot" amongst all the other pages on the World Wide Webabout how important a page is. A hyperlink to a page counts as a vote of support.

Page 61: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

The PageRank of a page is defined recursively and depends on the number and PageRank metric of all pages that link to it ("incoming links"). A page that is linked by many pages with high rank receives a high rank itself. If there are no links to a web page there is no support of this specific page. The Google Toolbar PageRank goes from 0 to 10. It seems to be a logarithmic scale. The exact details of this scale are unknown.

The name PageRank™ is a trademark of Google. Whether or not the pun on the name Larry Page and the word "page" was intentional or accidental remains an open question. The PageRank process has been patented (US Patent number 6,285,999). [more info on the patent]

PageRank

Page 62: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

 

The formula uses a model of a random surfer who gets bored after several clicks and switches to a random page. The PageRank value of a page reflects the frequency of hits on that page by the random surfer. It can be understood as a Markov process in which the states are pages, and the transitions are all equally probable and are the links between pages. If a page has no links to another pages, it becames a sink and therefore makes this whole thing unusable, because the sink pages will trap the random visitors forever.

However, the solution is quite simple. If the random surfer arrives to a sink page, it picks another URL at random and continues surfing again.

PageRank

Page 63: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

To be fair with pages that are not sinks, these random transitions are added to all nodes in the Web, with a residual probability of usually q=0.15, estimated from the frequency that an average surfer uses his or her browser's bookmark feature.

So, the equation is as follows:

where  are the pages under consideration,  is the set of pages that link to , and N is the total number of pages.

http://www.knowledgerush.com/kr/encyclopedia/PageRank/

PageRank…

Page 64: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

• The PageRank values are the entries of the dominant eigenvector of the modified adjacency matrix. This makes PageRank a particularly elegant metric: the eigenvector is

where R is the solution of the equation

Where the adjacency function is 0 if page does not link to , and normalised such that, for each i

Page 65: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

• The values of the PageRank eigenvector are fast to approximate (only a few iterations are needed) and in practice it gives good results.

• As a result of Markov theory, it can be shown that the PageRank of a page is the probability of being at that page after lots of clicks. This happens to equal where is the expectation of the number of clicks (or random jumps) required to get from the page back to itself.

• The main disadvantage is that it favors older pages, because a new page, even a very good one, will not have many links unless it is part of an existing site (a site being a densely connected set of pages).

http://www.knowledgerush.com/kr/encyclopedia/PageRank/http://www.webworkshop.net/pagerank.html

Page 66: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Conclusions• Hyperlinks are the essence (inti) of the World Wide

Web (WWW). They provide rapid access to segmented information chunks in non-sequential order, mimicking the associative non-linear process used by an individual looking for information (Conklin,1987).

• The links between materials on one site and references provided by other sites on the WWW is regarded as a core characteristic of communication (Benkler, 2006).

• Hyperlinks were a main design feature of the WWW and one of the objectives of the original scheme proposed by Berners-Lee, who wrote that “a ‘web’ of notes withlinks (like references) between them is far more useful than a fixed hierarchical system” (1989: 4).

Page 67: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

http://koleksi.uitm.edu.my/eqps/

Page 68: Hyperlink

http://faizar.onestop.net/http://faizar.ning.com/

[email protected]

Thank You