Embed Size (px)
Citation preview
Links in HTML
What you need to know….
Hyperlinks or links
Millions of linked web pages make up the World Wide Web
Used to connect a web page to another web page on the same server or to a server located anywhere in the world.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
Types of Links
Linking within a web page Used with large web pages Moves from top to bottom of page or a specific section
Linking to another web page Connects one web page to another web page on the same site
(forward/back)
Linking to another web site Links site to another site
Linking to email Starts new email message to address in link
What can be linked
Text Images/Graphics/Pictures Autoshapes Buttons
The code…
<a href="url">Link text</a> The start tag contains attributes about the link. The element content (Link text) defines the
part to be displayed on a web site
Note: The element content doesn't have to be a text. You can link from an image or any other HTML element.
<A HREF="http://www.htmlgoodies.com">Click Here For HTML Goodies</A>
Here's What's Happening A stands for Anchor
begins link to another page HREF stands for Hypertext REFerence
short way to say to browser-- "This is where the link is going to go."
http://www.htmlgoodies.com FULL ADDRESS of link Notice equal sign in front of it and is enclosed in quotes--Why?
Because it's an attribute of the Anchor tag, a command inside of a command
Where it reads "Click Here For HTML Goodies“ text you want to appear on the page
/A ends the entire link command. Here's what will appear on the page using the command above...
Click Here For HTML Goodies
Anchors
An anchor--used to define a hyperlink destination inside a document
Example idea for anchors: To create "table of contents" at the beginning
of a large document Back to Top links for a long web page
Color in Links
<BODY LINK=“color” VLINK=“color” ALINK=“color”>
link - standard link - to a page the visitor hasn't been to yet. (standard color blue - #0000FF).
vlink - visited link - to a page the visitor has been to before. (standard color purple - #800080).
alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).
Link Attributes
Target attribute: defines where the linked document opens By default, links will open in the current window or frame
Predefined targets are: _blank loads the page into a new browser window _self loads the page into the current window _parent loads the page into the frame that is superior to
the frame the hyperlink is in _top cancels all frames, and loads in full browser
window. Sample Text: <a href=http://www.w3schools.com/ target="_blank">Visit W3Schools!</a>
Link Attributes
name Attribute defines a named anchor inside a HTML document
Named anchor <a name="label">Any content</a>
Link to a named anchor <a href="#label">Any content</a> # defines a link to a named anchor inside a HTML
document
Home page
The home page--main page of a web site MUST be saved as index.html inside a folder
created for website Visitors to a web site normally see this page
first On a home page it is important to identify the
purpose of your web site
Home Page Characteristics
Clearly state what web site is about Keep it Simple
Appearance of page should GRAB the user to want to stay on your site No distractions from the meaning of the site
Free of spelling/grammar errors Design navigation clear for user
Hotspot
A hotspot is an area of text or an image in which the mouse pointer changes when it is moved over the area.
When the pointer changes this tells the user that there is a link
Text links are generally underlined and in a different color font than the rest of the web page (normally blue)
How much do you know…
Now that you are finished, visit http://www.echoecho.com/html.htm
Click on the HTML LINKS section Read through each section skipping these:
ADVANCED TEXT LINKS IMAGE MAPPING Links in Framesets
Take the Quiz at the end of the Tutorial
