HTML 4
Linking
Links to Local Files (review)
A simplest anchor link is one that opens another
HTML file in the same directory as the displayed wed
page.
<a href=“filename.html”> text that will on the page to
be clicked on</a>
– a is for “anchor”
– href is for hypertext reference
Ex: <a href="1_Headings.html"> Headings</a>
Index To Sample Pages
You can also keep pictures or
documents in a separate directory
<img src=“../pictures/deer.gif">
<img src=“pictures/deer.gif">
Do not use absolute links
Use: <img src=“../pictures/deer.gif">
not
<img src=“c:/douments/pictures/deer.gif">
As users won’t be able to see the file
Uniform Resource Locator (URL)
A URL has:
Type://in.ter.net.address/directory/sub-
directory/filename
Type” an identifier for the type of Internet
Server: ftp, http, gopher, telnet, file
Internet address of a server:www.google.com
Link to the internet
Linking to a site on the Internet
<a href=“URL”> text to activate line</a>
Example:
<a href=“www.google.com.vn”> Google</a>
Sample Pages
Open Web Pages in New Window
If a user clicks on the below link, it will replace your
web page with Google
<a href=“www.google.com.vn> Google</a>
To prevent this, add a target attribute
<a href=“URL.html” target=“window_name”>
ex:<a href=“www.google.com.vn target=“Google”>
Google</a>
This open the Google website in a new window
“Google”
Same Technique for Thumbnail Links
<a href="pictures/FloorSweepBig.jpg"
target=”Photo”> <img
src="pictures/FloorSweepSmall.jpg"
border=0></a><br>
Sample Report
Hypertext Links & Named Anchors
A “Named Anchor” is a hidden reference to a
particular section in you HTML page.
Format:<a name=“NAME”>text</a>
Ex: <h2><a name=“vn”>Vietnam</a></h2>
A Hypertext Link jumps to the “Named Anchor”
Format: <a href=“#xxxx”> hypertext text</a>
Ex: <a href=“#vn”>Vietnam</a>
Example
<ul><i><h1><a name="return">Contents</a></h1>
<li> <a href="#top"> The Top Section</a>
<li> <a href="#middle"> The Middle Section</a>
<li> <a href="#end"> The End Section</a></i>
<li> <a href="index.html"> Go Back to the Home Page</a>
</ul>
<hr><br><br><br>
-------------------------------------------------------------------------------------------------------------
<h2><a name="top"> The Top Section</a></h2>
<ol>
<li> top notes
<li> top notes
<li> top notes
</ol> Linking
<a href="#return">Return To The Top of the Page</a>
Hypertext Links & Named Anchors
Different Pages
Page with link: http://www.mywebsite.com/Project.html
Named Anchor: <a name=“NAME”>text</a>
<h2><a name=“vn”>Vietnam</a></h2>
---------------------------------------------------
Hypertext Link: <a href=“URL#xxxx”> hypertext text</a>
<a href=“http://www.mywebsite.com/Project.html#vn”>
Vietnam</a>
Homework
Create a website for two of your favorite
poets (or singers/composures)
The Vietnamese German University
Foundation Year
English for Computer Science
Internet
My Favorite Poets
Your Name sources
Your Student ID
1. Poet A (Link to biography)
– Poem 1 (Link to poem)
– Poem 2 (Link to poem)
– Poem 3 (Link to poem)
2. Poet B (Link to biography)
– Poem 1 (Link to poem)
– Poem 2 (Link to poem)
– Poem 3(Link to poem)
Poet Biographical Section
Name
Picture
Short Biography (200-300 words) (reference)
Links to Poems
Link back to home page
Link to your source(s) listed in reference
section
Poetry Sections
At least three poems/songs/etc
Each poem will have a picture to illustrate it
Under each poem include links back to the
top of the page and the home page.
Link to your sources listed in reference
section
Reference Section
Include list of references for where you got
images and information with links to on-line
sources
References
1. King, D (2002). Japanese Literature Second Midterm. Retrieved 21 Jan
2009 from www.danking.org
2. Matsuo Basho (2009). Wikipedia Foundation, Retrieved 21 Jan 2009 from
en.wikipedia.org
3. Frog Image. Retrieved 21 Jan 2009 from www.best-of-web.com
4. Banana Tree. Retrieved 21 Jan 2009 from www.banana-tree.com cfm
5. Makoto Ueda (1970) Matsuo Basho's "Narrrow Road to the Deep North" ,
Twanye Publishers,Inc. Retrieved 21 Jan 2009 from www.uoregon.edu
Notes
No References = zero
Include html comments in your web pages with the
following information
– Class: English for Computer Science
– Instructor : Richard Bradley
– Homework: Poetry Due: 2 March 2012
– Name: Your name
– ID #: your student ID
Poetry Homework
References
“Writing HTML, A Tutorial for Creating Web
Pages.” (June 2000) version 4.5.2 , Maricopa
Center for Learning and Instruction (mcli)
<http://www.mcli.dist.maricopa.edu/tut/index.
html>
Raggett D. “HTML 3.2 Reference
Specification.” W3C Recommendation” 14-
Jan-1997. <http://www.w3.org/TR/REC-
html32>
