Top Banner
HTML Essentials HyperText
13

HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Dec 28, 2015

Download

Documents

Chad Reeves
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

HTML EssentialsHyperText

Page 2: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Why HyperText ?

• Hypertext is text or pictures which reference other pages which the reader can immediately access

• Hypertext pages are interconnected by hyperlinks, typically activated by a mouse click, key-press sequence, or by touching the screen

• Hypertext documents can either be static ( prepared and stored in advance ) or dynamic ( continually changing in response to user input )

Page 3: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Where HyperText Occurs

• Hypertext will only occur within the < body > tag

• Produces

• Links other web pages / files to the current page

• Use can randomly select where to read next

Page 4: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Basic Tag

• The < a > and < /a > tags form the basis of the hyperlink

• The HyperLink has two anchors:

• Invisible anchor: Where the link goes

• Visible anchor: What the user sees

< a <<options>> > Link text < /a > [ invisible ] [ Visible ]

Page 5: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

< a > tag: Visible Anchor

• The Visible Anchor is the window dressing part of the < a > tag

• It is visible to the user

• Text saying almost anything

• Picture

• Outline line

• User will just click on the item to access the Invisible Anchor

Page 6: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

< a > tag: Invisible Anchor

• The Invisible Anchor is the actual working part of the < a > tag

• The first attribute ( almost always specified ) is the href

• The href specifies the destination anchor and will accept almost any protocol

• http://

• ftp://

• telnet://

• mailto:

Page 7: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

< a > tag: Invisible Anchor

• Other attributes that are part of the < a > tag

• href: lists the destination portion

• title or id: provide additional / advisory information about the tag

• name: provide a name so that another link may access it

• target: discussed more when studying frames

• Several more attributes available. Most have been deprecated by HTML5

Page 8: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

href attribute

• The href attribute is specified in almost all uses of the < a > tag

• To link to other pages on the Internet:

• href:// < web site address outside the current site >

href="http://www.philscis.com/csis1430main.html"

• href: < page within the current web site >

href="csis1430Syllabus.pdf

Page 9: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

href attribute

• To link to the same page

<!-- Here is the link --><p>You can check the facts by reading the

<a href="#refs">references</a> at the end of this article</p>

<!-- Here is the link’s destination -->

<a id="refs" href="#refs">References</a>

Page 10: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

href attribute

• The href command can also be used to invoke other protocols

• An email link<a href="mailto:[email protected]?subject=Hello&body=body text">Send Mail</a>

• Invoke telnet<a href="telnet://10.0.0.230">Router at

10.0.0.230</a><a href="ssh://10.0.0.230">Router at

10.0.0.230</a>• Invoke FTP

<a href="ftp://someftpserver.com">An FTP server</a>

Page 11: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

title or id attribute

• The title or id attribute will display text while hovering over the link

• There are several other attributes available that are available but are not used generally

Page 12: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Link colors

• Link may have three states• Link: state when hasn’t been touched

• Active: just as user selects

• Visited: after selection

• Colors• Default: blue, red, purple

• May be changed by using values in <BODY> tag or thru CSS

• Attribute names are: link, alink, vlink

• May be altered by using these attributes within the < body > tag and assigning new colors

Page 13: HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

The End