Internet Technology
Malak Alamri
+
HyperText Markup Language
(HTML)
Chapter 2
October 27, 2014
Agenda
HTML
1.
2.
HTML Images
Links, and also known as hyperlinks, are defined using the <a> tag A link is
the "address" to a document (or a resource) on the web.
A hyperlink is an element, a text, or an image that you can click on, and jump
to another document.
To create a hyperlink, you use the a tag in conjunction with the href attribute
(href stands for Hypertext Reference). The value of the href attribute is the
URL, or location of where the link is pointing to. The syntax of the HTML links
is:
<a href="value"> link text </a>
a: Anchor
href: Hypertext Reference.
value: URL, web page file name in the same web site or location of where
the link is pointing to.
link text: Defines the part to be displayed.
Go to next page
By clicking on the above link (next page), the page should jump to another web
page called "second.html".
When you move the mouse cursor over a link, two things will
normally happen:
Target Value
Description
_blank
_self
_top
framename
You can make your links "jump" to other sections within the same page. You
do this with named anchors.
To use named anchors, you need to create two pieces of code. One for the
hyperlink (this is what the user will click on), and one for the named anchor
(this is where they will end up).
1.
Created the name anchor first (where the user will end up)
<a name="abc">abc</a>
Then create the hyperlink (what the user will click on). This is done
by linking to the name of the named anchor. You need to precede
the name with a hash (#) symbol.
When you click on the above link(here), this page should jump up to
the "abc" section.
To go back click here
You can specify a default URL for all links on the page to start with. You do
this by placing the base tag (in conjunction with the href attribute) in the
document's head. See the following HTML Code:
<head><base url="http://www.google.com"></head>
HTML Images
To embed an image into a web page, the image first needs to exist in
either .jpg, .gif, or .png format. You can create images in an image
editor (such as Adobe Photoshop) and save them in the correct
format.
Once you've created an image, you need to embed it into your web
page. To embed the image into your web page, use the <img> tag,
specifying the actual location of the image. The syntax of HTML image
is:
<img src="image">
HTML Images
HTML Images
HTML Images
HTML Images
Another img tag attributes that doesnt appear at the previous
example are:
HTML Images
2-Image Maps
HTML Images
3- Animated Images
<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src="http://i1171.photobucket.com/albums/r543/saan2712/smile.gif"
alt=smile" style="width:48px;height:48px">
</body>
</html>
HTML Images
4- Image Floating
<!DOCTYPE html>
<html>
<body>
<p>
<img src="http://i1171.photobucket.com/albums/r543/saan2712/smile.gif"
alt="Smiley face"
style="float:left;width:42px;height:42px">
A paragraph with an image. A paragraph with an image.
A paragraph with an image. A paragraph with an image.
A paragraph with an image. A paragraph with an image.
</p>
<p>The image floats to the left of the text.</p>
</body>
</html>
Thanks