Creating A Hypertext Document

Creating a Hypertext Document
Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link. These links can point to:
another section the same document to a different document to a different Web page to a variety of other Web objects
Linking
Hyperlink
References other sources such as HTML documents and images Both text and images can act as hyperlinks Created using the a (anchor) element: <a> </a>
Attribute href specifies the location of a linked resource :
href = http://www.yahoo.com
Link to e-mail addresses:

href = mailto:deitel@deitel.com
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 4 5  6  7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>  <p><a href = "http://www.deitel.com">Deitel</a></p> <p><strong>Click a name to go to that page.</strong></p> <h1>Here are my favorite sites</h1> <body> <head> <title>Internet and WWW How to Program - Links</title> </head> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 4 5  6  7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <p> My email address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> . Click the address and your browser will open an e-mail message and address it to me. </p> </body> <body> <head> <title>Internet and WWW How to Program - Contact Page</title> </head> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
24 </html>
Linking to E-mail
Many Web designers include their e-mail addresses on their Web pages, so that users who access the page can send feedback. You can identify e-mail addresses as hypertext links.
when a user clicks the e-mail address, the browser starts a mail program and automatically inserts the e-mail address into the To field of the outgoing message
The URL for an e-mail address is mailto:e-mail_address. To create a link to the e-mail address davis@mwu.edu, the following code would be entered
<a href=mailto:davis@mwu.edu>davis@mwu.edu</a>
Mail Message Window
window opens when the davis@mwu.edu link is clicked
Adding an Email Link

the address itself is in the code for the mailto: URL
mail message window opens with e-mail address already inserted

7
HTML Hyperlinks (Links) A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: To create a link to another document, use the href attribute To create a bookmark inside a document, use the name attribute
HTML Links - The name Attribute
The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document <a href="#tips">Visit the Useful Tips Section</a> create a link to the "Useful Tips Section" from another page <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>
Internal Linking
Enables the user to jump between locations in the same document
First, create an internal hyperlink destination by setting attribute id of an element Second, create an internal link to this element. Example:
<h1 id=bugs>Bugs </h1>
: <a href=#bugs>Go to Bugs</a>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - List</title> </head> <body>  <h1 id = "features">The Best Features of the Internet</h1>  <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p> <ul> <li>You can meet people from countries around the world.</li> <li>You have access to new media as it becomes public:
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
<li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul>  <h1 id = "bugs">My 3 Favorite Bugs</h1> <p>  <a href = "#features">Go to <em>Favorite Features</em> </a></p> <ol> <li>Fire Fly</li> <li>Gal Ant</li> <li>Roman Tic</li> </ol> </body>
71 </html>
External Linking
HTML Links - The target Attribute The target attribute specifies where to open the linked document. The linked document will open in a new browser window <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> <a href=url target=new_window>Hypertext</a>
Opening A Web Page

This figure shows that a browser may only show a portion of the web page. The user must scroll down to see the rest of the web page.
vertical scroll bar horizontal scroll bar can also be shown

14
Adding Hypertext Links

You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling.
15
How an Anchor Works

When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page.
hypertext links
anchor
16
Creating Anchors
The <a> tag creates an anchor, text that is specially marked so that you can link to it from other points in a document. Text that is anchored is the destination of a link; it is not the text you click on. Each anchor has its own anchor name, using the name attribute i.e. <a name=cc>Classes</a>. An anchor doesnt have to be text. You can mark an inline image as an anchor. Adding an anchor does not change your documents appearance in any way. It merely creates locations in your Web page that become destinations of links. 17
Creating Links
To create a link to an anchor, use the same <a> tag you used to create the anchor. The <a> tags used to create links are sometimes called link tags. Use the href attribute, which is short for Hypertext Reference, to indicate the location to jump to.
href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet it is important to note that the href attribute is case sensitive
You link to an anchor using the anchor name preceded by a pound (#) symbol i.e. <a href=#gra>Grading</a>.
18
Creating Links Continued

After you create the anchors that serve as destinations for your links, you need to create the links themselves. The <a> tag you use to create the anchor and the href attribute to indicate the location to jump to.
19
You should be careful to make each anchor name unique within a document.
Text Links in the Browser

If the headings do not appear as text links, check your code to make sure that you are using the <a> and </a> tags around the appropriate text, the href attribute within the tag, and the quotes and # symbols.
Text formatted as links
20
Images (1)
Three most popular formats
Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element with attributes:
src attribute : Specifies the location of the image file width and height attributes: Pixels (picture elements) alt attribute : the text will be displayed if the browser could not display the image.
HTML The <img> Tag and the Src Attribute Syntax for defining an image: <img src="url" alt="some_text"/> <img src="boat.gif" alt="Big Boat" />
Insert an image from another folder or another server
Align an image within the text
Use an image as a link.
Creating and Using Image Maps (1)

Designate certain areas of an image (called hotspots) as links
Element map
Attribute id identifies the image map
Element img
Attribute usemap refers the map by id.
Example:
<map id=picOne> .. </map> <img src=picture.gif usemap=#picOne />
Creating and Using Image Maps (2)

Element area defines hotspot
Attribute shape and coords
Specify the hotspots shape and coordinates Rectangular ( shape = rect ) Polygon ( shape = poly ) Circle ( shape = circle )
Attribute href
Specifies the links target.
Attribute alt
Provides alternative text for the link.
To create an image map, with clickable regions. Each of the regions is a hyperlink
----------------------------
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Internet and WWW How to Program - Image Map </title> </head> <body> <p>  <map id = "picture">  -->

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area href = "contact.html" shape = "rect" coords = "126,122,198,143" alt = "Go to the contact page" /> <area href = "main.html" shape = "rect" coords = "3,7,61,25" alt = "Go to the homepage" /> <area href = "links.html" shape = "rect" coords = "168,5,197,25" alt = "Go to the links page" />    <area href = "mailto:deitel@deitel.com" shape = "circle" coords = "100,36,33" alt = "E-mail the Deitels" /> </map> -->
50 51 52 53 54 55
 
56 </html>
add style information into the <head> section
External Style Sheet use the <link> tag to link to an external style sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph: <p style="color:blue;margin-left:20px">This is a paragraph.</p>

Creating A Hypertext Document

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Creating A Hypertext Document

Hochgeladen von

Copyright:

Verfügbare Formate

Creating a Hypertext Document

Link to e-mail addresses:

Mail Message Window

window opens when the davis@mwu.edu link is clicked

Adding an Email Link

mail message window opens with e-mail address already inserted

HTML Links - The name Attribute

: <a href=#bugs>Go to Bugs</a>

Opening A Web Page

vertical scroll bar horizontal scroll bar can also be shown

Adding Hypertext Links

How an Anchor Works

Creating Links Continued

Text Links in the Browser

Text formatted as links

Insert an image from another folder or another server

Align an image within the text

Use an image as a link.

Creating and Using Image Maps (1)

Creating and Using Image Maps (2)

add style information into the <head> section

Das könnte Ihnen auch gefallen