Explanation of the element

The a element is used to create a hyperlink (sometimes just called a “link”) in a document. The linked URI is specified by the href attribute.
The a element is an inline element which can contain texts and other inline elements, but not the a element. Most Web Browsers automatically use special colors for the text and underline the text which creates the a element so that the page is displayed in such a manner that viewers can easily distinguish that particular part from other parts of the document.

Sample HTML

<p>
 For further details, please visit
  <a href="http://www.kumamoto-u.ac.jp/">  the home page of Kumamoto University’s Website </a>
</p>

The part “the home page of Kumamoto University’s Website” becomes a hyperlink.
The linked destination is http://www.kumamoto-u-ac.jp/, which is the attribute value of the href attribute.

The results displayed on the Web Browser

For further details, please visit the home page of Kumamoto University’s Website.

Hyperlink to a file on the same WWW server

You can create a hyperlink to a file on the same WWW server by specifying the URI including the server name as the href attribute. However, to make it simple, the scheme and server name are usually omitted and just path name (folder name and file name) is specified.
For example, you can create a link to “abc.html” which is located in the same folder as the HTML file in question (i.e., the HTML file being edited) by specifying the href attribute of a element to be href="./abc.html" . You can consider this “./” appearing above as a symbol which indicates that the file is “in the same folder”. In other words, “./abc.html” means “abc.html located in the same folder (as the file in question)”.
Then, how can we create a link to “/week06/999q999b03.html” in “week07\ex1.html”? In this case, the link should be specified as href="../week06/999q9999b03.html" . You can consider this “../” used here as a symbol which indicates that the file is “in the folder one level up”.
In other words, “../week06/999q999b03.html” means “999q999b03.html in a folder called week06 which is located in the folder one level up from the folder (week07) containing (the file in question)”.

Sample HTML

<p>
The HTML file we used in the last session is
  <a href="../week03/999q9999b03.html">  this 999q999b03.html.  </a>
</p>

The part “this 999q999b03.html” becomes a hyperlink.
The linked destination is “../week06/999q999b03.html”, which is the attribute value of the href attribute.
However, as a matter of fact, there is no such file as 999q999b03.html. Therefore, when you click the link, you will receive an error message saying that the file is not found.

The results displayed on the Web Browser

The HTML file we used in the last session is this 999q999b03.html.

Link within the same Web page

You can mark a particular spot in a document and create a link to the spot.
The particular spot (called an “anchor”) can be specified by the name attribute of the a element. The attribute value specified with the name attribute becomes the anchor name. The anchor name needs to be unique within one document.
You can create a link to the anchor using the href attribute of the a element. When you create a link to an anchor, unlike URI, “#” is attached to the head of the href attribute value to show that it is an anchor name.
Moreover, you can create a link to the anchor in an HTML file specified by a URI by adding the anchor name together with “#” inserted at the top at the end of the URI which is the attribute value of href. Of course, the corresponding anchor needs to be defined in advance using a name element in the relevant HTML file.

Sample HTML

<h3><a name="midashi"></a>Attaching an anchor to the heading </h3>
<p>
  
  <a href="#a_youso"> This is a hyperlinked heading  </a>
  located previously in this textbook <br>
  You will jump
  <a href="#midashi">to midashi </a>the anchor defined two lines above
</p>

An anchor called “midashi” is attached to the h3 element on line 1 of the above sample.
An anchor called “a_youso” has been defined in the top part of this page. “This is a hyperlinked heading” creates a link to that anchor.
“to midashi” creates a link to the first line of this sample.

The results displayed on the Web Browser

Attaching an anchor to the heading

This is a hyperlinked heading located previously in this textbook
You will jump to midashi the anchor defined two lines above

When you click “This is a hyperlinked heading”, you will jump to the heading, “Hyperlink (a element, …” located earlier in this textbook.
When you click “to midashi”, you will jump to the line containing “Attaching an anchor to the heading”.

Target attribute

You can specify two or more attributes. For example:

<a href="http://www.kumamoto-u.ac.jp/" target="_blank"> 
The home page of Kumamoto University’s Website (to be displayed in a new window).
</a>	

As shown above, in addition to “href”, you can add another attribute “target” (to specify the place of display).
Using the “target” attribute, you can display the page on a uniquely named frame or window or use the following names which have already been registered.

_top	：Removes the frame display so that the page is displayed across the whole window
_blank	：Opens up a new window to display the page

Names that have been already registered include _self and _parent. Please check how they behave.

Let us display an image file

Explanation of the elements and the attributes

An img element is used to display (insert) an image. The img element is an inline element. Being an empty element (does not have any content), no end tag is required.
When you define an img element, attach an src attribute to specify the URI of the image file and an alt attribute to specify alternative text. The alternative text specified by the alt attribute is used when there is no image file specified by the URI or for text/audio browsers which cannot display images.

Sample HTML

<p>
  This is a sample image.
  <img src="./apple_tree.png" alt="Image of an apple tree">
  An image of an apple tree is displayed on the same line, isn’t it?
</p>

<p> When you are to display an image independently, all you have to do is
 to make it a child element of a block-level element.  </p>
<p> <img src="./niwatori.png" alt="Image of a chiken"> </p>
<p> This time only an image</p>

(Note) “Here is an image of an apple tree” and “ Here is an image of a chicken/a>”. Click the links above, then right click the image displayed, and select “Save the image as” to save it in “week07”. If you do this, you can confirm that the sample HTML above results in the same display on the Web Browser as shown below.

The results displayed on the Web Browser

Specifying the size using the width attribute and the height attribute

You can specify the width and the height of the image in “pixel value” by adding the width attribute and the height attribute to the img attribute. This is convenient, because you can specify the size on the Web Browser regardless of the original size of the image. (Enlargement and reduction is carried out automatically.)
You can specify the attribute value in “%” rather than in “pixel value”. In this case, the ratio is not the ratio to the original image, but the ratio to the currently available horizontal and vertical area on the Web Browser.

Sample HTML

<p>
This is the same image as the sample above.
  <img src="./apple_tree.png" alt="Image of an apple tree" width="40" height="50">
Displayed in a small size thanks to the width attribute and the height attribute.
</p>

The results displayed on the Web Browser