HTML
for Begineers | PART :8
HTML
Links and Images
·
Links are nearly found in all the web pages.
Links allows user to click their way from
page to page.
·
Images are of different – different types.
Example-
JPG images, GIF images, PNG images , etc.
HTML
Link – Hyperlink
·
HTML Links are hyperlinks.
·
A hyperlink is a text or an
image you can click on, and jump to another document.
HTML
Links – syntax
In HTML , Links are defined with <a> tag :
<a
herf= “url” >Link text </a>
Example :
<a herf= www.c-sharpcorner.com> c#corner </a>
<a herf= www.c-sharpcorner.com> c#corner </a>
·
The href attribute specifies the destination
address (http://www.c-sharpcorner.com)
·
The link
text is the
visible part (c#corner).
·
Clicking
on the link text, will send you to the specified address.
Local Links
The example above used an absolute
URL (A full web address).
Example:
<a href="htmlimages.gif">HTML Images</a>
<a href="htmlimages.gif">HTML Images</a>
HTML Links -
Colors and Icons
When you move the mouse cursor over
a link, two things will normally happen:
- The mouse arrow will turn into
a little hand
- The color of the link element
will change
By default, links will appear as
this in all browsers:
- An unvisited link is underlined
and blue
- A visited link is underlined
and purple
- An active link is underlined
and red
HTML Links - The target Attribute
The target attribute specifies where to open the
linked document.
This example will open the linked document in
a new browser window or in a new tab:
Example:
<a href="http://www.c-sharpcorner.com/" target="_blank">Visit c#corner</a>
HTML Images
HTML Images Syntax
·
In
HTML, images are defined with the <img> tag.
·
The
<img> tag is empty, it contains attributes only, and does not have a
closing tag.
·
The src attribute defines the url (web
address) of the image:
<img src="url" alt="some_text">
The alt Attribute
·
The alt attribute specifies an alternate text
for the image, if it cannot be displayed.
·
The
value of the alt attribute should describe the image in words.
Example:
<img src="html5.gif" alt="The official HTML5 Icon">
·
The alt attribute is required. A web page
will not validate correctly without it.
HTML Screen Readers
·
Screen
readers are software programs that can read what is displayed on a screen.
·
Used
on the web, screen readers can "reproduce" HTML as text-to-speech,
sound icons, or braille output.
·
Screen
readers are used by people who are blind, visually impaired, or learning
disabled.
Image Size -
Width and Height
·
You can use the style attribute
to specify the width and height of an image.
·
The values are specified in pixels
(use px after the value):
Example:
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
·
Alternatively,
you can use width and height attributes.
·
The
values are specified in pixels (without px after the value):
Example:
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
Width and Height or Style?
·
Both
the width, the height, and the style attributes, are valid in the latest HTML5
standard.
·
We
suggest you use the style attribute. It prevents styles sheets from changing
the default size of images:
Example:
<html>
<head>
<style>
img {
width:100;
}
</style>
</head>
<body>
<head>
<style>
img {
width:100;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder
·
If
not specified, the browser expects to find the image in the same folder as the
web page.
·
However,
it is common on the web, to store images in a sub-folder, and refer to the
folder in the image name:
Example:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
·
If a browser cannot find an image, it will display a broken
link icon:
Example:
<img src="htmltags.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Images on Another Server
·
Some
web sites store their images on image servers.
·
Actually,
you can access images from any web address in the world:
Example:
<img src="http://www.google.com/images/google_gogreen.jpg">
<img src="http://www.google.com/images/google_gogreen.jpg">
Animated Images
·
The
GIF standard allows animated images:
Example:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px">
Note that the syntax
of inserting animated images is no different from non-animated images.
Using an Image
as a Link
It is common to use images as links:
Example:
<a href="default.asp">
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0>
</a>
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0>
</a>
Image Maps
For an image, you can create an image map,
with clickable areas:
Example:
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Image Floating
You can let an image float to the left or
right of a paragraph:
Example:
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the left of the text.
</p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the left of the text.
</p>
Chapter Summary
·
Use
<a herf= “url” >Link text </a> tag to link website.
- Use the HTML <img> element
to define images
- Use the HTML src attribute
to define the image file name
- Use the HTML alt attribute
to define an alternative text
- Use the HTML width and height attributes
to define the image size
- Use the CSS width and height properties
to define the image size (alternatively)
- Use the CSS float property
to let the image float
- Use the HTML usemap attribute
to point to an image map
- Use the HTML <map> element
to define an image map
- Use the HTML <area> element
to define image map areas
No comments:
Post a Comment