anchors guide in html
DESCRIPTION
htmlTRANSCRIPT
Lesson 2 The Anchor Unit II
Anchor Uniform Resource Locator
Protocol Internet Protocol
Path Hypertext Reference
The Anchor
The Anchor is also known as Link. Links make a web page interactive. Linking a web page is done by typing the address of the web page or what is known as the Uniform Resource Locator (URL). The Uniform Resource Locator is a standard way of referencing information on the Internet.
Below is a sample of an Uniform Resource Locator(URL).
Example http:// TIP.edu.ph/InformationTechnology/main.html http:// www. JEDI.edu.ph/
http:// Lyceum.edu.ph/
KEYWORDS
Lesson 2 The Anchor Unit II
3 Main Parts of Uniform Resource Locator
There are three main parts of Uniform Resource Locator. They are the: (1) Protocol, (2) Domain Name, and the (3) Path.
Protocol
The Protocol is the name which Internet Protocol used to access the document. Examples are the http, ftp, News Group, gopher, telnet and other supported protocols.
Domain Name
The Domain Name identifies the name of the document host server and is separated from the Protocol with colon ( : ) and a double slash ( // ).
Example HTTP://www. TIP.edu.ph HTTP://www. LYCEUM.edu.ph HTTP://www. AMA.edu.ph
Path
The Path identifies the path of the document to be retrieved and is commonly separated from the Domain Name with a single slash ( / ). Ex. TIP/csitim.main.html
ExampleTIP/csitim.main.htmlASIA/country.main.html
PHIL/capital.main.html
Lesson 2 The Anchor Unit II
Uniform Resource Locator Internet Protocol
There are different URL Internet Protocol. They are enumerated as follows.
Hypertext Transfer ProtocolIt is commonly identified as http and it is the standard protocol for
linking to web pages with multimedia content.Example :
http://manila.edu.phhttp://tokyo.edu.phhttp://newdelhi.edu.ph
File Transfer ProtocolIt is commonly identified as ftp and is used to create links to files and
download ftp files. Example :
ftp://ftp.thai.val.eduftp://ftp.phil.val.eduftp://ftp.jap.val.edu
News GroupIt is commonly identified as news for the Usenet newsgroup service.Example :
news.infosytemslocal.infosytemsworld.infosytems
Lesson 2 The Anchor Unit II
GopherIt is commonly identified as gopher and a predecessor to the World
Wide Web.Example :
gopher://gopher.manila.edu.phgopher://gopher.bangkok.edu.phgopher://gopher.tokyo.edu.ph
TelnetIt is commonly identified as mail client program.Example : mailto:[email protected]
Lesson 2 The Anchor Unit II
Link Types
There are two different types of Links. They are (A) External Link and (B) Internal Link. Both have different purpose and use.
A. External LinksExternal Links are always full URL and are linked to pages on other
web servers. An HTML Program using an anchor <A HREF> is shown below.
HTML Program 5
Lesson 2 The Anchor Unit II
The first link refers to files that are in your computer. This is an example of a dependent tag known as the Anchor which is a command for linking. The HREF or HYPERTEXT REFERENCE announces the web address which is in between the quotes.
If your web address is out of your own files, the address must have the proper protocol, in this particular case the http. Even if you will use other Internet Protocol, the same rule applies just have the protocol address gopher, ftp or others.
The following shows the Program Output of the HTML Program 5.
Program Output 5
Lesson 2 The Anchor Unit II
B. Internal Links
Internal Links within the same page only require few commands. These follow the targeted page on the same page which the link appears. The (#) symbol refers to a named anchor point within the current document rather than a separate page.
Below is a sample program showing an Internal Link.
HTML Program 6
Lesson 2 The Anchor Unit II
Below is the Program Output of the HTML Program 5 showing an Internal Link.
Program Output 5
Lesson 2 The Anchor Unit II
IMAGE MAPS
The Image Maps are images that are usually in GIF, JPEG or Bitmap format that have been divided into regions. Each region commonly has a HOTSPOT which is a defined area that once clicked on activates the link area.
There are two types of Image Maps. They are the: (1) Client-Side Image maps and the (2) Server-Side Image Maps. The Client-Side Image Maps are the commonly
used (USEMAP) part of the HTML document (in an element called MAP) and linked to the image via Web Browser. Image maps commonly called (ISMAP) involve a separate map file that is linked to image by program running on a Web server. The server looks at the coordinates of hotspots for that particular hotspots. The attributes are shown below.
Tag Attribute
Values Description
MAP
“map” – specifies a container for client-side image map. The <AREA> element is placed
inside the <MAP> container.
AREA SHAPE“RECT”
“CIRCLE”“POLY”
“area” – Defines an area within a client-side image map
definition. It indicates an area where visitors can
choose to link to another document .
COORDS
-For Rectangle“(x1,y1,x2,y2)”-For Circle“(Center x, Center y & radius)”-For Poly“(three or more pairs of
coordinates)”
“coordinators” – Identifies the coordinates within an
image map that define the image map area.
HREF “URL”
“hypertext reference” – It points to some URL which can take one of two forms
Lesson 2 The Anchor Unit II
The following is an HTML Program that uses Image Map. Attributes such as
SHAPE, COORDS, and HREF are used in this program.
HTMP Program 6
Lesson 2 The Anchor
Unit II
Below is the Program Output of the HTML Program 6 that shows a link when you point the mouse over on specific part of the image. Notice that the mouse pointer changes to hand shape pointer.
Program Output 6
Lesson 2 The Anchor Unit II
External Images, Sounds and Animations
An image file can be opened in a separate document when you activate a smaller inline version of the image which is also included in the document. This image is called an External Image and its purpose is to slow down the loading of the main document with a bigger image.
Take note that the Image, sound or animation file should be an existing file.
IMAGESTo include a smaller image as a link to a bigger External Image, write the
following sample program.
HTML Program 7
Lesson 2 The Anchor Unit II
Below is the Program Output of the HTML Program 7 showing a large image link to a smaller image.
Program Output 7
Lesson 2 The Anchor Unit II
SOUNDSTo include sounds, write the following program shown below.
HTML Program 8
Program Output 8
Lesson 2 The Anchor Unit II
ANIMATIONSTo include animations, write the following program shown below.
HTML Program 9
Lesson 2 The Anchor Unit II
The Anchor is also known as Link. Link makes a web page interactive. Linking a web page is done by typing the address of the web page or what is known as the Uniform Resource Locator (URL).
There are three main parts of Uniform Resource Locator. They are the: (1) Protocol, (2) Domain Name, and the (3) Path.
An image file can be opened in a separate document when a user activates a smaller inline version of the image which is also included in the document. This image is called an External Image.
Image maps commonly called (ISMAP) involve a separate map file that is linked to image by program running on a Web server.
Lesson 2 The Anchor Unit II
KEYPOINTS
HANDS-ON ACTIVITY:
ACTIVITY 1 Spot the Errors (10)
ACTIVITY 2Create a program that will display a rectangle image divided into four parts. The sizes may vary depending on the size of the country that will link to it.
Links:Taiwan.html Japan.htmlHongkong.html Singapore.html