HTML - Assignment Two
Skills: link to another page, Image as a LINK, link within a page (anchor), image resize, image
border, meta tags
Task: In Notepad, open up your HTML One assignment. Choose file, save as, and call the new
document HTML_TWO.HTML
You are going to ADD to this page. See the list of items to add below, along with an explanation
of each.
Include the following:
1. External link to another site: choose a link to a website that is relevant to your topic.
The tags used to produce links are the <a> and </a>.
The <a> tells where the link should start and the </a> indicates where the link ends.
Everything between these two will work as a link.
The target of the link is added to the <a> tag using
the href="http://www.whateverpage.com" setting.
The example below shows how to make the word here work as a link to yahoo.
Click <a href="http://www.yahoo.com">here</a> to
go to yahoo.
You simply:



Specify the target in the <a href=" ">.
Then add the text that should work as a link.
Finally add an </a> tag to indicate where the link ends.
2. Image as a LINK: now that you’ve made a link, let’s turn your image on your page into a link.
If you want to make an image work as a link, the method is exactly the same as with texts.
You simply place the <a href> and the </a> tags on each side of the image.
Below is the HTML code used to make the image work as a link to a page calledmyfile.htm:
<a href="myfile.htm"><img src="rainbow.gif"></a>
3. link within a page (anchor): This functionality allows you to have the user go to a
specific spot on your web page.
Linking to anchors is very similar to normal links. Normal links always point to the top of a page.
Anchors point to a place within a page.
A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor
meaning a specific place in the middle of your page).
To link to an anchor you need to:


Create a link pointing to the anchor
Create the anchor itself.
An anchor is created using the <a> tag.
If you want to create an anchor called chapter4, you simply add this line where you want
the anchor to be:
<a name="chapter4"></a>
After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like
this:
Click <a href="#chapter4">here</a> to read chapter
4.
Note:
When linking to an anchor on a page you need to put a # in front of the anchor.
When you link to an anchor on the same page, simply enter
<a href="#YourAnchor">blabla</a>
Anchors are generally used when you create pages with considerable amounts of text. You
would typically make an index at the top of the page linking to the anchors that have been
added to key places in the text that follows.
4. Resize Image: Even if you already set a size for your image, reset it using these
instructions, it’s an important skill to know.
You can change the size of an image using the width and height attributes.
In general, it is not advisable to reduce image size using these settings, since the image will
be transferred over the internet in its original size no matter what reduction is set for it.
This will slow the loading of your webpage.
This means, that if you have an image that is bigger in size than you want it to be on your
page, you should reduce the size in a graphics program, rather than reducing the size on the
webpage using the width and height attributes.
On the contrary, sometimes, it can be wise to enlarge images using this technique.
Below are two presentations of the exact same image - with different settings for width and
height.
<img
src="http://www.echoecho.com/rainbow.gif" width="60"
height="60">
<img
src="http://www.echoecho.com/rainbow.gif" width="120"
height="120">
If you leave out the settings for width and height, the browser will automatically use the
real size of the image
However, you should always enter the settings for width and height, even when using the
real size.
The reason is that if the settings are left out, the browser can't build the page until the
image is loaded entirely.
This means, that the visitor cannot read text around the image while the image itself is
loading - which in turn will give the visitor an impression of a slow loading page.
This becomes especially true if the image is inside a table.
In that case, the whole table will not be shown until the image is loaded entirely.
5. Image border: a border around an image can help make the image stand out. Place a
border around your image.
You can add a border to the image using the border setting shown in the example below:
<img
src="http://www.echoecho.com/rainbow.gif" border="5">
Please note that the larger the number (in border =”5”, the thicker the border). Adding a
border to your image might help the visitor recognize that the image is a link. However, the
net is filled with images that work as links and have no borders indicating it - so the average
visitor is used to letting the mouse run over images to see if they are links.
Still - if you have an image that is often mistaken you might consider adding a border to it although you should probably consider changing the image entirely - since if it does not
indicate by itself that it is a link then it isn't serving it's purpose.
6. meta tags: Meta tags are super important. They tell users how to find your web page.
Meta tags are used to store information usually relevant to browsers and search engines.
For example, some search engines look to meta tags for descriptions, keywords, etc.
Other examples have relevance to the browser: Examples would be tags telling it to load a
specific url after x seconds or tags telling it that a certain page should not be cached.
Another example is the ICRA meta tag. This tag can prevent sites with adult content from being
seen on IE browsers.
Finally, some meta tags serve a purpose that is unique for the site in question. An example
might be a newspaper site, where the journalist sends a text of an article to an advanced tool
that creates an HTML document of it. This program may add special meta tags to allow an
indexing of the articles. So if you ever see a strange meta tag that is not listed the books, this is
probably the reason.
DESCRIPTION Meta tag
<META name="DESCRIPTION" content="AN HTML
Tutorial">
Most search engines will display the description when they list results from a search.
If you do not include this tag, then the engine will simply list the first words on the page - which
is not always very meaningful.
KEYWORDS Meta tag
<META name="KEYWORDS" content="html,
webdesign, javascript">
This meta tag was intended to be used for keywords with special relevance for the page.
But because of misuse, many engines skip them. Others use them as an indicator of whether a
page is spam or not.
The few that use them to indicate what the page is really about, do not value them as much as
they used to.